2012年5月29日

JMP3 is the best candidate to play mp3 audio files on the page. Here we go the files for JMP3.

1. JMP3 plugin (jquery.jmp3.js)
2. JQuery (jquery-1.7.2.min.js)
3. Flash player (singlemp3player.swf)

Configuration

1. Copy jquery.jmp3.js, juqery.*.js, singlemp3player.swf to scripts folder or some other folder you like.
2. Set the initial values for JMP3 in jquery.jmp3.js

Let’s take scripts folder as example. After the aforementioned files are copied to scripts folder, you would like to open the jquery.mp3.js to set the initial values.

jQuery.fn.jmp3 = function(passedOptions){
    // hard-wired options
    var playerpath = "/Scripts/";                    // SET THIS FIRST: path to singlemp3player.swf

    // passable options
    var options = {
        "filepath": "/Media/",                                        // path to MP3 file (default: current directory)
        "backcolor": "",                                    // background color
        "forecolor": "ffffff",                                // foreground color (buttons)
        "width": "25",                                        // width of player
        "repeat": "no",                                        // repeat mp3?
        "volume": "50",                                        // mp3 volume (0-100)
        "autoplay": "false",                                // play immediately on page load?
        "showdownload": "true",                                // show download button in player
        "showfilename": "true"                                // show .mp3 filename after player
    };

The comments shipped with jquery.mp3.js states very clearly for the variable and fields. Since the singlemp3play.swf is located in the scripts folder, the palyerpath is set with “/Scripts/”.

Another value worthy of pointing out is filepath in options object. The filepath in the options object combining with filename in jmp3 in the front page becomes the complete url path for the mp3 file. So you can leave filepath in the options object empty only if you specify the complete url path for the mp3 file in the front page. In the aforementioned code, I set filepath with “/Media/” since I place the mp3 files in the Media folder.

Use JMP3 in the Front Page

In the front page, please add the following code in the *.ascx or *.aspx.

<script type="text/javascript" src="../Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.jmp3.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        //jMP3 init
        $(".mp3player").jmp3({
            showfilename: "false",
            backcolor: "000000",
            forecolor: "00ff00",
            width: 30,
            showdownload: "true"
        });
    });
</script>

<!—code snippet in a repeater—>

<span id="mp3player" class="mp3player">
                    <%#Eval("RelativeMp3Url")%></span>

In the aforementioned code, the mp3 url (filename) is put in a <span>. The mp3 audio player will display in the spans that have “mp3player” class.

Is It A Bug?

I found a strange issue in the repeater that contains multiple mp3 playing url. If the first occurrence of the mp3 url is not valid, the successive mp3 urls will not be represented with jmp3 player even if they have correct mp3 urls. I will appreciate if some jquery experts give the answer here.

supported by Nova Umbraco

  2012年4月22日

Umbraco is the most powerful and flexible CMS I have ever seen so far. I just write this essay to demonstrate how to develop an Umbraco DataType for the folks who have basic Asp.net development knowledge.

Here we go, outlines for the steps.

1. Create an Asp.net application project
2. Add reference to umbraco.editorControls.dll
3. Add the usercontrol
4. Copy the dll and ascx to Umbraco site
5. Run in Umbraco site

1. Create an Asp.net Application project

The purpose of the Asp.net application project is to debug the usercontrol directly. It is not convenient if you try to debug your usercontrol in Umbraco site environment. It is recommended to name of the project as that you expect in the deployment. Let’s say, the expected assembly name is “NovaDev3.UmbracoComponents”. We name the Asp.net application project “NovaDev3.UmbracoComponents”.

Then create a folder named “usercontrols” in the project. You will find that umbraco site probe the *.ascx file in “usercontrols” folder as well. You created usercontrol will be put in this folder.

2. Add reference to umbraco.editorControls.dll

You can add the reference of umbraco.editorContorls.dll from your umbraco site/bin folder directly. We will implement umbraco.editorControls.userControlGrapper.IUsercontrolDataEditor when we create the usercontrol for the umbraco site. IUsercontrolDataEditor has only one property defined and you could ignore it at all if you don’t plan to save the value in the umbraco db.

namespace umbraco.editorControls.userControlGrapper
{
    public interface IUsercontrolDataEditor
    {
        object value { get; set; }
    }
}

3. Add the usercontrol

Let’s add the usercontrol named “InventoryItemCategories”. It is recommended to follow umbraco naming convention that use camel style to name the control. The difference between normal asp.net usercontrol and the umbraco-featured user control is the implementation of IUsercontrolDataEditor.

Let’s just add some simple code to categoriesControl and add it to Default.aspx to test.

categoriesControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="categoriesControl.ascx.cs" Inherits="NovaDev3.UmbracoComponents.usercontrols.categoriesControl" %>
<asp:DropDownList ID="categoriesDropdown" runat="server" />

categoriesControl.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using umbraco.editorControls.userControlGrapper;

namespace NovaDev3.UmbracoComponents.usercontrols
{
    public partial class categoriesControl : System.Web.UI.UserControl, IUsercontrolDataEditor
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                categoriesDropdown.DataSource = new string[] { 
                    "Rental",
                    "Spa",
                    "Class",
                    "Dining",
                    "Retail"
                };

