But as I trawled the net for 'How to' guides and started to test sites I found (Including industry advocates) it got me thinking, and I started to think it could actually have a negative impact on your business.

I am now a 100% believer that mobile and tablet browsing (And online ordering) is HUGE now, and growing year on year - And if you haven't seen it, here is a great infograph from Kissmetrics about this subject called 'Mobile Mania'.

http://blog.kissmetrics.com/mobile-mania/?wide=1

But as I started to look at these sites that had implemented RWD, I couldn't help but start to disagree with the notion that using these techniques is the right way to go.

My thinking goes like this…

Design

You design a nice site , say based on the 960 grid - It looks good, reads and lays out nicely.  Then you have to start chopping bits out and change spacing, squeezing columns headings start to go on multiple lines etc.

It sort of destroys your design (and if you work with designers, you'll know how much they will appreciate that!), and takes away everything you have worked to create in the first place.  I realise the 'Mobile First' design gang will probably jump in at this point, but unless your mobile traffic and conversions seriously out weigh your 'desktop' users - Then in my opinion its not the right way to go, you should be designing for your main audience and giving them a display that's optimised for them first.

I just think you end up with a site which doesn't really make you stand out from the crowd, doesn't really resemble what the site should look like and actually makes you look a little less professional than your competition?

Trust / Calls To Action

Another thing which popped into my head is conversions and calls to action.  For sites that sell products and let people buy through the site - Usually quite a lot of time is put into trying to portray trust to the user, such things as secure shopping logos, payment gateway logos, Seals (Not the ones that swim in the Sea ), Awards etc. 

In theory all these will either be lost, or manoeuvred further down the page (I'll get onto this more below) so the users are less likely to see them (If at all).  This also goes for your calls to action, if you have buttons or mini banners positioned to try and entice the user to do what you want or get in contact.

These are also very likely to get moved or replaced with actual content, leaving me thinking that in theory you are less likely to convert the user?

Usability

This is actually my biggest gripe with this new technique, and maybe it is just me. But I like seeing a full site on my mobile, I like being able to swipe my finger and navigate to specific portions of the site.  I like pinching and zooming in and out  and focusing where I want to.

I don't like having to scroll down and down and down, just to read the first bit of content and then scroll all the way back up to find the navigation.  Again this is probably just my preference, but I'm sure I can't be alone in thinking this can I?

Definitely Optimise For Mobile

What I do believe in though is testing your site and optimising it to work correctly on Mobiles (Something I haven't done on this one yet!!) - As there are some easy CSS tweaks and changes that will make your site look a lot better in most mobile browsers. 

As long as you take the time to do this testing, and it functions correctly within a mobile browser (Purchases works, content forms work etc.) then I'm not convinced that using responsive web design is better, or will it help convert more people into potential business.

Anyway, that's just my two pence worth…  Love to hear your thoughts about it below.

If you have a client site in which the client insists on having tons of domains pointing at it, and you don't have access to ISAPI rewrite to handle your redirects - you can actually 301 redirect using the Umbraco UrlRewriting.config.

Just set these up for each domain you need, the attribute values are pretty self explanatory.  Obviously the virtualUrl being the the domain you want to redirect FROM and the destinationUrl being the domain to redirect TO.

<add name="RedirectLeeDomain" redirectMode="Permanent" redirect="Domain" ignoreCase="true"

rewriteUrlParameter="IncludeQueryStringForRewrite" virtualUrl="http://www.leedomain.co.uk/(.*)" destinationUrl="http://www.n3o.co.uk/$1" />

You can use a similar rule to redirect non-www traffic to the www (or vice versa), e.g:

<add name="RedirectNonWww" redirectMode="Permanent" redirect="Domain" ignoreCase="true"

rewriteUrlParameter="IncludeQueryStringForRewrite" virtualUrl="http://n3o.co.uk/(.*)" destinationUrl="http://www.n3o.co.uk/$1" />

Simple as that… I wish I could take credit for this, but I actually found it out from Tim so tip of the hat to him

http://our.umbraco.org/projects/website-utilities/nforum

Also the code is on CodePlex so you can download and customise (Or debug it!) however you need.  Also for this version I have added the Umbraco site and database backup within the solution for the Umbraco install I used to create the package, and test it.

http://nforum.codeplex.com/SourceControl/list/changesets

I'll try and outline some things below which I hope will help people when installing, and any FAQ's I have received when user testing.

NOTE: You cannot upgrade from a previous version to this version, in theory you could do it manually but you'd need to do a fresh install somewhere and then compare the two.

Installation Overview

I have put a little video together showing people nForum being installed in an existing site, and showing some things that might help when you try to install it yourself - Please do watch it.

What Has Been Done In v1.5

In short I have 'tried' to make it a little more robust, faster and able to work with larger forums (1000's of nodes).  But a full list is below, doesn't look much in writing but if you look at the source code you'll see a lot has changed.

- Majority of the core codebase rewritten
It no longer uses linq2umbraco but relies on Examine with a Nodefactory backup, but still has a model structure which will make it easy for you to grab the code and customise however you need.
- A lot of bug fixes from older version
Hopefully fixes a lot of the install, and member issues from the previous versions
- Examine data provider with Nodefactory backup
As above, fully Examine/nodefactory powered - so if for some reason you can't use Examine, you can't use this package
- Multi lingual support
All plain text from code behinds and classes are in Dictionary items, but there are still plain text in the usercontrols/templates - But you can add these to dictionary items through the Umbraco admin and without having to use the source code.
- Little UI tweaking
Given the front end a little tweaking from a CSS point of view

FAQ

I'll keep adding to this section over the next few weeks, but one question came up below

Q: In the back office, if you go into a post to look at it, it's all HTML encoded, but it's a bit confusing for the editors

A: Posts should be edited in the front end, you just need to mark the member as an admin in Umbraco - Then login as the user and you can edit, delete and move topics around.  The problem is that Examine strips HTML, so the only way to get it to display using Umbraco is to HTML encode it.  So you can't use an RTE or you'd see the same thing, only way round would be to write an event to decode it before its displayed to the user I guess?

Checking Your nForum Install

Previously I had a lot of people installing and either getting timeouts, or saying things were missing - Below is a little checklist, to make sure you have all the below and it explains what the installer does.

1.) Check you have the Examine configs in, they are shown below

Examine Index

    <IndexSet SetName="nForumEntrySet" IndexPath="/App_Data/TEMP/ExamineIndexes/nForumEntryIndexSet/">
        <IndexAttributeFields>
            <add Name="id" EnableSorting="true" Type="Number" />
            <add Name="nodeName" EnableSorting="true" />
            <add Name="updateDate" EnableSorting="true" Type="DateTime" />
            <add Name="createDate" EnableSorting="true" Type="DateTime" />
            <add Name="writerName" />
            <add Name="path" />
            <add Name="nodeTypeAlias" />
            <add Name="parentID" EnableSorting="true" Type="Number" />
            <add Name="sortOrder" EnableSorting="true" Type="Number" />          
        </IndexAttributeFields>
        <IndexUserFields>
            <add Name="forumCategoryDescription" />
            <add Name="forumCategoryIsMainCategory" />
            <add Name="forumCategoryIsPrivate" />
            <add Name="forumCategoryPermissionKarmaAmount" Type="Number" />
            <add Name="forumCategoryPostPermissionKarmaAmount" Type="Number" />
            <add Name="forumCategorySubscribedList" />
            <add Name="forumCategoryParentID" />
            
            <add Name="forumPostContent" />
            <add Name="forumPostOwnedBy" />
            <add Name="forumPostLastEdited" EnableSorting="true" Type="DateTime" />
            <add Name="forumPostInReplyTo" />
            <add Name="forumPostIsSolution" />
            <add Name="forumPostIsTopicStarter" />
            <add Name="forumPostKarma" EnableSorting="true" Type="Number" />
            <add Name="forumPostUsersVoted" />
            <add Name="forumPostParentID" />
            
            <add Name="forumTopicOwnedBy" />
            <add Name="forumTopicClosed" />
            <add Name="forumTopicSolved" />
            <add Name="forumTopicParentCategoryID" />
            <add Name="forumTopicIsSticky" />
            <add Name="forumTopicSubscribedList" />
            <add Name="forumTopicLastPostDate" EnableSorting="true" Type="DateTime" />
            
        </IndexUserFields>
        <IncludeNodeTypes>
            <add Name="ForumCategory"/>
            <add Name="ForumPost" />
            <add Name="ForumTopic" />
            <add Name="Forum" />         
        </IncludeNodeTypes>
        <ExcludeNodeTypes />
    </IndexSet>

Examine Searcher

      <add name="nForumEntrySearcher" type="UmbracoExamine.UmbracoExamineSearcher, UmbracoExamine" 
             indexSet="nForumEntrySet" analyzer="Lucene.Net.Analysis.WhitespaceAnalyzer, Lucene.Net"/>

Examine Indexer

        <add name="nForumEntryIndexer"
           type="UmbracoExamine.UmbracoContentIndexer, UmbracoExamine"
           dataService="UmbracoExamine.DataServices.UmbracoDataService, UmbracoExamine"
           indexSet="nForumEntrySet"
           supportUnpublished="false"
           supportProtected="false"
           runAsync="true"
           interval="10"
           analyzer="Lucene.Net.Analysis.Standard.StandardAnalyzer, Lucene.Net"
           enableDefaultEventHandler="true"/>

2.) Check the ForumMember Group and Type has been created

Then check the member type properties are all present

3.) Check you have all the correct templates, scripts and CSS files

4.) Check all the document types have been created

