Monthly Archives: May 2010

Syntax Highlighter for Umbraco 4

It's been a challenge for the past couple weeks to integrate a syntax highligher into Umbraco. I've done countless Google searches, read blogs, form posts and how-to articles, but I still haven't come across an update-to-date syntax highlighter tutorial for Umbraco 4. I've decided to rewrite this article to use more up-to-date methods and libraries, and to also provide a full explanation of setting up a syntax highlighter in Umbraco 4.5

There are two parts the the syntax highlighter.

  • Client side javascript to display and colour the code
  • Tinymce plugin to make it eaiser to manipulate content

We're first going to start with the tinyMCE plugin. There are many plugins to choose from for tinyMCE. At the time of this article I choose Rich Guks syntakhl. Download syntaxhl and put it in your umbraco_client\tinymce3\plugins folder. Make sure the folder has read permissions allowed.

Next we need to tell Umbraco that we want to use the plugin we just installed. Crack open config\tinyMceConfig.config and add the following to the commands element.

<command>
   <umbracoAlias>syntaxhl</umbracoAlias>
   <icon>images/editor/codehighlight.gif</icon>
   <tinyMceCommand value="" userInterface="true" frontendCommand="template">syntaxhl</tinyMceCommand>
   <priority>76</priority>
</command>

The priority number should be unique. Just increment it from the last command element you find. Mine happened to be 76.

Next add the following to the plugins element

<plugin loadOnFrontend="false">syntaxhl</plugin>

Save the config file and restart the website (open up and save web.config file). Now in the developer section of Umbraco, look up the Richtext editor datatype. In the buttons list should be your syntax highlighter button. Check the box to add it and then save the datatype. Now all of your Richtext editors in Umbraco will have the code hightlighter button appended to the end of the list. You can now start to write content that uses the syntax highlighter. This is only the first part. Now that we have the means to create and manipulate content as code, we need to display it on the client side using javascript library.

Download Alex Gorbatchev's SyntaxHighlighter library and add it to your websites script folder. At the time of this article the version was 3.0.83

Place the following code right before the </body> tag in your master page:


<!-- SyntaxHighlighter CSS and JavaScript -->
    <link type="text/css" rel="stylesheet" href="/syntaxhighlighter/styles/shCore.css">
    </link>
    <link type="text/css" rel="stylesheet" href="/syntaxhighlighter/styles/shThemeDefault.css">
    </link>

    <script type="text/javascript" src="/syntaxhighlighter/scripts/shCore.js"></script>
    
    <!-- Brushs! Include the file for each language you want to use -->
    <script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCSharp.js"></script>
    <script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushXml.js"></script>
    <script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushSql.js"></script>
    
    <script type="text/javascript"> 
        SyntaxHighlighter.config.stripBrs = true;
        SyntaxHighlighter.defaults['smart-tabs'] = true;
        SyntaxHighlighter.all(); 
    </script>

 

Thats it! I later plan to rewirte the tinyMCE plugin to include the new features of SyntaxHighlighter. Enjoy!

Welcome to OPF3

OPF3: The Painless ORM

I've been working with OPF3 for the past three years and I tell you, it has been a huge time saver. During my schooling, the standard method for manipulating a database would include writing SQL stored procedures, and then write methods within your data access layer to communicate with these stored procedures. Return values, @@IDENTITY, and methods taking lengthy parameters are all but a thing of the past, thanks to OPF3. When I was first introduced to OPF3, my first and initial thoughts were "huh?" and "what's wrong with stored procedures?

First of all, there is nothing wrong with stored procedures. In fact I still use them alongside the OPF3 framework. OPF3 isn't without its limitations though. Currently there is no support for return values. OPF3 was designed as a lightweight ORM (Object Relationship Manager) to eliminate mundane coding.

How does OPF3 work?

Imagine each table in your database as an object. For every table you have an object equivalent in your application. And just as you might expect, each object would have properties that map to the corresponding column in your database. It's a pain free process. Here's a tiny example of what such a class would look like.


[Persistent( "WebUsers" )]
        public class WebUser :ISelfContainingObject
        {
            [Field( "Id", Identifier = true, AutoNumber = true, AllowDBNull = false )]
            public int Id { get; set; }

            [Field( "Login", AllowDBNull = false )]
            public string Login { get; set; }

            [Field( "FirstName", AllowDBNull = false )]
            public string FirstName { get; set; }

            [Field( "LastName", AllowDBNull = false )]
            public string LastName { get; set; }

            [Field( "SALT", AllowDBNull = false )]
            public string SALT { get; set; }

            [Field( "HASH", AllowDBNull = false )]
            public string HASH { get; set; }

            [Field( "CreateDate", AllowDBNull = false )]
            public DateTime CreateDate { get; set; }

            [Field( "Status", AllowDBNull = false )]
            public int Status { get; set; }

            private ObjectInfo _ObjectInfo = new ObjectInfo();
            public ObjectInfo ObjectInfo
            {
                get { return _ObjectInfo; }
                set { _ObjectInfo = value; }
            }
        }

 

As you can see from my WebUser class, I've got full control of all columns in the WebUsers table. Now inserting / updating is as easy as this!


public enum eWebUserStatus
        {
            Active,     
            Pending,     
            Inactive
        }

        public void btnSaveWebUser_Click( object sender, EventArgs args )
        {
            //instansiate our WebUser class and assign the variables     
            WebUser newUser = new WebUser();
            newUser.FirstName = "Matt";
            newUser.LastName = "Tycholaz";
            newUser.Login = "matty";
            newUser.CreateDate = DateTime.Now;
            newUser.SALT = Tools.GenerateSALT();
            newUser.HASH = Tools.GenerateHASH( newUser.SALT + "secretpassword" );
            newUser.Status = ( int ) eWebUserStatus.Pending;

            try
            {
                //do an insert using a transaction         
                using ( Chili.Opf3.Storages.Transaction t = ObjectContextFactory.ObjectContext.StartTransaction() )
                {
                    //push our changes into the database             
                    ObjectContextFactory.ObjectContext.PersistChanges( newUser );
                    //commit the transaction             
                    t.Commit();
                }
            }
            catch ( Exception ex )
            {
                //if an error occurs then display it         
                MessageDisplay.DisplayMessage( ex );
            }
        }

 

Stay tuned for my next post where I'll show you more advanced scenarios.