Dhrubojyoti Kayal's Blog

Dhrubojyoti Kayal's Homepage
Dhrubojyoti Kayal works as a Senior Consultant with Capgemini Consulting. He has more than five years of experience developing and desigining applications and products leveraging Enterprise Java technologies. His areas of interests include Spring framework, ORM, SOA, Refactoring, Prefactoring and Performance Engineering.

A quick guide to alter ZK tabs look and feel

I have been busy these days again with some work on Virtualization. But at the same time i keep working with my favorite Web UI frameworks. Off late i have seen that ZK developers and designers are finding it hard to alter the style of the default tab component. So here is how the default tab component looks like:

Now we would see if it can be easily customized to a version without rounded corner and meeting our needs. The steps below presents a step by step account of the same
Step 1 : Read the ZK style guide
As a first step developers must go through the ZK tab style guide available at this link - http://www.zkoss.org/doc/styleguide/ch01s06.html
Step 2 : Create a custom style sheet to override the defaults
Listing 1 - cat-tab.css - Download css here

td.tab-3d-tl-sel {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	background-color:#D7E3EA;
	border-left:1px solid blue ;
	border-top:1px solid blue 
}

td.tab-3d-tm-sel {
	background-image: url(/CAT/images/dot.gif);
	height:5px;width:10px;
	background-color:#D7E3EA;
	border-top:1px solid blue 
}

td.tab-3d-tr-sel {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	background-color:#D7E3EA;
	border-right:1px solid blue ;
	border-top:1px solid blue 
}

td.tab-3d-ml-sel {
	border-left:1px solid blue ;
	width:5px; height:20px;
	background: #ffffff url(/CAT/images/selected.gif) repeat-x top left;
	
}	

td.tab-3d-mm-sel {
	background: #ffffff url(/CAT/images/selected.gif) repeat-x top left;
	width:20px; height:20px;
	
}

td.tab-3d-mr-sel {
	background: #ffffff url(/CAT/images/selected.gif) repeat-x top left;
	width:5px; height:20px;
	border-right:1px solid blue 
}

td.tab-3d-bl-sel {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	border-left:1px solid blue ;
}
td.tab-3d-bm-sel {
	background-image: url(/CAT/images/dot.gif);
	width:20px; height:5px;
	
}

td.tab-3d-br-sel {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	border-right:1px solid blue ;
}


td.tab-3d-tl-uns {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	background-color:#BBFFFF;
	border-left:1px solid yellow ;
	border-top:1px solid yellow 
}

td.tab-3d-tm-uns {
	background-image: url(/CAT/images/dot.gif);
	height:5px;width:10px;
	background-color:#BBFFFF;
	border-top:1px solid yellow 
}

td.tab-3d-tr-uns {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	background-color:#BBFFFF;
	border-right:1px solid yellow ;
	border-top:1px solid yellow 
}

td.tab-3d-ml-uns {
	border-left:1px solid yellow ;
	width:5px; height:20px;
	background: #ffffff url(/CAT/images/nonsel.gif) repeat-x top left;
	
}	

td.tab-3d-mm-uns {
	background: #ffffff url(/CAT/images/nonsel.gif) repeat-x top left;
	width:20px; height:20px;
	
}

td.tab-3d-mr-uns {
	background: #ffffff url(/CAT/images/nonsel.gif) repeat-x top left;
	width:5px; height:20px;
	border-right:1px solid yellow 
}

td.tab-3d-bl-uns {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	border-left:1px solid yellow ;
}
td.tab-3d-bm-uns {
	background-image: url(/CAT/images/dot.gif);
	width:20px; height:5px;
	
}

td.tab-3d-br-uns {
	background-image: url(/CAT/images/dot.gif);
	width:5px; height:5px;
	border-right:1px solid yellow;
}

<window>
	       	
		<tabbox panelSpacing="4">
		    <tabs >    
		        <tab label="First" />        
		        <tab label="Second"/>        
		    </tabs>    
		    <tabpanels>    
		        <tabpanel>The first panel.</tabpanel>        
		        <tabpanel>The second panel</tabpanel>        
		    </tabpanels>    
		</tabbox>