5.) Check the nforum binaries are in the bin

nForum.dll
nForum.BusinessLogic.dll
AntiXSSLibrary.dll
AntiXSSLibrary.xml
HtmlSanitizationLibrary.dll
HtmlSanitizationLibrary.xml

6.) If everything seems to be in place, then grab the source code related to this release of nForum on codeplex - put it in debug, update the build events in the project to copy over to your website.

And then debug/step through using Visual studio by attaching to process - If you are not sure how to do this, there are loads of tutorials about

http://www.google.co.uk/search?aq=0&oq=umbraco+attac&sourceid=chrome&ie=UTF-8&q=debug+attach+process+video

Installing Into An Existing Site

Please watch the video above and you'll see it installed into an existing site, but if you are installing into an existing site…

You will need to take some things from the ForumMaster template and update some links - If you open the ForumMaster.master in Visual Studio you will see comments about this like the below

        <asp:LoginView ID="lvLoginTopMenu" runat="server">
      <AnonymousTemplate>
        <%
            //#### DEVEOPERS - READ ME & THEN DELETE ME ####
            //If you are going to move the forum into your own Master page, 
            //You need to update the links below to point the the correct pages within the forum
            //##############################################
        %>
        <a href="/forum-login.aspx">Login</a> / <a href="/forum-register.aspx">Register</a>            
            </AnonymousTemplate>            
        </asp:LoginView>

I hope this covers a bit more to help people out.

Over the break, I have put up a few beginner targeted Umbraco based posts, but I'd like to mix it up and maybe do some more videos and a few more complex tutorials - So I thought I'd open it to the community and find out exactly what sorts of things you guys n' girls might like to see on here?  I'm guessing a lot more v5 stuff?  More videos? Any specific things using Umbraco or NopCommerce?

But in short, to create a private membership area you firstly need to make sure you have a 'member group' setup in members section (For the templates below I have created a membergroup in Umbraco called 'SiteMembers') - And then just browse to the section/nodes in your site you want to restrict access to and right click and choose public access > Role Based Protection and assign the SiteMembers role to have access.

Templates

Once you have this done, you need to have a few things to make it work - To help speed this along I have made some templates which you can use below.  Each of the below is a usercontrol and added as a macro in the website, and once added will give you full register, login and forgotten password functionality. Its all been setup to use the JQuery validate too, so you need to make sure you have that in your main template ready if you want to use it.

**IMPORTANT**: These are just stripped out templates to get you going, you NEED to add your own security logic to check the users input for things like XSS attacks etc…

Register Template

This has macro parameters which you'll need to add to the macro, its just for redirecting to the member to a page after successful registration

ASCX

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Register.ascx.cs" Inherits="Register" %>

<div id="registersubscriberform">

    <p>All items marked with a * are mandatory</p>
    <asp:Literal ID="litError" runat="server" />
    <div class="formholder">
        <div class="formrow">
            <div class="formleft"><label for="<%= tbUsername.ClientID %>">Username*</label></div>
            <div class="formright">
                <asp:TextBox ToolTip="Enter username" CssClass="required" ID="tbUsername" runat="server" ClientIDMode="Static" />
            </div>
        </div>

        <div class="formrow">
            <div class="formleft"><label for="<%= tbEmail.ClientID %>">Email*</label></div>
            <div class="formright">
                <asp:TextBox ToolTip="Enter email" CssClass="required email" ID="tbEmail" runat="server" ClientIDMode="Static" />
            </div>
        </div>

        <div class="formrow">
            <div class="formleft"><label for="<%= tbPassword.ClientID %>">Password*</label></div>
            <div class="formright">
                <asp:TextBox ToolTip="Enter a password" CssClass="required" ID="tbPassword" TextMode="Password" runat="server" ClientIDMode="Static" />
            </div>
        </div>

        <div class="formrow">
            <div class="formleft"></div>
            <div class="formright">
                <asp:Button ID="btnRegister" runat="server" Text="Register" OnClick="RegisterPlayer" />
            </div>
        </div>
    </div>

</div>

CodeBehind

