Nibble

Archive for March, 2009

Creating custom umbraco datatypes revisited 3

Umbraco v4.0.1 introduces the abstract dataeditor class to make it easier to build custom datatypes.

So I tried to port the char limit datatype that I showed in the ‘creating custom umbraco datatypes’.

This is how it looks:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace charLimitAbstractDataEditor
{
    public class DataType: umbraco.cms.businesslogic.datatype.AbstractDataEditor
    {
 
        private charLimitPrevalueEditor _prevalueeditor;
      
        private CharlimitControl m_control = new CharlimitControl();
 
 
        public override Guid Id
        {
            get
            {
                return new Guid(“a5dd5b89-74f5-4ed3-b855-f98ae07ea1ec”);
            }
        }
        public override string DataTypeName
        {
            get
            {
                return “CharLimit (AbstractDataEditor)”;
            }
        }
 
        public override umbraco.interfaces.IDataPrevalue PrevalueEditor
        {
            get
            {
                if (_prevalueeditor == null)
                    _prevalueeditor = new charLimitPrevalueEditor(this);
                return _prevalueeditor;
            }
        }
        public DataType()
        {
 
            base.RenderControl = m_control;
            m_control.Init += new EventHandler(m_control_Init);
            base.DataEditorControl.OnSave += new umbraco.cms.businesslogic.datatype.AbstractDataEditorControl.SaveEventHandler(DataEditorControl_OnSave);
        }
 
        void m_control_Init(object sender, EventArgs e)
        {
            m_control.Text = base.Data.Value != null ? base.Data.Value.ToString() : “”;
            m_control.Limit = Convert.ToInt32(((charLimitPrevalueEditor)PrevalueEditor).Configuration);
            
        }
 
        void DataEditorControl_OnSave(EventArgs e)
        {
            base.Data.Value = m_control.Text;
        }
       
    }
}

 

So you just need to inherit from umbraco.cms.businesslogic.datatype.AbstractDataEditor and override the Guid and the DataTypeName property.

If you also need a custom PrevalueEditor (datatype settings) you will also need to override the PrevalueEditor property.

Next step is to set the RenderControl in the constructor, the rendercontrol is just a custom control.

In this case it’s the CharLimitControl

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI;
 
namespace charLimitAbstractDataEditor
{
    public class CharlimitControl: System.Web.UI.WebControls.Panel
    {
        private TextBox txtCharLimit;
        private Label lblLimitInfo;
 
        protected override void OnInit(EventArgs e)
        {
 
            base.OnInit(e);
 
            txtCharLimit.Text = this.Text;
            txtCharLimit.TextMode = TextBoxMode.MultiLine;
            txtCharLimit.Rows = 10;
            txtCharLimit.Columns = 40;
            txtCharLimit.CssClass = “umbEditorTextFieldMultiple”;
            txtCharLimit.Attributes.Add(“onkeyup”, string.Format(“limitChars(this, {1}, ‘{0}’)”, “charlimitstatus” + this.ClientID, Limit.ToString()));
 
            lblLimitInfo = new Label();
 
            lblLimitInfo.Attributes.Add(“id”, “charlimitstatus” + this.ClientID);
 
 
            this.Controls.Add(txtCharLimit);
 
            this.Controls.Add(new LiteralControl(“<br/>”));
            this.Controls.Add(lblLimitInfo);
 
 
            string functionlimit = “function limitChars(textarea, limit, infodiv)”;
            functionlimit += “{”;
            functionlimit += “var text = textarea.value;”;
            functionlimit += “var textlength = text.length;”;
            functionlimit += “var info = document.getElementById(infodiv);”;
 
            functionlimit += “if(textlength > limit)”;
            functionlimit += “{”;
            functionlimit += “info.innerHTML = ‘You cannot write more then ‘+limit+’ characters!’;”;
            functionlimit += “textarea.value = text.substr(0,limit);”;
            functionlimit += “return false;”;
            functionlimit += “}”;
            functionlimit += “else”;
            functionlimit += “{”;
            functionlimit += “info.innerHTML = ‘You have ‘+ (limit - textlength) +’ characters left.’;”;
            functionlimit += “return true;”;
            functionlimit += “}”;
            functionlimit += “}”;
 
            ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), “limitChars”, functionlimit, true);
        }
 
        private int _limit;
        public int Limit
        {
            get
            {
                return _limit;
            }
            set
            {
                _limit = value;
            }
 
 
 
        }
 
        public string _text;
        public string Text
        {
            get
            {
                return txtCharLimit.Text;
            }
            set
            {
                if (txtCharLimit == null)
                    txtCharLimit = new TextBox();
                txtCharLimit.Text = value;
            }
        }
    }
}

 

On init I just pass the stored value and the prevalue editor configuration to the custom control.

        void m_control_Init(object sender, EventArgs e)
        {
            m_control.Text = base.Data.Value != null ? base.Data.Value.ToString() : “”;
            m_control.Limit = Convert.ToInt32(((charLimitPrevalueEditor)PrevalueEditor).Configuration);
            
        }

 

