Thursday 29 March 2012

How to change the apache port for xampp?

By default, Apache Server listens on port 80.
But if that port is already being used by some other application and you dont want to stop that application
or port 80 is blocked by your network admin, you have to change the port of Xampp.

To change it follow the steps:

1. Stop the xampp server, if it is already running.
2. Go to folder "C:\xampp\apache\conf". (By default apache is installed in C folder)
3. Open the file httpd.conf.
4. Search the string "Listen" in the file.
5. Replace port number 80 to any other unused port number.
6. Search for "ServerName" in the file.
7. Replace port number 80 to any other unused port number in the ServerName.
8. Save the httpd.conf.
9. Start the xampp server.

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

<!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">1.8</data></node>\
        <node id="2"><data key="label">2</data><data key="weight">1.1</data></node>\
        <node id="3"><data key="label">3</data><data key="weight">1.1</data></node>\
        <node id="4"><data key="label">4</data><data key="weight">1.1</data></node>\
        <node id="5"><data key="label">5</data><data key="weight">.3</data></node>\
        <node id="6"><data key="label">6</data><data key="weight">.3</data></node>\
        <edge source="1" target="2" ></edge>\
        <edge source="2" target="3" ></edge>\
        <edge source="4" target="5" ></edge>\
        <edge source="3" target="4" ></edge>\
        <edge source="6" target="5" ></edge>\
        <edge source="4" target="2" ></edge>\
        <edge source="6" target="1" ></edge>\
    </graph>\
    </graphml>\
    ';
                           
            // init and draw
            // initialization options
                var options = {
                    swfPath: "swf/CytoscapeWeb",
                    flashInstallerPath: "swf/playerProductInstall"
                };
                                                           
                var vis = new org.cytoscapeweb.Visualization("cytoscapeweb", options);
               
                var draw_options = {
                    // your data goes here
                    network: xml,
                   
                    // show edge labels too
                    edgeLabelsVisible: false,
                   
                    edgeTooltipsEnabled:true,
                  
                    // let's try another layout
                    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>



The above example will draw a network with 6 nodes and 7 edges.

















Drawing a network with nodes of different size

<!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" ></edge>\
        <edge source="2" target="3" ></edge>\
        <edge source="4" target="5" ></edge>\
        <edge source="3" target="4" ></edge>\
        <edge source="6" target="5" ></edge>\
        <edge source="4" target="2" ></edge>\
        <edge source="6" target="1" ></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 }
                        },
                        labelHorizontalAnchor: "center"
                    },
                    edges: {
                        width: 1,
                        color: "#0B94B1"
                    }
                };
               
                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>
























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


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>
       
        <!-- JSON support for IE (needed to use JS API) -->
        <script type="text/javascript" src="js/json2.min.js"></script>
       
        <!-- Flash embedding utility (needed to embed Cytoscape Web) -->
        <script type="text/javascript" src="js/AC_OETags.min.js"></script>
       
        <!-- Cytoscape Web JS API (needed to reference org.cytoscapeweb.Visualization) -->
        <script type="text/javascript" src="js/cytoscapeweb.min.js"></script>
       
        <script type="text/javascript">
            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>
        <div id="cytoscapeweb">
            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


Tuesday 6 March 2012

How to expand and collapse rows in jsf datatable?

How to expand and collapse rows in jsf datatable?

<%@ taglib uri="http://myfaces/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces/jsf/html" prefix="h"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://adesa.com/jsf/components" prefix="adesa"%>
<%@ taglib uri="http://www.adesa.com/security" prefix="security"%>
<script type="text/javascript">
 function validate() {
     return false;
}

function addOnclickToDatatableRows(row) {
   
    var trs = document.getElementById('body:form1:dt1:'+row+':hide');
   
    if(trs.style.display=='none') {
        trs.style.display='block'
    } else {
        trs.style.display='none'
    }
 }

