DB Form Builder

From Documentation


Stop.png This article is out of date, please refer to http://books.zkoss.org/wiki/ for more up to date information.

Important Information

This is currently an experimental plugin, available for download here While install, please remember to uncheck "Group items by category".

Introduction

DB Form Builder is a Wizard to help developers generate a Zeta DB Form [1] without typing any code. Please follow Zeta DB Form Builder Step by Step Guide or Zeta DB Form Builder Detailed Guide for more detailed information.


Zeta step by step 005 new zeta strategy.png

Zeta DB Form Builder Step by Step Guide

Prerequisite

1. You are required to use the Java SE Development Kit (JDK) as Eclipse's default JRE to build Java Projects, please follow the link Setting_Default_JRE_In_Eclipse to set the JDK as the default JRE

2. Be sure to finish configuring the ZK Library and define a server runtime.

3. Zeta DB Form Builder is only for use with ZK Library version 3.6.0 and above

4. If you're using JDK 5, you are required to manually copy the file jsr250-api.jar to your project's \WEB-INF\lib directory

Due to licensing issues, we cannot provide the jsr250-api.jar file with ZK Studio. Please click here and download the file "com_annotations-1_0-fr-api-doc.zip". This package contains the jsr250-api.jar file.

5. Setup the Database Connection within Eclipse, this will differ depending on which type of database you use:
*MySQL:

Setup MySQL DB in Eclipse

6. Currently the Zeta DB Form Builder does not support a table with foreign keys

Step by Step Usage

  1. On a dynamic web project with ZK support, right click the project and select [New]\[Other...]:
    Zeta step by step 001 new zeta strategy.png

  2. Expand the ZK folder, select Zeta Form and then click  Next .
    Zeta step by step 002 new zeta strategy.png

  3. In the wizard screen select the type of Form Builder you require, in this case it will be the 「Single Form Builder」 and make sure that the appropriate project has been selected in the drop down box, then click  Finish .
    Zeta step by step 003 new zeta strategy.png
    Note: A Form Builder is a way to tell zeta how to manipulate data and present in Zeta form.

  4. Select a Database Profile (the Database Connection that you created in the Eclipse Data Source Explorer),
    Zeta step by step 004 new zeta strategy.png
    Note: If you can't see the profile that you previously added, click  Refresh .

  5. After selecting a Database Profile please make sure the connection settings shown on the right hand side panel are correct and then click  Test Connection & Go next .
    This action should prompt a connection successful message, click  OK  to continue.
    Zeta step by step connect success.png

  6. On the next page, select the desired table from the Available Tables list on the left, then click  Next  > .
    Zeta step by step 005 new zeta strategy.png

  7. On the UI Template Configuration page you are able to select a template from the listbox on the left. Having selected this, an example will be shown on the right hand side, click  Next  >  to proceed.
    Zeta step by step 006 new zeta strategy.png

  8. On the ORM Configuration page, map the data column type to the Java object making sure there are no red crosses Zeta column Invalid.png in the far right column, then click  Next  > 
    Zeta step by step 007 new zeta strategy.png

  9. The List View Configuration page enables you to make modifications to the mapping of columns, position of columns and the presentation of all the columns for the <listbox> view, click  Next  >  to continue.
    Zeta step by step 008 new zeta strategy.png

  10. The Detail View Configuration page enables you to make modifications to the mapping of columns, position of columns and the presentation of all the columns for the <grid> view, click  Next  >  to continue.
    Zeta step by step 009 new zeta strategy.png

  11. On the Other Configuration page you are able to configure the generated Java source code and some Object-relational mapping settings:
    Zeta step by step 010 new zeta strategy.png
    By pressing  Finish , the linking code will be auto generated within the project.

Show Result

  1. Make sure you have set web server as depicted here : Running the ZUL File

  2. Check if a ".zeta" configuration file which is generated by Zeta Form Builder is present in the project's folder (you can re-open this wizard by right clicking on this file and selecting [Zeta]/[Open Wizard]).
    Zeta config file location.png

  3. Right click the new ZUL file and select [Run AS]/[Run on Server]:
    Zeta verify result.png

  4. You should be able to see the generated Form in a browser

Note

  1. You can use multiple Zeta Forms on the same Dynamic Web Project, as long as the name is not the same.
  2. Be sure to stop the application server before running the form builder.
  3. Be sure to clean and rebuild your project after you generate a Zeta Form.
  4. For detailed explanations of each configuration page, please see the detailed explanation guide.

See Also

Form Builder and foreign keys

Zeta DB Form Builder Detailed Guide

Introduction

Zeta DB Form Builder comprises of many Form Builders which will help you create and modify various kinds of Zeta DB Form rapidly. You can follow the Step by Step Guide to create a Zeta DB Form quickly.

The Start Page

This start page enables you to select your dynamic web project and the type of Form Builder you would like to use:
Zeta WizardPage001.png

  1. Using this combobox you are able to select the dynamic web project you want to use the DB Form Builder with. If you right click on a dynamic web project to invoke the Zeta Form Builder then that project is automatically selected. However, if you utilize the menu command [File]/[New]/[Other...] you will have to manually select the dynamic web project.
  2. All the available Form Building Wizards are available here, if no Form Builder is selected then the Finish button will not be activated.


Currently there is only a Single Form Builder wizard available, so select it and click Finish to continue the wizard.

The Select Database Page