                categoriesDropdown.DataBind();
            }
        }

        public object value
        {
            get
            {
                return string.Empty;
            }
            set
            {
                //do nothing
            }
        }
    }
}

Default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="NovaDev3.UmbracoComponents._Default" %>
<%@ Register TagPrefix="novaCtrl" TagName="categoriesControl" Src="~/usercontrols/categoriesControl.ascx" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div>
        <novaCtrl:categoriesControl ID="categories" runat="server" />
    </div>
</asp:Content>

When you run your Asp.net project, the dropdownlist display successfully as below.

You can develop usercontrol with complex business logic in this way for incremental coding and debugging in the asp.net application site.

4. Copy the dll and ascx to Umbraco site

When you development completes, you can copy the dll and ascx to the umbraco site folder.

• Copying NovaDev3.UmbracoComponents.dll and its dependency dlls to umbraco site/bin folder
• Copying *.ascx files to umbraco site/usercontrols folder.

It is recommended to write a copying bat to do it at the beginning of the development.

5. Run in Umbraco site

Go to the Data Types node in the Developer section in umbraco backoffice after you copy the *.dll and *.adcx files to umbraco site folders. Create a datatype named “Categories” and select its render control  as “umbraco usercontrol wrapper”.

After you click "Save” button, the “Usercontrol” dropdown list appear under the Database datatype, and then select “categoriesControl.ascx”

Now, you have added the usercontrol  as an Umbraco datatype into Umbraco site successfully.

Let’s add a CategoriesPage document type(don’t select “Creating matching template” option) to hold the “Categories” datatype.

Then add a content of “CategoriesPage” to get the category dropdownlist you have just completed in the Asp.net application project.

Other considerations such as the database access layer and settings in the configuration file are ignored here. So you may have additional step to add the database connection string or dependency web service configuration to the web.config in the umbraco site if your usercontrol consumes data from database or other web services.

I will appreciate if you have any suggestions on the practices.

Please refer the source code at my Code Plex

Supported by Nova Umbraco

  2012年4月4日

Recommended tools

1. Visual Studio Express
2. Foxe

Visual Studio

It provides intelligence prompt for the xsl key words to facilitate the work on the xsl.

Foxe

It provides a tree-nodes like view on the xml document to facilitate the navigation on the umbraco.config cache file.

Template Codes

With the help of the two utility, copy the following code to start your umbraco xslt development.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [
  <!ENTITY nbsp "&#x00A0;">
]>
<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform%22
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library"
  xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon"
  xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes"
  xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath"
  xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions"
  xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings"
  xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
    exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">

  <xsl:output method="xml" omit-xml-declaration="yes"/>

  <xsl:param name="currentPage"/>

  <xsl:template match="/">
    <!--The code here-->
  </xsl:template>
</xsl:stylesheet>

The xslt file is stored in the ~/xslt/ folder. The target xml file is at ~/App_Data/umbraco.config.

The following key words are commonly used when you write the xsl.

1. value-of
2. select
3. attribute
4. for-each
5. sort
6. if

The following key words are commonly used when you write the xsl.

1. parent::*
2. child::*
3. [@attributeName expression]

Have a fun in coding with xsl for umbraco.config.

Supported by Nova Umbraco

  2012年4月1日

DataType plays important role in Umbraco if you dedicate to extend the power of Umbraco.

For simplicity, the dependencies for DataType goes as following.

From the skeleton like diagram above, we can easily think about how can DataType work essentially. The ISqlHelper tells us the way that Umbraco saves the values into database. Control tells us the way Umbraco represents the data. XmlDocument/XmlNode tells us the relationship to xsl.

After we have a skeleton like imagination on how DataType works, let turn to the real design of DataType in Umbraco.

You have got the differences between your imagination and the real design on the DataType or you are still confused on the design? It doesn’t matter. Here you get the point to go deeper in Umbraco.

Supported by Nova Umbraco

  2012年3月29日

Demo

Allow the end user has ability to change the background color with pre-defined color.

Steps

1. Create a datatype named BackGroundColor.

2. Select Color Picker as its render control and select Nvarchar as its Database datatype.

3. Add the pre-defined colors

You can add any number of colors as you wish.

4. Add the color to Generic Properties in the TextPage document type.

It is reasonable to place Content  BackGround Color in the Generic properties tab as it controls the content’s background color.

5. Set the color in the content properties tab

After 1 – 4 steps are carried out, the Content BackGround Color comes up to you when you select the properties tab in content page which take TextPage as its template. Select one of color as your background color here.

6. Apply the color in the template

The code finally looks like the following.

<div class="entry" style="background-color:#<umbraco:Item field="contentBackGroundColor" runat="server" />">
                    <umbraco:item runat="server" field="bodyText"></umbraco:item>
                </div>

7. See the effect.

More knowledge

Umbraco datatypes are created based on the control either shipped with umbraco or self-developed implementing IDataType interface. You can create you specific datatype with specific pre-defined values in different context in your umbraco site. For example, you can create background color 1 and background color 2 based on color picker to control colors in different areas in the template. Have fun here.

The source code is available at NovaUmbracoDemo in CodePlex.

Supported by Nova Umbraco