function highlightRow(tr) {
    tr.style.display = 'none' ;
}
</script>
<f:view>
    <h:form id="form1" onsubmit="return validate();">
        <br>
        <br>
        <br>
        <t:dataTable id="dt1" rowIndexVar="row"
            value="#{TableBean.perInfoAll}" var="item" bgcolor="#F1F1F1"
            border="10" cellpadding="5" cellspacing="3" first="0" rows="4"
            width="50%" dir="LTR" frame="hsides" rules="all"
            summary="This is a JSF code to create dataTable.">
            <h:column>
           
                <t:div id="heading">
                    <h:outputText value="heading"></h:outputText>
                   
                </t:div>
                <t:div id="hide">
                    <h:outputText value="#{item.id}"></h:outputText>
                    <f:verbatim>
                        <br>
                    </f:verbatim>
                    <h:outputText value="#{row}"></h:outputText>
                    <f:verbatim>
                        <br>
                    </f:verbatim>
                </t:div>
                <h:commandLink value="show/hide"
                    onclick="addOnclickToDatatableRows(#{row})"></h:commandLink>
            </h:column>
        </t:dataTable>
        <br>
        <br>
    </h:form>
</f:view>

How to Re-Execute Javascript on Ajax Render?

How to Re-Execute Javascript on Ajax Render?

Enclose all the ajax call and java script with in the output panel and set ajaxRendered = true

<a4j:outputPanel ajaxRendered="true">

Monday 5 March 2012

UML Tutorial

Introducing the UML

The Unified Modeling Language or UML is a standard  language for specifying, visualizing, constructing, and documenting the  software systems.
•The UML uses mostly graphical notations to express the design of software projects.
•UML describes a notation and not a process. 
•UML model describes what a system is supposed to do. It does not tell how to implement the system.

Uml diagrams
In  UML certain number of graphical elements combined into diagrams.
•Because it is a language, the UML has rules for combining these elements.
•Uml consists of eight basic diagram 
  1.      Class Diagram
  2.      Object Diagram
  3.      Component Diagram
  4.      Deployment Diagram
  5.      Use Case Diagram
  6.      Collaboration Diagram
  7.      Activity Diagram
  8.      State Diagram
Class Diagram
•It is used to describe the structure of a class including the properties and methods and the relationship between the classes.
         
Notations

 class












Relationship between classes

Aggregation ->line with a hollow diamond
Composition ->line with a filled diamond
Generalization-> line with a hollow arrow head
realization->dashed line with a hollow arrow head
Association->line connecting two classes

Object diagram

It is used to describe the system at a particular point of time.
     
 Notations
 Objects
      objects are the instance of class.

Association
       it represents the association between the objects

Component Diagram

•It is used to describe the dependency  between various software components.
     
  Notations
Component  ->represents a software entity in a system.

 





Dependency ->represents the relationship between the components.
 
 
Deployment Diagram

•It is used to represent the hardware used to implement the system and  association between hardware components.
Notation
Components->represents the software entity.






Node ->represents a piece of hardware in a system.




  
  





 Association->represents the communication between hardware components 

example



















Use case diagram
•It identifies the functionality provided by the system (use case) ,the users that interact with the system (Actor) and the association between the user and functionality.

Notations
        use case->functionality provided by the system







Actor-> user or another system that interact with the use case








Association -> link actors with the use case
 
example shows a user placing an order with a sales company might follow these steps.
 



















State Diagram

It represents the various state an object can go through and event that cause the state transition.
      Notations
     state ->





Transition-> represent the  changing object state caused by events





Initial State -> state of an object before transition 





Final State ->represent the destruction of an object.





State diagram of a light









Activity Diagram
•It is used to represent the work flow with in a system.
•It shows steps (activities) ,decision point and branch
Notations
–Activity->each step in a work flow
 









–Initial state->entry point

  



Final state->end of work flow
 


–Transition ->
 



–Decision ->represent a condition







Activity diagram to find the factorial of a number















Collaboration Diagram


It represent the interaction between the objects.
Notations
 Object->
 Message->tells the receiving object to execute one of its operation






Actor->communicate with the object





example:

Administrator use a web application to manage user account
 

Find User
   LookUpUser
Update User
   ValidateUser
   UpdateUser

 
Conclusion

It is  independent of particular programming languages.
•It encourage the growth of the OO tools market.