Tuesday, November 16, 2010

My first page with Umbraco

 

Technorati Tags: ,,

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

image

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

 

image

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.

 

image 

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.

 

image

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.

image

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.

image

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.

image

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

image

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!!!

Wednesday, September 22, 2010

HTML5.Decode

Technorati Tags: ,,

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!!!

Monday, August 30, 2010

Enterprise Library 5.0 – Configuration Services Part - III

The previous two posts on Configuration Services showed how we can use an external configuration file and how we can use a specific section from an external config source.

In the final post of the Configuration Sources series, we will look at what I personally think is one of the most useful features of Configuration Services. We will see how we can have the application configuration file inherit from another configuration file and override or add only sections that are application specific. I will give you a scenario where this can be very useful.

In one of my recent projects we were developing a number of websites. Except for some application specific key value pairs a lot of the other environmental configurations were the same across most of these websites. With this feature, it will be very easy to isolate the environmental specific values in a separate configuration file, inherit the same and add key value pairs to store application specific values.

To show how this works, I have a shared config file that looks like the below.

   1: <configuration>
   2:     <configSections>
   3:         <section name="loggingConfiguration" type="Microsoft.Practices.EnterpriseLibrary.Logging.Configuration.LoggingSettings, Microsoft.Practices.EnterpriseLibrary.Logging, Version=5.0.414.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="true" />
   4:     </configSections>
   5:   <connectionStrings configSource="">
   6:     
   7:   </connectionStrings>
   8:     <loggingConfiguration name="" tracingEnabled="true" defaultCategory="General">
   9:         <listeners>
  10:             <add name="EntLIbTestListener" type="Microsoft.Practices.EnterpriseLibrary.Logging.TraceListeners.FormattedEventLogTraceListener, Microsoft.Practices.EnterpriseLibrary.Logging, Version=5.0.414.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
  11:                 listenerDataType="Microsoft.Practices.EnterpriseLibrary.Logging.Configuration.FormattedEventLogTraceListenerData, Microsoft.Practices.EnterpriseLibrary.Logging, Version=5.0.414.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
  12:                 source="Enterprise Library Logging" formatter="Text Formatter"
  13:                 log="" machineName="." traceOutputOptions="None" />
  14:         </listeners>
  15:         <formatters>
  16:             <add type="Microsoft.Practices.EnterpriseLibrary.Logging.Formatters.TextFormatter, Microsoft.Practices.EnterpriseLibrary.Logging, Version=5.0.414.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
  17:                 template="Timestamp: {timestamp}{newline}&#xA;Message: {message}{newline}&#xA;Category: {category}{newline}&#xA;Priority: {priority}{newline}&#xA;EventId: {eventid}{newline}&#xA;Severity: {severity}{newline}&#xA;Title:{title}{newline}&#xA;Machine: {localMachine}{newline}&#xA;App Domain: {localAppDomain}{newline}&#xA;ProcessId: {localProcessId}{newline}&#xA;Process Name: {localProcessName}{newline}&#xA;Thread Name: {threadName}{newline}&#xA;Win32 ThreadId:{win32ThreadId}{newline}&#xA;Extended Properties: {dictionary({key} - {value}{newline})}"
  18:                 name="Text Formatter" />
  19:         </formatters>
  20:         <categorySources>
  21:             <add switchValue="All" name="General">
  22:                 <listeners>
  23:                     <add name="EntLIbTestListener" />
  24:                 </listeners>
  25:             </add>
  26:         </categorySources>
  27:         <specialSources>
  28:             <allEvents switchValue="All" name="All Events" />
  29:             <notProcessed switchValue="All" name="Unprocessed Category" />
  30:             <errors switchValue="All" name="Logging Errors &amp; Warnings">
  31:                 <listeners>
  32:                     <add name="EntLIbTestListener" />
  33:                 </listeners>
  34:             </errors>
  35:         </specialSources>
  36:     </loggingConfiguration>
  37: </configuration>

This is the same configuration as I have used in Part I and II with the logging settings. To use this as my parent configuration, I have to set a couple of properties. I have to set the Parent Source of my config file to the common config file I have created above. The settings are shown in the screenshot below. I have also changed the configuration source to be System Configuration which means my local app.config is being used.

