Nibble

Archive for July, 2008

Getting started with umbraco 14

Last Saturday, during the umbraco meetup the ‘lack of documentation’ topic came up ( as usual ). So for al those people trying to get started….

A great way to get started is to install Warren’s creative web site wizard and to take a look at how things are set up and how it interconnects (developer section, right click macro’s, choose import package then open the repository and install the package). You can also find different references on the web, I tried to structure some of them in this ‘getting started’ list.

Download:

You can always find the latest release on codeplex (currently 3.0.5)
http://www.codeplex.com/umbraco/Release/ProjectReleases.aspx?ReleaseId=6344

Installation:
http://www.umbraco.org/v4 (link to screencast in the bottom right of the page)
http://umbraco.org/documentation/books/install-umbraco-21x-on-windows-xp
http://umbraco.org/documentation/books/install-umbraco-30-on-windows-server-2003
http://umbraco.org/documentation/books/install-umbraco-30-on-windows-vista
http://umbraco.org/documentation/books/install-umbraco-30-on-windows-xp

Basics:
Document Types:
http://www.umbraco.org/blog/2007/12/3/dec-3-umbraco-basics-document-types
http://www.umbraco.org/blog/2007/12/6/dec-6-document-types-part-ii
http://www.umbraco.org/documentation/books/document-types-explained

Templates:
http://www.umbraco.org/blog/2007/12/7/dec-7-templates-part-i—the-introduction
http://www.umbraco.org/blog/2007/12/12/dec-8-adding-page-information-to-templates
http://www.umbraco.org/blog/2007/12/13/dec-9-using-master-templates
http://www.umbraco.org/documentation/books/templates-explained

Xslt and Macro’s:
http://umbraco.org/documentation/books/xslt-basics
http://umbraco.org/documentation/books/extending-xslt-with-c-or-javascript
http://umbraco.org/documentation/books/macro-parameters-syntax

Beyond the Basics:
.Net controls and umbraco:
http://en.wikibooks.org/wiki/Umbraco/Samples_and_Articles/Dot_Net_Controls
http://www.nibble.be/?p=12

Actionhandler:
http://www.umbraco.org/documentation/books/creating-and-using-an-action-handler

Base:
http://www.umbraco.org/documentation/books/introduction-to-base

Xslt extension:
http://en.wikibooks.org/wiki/Umbraco/Create_xslt_exstension_like_umbraco.Library_in_C

Custom datatypes:
http://www.nibble.be/?p=24

Flash and umbraco:
http://www.nibble.be/?p=28

 

Still having trouble to get started ? The umbraco community is great, so sign up to the umbraco forum and post your questions.

Summary of the first Belgian umbraco meetup 5

Last Saturday Ruben, Dirk and I (Tim) held the first local umbraco meetup here in Belgium. We started out with a very short welcome message and a video Niels recorded (thanks again for that). Then we asked everyone to quickly introduce themselves by answering a couple of questions (who are you, what do you do, where does umbraco fit in, why are you here). Turned out that seeing umbraco v4 in action was the top reason for attending.

After showing the new features in v4 we started with the demo we had planned. Plan was to make an entire site in umbraco with the following features:
- Download a design and implement it in umbraco
- News with comments (autoform), rss feed and livewriter
- Image gallery with lytebox and rating
- Flash mp3 player
- Register members
- Silverlight video player with some ajax stuff ( base )

I think that took us about 2 hours and the rest of the day we asked the attendees what else they would like to know/see … That included multilingual sites, custom datatypes, installing on other databases, search, …

Some people also showed some of their work and someone told us about the ideas he had for some packages.

List of attendees:

Dirk De Grave
Dieter De Paepe
Pascal Declercq
Arjan den Boer
Gerty Engrie
Arnaud Geyskens
Tim Geyssens
Walter Harms
Sander Houttekier
Thomas Lepouttre
Martijn Maris
Geert Neuts
Lieven Praet
Richard Soeteman
Thomas Surquin
Ruben Verborgh

I think about 50% of the people came from the Netherlands.

Couple of pictures:

PICT2611

PICT2602

PICT2612

PICT2609

PICT2608

PICT2606

PICT2607

Looking back on the meeting I can definitly say I met some great people and had a awesome time! We should do this more often !

New Package - Ultimate Picker 28

The ultimate picker is a new datatype which will be a default datatype in umbraco v4. But I decided to also package this up so it could be used in lower versions.

Basically it’s about combining a datasource (umbraco node, content or media) with a control (AutoComplete, CheckBoxList, DropDownList, ListBox and RadioButtonList).

