Skip to main content

Raphaël lifecycle node tree

I recently wrote a script to display product life cycle states in a chart. This chart has to be dynamic. The life-cycle state definition is dynamic and can be different from case to case. So the states and there relationship with each other is represented using a JSON file. Following is a part of what I have used with my script. ( The complete JSON is included with the sample given at the end of this post ).

 {
    "state": [
        {
            "id":"Development",
            "type":"initial" ,
            "transition": [

                {
                    "target":"Deprecated",
                    "event":"Demote"
                }
            ]
        },

         {
            "id":"Deprecated",
            "type":"end" ,
            "transition": []
        },
        {
            "id":"Deprecated2",
            "type":"end" ,
            "transition": []
        }
   ]
}

 Following is what comes out from the script.

 

Each nodes clicked event is listened and handled. Also the tree is animated. It looks bit lame but can be modified a bit to look cool :)  Sadly this is not used in any real life product since the one which was going to use has died. If any one want's this in there world you are free to do anything with this. Right now this only woks with FF :( .... You will have to debug this for Chrome by yourself.

Download


Comments

Post a Comment

Popular posts from this blog

Overriding default look and feel of GREG - 5.3.0

Following list explains what are the best approach for different use cases. 1 ) - You created a new asset type, and you need to change the look and feel of the details page in the listing page just for that new asset type. To create a new asset type you need to login to the carbon console (username:admin, password:admin) https:// :9443/carbon/ Navigate to Extensions > Configure > Artifacts Click "Add new Artifact" link at the bottom of the page. By default in the "Generic Artifact" area "application" asset type is loaded. Note the shortName="applications" in the root node. "applications" is the name of the asset type. Browse in to /repository/deployment/server/jaggeryapps/store/extensions/assets Create a folder with name "applications"    Now we can override the files in /repository/deployment/server/jaggeryapps/store/extensions/app/greg-store-defaults   Since we are overriding the details page we need to...
Post a Comment
Read more

Simple client side validation library

  Client side validation has never been easy.. Include jQuery and the validator.js < script src = " http://code.jquery.com/jquery-1.11.3.min.js " ></ script > < script src = " ../validate.js " ></ script > Simple validation < form id = " myForm " > < label >User Name < span class = " red-star " >*</ span > </ label > < input type = " text " name = " userName " class = " validate-required " /> < br /> < label >Password < span class = " red-star " >*</ span ></ label > < input type = " password " name = " password " class = " validate-required " /> < br /> < input type = " submit " value = " Login " /> </ form > ...
1 comment
Read more

Projecting HTML Elements on a circle using Javascript

Recently I wonted to create a tree control with a different approach. The requirement was to represent a node tree with main node on the circle center and it's child nodes projected on a circle around it. This is what i wanted. My solution has 5 files prototype.js This is a handy javascript framework. You can download the latest version from there website ( www.prototypejs.org/download ). I am using this to simply handle the onload event in the page. circle.html script.js node-main-left.gif node-sub-left.gif The circle.html, prototype.js and the script.js files are in the root folder and the two images are inside a folder named “images”. This is how the html file looks(circle.html). <html> <head> <script src="prototype.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> <script language="javascript" xml:space...
8 comments
Read more