How-To: Develop a FACTORITY web application II

From FactorityWiki

Jump to: navigation, search

Contents

Introduction

Components

The component model of OpenLaszlo follows the MVC architecture style:

  • Model: Java files (e.g. DataEntry.java, DataEntryList.java) with public attributes
  • View: xml files (e.g. AppMaterialDefect.lzx, DlgMachineList.lzx) with GUI elements
  • Controller: Java files (e.g. ReportMaterialDefect.java, FormMaterialDefect.java) that are the backend for certain GUI elements


Application

Model

No model needed.

View

The root element is a class with a certain name e.g. AppMaterialDefect. It must be initialized at the end. 

<canvas>
  <class 	name="AppMaterialDefect" 
  		extends="AspApplet" 
  		minHeight="650" 
  		caption="Material Defect Codes"
    		i18ncontext="de.solarfabrik.factority.core.ui.admin.materialdefect.AppMaterialDefect#AppMaterialDefect">
  </class>
 
 
  <AppMaterialDefect/>
</canvas>

This class can be filled with AS+ specific OpenLaszlo components such as:

  • AspReport
  • AspForm
  • AspMessageDialog
  • AspOperation
  • AspToolBarButton


Controller

No controller needed.


AspReport

Model

We can use specific DataEntry classes or a generic one as shown here. 

public class DataEntry implements Serializable {
 
	   private static final long serialVersionUID = -5362122971443994427L;
 
	    public long pk = Long.MAX_VALUE;
	    public String field1;
	    public String field2;
	    public String field3;
	    public String field4;
	    public String field5;
 
	    public DataEntry3[] entries;
 
}

A specific DataEntry class would have specific attribute names that make the source code understandable. However, the functionality is the same.


View

A AspReport can show data from database. 

   <AspReport	name="list" 
    		x="15" y="15" 
    		width="${immediateparent.width - 2 * this.x}" 
      		highlight="true" 
      		caption="List" 
      		contentheight="230"
      		backend="de.solarfabrik.factority.core.ui.admin.materialdefect.ReportMaterialDefectList">
 
 
 
         <AspGrid 	x="0" 
      			y="0"
      			name="grid" 
      			width="${immediateparent.width}" 
      			height="${immediateparent.height - 9}" 
      			showadd="false" 
      			showdelete="false" 
      			showdisplay="false"
        		backend="entries">
 
        	<AspGridColumn name="col_nb" width="30" text="" >
        		<text datapath="field1/text()"/>
        	</AspGridColumn>
        	<AspGridColumn name="col_reference" width="100" text="Code"  sortable="true">
        		<text datapath="field2/text()"/>
        	</AspGridColumn>
         </AspGrid>
 
   </AspReport>


Controller

The AspReport contains text fields and lists that are bound to the backend's return value of executeQuery (): 

@TransactionDomain("DbMain")
public class ReportMaterialDefectList extends ReportController<DataEntry, String> {
 
   @Override
   protected DataEntry executeQuery (String data_) throws UseCaseException, PersistencyException {
 
       DataEntry result = new DataEntry();
       // fill DataEntry
       return result;
   }
}


ASPForm

Model

The model of a AspForm could be a DataEntry or - as we suggest - a more specific class such as: 

public class DataMaterialDefect implements Serializable {
 
    private static final long serialVersionUID = -5362122971443994427L;
 
    public long pk = Long.MAX_VALUE;
    public String reference = "";
    public String defectType = "";
    public String materialClass = "";
    public DataI18nString shortDesc;
    public DataI18nString longDesc;
 
    public DataEntry3[] machines;
 
    public void initialize (DbSfaMaterialDefect defect_) 
    {
    	pk = defect_.pk;
    	reference = defect_.reference;
    	defectType = defect_.defectType; 
 
    	//...
    }
}

The initialize method maps the database object to the DataEntry for presentation purpose.

The pk attribute helps to identify the actual shown object in the database queries.


View

The view can provide the attributes of the data model. 

   <AspForm 	name="form" 
    		x="15" y="${classroot.list.y + classroot.list.height + 15}" 
      		width="${immediateparent.width - 2 * this.x}" 
      		height="${immediateparent.height - this.y - 15}" 
     	 	highlight="true" caption="Details" visible="false"
      		backend="de.solarfabrik.factority.core.ui.admin.materialdefect.FormMaterialDefect">
 
      <AspInputText x="15" y="10" backend="reference" caption="Code:" xInput="100" wInput="200" readonly="false"/>
      <AspComboBox x="15"  y="40" backend="material-class" caption="Material Class:" xInput="100"  wInput="200"/>
      <AspI18nInputText x="15" y="100" backend="short-desc"  caption="Short Desc:" xInput="100" wInput="200" readonly="false"/>
 
    </AspForm>

Note that attribute names such as shortDesc become sort-desc.


Controller

The AspForm contains text fields and lists that are bound to the backend's return value of executeQuery (): 

@TransactionDomain("DbMain")//$NON-NLS-1$
public class FormMaterialDefect extends FormController<DataMaterialDefect, String> {
 
    @Override
    protected DataMaterialDefect getInstance (String reference_) throws UseCaseException, PersistencyException
    {
       DataMaterialDefectresult result = new DataMaterialDefect();
       // fill DataMaterialDefect
       return result;
    }
}


AspMessageDialog

The AspDialog can asks short YES-NO-questions. 

   <AspMessageDialog
		name="msgDelete"
		mbYes="true"
		mbNo="true"
		caption="Factority Material Defect Management"
		message="Do you really want to delete this item?">
 
		<method event="onYes">
			classroot.deleteItem.execute();
		</method>
    </AspMessageDialog>

The onYes-event can be specified.


AspOperation

The AspOperation can be called from within an application. Than it executes methods in the backend. 

   <AspOperation
		name="deleteItem"
		backend="de.solarfabrik.factority.core.ui.admin.materialdefect.FormMaterialDefect"
		method="deleteInstance">	
		<method name="fillParameters" args="p, data">
			p.addValue("data_", classroot.form.dpData.serialize(), true);
		</method>
		<method name="done" args="dp">
      		        classroot.form.setAttribute("visible", false);
      		        classroot.list.query("-");
   		</method>
	</AspOperation>


AspToolBarButton

Tool bar buttons can be enabled at the right time. They trigger methods with certain finctionality. 

   <AspToolbarButton 
      			name="btnAdd" 
      			placement="containertoolbar" 
      			tooltip="Add new item" 
      			enabled="true" 
      			onclick="parent.addItem()">
        <view resource="../../../../../../../com/factority/core/ui/resources/icon_new.png"/>
      </AspToolbarButton>

The can be placed in the root window or in the "containertoolbar" of the actual AspReport/AspForm.



AspDialog

The AspDialog is a Component that opens a new OpenLaszlo window. It can contain as well as the application root component:

  • AspReport
  • AspForm
  • AspMessageDialog
  • AspOperation
  • AspToolBarButton

Model

Does not have a specific model.

View 

   <class 	name="DlgAddMmiMachine" extends="AspDialog" 
  		width="700" 
  		height="400" 
  		title="Choose machine" 
  		showok="true"
    		i18ncontext="de.solarfabrik.factority.core.ui.admin.materialdefect.AppMaterialDefect.#DlgDefectCodeAddMachine">


Controller

Does not have a specif controller.



Composition

References

Original AS+ OpenLaszlo components source code: /asplus-laszlo-war/target/asplus-laszlo-war/lps/components/asplus

Retrieved from "http://wiki.factority.org/index.php/How-To:_Develop_a_FACTORITY_web_application_II"
Personal tools