Crear una sección personalizada en Umbraco (II)

Creando el icono de la nueva sección

Antes que nada vamos a eliminar los archivos temporales situados en la ruta: \App_Data\TEMP, no olvidéis este paso porque me pasé un buen ratito hasta dar con la tecla de donde se encontraba la caché de la hoja de estilos.

Ahora, vamos a la carpeta \umbraco\images\tray\traySprites.png y modificamos el archivo gráfico con nuestro editor favorito, solo hemos de tener en cuenta que la separación entre iconos debe ser de 72 pixles.

Después, abrimos la hoja de estilos \umbraco\css\umbracoGui.css y añadimos la clase que creamos en la tabla UmbracoApp y campo appIcon

.trayjcantos { background-position: -18px -594px;}

Añadiendo el nombre de la sección al archivo de recurso local

Localizamos el archivo de recurso para el que hemos configurado el sitio web e idioma predeterminado, en nuestra caso \umbraco\config\lang\es.xml y añadimos la entrada:

<area alias="sections">
(...)
<key alias="jcantos">Javi Cantos</key>

Presta atención de que el valor de la propiedad alias en el elemento key debe ser el mismo que pusimos en la tabla UmbracoApp y campo appAlias

Incluyendo los nodos de la nueva sección

La inclusión de los nuevos nodos debe realizarse desde un proyecto externo de tipo asp.net y que después será referenciado y añadido al sitio web de umbraco.

Para la nueva sección crearemos dos páginas, la primera la llamaremos MantCategorias.aspx y la segunda MantProductos.aspx, cada una de estas páginas contiene la lógica necesaria para lo que pretendemos en cada caso, un mantenimiento de categorías y otro de productos.

Como el nombre de la aplicación que hemos elegido es jcantos debemos de:

1. Crear un nuevo proyecto donde añadir las referencias umbraco.dll e interfaces.dll, estas la podéis encontrar en el directorio bin de umbraco.


2. Añadimos dos páginas MantCategorias.aspx y MantProductos.aspx, aquí incluimos el código de la lógica para ambos mantenimientos.


3. Creamos y añadimos una clase a nuestro proyecto a la que podemos llamar loadjcantos, este el tipo que debemos poner en el campo treeHandlerType de la tabla UmbracoAppTree


4. Comprobamos el valor del campo treeHandlerAssembly de la tabla UmbracoAppTree, en nuestro caso PruebaUmbraco, sin la extensión .dll


5. Por otra parte, crear una carpeta dentro del directorio umbraco que se llame jcantos, nos debería quedar así \umbraco\jcantos, en esta carpeta es donde copiamos los aspx mencionados anteriormente.


6. Copiar al directorio bin de umbraco la librería resultante de nuestro nuevo proyecto.

Os dejo el código fuente de la clase loadjcantos:

using System;
using System.Text;
using umbraco.cms.presentation.Trees;

namespace PruebaUmbraco
{
    public class loadjcantos : BaseTree
    {
        public loadNewsletter(string application)
            : base(application)
        { }

        protected override void CreateRootNode(ref XmlTreeNode rootNode)
        {
            rootNode.Icon = FolderIcon;
            rootNode.OpenIcon = FolderIconOpen;
            rootNode.NodeType = "init" + TreeAlias;
            rootNode.NodeID = "init";
        }

        /// 
        /// Override the render method to create the newsletter tree
        /// 
        /// 
        public override void Render(ref XmlTree Tree)
        {
            // Nodo mantenimiento de categorías
            var mtoCategorias = XmlTreeNode.Create(this);
            mtoCategorias.Text = "Mantenimiento de categorías";
            mtoCategorias.Icon = "docPic.gif";
            mtoCategorias.Action = "javascript:openMtoCateogorias()";
            // añadimos el nodo al árbol
            Tree.Add(mtoCategorias);

            // Nodo mantenimiento de productos
            var mtoProductos = XmlTreeNode.Create(this);
            mtoProductos.Text = "Mantenimiento de productos";
            mtoProductos.Icon = "docPic.gif";
            mtoProductos.Action = "javascript:openMtoProductos()";
            // añadimos el nodo al árbol
            Tree.Add(mtoProductos);
        }

        public override void RenderJS(ref StringBuilder Javascript)
        {
            Javascript.Append(@"
                function openMtoCategorias() {
                    parent.right.document.location.href = 'jcantos/MantCategorias.aspx';
                }
			");

            Javascript.Append(@"
                function openMtoProductos() {
                    parent.right.document.location.href = 'jcantos/MantProductos.aspx';
                }
			");
        }
    }
}

Resultado final

El resultado final es una plena integración de componentes personalizados que pueden ser administrados directamente desde la propia plataforma, sin necesidad de crear nuevos espacios webs que contengan las piezas que no encajen en el estándar de Umbraco.

Fuente: http://www.geckonewmedia.com/blog/2009/8/3/how-to-create-a-custom-section-in-umbraco-4