WEBOE - Web object oriented

Introduction

Tutorial

Hello WEBOE:

This is the first and easier example of weboe. This simply add a label on the page. A weboe page is a simple jsp with a simple header and footer of the framework.
In the custom code section you can use weboe ui objects. This example show the use of the frame object, the always start object and the label object!

Hello WEBOE - WEBOE Browser

- [] X

Hello WEBOE

hello.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="ISO-8859-1"
    import="bz.davide.weboe.core.*"
%>
<%
    // --------  start custom code  ------------


    final UIFrame frame = new UIFrame("Hello WEBOE");
    frame.setContent(new UILabel("Hello WEBOE"));


    // --------  end custom code  ------------

session.setAttribute("mainframe", frame);
%>
<jsp:include page="/bz.davide.weboe.renderer.basic/_renderer.jsp">
   <jsp:param name="id" value="<%= frame.getNID() %>"/>
</jsp:include>

WEBOE Ajax:

This example show that not only you can do html with objects, but that ui objects can do events!! Thanks to ajax each defined events is forwarded to server ... process will do between objects on server side and changed are optimized rendered to client using partial page rendering. You can try directly in the "Browser" below ... this is tutorial is a live WEBOE page too ;-)

Write some text in the textfield and then press the button: ajax in action!!!

WEBOE Ajax - WEBOE Browser

- [] X

...

ajax.jsp

    // --------  start custom code  ------------

    final UIFrame frame = new UIFrame("Hello WEBOE");
    final UITextField  txt = new UITextField();
    UIButton     conv = new UIButton("to uppercase");
    final UILabel      result = new UILabel(" ... ");  
    UIFlowLayout   flow = new UIFlowLayout
            (
            	txt,conv,result
    		);
    frame.setContent(flow);
    
    conv.setClickHandler(new Runnable()
    {
    	public void run()
    	{
    		result.setLabel(txt.getText().toUpperCase());
    	}
    });

    // --------  end custom code  ------------

WEBOE Ajax 2:

This example show that not only value in existing elements can be modified with ajax ... you can change the layout and structure of the page too!!!
For example you can load the combo-box for country after the user select the state.

WEBOE Ajax 2 - WEBOE Browser

- [] X

Option 1

ajax2.jsp

    // --------  start custom code  ------------

    final UIFrame frame = new UIFrame("Hello WEBOE");
    UIButton     conv = new UIButton("add radio");
    final UIRadioGroup      group = new UIRadioGroup();  
    UIVFlowLayout   flow = new UIVFlowLayout
            (
            	conv,group
    		);
    frame.setContent(flow);
    
    group.addRadio("1", "Option 1");
    
    conv.setClickHandler(new Runnable()
    {
    	public void run()
    	{
    		String rid = String.valueOf(System.currentTimeMillis());
    		group.addRadio(rid, "Option ");
    	}
    });

    // --------  end custom code  ------------

WEBOE POWER:

This example show a more complex example like business page. You can note the following features:

It creates and used a custom object named UITwoColumnForm that is a business object that using base ui elements allow to construct a form in a more powerfull way
It changes the form by the radio button of the type of person
Yellow field are required by regular expression
email and p.iva are syntatically validated
Pressing the button the form is validate ... try ourself. If an error occours the field become red and a the error is show in an alert.
If an error occours the button handle method will raise an exception and operation can be cancelled/rollbacked
If you like you can add db code to read and write values

WEBOE POWER - WEBOE Browser

- [] X

Persona

Fisica

Giuridica

Cognome

Nome

P.IVA

WWW

Provvisorio?

formfull.jsp

   // --------  inizio custom code  ------------

    final UIFrame frame = new UIFrame();

    final UITwoColumnForm f = new UITwoColumnForm();
    
    frame.setContent(f);
    
    final UIReqTextField cognome;
    final UILabel        cognomeLabel;
    final UIReqTextField nome;
    final UIReqTextField piva;
    final UIReqTextField email;
    
    //final UICheckBox personagiu = new UICheckBox();
    final UIRadioGroup rg = new UIRadioGroup();
    rg.addRadio("pf","Fisica");
    rg.addRadio("pg","Giuridica");    
    
    f.add("Persona", rg);
    f.addEmpty();
    
    cognome = new UIReqTextField("BalBla", true);
    cognomeLabel = f.add("Cognome",cognome);
    
    nome = new UIReqTextField(true);
    f.add("Nome",nome);
    
    piva = new UIReqTextField();
    f.add("P.IVA",piva);
    piva.setTextValidator(new RETextValidator("|\\d{5,10}"));
    
    email = new UIReqTextField();
    f.add("Email",email);
  
    email.setTextValidator(new RETextValidator(" *(.+?@.+?)? *"));    

    f.add("WWW",new UIReqTextField());
    
    final UIButton salva = new UIButton("Salva!");

    //
    UICheckBox uic;
    f.add("Provvisorio?",uic = new UICheckBox());
    uic.setChecked(true);
    //f.addEmpty();

    f.add("",salva);
    f.addEmpty();
    
    Runnable showPFG = new Runnable()
    {
    	public void run()
    	{
    		if (rg.getChecked().equals("pg"))
    		{
       		   cognomeLabel.setLabel("Ragione sociale");
    		   nome.setRequired(false);
    		   piva.setRequired(true);
    		}
    		else
    		{
      		   cognomeLabel.setLabel("Cognome");
    		   nome.setRequired(true);
    		   piva.setRequired(false);
    		}
    	}
    };
    // Lancialo per impostare il valore iniziale correttamente!
    showPFG.run();
    
    rg.setChangedHandler(showPFG);
    
    
    salva.setClickHandler(new Runnable()
    {
    	public void run()
    	{
    		salva.setLabel("Salva!");
    		//dbPersona.setCognome(cognome.getText())
    	   	cognome.getText();
    	   	nome.getText();
    	   	piva.getText();
    	   	email.getText();
    	   	salva.setLabel("Salvato!");
    	   	//db.commit()
    	   	
    	   	//db.rollback()
    	}
    });

    
    // --------  fine custom code  ------------