Designing with Umbraco : XSLT vs User Controls

 

in Jan, I wrote my first post on Umbraco and how to build a simple Hello World page using Umbraco.  Having spent the last few months working on Umbraco, I have to say, my liking for Umbraco has only grown. It is a fairly simple CMS and unlike Sharepoint, does not complicate the whole authoring experience. You could always argue that Sharepoint is comprehensive but that’s a discussion we will save for another post.

Back to what you can do with Umbraco, there are really two major options as an Umbraco developer to build UI; XSLT and User Controls. A lot of times as a developer, the decision you have to make is which way to go. As with a lot of other design discussions, the perfect answer is “It Depends”. But during the course of this post, I will try and unravel that generic answer to some realistic scenarios. I am going to try and layout the factors that I usually consider when deciding one way or the other. Keep in mind that this post is written targeting the web form model of Umbraco and  come razor, some of these could change.

XSLT

XSLT is the in-thing when it comes to content managed sites. It gives you the option of giving flexibility to the content author to change the way the page is displayed making it truly content managed.

With umbraco, you get the option of using XSLT to do almost everything you want. I have typically used the following constructs to decide if XSLT is the best fit

Fluctuating UI Changes -  You think something is going to change often. A typical scenario is where you have HTML tags emitted within the macro. Though there are ways and means of getting the styling changed with css, there are times when you have no choice but to emit HTML. XSLT is a natural choice in such scenarios

Navigate Content Tree- If you have to work with the Umbraco content tree. Since the Umbraco content tree is XML, XSLT becomes a natural choice if you have to navigate through the content tree.

Compliance to Standards – There are a lot of content managed standards that are prevalent. Standards like DITA are becoming more of a requirement nowadays when authoring sites. A lot of these CMS standards depend on XML and XSLT.

When in Doubt – Yes. We all come across instances when we are not sure whether to use XSLT or user controls. In such cases, my recommendation will be to start off with XSLT unless you hit an implementation roadblock that forces you to change to User Controls.

User Controls

User controls are the most natural choice for most .NET developers because they relate to it better due to their familiarity with .NET. But with XSLT being so powerful, the use of user controls for me, is limited to the following scenarios

Code Abstraction – When you do not want site managers or authors to see the code. A valid argument is that the permissions to viewing XSLT can be restricted as well through the User Permissions but bear in mind that XSLT is file based in Umbraco so users who have permissions to access the XSLT folder can view, copy or do anything with the code. If you do not want users to see what your code is doing, stick to the user control model.

Interaction with external web services – This is one of the scenarios for which I still use User control. Theoretically, it is still possible to write an XSLT extension that talks to the web service and use that within XSLT but I think it is beneficial only in scenarios where you are using the strong points of XSLT. One more interesting approach when using webservices is to use javascript and jquery templates. You could completely eliminate a macro in this scenario by having the webservice return JSON.

Parallelism – If you want to write muti-threaded code or use PLINQ then you do that only with user controls; so they become a forced choice

Use ASP.NET Features -  Though this looks like a no-brainer, the caveat here is that you can still access some of the features from XSLT. The umbraco.library does have methods to get the query string or the form variables. But if you want to check if a page is posted back or not, you cannot do that in XSLT without doing some hacks.

Unit Testing Requirements – If your project requires to have high code coverage then move away from XSLT.Though there are XSLT Unit Testing suites, they are still nascent and wont really improve your code coverage results.

Though the above list might not be exhaustive, I have tried to cover scenarios in my experience with Umbraco so far. I will be interested in knowing if there are any scenarios that you have come across that isn’t covered in this post and if you agree\disagree to the observations made in this post.

My first page with Umbraco

 

Technorati Tags: Umbraco,CMS,ASP.NET

After a small Diwali break, I am back to my blogging. The focus of this post is going to be a CMS from MS called Umbraco. I came to know about Umbraco from one of my friends. Having been involved in developing and designing a few content managed websites, I decided to take a deeper look into Umbraco. It is just a week since I started playing around with it but I thought I will get started off about creating a first page with Umbraco as I delve into other advanced aspects and figure out how to get it done.

For the unfamiliars, Umbraco is an ASP.NET based CMS. You can install Umbraco by using the web platform installer. The installation is fairly easy and self-explanatory. After you have installed it, launching Umbraco will give you the admin log in page. Use the credentials you used during set up to log in. Your home page will look like below

