User interface as the starting point

Prerequisites

App Builder is required for this tutorial.

Steps at a glance

This tutorial consists of the following steps:

1. Creating a Zero Resource From
2. Creating a model, based on the form
3. Creating a Web page that uses the form and a grid
4. Using the created application

Step 1: Creating a Zero Resource Form

1. Create a new application called StudentDetails, as shown in the following screen capture.

   

2. Click New File -> Zero Resource Form in /public/zero/forms->New form, set the file name to studentForm.json and use the default.json as the template

   The completed dialog should look like the following screen capture:

   

3. Add a Text field and set the following attributes: Title to Name Required to be true and ID to be name
4. Add a Text field and set the following attributes: Title to Surname Required to be true and ID to be surname
5. Add a Checkbox field and set the following attributes: Title to Is Registered and ID to be isRegistered
6. Add a Number field and set the following attributes: Title to Student ID Required to be true Default Value to be -1 and ID to be sId

   The form editor should now look similar to the following screen capture:

   

Step 2: Creating a model, based on a frm

To create a model, based on an existing form, use the following steps:

1. Click New file -> Zero Resource Model in /app/models -> New model based on a form name the created file studentModel.json and set the form model name to be studentForm.json .

   The completed dialog should look like the following screen capture:

   

2. The created model should look like this in the form editor's design tab

   

3. Click New File -> Resource handler in /app/resources/ and name the created file studentModel.groovy. Set its content to: ZRM.delegate().
4. Switch to the Console tab and run the zero model sync command.

Step 3: Creating a Web page that uses the form and a grid

To create a Web page that uses the form and a grid, use the following steps:

1. Click New File -> HTML page in /public; name it index.html.
2. In the palette, switch to the Data tab and create a ZRM data store called studentStore, as shown in the following screen capture:

   

3. In the palette, switch to the Create tab.
4. Create a Zero data grid (from the Zero section of the palette), set the ID to gridId and the data store to studentStore, as shown in the following screen capture:

   

5. Create a Zero form, set the ID to theForm, the model location to ./zero/forms/studentForm.json and the Data Grid ID to gridId, as shown in the following screen capture:

   

   The Usage of "data grid ID" attribute simplifies the linkage between the form and the grid. If you want to link the form and the grid in a flexible way, leave "data grid ID" blank, and switch to Source tab of page editor, then add the following code in the script tag:

   dojo.addOnLoad(function(){
   	var zeroGrid = dijit.byId("gridId");
   	// connect form and grid in a syncronized fashion
   	dojo.connect(zeroGrid.grid,"onSelected",function(){
   		var rows = zeroGrid.grid.selection.getSelected();
   		var item = zeroGrid.grid.model.getRow(rows[0]).__dojo_data_item;
   		dijit.byId("theForm").setValues(item);
   	});
   });
   

Step 4: Using the created application

To use the application you have created, use the following steps:

1. Start the application.
2. Open a browser tab in localhost:8080.
3. Enter values to the form and click submit. See that these values are visible in the grid, as shown in the following screen capture:

   

4. Select an entry in the grid and view its values in the form.
5. Stop the application.