{easy-contents}

Building new Servlets with the OpenZ-GUI-Engine

To create a new servlet in OpenZ you have to plan what you are going to do.

There are several options within the OpenZ-GUI-Engine to create a manual servlet.

I.E: fieldgroups, simple grids or.editable grids.

The following documentation show, how to create servlets containing fieldgroups and editable grids. The simple grid will be documented in the future.

Not every single option will be described.

Creating a manual servlet  containing only fieldgroups

The simplest kind of a servlet is a servlet containing only fieldgroups. After planning what you need for the fervlet we can start generating the first fieldgroup for our servlet.

Creating the first fieldgroup

To create a fieldgroup you have to login into OpenZ as developer. Below

Application Dictionary || Reference  ||  Reference you can create a new reference with the “Validation Type” : ‘Field Group’, defining the Name, the type and the amount of columns for the fieldgroup. Additional Information for the servlet can be entered in description and comment. Be sure the checkbox “Active” is checked. See the hardcopy below.

CreatingFieldgroup

After creating the reference, we can start to fill our fieldgroup. Therefore go to

Application Dictionary || Reference  ||  Reference  >>  Fieldgroup Columns

This menu provides the possibility to create elements in the fieldgroup.

Create a new entry

On the following hardcopy you can see all options to create a fieldgroup element.

Creating Filedgroup Element

The screenshot shows the important columns for a simple Textbox. The user will be able to fill this Textbox with data.

Explanation of the Options:

Line No: Simple autogenerated counted number of the Element, the Fieldgroup will be shown as the Elements were created on Default.

Name: Name of the Element

Leadingemptycols: Amount of Empty columns before the Element

colstotal: How many columns will be used for the Element.

Readonly: Is the Element Readonly? (Not able to change by the user on the Servlet)

Required: Has the user to fill the Element? Warning will be shown if it is not filled with data.

Maxlength: How many characters is this Element able to accept.

Reference: Provides connectable References (important for Dropdown Boxes)

Reference Url: Provides the ability to connect a popup for searching an Entry (Eg: “Product” for Productpopupsearch)

Template: What Type the Element should be. See Picture below.

Templates Fieldgroup Elements

Button: Button eg Process or Search or else

Checkbox: Checkbox

Date:Datebox (Textbox for Dates with calender button)

Emptyline: Inserts an empty line

Euro: Numberbox with Euro-formatting

Fieldgroup: visual seperations for  the Template

Integer: Numberbox, Integer-formatted

Listsorter: Multiselection tool to transfer eg Employees to another group (Doesnt work properly yet)

Multiselector: Provides the option to select several entries of a list

Popupsearch: Offers the possibility to select an entry from an popup, also a textfield

Price: Numberbox, Price-formatted

Radiobutton: Radiobutton

Refcombo: Dropdownbox

Text: Simple Textbox

Noedit_Textbox: Textarea without Decorations

Image: Imageupload Possibility

Url: Textbox for Urls

Textarea_edit_simple: Textarea with simple Editor(can save data entered, nothing more yet)

Textarea_edit_adv: Textarea with advanced editor (doesnt work properly yet)

Listsortersimple: Prettier Listsorter (works)

Line break before this field: Element takes a new row in the servlet

Active: Element is active

Displayed: Element is displayed on default

Display Logic: Provides complex Display Properties of the Element (eg user-,role-specific)

Readonly-Logic: Provides Write or Read Options of an Element (similar to Display Logic)

Mandatory-Logic: Provides complex Options if the field has to be filled

Default-Value: The default value of this element

Style: additional decoration options for a field, eg the width can be forced, the bg-color changed…

onchangeevent: Provides javascript Options for the Element(eg what happens if so enters a value)

Storedinsession: stores the element in session

Back to the creation of an Element.

As you can see on the Picture above, there is an textbox (barcode) which can be filled with max:100 characters and a colspan of 3 columns.

Creation of a Button as next Element. This settings above can be used in nearly all Fieldgroup-Element Templates. Other Templates Provide sometimes more Options, the Button Provides a new column called Button Class (CSS), these Textfield provides the option to define an Image for the Button eg process or search.

What the button should do on a click has to be defined in the Column Reference Url, the Javascript functions like Submitcommandform(‘…’) can be used as a function.

Repeat the process of creating Elements until your fieldgroup is complete.

You are able to use as many Elements as you want to use in a Fieldgroup. But consider the size of a default screen.

 

Creating the Servlet

Use Eclipse to create the Servlet. Below src > org.openz.pdc is a java File as a template to build a new Servlet containing only Fieldgroups, copy this in the path you need. And start to change it for your needs.

As you can see in the picture, you have to change only some lines in the source code.

Servlet Changes

The only things you might have to change are the template title in line 69 ( is now PDC Template) and the initialization of the Infobar and Fieldgroup. In line 76 you can define a standard Message, which is always shown for the User of the Servlet, just change the text between the brackets. If no text is needed just comment the line out. For the fieldgroups, it is important to change the title of the fieldgroups in line 79 and 81 to the name you created your custom Fieldgroup.