Settings is where to start off creating the first page. Clicking  on Settings will reveal the tree view that shows the building blocks that we will use to build our site. Let us focus on Templates and Document Types for a second. These are the two most important artifacts we will use to come up with a content managed page. For those of you familiar with Sharepoint, Templates are like Master Pages and Document Types are like Page Layouts.

The first step in creating a site is to get the master page and the style sheets done. Since Umbraco is a folder based CMS, you should be able to copy your existing Stylesheets to the stylesheet folder under the Umbraco virtual directory and you are good to go. Though it does work for the master pages to some extent, I had a bit of an issue getting Umbraco to recognise the master pages I had copied. So, I create the master page through the Umbraco interface. You have to right click on Templates and then Click on Create. Once you provide the name and confirm the creation, you will have the ability to add HTML content to the master page. The interface will look as shown below

 

Umbraco, by itself creates a nested master page. You just have to put in your content. Since it is a nested master page, be sure you put the content inside your content place holder (in my case called “ContentPlaceHolderDefault”). You will also see that you have the option of using one of your own master pages as the parent master page.

Once the master page is done, the next step is to go ahead and create a document type that we will use to put in content. Its quite easy to create a document type. You just right click and say Create.

 

 

Give a name for the Document Type and select the Template that this document type will use. You can change this later too so don’t worry too much about selecting the wrong master page.

The document type is where most of the work happens to make a page content managed. There are four tabs for every document type you create.  The first tab is the Info tab where all the details of the document type are displayed. You can provide an alias and associate the document type with an image. You can also set what Master Pages this document type can use and what is the default Master Page for this document type. Below is an example of the HomePage document type I created.

 

Next, let us examine the Tabs tab. In this tab, you can create tabs that will be displayed when this document type is used to create content. To show how it works, I have created a tab called Content that will hold the rich text box for the content author to put in the content.

The next step is to let the document type know that it has to display a rich text box in the Content tab. You do this by creating a property of type Rich text box in the Generic Properties tab under Content.

As you can see in the screenshot, I have created a “HelloWorldContent” property of type rich text box. You can also create properties of various other types. These types are essentially controls. Do note that the alias is like the HTML id of the control. You can also set if the content in this is mandatory and what regular expressions can be used to validate the content but we will save that for later. Now that the document type is created and we have created a rich text control as a part of the document type, we have to let the master page know where to display the content of the rich text box.

This can be done by inserting a page filed in the master page. Go back to the Master Page and click on Insert Page field in the tool bar above the master page. The below window will open up. If you have created the property right, then you should see it in the Choose Field dropdown. Select the field and leave the other fields to default. Save the master page.

We are done with the administration part. The final step in creating a page is the content authoring page. All content authoring in Umbraco is done in the Content screen. Click on Content in the Sections area. Right Click on the top level Content and click on Create. This pulls up a window with a text box for naming your page and a dropdown with the list of created Document Types. Choose the document type you just created and give the page a name. In my case, I choose to call it HomePage. Post creation, you will see two tabs Content and Properties as seen below.

The order in which they are displayed depends on the Sort Order I have set in the Tabs tab of the document type. The content author can put in any content in the rich text box and publish the page by clicking the Save and Publish icon. As soon as you publish, Umbraco generates a URL which you can view in the Properties tab. The page that I have created is shown below

Phew!!! That was quite a long post. I am sure this is the first of many to come from me on Umbraco. If you want to to get adventurous with Umbraco too, take a look at their site. For starters I found this site too very useful. Please feel free to leave your comments on this post and as always, Happy Coding!!!

HTML5.Decode

Technorati Tags: HTML5,HTML,HTML 4 vs HTML 5

Most of us would have heard that HTML 5 is in the works. It can be expected that almost all new browsers (some of the browsers already do) will now start supporting HTML5. What does it mean for developers and architects? This post will take a look at HTML 5 and some of the new elements in HTML 5. Detailed insights into the working of individual elements is out of scope for this particular post but I have provided links to references wherever necessary

1. Standards: One of the biggest changes in HTML 5 is that it is no longer based upon SGML. Though this does not impact developers or the architect community directly, it is good to know this because the HTML document no longer needs a DTD to render. So the !DOCTYPE element is now redundant. However, this element now performs a different function. It actually tells the browser if the document has to comply to standards or not. You can do this by setting the DOCTYPE to either of the three allowed modes; quirks mode, limited quirks mode and no quirks mode.

2. New Elements: HTML 5 has introduced a lot of new HTML elements. The new elements fall into one (sometimes multiple) of the below categories

 

