Key Features
OpenWAF compiles the application to browser compatible Javascript including IE6. Compiled code is standard JSP/Servlet project which you can further modify.
This is a major advantage for the developers. Normally due to browser architecture developers need to write a callback methods for any asynchronous operation. This force developers to split the code functionality in multiple functions. Consider a example where developer want to get the server time and update on html element. Using normal javascript, code look like this.
function doOperation(){
xmlHttp=new XMLHttpRequest();
xmlHttp.onreadystatechange=state_change;
xmlHttp.open("GET","GetTime.jsp",true);
xmlHttp.send(null);
}
function state_change(){
if(xmlHttp.readyState==4){
var l=document.getElementById("lblTime");
l.innerHTML=xmlHttp.responseText
}
}
Whith OpenWAF same code can be written in a much simpler way. OpenWAF Compiler takes care of marshling parameters and calling the Webservice asynchronously. Control is blocked(logically) till the Web Service gets the result.
lblTime.setText(TimerService.getTime());
Going Further you can write infinite loops as well( As long as loop contains at least one RPC call ) . This will work normally. as expected without blocking user from normal surfing.
while(true){
lblTime.setText(TimerService.getTime());
}
Generally Search engine looks for static data content in web page. They don't execute javascitpt. Normally Web Toolkits create UI and Data through javascript. This makes data inaccessible to search engines.
In OpenWAF hybrid approach is used (design & program ),which keeps data in html and creates control using it. This makes data available to search engines.
Most of the time we include some external library in a project. In order to run an application compiler need to compile entire library in an application.
This increases the size of the application. Most of the other compilers compile and include entire library even if you have used only part of it. Generally developers don't have any control on it.
Unlike this OpenWAF compiler identifies which part of library can possibly execute and compiles only that portion of library. Developers need not to worry about anything to do this.
This reduces the size of compiled javascript tremendously irrespective of number of libraries you have included.
Programming a "View" takes more time and efforts than designing it.Controls like form are better to be designed for better control over placement of the controls. But in some complex controls like Treeview programmed approach is better
than designed. OpenWAF supports both the approaches. i.e View can be designed in HTML as well as it can be coded through Controller.
Designed Approach
<WAF:TabPanelElement title="Radio">
<addContent>
<div>
<WAF:Radio text="Radio" groupname="mygroup"/>
<WAF:Radio text="Radio" groupname="mygroup"/>
<WAF:Radio text="Radio" groupname="mygroup"/>
<WAF:Radio text="Radio" groupname="mygroup"/>
<WAF:Radio text="Radio" groupname="mygroup"/>
<WAF:Radio text="Radio" groupname="mygroup"/>
</div>
</addContent>
</WAF:TabPanelElement>
Programmed Approach
TabPanelElement tpe=new TabPanelElement("Radio Buttons");
for(int i=0;i<6;i++){
Radio rad=new Radio("Radio");
rad.setGroupname("mygroup");
tpe.addContent(rad);
}
TabPanel1.addTabElement(tpe);
Each component in OpenWAF is organised in MVC Architecture. Appropriate language is used for respective component. Like View is
more of designing so every view is designed using HTML and CSS. For rapid development it also uses OpenWAF controls
using HTML like tags.
- View:
This contains all the display elements such as Textbox , Buttons or text etc. View is designed in HTML and provides a way to interact with the application.
- Controller:
This handles all the events generated through View such as command button click, text change, mouse move etc. This is also responsible for communicating with model which is compiled as a web service. This is compiled in JavaScript and executes on the client side i.e. Browser.
Controller is responsible for communicating with model.
- Model
Model contains the code which executes on the web server. This may include accessing database, sending mail etc. Model function gets called from Controller using RPC. Any controller can call any model to increase the usability.
OpenWAF uses hybrid approach for component development i.e. Designed and Programmed. You can specify design in HTML and functionality in Java class. To understand quickly lets look at Label Control in OpenWAF
Code for Label.view.html
<label id="lblElem" class="waf-basic-label"/>
Code for Label.java. Here
lblElem is directly referred. Since it is defined in View File you just need to declare this no need to create an instance. Compiler takes care of this.
package com.openwaf.client.ui.basic;
import com.openwaf.client.dom.Element;
import com.openwaf.client.dom.LabelElement;
import com.openwaf.client.ui.annotation.ViewMethod;
import com.openwaf.client.ui.annotation.ViewProperty;
public class Label extends BasicControl{
private static String CSS_NORMAL="waf-basic-label";
private static String CSS_DISABLED="waf-basic-label-disabled";
@ViewElement
private LabelElement lblElem;
private boolean disabled;
public Label(){
disabled=false;
setText("Label");
}
public Label(String text){
disabled=false;
setText(text);
}
@ViewProperty
public final void setText(String text){
lblElem.setInnerHTML(text);
}
@ViewMethod
public void setText(Element element){
lblElem.clearChilds();
lblElem.appendChild(element);
}
public String getText(){
return lblElem.getInnerHTML();
}
@ViewProperty
public void setDisabled(boolean value){
if(value){
lblElem.setCssClassName(CSS_DISABLED);
}else{
lblElem.setCssClassName(CSS_NORMAL);
}
disabled=value;
}
public boolean getDisabled(){
return disabled;
}
}
OpenWAF requires two project one Source project and another target(compiled) project. All OpenWAF related code is placed in source project.
OpenWAF compiles source project and adds compiled files to target project. Your are free to add any other content in target project.
Developers can enjoy the features like variables and import in CSS.
@variables {
Selected_Color:#92C1F0;
}
.message-box{
background-color:var(Selected_Color);
}
.group-box{
border-width:2px;
border-style:solid
border-color:var(Selected_Color);
}
If you are familiar with basic concepts of web and Java then it will take only few hours to learn OpenWAF.
You just need to understand about project structure ,services and compilation process.
OpenWAF uses best possible methods of optimizing the javascript code. Like prototyping the Object creation ,reducing variable name length and much more.