Nibble

Archive for November, 2010

Creating custom umbraco datatypes revisited Again 1

Posted November 19, 2010

The upcoming umbraco Juno release (umbraco 4.6) will be introducing data editor settings these make it a lot easier to create custom datatypes that have settings (more details on the umbraco.org blog)

On this blog I’ve got a couple of posts that outline the changes in the creation of custom datatypes, looks like we’ve gone from 250 lines of code to 70 lines of code.

In these posts I’m always creating the same datatype: a textarea that has a limit on the number of characters, you can set the limit on the datatype settings

History

18/11/2008 - Creating custom umbraco datatypes 
old school,  3 classes +- 250 lines of code

29/03/2009 - Creating custom umbraco datatypes revisited
introduction of abstract data editor ( 2 classes +- 200 lines of code)

Coming in umbraco Juno - Introduction of  DataEditorSettings (single class +- 70 lines of code)

Using DataEditorSettings

Dynamic creation of the prevalue editor (settings editor), by simply marking a property with the DataEditorSetting property.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using umbraco.cms.businesslogic.datatype;
 
namespace DataEditorSettings.CustomDataEditorUsingDataEditorSettings
{
    //using data editor settings
    public class DataType : umbraco.cms.businesslogic.datatype.AbstractDataEditor
    {
        private CharlimitControl control = new CharlimitControl();
 
        [DataEditorSetting("Limit", 
            description = "Maximum number of characters", 
            defaultValue = "250")]
        public string Limit { get; set; }
 
        // Set ID, needs to be unique
        public override Guid Id
        {
            get
            {
                return new Guid("1BA9853C-8772-43A8-937B-E865B21DFDDA");
            }
        }
 
        //Set name, (is what appears in data editor dropdown)
        public override string DataTypeName
        {
            get
            {
                return "CharLimit (using data editor settings)";
            }
        }
 
 
        public DataType()
        {
            //set rendercontrol
            base.RenderControl = control;
            //init event
            control.Init += new EventHandler(control_Init);
            //save event
            base.DataEditorControl.OnSave += 
                new umbraco.cms.businesslogic.datatype.AbstractDataEditorControl.SaveEventHandler(
                    DataEditorControl_OnSave);
 
        }
 
        void control_Init(object sender, EventArgs e)
        {
 
            control.Text = base.Data.Value != null ? base.Data.Value.ToString() : "";
            
            control.Limit = string.IsNullOrEmpty(Limit) ? "250" : Limit;
        }
 
        void DataEditorControl_OnSave(EventArgs e)
        {
            base.Data.Value = control.Text;
        }
    }
}

 

Download the sample project to see the impact (you’ll have to be running a build of Juno from at least 19/11 if you want to test it , get it here http://nightly.umbraco.org/umbraco%204.6/4.6%20Alpha/ )

Extending Umbraco Contour, creating a custom field type (text area with spellchecker) 5

Posted November 18, 2010

To continue the series on Umbraco Contour, in this post I’ll outline how I created a custom field type, a textarea that has a spell check option.

First I simply created a custom control that can be used in any asp.net project. The result looks like this:

image

I can hit the check spelling button and then I’ll get an overview of the words that are incorrect. When I click in a word I get a list of options I can choose from

 image

Selecting one will update the word…

To create this I simply used jquery-spellchecker and this asp.net version http://forums.asp.net/t/1519923.aspx

To be able to use this custom control as a Contour fieldtype I’ll need to create a custom fieldtype class  (inherit from Umbraco.Forms.Core.FieldType) and I’ll basicly wrap the custom control in this class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Umbraco.Forms.Core;
using System.Web.UI.WebControls;
using umb = umbraco;
 
namespace SpellCheckerTest.FieldType
{
    public class TextAreaWithSpellChecker : Umbraco.Forms.Core.FieldType
    {
        public Control.TextAreaWithSpellChecker txt;
        public List<Object> Value;
 
        [Umbraco.Forms.Core.Attributes.Setting("Culture", 
            description = "Enter the culture")]
        public string Culture { get; set; }
 
        [Umbraco.Forms.Core.Attributes.Setting("Check spelling caption", 
            description = "Enter the caption")]
        public string CheckSpellingCaption { get; set; }
 
        [Umbraco.Forms.Core.Attributes.Setting("Loading caption", 
            description = "Enter the caption")]
        public string LoadingCaption { get; set; }
 
        [Umbraco.Forms.Core.Attributes.Setting("No mistakes caption", 
            description = "Enter the caption")]
        public string NoMistakesCaption { get; set; }
 
        public TextAreaWithSpellChecker()
        {
            Id = new Guid("71A8189D-4A3E-4208-9EA8-32C2B138C024");
            Name = "TextArea With SpellChecker";
            Description = "Renders a TextArea With Spell Checker";
 
            Icon = "textarea.png";
            DataType = FieldDataType.LongString;
 
            txt = new Control.TextAreaWithSpellChecker();
           
 
            Value = new List<object>();
        }
 
 
        public override WebControl Editor
        {
            get
            {
                if (Value.Count > 0)
                    txt.Text = Value[0].ToString();
 
 
                txt.Culture = Culture;
                txt.CheckSpellingCaption = CheckSpellingCaption;
                txt.LoadingCaption = LoadingCaption;
                txt.NoMistakesCaption = NoMistakesCaption;
 
                return txt;
            }
            set { base.Editor = value; }
        }
 
        public override List<Object> Values
        {
            get
            {
                if (txt.Text != "")
                {
                    Value.Clear();
                    Value.Add(txt.Text);
                }
                return Value;
            }
            set { Value = value; }
        }
 
        public override string RenderPreview()
        {
            return 
                "<textarea id=\"text-content\" rows=\"5\" cols=\"25\"></textarea>" +
                "<br/> <input type=\"button\" id=\"check-textarea\" value=\"Check Spelling\" />";
        }
 
        public override string RenderPreviewWithPrevalues(List<object> prevalues)
        {
            return RenderPreview();
        }
 
        public override bool SupportsRegex
        {
            get { return true; }
        }
 
    }
}

 

As you can see it’s pretty straight forward, setitng the editor to the custom control, returning the text property as value,… Also the custom control has several properties like culture, … If I want to be able to enter these in the form designer I’ll add some properties an mark them with the Umbraco.Forms.Core.Attributes.Setting attribute

The end result:

 

Download the sourcecode

To use the fieldtype, drop the assembly SpellCheckerTest.dll in the bin directory and the SpellChecker.aspx page in the /umbraco/plugins/contourspellcheckerfieldtype directory