using System;
using System.Web.Security;
using System.Web.UI;
using umbraco;
using umbraco.BusinessLogic;
using umbraco.cms.businesslogic.member;

    public partial class Register : UserControl
    {
        // Macro Parameters
        public int SuccessfulLoginPage { get; set; }

        // Member Type & Group
        private const string MembersType = "SiteMembers";
        private const string MembersGroup = "SiteMembers";

        // Error format
        private const string ErrorFormat = "<p class=\"formerror\">{0}</p>";

        protected void RegisterPlayer(object sender, EventArgs e)
        {
            // Do some server side checks just to be on the safe side
            if (string.IsNullOrWhiteSpace(tbEmail.Text) | string.IsNullOrWhiteSpace(tbPassword.Text) | string.IsNullOrWhiteSpace(tbUsername.Text))
            {
                litError.Text = string.Format(ErrorFormat, "Please complete all fields");
                return;
            }                

            // Check the user isn't already registered
            if (Member.GetMemberFromEmail(tbEmail.Text) == null && Member.GetMemberFromLoginName(tbUsername.Text) == null)
            {
                // Set the member type and group
                var mt = MemberType.GetByAlias(MembersType);
                var addToMemberGroup = MemberGroup.GetByName(MembersGroup);

                //create the member, and set the password and email
                var m = Member.MakeNew(tbUsername.Text, mt, new User(0));
                m.Password = tbPassword.Text;
                m.Email = tbEmail.Text;

                // Add the member to the group
                m.AddGroup(addToMemberGroup.Id);

                //Save member
                m.Save();

                //Generate member Xml Cache
                m.XmlGenerate(new System.Xml.XmlDocument());

                // NOTE: This Is Optional
                // Login the user
                FormsAuthentication.SetAuthCookie(tbUsername.Text, false);

                // Redirect to successful page (Usually their profile or member page)
                Response.Redirect(library.NiceUrl(SuccessfulLoginPage));
            }
            else
            {
                // Error, member already exists with email or username used
                litError.Text = string.Format(ErrorFormat, "User already exists");
            }
        }
    }

Login Template

Again this has macro parameters which you'll need to add to the macro, its just for redirecting to the member to a page after successful login

ASCX

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Login.ascx.cs" Inherits="Login" %>

<asp:Literal ID="litError" runat="server" />
<asp:Login RenderOuterTable="false" ID="ctlLogin" runat="server" OnLoginError="OnLoginError" onloggedin="OnLoggedIn" RememberMeSet="True" VisibleWhenLoggedIn="False">
    <LayoutTemplate>
        <div id="login">           
             
            <div class="formholder">

            <div class="formrow">
                <div class="formleft"><label>Username</label></div>
                <div class="formright">
                    <asp:TextBox ID="UserName" CssClass="textbox required" ToolTip="Enter username" runat="server"></asp:TextBox>
                </div>
            </div>

            <div class="formrow">
                <div class="formleft"><label>Password</label></div>
                <div class="formright">
                    <asp:TextBox ID="Password" CssClass="textbox required" ToolTip="Enter password" runat="server" TextMode="Password" />
                </div>
            </div>           

            <div class="formrow">
                <div class="formleft">&nbsp;</div>
                <div class="formright">
                    <asp:CheckBox ID="RememberMe" runat="server" Text="Keep me logged in" />
                </div>
            </div>
            
            <div class="formrow">
                <div class="formleft">&nbsp;</div>
                <div class="formright">
                    <asp:Button ID="LoginButton" CssClass="loginButton" runat="server" CommandName="Login" Text="Login" /> />
                </div>
            </div>

            </div>

        </div>

    </LayoutTemplate>
</asp:Login>

CodeBehind

using System;
using System.Web.UI;
using umbraco;
using umbraco.cms.businesslogic.member;

    public partial class Login : UserControl
    {
        // Macro Parameters
        public int SuccessfulLoginPage { get; set; }

        // Error format
        private const string ErrorFormat = "<p class=\"formerror\">{0}</p>";

        // If there is an error logging in, this method will fire and put the error in the error lit
        protected void OnLoginError(object sender, EventArgs e)
        {
            litError.Text = string.Format(ErrorFormat, ctlLogin.FailureText);
        }

        // This fires once the user has successfuly logged in
        protected void OnLoggedIn(object sender, EventArgs e)
        {
            // ** OPTIONAL! **
            // You can do some custom logic here to check if user is banned or something similar
            // Get the user
            var m = Member.GetMemberFromLoginName(ctlLogin.UserName);
            // ** OPTIONAL! **

            // Send the user to the correct authenticated page, once successfully logged in
            Response.Redirect(library.NiceUrl(SuccessfulLoginPage));
        }
    }

Forgotten Password Template

The from email is stored as a constant in the code behind, change this as you need - Usually this is a site wide setting I have on the home node.

NOTE: To use this, you need to make sure that 'enablePasswordReset' in your web.config is set to 'true'

ASCX

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ForgotPassword.ascx.cs" Inherits="ForgotPassword" %>

<p>Enter your email address</p>
<asp:Literal ID="litError" runat="server" />
<p><asp:TextBox ID="tbEmail" runat="server"></asp:TextBox> 
<asp:Button ID="btnSubmit" runat="server" Text="Send Password" onclick="BtnSubmitClick" /></p>

CodeBehind

using System;
using System.Text;
using System.Text.RegularExpressions;
using System.Web.Security;
using System.Web.UI;
using umbraco;
using umbraco.cms.businesslogic.member;

public partial class ForgotPassword : UserControl
{
    // Error format
    private const string ErrorFormat = "<p class=\"formerror\">{0}</p>";

    // From Email Address
    private const string FromEmail = "noreply@mywebsite.com";

    protected void BtnSubmitClick(object sender, EventArgs e)
    {
        // Try and get the member from the email address entered
        var cMember = Member.GetMemberFromEmail(tbEmail.Text);

        // Check we have a member with that email address
        if (cMember != null)
        {
            // Found the user
            // Generate a password which we'll email the member
            var password = Membership.GeneratePassword(10, 1);
            password = Regex.Replace(password, @"[^a-zA-Z0-9]", m => "9");

            // Change the password to the new generated one above
            var member = Membership.GetUser(cMember.LoginName);
            member.ChangePassword(member.ResetPassword(), password);

            // Save the password/member
            cMember.Save();

            // update the XML cache 
            cMember.XmlGenerate(new System.Xml.XmlDocument());

            // Now email the member their password
            var sb = new StringBuilder();
            sb.AppendFormat(string.Format("<p>Please find your new password below to access the site</p>"));
            sb.AppendFormat("<p><b>{0}</b></p>", password);
            library.SendMail(FromEmail, cMember.Email, "Password Reset", sb.ToString(), true);

            // Disable the button to stop them pressing it again
            btnSubmit.Enabled = false;

            // Show a message to the user
            litError.Text = string.Format(ErrorFormat, "Password Sent");
        }
        else
        {
            // Can't find a user with that email
            litError.Text = string.Format(ErrorFormat, "Can't find a user with that email address");
        }
    }
}