This page is used to configure which DB the Form Builder will attempt to connect to and use that database to generate the DB Form.

Zeta WizardPage002.png

  1. This box lists all available databases which have been setup in Eclipse
  2. The Refresh button refreshes the DB list
  3. This button opens the 『new connection profile window』 allowing you to setup a new database connection
  4. This button closes the Former Building Wizard and opens the Data Source Explorer
  5. The currently selected database』s information will be displayed here
  6. You are able to change the Username and Password of the connection here. However, this information will NOT be saved.
  7. Having finished selecting the database and configuring the Username and Password, click here to test the connection and proceed to the next step

The Choose Table Page

This page allows you to select which table will be used to generate the DB form.

Zeta WizardPage003.png

  1. Available Tables: lists all available tables in the database.
  2. Table Columns: lists the schema of the currently selected data table, the Primary Key will be highlighted in a different color.
  3. Data Preview: lists the first 15 rows of the selected data table.


The UI Template Configuration Page

This page enables you to choose which template the Single Form Builder adopts to generate the DB form.

Zeta WizardPage004.png

Please select a template from the list on the left hand side, the template's information and example will then be displayed on the right-hand side of the window.

ORM Configuration Page

This page enables you to configure the "Object Relation Mappings (ORM)" of the data. You are able to map the data tables types to Java types, any errors while doing this will be displayed by a red cross.

Zeta WizardPage005.png
  1. This list displays all the mapping information needed for the data:
    • Column: displays the name of the column
    • Data Type: the original database』s data type
    • Id: the Java Object name that this column will mapping to, you can type the name of the object into this field directly
    • Java Type: the data type of the mapped Java Object, it is a data type which Java supports.
      You are able to change the Java Type by selecting an appropriate type from the drop down list.
      Note: some data types that originated from Database may not be precisely detected by the Form Builder, therefore the mapping may be erroneous. This will cause the generated Zeta DB Form to produce some exception message when running in server, hence it will not be shown.
    • List View: check this field if you want it shown in the List View Configuration Page
    • Detail View: check this field if you want it shown in the Detail View Configuration Page
  2. This option controls how the primary key is manipulated/incremented
Zeta SingleFormBuilder ORM Config PK Create.png
  • By Database (auto create) : this option allows the database to auto update the value of the Primary Key
  • By Code/User Input : this option allows user programming logic to change the value of Primary Key


The list view configuration page

This page allows you to configure the content shown within the list view. You are able to change the order of the items by using the Up and Down buttons on the lower left-hand side and upon selecting an item its' configuration details can be modified in the right-hand side panel.

Zeta WizardPage006.png

Note: If you are unable to proceed due to the Next > button being disabled, please check if a field in the left-hand side list has been marked with an error sign. If there is any field marked with an error sign Zeta column Invalid.png please modify the configuration making sure that it is valid.


The detail view configuration page

This page allows you to configure the content shown within the detail view. You are able to change the order of the items by using the Up and Down buttons on the lower left-hand side and upon selecting an item it』s configuration details can be modified in the right-hand side panel.

Zeta WizardPage007.png

Note: If you are unable to proceed due to the Next > button being disabled, please check if a field in the left-hand side list has been marked with an error sign. If there is any field marked with an error sign Zeta column Invalid.png please modify the configuration making sure that it is valid.

The other configuration page

This page configures miscellaneous settings of the Form Builder.

Zeta WizardPage008.png

  1. Name : the name of this DB Form, it is also the base name for the generated file.
  2. Package : the package name of the generated class.
  3. Source Folder : the Java source file location of the generated class.
  4. View Folder : the location where the zul file will be generated upon clicking the Finish button.
  5. Copy Zeta Jars : checking this will copy the Zeta library jar files into the project's lib folder : [Project_Name]/WebContent/WEB-INF/lib (you have to check this option if your project doesn't already contain these jar files.)
  6. Copy JDBC Jars : checking this will copy the JDBC library jar files (based upon the type of database connection profile) into the project's lib folder : [Project_Name]/WebContent/WEB-INF/lib (you have to check this option if your project doesn't already contain these jar files.)
  7. Copy JPA Jars : checking this will copy the JPA library jar files (such as spring, hibernate etc.) into the project's lib folder : [Project_Name]/WebContent/WEB-INF/lib (you have to check this option if your project doesn't already contain these jar files.)
  8. Create Configuration : checking this will create a Spring and JPA configuration within the location Source Folder/config and append some configuration to you web.xml (you are required to generate these at least once.)
  9. Dialect : set the dialect of the connected database.
    Note: Usually Zeta will detect the correct dialect if you have correctly setup Database connection in Data Source Explorer, however, in some cases you are required to set the dialect if Zeta did not automatically select it.

Note

  1. You are able to create multiple Zeta DB Forms within one dynamic web project, as long as the Name within the Other Configuration Page is different.
  2. If you create a Zeta DB Form that the name is the same as another Zeta DB Form that has been already created in this dynamic web project, Zeta will inform you if you want to replace the old one or not.
    Zeta Sing Form Builder ask to replace zeta config file.png
  3. If you selected an option from a previous Zeta DB Form Builder page, that caused Zeta to copy files into the dynamic web project, Zeta will ask you if you want to replace those files or not.
    Zeta Wizard replace old one.png
  1. Zeta DB Form is a data operation process which is based on the MVC architecture of ZK + Spring + Datasource (ex: use JPA or Hibernate to connect Database).