</window>

<window>
	    <style src="/css/cat-tabs.css"/>
    	
		<tabbox panelSpacing="4">
		    <tabs >    
		        <tab label="First" />        
		        <tab label="Second"/>        
		    </tabs>    
		    <tabpanels>    
		        <tabpanel>The first panel.</tabpanel>        
		        <tabpanel>The second panel</tabpanel>        
		    </tabpanels>    
		</tabbox>
</window>

Here is how the modified version looks

Ok i will finish this in a hurry. But before i go, i must thank the ZK folks for few things - documentation in version 3 is improved and things look even better with the release of your books. I have read one of them. Also please document your JSF support.

Tour de Icefaces - Part 2 - Layout Primer

<ice:panelBorder/> represents a layout component.This component divides the page into 5 regions:

• north
• south
• east
• west
• center

It is possible to embed child elements in these 5 regions, depending on the website layout requirement. The regions are defined using facetsThere is a boolean render attribute for each region - namely renderNorth, renderSouth, renderCenter, renderWest and renderEast.So it is easy to control the rendering of child components.However it is important to note that panelBorder component does not support all kinds of child elements.It needs a container type component as a child viz. panelGroup, panelGrid or form.

Creating the layout
The listing(layout.jspx) below shows the basic layout structure as discussed in the first part of this series:

<f:view xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:ice="http://www.icesoft.com/icefaces/component">
	
	<f:loadBundle
        basename="net.sf.mystore.resources.MyStoreMessages"
        var="msgs" />
           
        
	<html>
	<head>
	<ice:outputStyle href="mystore-default.css" rel="stylesheet" type="text/css" />
	<title><ice:outputText value="#{msgs.productTitle}" /></title>

	</head>
	<body>
	<h:form>
		<ice:panelBorder id="page" styleClass="panelBorderLayoutMain" renderNorth="true" renderSouth="true"
			renderCenter="true" renderWest="true" renderEast="true" border="1" bgcolor="grey">

			<f:facet name="north">
				<ice:outputText value="North" />
			</f:facet>

			<f:facet name="west">
				<ice:outputText value="West" />
			</f:facet>

			<f:facet name="east">
				<ice:outputText value="East" />				
			</f:facet>

			<f:facet name="center">
				<ice:outputText value="Center" />
			</f:facet>

			<f:facet name="south">
				<ice:outputText value="South" />
			</f:facet>
		</ice:panelBorder>
	</h:form>

	</body>
	</html>
</f:view>

So here is the simple layout for myStore application. Check out the usage of the boolean region rendering flags. Also it shows the embedded child elements. Also note that as we gradually build the application i have introduced style-sheet and resource bundle for our application.

The modified project source and ant build script can be downloaded here.

And finally here is how our layout looks now:


Later i intend to take a de-tour to see how facelets and icefaces work together.
Coming Up Next - Tour de Icefaces - Part 3 - Exploring layout child components





Tour de Icefaces - Part 1 - Setting up with Workshop and Ant

Posted by dhrubo on December 28, 2007 at 4:14 AM | Permalink | Comments (0)



Icefaces has been easy to start thus far. I downloaded the latest stable release(1.6.2) from their site and also installed Bea Icefaces tooling support. The distribution ships with a few "ready to go" applications to work - deploy, run, check source.This is very convenient. It reminded me of Struts which always had some sample applications to start like struts-blank.war.

After playing around initially, i decided to setup and run a very simple Icefaces application on my own on Workshop.The intention was to build on this for the oscommerce like application that i have decided to develop to try full feature set of Icefaces. Another intention was to set up a robust environment for further development and setting the configurations right at the outset.

Workshop Project Structure


Configuration
The web.xml and faces-config.xml for the project can be downloaded here - Download file

JSP Documents
The JSP documents can be downloaded from here - Download file

Java source
Finally the Java source can be downloaded from here - Download file

Jar list
Here is the list of Jar files you need to put in your WEB-INF/lib folder

