copyright 2007, information builders. slide 1 enhancing maintain applications with html mark derwin...

Copyright 2007, Information Builders. Slide 1

Enhancing Maintain Applications with HTML

Mark Derwin and Mark RawlsInformation Builders


Presentation Information

Authors: Mark Derwin and Mark RawlsCompany: Information BuildersPresentation Title: Enhancing Maintain Applications with

HTMLPresentation Abstract: Deployed Maintain forms are

displayed as DHTML. You can enhance objects, like the HTMLTable, by adding simple HTML commands to your code. This lab shows you how.


Enhancing Maintain Applications with HTMLCreating a New Project

Right-click on Projects on localhost and select New Project… Enter HTMLTable and Click Next >



The Movies Master and FOCUS files are already included in this directory so we don’t need to add any files.

Click Finish



Double click on the Master Files folder under HTMLTable to display Master files Highlight Movies.foc and Movies.Mas Click on the Icon with the + to include to files into the project



Right-click on the Maintain Files Folder and select New > Select Maintain Procedure

Name it LAB1 and click Open


Enhancing Maintain Applications with HTMLInside the MDE

MAINTAIN – All Maintains start with the word MAINTAIN in upper case END – All Maintains end with the word END in upper case All other commands can be mixed case Use -*, $$, $* *$ for comments


Enhancing Maintain Applications with HTMLAdding a Data Source

Right-click on LAB1 and select Use data sources… Double-click on movies to move it from Available data to Data sources to use

You can use up to 15 data sources per procedure Click OK Notice that the MAINTAIN command line now contains the file name


Enhancing Maintain Applications with HTMLLoading the Stack

A stack is an array containing database or computed fields Columns are fields and rows are data Reads Master File to know field names, formats, lengths and position

Load up a stack with the NEXT command We are loading 10 records into a stack named STK

Click Save


Enhancing Maintain Applications with HTMLCreating a Form

Expand the LAB1 folder Expand the Forms folder Double-click on Form1 to display the form Maximize the form


Enhancing Maintain Applications with HTMLAdding an HTML Table

Select the HTML Table object from the Control Palette Click on the upper left corner of the form, drag the cursor to the right side

of the form to create a rectangle. Select Stk and move over: Moviecode, Title and Category Click OK


Enhancing Maintain Applications with HTMLRunning the Application

Save and Run Right-click on LAB1 and select Run Procedure Once Deployment is successful, click Close



Click X to return to the MDE If code is not displayed, double-click on LAB1


Enhancing Maintain Applications with HTMLAdding a Checkbox

Add a Checkbox to an HTMLTable to allow the user to select a row

Use HTML Tags Input Type: CheckBox Name: Must be unique for each row Value: 1 or blank. You can change retrieval value

Use Form.GetHTMLField to retrieve the values from the HTMLTable.

You cannot resort this stack after you create the Checkbox


Enhancing Maintain Applications with HTMLEnhancing the Code

Create a cbox field in STK for every row in the stack – Stk.Foccount Give each check box a unique name – Concatenate counter to ‘check’ If checked, the returned value is 1. That can be changed Create GetData case to retrieve selections Create Sel field to retrieve values from HTMLTable – Uses GetHTMLField

Save!


Enhancing Maintain Applications with HTMLEditing the HTML Table

Double-click on Form1 to display the form Double-click on the HTMLTable to display the columns Scroll down. Notice that cbox and Sel are on the column list



Add Cbox and Sel to the Table columns Use the arrows to make Cbox the first field Double-click on Cbox to edit the column



Change the Width of Cbox to 6. Change the Content type from:

0 – Text

To 1 – HTML Click OK to exit this screen Click OK to return to the form


Enhancing Maintain Applications with HTMLAdding a Button

Select the button object from the tools palette.

Draw a rectangle under the HTMLTable

Change the text to Process Click on the Events Tab for the

button Select the Click Event and the

Events screen opens


Enhancing Maintain Applications with HTMLAdding a Button

Button1 & Click are selected and Maintain function is clicked Expand the Functions folder Drag the GetData case from Functions into the Event Save and Run - Right-mouse click on LAB1 and select Run Procedure



To pre-check a value, use the keyword CHECKED

Compute Stk(I).cbox/a100 =

"<input type=checkbox name=check" || I | " CHECKED value=1>"; NOTE: Do not resort the stack when using this technique!


Enhancing Maintain Applications with HTMLAdding a List Box

