Web Developers Portal

Thursday 22 March 2012

Dynamic Menu Highlighting using php and CSS

The below example explains making a navigation menu that dynamically
highlights the currently displayed page using php and css

It is better to use a common navigation menu file on the site rather than repeating same code on all the pages.
The reason is that if the menu items change ,we can easily modified a single file rather than changing all the files.

In the navigation menu file (say navigationMenu.php) add the below code

   <div id="menu">
    <?php
    $active[$currentPage] = " class=active";                //dont forget to put space infront of class
    ?>
    <ul>
        <li <?php echo $active[1] ?>><a href="newfile1.php" id="index">HOME</a></li>
    <li <?php echo $active[2] ?>><a href="newfile2.php">CONTACT US</a></li>
        <li <?php echo $active[3] ?>><a href="newfile3.php">LINKS</a></li>
        <li <?php echo $active[4] ?>><a href="newfile4.php">TEAM</a></li>
    </ul>
   </div>

In the CSS add

#menu a:hover, #menu .active a {
    background-color: red;
    color: #5A5A5A;
    display: normal;
    letter-spacing:1px;
    font-size: 11px;

}

In the individual pages (say contactus.php) add

<?php
$currentPage = 2;
include 'index.php';
?>

Demo : Clicking CONTACT US link

Thursday 15 March 2012

ImportError: No module named BeautifulSoup

To fix this issue

1. Download BeautifulSoup from
   http://www.crummy.com/software/BeautifulSoup/#Download

2. Extract it into a folder

3. Copy the BeautifulSoup.py in BeautifulSoup folder into a directory that's on your Python path
   eg:
      unix: /usr/local/lib/python2.2/site-packages
      Windows: C:\Python24\Lib\site-packages.

ImportError: No module named mechanize

1. Download mechanize from
http://wwwsearch.sourceforge.net/mechanize/src/

2. Extract it into a folder

3. copy the whole mechanize directory into a directory on your Python path
eg:
unix: /usr/local/lib/python2.4/site-packages
Windows: C:\Python24\Lib\site-packages
Only copy the mechanize directory that's inside the distributed tar / zip archive, not the
entire mechanize-x.x.x directory!

ImportError: No module named ClientForm

ClientForm is a Python module for handling HTML forms on the client side,
useful for parsing HTML forms, filling them in and returning the completed forms to the server.

To fix this issue :

1. Download ClientForm from:
   http://wwwsearch.sourceforge.net/old/ClientForm/

2. Extract it .

3. Copy the ClientForm.py in ClientForm folder into a directory that's on your Python path
    eg:
         unix: /usr/local/lib/python2.2/site-packages
         Windows: C:\Python24\Lib\site-packages.

Monday 12 March 2012

valign not working for row in jsf panelgrid?

valign not working for row in jsf panelgrid?

Instead of valign we should give:

vertical-align : top

In panelgrid add rowclasses="rowStyle"

<h:panelGrid columns="3" styleClass="rowStyle">
</h:panelGrid>

In CSS add

.rowStyle{
vertical-align:top
}

Sunday 11 March 2012

Cytoscape Web Examples

prerequestics:

you should install cytoscape web and adjust the javascript src path to the path where you extracted Cytoscape Web. set swfPath and flashInstallerPath correctly .
If you are facing any difficulties in setting the path, please refer Cytoscape web tutorial

Drawing a simple network with values on nodes

Drawing a network with nodes of different size

Drawing a network with different colored nodes and edges

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
            <script type="text/javascript" src="js/AC_OETags.min.js"></script>
            <script type="text/javascript" src="js/json2.min.js"></script>
            <script type="text/javascript" src="js/cytoscapeweb.min.js"></script>
        </head>
