We've been working on 3 larger Umbraco sites in which we've implemented our own Linq to Umbraco strategy. It's a fairly simple strategy, it doesn't involve custom expression trees or anything, it simply leverages Linq to Xml, IEnumerable<T> and extension methods. In simple terms, we basically convert Xml nodes into our own objects which we can then run typed Linq queries against. Since the performance of deserialization of this Xml into objects was one of our concerns, we implemented Microsoft's Policy Injection framework to handle the caching of our Umbraco objects which works really well (more on this later). Here's a quick example of what this allows you to do with Umbraco data (in this case Umbraco is storing information about events, such as festivals, etc...)

var todayEvents =(from e inGetEvents()
                   where e.FromDate.Date==DateTime.Now.Date
                   select e).ToList();

Background

In order for this to work, there is a bit of setup involved. The way that we've gone about this implementation is by defining a data model for each Document Type that you want to be able to use in this framework. In this example, Umbraco will need to be setup with a few Document Types: Event, EventComment, EventOrganizer, EventsContainer. I've included the definitions of these doc types in the source code so you can easily import them. For an event model, we would create an interface:

public interface IUmbEvent:IUmbracoItem 
{ 
    System.Collections.Generic.ListEventComments{ get; set; }  
    string EventTitle{get;set;} 
    DateTime FromDate{get;set;} 
    string FullDescription{get;set;} 
    string ShortDescription{get;set;} 
    bool ShowInListing{get;set;} 
    DateTime? ToDate{get;set;} 
}

You'll notice this interface extends IUmbracoItem which I've defined in our code library. It contains all of the basic properties of an Umbraco node:

public interface IUmbracoItem 
{ 
    DateTime CreatedDate { get; set; } 
    int CreatorId { get; set; } 
    string CreatorName { get; set; } 
    int Id { get; set; } 
    int Level { get; set; } 
    System.Collections.Generic.DictionaryNodeData { get; } 
    string NodeName{ get;set; } 
    int NodeType{ get;set; } 
    string NodeTypeAlias{ get; set; } 
    int ParentId { get; set; } 
    string Path{ get; set; } 
    int SortOrder { get; set;} 
    int? Template { get; set;} 
    DateTime UpdateDate{ get; set; } 
    string UrlName { get; set;} 
    string Version { get; set;} 
    string WriterName { get; set;} 
}

Next I've created a class that implements this interface called UmbEvent which extends UmbracoItem(which in turn implements IUmbracoItem). The constructor function of these objects are what does the deserialization:

public UmbEvent(XElement x) 
            :base(x) 
{ 
    //Get the from date and use the DateConverter to convert it. 
    //If the returned date is MinValue, then the value in Umbraco has not actually 
    //been set and since it is mandatory, we'll throw an Exception. 
    FromDate = x.UmbSelectDataValue("FromDate",DateConverter); 
    if(FromDate == DateTime.MinValue) 
        throw new Exception(string.Format(
                "The node with id {0} does not have a start date set", 
                this.Id.ToString())); 

    //Get the ToDate using a NullableDateTimeConverter 
    ToDate= x.UmbSelectDataValue("ToDate",NullableDateTimeConverter); 

    EventTitle= x.UmbSelectDataValue("EventTitle"); 
    ShortDescription= x.UmbSelectDataValue("ShortDescription"); 
    FullDescription= x.UmbSelectDataValue("FullDescription"); 
    
    //Get the ShowInListing using the IntConverter since the value stored in Umbraco is 
    //an integer, not a boolean. 
    ShowInListing= x.UmbSelectDataValue("ShowInListing",IntConverter)==1;            
    
    //Select all child "node" nodes that have a node type alias 
    //of "Event Comment" from the current element, deserialize them 
    //to UmbEventComment objects, and store them in our List property. 
    EventComments= x.UmbSelectNodes() 
        .UmbSelectNodesWhereNodeTypeAlias("EventComment") 
        .Select(n =>newUmbEventComment(n)) 
        .ToList();            
}

In the code for the UmbracoItem class are some helper methods for data conversion so exceptions are not thrown and that data is converted properly. 

The next step is to setup the data service layer. I generally create a different service class for each model and in this example we'll have IUmbEventService interface with an UmbEventService class defined as:

public interface IUmbEventService:IUmbracoService 
{ 
    intCreateEvent(IUmbEvent cqEvent); 
    voidUpdateEvent(int eventId,IUmbEvent e); 
    ListGetEvents(); 
    IUmbEventGetEvent(int eventId); 
    DateTimeLastEventDate{get;} 
}

Umbraco Examine is a powerful, fully configurable, and extensible library used for indexing Umbraco content to allow for fast and easy content searching. It utilizes the Lucene.Net library which is included in the Umbraco installation (v2.x). It is extremely easy to setup and caters for simple indexing/searching to very complex index/searching by utilizing it's fully extensible codebase and it's event model. The library was built with .Net 3.5 SP1 and has not been tested with previous versions of .Net.

• Binaries:  UmbracoExaminev4.zip (23.36 kb)
  • Read the Readme.txt file for basic setup instructions
• Source code @ CodePlex: http://umbracoexamine.codeplex.com/
• Documentation
  • Basic Setup
  • Basic Search
  • Advanced Setup
  • Advanced Search
  • Using the event model (coming soon...)
  • Extending Umbraco Examine (coming soon...)
  • Re-indexing dashboard plugin (coming soon...)

Basic Setup

• Copy the DLL files to the bin folder
• Add the following to the <configSections> portion of your Web.config file:

<section name="UmbLuceneIndex" 
	type="TheFarm.Umbraco.Lucene.Configuration.IndexSets, TheFarm.Umbraco.Lucene" />

• For the most basic setup, add the following to the configuration in your Web.config (Also see the readme.txt and app.config files in the binaries download!):

<UmbLuceneIndex DefaultIndexSet="MyIndexSet" EnableDefaultActionHandler="true">
    <IndexSet SetName="MyIndexSet" IndexPath="~/data/UmbracoExamine/" MaxResults="100">
        <IndexUmbracoFields>
            <add Name="id" /> <!-- REQUIRED -->
            <add Name="nodeName" /> <!-- REQUIRED -->
            <add Name="updateDate" />
            <add Name="writerName" />
            <add Name="path" />
            <add Name="nodeTypeAlias" /> <!-- REQUIRED -->
        </IndexUmbracoFields>
        <IndexUserFields>
            <add Name="PageTitle"/>
            <add Name="PageContent"/>
        </IndexUserFields>
        <IncludeNodeTypes />
        <ExcludeNodeTypes />
    </IndexSet>
</UmbLuceneIndex>

• Create the folder: ~/data/UmbracoExamine/ since this is what has been specified for the index path above. 
  • Ensure that the IIS user has full control on this folder.
• Since EnableDefaultActionHandler is set to true, each time a node is published, it will be indexed based on the rules suplied in the configuration. When a node is unpublished, it will automatically be removed from the index.
• Log into Umbraco, publish a node and verify that files have been created in the index path as specified above.

Basic Search

• To perform a search:

UmbracoIndexer examine = new UmbracoIndexer();
List<SearchResult> results = examine.Search("find this", true);

• The returned structure is simple, containing 3 properties: Id, Score and Fields:

public int Id { get; set; }
public float Score { get; set; }
public Dictionary<string, string> Fields { get; set; }

• The Fields property contains all of the field data that has been configured in the web.config file.

Advanced Setup

You can create multiple indexes depending on your needs. For example, you may want to have different indexes for different portal sites in your content tree, or different indexes to separate the type of content being indexed such as one for News and one for Forum, as an example. Creating different indexes if easy:

<UmbLuceneIndex DefaultIndexSet="Site1" EnableDefaultActionHandler="true"> 
<!-- Create an index for a site called 'Site1' which has a starting parent 
node in the content tree of 1234. Only nodes that have the Id, or are children of node 1234 will be indexed. --> 
<IndexSet SetName="Site1" IndexPath="~/data/indexes/site1/" MaxResults="100" IndexParentId="1234">
 <IndexUmbracoFields> 
 <add Name="id" /> <!-- REQUIRED --> 
 <add Name="nodeName" /> <!-- REQUIRED --> 
 <add Name="updateDate" /> 
 <add Name="writerName" /> 
 <add Name="path" /> 
 <add Name="nodeTypeAlias" /> <!-- REQUIRED --> 
 <add Name="parentID"/> 
 </IndexUmbracoFields> 
 <IndexUserFields>
 <add Name="PageTitle"/> 
 <add Name="PageContent"/> 
 <add Name="CommentText"/> 
 <add Name="CommentUser"/> 
 <add Name="umbracoNaviHide"/> 
</IndexUserFields> 
<IncludeNodeTypes> 
 <add Name="HomePage" /> 
 <add Name="BasicPage" /> 
 <add Name="Comment" /> 
</IncludeNodeTypes> 
<ExcludeNodeTypes /> 
</IndexSet> <!-- Create an index for a site called 'Site2' which has a starting parent node in the 
content tree of 4567. Only nodes that have the Id, or are children of node 4567 will be indexed. --> 

<IndexSet SetName="Site2" IndexPath="~/data/indexes/site2/" MaxResults="100" IndexParentId="4567"> 
 <IndexUmbracoFields> 
 <add Name="id" /> <!-- REQUIRED --> 
 <add Name="nodeName" /> <!-- REQUIRED --> 
 <add Name="updateDate" /> 
 <add Name="writerName" /> 
 <add Name="path" /> 
 <add Name="nodeTypeAlias" /> 
 <!-- REQUIRED --> 
 </IndexUmbracoFields> 
 <IndexUserFields> 
 <add Name="PageTitle"/> 
 <add Name="PageContent"/> 
 <add Name="umbracoNaviHide"/><!-- You can add as many user fields here that you would like to be indexed... -->
 </IndexUserFields> 
 <IncludeNodeTypes /> 
 <ExcludeNodeTypes><!-- Index everything except for document types of 'UserNotes' --> 
 <add Name="UserNotes" /> 
 </ExcludeNodeTypes>
 </IndexSet>
</UmbLuceneIndex>

Advanced Search

There are a few overriden search methods you can use to perform different types of searches, all depends on what kind of results you want to acheive:

//This will create a new examiner to search in Site1 since Site 1 is 
//listed as the default Index in the configuration. 

UmbracoIndexer examine = new UmbracoIndexer(); 
List<SearchResult> results = examine.Search("find this in Site1", true);  

//This will create a new examiner to search in Site2 UmbracoIndexer examine2 = new UmbracoIndexer("Site2"); List<SearchResult> results2 = examine2.Search("find this in Site2", true);  
//disables wild card searching 

List<SearchResult> results3 = examine2.Search("find exact matches in Site2", false);  

//searches site 2 but only in NewsArticle document types

List<SearchResult> results4 = examine2.Search("find news in Site2",  	"NewsArticle", true, null);  

//searches site 2 but only for nodes that are children of the node with ID 4999 

List<SearchResult> results5 = examine2.Search("find something in Site2", "", true, 4999);  
//searches site 1, in all of it's defined doc types to be searched but only in  
//the properties: PageTitle and PageContent and will only return a maximum  
//of 10 results. 

List<SearchResult> results6 = 
examine.Search("find in Site1", "", true, null, new string[] {"PageTitle","PageContent"}, 10);

... is a provider based, config driven search and indexer framework. Examine provides all the methods required for indexing and searching any data source you want to use. It is agnostic of the indexer/ searcher API, as well as the data source. It's provider model driven so indexers and searchers for any type of data can be plugged in.

Umbraco Examine

... is a combination of Examine, Umbraco and Lucene.Net to make one powerful, flexible, extensible, and very fast search engine for Umbraco 4.x. Umbraco Examine is a Lucene.Net implementation of Examine using Umbraco as the data source. Umbraco Examine is very easy to setup and start working with and it's fully configurable by a .Net configuration section. Since each Umbraco installation is different, Umbraco Examine generally needs to be configured differently per instance.

Features