Styles

A few styles just to make it look nice from the start - You don't have to use these obviously.

.formholder { overflow:hidden; width:800px;}
.formrow { padding:5px 0; clear:both; float:left; width:100%; clear:both; }
.formleft { float:left; width:30%; margin:0; line-height:20px; font-size:1.4em; padding:8px 0 0 0; }
.formright { float:right; width:59%; }
.formrow input[type=text], .formrow input[type=password] { padding:6px; width:250px; }
.formrow input[type=submit], .formrow input[type=button] { padding:3px 7px; cursor:pointer; }
.formrow select { padding:6px; width:255px; }
.formrow label.error { margin:0 0 0 10px;}

p.formerror { font-weight: bold;color: red;}

So below is a very simple template for you to use if you are looking for just that, its a usercontrol with a few styles and a couple of macro parameters.

ASCX

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ContactForm.ascx.cs" Inherits="ContactForm" %>

<asp:Literal ID="litError" runat="server" />
<div id="maincontactform">
    <dl>
        <dt><label for="<%=tbName.ClientID %>">Name*</label></dt>
        <dd><asp:TextBox ID="tbName" runat="server" CssClass="mftextbox" /></dd>

        <dt><label for="<%=tbEmail.ClientID %>">Email*</label></dt>
        <dd><asp:TextBox ID="tbEmail" runat="server" CssClass="mftextbox" /></dd>

        <dt><label for="<%=tbPhone.ClientID %>">Phone*</label></dt>
        <dd><asp:TextBox ID="tbPhone" runat="server" CssClass="mftextbox" /></dd>
        
        <dt><label for="<%=tbCountry.ClientID %>">Country</label></dt>
        <dd><asp:TextBox ID="tbCountry" runat="server" CssClass="mftextbox" /></dd>

        <dt><label for="<%=tbEnquiry.ClientID %>">Enquiry</label></dt>
        <dd><asp:TextBox ID="tbEnquiry" runat="server" TextMode="MultiLine" Rows="10" CssClass="mftextboxmulti" /></dd>
        
        <dt></dt>
        <dd><asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="BtnSubmitClick" CssClass="mfsubmitbutton" /></dd>
    </dl>
</div>

CodeBehind

using System;
using System.Text;
using System.Web.UI;
using umbraco;

    public partial class ContactForm : UserControl
    {
        // Macro Parameters
        public string EmailAddress { get; set; }
        public int ThankYouPage { get; set; }

        // Hold a couple of formatting strings for use later
        private const string ErrorFormat = "<p class=\"formerror\">{0}</p>";
        private const string EmailLineFormat = "<p><strong>{0}</strong>: {1}</p>";

        protected void BtnSubmitClick(object sender, EventArgs e)
        {
            // Quick check for mandatory fields
            if(string.IsNullOrWhiteSpace(tbName.Text) | string.IsNullOrWhiteSpace(tbEmail.Text) | string.IsNullOrWhiteSpace(tbPhone.Text))
            {
                // Found an empty field, return error
                litError.Text = string.Format(ErrorFormat, "Please complete all mandatory fields");
                return;
            }

            // No errors create email
            var email = new StringBuilder();
            email.AppendFormat(EmailLineFormat, "Name", tbName.Text);
            email.AppendFormat(EmailLineFormat, "Email", tbEmail.Text);
            email.AppendFormat(EmailLineFormat, "Phone", tbPhone.Text);
            email.AppendFormat(EmailLineFormat, "Country", tbCountry.Text);
            email.AppendFormat(tbEnquiry.Text);

            // Send the email
            library.SendMail(EmailAddress, EmailAddress, "Contact Form Enquiry", email.ToString(), true);

            // Redirect to thank you page
            Response.Redirect(library.NiceUrl(ThankYouPage));
        }
    }

Styles

/*--- Contact Form ---*/
dl { margin:12px 0; }
dt { padding:4px 0; font-weight:bold; }
dd { font-style:italic; padding:4px 0; }
.mftextbox { width:80%; padding:5px; font-size:20px; }
.mftextboxmulti { width:80%; padding:5px; font-size:12px; }
.mfsubmitbutton { font-size: 1.2em; padding: 3px 9px;}
p.formerror { font-weight: bold;color: red;}

That's it… Just add the macro parameters to your macro like below so it will work properly, add the email address you want the form to be sent to and also the thank you page to redirect the user to on successful sending.

NOTE: Don't forget, to use the umbraco.library.SendMail() you must have some SMTP settings in your web.config or it won't send.

Hopefully you'll end up with the below

I have been really getting into Umbraco Razor recently, and on a site we have just finished where we had a lot of images we were pulling out dynamically from the media section and they had to be resized differently.  So I created this little image helper class which uses a mixture of Examine & Imagegen to make a really easy way to get images without too much of a performance hit.

NOTE: You need to have Imagegen installed to use this

It allows you to optionally resize if you want, also greyscale if you want (Greyscale is an imagegen pro option) and all you pass in is the Media ID - You simple call it in your Razor Macros like so

Get Image Fast - No Resize Or GreyScale

@ImageHelper.ReturnResizedImage(Convert.ToInt32(MEDIAID), null)

Get Resized Image To 300px width

@ImageHelper.ReturnResizedImage(Convert.ToInt32(MEDIAID), 300)

Get Resized Image To 300px & GreyScale It

@ImageHelper.ReturnResizedImage(Convert.ToInt32(MEDIAID), 300, true)