Last step is to subscribe to the base.DataEditorControl.OnSave event and set the base.Data.Value (in this case to the custom control Text property)

        void DataEditorControl_OnSave(EventArgs e)
        {
            base.Data.Value = m_control.Text;
        }

 

Download sourcecode

5 Umbraco packages you must know 5

In the developer section of umbraco v4 you can find the packages tree. There you’ll be able to install, remove and create packages.

packagetree

You can install them from the Umbraco package repository

packagerepo

Or you can choose a local package file from you machine

packagelocal

 

There are some top umbraco packages out there, this is a small list of 5 umbraco package you must know.

Creative Website Starter (CWS) 

CWS is an entire site implementation in umbraco aimed at helping new users learn umbraco.

The code is heavily commented to help understand what’s going on.

So if you are new to umbraco and you want to examine an example site, install cws.

Package homepage (by Warren Buckley)

ImageGen

ImageGen provides a fast and simple way to dynamically resize images and generate text graphics on your web site.

This is great to make sure content editors don’t mess up the site by uploading images that are to big.

Package homepage (by Douglas Robar)

MultipleFileUpload

Ever wanted to upload multiple files to the media section of umbraco. With this package (that won the cg08 package coding contest) you can.

Package homepage (by NöRD)

UmbImport

UmbImport helps you import content or members from any datasource into Umbraco.

Package homepage (by Richard Soeteman)

XSLTsearch

Xsltsearch is a plug and play search engine for your umbraco site.

You can have a search up and running in a couple of minutes, it’s easy to install and very flexible.

Package homepage (by Douglas Robar)

/config/xsltExtensions.config 3

Another config file (check here for /config/Dashboard.config) that can be found in the /config folder of umbraco is the xslExtensions.config.

This file can be used to setup custom xslt extensions.

If you are not familiar with xslt extensions here is a brief intro:

With xslt extensions you can call static .net methods from xslt.

When editing an xslt file and inserting a value.

xsltextensions1

You get the option to “get extensions”.

xsltextensions2

Hitting the button will display a new modal that will list all xslt extensions and their methods.

Default umbraco has a couple of xslt extensions .

xsltextensions3

The most used one would probably be umbraco.library:NiceUrl(Int32 nodeID) , this takes a node id and will output the url of that node.

xsltextensions4

 

Using /config/xslExtensions.config you can also add custom xslt extensions.

Lets look at an example, the blog package for umbraco 4 comes with an xslt extension to get the gravatar image based on an email address.

So step 1 is to write the .net code that can be used. This is just a static method.

 

using System;
using System.Collections.Generic;
using System.Web;
 
namespace Umlaut.Umb.Blog
{
    public class BlogLibrary
    {
        /// <summary>
        /// Gets the gravatar.
        /// </summary>
        /// <param name=”email”>The email.</param>
        /// <param name=”size”>The size.</param>
        /// <param name=”defaultImage”>The default image.</param>
        /// <returns></returns>
        public static string getGravatar(string email, int size, string defaultImage)
        {
            System.Security.Cryptography.MD5 md5 = new System.Security.Cryptography.MD5CryptoServiceProvider();
            byte[] result = md5.ComputeHash(System.Text.Encoding.ASCII.GetBytes(email));
 
            System.Text.StringBuilder hash = new System.Text.StringBuilder();
            for (int i = 0; i < result.Length; i++)
                hash.Append(result[i].ToString(“x2″));
 
            System.Text.StringBuilder image = new System.Text.StringBuilder();
 
            image.Append(“http://www.gravatar.com/avatar.php?”);
            image.Append(“gravatar_id=” + hash.ToString());
            image.Append(“&amp;rating=G”);
            image.Append(“&amp;size=” + size.ToString());
            image.Append(“&amp;default=”);
            image.Append(System.Web.HttpContext.Current.Server.UrlEncode(defaultImage));
           
 
            return image.ToString();
        }
    }
}

 

Next step (after dropping the assembly in the bin) is to setup the xslExtensions.config file.

<?xml version=”1.0″ encoding=”utf-8″?>
<XsltExtensions>
  <ext assembly=”\bin\Umlaut.Umb.Blog” type=”Umlaut.Umb.Blog.BlogLibrary” alias=”BlogLibrary”>
  </ext>
</XsltExtensions>

So you need a new ‘ext’ node with the following attributes:

  • assembly
  • type
  • alias

If the settings are correct it should appear (with the alias setup in the config file) in the xslt extensions modal

xsltextensions5

Last thing todo before you can use it is to declare the namespace.

<xsl:stylesheet 
    version=”1.0″ 
    xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” 
    xmlns:msxml=”urn:schemas-microsoft-com:xslt”
    xmlns:umbraco.library=”urn:umbraco.library”
    xmlns:BlogLibrary=”urn:BlogLibrary”
    exclude-result-prefixes=”msxml umbraco.library BlogLibrary”>