• Examine is a framework using a provider model, so the sky is the limit with regards to functionality if you need to build it.
• The base index providers in Examine have tons of handy events which gives you complete control over the entire indexing process without having to write your own provider. This makes it extremely easy to add custom data to indexes, intercept the data going into the index, and all sorts of other fun stuff.
• Out of the box, Examine has a fluent .Net querying language (it also obviously supports a simple free text string search too!) Example: 
  

  searchCriteria
  .Id(1080)     
  .Or()     
  .Field("headerText", "umb".Fuzzy())     
  .And()     
  .NodeTypeAlias("cws".MultipleCharacterWildcard())     
  .Not()     
  .NodeName("home");

• Umbraco Examine, has loads of features!
  • Hugely extensible through events
  • FAST.... VERY FAST!
  • Load balancing support
  • Multiple indexes. You can create as many different indexes as you want which is handy for things like multilingual websites, portal sites, etc...
  • Targetted indexing. You can specify via configuration as to what node types, properties, and node subsets (based on parent node) that you want included in your index.
  • If you're a Lucene fanatic, you can specify any type of Analzers you want to use for your indexing or searching via configuration.
  • Support for indexing any combination of: Published, Unpublished and Protected content via configuration.

 Umbraco Examine is bundled into the Umbraco 4.1 core and is now used as the internal back-office search engine. So what are you waiting for? Let the search begin!

Visit the links below for the binaries, source code and documentation.

• RC 2 Released @ CodePlex: http://examine.codeplex.com/releases/view/43765
  • The source also contains a test/demo project for a reference to configuration settings and how to use the codebase. You can download the source from the source control tab.
• Issue Tracker @ CodePlex: http://umbracoexamine.codeplex.com/WorkItem/List.aspx
• Discussions @ CodePlex: http://umbracoexamine.codeplex.com/Thread/List.aspx
• Documentation and downloads:
  • http://examine.codeplex.com/documentation

The benefits of the lineTo method (over the curveTo method) are that the resulting drawing can be very accurate, and that the maths used is simpler, neither of these were necessary for what we were doing.

We wrote our library with some goals, firstly, that it used the curveTo for all of it’s drawing. We also wanted to be able to construct paths without specifying control points, just the main points that the path passed through and a “tension” to describe the curve that gets drawn between.

The code for the bezier library is part of our Open Source Library

Here’s an example of the kind of thing that can be done easily with the library.

Here's the source:

package 
{
        import flash.display.Sprite;
        import flash.display.StageAlign;
        import flash.display.StageScaleMode;
        import flash.events.Event;
        import flash.events.MouseEvent;
        import flash.geom.Point;
        
        import org.farmcode.bezier.BezierPoint;
        import org.farmcode.bezier.Path;
        
    [SWF(backgroundColor="#dfdfdd", frameRate="25", width="700", height="400")]
    public class WaveTestextends Sprite
    {
                        //Math
            privatevar theta:Number=0;
            privatevar buffer:Array=newArray();
            privatevar renderBuffer:int=0;
            privatevar k1:Number;
            privatevar k2:Number;
            privatevar k3:Number;
            
            privatevar path:Path;
                        
                        //Common
                        privatevar spacing:int=70;
                        privatevar waterSegsX:int;
                        privatevar waterSegsXreal:int;
                        privatevar waterXcenter:int;
                        privatevar isPause:Boolean=false;
                        
        public function WaveTest(){
                path = newPath();
                        path.autoFillTension =0.2;
                        //path.closed = true;
                        
                        stage.scaleMode =StageScaleMode.NO_SCALE;
                        stage.align =StageAlign.TOP_LEFT;
                
                        prepareMath();
                        populateBuffer();

                        addEventListener(Event.ENTER_FRAME, onEnterFrame);
                        stage.addEventListener(MouseEvent.CLICK, onMouseClick);
                        
        }
                privatefunction onMouseClick(e:Event):void{
                        makeSplash(((stage.stageHeight/2)-mouseY)/2, mouseX/stage.stageWidth);
                }
                publicfunction makeSplash(impact:Number, fract:Number):void{
                        var index:int=Math.floor(fract*waterSegsXreal);
                        if(index==waterSegsXreal)index = waterSegsX;
                        buffer[renderBuffer][index].y += impact;
                }
                publicfunction prepareMath():void{
                        waterSegsX =Math.round(stage.stageWidth/spacing);
                        waterSegsXreal = waterSegsX+1;
                        waterXcenter = waterSegsX/2;
                        
                        var weight:Number=10;
                        var t:Number=0.3;
                        var speedPerFrequency:Number=6;
                        var decreaseRate:Number=0.1;

                        var f1:Number= speedPerFrequency*speedPerFrequency*t*t/(weight*weight);
                        var f2:Number=1/(decreaseRate*t+2);

                        k1 =(4-8*f1)*f2;
                        k2 =(decreaseRate*t-2)*f2;
                        k3 =2* f1 * f2;
                }
                
                publicfunction populateBuffer():void{
                        var x:int,y:int,z:int;
                        for(var i:int=0; i <2; i++){
                                var a:Array=newArray();
                                for(var k:int=0; k < waterSegsXreal; k++)
                                        a.push(newPoint(k,0));
                                        
                                buffer[i]= a;
                        }
                }
                
                privatefunction evaluate():void{
                        var crnt:Array= buffer[renderBuffer];
                        var prev:Array= buffer[1-renderBuffer];
                        for(var i:int=0; i < waterSegsXreal; i++){
                                var currentP:Point=(Point)(buffer[renderBuffer][i]);
                                var prevPoint:Point= prev[i]asPoint;
                                var beforePoint:Point= crnt[i-1];
                                var afterPoint:Point= crnt[i+1];
                                prevPoint.y = 
                                        k1*((Point)(crnt[i])).y + k2*prevPoint.y + 
                                        k3*((afterPoint?afterPoint.y:0)+(beforePoint?beforePoint.y:0)+ currentP.y);
                        }
                        renderBuffer =1-renderBuffer;
                }
                

        privatefunction onEnterFrame(event:Event):void{
            if(!isPause){
                                theta +=0.05;
                                var verCounter:uint=0;
                graphics.clear();
                graphics.beginFill(0x111120);
                
                                var points:Array=[];
                                graphics.moveTo(0,stage.stageHeight/2);
                
                for(var x:int=0; x < waterSegsXreal ; x++){
                        var y:Number= buffer[renderBuffer][x].y;
                        var point:BezierPoint=newBezierPoint((x/(waterSegsXreal-1))*stage.stageWidth,(stage.stageHeight/2)+y);
                                        if(x==0){
                                                point.backwardDistance =0;
                                                point.backwardAngle =0;
                                        }elseif(x == waterSegsXreal-1){
                                                point.forwardDistance =0;
                                                point.forwardAngle =0;
                                        }
                                        points.push(point);
                }
                                
                                path.points = points;
                                path.drawInto(graphics);
                                
                                graphics.lineTo(stage.stageWidth,stage.stageHeight);
                                graphics.lineTo(0,stage.stageHeight);
                                graphics.endFill();
                                
                                evaluate();
                
                        }
        }
    }
}

One of the main problems I have always faced as an Umbraco Developer (or .net developer in general) is to find Umbraco and nuget packages that are made to fit any kind of client requirements without having to change or tweak a lot of things, like a “1 size fits all”.

This is the classic case with most if not all E-Commerce packages that are available for Umbraco, and because the guys are trying to build something that has got everything and fits any kind of business plan or customer, we end up with complicated solutions with a lot of functionality that you wouldn’t necessarily use for all clients. The big problem being that clients (and their respective websites) require different functionality, options and features.

Take the classic example of two clients on different ends of the business scale, we’ve got Mr EBay and Mr Tom Shoes. Mr EBay wants his E-Commerce platform to have all the bells and whistles e.g. multinational shops with all the different VAT and Shipping options and millions of products with all different variations and all sorts. Now the “heavy weight” E-Commerce packages we have in Umbraco e.g. Merchello, Tea Commerce, uCommerce etc. would be perfect for Mr EBay (and I suggest using them for this scenario) except the small pain of setting and configuring them up initially.

Mr Tom Shoes however is a small business dude who you have managed to convince that he can turn his EBay shop into a small website and sell his shoes. All he wants is to put a price on a shoe page on his site and be notified somehow when someone has paid for them.

Now you can use the “heavy weight” packages for Mr Tom Shoes but other than the problem of the licences (which can be prohibitively expensive), you are going to have to strip down a lot of the rich functionality of these to allow these to work with Mr Tom Shoes websites, which to some extend you might not actually be able to as you would need to remove about 95% of the functionality available on these packages – bit of a waste!

This got me thinking, as much we all love working with big clients (Actually at Simon Antony, we like working with big and small clients) and most websites have got some E-Commerce solution of some kind, we are kind of stuck in a situation where all these small clients are not being catered for in favour of the big clients. Unfortunately more than half of the business in the world are these small business and we do need to build some solutions aimed at these markets. This is what gave birth to “The Simplest Store Package”.

So I sat down and after a lot of thinking, discovered that our problem with E-Commerce packages is they are too big and complex for small clients, so instead of trying to shoe horn these into very small websites, why not create a very simple E-Commerce package that can be made to fit any client scenario big or small.

The main thing with any E-Commerce solution is a dynamic shopping cart/basket that you can add products to and a way of setting up the product pages i.e. put a price on a page. So with that in mind I have worked on just exactly that and because Mr Tom Shoes isn’t going to understand all the hoo-ha of setting up products in some section so all he need to do is to create a normal product page and put a price on it, THAT IS IT.

The Package I made does exactly that, and has got the option to extend it as big n complex as you want. Currently out of the box you can add optional / none optional extras to a product and this can be extended depending on what Mr Tom Shoes or Mr EBay wants.

The checkout page is open to further development as initial you will not have a clue as to what Mr Tom Shoes or Mr EBay want to use to get his payments from could be PayPal, Stripe, World pay whatever this can be hooked onto the checkout page. So what we have now is an E-Commerce package that is fit for any scenario and any client, ladies and gentlemen I give you the simplest store package.

On New Years Day, a password hacking tool going by the name of iDict was posted online to Github by someone identifying themselves as “Pr0x13” (Proxie). iDict apparently uses a brute force attack to obtain access to iCloud accounts easily, even managing to get through Apple's rate-limiting and two-factor authentication security that's supposed to prevent these types of brute force attacks. In Pr0x13’s own words (found here on Github:)

“This bug is painfully obvious and was only a matter of time before it was privately used for malicious or nefarious activities, I publicly disclosed it so apple will patch it.”

However, thankfully, it’s not all bad, within just 24 hours on the 2nd of January, Apple had already responded by patching their systems, when Pr0x13 put out the following tweet https://twitter.com/pr0x13/status/551119230070833153 indicating the tool would no longer be effective:

As with most brute force attacks, the capabilities of this tool are limited by the dictionary used with it, so as long as your password isn’t incredibly simple, you should be safe. The tool comes with a dictionary of roughly 500 of the most commonly used password, here’s a few examples;

• Password1
• P@ssw0rd
• Passw0rd
• Pa55word
• Password123
• ABCabc123
• Devil666
• Loveyou2
• ILoveYou2
• Blink182

so clearly, if you are using one of these passwords then, well… don’t. Sadly, all of the passwords on this list meet the minimum criteria for an iCloud password.

As well as the clear dictionary restrictions, another major hindrance to the effectiveness of this tool is the level of skill required to use the tool itself. The developer behind the tool isn't a friend to script-kiddies, he's trying to prove a point: Despite security updates since the brute force attack that gave hackers access to countless celebrities' nude photos, iCloud still isn't completely secure. However, the silver lining on this iCloud incident is that Apples security may just be a bit better than it was before this tool was made publicly available.

How Do You Create a STRONG Password?

By taking some simple precautions, you can protect yourselves from these types of attack - and we wanted to take the time to detail what you should look for:

• As Long As Possible - The longer your password, the less likely someone is to ‘guess it’ - and the more combinations machines will need to try before attempting to use the correct password. We recommend a very minumum of 8 letters - though ideally as many as possible.
• Use a Letters, Numbers & Extended Chars - don’t just stick to letters - be sure to include numbers and also extended characters such as ! or % or @ etc. Less directed types of brute force attacks will try each possible letter combination - there are 26 letters in the alphabet, but if you start using the other characters, this is nearer 128 - massively increasing the space an attacker needs to brute force in order to find the right combination.
• Do Not Repeat - Many dictionary based attacks will also try repetitions of known words, so do not repeat a simple word twice and expect it to be just as secure as a longer password. 
• Avoid Names, Use Non-Words - Most brute force attacks are highly inefficient and to combat this, many will use dictionary and keyword lists as this one did - if you use common words or phrases, or even names, it is much more likely your chosen words will appear in a dictionary list, and this puts you at much greater risk from tools like this which use a dictionary-type attack.
• Do Not Re-Use Passwords - The risk here may not be so apparent; but each time you re-use a password, you increase the chances of one of them being compromised - as there are more instances of the same password out there. What’s worse, many websites and services will use different hashing algorithms (some use none at all!) increasing the likelihood that eventually, it will become known.

Fun With Randomness!

If you have trouble thinking up a good password, there are some good tools which can generate one for you. However, be careful! Computers cannot generate random numbers, since they run code, and machine code instructions will always execute the same way when given exactly the same input every time - how would you write a function that returns a random number? To get around this, several techniques are usually employed (often involving some a large-ish random seed input and some clever maths before attempting to generate a number) - but even this would not be totally random and it would be possible to reverse engineer any technique used in code if an attacker were to know everything about the system.

Finding a node by it's ID:

<xsl:variable name="node1" select="$currentPage/ancestor::root//*[@id = 1234]" />
<xsl:variable name="node2" select="umbraco.library:GetXmlNodeById(1234)" />

Using XPath you can trim down the amount of nodes searched by adding anything you know about the location of the node

you're looking for, e.g.:

<!-- Reference to root of site -->
<xsl:variable name="siteRoot" select="$currentPage/ancestor-or-self::*[@level = 1]" />
<!-- I want a NewsItem node that is a direct child node of the News node that is at the root of the site -->
<xsl:variable name="breakingNews" select="$siteRoot/News/NewsItem[@id = 1234]" />

Hopefully this will go some way to helping you with your daily development. Let us know if there is anything specific you need to know.

The following XSLT code will take in a node (in this case 1305) and look at the content randomly choosing one to display. You can easily pass in the node to search by using a Content Picker assigned to an alias of source in the macro parameters. Then simply add the following lines to the xslt below before the <xsl:template match="/"> line.

<xsl:variable name="feed" select="/macro/source"/>

Then change the node id 1305 to $source. Now when you add the macro to a page, you will be prompted to select the parent node to search from.

<xsl:param name="currentPage"/>
<xsl:template match="/">
<xsl:variable name="numberOfArticleNodes" select="count(umbraco.library:GetXmlNodeById(1305)/* [@isDoc])"/>
 <xsl:variable name="randomArticlePosition" select="floor(Exslt.ExsltMath:random() * $numberOfArticleNodes) + 1"/>
 <xsl:variable name="randomArticleNode" select="umbraco.library:GetXmlNodeById(1305)/* [@isDoc] [position() = $randomArticlePosition]"/>
 
<!-- start writing XSLT -->
 <div class="cta-text">
 <h3><xsl:value-of select="$randomArticleNode/straplineMessage" /></h3>
 <p><xsl:value-of select="$randomArticleNode/straplineSubMessage" />.</p> 
 </div> 
 
</xsl:template>

</xsl:stylesheet>

This is a quick follow-up on my blog post: "How to use umbraco.library GetMedia in XSLT". At the request of fellow Umbraco South-West UK developer, Dan, that I should update the code snippets for the new XML schema in Umbraco v4.5+

First a quick notice; if you are using v4.5.0, then please upgrade to v4.5.1, as there was a tiny bug in GetMedia that caused great confusion and headaches - you have been advised!

Without further ado, the updated XSLT snippet that you came here for…

<xsl:template match="/">
<xsl:variable name="mediaId" select="number($currentPage/mediaId)" />
<xsl:if test="$mediaId > 0">
<xsl:variable name="mediaNode" select="umbraco.library:GetMedia($mediaId, 0)" />
<xsl:if test="$mediaNode/umbracoFile">
<img src="{$mediaNode/umbracoFile}" alt="[image]" height="{umbracoHeight}" width="{umbracoWidth}" />
</xsl:if>
</xsl:if>
</xsl:template>

A slightly less obvious error encountered while using IIS on a specific site, where all pages give the following error:

HTTP Error 500.19 - Internal Server Error The requested page cannot be accessed 
because the related configuration data for the page is invalid.

Detailed Error Information
Module IIS Web Core
Notification Unknown
Handler Not yet determined
Error Code 0x8007000d

The solution isn'timmediately obvious, because no specific error is returned besides the above codes.

Cause: IIS does not have the URL Rewriting module installed, so thesection of the web.config will cause IIS to give HTTP Error 500.19 with error code 0x800700d for any page.

Simply resolve this, simply install the URL Rewriting module, which can be downloaded here

(this may require a restart of IIS or your machine) and will resolve the issue).

Google has just released its new iPhone Chrome browser - it's really good, you should check it out although there is a slight problem when using it on your Asp.Net 4.0 websites that use cookies or have login functionality.

You will notice that when you browse to your site and say login, the cookie session id is now contained within the URL - wtf? Well this is basically because the User Agent string that Chrome is sending is not recognised by your website and by default, Asp.Net 4.0 is set to downgrade the browser to the lowest it knows about so assumes you cannot support cookies - this is why you see the cookie id in the url.

This has been recognised as a bug in Asp.Net 4.0 and is fixed in 4.5 where all browsers are now assumed to support cookies.

The fix is very simple, follow these steps to restore functionality to your sites:

Add a folder in your web project named App_Browsers (right-click the project, choose: Add > Add ASP.NET Folder > App_Browsers)
Add a file in that folder (right-click, choose: Add > New Item). The file can have any name, but must have the .browser ending. Usually there is a Form.browser in there so just modify that one
Add the following lines inside the <browser> element:

<capabilities>
<capability name="cookies" value="true" />
</capabilities>

Save and browse using your iphone - you should now see the site working as before

Credits for the above fixes go to the following urls where you can find more information about the browser files and how to use them:

http://msdn.microsoft.com/en-us/library/ms228122.aspx

http://stackoverflow.com/questions/4158550/problem-with-asp-net-forms-authentication-when-using-iphone-uiwebview

http://stackoverflow.com/questions/11324835/ipad-iphone-chrome-auth-cookie-not-setting-over-jquery-post-ajax-mvc-3

When you try and delete a template in the back office, you get the error:

Error handling action

Umbraco Exception (Datalayer):

SQL helper exception in ExecuteNonQuery

Simply assign the template to any document type (does not matter which) and save the doc type. When you now try and delete the template, it will dissapear.

It's good practice to use 404 error pages on your site instead of relying upon the built in IIS error handling mechanism and it's not that obvious how to set it up.

Simply follow these steps:

Create a new template on your site and link to for instance a standard text page document type
Create the new 404 page in the content area, be sure to use the correct template - publish it and make a note of the Node ID
Goto umbracoSettings.Config and find the <errors> section.
For the <error404> node, replace the number 1 with the id of your new 404 page. Save this file.
<errors>
<!-- the id of the page that should be shown if the page is not found -->
<!-- <errorPage culture="default">1</errorPage>-->
<!-- <errorPage culture="en-US">200</errorPage>-->
<error404>12345</error404>
</errors>

That sorts out Umbraco but you will notice that any duff url's you add will still not show your shiny new page. This is because IIS is still handling these errors so we need to tell it to bog off and let Umbraco handle it instead.

Open up web.config and goto the <system.webServer> section
After that, add the following lines <httpErrors existingResponse="PassThrough" />
Save the file.
Now if you goto a duff url, IIS should pass your user through to your shiny new page.

You can also support multi-lingual sites, see the <errors> node for further information on how to do this.

Domain 'xxyyzz' has already been assigned

Even when you cannot see a node in the content tree with this domain assigned to it.

This can happen if a node has been deleted which has the same hostname set.  The domain name stays assigned to the deleted node and cannot be used elsewhere in the site.

To resolve this issue, simply undelete the node from the recycle bin, click 'manage hostnames' and delete the domain. You can now safely re-delete the node and use the domain elsewhere.

Another way to resolve this would be to open the database and manually remove the corresponding entry from the 'umbracoDomains' table. You may need to do this If you have emptied the recycle bin. Be sure to take a backup of the database before attempting to do this.

The CheckBoxTree is one such control and at a recent job, I needed to implement this functionality to give the user the ability to add their own Accomodation Types and then select them in a content page.

This was performed on Umbraco 4.7.2 with uComponents installed direct from the Package Repository:

1. Create a couple of Document Types, one called Settings (or similar), another called Accomodation Types and a third called Types.
2. In the content tree, setup the content area to have a structure similar to the following, using the Document Types you just created
3. You will see here the Settings/Accomodation Types/Type structure. Create as many types as you need. Make a note of the nodeID of the Accomodation Type as you will need this for the DataType.
4. Now create a new data type, select uComponemts:CheckBoxTree and click the save icon on the toolbar.
5. Once it's saved, set the properties as follows (replace 1116 with the nodeID you took in step 2) The key here is the XPATH Start Node which in our case is //*[@isDoc and @id = '1121']. We then use the xPath Filter to restrict the types we need to see.
6. Now add a new Document Type Property to your homepage or other content page where this will be used. For the type of control, select the Accomodation Datatype we just created. When you click on your page, you should now see something like the following

Thats it, simple - you can now use XSLT or Razor or whatever you fancy to retrieve your property values and process in the normal way

Sometimes, when publishing a node in Umbraco, we were experiencing the odd error: "Value Cannot Be Null, Parameter Name: Attribute" as shown below:

Value cannot be null.
Parameter name: attribute
Description: An unhandled exception occurred during the execution of the current web request.
Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.ArgumentNullException: Value cannot be null.
Parameter name: attribute

Source Error:

An unhandled exception was generated during the execution of the current web request. Information
regarding the origin and location of the exception can be identified using the exception stack trace
below.

Stack Trace:

[ArgumentNullException: Value cannot be null.
Parameter name: attribute]
System.Xml.Linq.XAttribute.op_Explicit(XAttribute attribute) +163158
UmbracoExamine.UmbracoContentIndexer.ReIndexNode(XElement node, String type) +193
Examine.ExamineManager._ReIndexNode(XElement node, String type, IEnumerable`1 providers) +93
umbraco.DocumentCacheEventHandler.Invoke(Document sender, DocumentCacheEventArgs e) +0
umbraco.content.UpdateDocumentCache(Document d) +1064
umbraco.library.UpdateDocumentCache(Int32 DocumentId) +122
umbraco.cms.presentation.editContent.Publish(Object sender, EventArgs e) +541
System.EventHandler.Invoke(Object sender, EventArgs e) +0
System.Web.UI.WebControls.ImageButton.OnClick(ImageClickEventArgs e) +187
System.Web.UI.WebControls.ImageButton.RaisePostBackEvent(String eventArgument) +165
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint,
Boolean includeStagesAfterAsyncPoint) +3707

This is caused by the XML cache being out of sync with the database. In most cases, simply unpublishing and republishing the website or node will solve this issue and bring everything into step. In some rare cases (as we were experiencing), this may still give you the error, in which case you can rebuild the entire XML cache by accessing the following URL on your website:

/umbraco/dialogs/republish.aspx?xml=true

This will cause Umbraco to rebuild the entire XML cache and should solve the problem (But beware! This can take some time, particularly for large websites). For instance, a website with tens of thousands of nodes this could over 30 minutes in some cases!

We got an error stating -

"Error adding to SiteMapProvider in loadNodes(): System.Web.HttpException (0x80004005): 'http://mydomain.net/' is not a valid virtual path. at System.Web.Util.UrlPath.CheckValidVirtualPath(String path) at System.Web.Util.UrlPath.Combine(String appPath, String basepath, String relative) at System.Web.StaticSiteMapProvider.AddNode(SiteMapNode node, SiteMapNode parentNode) at umbraco.presentation.nodeFactory.UmbracoSiteMapProvider.loadNodes(String parentId, SiteMapNode parentNode)"

We solved this by removing the sitemap configuration section from the web.config

<siteMap defaultProvider="UmbracoSiteMapProvider" enabled="true">

<providers>

<clear />

<add name="UmbracoSiteMapProvider" type="umbraco.presentation.nodeFactory.UmbracoSiteMapProvider" defaultDescriptionAlias="description" securityTrimmingEnabled="true" />

</providers>

</siteMap>
We also deleted all the old log files to free up the data taken over by the error

Consider the following example: first we create a simple database with a single table for membership that contains: a Member's ID, Membership Type, Firstname, Lastname and Birthday:

CREATE TABLE [dbo].[Membership](
[MemberID] [varchar](20) NOT NULL,
[MemberType] [int] NOT NULL,
[Firstname] [varchar](80) NOT NULL,
[Lastname] [varchar](80) NOT NULL,
[Birthday] [date] NOT NULL
) ON [PRIMARY]

If we then insert the following rows into this table:

INSERT INTO dbo.Membership (MemberID, Firstname, Lastname, MemberType, Birthday) VALUES
('001', 'Fred', 'Bloggs', 1, convert(datetime, '10/23/1995', 0))

INSERT INTO dbo.Membership (MemberID, Firstname, Lastname, MemberType, Birthday) VALUES
('002', 'Joe', 'Bloggs', 1, convert(datetime, '05/10/1973', 0))

INSERT INTO dbo.Membership (MemberID, Firstname, Lastname, MemberType, Birthday) VALUES
('002', 'Joe', 'Bloggs', 1, convert(datetime, '05/10/1973', 0))

INSERT INTO dbo.Membership (MemberID, Firstname, Lastname, MemberType, Birthday) VALUES
('003', 'Fannie', 'Mae', 1, convert(datetime, '02/14/1983', 0))

We now have duplicated Joe Blogg's entry (MemberID 2), with no obviously safe way of removing the duplicate, while leaving at least one entry intact. Now imagine if you had an entire database of data with hundreds or thousands of duplicates - fixing this by hand quickly becomes an impossible task!

To solve this, first we can add an column using the IDENTITY keyword so we now have a unique way of addressing each row:

ALTER TABLE dbo.Membership ADD AUTOID INT IDENTITY(1,1)

We can then we can use:

SELECT * FROM dbo.Membership WHERE AUTOID NOT IN (SELECT MIN(AUTOID) _
FROM dbo.Membership GROUP BY MemberID)

Which will correctly select all duplicated records in our database (always worth checking before running the delete query!). Once we are happy this is working for us, we can then run the delete query:

DELETE FROM dbo.Membership WHERE AUTOID NOT IN (SELECT MIN(AUTOID) _
FROM dbo.Membership GROUP BY MemberID)

I noticed that after republishing the umbraco.config file that nodes were not updating the data within it, nor when this file was deleted, it was not getting recreated.

First port of call was to look at the UmbracoLog table. This is the central error reporting mechanism for any Internal Umbraco errors.

Fire up SQL Management Studio and run the following query

SELECT * from [umbracoLog] where logComment like '%Error Republishing: System.Xml.XmlException%'

You should then get a list of records similar to the screenshot below (this one is filtered to show just one record)

Note that we have publishing errors due to invalid characters in the XML stream - this should never happen but unfortunately Umbraco does not sanitise the input data when creating the XML.

The actual error displayed is:

Error Republishing: System.Xml.XmlException: '', hexadecimal value 0x01, is an invalid character. Line 4, position 5. at System.Xml.XmlTextReaderImpl.Throw(Exception e) at System.Xml.XmlTextReaderImpl.Throw(String res, String[] args) at System.Xml.XmlTextReaderImpl.ThrowInvalidChar(Char[] data, Int32 length, Int32 invCharPos) at System.Xml.XmlTextReaderImpl.ParseCDataOrComment(XmlNodeType type, Int32& outStartPos, Int32& outEndPos) at System.Xml.XmlTextReaderImpl.ParseCDataOrComment(XmlNodeType type) at System.Xml.XmlTextReaderImpl.ParseElementContent() at System.Xml.XmlTextReaderImpl.Read() at System.Xml.XmlLoader.LoadNode(Boolean skipOverWhitespace) at System.Xml.XmlLoader.LoadDocSequence(XmlDocument parentDoc) at System.Xml.XmlLoader.Load(XmlDocument doc, XmlReader reader, Boolean preserveWhitespace) at System.Xml.XmlDocument.Load(XmlReader reader) at System.Xml.XmlDocument.LoadXml(String xml) at umbraco.content.LoadContentFromDatabase()

Now we know why the umbraco.config file is not being updated, we now need to track down the node(s) that are causing the errors and remove the dodgy characters!

Content XML in Umbraco is stored within the cmsContentXml table. So what we need to do is run a query against this table to find the rogue nodes.

Run the following SQL statement in Management Studio:

Where your dodgy character you are searching for is within the %% tags. You can get this from your original SQL results

You should then get a node or list of nodes that have the dodgy characters in. It's now a simple case of removing these characters and resaving the data back to the db.

How we did it using Notepad++;

Notepad++ is a great developer tool, if you don't already use it, download now, it's free and open source and just well great!

Ok what we did was to open up the rogue node in the Content area in Umbraco, in our case a node called Winter League and find the body text (most likely it's an RTF control that has saved the bad code).

We then viewed this source in HTML mode, selected it all, copied and pasted into Notepad++ where you can clearly see the SOH character:

Simply delete it, paste the code back into Umbraco and republish. Your umbraco.config file should now instantly be rebuilt.

On my development machine, the original file was 9meg, after this fix it was 74meg (large site!).

This has caused me so much pain in the last few days, especially with duplicate nodes being created via the API (Node uses published XML to see if it exists, was not in the published xml so duplicates were created) and performance issues at the front end.

It's looking like the character got into the RTF editor by the user pasting from another source i.e. pdf document. This is apparently a known issue in Umbraco, just wish that someone would sanitise the input when it's saved so this does not happen at all!

"No Document exists with Version xxxxxx"

Although there may be other causes of this error, we found our problem were entries in Umbraco's cmsContentVersion table, which did not have a corresponding entry in the cmsDocument table.  This created an orphaned revision which was causing the error.

Luckily, you can easily identify orphan revisions with the following SQL query:

SELECT * FROM cmsContentVersion
WHERE
cmsContentVersion.VersionId NOT IN (SELECT VersionId FROM cmsDocument) AND
cmsContentVersion.ContentId IN (SELECT nodeId FROM cmsDocument)

Once you are happy and can confirm these are the revisions that need to be deleted, you can go ahead and delete them with:

DELETE FROM cmsContentVersion
WHERE
cmsContentVersion.VersionId NOT IN (SELECT VersionId FROM cmsDocument) AND
cmsContentVersion.ContentId IN (SELECT nodeId FROM cmsDocument)

This is very quick to run and sorted out our problem instantly. It should be noted that there are other causes of this error, and it's worth investigating using the SELECT SQL Query first before making any updates.

You want to have a fluid layout and display your nodes in groups of two repeating down the page:

<div class="row-fluid">
<div class="span6">
<img src="/image.png>
<h3><a href="#">Link to page</a></h3>
</div>
<div class="span6">
<img src="/image.png>
<h3><a href="#">Link to page</a></h3>
</div>
</div>

The problem is if you use a standard foreach loop, you will get repeating content for each span6 element - not what you want. Ideally you need to group them but not sure how - see the solution below.

@using Umbraco.Core
@using umbraco.MacroEngines
@inherits DynamicNodeContext
@{
var r = new Random();
constintnumberOfItems = 6;
var startNode = new DynamicNode(Model.Id).Descendants("StandardPage")
.Items.Where(x => x.Visible).OrderBy(x => r.Next()).Take(numberOfItems).ToList();
}

<h2 class="page">Section Title</h2>
 @foreach (var page in startNode.InGroupsOf(2))
 {
 <div class="row-fluid">
 @foreach (var item inpage)
 {
 <div class="span6">
 <img src="/empty.png" alt="@item.Name" />
 <h3><a href="@item.Url">@item.Name</a></h3>
 </div>
 }
 </div>
 }
</div>

See the following 7 deprecated HTML 4.01 tags.

<center> tag is no longer supported in HTML5. Use CSS instead.

Defines centered text.

Solution:

h1 {
text-align: center;
}

_______________________________________________________

The <acronym> tag is no longer supported in HTML5.

defines an acronym.

Solution:

use the HTML tag <abbr> instead.

_______________________________________________________

The <applet> tag is no longer supported for HTML5.

Defines an embedded applet.

Solution:

use the HTML tag <object> instead.

_______________________________________________________

The <big> tag is no longer supported I'm HTML5. Use CSS instead.

Defines big text

Solution:

h1 {
text-size: large;
}

p {
text-size: large;
}

______________________________________________________

The <dir> tag is no longer supported in HTML5. Use CSS instead.

Defines a directory list.

Solution:

Use the HTML tag <ul> instead.

______________________________________________________

The <frame> tag is no longer supported in HTML5.

Defines a window (a frame) in a frameset.

The <frameset> tag is no longer supported by HTML5.

Defines a set of frames.

The <noframes> tag is no longer supported in HTML5.

Defines an alternate content for users that do not support frames.

______________________________________________________

The <basefont> tag is no longer supported in HTML5. Use CSS instead.

Specifies a default color, size, and font for all text in a document.

Solution:

body {
color: red;
font: Georgia;
font-size: large;
}

p {
color: red;
font: Georgia;
font-size: large; }

h1 {
color: red;
font: Georgia;
font-size: large;
}

When saving a view in Umbraco, the file is deleted, accessing a page that inherits from this view gives the following exception:

Server Error in '/' Application.

The layout page "~/Views/<Global.cshtml>" could not be found at the following path: "~/Views/<Global.cshtml>".
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.Web.HttpException: The layout page "~/Views/Global.cshtml" could not be found at the following path: "~/Views/Global.cshtml".

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:
[HttpException (0x80004005): The layout page "~/Views/Global.cshtml" could not be found at the following path: "~/Views/Global.cshtml".] System.Web.WebPages.WebPageBase.PopContext() +306704 Umbraco.Core.Profiling.ProfilingView.Render(ViewContext viewContext, TextWriter writer) +140 System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context) +380 System.Web.Mvc.<>c__DisplayClass1a.b__17() +33 System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +613 System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +613 System.Web.Mvc.ControllerActionInvoker.InvokeActionResultWithFilters(ControllerContext controllerContext, IList`1 filters, ActionResult actionResult) +263 System.Web.Mvc.Async.<>c__DisplayClass25.b__22(IAsyncResult asyncResult) +240 System.Web.Mvc.<>c__DisplayClass1d.b__18(IAsyncResult asyncResult) +28 System.Web.Mvc.Async.<>c__DisplayClass4.b__3(IAsyncResult ar) +15 System.Web.Mvc.Controller.EndExecuteCore(IAsyncResult asyncResult) +53 System.Web.Mvc.Async.<>c__DisplayClass4.b__3(IAsyncResult ar) +15 System.Web.Mvc.<>c__DisplayClass8.b__3(IAsyncResult asyncResult) +42 System.Web.Mvc.Async.<>c__DisplayClass4.b__3(IAsyncResult ar) +15 System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +606 System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +288 Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.34248

This issue is caused by including ASP.NET Masterpage controls that use the runat="server" directive in the view. Please note: this happens even if the element itself is commented out, as shown in the following code snippet:

@* <asp:Literal ID="MyLiteral" runat="server" text="some string"/> *@

To resolve this problem, ensure that all ASP.NET components are removed from the MVC Razor view template (including those that are commented out!)

Speak to Simon Steed about any of the topics discussed this site.

Below is all the new tags that have been introduced in HTML5 and a definition of what they are.