In line 84 you can define in which order the fieldgroups and or the infobar is shown on the servlet, adding further infobars or fieldgroups, later even grids is possible with an + eg strPdcInfobar+strAnythingelse+strAnotherfieldgroup etc.

Now our simple Servlet is ready for initializing in openz.

Initializing the Servlet in OpenZ

Login into openz as developer, Under Application Dictionary || Form  ||  Form create a new Form with the Title of your Servlet. The java classname is the path to the created servlet in this case org.openz.pdc.PdcMainDialogue.

Initializing the Servlet

Define now the Formmapping in openz under

Application Dictionary || Form  ||  Form  >>  Form Class  >>  Form Mapping

Form Mapping

To access the form you have to use the name from the web.xml from your tomcat installation.

Show our new Servlet in OpenZ

Create a new Entry

under  Application Dictionary || Menu  ||  MenuMenu Mapping 

After translating and saving the Entry. Logout of openz ant compile the sources with ant compile.complete.

How to find the new Servlet in OpenZ

After a successful compiling run, Start openz again and login as a user fe service.

Under the name “Translated Name from the Menu” in our case PDC Hauptdialog you can access our new servlet.

And that’s the result.

Result

Creating a Servlet with Fieldgroups and an editable Grid

Now we are able to create an additional Servlet, which contains both Fieldgroups and editable grids.

There are just a few steps to realize it after the first steps with Fieldgroups. Creating the editable grids will be the first task, followed by the creation of xsql-File and the servlet configuration.

Creating the Editable Grid

Login as developer. And create a new reference under

Application Dictionary || Reference  ||  Reference

Reference

Name it as you want, select the validation type Editable Grid, define the amount of columns used per Line and add an ID (from the Database) referring to the Data you want to show within your grid.

Define the Editable Grid groups

Under Application Dictionary || Reference  ||  Reference  >>  Editable Grid Groups you can define how many rows you want to show in your grid. There are several configuration options as name id column … Description follows after the picture.

Editable Grid Group

Line No: Order of the Grid Groups

ID column name: ID of a db-column, if there are some grids to shof with different ids eg for different bpartners

Has select Line: checkbox to select the data

Has select all below: checkbox which checks all the lines below these referring to the bpartner fe

Has Even/Odd: Datalines are shown in blue and white

Has expander: a + Button to show/hide the data below these line

Header bold: Header is bold

Columns visible on init: Defines if the line is visible on init or not, refers to an expander.

Leadingemptycols: how many emptycolumns before the grid starts

Level: Which line you want to define

Active: Is this line active?

After configuring your groups you can start to fill the grid with columns.

Editable Grid columns

Under Application Dictionary || Reference  ||  Reference  >>  Editable Grid Groups  >>  Editable Grid Columns

you can start to define the columns. In our example we create two lines one Header Line and one Data Line.

Create a new Column.

Editable Grid Column Header

Editable Grid Columns provide nearly as many options as Fieldgroups

Line No.: Order of the columns

Name: A database column name or other (db column names provide the translations automatically)

Readonly: Is the Column Readonly

Displayed: Is it displayed

Active: is it active

Colspan: Defines the width of the field

Required: is the column required

issecondheader: is this column a header under the header – for grids with multiple header lines

Maxlength: Limits the Input of characters in the field

Header column: formats the column as a header ( bold font grey background)

Reference , Reference Url and Table: See Fieldgroups

Templates:Editable Grid Column Templates

Header: Headertext – can be header from db

Checkbox: Checkbox

Date: Datebox, formatted column

Euro: Numberbox Euro fromatted

Integer: Numberbox, Integer formatted

Labellink: provides a Link to another Servlet

PopupSearch: See Fieldgroups

Price: Numberbox Price formatted

Refcombo: Dropdownbox

Text: Textfield Inputfield

Textlabel: a Simple Label or data from the database

Headertext: Text of a Headercolumn if its not from the db

Splitgroupcolumn: Begins a new Line

Default Value: The Value of the column on default

Onchangeevent: provides the use of js to validate columns in the table

For our simple grid we use some header and some textlabels to show data from the database, the overview:

Columns Editable Grid

Now the First manually created Editable grid is almost ready to be shown in openz.

Copying and configuring the JavaServlet

There is a File called PdcTemplate.java in the sources, feel free to copy it into any path you need it.