• backport-util-concurrent.jar
• commons-beanutils.jar
• commons-collections.jar
• commons-digester.jar
• commons-discovery.jar
• commons-el.jar
• commons-fileupload.jar
• commons-logging.jar
• el-api.jar
• icefaces-comps.jar
• icefaces.jar
• jsf-api.jar
• jsf-impl.jar
• jstl.jar
• krysalis-jCharts-1.0.0-alpha-1.jar
• xercesImpl.jar
• xml-apis.jar



Coming up...
• Tour de Icefaces - Part 2 - Layout Primer





Tour de Icefaces

Posted by dhrubo on December 25, 2007 at 11:19 PM | Permalink | Comments (0)



Of late I have been trying my hands on a few open source Java Ajax UI frameworks. The last one i used was easy to setup and get going. It has a plethora of components and a very active support forum. However it was not at all easy to customize those components for real world need. For most common design and customization issues i had to frequent their support forum. This clearly indicates that the documentation is inadequate.The L&F of the components varied significantly from browser to browser(i worked with IE6 and FF2) This framework is not based on standards like JSF. Lack of IDE support also makes things difficult for developers.

So i decided to move on and evaluate Icefaces. I was also inspired by this article on DEV2DEV - Getting Started with ICEfaces in Workshop for WebLogic In order to check out Icefaces framework - components and features, i will try to build a site similar to osCommerce.My tools in this adventure are listed below:

• Bea Workshop for Weblogic 10
• Weblogic 10
• MySql database server 5
• Icefaces 1.6

We set sail by creating the landing page for a guest user who casually visit the site.The figure below shows the layout of this page.

Coming up...
• Tour de Icefaces - Part 1 - Setting up with Workshop and Ant
• Tour de Icefaces - Part 2 - Layout Primer





A sip of ZK

Posted by dhrubo on August 14, 2007 at 3:18 AM | Permalink | Comments (5)

Getting started with a ZK web application is really very easy. It is based on XUL - XML UI Language which is the heart of Mozilla platform. Here is the step by step process for the same.

Step 1: Create a dynamic web project As a first step create a dynamic web project using Workshop.

Step 2: Unzip the ZK distribution You can download the latest ZK distribution here - http://www.zkoss.org/download/ Unzip the downloaded installation on the filesystem.

Step 3: Copy Jars Copy the following the jars listed below to WEB-INF/lib
• bsh.jar
• commons-el.jar
• commons-fileupload.jar
• commons-io.jar
• dojoz.jar
• fckez.jar
• Filters.jar
• gmapsz.jar
• groovy.jar
• jcommon.jar
• jfreechart.jar
• jruby.jar
• js.jar
• json_simple.jar
• timelinez.jar
• zcommon.jar
• zhtml.jar
• zk.jar
• zkplus.jar
• zul.jar
• zweb.jar

Note - that all of the jars listed above may not be necessary to run ZK.

Step 4: Modify your web.xml Modify your web.xml file as the attached file - Download web.xml

Step 5: Code the first ZUL UI file Here is the simple zul file - Download login.zul file

Step 6: And Finally.... Now its time to start WLS10 from your Workshop. Add the newly created project for deployment.Open the zul file in the browser as normal html page - http://localhost:7001/ZKWeb/login.zul




Programming Ant

Posted by dhrubo on August 13, 2007 at 10:53 PM | Permalink | Comments (0)

Recently i was busy building a Java snippet processing engine. The primary responsibilities of this engine were :
• Accept code snippets written in Java
• Dynamically generate Java code
• Compile the Java code
• Run the Java code

As you would expect, I started with the Runtime and Process classes from the standard Java API. I was dynamically building a command string which was very large with classpath and system properties. Very soon, i ended up with a pretty dirty code full of StringBuffer.append. More surprises awaited me.I had tested it on Windows and it did not work on other platforms. When i debugged, i realized that classpath setting was incorrect. Now i had to add a few if-else blocks depending on the platform. So i ended up with a lot of clumsy code, which i did not like. I had no option but to change because even PMD and Checkstyle were complaining.