<article> - Defines an article.
<aside> - Defines content from the page content.
<audio> - Defines sound content.
<bdi> - Isolates a part of text that might be formatted in a different direction from other text outside it.
<canvas> - Used to draw graphics, on the fly, via scripting (usually JavaScript).
<command> - Defines a command button that a user can invoke.
<datalist> - Specifies a list of pre-defined options for input controls.
<details> - Defines additional details that the user can view or hide.
<dialog> - Defines a dialog box or window.
<embed> - Defines a container for an external (non-HTML) application.
<figcaption> - Defines a caption for a <figure> element.
<figure> - Specifies self-contained content.
<footer> - Defines a footer for a document or section.
<header> - Defines a header for a document or section.
<hgroup> - Groups heading elements.
<keygen> - Defines a key-pair generator field (for forms)
<main> - Specifies the main content of a document.
<mark> - Defines marked/highlighted text.
<meter> - Defines a scalar measurement within a known range (a gauge).
<nav> - Defines navigation links.
<output> - Defines the result of a calculation.
<progress> - Represents the progress of a task.
<rp> - Defines what to show in browsers that do not support ruby annotations.
<rt> - Defines an explanation/pronunciation of characters (for East Asian typography).
<ruby> - Defines a ruby annotation (for East Asian typography).
<section> - Defines a section in a document.
<source> - Defines multiple media resources for media elements (<video> and <audio>).
<summary> - Defines a visible heading for a <details> element.
<time> - Defines a date/time.
<track> - Defines text tracks for media elements (<video> and <audio>).
<video> - Defines a video or movie.
<wbr> - Defines a possible line-break.

Some of these file types are relatively new to the web, so you will need to add the MIME types for your files to your IIS configuration. If you have trouble getting files to play and are getting:

HTTP Error 404.3 - Not Found

The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.

This is because IIS will only serve out files that are defined MIME types - so you will need to add the ones for your files manually.

To resolve this, add your MIME type definitions into your web.config settings under the <system.webServer> , <staticContent> section.

Here are entries for some of the common HTML5 MIME types:

<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
<mimeMap fileExtension=".m4v" mimeType="video/m4v" />
<mimeMap fileExtension=".ogg" mimeType="video/ogg" />
<mimeMap fileExtension=".ogv" mimeType="video/ogg" />
<mimeMap fileExtension=".webm" mimeType="video/webm" />
<mimeMap fileExtension=".oga" mimeType="audio/ogg" />
<mimeMap fileExtension=".spx" mimeType="audio/ogg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />
<remove fileExtension=".eot" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".otf" mimeType="font/otf" />
<mimeMap fileExtension=".woff" mimeType="font/x-woff" />

If you missed out on CodeGarden 2010 this year then you definitely missed one heck of a conference! This post is about the data type I presented during the Umbraco package competition (which ended up winning too! :). It’s a multi-node picker with the full tree interface to allow you to select the nodes you want. It’s also sort-able with drag/drop functionality.

It’s a very simple control but has the capability to be made into a very awesome data type which is why I’m starting up a new CodePlex project called: Data Types for Umbraco (found here). I’m hoping that people in the Umbraco community will want to become developers on this project so a bunch of us can collaborate to create some seriously amazing data types for Umbraco 4.5. Please let me know if you want to contribute to this project as i think it could have huge potential. Instead of everyone creating their own closed source data types and developing them all in different ways, this would help unify and standardize the way we create data types.

So the first thing I will put up there is the full source for this data type as it was meant to be. However, I’m not going to get around to that today, so in the meantime I’ve put the source for this control right here. Remember, this is not really the best way to make this data type but it will give you a good indication of how to use the new JavaScript tree API and how to build a simple UserControl data type.

Enjoy!

ASCX Code

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TreePicker.ascx.cs"
    Inherits="ExamineDemo1.usercontrols.TreePicker" %>
<%@ Register TagPrefix="umb" TagName="tree" Src="~/umbraco/controls/Tree/TreeControl.ascx" %>
<script type="text/javascript">

//a reference to the hidden field
//storing the selected node data
var hiddenField = jQuery("#<%=PickedNodes.ClientID%>");

//create a sortable, drag/drop list and
//initialize the right panel with previously
//saved data.
jQuery(document).ready(function () {
    jQuery(".right").sortable({
        stop: function (event, ui) { StorePickedNodes(); }
    });
    jQuery(".item a.close").live("click", function () {
        jQuery(this).parent().remove();
    });

    //now rebuild the selected items
    try {
        var json = eval('(' + hiddenField.val() + ')');
        jQuery(".right").html(unescape(json.markup));
        StorePickedNodes();
    }
    catch (err) { };
});

//Add event handler to the tree API.
//Bind to the window load event as the document ready event
//is too early to query for the tree api object
jQuery(window).load(function () {
    //add a handler to the tree's nodeClicked event
    jQuery("#<%=TreePickerControl.ClientID%>")
        .UmbracoTreeAPI()
        .addEventHandler("nodeClicked", function (e, node) {
            AddToRight(node);
    });
});

function AddToRight(node) {
    //get the node id of the node selected
    var nodeId = jQuery(node).attr("id");
    //check if node id already exists in the right panel
    if (jQuery(".right").find("li[rel='" + nodeId + "']").length > 0) {
        return;
    }
    //create a copy of the node clicked on the tree
    var jNode = jQuery(node).clone().find("a:first")
    //remove un-needed attributes
    jNode.removeAttr("href")
        .removeAttr("umb:nodedata")
        .attr("href", "javascript:SyncItems(" + nodeId + ");");
    //build a DOM object to put in the right panel
    jQuery("<div class='item'><ul class='rightNode'>" +
            "<li rel='" + nodeId + "' class='closed'>" +
            "</li></ul><a class='close' href='javascript:void(0);'>[X]</a></div>")
        .appendTo(".right")
        .find(".closed").append(jNode);
    //now update the hidden field with the
    //node selection
    StorePickedNodes();
}

//A method to sync the left tree to the item
//selected in the right panel
function SyncItems(nodeId) {
    jQuery("#<%=TreePickerControl.ClientID%>")
        .UmbracoTreeAPI()
        .syncTree(nodeId.toString());
}

//were going to store both the node ids
//and the html markup to re-render the 
//right hand column as JSON to be put into
//the database.
function StorePickedNodes() {
    var val = "[";
    jQuery(".right .item ul.rightNode li").each(function () {
        val += jQuery(this).attr("rel") + ",";
    });
    if (val != "[") val = val.substr(0, val.length - 1);
    val += "]";
    //append the html markup
    var obj = "{ \"val\": " + val + ", \"markup\": \"" + escape(jQuery(".right").html()) + "\"}";
    hiddenField.val(obj);       
}

</script>

<%--Inline styles are dodgy, but simple for
this demonstration--%>

<style type="text/css">
.multiTreePicker .item ul.rightNode 
{
    float:left;
    margin:0;
    padding:0;          
}
.multiTreePicker .item ul.rightNode li
{
    margin:0;
    padding: 0;
    list-style:none;
    font:icon;
    font-family:Arial,Lucida Grande;
    font-size:12px;
    min-height:20px;
}
.multiTreePicker .item ul.rightNode li a
{
    background-repeat:no-repeat !important;
    border:0 none;
    color:#2F2F2F;
    height:18px;
    line-height:18px;
    padding:0 0 0 18px;
    text-decoration:none;
}
.multiTreePicker .item a
{
    float:left;
}   
.multiTreePicker .item a.close 
{
    margin-left:5px;
}
.multiTreePicker .item
{
    cursor: pointer;
    width:100%;
    height:20px;
}
.multiTreePicker .left.propertypane
{
    width: 300px;
    float: left;
    clear:none;
    margin-right:10px;
}
.multiTreePicker .right.propertypane
{
    width: 300px;
    float: left;
    clear:right;
    padding:5px;
}
.multiTreePicker .header
{
    width:622px;
}
   
</style>

<div class="multiTreePicker">
    <div class="header propertypane">
        <div>Select items</div>
    </div>
    <div class="left propertypane">        
        <umb:tree runat="server" ID="TreePickerControl" 
            CssClass="myTreePicker" Mode="Standard" 
            DialogMode="id" ShowContextMenu="false" 
            IsDialog="true" TreeType="content" />
    </div>
    <div class="right propertypane">
    </div>
</div>

<asp:HiddenField runat="server" ID="PickedNodes" />

C# Code Behind

public partial class TreePicker : 
    System.Web.UI.UserControl, IUsercontrolDataEditor
{
        


    #region IUsercontrolDataEditor Members

    public object value
    {
        get
        {
            //put the node in umbraco
            return PickedNodes.Value;
        }
        set
        {
            //get from umbraco
            PickedNodes.Value = value.ToString();
        }
    }

    #endregion
}

Some things you need to know about the new version:

1. I haven’t made a release version of this yet as it still needs some more testing, though we are putting this into a production site next week.
2. If you want to try this, currently you’ll need to get the latest source from Examine @ CodePlex
3. If you are using a previous version of Examine, there’s a few breaking changes as some of the class structures have been moved, however you config file should still work as is… HOWEVER, you should update your config file to reflect the new one with the new class names
4. There is now 3 DLLs, not just 2:
   • Examine.DLL
     • Still pretty much the same… contains the abstraction layer
   • Examine.LuceneEngine.DLL
     • The new DLL to use to work with data that is not Umbraco specific
   • UmbracoExamine.DLL
     • The DLL that the Umbraco providers are in

Ok, now on to the good stuff. First, I’ve added a demo project to this post which you can download HERE. This project is a simple console app that contains a sample XML data file that has 5 records in it. Here’s what the app does:

1. This re-indexes all data
2. Searches the index for node id 1
3. Ensures one record is found in the index
4. Updates the dateUpdated time stamp for the data record
5. Re-indexes the record with node id 1’

So assuming that you have some custom data like a custom database table, xml file, or whatever, there’s really only 3 things that you need to do to get Examine indexing your custom data:

1. Create your own ISimpleDataService
   • There is only 1 method to implement: IEnumerable<SimpleDataSet> GetAllData(string indexType)
   • This is the method that Examine will call to re-index your data
   • A SimpleDataSet is a simple object containing a Dictionary<string, string> and a IndexedNodeobject (which consists of a Node Id and a Node Type)
   • For example, if you had a database row, your SimpleDataSet object for the row would be the dictionary of the rows values, it’s node id and type … easy.
2. Use the ToExamineXml() extension method to re-index individual nodes/records
   • Examine relies on data being in the same XML structure as Umbraco (which we might change in version 2 sometime in the future… like next year) so we need to transform simple data into the XML structure. We’ve made this quite easy for you; all you have to do is get the data from your custom data source into a Dictionary<string, string> object and use this extension method to pass the xml structure in to Examine’s ReIndexNode method.
   • For example: ExamineManager.Instance.ReIndexNode(dataSet.ToExamineXml(dataSet["Id"], "CustomData"), "CustomData");  where dataSet is a Dictionary<string, string> .
3. Update your Examine config to use the new SimpleDataIndexer index provider and the new LuceneSearcher search provider

If you’re not using Umbraco at all, then you’ll only need to have the 2 Examine DLLs which don’t reference the Umbraco DLLs whatsoever so everything is decoupled.

I’d recommend downloading the demo app and running it as it will show you everything you need to know on how to get Examine running with custom data. However, i know that people just like to see code in blog posts, so here’s the config for the demo app:

Download TheFarm Linq2Umbraco Driver for LINQPad 1.0 (16.08kb)

The driver has been compiled against LINQPad 2.31 using .Net 3.5, so it should work fine on both current versions of LINQPad (.Net 3.5 and 4). The umbraco.Linq.Core.dll, which the driver needs as it contains the UmbracoDataContext, will be dynamically loaded. The driver assumes that it exists in the same directory as the dll which contains the custom Linq2Umbraco DataContext. The dynamic loading has 2 advantages:

• The size of the driver is only 16kb! :) No need to pack all the dlls in there as they are all present in your Umbraco installation anyway. And this way the driver isn’t bound to one specific Umbraco version.
• LINQPad requires it’s driver assemblies to be strongly signed, and .Net requires every referenced assembly to be strongly signed as well. However umbraco.Linq.Core is not strongly signed, and although I managed to strongly sign the assembly by using a little tool it did create havoc to the Umbraco installation, so dynamically loading the assembly magically resolves all that headache!

Following is a quick demonstration of the driver in use. I’ve created a small test Umbraco installation with a couple of document types and content nodes:

The doc types contain just a couple of standard fields like text string, data,  plus one Ultimate picker instance on the Products page (checkbox list, saved as comma delimited string). Now I’ll export the document types to .Net by right clicking on ‘Document Types’, the popup window will be populated like this:

It doesn’t matter if you choose POCO with or without abstractions. It is also very advisable to install Matt Brailford’s fantastic AutoExport2DotNet package, it will perform an export to .Net every time you modify the document types.

After downloading and renaming the UmbracoDataContext files I’ll include them in the custom DAL like so:

As you can see at the moment the DAL project doesn’t contain anything else but the two automatically generated files plus the necessary link to umbraco.Linq.Core. The Umbraco 4.6.1 test installation is showing up right next to it, I need the /App_Data/umbraco.config file from it later.

Now let’s start up LINQPad and add a connection using the custom driver:

Clicking on View more drivers… will reveal the following dialog, where Browse… let’s you select the custom LINQPad driver:

Opening the driver will shortly lead to the message ‘Driver successfully loaded’, the driver will now appear in the list of drivers from above:

After hitting ‘Next’ the following dialog will appear:

Here the properties for the Linq2Umbraco connection are set.

• Path to custom assembly: This is the assembly that contains the exported UmbracoDataContext, in this case it’s TheFarm.DAL.dll
• Full name of custom type: A popup window will present you a list of all UmbracoDataContexts in the assembly, in 99% of the cases there will only be one and in this case it’s the TheFarmDemoDataContext as specified above
• /Appdata/umbraco.config: The umbraco.config file of the Umbraco installation found in /App_Data.
• Surpress lazy secondary queries: UmbracoDataContext uses the AssociationTree class to list children, e.g. the class Products will contain a list of ProductCategories. When querying Products you will most likely not want to generate a list of all ProductCategories for each Product, Surpress lazy secondary queries will tell the program to stop evaluating these expressions as well.

After hitting OK the connection will be added to LINQPad and you can start querying the custom UmbracoDataContext:

Notice here the output of TopProducts (Ultimate picker), Introduction (Richtext editor) and PricesValidUntil (date). ProductCategorys and Productss are the above mentioned children and grand children which are here surpressed with ‘Surpress lazy secondary queries’. Another example:

You can also easily create custom Linq Extension methods e.g. in the DAL and use them in your queries like so:

[Credits for the ToCSV extension go to Muhammad Mosa.]

TheFarm Linq2UmbracoDataContextDriver 1.0.lpx (16.08 kb)

The best choice may depend on your project, but in any case you will want to keep this code lean since it may come at the expense of the readaibility of what the code actually does. Luckily, we find Umbraco's Log Helper as a great way to satisfy logging without needing reams of code to make it meaningful!

The code below shows how you can catch an error and call up Umbraco's LogHelper to log your error:

try
{
// code that could throw an exception
}
catch (Exception ex)
{
  // do things to handle and...
   LogHelper.Error(this.GetType(), "Your custom error message here", ex);
}

When called, this custom error message is logged along with the details of the exception to /App_Data/Logs/UmbracoTraceLog.txt. This makes diagnosing site issues where you are unable to step into the code, or finding out the reason for historical errors a lot easier.

As a bonus, it keeps all your error logging (and Umbraco's!) in the same place making it easier to manage going forwards.

It's a very simple control but has the capability to be made into a very awesome data type which is why I'm starting up a new CodePlex project called: Data Types for Umbraco (found here). I'm hoping that people in the Umbraco community will want to become developers on this project so a bunch of us can collaborate to create some seriously amazing data types for Umbraco 4.5. Please let me know if you want to contribute to this project as i think it could have huge potential. Instead of everyone creating their own closed source data types and developing them all in different ways, this would help unify and standardize the way we create data types.

So the first thing I will put up there is the full source for this data type as it was meant to be. However, I'm not going to get around to that today, so in the meantime I've put the source for this control right here. Remember, this is not really the best way to make this data type but it will give you a good indication of how to use the new JavaScript tree API and how to build a simple UserControl data type.

Enjoy!

ASCX Code

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TreePicker.ascx.cs"
    Inherits="ExamineDemo1.usercontrols.TreePicker" %>
<%@ Register TagPrefix="umb" TagName="tree" Src="~/umbraco/controls/Tree/TreeControl.ascx" %>
<script type="text/javascript">

//a reference to the hidden field
//storing the selected node data
var hiddenField = jQuery("#<%=PickedNodes.ClientID%>");

//create a sortable, drag/drop list and
//initialize the right panel with previously
//saved data.
jQuery(document).ready(function () {
    jQuery(".right").sortable({
        stop: function (event, ui) { StorePickedNodes(); }
    });
    jQuery(".item a.close").live("click", function () {
        jQuery(this).parent().remove();
    });

    //now rebuild the selected items
    try {
        var json = eval('(' + hiddenField.val() + ')');
        jQuery(".right").html(unescape(json.markup));
        StorePickedNodes();
    }
    catch (err) { };
});

//Add event handler to the tree API.
//Bind to the window load event as the document ready event
//is too early to query for the tree api object
jQuery(window).load(function () {
    //add a handler to the tree's nodeClicked event
    jQuery("#<%=TreePickerControl.ClientID%>")
        .UmbracoTreeAPI()
        .addEventHandler("nodeClicked", function (e, node) {
            AddToRight(node);
    });
});

function AddToRight(node) {
    //get the node id of the node selected
    var nodeId = jQuery(node).attr("id");
    //check if node id already exists in the right panel
    if (jQuery(".right").find("li[rel='" + nodeId + "']").length > 0) {
        return;
    }
    //create a copy of the node clicked on the tree
    var jNode = jQuery(node).clone().find("a:first")
    //remove un-needed attributes
    jNode.removeAttr("href")
        .removeAttr("umb:nodedata")
        .attr("href", "javascript:SyncItems(" + nodeId + ");");
    //build a DOM object to put in the right panel
    jQuery("<div class='item'><ul class='rightNode'>" +
            "<li rel='" + nodeId + "' class='closed'>" +
            "</li></ul><a class='close' href='javascript:void(0);'>[X]</a></div>")
        .appendTo(".right")
        .find(".closed").append(jNode);
    //now update the hidden field with the
    //node selection
    StorePickedNodes();
}

//A method to sync the left tree to the item
//selected in the right panel
function SyncItems(nodeId) {
    jQuery("#<%=TreePickerControl.ClientID%>")
        .UmbracoTreeAPI()
        .syncTree(nodeId.toString());
}

//were going to store both the node ids
//and the html markup to re-render the 
//right hand column as JSON to be put into
//the database.
function StorePickedNodes() {
    var val = "[";
    jQuery(".right .item ul.rightNode li").each(function () {
        val += jQuery(this).attr("rel") + ",";
    });
    if (val != "[") val = val.substr(0, val.length - 1);
    val += "]";
    //append the html markup
    var obj = "{ \"val\": " + val + ", \"markup\": \"" + escape(jQuery(".right").html()) + "\"}";
    hiddenField.val(obj);       
}

</script>

<%--Inline styles are dodgy, but simple for
this demonstration--%>

<style type="text/css">
.multiTreePicker .item ul.rightNode 
{
    float:left;
    margin:0;
    padding:0;          
}
.multiTreePicker .item ul.rightNode li
{
    margin:0;
    padding: 0;
    list-style:none;
    font:icon;
    font-family:Arial,Lucida Grande;
    font-size:12px;
    min-height:20px;
}
.multiTreePicker .item ul.rightNode li a
{
    background-repeat:no-repeat !important;
    border:0 none;
    color:#2F2F2F;
    height:18px;
    line-height:18px;
    padding:0 0 0 18px;
    text-decoration:none;
}
.multiTreePicker .item a
{
    float:left;
}   
.multiTreePicker .item a.close 
{
    margin-left:5px;
}
.multiTreePicker .item
{
    cursor: pointer;
    width:100%;
    height:20px;
}
.multiTreePicker .left.propertypane
{
    width: 300px;
    float: left;
    clear:none;
    margin-right:10px;
}
.multiTreePicker .right.propertypane
{
    width: 300px;
    float: left;
    clear:right;
    padding:5px;
}
.multiTreePicker .header
{
    width:622px;
}
   
</style>

<div class="multiTreePicker">
    <div class="header propertypane">
        <div>Select items</div>
    </div>
    <div class="left propertypane">        
        <umb:tree runat="server" ID="TreePickerControl" 
            CssClass="myTreePicker" Mode="Standard" 
            DialogMode="id" ShowContextMenu="false" 
            IsDialog="true" TreeType="content" />
    </div>
    <div class="right propertypane">
    </div>
</div>

<asp:HiddenField runat="server" ID="PickedNodes" />

C# Code Behind

public partial class TreePicker : 
    System.Web.UI.UserControl, IUsercontrolDataEditor
{
        


    #region IUsercontrolDataEditor Members

    public object value
    {
        get
        {
            //put the node in umbraco
            return PickedNodes.Value;
        }
        set
        {
            //get from umbraco
            PickedNodes.Value = value.ToString();
        }
    }

    #endregion
}

The 'aha' moment that it is actually quite easy to add code-behind files to Umbraco masterpages came to me when I had to port a quite big ASP.Net website to Umbraco. The website had grown organically over the years with lots of custom templates, user controls, etc. The site also had multi-language support, all of which was handled in the code-behind files of the pages. The goal was to get it over to Umbraco as quick as possible, then rework the functionality bit by bit. So I started by creating a new Umbraco site and ‘wrapped’ it in a web application project in Visual Studio.

_{[Please refer to the comments below to find more information on how to set this up in Visual Studio.]}

After adding a couple of document types and templates in Umbraco the masterpages folder looks something like this:

The Root.master file is the main master page, Page1.master and Page2.master are nested master pages in Umbraco. I’ve included all three of them in the solution. Now it’s time to create the code-behind file: right-click on the masterpages folder and add three C# classes and name them Root.master.cs, Page1.master.cs and Page2.master.cs. The result should be something like this:

Visual Studio automatically groups them together, fantastic. Yet they are not really hooked up yet, VS does the grouping just based on file names. The master directive on Root.master currently looks like this:

To hook up the cs file we need to add the CodeBehind and Inherits attributes like so:

You should get an error at this point as the compiler complains that Root is not convertible to System.Web.UI.MasterPage, so we need to fix this in the cs file as well by making the class partial (necessary if you want to later add designer files as well) and inheriting from System.Web.UI.MasterPage. An empty Page_Load message can’t hurt as well:

You should now be able to switch between both files by pressing F7 in Visual Studio. Let’s try to add a Property and reference that from the template:

and something like this on the template:

Now we just need to compile the project and navigate to a content page that uses the Root template to see the message.

Adding designer files

[As Simon Dingley pointed out below there is an even easier way to create the designer files: right-click on the master.aspx page and select "Convert to web application", which will create the .designer file for the selected item.]

We can also add a designer file to the duo to make things even better. After adding Root.master.designer.cs, Page1.master.designer.cs and Page2.master.designer.cs the solution looks like this:

Visual Studio is now rightfully complaining that it got duplicate definitions for the classes and even suggests to add the partial keyword, which we will quickly do. After that is all working and compiling nicely we need to give Visual Studio control over the designer files. That is easily accomplished by slightly modifying each .master file (e.g. by adding a single space to an empty line) and saving it, VS will do the rest for you. The most important thing this will do for you is to reference all controls you add to the template so they are available for use in the code-behind file.

Now let’s try to modify the message value from the code-behind of Page1 by adding

to it. Browsing to any Umbraco page that uses the Page1 template will now show the new message.

So, without further adieu, here’s the (true) new results:

So to recap, here’s the total average savings in 4.1

• Without client cache (First run)
• Number of completed requests: 30% Less
• Response bandwidth: 31% Less
• With client cache
• Number of completed requests: 6% Less
• Response bandwidth: 78% Less

This benchmark report looks at the data layer improvements in 4.1 by comparing query counts in 4.1 to 4.0.3. Not only has the data layer improved but there's been significant improvements in the consumption of the data layer API made by many of the 4.1 pages and controls.

The stats below are represented as a percentage of the total calls of 4.0.3 where the number of queries in 4.0.3 are 100% and the number of queries in 4.1 are a percentage in relation to this. These results are based on the procedures listed at the bottom of this post and on averages run over 3 separate trials.

So based on averages, Umbraco 4.1 is looking to have around 40% less queries made than 4.0.3!!! Thats HUGE!

The following steps were taken on each trial of the above steps:

• New instances of both 4.0.3 and 4.1
• Install CWS package on both instances
• Log out of both instances
• Bump web.config for both instances (clear out all data cache)
• Use SQL Profiler to determine query counts for each step listed above

Also, SQL debugging has been added to 4.1 for MS SQL instances. If you compile the source in Debug mode you can get the SQL command output by adding a trace listener to your web.config. Underneath the configuration node you can add this xml block:

<system.diagnostics>
        <trace autoflush="true">
          <listeners>
                <add name="SqlListener" 
                        type="System.Diagnostics.TextWriterTraceListener" 
                        initializeData="trace.log" />
          </listeners>
        </trace>
</system.diagnostics>

This will create a trace.log file in the root of your web app SQL debugging.

We were asked to build a form where labels, validation messages AND the regular expressions to validate phone numbers were all regionalized. Contour uses Umbraco's dictionary to store regionalized labels, so we decided to store our validation messages and regex there. Here is how we did it all...

Firstly, we name our field's in the form #Form_FirstName, #Form_LastName etc. In the dictionary, add your languages. Then create items with the same names as the form fields (without the #). This allows Contour to replace your labels. We create two matching items to handle regionalized values for validation messages and regex: #Form_FirstName_vmsg, and #Form_FirstName_regex respectively.

Contour installs RenderForm.ascx under \usercontrols\umbracoContour\ in your project. Noticing this, you can easily change it's CodeBehind property to your own "RenderForm.ascx.cs" which you inherit from Contour's. Overriding OnPreRender() is where the magic happens. The code is pretty self explanatory. We override OnPreRender(), loop through the fields, use their caption property and a suffix ("_vmsg" or "_regex") to get the values from the dictionary.

Here is the code...

public class RenderForm : Umbraco.Forms.UI.Usercontrols.RenderForm
{
protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

            // get the form fields
            FormStorage fs = new FormStorage();
            var form = fs.GetForm(new Guid(this.FormGuid));
            var fields = form.AllFields;

            foreach (var f in fields)
            {
                // get this field's validator
                var fieldId = f.Id.ToString();
                var vals = Page.Validators
                            .Cast()
                            .Where(x => x.ControlToValidate == fieldId).ToList();
                if (vals.Count > 0)
                {
                    foreach (var baseVal in vals)
                    {
  // get the validator type and assign properties
                        BaseValidator val = baseVal as RegularExpressionValidator;
                        if (val != null) // it is RegularExpressionValidator
                        {
                            // get regionalized regular expression
                            string valExpression = GetRegionalizedValidationText(f.Caption, "_regex");
                            ((RegularExpressionValidator)val).ValidationExpression = !string.IsNullOrEmpty(valExpression) ? valExpression : ((RegularExpressionValidator)val).ValidationExpression;
                        }
                        else // either a RequiredFieldValidator or another type which you must handle here!
                        {
                            // cast to another Validator type you are expecting, then set it's properties
                        }
 
   // Get the error message
val = baseVal as BaseValidator;
                        if (val != null)
                        {
                            // get regionalized error message
                            string errorMessage = GetRegionalizedValidationText(f.Caption, "_vmsg"); 
                            val.ErrorMessage = !string.IsNullOrEmpty(errorMessage) ? errorMessage : val.ErrorMessage;
                        } 
                        val.ValidationGroup = form.Name;
                    }
                }
            }          
        } 
 
 
  // Uses's the given string and suffix to get a value from the Umbraco dictionary.
        public string GetRegionalizedValidationText(string key, string type)
        {
            if (key.Contains("#"))
            {
                string itemName = key.Split('#')[1] + type;

                if (umbraco.library.GetDictionaryItem(itemName) != null) // note: item can exist and be ""
                    return umbraco.library.GetDictionaryItem(itemName);
            }
            return ""; // key does not contain #, or not found in dictionary
        } 
 } 