The Class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.XPath;
using Examine;
using umbraco;

    public static class ImageHelper
    {
        /// <summary>
        /// Returns a resized image quickly, optional resize and also optional greyscales it
        /// </summary>
        /// <param name="mediaid">Umbraco Media ID</param>
        /// <param name="size">Optional width if you want to resize</param>
        /// <param name="greyscale">Optional greyscale</param>
        /// <returns>Full Url of image with imagegen parameters</returns>
        public static string ReturnResizedImage(int mediaid, int? size, bool greyscale = false)
        {
            if (mediaid <= 0) return null;

            const string imageResizeFormat = "/ImageGen.ashx?image={0}";
            const string grayScaleFormat = "&ColorMode=Grayscale";
            var widthFormat = string.Concat("&width=", size);
            var newImageUrl = GetUmbracoMedia(mediaid).Values["umbracoFile"];

            if (size == null & !greyscale)
            {
                return newImageUrl;
            }

            if (size != null)
            {
                newImageUrl = string.Concat(string.Format(imageResizeFormat, newImageUrl), widthFormat);
            }

            if (greyscale)
            {
                newImageUrl = string.Concat(newImageUrl, grayScaleFormat);
            }

            return newImageUrl;

        }

        /// <summary>
        /// Fastest way to get media from Umbraco
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        private static MediaValues GetUmbracoMedia(int id)
        {
            //first check in Examine as this is WAY faster
            var criteria = ExamineManager.Instance.SearchProviderCollection["InternalSearcher"].CreateSearchCriteria("media");
            var filter = criteria.Id(id);
            var results = ExamineManager.Instance.SearchProviderCollection["InternalSearcher"].Search(filter.Compile());
            if (results.Any())
            {
                return new MediaValues(results.First());
            }

            var media = library.GetMedia(id, false);
            if (media != null && media.Current != null)
            {
                media.MoveNext();
                return new MediaValues(media.Current);
            }

            return null;
        }
    }

    #region Helper Media Values Class - Taken from Shannons blog (I think)
    class MediaValues
    {
        public MediaValues(XPathNavigator xpath)
        {
            if (xpath == null) throw new ArgumentNullException("xpath");
            Name = xpath.GetAttribute("nodeName", "");
            Values = new Dictionary<string, string>();
            var result = xpath.SelectChildren(XPathNodeType.Element);
            while (result.MoveNext())
            {
                if (result.Current != null && !result.Current.HasAttributes)
                {
                    Values.Add(result.Current.Name, result.Current.Value);
                }
            }
        }

        public MediaValues(SearchResult result)
        {
            if (result == null) throw new ArgumentNullException("result");
            Name = result.Fields["nodeName"];
            Values = result.Fields;
        }

        public string Name { get; private set; }
        public IDictionary<string, string> Values { get; private set; }
    } 
    #endregion

So I thought even though the previous Google map property editor is working, and is fully functional as is - We might as well cover some of these scenarios and extend it… And as you will have seen so far, its so easy to do!

Change Values Before Save

There may be occasions where you need to edit or tweak the values of your property editor before Umbraco serializes them, and saves them to the DB.  So to show an example of this I thought I would add a new hidden field, which before the values are saved would concatenate the longitude and latitude into a format like so '51.5454, -41.25668' so we can use it directly in the JavaScript in the front end and not have to worry about getting individual values.

Lets first open up our 'GoogleMapEditorModel.cs' and add a new hidden field.

        [HiddenInput(DisplayValue = false)]
        public string LatLongCombined { get; set; }

That's it, we have somewhere to store this value - Now we just need to override an inbuilt method called 'GetSerializedValue' which will allow us to change and edit values before they are saved. So under our newly added 'LatLongCombined' property in your code add the following:

        public override IDictionary<string, object> GetSerializedValue()
        {
            if (Lat != null && Long != null)
            {
                LatLongCombined = string.Concat(Lat, ", ", Long);
            }
            return base.GetSerializedValue();
        }

As you can see we are just concatenating the other property values into the format we want and saving them to the new property, but you could do anything in here really? Maybe call an external web service or do more complex logic dependant on your needs.

Obviously we can now update our homepage razor code to reflect this by removing the var lat & long we initially added and update the following line of the JavaScript to (Don't forget to actually load the backend first and save and publish the home page or you'll get a key error in the front end)

var myLatlng = new google.maps.LatLng(@Html.Raw(Model.Field<string>("gMap", "LatLongCombined").ToString()));

As the meercat would say.. Simples..

Adding PreValues

For more complex property editors that might require Api keys or lots of configuration settings, prevalues are a must - And again the v5 team have made it super easy to do this using the same principles as the actual editor itself using a Model to scaffold/dictate your UI.  You just create a class as you did for the EditorModel again keeping a naming convention like so 'GoogleMapPreValueModel.cs' appending PreValueModel at the end.  Create this file and add the following code, as you can see its almost exactly the same as the EditorModel apart from we inherit from 'PreValueModel' instaead of 'EditorModel'

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Text;
using Umbraco.Cms.Web.Model.BackOffice.PropertyEditors;

namespace Umbraco.Cms.Web.PropertyEditors.GoogleMap
{
    public class GoogleMapPreValueModel : PreValueModel
    {
        [Required(ErrorMessage = @"Zoom level missing")]
        [DisplayName(@"Set the initial zoom level of your map")]
        public int GoogleMapZoomLevel { get; set; }
    }
}

Before this will just work, we do need to tell the PropertyEditor that we have prevalues and to make sure they are available to us from within our property editor.  To do this we just need to expand on what we did in the previous post.

GoogleMapEditorModel

Open up 'GoogleMapEditorModel.cs' and update the main class line to the following (We are just appending the type <GoogleMapPreValueModel> to the EditorModel class we were inheriting from)

public class GoogleMapEditorModel : EditorModel<GoogleMapPreValueModel>

And then add the following constructor just underneath

public GoogleMapEditorModel(GoogleMapPreValueModel preValues) : base(preValues)
{
}

GoogleMapEditor

Finally we just need to do the same thing to the Editor, so update the following line (Again we are adding the PreValueModel type to the PropertyEditor)

public class GoogleMapEditor : PropertyEditor<GoogleMapEditorModel, GoogleMapPreValueModel>

You will know be prompted in Visual Studio to update the implemented interface members, you can either follow the VS prompt or copy and paste the following

        public override GoogleMapEditorModel CreateEditorModel(GoogleMapPreValueModel preValues)
        {
            return new GoogleMapEditorModel(preValues);
        }

        public override GoogleMapPreValueModel CreatePreValueEditorModel()
        {
            return new GoogleMapPreValueModel();
        }

And that be it me ol'friend! If you build and load up the solution you'll see the following on your property editor in the developer section

TIP!: You might have to delete your temporary ASP.NET files to get the prevalues to show.

Custom View For PreValues

I'm not going to do this as I think its a bit pointless for this example, but again you can have a custom view for your Pre Values if you wish and again its the exact same concept as the custom view for the property editor (Nifty hey). See the previous post for more details, but in short you just need to create the following view in your 'Views' folder

GoogleMapPreValueEditor.cshtml

At the top of this view add the following

@inherits WebViewPage<Umbraco.Cms.Web.PropertyEditors.GoogleMap.GoogleMapPreValueModel>

And in the 'GoogleMapPreValueModel.cs' class, decorate it with the following to tell Umbraco its using an embedded view (Again exactly the same as we did for the main property editor)

[EmbeddedView("Umbraco.Cms.Web.PropertyEditors.GoogleMap.Views.GoogleMapPreValueEditor.cshtml", "Umbraco.Cms.Web.PropertyEditors")]

See the custom view in the previous post on how to access the properties of the model.

Changing PreValues Before Save

So I haven't actually used this one, but it seems just like on the property editor you can override the same method (Although its a little different)

        public override string GetSerializedValue()
        {
            return base.GetSerializedValue();
        }

I'll have to have a play with this further but at the moment I couldn't think of a reason for using it - so have a play and see if it works for you

Actually Using The PreValue Values

