Tutorial 5
The Interaction Manager - Linking Search Panel, Result List and Columns
The first one of these tutorials shows you how to use the Interaction Manager to link the Data objects, like Search Panel and Result List, to each other. This tutorial assumes you have already completed Tutorials 1 and 2.
Step 1. Start a new JDesignerPro application by clicking on the New Application button in the Application Builder.
Step 2. Drag a Panel object from the Standard Objects group onto Main in Layout View. Select the Properties tab and change the new panel's Position to West.
Step 3. Drag a Result List object from the Data folder and drop it onto to Panel1.
- When the Data Wizard appears select the JDP Tutorial database and press Connect.
- Under Select Table, choose dbo_stores and leave join criteria blank, press Accept.
- Under Define Key choose stor_id as the Unique Key. Press Accept.
- Under Result List/Style, select "List" as the Type of structure for results.
- Check the first three column names and press Accept.
The code will now be created for the Result List and it will appear in the design area.
Step 4. Drag a Search Panel from the Data Objects folder to Panel1, as below:
- When the Data Wizard appears select the JDP Tutorial database and press Connect.
- Under Select Table, choose dbo_stores and leave join criteria blank, press Accept.
- Under Define Key choose stor_id as the Unique Key. Press Accept.
- Under Search Panel, check the first three column names and press Accept.
What that does: Selecting the columns in the Search Panel Wizard determines which columns your end-users will have as choices on which to search through the data.- Note that every time you link a Search Panel to a Result List they both must have the exact same Data Wizard settings with respect to primary and secondary tables and joins.
- After the Search Panel appears, click on Properties and change the position to North. It will appear above the Result List and to the left.
Step 5. Now press the Interaction Manager button. In the Interaction Manager open the ResultList1 tree under Add New Event and click on clearList() in the JDPSearchResults branch. This will be added under the ACTION_EVENT branch to the left.
Step 6. Click back on the Add New Event tab and select setFromWhereClause(String) under the ResutList1 tree. It will added below the clearList() event to the left.
Step 7. When the Parameters tab appears click on String. This will bring up a list of components to the right. Under the SearchPanel1 tree in the far right column choose getFromWhereClause(). The parameter will be moved to the middle column, completing the coding necessary for that action events method.
Step 8. Click back on the Add New Event tab. Select loadList() from the ResultList1 tree. It will be added to the action events at the left. You have now completed the necessary actions to cause a result from a search to populate the result List. The events happen in succession from top to bottom. Your Interaction Manager should look like the picture below:
Step 9. Click on the Save Application button and save this screen as SearchResults in the Users directory. Next click on the Preliminary Build button. Once compiled, the finished product will appear in the Preview screen. Do a search, such as Store Name begins with B. By choosing Store Name in the Order by pulldown you will see only stores whose names begin with B.
This next tutorial shows how to link the Result List to a set of data fields, the Columns object, and to populate them when a record is clicked in the Result list.
Step 1. Start with the SearchResults application built in the previous tutorial.
Step 2. Drag the Columns object from the Data Objects folder to the Main panel. When the Data Wizard appears select the JDP Tutorial database and press Connect. Under Select Table, choose dbo_stores and leave join criteria blank, press Accept. Under Define Key and choose stor_id as the Unique Key. Under Definition, simply press Accept.
Step 3. The JDesignerPro Columns Layout is a system to easily create professional forms. In the list on the left, click on the stor_id column. It will appear to the right with the label. Click on each of the column names through City. They will line up vertically.
Step 4. In the pull down below the Columns list, change the setting to Append to line. Then click the state and zip columns. Notice they will line up to the right of City with no label.
Step 5. Change the setting in the pull down to Add on a new line. Then click the last column in the list. This completes the column design. For more details about setting up the columns see Data Wizard - Columns.
Step 6. You will now see that JDesignerPro has created the necessary panels, labels and text fields to display the store record. You can change these as necessary or simply change the properties if required. Next select ResultList1 in the Layout View.
Step 7. Click the Interaction Manager button. Under Columns1, select Columns1Load. Click on String[] under Parameters. When the parameter tree at the far right appears, choose getSelectedKey() under ResultList1. This will add itself to the Parameter tree at the left, thereby completing the source creation for this action.
Step 8. The source you just created will populate the fields(Columns) with the data from the selected record in the Result List when an entry in the Result List is clicked.
Step 9. Now press the Preliminary Build button. When the application appears in Preview, do a search, then select one of the items in the Result List. The data from the selected record in the Result List will fill in the fields in the form. Note that we chose to use all the fields in the table for each component. Although the Search Panel and Result Lists data must be identical, we could have chosen a subset of the fields for the Columns component.