I’ve included a PDF version (link at the bottom) and also the image version below (if you’re too lazy to download it :)

The Umbraco config for this demo site is simple: A search form, a couple of search result pages with different templates (results using XSLT extensions, results to query media using the FluentAPI, custom results using the FluentAPI). Then there’s the content: 5 very simple nodes consisting of a text field and a numeric field and a miniature blog with some posts and comments.

I’ve included all of the source files and a backup of the database that it was running on. The source files are left in the same state as we left the demo during the presentation. So to get it up and running, just restore the database to your MS SQL server, update your web.config, and put the project files into IIS (or open the solution in Visual Studio).

Download here

UPDATED (2009-05-25)!

Here's a quick and extensible framework to enable popup windows, popup bubbles, or popup anything. Currently the framework doesn't create extra DOM elements or style anything differently. It relies on the developer to create the DOM element that will be the popup bubble (or whatever). This extension give you the flexibility to bind any number of events to show or hide the bubble. It also supports having the bubble hide on a timer and comes with a complete event model allowing you to intercept the hide and show bubble events (and cancel them if needed) and fire your own methods upon completion.

I've included a full demo html page to demonstrate some different implementations.

• Here's the code: AlertBubble.zip (20.74 kb)
• Here's a demo

Here's an example of the usage:

$(".bubble").AlertBubble(
{
        fadeTime: 500,
        hideEvent: [
                {selector: $("#hideButton"), event: "click"}
        ],
        showEvent: [
                {selector: $("#showButton"), event: "click"}
        ],
        showOnStart: true,
        text: "I am a bubble",
        hideTimer:2000
});

• fadeTime: the milliseconds to fade in/out. Default = 200 
• text: the text to show in the html element. If set to false (by default) it will use the markup that currently exists in the element.
• hideEvent/showEvent
  • Allows you to add/remove as many event handlers to show or hide the alert bubble
• showOnStart: if the bubble should show on page load or only when showOnStart exists
• hideTimer: If set, then the bubble will hide after the set number of milliseconds after shown. Default is false.
• onBeforeShowCallback: a function to call before the bubble is shown. If a callback is specified, it must return true for the code to proceed to show the bubble.
• onBeforeHideCallback: a function to call before the bubble is hidden. If a callback is specified, it must return true for the code to proceed to hide the bubble.
• onAfterShowCallback: a function to call after the bubble is shown.
• onAfterHideCallback: a function to call after the bubble is hidden.

The extension also has a simple API that can be accessed to show/hide the bubble on demand as well as using events. This is done by storing the API object for the popup bubble extension in the jQuery data object for the popup bubble selector.

API methods:

• showBubble()
• hideBubble()

To access the API, you can retrieve it from the jQuery data object with the key "AlertBubble":

var api = $(".myselector").data("AlertBubble"); 

Example:

$(".bubble").each(function() {
        var api = $(this).data("AlertBubble");
        if (api != null) {
                api.hideBubble();
        }
});

http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements#Full_FlashMX_2004_rule_set:

So to get Umbraco & TinyMCE working to give your flash application the markup that it needs you need to modify your \config\tinyMceConfig.config file:

<validElements>
    <![CDATA[+a[href|target],
+b,
+br,
+font[color|face|size],
+img[src|id|width|height|align|hspace|vspace],
+i,
+li,
+p[align|class],
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+span[class],
+textformat[blockindent|indent|leading|leftmargin|rightmargin|tabstops],
+u
]]>
</validElements>

Then there’s the issue that flash treats real line breaks and <br/> tags exactly the same! This will probably cause you a few headaches trying to work that out. So to save you that headache, you need to output the rich text markup via XSLT to flash using the XSLT function: normalize-space

Something like:

<xsl:value-of select="normalize-space($myRichTextValue)" />

1. Project Setup
2. Basic Sodality interactions
3. Checkpoint 1
4. Inserting Asychronous behaviour
5. Checkpoint 2
6. Intercepting before and after
7. Checkpoint 3
8. Download Source

1. Project Setup

• In Flash Builder, set up a new ActionScript project (i.e. NOT a Flex Project) named “SodalitySimpleDemo’.
• Download the Sodality SWC and add it to your project, making sure you add it to your source (Project Properties > ActionScript Build Path > Library path > Add SWC).
• Open the Compiler Settings (Project Properties > ActionScript Compiler) and uncheck “Copy non-embedded”, uncheck “Generate HTML Wrapper”, this is not required by the framework but will help keep things clean.
• Add the compiler argument “-keep-as3-metadata+=Advice,Trigger,Property’ to the “Additional Compiler Arguments’ field (still in the Compiler Settings area). This tells Flash Builder to keep the metatags we use to make sodality work.

2. Basic Sodality interactions

First we must add a President to the project, the president executes the core logic of Sodality.

Within the SodalitySimpleDemo class (which flash builder created in the default package), add this private variable:

private var president:President;

Add this to the SodalitySimpleDemo constructor to instantiate the president:

president = new President(this);

Passing through the root object to the president tells it how much of the display hierarchy should be managed by this president (i.e. in this case the whole hierarchy).

Now we must create an Advice class, this class represents a certain action that is taking place within your application. For simplicity’s sake we will create an Advice class representing a mouse click and we’ll create it in the default package. The MouseClickAdvice class will contain a message which will be displayed later:

package
{

        import org.farmcode.sodality.advice.Advice;
        
        public class MouseClickAdvice extends Advice
        {
                [Property(toString="true",clonable="true")]
                public var message:String;
                
                public function MouseClickAdvice(message:String=null){
                        super();
                        this.message = message;
                }
        }
}

Consider this Advice class similar to an event, we’ll use it to run other code when something gets clicked on. You’ll notice the message property is annotated with the “Property’ metatag, this forces the value to be copied over when the MouseClickAdvice is cloned in the dispatching process, generally all public properties of Advice classes should be annotated in this way. You’ll also note that the constructor arguments must always be optional in Advice subclasses, this is again to allow the cloning behaviour that Advice undergoes.

Next, we’ll add a button to the SodalitySimpleDemo class which we'll use to dispatch our advice, add this to the constructor:

var button:Sprite = new Sprite();
button.graphics.beginFill(0xff0000);
button.graphics.drawRect(100,100,100,100);
button.addEventListener(MouseEvent.CLICK, onMouseClick);
button.buttonMode = true;
addChild(button);

And then we’ll add the event handler which will dispatch the MouseClickAdvice:

protected function onMouseClick(e:MouseEvent):void{
        dispatchEvent(new MouseClickAdvice("Button Clicked"));
}

Now the MouseClickAdvice is being dispatched but nothing is listening for it. Before we do that we'll add a text field to the SodalitySimpleDemo class that we can display the message in. Add this private property to the class:

private var resultField:TextField;

And add this to the constructor:

resultField = new TextField();
addChild(resultField);

Now we'll add a function to the SodalitySimpleDemo class which will catch the advice (using the Sodality 'Trigger' Metadata), note that the method must be public for the President to find it:

[Trigger(triggerTiming="after")]
public function afterMouseClick(cause:MouseClickAdvice):void{
        resultField.text = cause.message;
}

This is all fine except that Sodality won’t trigger functions within classes unless they’re tagged with the interface IAdvisor (this only works for DisplayObjects, more on that in Step 4).

So change the SodalitySimpleDemo class definition line to:

public class SodalitySimpleDemo extends Sprite implements IAdvisor

Back to top

3. Checkpoint 1