Anyway, so we'll skip the above two items and just use the standard preValue model for showing and saving the settings (Zoom level in our case) - What we want to do now is set the zoom level for the map in our view.  To do this you access prevalue values in your editor like so:

@Model.PreValueModel.PropertyName

So in our case we would get the zoom level like this

@Model.PreValueModel.GoogleMapZoomLevel

Now in our example the Zoom level is in the JavaScript, so for us to be able to use this we need to set another global JS variable in our custom editor view (Just under var latval in the JS script tag)

    var zoomLevel = @Model.PreValueModel.GoogleMapZoomLevel;
    if(zoomLevel <= 0) {
        zoomLevel = 16;
    }

Now open up your 'gMap.js' file and changed the zoom: variable at the top from 'zoom: 16' to:

zoom: zoomLevel,

Save, build and run…

TIP!: You might have to delete your temporary ASP.NET files to get this to show

And that's it … Have a play changing the zoom value settings, and you'll see the zoom level change… As Mr Ramsey would say, Google Map Property Editor... Done!

Hopefully you'll agree this is a great step forward from v4.

As with most blog posts, I will explain things in my own way so the terminology may not be 100% correct, but I hope at the end of this post you should be able to easily create your property editor.  also before I start if you are coming from Umbraco v4 and want to know what the hell a property editor is… Well its sort of the new name for DataTypes.

References

Before I start there are some good references, albeit things are still changing so they may need to be updated

Wiki post
http://jupiter.umbraco.org/Developing%20Property%20Editors.ashx

Tim's Post
http://www.nibble.be/?p=104

MVC validation data annotations
Lastly I would highly recommend you read up about MVC validation data annotations, as you use these for the EditorModel and prevalueModel model

http://www.asp.net/mvc/tutorials/validation-with-the-data-annotation-validators-cs

Simple Example

When I started messing around, I found the simplest example of a property editor was to open up the v5 source and go to the 'Umbraco.Cms.Web.PropertyEditors' project and open up the TrueFalse property editor.  As you can see this is a very, very simple property editor and is made of two files 'TrueFalseEditor' and 'TrueFalseEditorModel'.  Notice the naming convention of PropertyNameEditor and PropertyNameEditorModel, this is kept throughout.

The only file that's really doing anything here is the 'TrueFalseEditorModel', if you open it up you can see its a simple class with a public bool property (Decorated with data annotations - See link in references above) and it inherits from 'EditorModel' - That's it, which is why its called the 'Model' (I look at this like scaffolding in MVC, I guess its probably the something similar under the hood?). 

It literally is the model of your property editor, in this case with are just trying to display something which enables a user to choose and save a true/false value.  So when this bool property in your model is picked up by Umbraco, it will render it as a checkbox in the view. The second file 'TrueFalseEditor' in this case is just used to return your EditorModel to Umbraco and also has some identifiers in the decoration, it has a unique GUID which is the ID, an alias and a name - But in short all you need to know for this example is that it returns your EditorModel which is rendered as a checkbox.

So if we changed the property named 'Value' in the Model from a bool to say a string, then in the admin it would get rendered as textbox… Same if we changed it from a bool to say an int, it would get rendered as a textbox that only accepts an integer! Yes validation is all handled for you! Pretty cool hey…

TIPS:

1) I'm not sure on the terminology here, but Property editors are fully compiled meaning that if you have any assets (Custom Views, JS & CSS files etc…) they need to be marked as embedded resource so they are compiled into the DLL. We'll cover this again but to do this you just 'right click' on the files and go to 'properties' and change build action to embedded resource (see below)

2) Whether this will be sorted on full release or not I don't know, because I don't know if its an MVC or Umbraco thing. But if you make some changes to your property editor, or add some more resource files it doesn't always show up when Umbraco is run.  To kick the changes into effect you need to delete you ASP.NET temp files and then rebuild the solution (Bit of a pain but not a show stopper).

Structure

As you will see from other Property Editors in the v5 source the file/folder structure is pretty simple - Two folders:

Views
Resources

Which hold what the say on the tin… any custom views go into the Views folder and your resources (CSS, JS, Images) go into the Resources folder.  all you classes then go in the root of the editor folder, using the naming convention I mentioned above. Again don't forget any views/resources added have to marked as 'embedded resource' or your property editor won't work.

The gMap Model