Add a List Box to an HTMLTable to allow the user to select a value from a drop down list

Use HTML Tags Select Name: Must be unique for each row Value: Retrieval and display

Value can be static or dynamicRetrieve database values and assign them


You cannot resort this stack after you create the List Box



Double click on LAB1 Create a lbox field in Stk There are two values for

each entry: Retrieval and Display

This code leaves row 1 blank

Add a line in GetData NewRate contains the

selected value. SAVE Click on Form1 to display

the form. Double-click on the

HTMLTable



Add fields Lbox, Rating and Newrate to the columns Double-click on Title and change its width to 20. Click OK Double-click on Lbox to change its format



Change the width to 10 Change the content type to

1 – HTML Click OK to save Click OK to return to the Form Save and Run NOTE: Do not resort the stack

when using this technique!



When you process, all list boxes reset Retrieve all values before screen resets This example shows static values. You can substitute values for values in

the database and only show valid items per line. Like Cars by Country or Employees by Department.


Enhancing Maintain Applications with HTMLPresetting the List Box with Database Value

compute x1/10='';compute x2/10='';compute x3/10='';compute x4/10='';compute x5/10='';compute x6/10='';if stk(i).rating = ' ' then compute x1='selected';if stk(i).rating = 'G' then compute x2='selected';if stk(i).rating = 'NR' then compute x3='selected';if stk(i).rating = 'PG' then compute x4='selected';if stk(i).rating = 'G13' then compute x5='selected';if stk(i).rating = 'R' then compute x6='selected'; Compute Stk(I).lbox/a250 = "<select name=list " || I || ">" | " <option value=' ' " || x1 || "> </option> " | " <option value='G' " || x2 || "> G</option> " | " <option value='NR' " || x3 || "> NR</option> " | " <option value='PG' " || x4 || "> PG</option> " | " <option value='PG13'" || x5 || ">PG13</option> " | " <option value='R' " || x6 || "> R</option> " | " </select>"


Additional Techniques - Homework


Enhancing Maintain Applications with HTMLAdding an Input Field

Add an input field to an HTMLTable to allow the user to enter a value.

Use HTML Tags Input Type: Text Value: Blank, Static or dynamic Size: Display Length


You cannot resort this stack after you create the input field


Enhancing Maintain Applications with HTMLAdding Input Fields

Add a field for input VALUE can be blank, static or

dynamic SIZE is only kind of respected Edit HTMLTable and include

Inbox and Inval fields Edit Inbox column

Change width to 10 Change Content type to

1 – HTML Retrieve data in GetData NOTE: Do not resort the

stack when using this technique!


Enhancing Maintain Applications with HTMLAdding Input Fields

You can change the input fields to password fields by replacing the word text with password:

"<input type=password VALUE='' name=inputx " || I | " SIZE=10>";


Enhancing Maintain Applications with HTMLAdding a Radio Button

Add a Radio Button to an HTMLTable to allow the user to make a selection

Use HTML Tags Input Type: Radio Value: Retrieve and Display

Values can be blank, static or dynamicDynamic not recommended. Too many options

may get truncatedUse Form.GetHTMLField to retrieve the values from the

HTMLTable.You cannot resort this stack after you create the input field


Enhancing Maintain Applications with HTMLAdding Radio Buttons

Click on LAB1 for code Add rbutton and Rval to

STK for display and retrieval.

Double-click Form1 and add rbutton and Rval to the HTMLTable

Edit rbutton column Change width to 25 Change Content

Type to 1 – HTML Save and Run



Top Case Code

Compute Stk(i).rbutton/a250 =

"<input type=radio name=radiox " || I || " value='G'>G " |

"<input type=radio name=radiox " || I || " value='NR'>NR " |

"<input type=radio name=radiox " || I || " value='PG'>PG " |

"<input type=radio name=radiox " || I || " value='PG13'>PG13 " |

"<input type=radio name=radiox " || I || " value='R'>R "

Compute I=I+1;

Case GetData Code

Compute Stk(I).Rval/a4 = Form1.GetHTMLField('radiox' || I);



You can set a default checked entry by adding the word CHECKED to the desired row:

"<input type=radio name=radiox " || I || " value='NR' CHECKED>NR “

copyright 2007, information builders. slide 1 enhancing maintain applications with html mark derwin...

Documents

new projectright

new projectenter htmltable

master files folder

new projectthe movies

new projectdouble

available data

data sourceright

focus files