<script type="text/javascript">
window.onload=function() {
            // network data could alternatively be grabbed via ajax
     var xml = '\
    <graphml>\
    <key id="label" for="all" attr.name="label" attr.type="string"/>\
    <key id="weight" for="node" attr.name="weight" attr.type="double"/>\
    <graph edgedefault="undirected">\
        <node id="1"><data key="label">1</data><data key="weight">.7</data></node>\
        <node id="2"><data key="label">2</data><data key="weight">.5</data></node>\
        <node id="3"><data key="label">3</data><data key="weight">.5</data></node>\
        <node id="4"><data key="label">4</data><data key="weight">.5</data></node>\
        <node id="5"><data key="label">5</data><data key="weight">.2</data></node>\
        <node id="6"><data key="label">6</data><data key="weight">.2</data></node>\
        <edge source="1" target="2" id="gene"></edge>\
        <edge source="2" target="3" id="gene"></edge>\
        <edge source="4" target="5" id="gene"></edge>\
        <edge source="3" target="4" id="miR"></edge>\
        <edge source="6" target="5" id="miR"></edge>\
        <edge source="4" target="2" id="miR1"></edge>\
        <edge source="6" target="1" id="miR1"></edge>\
    </graph>\
    </graphml>\
    ';

            // init and draw
            // initialization options
                var options = {
                    swfPath: "swf/CytoscapeWeb",
                    flashInstallerPath: "swf/playerProductInstall"
                };

                var vis = new org.cytoscapeweb.Visualization("cytoscapeweb", options);

             // visual style we will use
                var visual_style = {
                    global: {
                        backgroundColor: "#ABCFD6"
                    },
                    nodes: {
                        shape: "circle",
                        borderWidth: 2,
                        borderColor: "#ffffff",
                        // setting different size to the nodes
                        size: {
                            defaultValue: 20,
                            continuousMapper: { attrName: "weight", minValue: 30, maxValue: 60 }
                        },
                        //setting different color to the node
                        color : {
                            discreteMapper : {
                                attrName : "id",
                                entries : [ {
                                    attrValue : "1",
                                    value : "red"
                                }, {
                                    attrValue : "2",
                                    value : "gray"
                                }, {
                                    attrValue : "3",
                                    value : "gray"
                                }, {
                                    attrValue : "4",
                                    value : "gray"
                                }, {
                                    attrValue : "5",
                                    value : "yellow"
                                }, {
                                    attrValue : "6",
                                    value : "yellow"
                                } ]
                            }
                        },
                        labelHorizontalAnchor: "center"
                    },
                    edges : {
                        width : 2,
                        //setting different color to the edges
                        color : {
                            discreteMapper : {
                                attrName : "id",
                                entries : [ {
                                    attrValue : "gene",
                                    value : "red"
                                }, {
                                    attrValue : "miR",
                                    value : "white"
                                }, {
                                    attrValue : "miR1",
                                    value : "blue"
                                } ]
                            }
                        }
                    }
                };

                var draw_options = {
                    // your data goes here
                    network: xml,

                    // show edge labels too
                    edgeLabelsVisible: false,


                 // set the style at initialisation
                    visualStyle : visual_style,

                    // circle layout for nodes
                    layout: "circle",

                    // hide pan zoom
                    panZoomControlVisible: true
                };

                vis.draw(draw_options);

            };
            </script>

            <style>
                /* The Cytoscape Web container must have its dimensions set. */
                html, body { height: 100%; width: 100%; padding: 0; margin: 0; }
                #cytoscapeweb { width: 100%; height: 100%; }
            </style>
        </head>

        <body>
            <div id="cytoscapeweb">
                Cytoscape Web will replace the contents of this div with your graph.
            </div>
        </body>

    </html>

Cytoscape Web Tutorial

What is cytoscape web?

Cytoscape Web is a tool for developers to display networks on the web page. It is a network visualisation library. For using cytoscape web, you should familiar with HTML and Javascript.

How to get it?

you can download Cytoscape Web from

http://cytoscapeweb.cytoscape.org/download.

Getting started.

1. Download cytoscape web.

2. Extract the files.

3. Open cytoscapeweb_v1.0 which contains 2 subfolders, js and swf.

4. Copy the files

AC_OETags.min.js, cytoscapeweb.min.js, json2.min.js from js/min (java script files)

CytoscapeWeb.swf, playerProductInstall.swf from swf folder. (flash files)

you need the above 5 files for running cytoscape web.

5. Download a web server such as apache tomcat. (we can run the cytoscape with out using the server as it is a simple html.but we need to change the security settings to allow flash to run from the local system. You do not need to change the security settings if you deploy Cytoscape Web on a web server).

6. Open apache-tomcat-7.0.23\webapps folder. create a new folder say cytoscape inside webapps. create 2 folders js and swf in cytoscape. put the files AC_OETags.min.js, cytoscapeweb.min.js, json2.min.js in js folder and CytoscapeWeb.swf, playerProductInstall.swf in swf folder.

7. Start the tomcat server by double clicking startup.bat in apache-tomcat-7.0.23\bin folder

8. For testing copy the below example in txt file and save it as html file. adjust the Script tag references to the path where you extracted Cytoscape Web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>

<title>Cytoscape Web example</title>

window.onload=function() {

// id of Cytoscape Web container div

var div_id = "cytoscapeweb";

// you could also use other formats (e.g. GraphML) or grab the network data via AJAX

var network = {

data: {

nodes: [ { id: "1" }, { id: "2" }, { id: "3" } ],

edges: [ { id: "2to1", target: "1", source: "2" },{ id: "3to2", target: "3", source: "2" } ]

}

};

// initialization options

var options = {

// where you have the Cytoscape Web SWF

swfPath: "swf/CytoscapeWeb",

// where you have the Flash installer SWF

flashInstallerPath: "swf/playerProductInstall"

};

// init and draw

var vis = new org.cytoscapeweb.Visualization(div_id, options);

vis.draw({ network: network });

};

</script>

<style>

/* The Cytoscape Web container must have its dimensions set. */

html, body { height: 100%; width: 100%; padding: 0; margin: 0; }

#cytoscapeweb { width: 100%; height: 100%; }

</style>

</head>

<body>

Cytoscape Web will replace the contents of this div with your graph.

</div>

</body>

</html>

I have save the above example as NewFile.html .

9. open browser and type url : http://localhost:8080/cytoscape/NewFile.html