I had already consumed a lot of time to implement the above functionality. So i had very little time to redesign and produce a clean solution. As one would expect, i started looking for existing libraries and the only useful one i found was none other than Apache Ant. Initially there were few glitches - lack of quick start guide was a problem. But soon i got used to the API docs and after that it was like a breeze.

Program Listing 1: Using Ant API to run a compiled Java program

public class JavaRunner{
    private Project project;
    private Path path
    /*Accepts a list of folder containing the jars required 
      for running the compiled snippets*/
    private JavaRunner(List classpathDirList){
        this.project = new Project();
        this.project.setName("JavaRunner");
        this.path = new Path(project);
        FileSet fileSet = null;
        for(String cploc : classPathLocList){
        	fileSet = new FileSet();
        	fileSet.setDir(new File(cploc));
        	fileSet.setIncludes("**/*.jar");
        	path.addFileset(fileSet);
        }        
    }
    public int execute(String fullJavaClassName, Map sysParams){
            javaExecutable = new Java();
            javaExecutable.setProject(this.project);
            javaExecutable.setClassname();
            javaExecutable.setClasspath(this.path);
            javaExecutable.setFork(true);
            javaExecutable.setSpawn(false);
            setNewJVMProperties(sysParams, javaExecutable);
            status = javaExecutable.executeJava();
            return status;
    }
    private void setNewJVMProperties(Map sysParams, Java java) {
    	Environment.Variable sysVar = new Environment.Variable();
        sysVar.setKey("xml.config.loc");
        sysVar.setValue(sysParams.get("xml.config.loc"));
        java.addSysproperty(sysVar);
    }
}





Running OpenLaszlo 4 Applications on Weblogic 8.1

Posted by dhrubo on April 10, 2007 at 6:12 AM | Permalink | Comments (3)

Assumption
You have successfully installed the OpenLaszlo 4.0 server. The installer can be found here -
http://download.openlaszlo.org/4.0.0/openlaszlo-4.0.0-windows-dev-install.exe
Step 1
Create a folder myOLonWLS in your OpenLaszlo server installation folder. For example the folder on my machine is located under - C:\OpenLaszloServer4.0.0\Server\lps-4.0.0
Step 2
Save the following contents as a file named test.lzx in the folder created in step 1 above.


<canvas  width="1024" height="700" >
    
	<window x="0" y="0" width="100%" height="100%" 
          title="jWiDE" resizable="false" allowdrag="false" >
        </window>

</canvas>


Step 3
Start weblogic server and launch the admin console.
Step 4
In the admin console - navigate to mydomain --> deployments --> web application modules
In the configuration tab on the right hand frame click on "Deploy a new Web Application Module... "
Navigate to your OpenLaszlo server installation. Now we need to deploy the LPS application on WLS.
For example on my WLS this location is shown as - Location: localhost \ C: \ OpenLaszloServer4.0.0 \ Server
Select the lps-4.0.0 folder and click on "Target Module" button.
Step 5
In the subsequent page of the deployment wizard (Review your choices and deploy) scroll down and click on "Deploy" button
Step 6
Once the lps application is deployed successfully(the admin console will show this message). Now in a new browser window type the following url http://localhost:7001/lps-4.0.0/myOLonWLS/test.lzx
You will now see a window with a title bar "jWiDE" is opened, if the installation was successful in the previous step.
So get started to code, exciting RIA applications with OL and Weblogic.

February 2008

Search this blog:

Archives

February 2008
January 2008
December 2007
August 2007
April 2007

Categories

Recent Entries

A quick guide to alter ZK tabs look and feel

Tour de Icefaces - Part 2 - Layout Primer

Tour de Icefaces - Part 1 - Setting up with Workshop and Ant

Articles

A Primer on Spring's Data Access Object (DAO) Framework
This article introduces the Spring Data Access Object (DAO) framework. After examining the architectural needs for DAO, it describes the DAO pattern in general and how Spring simplifies the implementation. Nov. 29, 2006

All articles by Dhrubojyoti Kayal »