There are just a few changes to make on the documented Javafile here a extract from the complete javaclass.

        // Initialize Global Structues
        String strPdcInfobar=""; //Area for further Information of the Servlet
        Scripthelper script= new Scripthelper();
        //initialize the grids
        String strUpperGrid ="";
        String strLowerGrid ="";
        //initialize the Fieldgroups
        //Header Fieldgroup
        String strHeaderFG="";
        //Button Fieldgroup
        String strButtonsFG="";
        //Status Fieldgroup
        String strStatusFG="";
        //The Structure of the Servlet
        String strSkeleton="";
        //Html Output of the Servlet
        String strOutput ="" ;
        //Calling the Formhelper to create the Fieldgroups and Grids
        Formhelper fh=new Formhelper();
        //>Setting up the Fieldproviders - they provide Data for the Grids
        //The upper Grid
        FieldProvider[] upperGridData;
        //The lower grid
        FieldProvider[] lowerGridData;
        // Do the Business Logic HERE
        
        // Loading the Data for the grid - requires valid xsql Files
        //loading the upper grid  with language parameter                                             
        upperGridData = PdcTemplateData.selectupper(this,vars.getLanguage());
        //loading the lower grid  with language parameter
        lowerGridData = PdcTemplateData.selectlower(this,vars.getLanguage());
        // Build the User Interface.
        // Load Upper Grid from AD                  Enter here the name of the grid
        EditableGrid uppergrid = new EditableGrid("PdcTemplateUpperGrid",vars,this);
        //save the grid in variable
        strUpperGrid=uppergrid.printGrid(this, vars, script, upperGridData);
        //Declaration of the Infobar                         Text inside the Infobar
        strPdcInfobar=fh.prepareInfobar(null, vars, script, "");

        // Prepare the Fieldgroups from AD                    Name of the Fieldgroup
        //Fieldgroups below are Default for PDC
        //Header Fieldgroup
        strHeaderFG=fh.prepareFieldgroup(this, vars, script, "PdcHeaderFG", null,false);
        //Button Fieldgroup
        strButtonsFG=fh.prepareFieldgroup(this, vars, script, "PdcButtonsFG", null,false);
        //Status Fieldgroup
        strStatusFG=fh.prepareFieldgroup(this, vars, script, "PdcStatusFG", null,false);
        // Loading the Lower Grid from AD          Name of lower grid  
        EditableGrid lowergrid = new EditableGrid("PdcTemplateUpperGrid",vars,this);
        //saving the lower grid in variable
        strLowerGrid=lowergrid.printGrid(this, vars, script, lowerGridData);
        // Load Form-Skeleton
        //Defining the toolbar default no toolbar
        String strToolbar=FormhelperData.getFormToolbar(this, this.getClass().getName());
         //Loading the structure                                                       Name of the Servlet              
        strSkeleton = ConfigureFrameWindow.doConfigure(this,vars,"buttonSearch",null, "PDC Template",strToolbar,"NONE",null);
        // Fit all the content together to html     optional Infobar  default loading Header Fieldgroup, Upper Grid, Button Fieldgroup, Lower Grid, Status Fieldgroup   
        strOutput=Replace.replace(strSkeleton, "@CONTENT@",strPdcInfobar+ strHeaderFG + strUpperGrid + strButtonsFG + strLowerGrid +  strStatusFG);
        //Generating html source
        strOutput = script.doScript(strOutput, "",this,vars);
        // Gerenrate response

Create the xsql-File

We have to create a xsql-File to provide the data from our database to the servlet. We create a File with the name of the javaclass underscore data.xsql in this case pdctemplate_data.xsql

Here the created file according to the editable grid:

<SqlClass name="PdcTemplateData" package="org.openz.controller">
  <SqlClassComment></SqlClassComment>
  <SqlMethod name="selectupper" type="preparedStatement" return="multiple">
    <SqlMethodComment></SqlMethodComment>
    <Sql>
    Select zssm_workstepbom_v_id, zssi_getproductname(m_product_id,?) as product, '' as qty_plan, quantity, qtyreceived, qty_available, issuing_locator from zssm_workstepbom_v
    </Sql>
    <Parameter name="language"/>
  </SqlMethod>
    <SqlMethod name="selectlower" type="preparedStatement" return="multiple">
    <SqlMethodComment></SqlMethodComment>
    <Sql>
    Select zssm_workstepbom_v_id, zssi_getproductname(m_product_id,?) as product , qty_plan, qtyreceived, issuing_locator from zssm_workstepbom_v
    </Sql>
    <Parameter name="language"/>
  </SqlMethod>
  <SqlMethod name="countRows" type="preparedStatement" return="String">
      <SqlMethodComment></SqlMethodComment>
      <Sql> <![CDATA[
      SELECT count(*) AS value FROM (
        select zssm_workstepbom_v_id FROM zssm_workstepbom_v   
        WHERE
            4=4                   
        )  A
      ]]></Sql>
        <Parameter name="pgLimit" type="argument" optional="true" after="4=4"><![CDATA[ LIMIT ]]></Parameter>
   </SqlMethod>
  </SqlClass>

We simply add a Language Parameter, to get the data out of the database with the correct translation and a default count function to get correct line numbers of the provided data.

It is Important to save the xsql-file in the same path as the java servlet!

Our Servlet has now to be included into openz, follow the instructions from the Fieldgroup-Servlet to know what you have to do.

Scroll to Top