• Sectioning – Sectioning can internally be divided into root and content. Root is a type of element that can have children under it. One of the new sectioning root element in HTML 5 is <figure>.  <detail> is another sectioning root element that is new on the block. The <detail> element lets you hide details unless the user wants to view them explicitly. For example, you are showing only the name of the user and you want to show the details only if the user clicks on a button or a link. The sectioning content category contains new elements like <nav>, <article> and <section>. While <nav> identifies sections intended for navigation (similar to a sitemap), <section> and <article> isolate elements in a HTML Page. <article>, for example, is intended for something like a blog entry which can be distributed independently.
• Heading – The heading category introduces <header> and <hgroup> tags. While there were already 6 header tags <h1> to <h6>, you can now wrap them inside the newly introduced <header> and <hgroup> tags. While the <header> tag identifies something as a header section, the <hgroup> tag can be used to categorise the 6 header tags as subsections.
• Embedded Content – In HTML 4, we used the object tag to display video or play audio. In HTML 5, we have separate tags to embed audio or video in the page. <video> and <audio> tags do exactly this. Apart from these tags, there is also the <embed> tag that helps you embed any other plug in. One of the more important embedded elements is also the <canvas> that helps you display graphics or dynamic images.
• Phrasing Content – These are the HTML elements that can include normal text mark up. <span> is an example of phrasing content. <mark> is a new phrasing element in HTML 5. This is like the highlight text is MS Word. Using mark you can highlight text in a document for example, search results. <progress> element helps you show progress bar. There are other Phrasing elements like <time> which help you show timestamps on your page. There is also the <datalist> element which now helps you create re-usable list options in your page.
• Menus and Commands – Though both the <menu> element and <command> element are phrasing content, I have called them out separately because of the significant differences from the previous version. <menu> element,  which was deprecated in HTML 4 has been reintroduced in HTML 5. The menu element can now be enhanced using the <command> element. The <command> element allows the user to execute commands specified as a part of the element.

3. New Attributes: HTML 5 has also introduced a whole set of new attributes to existing elements. One of the most significant additions is to our favorite <input> tag. The type attribute of the <input> tag now has some new additions. Some of these are search, month, date etc. See here for the complete list of new values.

• The <area> element now has a host of new attributes. I am listing some of them below
• ping – this attribute contains a list of space separated URLs that are pinged when the URL is clicked. This is useful for content targeting and can be turned on or off by the user.
• media – This attribute is similar to the media attribute in the link element. This is again used to specify the type of media a link targets
• hreflang and rel – Again, these do the same function as in a link element.
• target – this attribute which was deprecated has been re-introduced.
• There is now an autofocus attribute to elements like <input> and <select>. This will declaratively set the focus on the control when the page loads. This is something the user can turn off if he does not want to use.
• There is a required attribute to the <input> element which validates mandatory fields.
• A new form attribute for text element inputs help the developer specify which form the specific element belongs to. This way, it is not necessary that all the elements lie within a form. They can be placed outside the form but still be a part of it in the HTML DOM.
• You can now disable validation of a form by using the novalidate attribute in the form element.
• The individual input elements now have attributes like formaction, formtarget which overrides the value set in the form tag. This way, a single page can submit to multiple targets declaratively
• You can now write scoped style sheets by using  the scoped attribute of the style element. for example, if you want the style to be applied only to a specific scope like one flow section, you can mention that by setting the scoped attribute to true.
• Developers also have more control over when a particular script is being executed by using the async and the defer attributes in the script element.
• The iframe element has a set of new attributes that controls how the content within the iframe behave. Using the sandbox attribute, for example, you can now restrict users from clicking links or executing active content within an iframe. There is now also a srcdoc attribute using which you can specify the source of an iframe to be a document with a valid DOCTYPE
• Some HTML attributes have now been upgraded to global attributes which means they will now be available across all the elements. Examples of such attributes are class, id, lang, dir etc. There are also new global attributes and event handlers in the list.
• The draggable attribute is more powerful and can be used in conjunction with the new drag & drop APIs in HTML 5

4. Absent Elements: Some of the defunct elements are frame, frameset, acronym, applet, font

I will conclude this particular post here. Please be advised that HTML 5 is still being developed and some of the above may change. You can always find the latest reference to HTML 5 specifications here. One of the things that has not been covered as part of this post are the HTML APIs and the changes in these APIs. Hopefully I will come out with another post that concentrates on the HTML 5 APIs. Till then ciao and happy coding!!!