TECHNICAL NOTE HOW TO USE LOOPERS Document: Kalipso_TechDocs_Loopers Revision: 1.0 Kalipso version: 4.0 20161231 Date: 16/02/2017 Author: RS
Contents 1. About... 3 2. Application Examples... 4 2.1. List with Loopers... 4 2.2. Dynamic Menu... 4 2.3. Scrolling Area... 4 3. Loopers in Kalipso... 5 3.1. Looper Add Line... 6 3.2. Looper Delete Line... 6 3.3. Get Selection... 6 3.4. Set Selection... 6 3.5. Get Item Count... 6 3.6. Event: Item Added... 6 4. Tutorial Demo App... 8 4.1. Listing with Loopers... 8 4.2. Dynamic Menu... 24 4.3. Scrollable Area... 30 Kalipso documentation How to Use Loopers 2
1. About Loopers are placeholders that can be used to duplicate, one or more times, all Controls contained inside the repeatable area. Unlike the Table Control, Loopers can be used to display content from database tables in other types of Controls like Text Boxes, Images or Labels and customize each Control properties individually from cell to cell, allowing for a more dynamic record presentation. Kalipso documentation How to Use Loopers 3
2. Application Examples 2.1. List with Loopers Regular Table Controls can only present columns with text content. A Looper can use various types Controls to show that content or change various properties like size, position, color, visibility. This is useful for listing images, shapes or other type of Controls. 2.2. Dynamic Menu With a Looper, it s possible to create dynamic menus by adding generic Controls and repeating them for each required menu item. This is useful when adding several Controls to perform similar or different Actions, like showing other Forms, display an overview state of a system or delivery batch, or when the menu needs to change according to the user. 2.3. Scrolling Area Scrolling areas allow to display content in a small space contained within a Control. When a Control, or group of Controls need to be always visible in the screen area, a Looper can be used to create a scrollable area anchored between those Controls. Kalipso documentation How to Use Loopers 4
3. Loopers in Kalipso Loopers are handled in many ways like Lists or Tables, with the added flexibility of field customization and positioning. They consist in a definable cell area that is repeatable vertically or horizontally, in one or more columns (or rows) inside the Looper area. THE CELL AREA IS WERE CONTROLS NEED TO BE PLACED Like a Table Control Column, a Control in a Looper can be linked to the database. The link can either be to the value or any other property. To create Scrollable areas, the Looper will need to have a cell area bigger than the Looper area to accommodate space for all the Controls needed inside. Kalipso documentation How to Use Loopers 5
If needed, enabling vertical or horizontal scroll in the Form to increase Looper area can help to better arrange Controls. After everything is defined, the Looper area can be reduced to its final size, creating a scrollable area inside. To enable that area, it s necessary to add a new line and set selection to that cell to allow user interaction. To dynamically Control a Looper, Kalipso provides the Actions described below. 3.1. Looper Add Line Adds a cell to the Looper. http://docs.sysdevmobile.com/kalipso40/looper_add_line.htm 3.2. Looper Delete Line Deletes a cell from the Looper. http://docs.sysdevmobile.com/kalipso40/looper_delete_line.htm 3.3. Get Selection Gets the current selected cell of the Looper. http://docs.sysdevmobile.com/kalipso40/action_127.htm 3.4. Set Selection Sets the selection to a specified cell of the Looper. http://docs.sysdevmobile.com/kalipso40/action_45.htm 3.5. Get Item Count Gets the number of items in the Looper. http://docs.sysdevmobile.com/kalipso40/action_128.htm 3.6. Event: Item Added This Event is triggered automatically when an item is added to the Looper. Kalipso documentation How to Use Loopers 6
http://docs.sysdevmobile.com/kalipso40/item_added.htm Kalipso documentation How to Use Loopers 7
4. Tutorial Demo App This is a simple Demo app showing how to use Loopers for creating customized list representations, dynamic menus for opening the created Forms and scrollable areas between Controls. 4.1. Listing with Loopers For this example, a list with countries will be displayed along with its flags and other data related to them. 1. Create a New Project, and choose for example, the theme <ksimpleblue>, because it already has template Forms that will be used during the tutorial (the included Controls can also be added manually). Kalipso documentation How to Use Loopers 8
2. Switch to the Tab Style and double-click the LISTVIEW template Form. This Template Form already has a Looper with an Image Control and some Labels. 3. Configure a button Click Event to close the Form with the Close Form Action. 4. Remove Controls that won t be used (AppPlusButton1, and TextBoxWithIconRight1). Kalipso documentation How to Use Loopers 9
5. Add a Label for the Subtitle, outside the Looper Area 6. Rename Labels: TEXT_LARGE1 to LblCoutry and change its text to Country; TEXT_MEDIUM1 to LblRegion and change its text to Region; TEXT_SMALL1 to LblDen and change its text to Population Density. Although the text property is being defined in these labels, only LblDen will maintain its text, while the other will be used to display other data. Kalipso documentation How to Use Loopers 10
7. Inside the Looper, Add another Label to display the Country s Population Density. 8. Now setup a database with records to be presented. For this demo, we ll just going to use an SQLite database that will be set in the Files to Send Folder. All files placed in that folder will be sent automatically to the device and placed in the application s folder, being accessible by the keyword PFOLDER. (files can be downloaded from here: http://bit.ly/2i6ushk) Kalipso documentation How to Use Loopers 11
8.1. Switch to the General Tree view and double-click on Database. 8.2. Click on Add Database Connection Profile, set the Profile s Name, change the type to SQLite, and set the Database s Name and Location. 8.3. Click on Add Table to open the Add Tables Wizard. Kalipso documentation How to Use Loopers 12
8.4. Click Next. 8.5. Select the tables to be used, and click Next. Kalipso documentation How to Use Loopers 13
8.6. Select all the columns to use in the Looper, Click Next. 8.7. Click No when requested for adding more tables. Kalipso documentation How to Use Loopers 14
8.8. Open Form Actions, add and configure the Set DB Profile Parameter to open the database file (PFOLDER). 9. Now Configure the Looper Properties: 9.1. Configure it to have only one Column with Vertical Orientation. Kalipso documentation How to Use Loopers 15
9.2. On the Content set it to link the Controls to Tables. 9.3. Because in the database provided, the information to display is placed in two tables, a relation between tables needs to be created. Kalipso documentation How to Use Loopers 16
9.4. Create Looper Links with the Database. Here, each Source from the database is linked to the desired Controls placed in the Looper. Display the Countries Name in the Lbl_Country Label. 9.5. The database has a column with filenames. Those filenames will be used to display images that are placed in the Files to Send Folder. 9.6. Display the IMAGE in the ImgCountry Image Control. Kalipso documentation How to Use Loopers 17
9.7. Display the Region name in the LblRegion Label. 9.8. Link the LblPopDensity to the POPULATION_DENSITY Column. 10. Finally, to display the data, the Looper Control needs to be Refreshed, so on the Form Actions add the Refresh Control Action on the Open Form Event. 10.1. Choose the Looper (ListView1) and leave the remaining options in their default. Kalipso documentation How to Use Loopers 18
11. (Extra) To exemplify how to change dynamically a Control property (font color), using the population_density. 11.1. Using the Event Item Added, when the value is over 100, its color will be presented in red. 11.1.1. In the Looper Actions, on the Event Item Added create an If statement to verify the numeric value of the Control; 11.1.2. Set the font color to red. Kalipso documentation How to Use Loopers 19
11.2. Here s a preview of the result: 11.3. Using SQL Advanced, when the value is over 200, its color will be presented in red. When the value is between 20 and 200, the color is set to Green, the rest will be in normal color. 11.3.1. In the Looper Properties->Content, Set Link Controls to SQL Advanced. 11.3.2. If using the Form created earlier, some information may already be present. 11.3.3. Update the Column Indexes. Kalipso documentation How to Use Loopers 20
11.3.4. Add another Looper Link for controlling the text color property from the same Label LblPopDensity, with Column Index 5. Kalipso documentation How to Use Loopers 21
11.3.5. In the Looper Properties->Content, insert the query: "SELECT IMAGE, COUNTRY_NAME, REGION_NAME, POPULATION_DENSITY, (CASE WHEN POPULATION_DENSITY >= '200' THEN '255000000' WHEN POPULATION_DENSITY < '200' AND POPULATION_DENSITY > '20' THEN '019222029' ELSE '0' END) FROM COUNTRIES LEFT OUTER JOIN REGIONS ON REGIONS.REGION_ID = COUNTRIES.REGION_ID" Kalipso also does the automatic conversion when switching from Tables to SQL Advanced. 11.3.6. And finally, comment the Actions added in the Event Item Added. Kalipso documentation How to Use Loopers 22
11.4. Here s a preview of the result: Kalipso documentation How to Use Loopers 23
4.2. Dynamic Menu 1. Switch to the Tab Style and double-click the MENU template Form: 2. This Form will be used to create a dynamic Menu to navigate between Forms, so set this as the First Form, 3. Remove Controls that won t be used in this example. Kalipso documentation How to Use Loopers 24
4. Configure a button Click Action to Close the Form. 5. Create a Text Button inside the Looper. Kalipso documentation How to Use Loopers 25
6. Each Control, in this example will show a different Form depending on its position in the Looper. They need to have a property that can be uniquely addressable, so that when a Button has a Click Event, the correct Form will be shown. In this example, each Button will have a different Hidden Value, to simplify the selection logic used ahead in the tutorial. The Hidden Value is a property that can be manipulated in the Controls that is hidden from the user. To enable that property, in the Looper Properties->Content, Set Link Controls to Nothing, because this menu will be created adding Controls manually. Add a Looper Link with the ButtonMenu as Target Control and Hidden Value as Target Property. Kalipso documentation How to Use Loopers 26
7. Add a link with the ButtonMenu as Target Control and Text as Target Property to be able to set each button text individually. 8. For each Form to be opened, a Looper Add Line Action is needed on Open Form Event. In Form Properties use the Action Looper Add Line, select the Looper Control, use the value 0 in the line field, set the Button Hidden Value to 1 and the Text to List View - Countries. Kalipso documentation How to Use Loopers 27
9. Next, the Button Click Event needs to be configured to open a different Form depending on its Hidden Value property. Using the Get Property Action and If-else statements the Button can be configured to open different Forms depending on its Hidden Value. Add the Action Get Property, selecting the ButtonMenu Control, using Looper Index 0 to retrieve its Hidden Value property to a temporary variable (to be used later). 10. If the Hidden Value assigned to TVAR(tvSel) is 1, open the LISTVIEW1 Form. Kalipso documentation How to Use Loopers 28
11. After the next example, a new Form is created, this menu will be updated to include another Looper Cell. Kalipso documentation How to Use Loopers 29
4.3. Scrollable Area 1. Switch to the Tab Style and double-click the DATAFORM template Form. 2. Open Form Properties and enable Horizontal and Vertical Scroll and adjust the Form to double the current dimensions. Kalipso documentation How to Use Loopers 30
3. Add a Looper on the right side. 4. Resize all Text Boxes and the Image Bar so they can fit in the Looper. Kalipso documentation How to Use Loopers 31
5. Select all the objects, except the top bar and drag them inside the Looper. 6. Drag the Looper to the desired position, in this case, below the blue menu bar and resize the Looper to fit in the original Form size. Kalipso documentation How to Use Loopers 32
7. Open the Form Properties and disable horizontal and vertical scrolling. 8. In the Form Actions, to show the content, add Looper Add Line. 9. And to make it active add Set Selection. Referencing a Control inside a Looper, Kalipso accesses the Control of the currently selected cell. Kalipso documentation How to Use Loopers 33
10. Configure the exit Button. 11. Finally, add another Button to the Looper in the MENU Form to show this Form. In the MENU1 Form Actions add Looper Add Line in the Open Form Event with a different Hidden Value 2 and with text Scrolling Space. 12. In the ButtonMenu Actions add an else if to show the DATAFORM1 if the Hidden Value that is stored in the temporary variable is 2. Kalipso documentation How to Use Loopers 34
13. Here s a preview: Kalipso documentation How to Use Loopers 35