Parentconfig

Notice how this configuration file does not have any logging settings. After these changes, my config file now looks like



   1: <?xml version="1.0" encoding="utf-8" ?>
   2: <configuration>
   3:     <configSections>
   4:         <section name="enterpriseLibrary.ConfigurationSource" type="Microsoft.Practices.EnterpriseLibrary.Common.Configuration.ConfigurationSourceSection, Microsoft.Practices.EnterpriseLibrary.Common, Version=5.0.414.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="true" />
   5:     </configSections>
   6:     <enterpriseLibrary.ConfigurationSource selectedSource="System Configuration Source"
   7:         parentSource="Shared Config">
   8:         <sources>
   9:             <add name="System Configuration Source" type="Microsoft.Practices.EnterpriseLibrary.Common.Configuration.SystemConfigurationSource, Microsoft.Practices.EnterpriseLibrary.Common, Version=5.0.414.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
  10:             <add name="Shared Config" type="Microsoft.Practices.EnterpriseLibrary.Common.Configuration.FileConfigurationSource, Microsoft.Practices.EnterpriseLibrary.Common, Version=5.0.414.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
  11:                 filePath="C:\Users\r.vaideeswaran\Documents\Visual Studio 2010\Projects\EntLibTest\EntLibTest\CommonConfig.config" />
  12:         </sources>
  13:     </enterpriseLibrary.ConfigurationSource>
  14: </configuration>


Notice how there are now two sources added; one is the system configuration source and the other points to the shared configuration file.

As a first step, let me now test the logging code I wrote in the previous two parts. For re-cap, here is the code



   1: namespace EntLibTest1
   2: {
   3:     class Program
   4:     {
   5:         static void Main(string[] args)
   6:         {
   7:             LogWriter textWriter = EnterpriseLibraryContainer.Current.GetInstance<LogWriter>();
   8:             LogEntry testEntry = new LogEntry();
   9:             testEntry.Message = "Logging the loading of EntLibTest1";
  10:             testEntry.Priority = 2;
  11:             testEntry.Categories.Add("General");
  12:             textWriter.Write(testEntry);
  13:  
  14:             Console.WriteLine("Message Logged");
  15:             Console.ReadLine();
  16:         }
  17:     }
  18: }

This does indeed produce a “Message Logged” output on the console though there are no logging sections directly in my config. This tells me that my parent source is working. The next step is now to add a specific section and see if that works.

I add a new key value pair in the appSettings section through enterprise library. The screenshot for the same is as below.

image


This is our good old appSettings key value pair. Unsurprisingly, the config is now changed to reflect the above settings.


   1: <?xml version="1.0" encoding="utf-8" ?>
   2: <configuration>
   3:     <configSections>
   4:         <section name="enterpriseLibrary.ConfigurationSource" type="Microsoft.Practices.EnterpriseLibrary.Common.Configuration.ConfigurationSourceSection, Microsoft.Practices.EnterpriseLibrary.Common, Version=5.0.414.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="true" />
   5:     </configSections>
   6:     <appSettings>
   7:         <add key="ConnectionString" value="TestConnectionString" />
   8:     </appSettings>
   9:     <enterpriseLibrary.ConfigurationSource selectedSource="System Configuration Source"
  10:         parentSource="Shared Config">
  11:         <sources>
  12:             <add name="System Configuration Source" type="Microsoft.Practices.EnterpriseLibrary.Common.Configuration.SystemConfigurationSource, Microsoft.Practices.EnterpriseLibrary.Common, Version=5.0.414.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
  13:             <add name="Shared Config" type="Microsoft.Practices.EnterpriseLibrary.Common.Configuration.FileConfigurationSource, Microsoft.Practices.EnterpriseLibrary.Common, Version=5.0.414.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
  14:                 filePath="C:\Users\r.vaideeswaran\Documents\Visual Studio 2010\Projects\EntLibTest\EntLibTest\CommonConfig.config" />
  15:         </sources>
  16:     </enterpriseLibrary.ConfigurationSource>
  17: </configuration>


