Quickstart building a web application (desktop style)

Lesson 4: Creating the Person table

Now it’s time to start building the actual application. The first goal is to build the person view, to do that the following steps need to be followed:

1. Define the person table, which is part of the database layer.
2. Define the business rules on top of the person table. The business rules will configure how the view will display its fields and specific properties of that view.
3. Create the view, by using the wizard.
4. Run the application.
5. Add the lookup, the dialog that helps to easily select records.
   
   
   

Person table

1. Click on Create new table to create the person table.
   
2. Enter the name of the table, in this case Person.
   
3. Fill in the fields of the table, in this Quickstart:
   - PersonId, Numeric, 8,0
   - LastName, ASCII, 40,0
   - FirstName, ASCII, 40,0
   - Address, ASCII, 100,0
   - Zip, ASCII, 9,0
   - City, ASCII, 60,0
   - Phone, ASCII, 25,0
   - Comment, Text, 1024
   
4. The fields of the table have been defined, now we will add the indexes.
5. Click on Add Index for adding more indexes.
   
   - Index 1: Add PersonId by column.
   - Index 2: Add LastName, FirstName and PersonId. That allows searching for LastName. PersonId is needed to make it unique.
   - Index 3: Add FirstName, LastName and PersonId. That allows searching for FirstName.
   - Index 4: Add City, LastName and FirstName. That allows searching for City.
   

Business Rules

1. Expand Person in the Table Explorer, select cPersonDataDictionary.
2. A list with Business Rules opens.
   
3. First set the Auto Increment field. Click on the buttons next to Auto Increment and select PersonId. Now the application knows that it has to use this field to determine the next PersonId.
   
4. Mark the PersonId as a protected value preventing the user from editing it after it has been generated. Set it to True.
   
5. All Business Rules for PersonId are set. Click on LastName to set the Business Rules for LastName.
   
6. We want all of our records to have a LastName, so double click on Required to set it to True.
7. Do the same for the FirstName. Select FirstName in the Columns panel and double click the Required field.
8. Do the same for City, because that’s also one of the Indexes.
9. Save the Data Dictionary by clicking the Save icon.
   
   

Person View

1. Click the Create New button.
   
2. Select the Web View Wizard. This will generate the view.
   
3. First step is to create a name for the view. In this Quickstart: oPersonView.
   
4. On the next step choose the Simple Form Web View. There is also the option Header/detail Web view, a more advanced option. For this Quickstart choose the Simple view.
5. Select Person as the main table for this view.
6. On the next step select the fields that will be used in the view. Click on the view that needs to be added and click Add. In this Quickstart select:
   - PersonId
   - LastName
   - FirstName
   
7. Ad a Tab page by clicking on the Tab page button. This will add a new Tab Container and the next fields will be on the first tab of that container.
8. Add the fields Address, Zip and City under that containter.
   
9. Add another Tab page and add Phone and Comment on the second tab.
   
10. On the next step change the name of the labels for a more logical name by double clicking the name:
    - First tab page: Address
    - Second tab page: Details
    - LastName into Last name
    - FirstName into First name
    
11. By clicking Adjust and Display a preview shows of what DataFlex will generate.
    
12. Finish the Wizard and it will generate the code.
13. The following is generated:
    - A view object including a Panel with several fields
    - The Data Dictionary
    
14. By clicking on the plus icon in front of oPersonView in the Code Explorer you can see the structure in detail.
    
15. Press F7, now the Designer pops up. With the designer the layout of the application can be changed.

Click on the items to resize them and place them next to each other. In this Quickstart we will make it look like this:

Run the application

1. Compile the application by clicking the Compile button or F8.
   
2. Since the browser window is still open, click on the browser and refresh the application.
3. Go to View in the menu, and the Persons view pops up.
   
4. Click on Persons, now the first person can be added. In this Quickstart we use:
   - PersonId: will be generated
   - Last name: Wibier
   - First name: Harm
   - Address: Lansinkesweg 4
   - Zip: 7553 AE
   - City: Hengelo
   
5. Save the record.
6. Clicking Next the record shows up. Also the PersonId is created with number 101, like entered earlier.
   

Generate the Look Up

1. Click Create New.
2. Select Web Lookup Wizard.
   
3. The wizard pops up.
4. Select the main table for the Look up. In this case Person – cPersonDataDictionary.
5. The names and file names will automatically be generated.
6. Select the fields, in this Quickstart:
   - PersonId
   - LastName
   - FirstName
   - City
   
7. Then, again, the labels can be changed. In this Quickstart we change:
   - FirstName to First name
   - LastName to Last name
8. Click Preview to see what it’s going to generate.
   
9. Click Next.
10. Now it’s asking to which fields it needs to assign this Lookup. It is assigned in the Data Dictionary. This will automatically show the Lookup on the specific fields on the form. We want to add it to:
    - PersonId
    - LastName
    - FirstName
    
11. Finish the wizard.
12. It will generate the Lookup.
13. Adjust the layout in the designer, the same way as we did with View.
    
14. Compile the application by clicking the Compile button or F8.
15. Go back to the browser, go to View, Persons.
16. The Lookups are added to the fields.
    
17. Clicking on the Lookup buttons will show the list of records:
    
18. By selecting a record the record will show on the screen.