Quickstart building a web application (desktop style)
Lesson 5: Creating the Media View
In this last lesson the Media View will be created.
- Define the Media Table. A relation between the Media and Person Table will be created. The Person Table is the Parent of the Media Table.
- Define the business rules on top of the Media Table. These are defined in the Data Dictionary. We’re going to add a validation table that allows you to select the media type from a list of specific types.
- Create the Media View, by using a template.
- Test the Media View.
- Create the lookup, the dialog that helps to easily select records.
Define the Media Table
- Click the Create New Table.
- Enter the Table Name: Media
- Add the following fields:
- MediaId, Numeric, 8,0
- PersonId, Numeric, 8,0
- Title, ASCII, 100,0
- Author, ASCII, 60,0
- Type, ASCII, 8,0
- PurchaseDate, Date, 6,0
- Price, Numeric, 4,2
![](/ContentData/628-Building%20a%20Web%20Application%205.1.PNG)
- Define the Relationships by clicking the Relationships tab.
- Click on Add Relationship.
![](/ContentData/629-Building%20a%20Web%20Application%205.2.PNG)
- Choose the table we want to relate to, in this case the Person table.
- Select the fields on both tables that will define the relation. The first is creating a relationship between the PersonId in Media and in Person.
![](/ContentData/630-Building%20a%20Web%20Application%205.3.PNG)
- Define the Index.
- Got to Indexes and click Add Index.
- Create a unique index for MediaId.
![](/ContentData/631-Building%20a%20Web%20Application%205.4.PNG)
- The second Index will be used for the relationship. Select PersonId and MediaId.
![](/ContentData/632-Building%20a%20Web%20Application%205.5.PNG)
- Create some Indexes to sort on, in this case:
- Title
- PersonId
- MediaId
![](/ContentData/633-Building%20a%20Web%20Application%205.6.PNG)
- The fourth Index contains also indexes to sort on:
- Author
- Title
- PersonId
- MediaId
![](/ContentData/634-Building%20a%20Web%20Application%205.7.PNG)
Create Data Dictionary
- The Studio already generated an empty Data Dictionary:
![](/ContentData/635-Building%20a%20Web%20Application%205.8.PNG)
- Select Auto Increment and choose Sysfile, MediaId:
![](/ContentData/636-Building%20a%20Web%20Application%205.9.PNG)
- Set Protect Vavlue to True by double clicking it:
![](/ContentData/637-Building%20a%20Web%20Application%205.10.PNG)
- In the left column select Title:
![](/ContentData/638-Building%20a%20Web%20Application%205.11.PNG)
- Mark as required:
![](/ContentData/639-Building%20a%20Web%20Application%205.12.PNG)
- Do the same for Author.
- Select Price:
![](/ContentData/640-Building%20a%20Web%20Application%205.13.PNG)
- For the Price select Mask Type and choose Mask_Currency_Window:
![](/ContentData/641-Building%20a%20Web%20Application%205.14.PNG)
- Next step is setting up Validation Objects. First select Type in the left column. Then select Validation Objects. Click on Add Validation Object:
![](/ContentData/642-Building%20a%20Web%20Application%205.15.PNG)
- Set the name to oMediaType and apply it to the Type column.
![](/ContentData/643-Building%20a%20Web%20Application%205.16.PNG)
- Enter the options that will be available for this field. In this Quickstart:
- CD
- DVD
- Book
- Mp3
- Other
![](/ContentData/644-Building%20a%20Web%20Application%205.17.PNG)
- We will make this Combo field as a pull down. Go back to the tab Columns.
![](/ContentData/645-Building%20a%20Web%20Application%205.18.PNG)
- Make sure the Type column is still selected. Go to Visual Control and select Combo.
![](/ContentData/646-Building%20a%20Web%20Application%205.19.PNG)
- Save the Data Dictionary.
Define the View
- Go to Create New and select the Web View.
![](/ContentData/647-Building%20a%20Web%20Application%205.20.PNG)
- Note: we don’t choose the Web View Wizard in this case, but the Web View Template. This is a bit simpler.
- Give the Object Name oMediaView and the caption Media.
![](/ContentData/648-Building%20a%20Web%20Application%205.21.PNG)
- It immediately generates a basic structure for the view.
- Previewing this, there is one example field.
![](/ContentData/649-Building%20a%20Web%20Application%205.22.PNG)
- Delete this example by right click and choosing Delete.
- To add a field again choose DDO Explorer and click on Add DDO.
![](/ContentData/650-Building%20a%20Web%20Application%205.23.PNG)
- Now the Data Dictionary needs to be chosen. In this case the Media data dictionary.
![](/ContentData/651-Building%20a%20Web%20Application%205.24.PNG)
- It immediately also adds the Person Data Dictionary because it’s the parent. Based on the relationship that’s defined earlier.
![](/ContentData/652-Building%20a%20Web%20Application%205.25.PNG)
- Selecting the DDO Column Selector we can select the fields we want on our view. In this case:
- MediaId
- PersonId
- Title
- Author
- Type
![](/ContentData/653-Building%20a%20Web%20Application%205.26.PNG)
- Select the fields and drag them to the View.
- Note that Type automatically became a Combo form.
![](/ContentData/654-Building%20a%20Web%20Application%205.27.PNG)
- In the previous list we didn’t select the PurchaseDate. To add the date go to Class Palette.
![](/ContentData/655-Building%20a%20Web%20Application%205.28.PNG)
- Select the cWebDataForm.
![](/ContentData/656-Building%20a%20Web%20Application%205.29.PNG)
- Drag the DateForm and drag it after the Type field.
![](/ContentData/657-Building%20a%20Web%20Application%205.30.PNG)
- Because it’s dragged from the Class Palette it needs to bind to the database field manually.
- Go to Properties, Binding.
![](/ContentData/658-Building%20a%20Web%20Application%205.31.PNG)
- Select the Data Source and select oMedia_DD, PurchaseDate.
![](/ContentData/659-Building%20a%20Web%20Application%205.32.PNG)
- In the Properties panel the Label can be changed. In this Quickstart we change it from dateform to Purchase date.
![](/ContentData/660-Building%20a%20Web%20Application%205.33.PNG)
- Go back to the View. The PersonId isn’t needed in this case. Right click it and choose Delete.
![](/ContentData/661-Building%20a%20Web%20Application%205.34.PNG)
- Now change the sizes and the order of the fields in the View. For this Quickstart we do it this way:
![](/ContentData/662-Building%20a%20Web%20Application%205.35.PNG)
- Note that we didn’t add any fields from our parent table. We’re going to add that later.
- Now we will add a Group.
- Select Web Containers, cWebGroup, from the Class Palette.
![](/ContentData/663-Building%20a%20Web%20Application%205.36.PNG)
- Drag it after the Price field.
![](/ContentData/664-Building%20a%20Web%20Application%205.37.PNG)