After installing the package. You’ll have to create a new datatype and choose ‘ultimate picker’ as the rendercontrol.

image

So the configurations options are:

Database datatype: In wich field the value will be saved

Type: type of control that will be shown, you can choose from AutoComplete, CheckBoxList, DropDownList, ListBox and RadioButtonList

Parent nodeid: the nodeid to use, the descendants will be the nodes you can choose from, this can be a contentnode or a medianode

Show grandchildren: check this if you want to include all descendants, not only the direct children of the parent node.

After configuration it’s ready to be used as a property on a document type.

 

Picker in action:

image

Parent nodeid is set the id of container.

CheckBoxList (can select multiple nodes)

image

DropDownList (will save 1 selected node)

image

ListBox (can select multiple nodes)

image

RadioButtonList (one node)

image

AutoComplete (one node)

image

The picker will save the nodeid’s, in cause of multiple selected values this will be a comma seperated list of nodeid’s.

Ultimate Picker: download

Enabling the script editor 3

This feature was introduced at codegarden 07 as a new feature in v3 but is was disabled in the release because of some issues with cross browser compatibility ( and maybe other bugs, …). I noticed that it works fine in firefox but don’t use it with ie.

Before:

image

After:

image

Just locate the

<scriptDisableEditor>true</scriptDisableEditor>

 

In the config\umbracoSettings.config file and change it to false.

Creating a youtube macro for umbraco (with xslt extension) 19

I got this request from Bernie.

He wanted a way to insert youtube videos into the richtexteditor by only supplying the link to the video (like http://www.youtube.com/watch?v=fruHQhNe-UM)

When inserting the macro you would get this screen, only asking for the link.

image

After hitting ok it will insert the embed code and the video will be visible on the page.

I’ll go through the different steps I did to develop this macro.

First take a look at the embed code supplied by youtube.

<object width=”425″ height=”344″>
<param name=”movie” value=”http://www.youtube.com/v/fruHQhNe-UM&hl=en&fs=1″></param>
<param name=”allowFullScreen” value=”true”></param>
<embed src=”http://www.youtube.com/v/fruHQhNe-UM&hl=en&fs=1″ 
type=”application/x-shockwave-flash” allowfullscreen=”true” width=”425″ height=”344″>
</embed>
</object>

The src attibute of the embed tag will contain the location of the video. When you compare this to the url

url: http://www.youtube.com/watch?v=fruHQhNe-UM

src: http://www.youtube.com/v/fruHQhNe-UM&hl=en&fs=1

You’ll notice that the important part is the video id. So we will need to get the video id out of the url and insert this into the src attribute of the embed code.

I did this by creating an xslt extension ( you can probably do this without the extension but this was the fastes way for me).

So I made a youtube class

public class YouTube
    {
        public static string getVideoId(string url)
        {
            Regex testYouTube = new Regex(@”(\?v=)(\w[\w|-]*)”);
 
           
            foreach (Match tempMatch in testYouTube.Matches(url))
            {
               
                return(tempMatch.Value.Substring(3, tempMatch.Value.Length - 3));
            }
 
            return “”;
        }
    }

 

And hooked this up in umbraco so I could use it as an xslt extension ( you do this by exposing your class in the \config\xsltExtensions.config file ).

With that in place it’s time to create the xslt file ( with macro )

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE xsl:Stylesheet [ &lt;!ENTITY nbsp “&#x00A0;”> ]>
<xsl:stylesheet 
    version=”1.0″ 
    xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” 
    xmlns:msxml=”urn:schemas-microsoft-com:xslt”
                xmlns:YouTube=”urn:YouTube”
    xmlns:umbraco.library=”urn:umbraco.library”
    exclude-result-prefixes=”msxml umbraco.library YouTube”>
 
 
<xsl:output method=”xml” omit-xml-declaration=”yes”/>
 
<xsl:param name=”currentPage”/>
<xsl:variable name=”url” select=”//YoutubeUrl”/>
<xsl:template match=”/”>
 
 
<object width=”425″ height=”355″>
<param name=”movie” value=”http://www.youtube.com/v/{YouTube:getVideoId($url)}&amp;hl=en”></param>
<param name=”wmode” value=”transparent”></param>
<embed src=”http://www.youtube.com/v/{YouTube:getVideoId($url)}&amp;hl=en” type=”application/x-shockwave-flash” wmode=”transparent” width=”425″ height=”355″></embed>
</object>
 
</xsl:template>
 
</xsl:stylesheet>

 

This will return the embed code and get the video id from the url (wich is a parameter of the macro ) by calling the xslt extension.

Macro parameters look like this:

image