I have to say, (and I hope you'll agree after reading the above) making a quick, simple'ish custom datatype in v5 really is a breeze - I love the way you can just create your model class and don't have to worry about creating the UI or worry about how to save the values… It just works.  But for our Google Map property editor we need to add some custom code to the view, so we can show the map, autocomplete textbox for locations and a few other things.

But again, the v5 guys have made doing this SUPER easy!  Before we do that we still need to create our base model and editor class.  So just like the other property editors, open up the v5 source and in the 'Umbraco.Cms.Web.PropertyEditors' project create a folder called 'GoogleMap' and create the following files

Views (Folder)
Resources (Folder)
GoogleMapEditor.cs
GoogleMapEditorModel.cs

Now we just need to add the properties to our Model - Lets work our what we need, and then we can relate that to the model - All I want to store is:

• The Location The Users Types In (string)
• The longitude from the gMaps GeoCoding (User doesn't use these, so they can ben hidden)
• The latitude from the gMaps GeoCoding (User doesn't use these, so they can ben hidden)

Based on this I'll create both the editor and editorModel just like its been done in the simple TrueFalse example above:

Open GoogleMapEditorModel.cs and add

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using Umbraco.Cms.Web.EmbeddedViewEngine;
using Umbraco.Cms.Web.Model.BackOffice.PropertyEditors;
using Umbraco.Cms.Web.PropertyEditors.Tags;

namespace Umbraco.Cms.Web.PropertyEditors.GoogleMap
{
    public class GoogleMapEditorModel : EditorModel
    {

        [Required(ErrorMessage = "Postcode/location is required")]
        public string Postcode { get; set; }

        [HiddenInput(DisplayValue = false)]
        public string Long { get; set; }

        [HiddenInput(DisplayValue = false)]
        public string Lat { get; set; }

    }
}

I'm not going to go into detail about the attributes I have decorated the properties with, as I mentioned above you need to go and read up about 'MVC validation data annotations' as they are an MVC thing not a specific Umbraco thing.  But I hope just be looking at the code you get the idea of what they are doing.

Open GoogleMapEditor.cs and add

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI;
using Umbraco.Cms.Web.Model.BackOffice.PropertyEditors;

namespace Umbraco.Cms.Web.PropertyEditors.GoogleMap
{
    [PropertyEditor("E8FA2010-D72E-4F13-9C88-9B79F8466934", "GoogleMap", "GoogleMap")]
    public class GoogleMapEditor : PropertyEditor<GoogleMapEditorModel>
    {
        public override GoogleMapEditorModel CreateEditorModel()
        {
            return new GoogleMapEditorModel();
        }

    }
}

As you can see a very simple bit of code… And you could now build this code, and it would work (So to speak) but you would see a textbox that required some text in the admin and it would have two hidden inputs which would do nothing! Awesome hey! What we need to do now is add a custom view to start making this work.

Adding A Custom View

To add a custom view for our property editor we just need to create the view in the 'Views' folder and mark the Editor Model as an 'EmbeddedView' with the path to the view.  So lets do that, create your View and add it into the views folder keeping the same naming convention as the actual editor.

GoogleMapEditor.cshtml

And copy and paste the following in and save it

@inherits WebViewPage<Umbraco.Cms.Web.PropertyEditors.GoogleMap.GoogleMapEditorModel>
@using Umbraco.Cms.Web;
@using ClientDependency.Core;
@using ClientDependency.Core.Mvc;
@using System.Web.Helpers;
@using System.Web.Mvc;
@using System.Web.Mvc.Ajax;
@using System.Web.Mvc.Html;
@using System.Web.Routing;
@using System.Web.WebPages;
@using Microsoft.Web.Mvc;
@using Umbraco.Cms.Web.PropertyEditors.GoogleMap

Now in your EditorModel class you just need to decorate the class with the following (NAMESPACES ARE CASE SENSITIVE, so make sure you double check them - This has caught me out before)

    [EmbeddedView("Umbraco.Cms.Web.PropertyEditors.GoogleMap.Views.GoogleMapEditor.cshtml", "Umbraco.Cms.Web.PropertyEditors")]
    public class GoogleMapEditorModel : EditorModel

Hopefully you can see the two main things we have done here, in the view we have added the '@inherits WebViewPage<>' and on the EditorModel added '[EmbeddedView()]' I think these are pretty self explanatory so won't go into anymore detail on these.  But in short, the your telling the view to use the EditorModel as the 'model' in the view so you have access to all the properties and also just making sure Umbraco knows that the EditorModel is now an EmbeddedView with the path to it.

Now things are going to move a little faster here because we are just going to add the HTML, JS & CSS… Again I mentioned at the beginning of the blog I wasn't going to go into much detail about the Google Map stuff as its all in my previous post.  So with that, open up your new custom view and replace it with the following and save it:

@inherits WebViewPage<Umbraco.Cms.Web.PropertyEditors.GoogleMap.GoogleMapEditorModel>
@using Umbraco.Cms.Web;
@using ClientDependency.Core;
@using ClientDependency.Core.Mvc;
@using System.Web.Helpers;
@using System.Web.Mvc;
@using System.Web.Mvc.Ajax;
@using System.Web.Mvc.Html;
@using System.Web.Routing;
@using System.Web.WebPages;
@using Microsoft.Web.Mvc;
@using Umbraco.Cms.Web.PropertyEditors.GoogleMap

<script type="text/javascript">
    var PostCodeid = "#@Html.IdFor(x => Model.Postcode)";
    var longval = "#@Html.IdFor(x => Model.Long)";
    var latval = "#@Html.IdFor(x => Model.Lat)";
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
@{ 
Html
.RequiresJsResource(typeof(GoogleMapEditor), "Umbraco.Cms.Web.PropertyEditors.GoogleMap.Resources.gMap.js")
.RequiresCssResource(typeof(GoogleMapEditor), "Umbraco.Cms.Web.PropertyEditors.GoogleMap.Resources.gMap.css");
}

<p>@Html.TextBoxFor(x => Model.Postcode, new { @class = "postcode" }) <input type="submit" id="findbutton" value="Find" /></p>

<p>@Html.TextBox("latTextBox", Model.Lat, new { @class = "latTextBox", @readonly =  "readonly" }) @Html.TextBox("longTextBox", Model.Long, new { @class = "longTextBox", @readonly = "readonly" })</p>

<div id="geomap" style="width: 350px; height: 350px;">
    <p>
        Loading Please Wait...</p>
</div>

@Html.HiddenFor(x => Model.Lat)
@Html.HiddenFor(x => Model.Long)

As this is a simple view, you should be able to see what everything is - I'll break down what's on the page starting from the top

• We have some global JS variables which get the ID's of elements we use in our JS code
• Reference the Google maps API
• Reference the two asset files which we'll add in the next section (JS & CSS)
  - TIP: Whenever adding resources, note that the namespace IS case sensitive
• HTML for the view (Showing the textbox, a find button, two general textboxes to show the Long & Lat, Div for the map and the two hidden fields to store the Long & Lat)

REMEMBER: Now we are done, mark this view as an embedded resource (Right click, properties, build action = embedded resource)

Adding Resources

In this property editor with have two asset/resource files - One JavaScript file with all the logic to interact with GoogleMaps and a very simple CSS file just so you can see the autocomplete dropdown and a bit of other styling.  Add the JS & CSS file in your 'Resources' folder like so  'gMap.css & gMap.js'

Now add the contents of them

gMap.css

.ui-autocomplete { background-color: white; width: 300px; border: 1px solid #cfcfcf; list-style-type: none; padding-left: 0px; font-family: Arial, Helvetica, sans-serif; cursor: pointer; font-size: 12px; }
.ui-menu-item { padding: 4px 0; }
#geomap { border: 1px #ccc solid;}
input.latTextBox, input.longTextBox { width: 120px !Important;}

gMap.js

var geocoder;
var map;
var marker;

function initialize() {
    //MAP
    var initialLat = $(latval).val();
    var initialLong = $(longval).val();
    if (initialLat == '') {
        initialLat = "51.773071843208115";
        initialLong = "-1.6568558468750325";
    }
    var latlng = new google.maps.LatLng(initialLat, initialLong);
    var options = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("geomap"), options);

    geocoder = new google.maps.Geocoder();    

    marker = new google.maps.Marker({
        map: map,
        draggable: true,
        position: latlng
    });

    google.maps.event.addListener(marker, "dragend", function (event) {
        var point = marker.getPosition();
        map.panTo(point);
    });
    
};

$(document).ready(function () {

    initialize();

    $(function () {
        $(PostCodeid).autocomplete({
            //This bit uses the geocoder to fetch address values
            source: function (request, response) {
                geocoder.geocode({ 'address': request.term }, function (results, status) {
                    response($.map(results, function (item) {
                        return {
                            label: item.formatted_address,
                            value: item.formatted_address
                        };
                    }));
                });
            }
        });
    });

    $('#findbutton').click(function (e) {
        var address = $(PostCodeid).val();
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                marker.setPosition(results[0].geometry.location);
                $(latval).val(marker.getPosition().lat());
                $(longval).val(marker.getPosition().lng());
                $("input.latTextBox").val(marker.getPosition().lat());
                $("input.longTextBox").val(marker.getPosition().lng());
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
        e.preventDefault();
    });

    //Add listener to marker for reverse geocoding
    google.maps.event.addListener(marker, 'drag', function () {
        geocoder.geocode({ 'latLng': marker.getPosition() }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    //$('#address').val(results[0].formatted_address);
                    $(latval).val(marker.getPosition().lat());
                    $(longval).val(marker.getPosition().lng());
                    $("input.latTextBox").val(marker.getPosition().lat());
                    $("input.longTextBox").val(marker.getPosition().lng());
                }
            }
        });
    });

});

