Saturday, December 3, 2011

Start next week ,I love to take some of you guys through Extjs4 which is the leading JavaScript framework

Thursday, February 10, 2011

custom element in nitrogen framework

Creating custom element in nitrogen framework if you are using it as your templating  tool here how we shall go about creating an accordion menu,
let us get start here;
code is  here
add this in your wf.hrl file
-record(element_menu,{?ELEMENT_BASE(element_menu),menu_name,content=[]}).

-module('element_menu').
-include_lib("wf.hrl").
-compile(export_all).
-author("hudson kisitu hudzkis@gmail.com +256774441489"). 
reflect()->record_info(fields,menu).
style()->["
.menu_panel{
    width:200px;
    height:'+20px';
    border:1px solid #3333ff;
    }
#panelId{
    width:200px;
    height:'+20px';
    border:1px solid red;
    }
.show{
    width:'+25px';
    height:'+25px';
    border:0px solid blue;}
.single_menu{
    width:100%;
    height:20px;
    background-color:blue;
    color:white;
    }
.menu_title{
    background-color:blue;
    color:white;
    font-weight:bold;
    font-size:small;
    }
.upward{
    text-decoration:none;
    color:white;
    font-weight:bold;}
.hidden{
    display:none;
    }"].
render_element(Record)->
    SinglerowId = wf:temp_id(),
    LabelId = wf:temp_id(),
    LinkId = wf:temp_id(),
    PanelId = wf:temp_id(),
    Script = #script{script="$(document).ready(
                                function(){$('.menu_panel').toggle(
                                function(){$('.menu_panel .show').addClass('hidden');},
                                function(){$('.menu_panel .show').removeClass('hidden');});});"},
    Singlerow = #singlerow{id = SinglerowId,class=single_menu,cells=[
                    #tablecell{style="width:80px;height:15px;",body=#label{id=LabelId ,class=menu_title,text=Record#menu.menu_name}},
                    #tablecell{style="width:15px;height:15px;",body=#link{id=LinkId,class=upward,text="up"}}
                    ]},
    F = fun(Text)-> #panel{body=#list{class=show,body=[#listitem{body=Text}]}} end,
    [#panel{id=PanelId,class=menu_panel,actions=[Script],body=[Singlerow ,[F(Text) || Text <-Record#menu.content]]}].

i guess for those who are comfortable with erlang we are in sync,if you are interest
 in using this tool ,i encourage you to start with erlang fundamentals here is the link to access all you need to get started. http://www.erlang.org/starting.html and for the framework find it at http://nitrogenproject.com/.