To make sure my app can retrieve the appSettings value, I add the following three lines of codev(Do not forget the usings at the top)


  1: AppSettingsReader connReader = new AppSettingsReader();
  2: var connString = connReader.GetValue("ConnectionString", typeof(string));
  3: Console.WriteLine(connString.ToString());



Nothing fancy. Now when I run the application, you will see that the application picks up both the logging configuration and the appSettings key. This happens because at run time the Enterprise library merges the two configuration files so that they act as one. The above example did not specifically override a section but if I were to override, the value in the local configuration will take precedence over the shared configuration.

That concludes my three part starter posts on Configuration Services. The Configuration Services is no where near perfect yet but as with anything else, I am sure this will evolve over multiple releases. Happy Coding!!!

Thursday, August 19, 2010

Enterprise Library 5.0 – Configuration Services Part -II

Last week, we saw how to use the same configuration file for two different applications. If you have not read the post yet, you can read it here. This week, we will look at how configuration services can help you use a section from a shared configuration file. For the sake of continuity, I will use the same example we used in the previous post.

In the previous post, we added a separate logging section, the change here is that we will just add a redirected section in the Configuration Sources element itself. To enable section redirection, the following has to be done

  • Change the configuration source to System Configuration Source. This will enable the application to use its default app.config
  • Add a redirected section. You can do this by expanding the Configuration Sources section and then add a redirected section. The source of the configuration section should now point to the section in the external file. The screenshot below shows how to add a redirected section

image

The configuration file now looks like the below

   1: <?xml version="1.0" encoding="utf-8" ?>
   2: <configuration>
   3:     <configSections>
   4:         <section name="enterpriseLibrary.ConfigurationSource" type="Microsoft.Practices.EnterpriseLibrary.Common.Configuration.ConfigurationSourceSection, Microsoft.Practices.EnterpriseLibrary.Common, Version=5.0.414.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="true" />
   5:     </configSections>
   6:     <enterpriseLibrary.ConfigurationSource selectedSource="System Configuration Source">
   7:         <sources>
   8:             <add name="System Configuration Source" type="Microsoft.Practices.EnterpriseLibrary.Common.Configuration.SystemConfigurationSource, Microsoft.Practices.EnterpriseLibrary.Common, Version=5.0.414.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
   9:             <add name="Shared Config" type="Microsoft.Practices.EnterpriseLibrary.Common.Configuration.FileConfigurationSource, Microsoft.Practices.EnterpriseLibrary.Common, Version=5.0.414.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
  10:                 filePath="C:\Users\r.vaideeswaran\Documents\Visual Studio 2010\Projects\EntLibTest\logging.config" />
  11:         </sources>
  12:         <redirectSections>
  13:             <add sourceName="Shared Config" name="loggingConfiguration" />
  14:         </redirectSections>
  15:     </enterpriseLibrary.ConfigurationSource>
  16: </configuration>




Note how the logging is now configured as a redirectSection. This will ensure that the logging section is picked up from the shared config file. The code in the previous post will now work with this configuration as well without any changes. For the sake of reference, below is the code




   1: class Program
   2: {
   3:     static void Main(string[] args)
   4:     {
   5:         LogWriter textWriter = EnterpriseLibraryContainer.Current.GetInstance<LogWriter>();
   6:         LogEntry testEntry = new LogEntry();
   7:         testEntry.Message = "Logging the loading of EntLibTest1";
   8:         testEntry.Priority = 2;
   9:         testEntry.Categories.Add("General");
  10:         textWriter.Write(testEntry);
  11:  
  12:         Console.WriteLine("Message Logged");
  13:         Console.ReadLine();
  14:     }
  15: }



While in theory, this is the same as using the configSource for a particular setting, one of the advantages is that configSource doesnt permit you to use absolute paths (except for appSettings where you can use the file attribute instead of configSource). Sometimes, this can be a real pain. The Ent Lib Configuration Sources solves that problem.



Hope I was able to give you an idea of how to use a redirected section with Ent Lib 5.0. Happy Coding!!!!