Lastly…

After adding any resources you need mark them in the editor as a WebResource so they get included in the binary, add the following two lines above the 'namespace Umbraco.Cms.Web.PropertyEditors.GoogleMap' line in your 'GoogleMapEditor.cs' file

[assembly: WebResource("Umbraco.Cms.Web.PropertyEditors.GoogleMap.Resources.gMap.js", "application/x-javascript")]
[assembly: WebResource("Umbraco.Cms.Web.PropertyEditors.GoogleMap.Resources.gMap.css", "text/css", PerformSubstitution = true)]

AGAIN REMEMBER: Now we are done, always mark ALL your resources (And custom views) as an embedded resource (Right click, properties, build action = embedded resource)

See It In Action

Ok now we have our Property Editor pretty much done, you just need to build the site (Actually just click the run button to fire it up) add it to your site as you would do a datatype in a normal Umbraco site (In the developer section).  Add the GoogleMap Property Editor to the 'Homepage' document type and name it 'gMap', save and when you view the admin UI you should see the following:

Now type and address or postcode and you should start to see the autocomplete kick in, once you have selected an address click find to geoCode it - And to fine tune the position drag the marker around to suit. Then save and publish.

Using In the Front End

Getting the values out is very easy in the front end, you just use the following extension method

Model.Field<string>("PropertyAlias", "ValueAlias")

Where property Alias is the actual alias of the property we added to the DocType (In our case 'gMap') and 'ValueAlias' is the name of the properties you added in your EditorModel (Ours are 'Postcode, Long & Lat'). So to use these in the front end, we'll just throw the map in the 'Homepage' template.

Open up the template and at the top, under 'ViewBag.Title' add the following

    var Long = Model.Field<string>("gMap", "Long");
    var Lat = Model.Field<string>("gMap", "Lat");

And now above the first H2 title add the following:

<h2>Google Map</h2>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize() {
        var myLatlng = new google.maps.LatLng(@Html.Raw(Lat.ToString()), @Html.Raw(Long.ToString()));
        var myOptions = {
            zoom: 13,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("contactmap"), myOptions);

        var homestring = 'Your Location';
        var homeinfowindow = new google.maps.InfoWindow({ content: homestring });
        var homemarker = new google.maps.Marker({
            position: myLatlng,
            map: map
        });
        google.maps.event.addListener(homemarker, 'click', function () {
            homeinfowindow.open(map, homemarker);
        });

    }

    $(document).ready(function () {
        initialize();
    });
</script>
<div id="contactmap" style="width:400px; height: 300px; border:2px #ccc solid;"></div>

Tada..

As you can see its very simple, and maybe not how you would do it in a real site but it shows you how to get your values back out in a view - I hope this blog post helps you get started playing with property editors, and please let me know your comments below, and if I have missed or got something wrong.

Extending Further…

In the next post we'll be extending this property editor by adding pre-values, manipulating the content before we save it and a few other things.

Happy Coding

So what does this actually do?

1. Has an autocomplete text box that you can either choose from the location results, or just type in a postcode
2. When you click find it takes the address, postcode whatever and Geocodes it
3. Then adds a draggable marker on the map and also stores the long & lat in hidden values
4. If you drag the marker, it saves the new long & lat in the hidden values

HTML / styles

Very simple bit of HTML and some basic styles so you can see the autocomplete dropdown on the textbox, textbox for the address/postcode and a find button. div to show the map and the two hidden inputs to store the long and lats in

        <style>
            .ui-autocomplete {
                background-color: white;
                width: 300px;
                border: 1px solid #cfcfcf;
                list-style-type: none;
                padding-left: 0px; font-family:Arial, Helvetica, sans-serif; cursor:pointer; font-size:12px;
            }
            .ui-menu-item {padding:3px 0;}
        </style>

        <p><input class="postcode" id="Postcode" name="Postcode" type="text"> <input type="submit" id="findbutton" value="Find" /></p>
        
        <div id="geomap" style="width:400px; height:400px;">
            <p>Loading Please Wait...</p>
        </div>
        
        <input id="hidLat" name="hidLat" type="hidden" value="">
        <input id="hidLong" name="hidLong" type="hidden" value="">     

JavaScript

We use the google maps API, Jquery & Jquery UI which we can get from the google CDN. In the initialise method I have added in some default values so when the map first loads it has a marker by default, you can obviously remove all this.

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>                
        <script type="text/javascript">
        var PostCodeid = "#Postcode";
        var longval = "#hidLong";
        var latval = "#hidLat";
        var geocoder;
        var map;
        var marker;

        function initialize() {
            //MAP
            var initialLat = $(latval).val();
            var initialLong = $(longval).val();
            if (initialLat == '') {
                initialLat = "51.773071843208115";
                initialLong = "-1.6568558468750325";
            }
            var latlng = new google.maps.LatLng(initialLat, initialLong);
            var options = {
                zoom: 16,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
        
            map = new google.maps.Map(document.getElementById("geomap"), options);
        
            geocoder = new google.maps.Geocoder();    
        
            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                position: latlng
            });
        
            google.maps.event.addListener(marker, "dragend", function (event) {
                var point = marker.getPosition();
                map.panTo(point);
            });
            
        };
        
        $(document).ready(function () {
        
            initialize();
        
            $(function () {
                $(PostCodeid).autocomplete({
                    //This bit uses the geocoder to fetch address values
                    source: function (request, response) {
                        geocoder.geocode({ 'address': request.term }, function (results, status) {
                            response($.map(results, function (item) {
                                return {
                                    label: item.formatted_address,
                                    value: item.formatted_address
                                };
                            }));
                        });
                    }
                });
            });
        
            $('#findbutton').click(function (e) {
                var address = $(PostCodeid).val();
                geocoder.geocode({ 'address': address }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);
                        marker.setPosition(results[0].geometry.location);
                        $(latval).val(marker.getPosition().lat());
                        $(longval).val(marker.getPosition().lng());
                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });
                e.preventDefault();
            });
        
            //Add listener to marker for reverse geocoding
            google.maps.event.addListener(marker, 'drag', function () {
                geocoder.geocode({ 'latLng': marker.getPosition() }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[0]) {
                            $(latval).val(marker.getPosition().lat());
                            $(longval).val(marker.getPosition().lng());
                        }
                    }
                });
            });
        
        });

    </script>

Just grab all the code above, throw it in a HTML file and open it in your favorite browser and you'll see how it works