At this point your project should run happily and when you click on the red square, the text “Button Clicked’ should appear in the corner of the SWF.

Your classes should look like this:

SodalitySimpleDemo.as

package
{
        import flash.display.Sprite;
        import flash.events.MouseEvent;
        import flash.text.TextField;
        
        import org.farmcode.sodality.President;
        import org.farmcode.sodality.advisors.IAdvisor;
        
        public class SodalitySimpleDemo extends Sprite implements IAdvisor
        {
                private var president:President;
                private var resultField:TextField;
                
                public function SodalitySimpleDemo()
                {
                        president = new President(this);
                        
                        var button:Sprite = new Sprite();
                        button.graphics.beginFill(0xff0000);
                        button.graphics.drawRect(100,100,100,100);
                        button.addEventListener(MouseEvent.CLICK, onMouseClick);
                        button.buttonMode = true;
                        addChild(button);
                        
                        resultField = new TextField();
                        addChild(resultField);
                }
                protected function onMouseClick(e:MouseEvent):void{
                        dispatchEvent(new MouseClickAdvice("Button Clicked"));
                }
                [Trigger(triggerTiming="after")]
                public function afterMouseClick(cause:MouseClickAdvice):void{
                        resultField.text = cause.message;
                }
        }
}

MouseClickAdvice.as

package
{
        import flash.display.DisplayObject;
        
        import org.farmcode.sodality.advice.Advice;
        
        public class MouseClickAdvice extends Advice
        {
                [Property(toString="true",clonable="true")]
                public var message:String;
                
                public function MouseClickAdvice(message:String=null){
                        super();
                        this.message = message;
                }
        }
}

Skip to Checkpoint 2

Back to top

4. Inserting Asychronous behaviour

You’ll be thinking to yourselves that this is just a convoluted event management system at this point, so now we’ll load a file in between when the button is clicked and when the handling function gets called (something that would be impossible with events).

We’ll change the demo so that when the red button is clicked another (non-visual) class loads a file before the “afterMouseClick’ handler function gets called.

First we'll create the file to load in, simply create a text file called 'file.txt' in the 'bin-debug' folder containing the words "File Loaded".

Now we’ll need to create a new interface representing an action (Advice) that needs to load a file. This represents all of the interactions that our file loading Advisor (which we’re about to build) will need from the advice:

package
{
        import org.farmcode.sodality.advice.IAdvice;
        
        public interface ILoadFileAdvice extends IAdvice
        {
                function get fileURL():String;
                function set message(value:String):void;
        }
}

Then we'll modify MouseClickAdvice to implement the new interface (and modify the constructor arguments to take a url):

package
{
        import org.farmcode.sodality.advice.Advice;
        
        public class MouseClickAdvice extends Advice implements ILoadFileAdvice
        {
                public function MouseClickAdvice(fileURL:String=null){
                        super();
                        this.fileURL = fileURL;
                }
                
                private var _message:String;
                private var _fileURL:String;
                
                [Property(toString="true",clonable="true")]
                public function get fileURL():String{
                        return _fileURL
                }
                public function set fileURL(value:String):void{
                        _fileURL = value;
                }
                [Property(toString="true",clonable="true")]
                public function get message():String{
                        return _message
                }
                public function set message(value:String):void{
                        _message = value;
                }
        }
}

Then we’ll need to create our new Advisor, whose responsibility it is to load a file whenever an action requires it:

package
{
        import flash.events.Event;
        import flash.net.URLLoader;
        import flash.net.URLRequest;
        
        import org.farmcode.sodality.advice.AsyncMethodAdvice;
        import org.farmcode.sodality.advisors.DynamicAdvisor;
        
        public class FileLoaderAdvisor extends DynamicAdvisor
        {
                private var lastCause:ILoadFileAdvice;
                private var lastAdvice:AsyncMethodAdvice;
                
                [Trigger(triggerTiming="before")]
                public function beforeFileLoad(cause:ILoadFileAdvice,
                                        advice:AsyncMethodAdvice, time:String):void{
                        lastCause = cause;
                        lastAdvice = advice;
                        var loader:URLLoader = new URLLoader();
                        loader.addEventListener(Event.COMPLETE, onLoadComplete);
                        loader.load(new URLRequest(cause.fileURL));
                }
                protected function onLoadComplete(e:Event):void{
                        lastCause.message = ((e.target as URLLoader).data as String);
                        lastAdvice.adviceContinue();
                }
        }
}

Much of this should be familiar, the class loads in a file and gets it's content. Have a look at the beforeFileLoad function’s parameters though, it is noteworthy that this class never references the MouseClickAdvice class, meaning that any other Advice class that implements ILoadFileAdvice will now be picked up by this class and load a file. Also of note is that the second parameter of the beforeFileLoad function is an AsyncMethodAdvice instance, this tells Sodality to wait until the “adviceContinue’ method is called on this instance before other listeners to this advice continue getting called.

The order in which the listeners get called is based on the “triggerTiming’ property within the “Trigger’ metatag. This is the reason that the 'afterMouseClick' method on the SodalitySimpleDemo will wait until after the file is loaded (and lastAdvice.adviceContinue() is called in 'onLoadComplete') before it gets called and sets the message into the TextField.

Before the new Advisor will do anything though, it must be added to the president. You can see it extends DyamicAdvisor instead of implementing IAdvisor (like SodalitySimpleDemo did), this is because non-visual Advisors need a little more logic to be added to the President. The first way a DynamicAdvisor can be added to the President is using the President's addAdvisor method, this is not the recommended way of doing it because it means references to the president must be passed around your application, tangling your logic. The preferrable way is to set the advisorDisplay property of the new Advisor to a DisplayObject which is added to the display hierarchy (beneath the original display you passed into the President when you created it).

Add this to the constructor of SodalitySimpleDemo to add the new Advisor:

var fileLoaderAdvisor:FileLoaderAdvisor = new FileLoaderAdvisor();
fileLoaderAdvisor.advisorDisplay = this;

The final touch is to modify the onMouseClick method to use the file's URL (as opposed to "Button Clicked"):

protected function onMouseClick(e:MouseEvent):void{
        dispatchEvent(new MouseClickAdvice("file.txt"));
}

Back to top

5. Checkpoint 2

Now, when you run the app, click the red box, the file will be loaded in and it’s contents will be shown in the TextField.

The FileLoaderAdvisor class and the ILoadFileAdvice should be as shown in Step 4 above (they won’t change throughout the tutorial).

Your classes should look like this:

SodalitySimpleDemo.as

package
{
        import flash.display.Sprite;
        import flash.events.MouseEvent;
        import flash.text.TextField;
        
        import org.farmcode.sodality.President;
        import org.farmcode.sodality.advisors.IAdvisor;
        
        public class SodalitySimpleDemo extends Sprite implements IAdvisor
        {
                private var president:President;
                private var resultField:TextField;
                
                public function SodalitySimpleDemo()
                {
                        president = new President(this);
                        
                        var button:Sprite = new Sprite();
                        button.graphics.beginFill(0xff0000);
                        button.graphics.drawRect(100,100,100,100);
                        button.addEventListener(MouseEvent.CLICK, onMouseClick);
                        button.buttonMode = true;
                        addChild(button);
                        
                        resultField = new TextField();
                        addChild(resultField);
                        
                        var fileLoaderAdvisor:FileLoaderAdvisor = new FileLoaderAdvisor();
                        fileLoaderAdvisor.advisorDisplay = this;
                }
                protected function onMouseClick(e:MouseEvent):void{
                        dispatchEvent(new MouseClickAdvice("file.txt"));
                }
                [Trigger(triggerTiming="after")]
                public function afterMouseClick(cause:MouseClickAdvice):void{
                        resultField.text = cause.message;
                }
        }
}

MouseClickAdvice.as

package
{
        import org.farmcode.sodality.advice.Advice;
        
        public class MouseClickAdvice extends Advice implements ILoadFileAdvice
        {
                public function MouseClickAdvice(fileURL:String=null){
                        super();
                        this.fileURL = fileURL;
                }
                
                private var _message:String;
                private var _fileURL:String;
                
                [Property(toString="true",clonable="true")]
                public function get fileURL():String{
                        return _fileURL
                }
                public function set fileURL(value:String):void{
                        _fileURL = value;
                }
                [Property(toString="true",clonable="true")]
                public function get message():String{
                        return _message
                }
                public function set message(value:String):void{
                        _message = value;
                }
        }
}

Skip to CheckPoint 3

Back to top

6. Intercepting before and after

For the final step, we build an (incredibly rudimentary) load monitor which outputs the time that outputs the time before and after the file loads.

Lets create our Load Monitor class:

package
{
        import flash.display.Sprite;
        import flash.text.TextField;
        import flash.utils.getTimer;
        
        import org.farmcode.sodality.advisors.IAdvisor;
        
        public class LoadMonitor extends Sprite implements IAdvisor
        {
                private var textField:TextField;
                
                public function LoadMonitor(){
                        textField = new TextField();
                        textField.y = 100;
                        addChild(textField);
                }
                
                [Trigger(triggerTiming="before")]
                public function beforeFileLoad(cause:ILoadFileAdvice):void{
                        textField.text = "Load begun: "+getTimer();
                }
                [Trigger(triggerTiming="after")]
                public function afterFileLoad(cause:ILoadFileAdvice):void{
                        textField.appendText("\nLoad finished: "+getTimer());
                }
        }
}

Notice that it has two triggered functions; one before the Advice is executed and one after the Advice executes. Also note that it implements the IAdvisor interface so that the President manages it.

Add these lines to the SodalitySimpleDemo constructor to add the LoadMonitor to our app:

var loadMonitor:LoadMonitor = new LoadMonitor();
addChild(loadMonitor);

Back to top

7. Checkpoint 3

Now when you run the app and click the red button, several things happen in this order:

• The LoadMonitor outputs the time before any other Advisors see the advice.
• The FileLoaderAdvisor begins loading the file, at this point the president waits for confirmation to continue.
• The file finishes loading, the FileLoaderAdvisor calls the adviceContinue method, telling the President to continue.
• The SodalitySimpleDemo sets the text in it’s TextField to the contents of the file.
• The LoadMonitor outputs the time after the advice has been to all Advisors.

This process is done without the Advisors being aware of each other, allowing for a discreet relationship between code frameworks. The only thing tying the operations together is the Advice class which simply stores and transfers data.

NOTE: You may be wondering why the LoadMonitor’s beforeFileLoad function gets called before the FileLoaderAdvisor’s beforeFileLoad method, this is based on the order in which the Advisor’s are added. This is not an issue with the prebuilt Advisors and more control over ordering is coming in version 4 (see the roadmap in the repository).

Your main class should look like this (the MouseClickAdvice class didn’t change in this step):

SodalitySimpleDemo.as

package
{
        import flash.display.Sprite;
        import flash.events.MouseEvent;
        import flash.text.TextField;
        
        import org.farmcode.sodality.President;
        import org.farmcode.sodality.advisors.IAdvisor;
        
        public class SodalitySimpleDemo extends Sprite implements IAdvisor
        {
                private var president:President;
                private var resultField:TextField;
                
                public function SodalitySimpleDemo()
                {
                        president = new President(this);
                        
                        var button:Sprite = new Sprite();
                        button.graphics.beginFill(0xff0000);
                        button.graphics.drawRect(100,100,100,100);
                        button.addEventListener(MouseEvent.CLICK, onMouseClick);
                        addChild(button);
                        
                        resultField = new TextField();
                        addChild(resultField);
                        
                        var fileLoaderAdvisor:FileLoaderAdvisor = new FileLoaderAdvisor();
                        fileLoaderAdvisor.advisorDisplay = this;
                        
                        var loadMonitor:LoadMonitor = new LoadMonitor();
                        addChild(loadMonitor);
                }
                protected function onMouseClick(e:MouseEvent):void{
                        dispatchEvent(new MouseClickAdvice("file.txt"));
                }
                [Trigger(triggerTiming="after")]
                public function afterMouseClick(cause:MouseClickAdvice):void{
                        resultField.text = cause.message;
                }
        }
}