Back to Tutorials

Contents 1 Task List 1.1 Related Resources 1.2 How to use this Tutorial 1.3 Procedure

[edit] Task List

Tutorial : Simple Task List

This tutorial demonstrates the use of a collection to store multiple records.

The finished application will look like this:

[edit] Related Resources

• For a detailed introduction to Bungee Builder, see the Introduction to Bungee Builder tutorial, which combines a guided tour of Bungee Builder with the Hello World tutorial.
• For documentation on Bungee Builder, see the BCDN documentation wiki.

[edit] How to use this Tutorial

This tutorial is written for developers that are somewhat familiar with the basics of Bungee Builder. If you would like more detailed steps on working inside Bungee Builder, check out the Introduction to Bungee Builder and Hello World Tutorial before proceeding with this tutorial.

Throughout this tutorial, there are links to reference documentation on Bungee concepts:

• Most numbered steps link to the relevant document on how to accomplish the given task. Use these links for more information on how to perform a given task (for example, how to add a class to a project).
• Beneath the steps are links to the relevant concept documents. Use these links for conceptual information on the object being used (for example, what is a class?).

[edit] Procedure

1. Create a new solution and TypeLib

   (Concept: Understanding Solutions and Projects)

   1. Solution name: QuickTaskList
   2. Project type: TypeLib
   3. Project name: QuickTaskList
2. Add a class to hold the description of each the task (clsTask)

   (Concept: Understanding Classes)
   (Concept: Understanding Fields)
   (Concept: Understanding Forms)
   (Concept: Understanding Controls)

   The first object to add is the class for the task. This class holds the primary data and basic form for the project.

   1. Add a class to the project
      1. Name: clsTask
   2. Add three fields to the class
      1. string description (to hold the description of the task)
         1. Type: string (default)
      2. string dueDate (to hold the task's due date)
         1. Type: string (default)
      3. boolean complete (to be linked to a checkbox showing whether completed when a task object appears on a form)
         1. Type: boolean ((under TypeLib: QuickTaskList > Dependencies > Runtime > TypeLib: Types)
   3. Add a form for displaying tasks (frmTask)
      1. Name: frmTask
      2. Layout:
         1. Three columns, one row
      3. Add controls to the form
         1. Add a Checkbox

            Technical Note A Checkbox control can be bound to various types of data (numeric, sting, and boolean). When implementing a Checkbox control, you must set the values for the Value When Selected and Value When Not Checked properties. When binding a Checkbox control to a Boolean, the Value When Selected property is set to true by default. When the Checkbox control is bound to a numeric or string, the field type determines the set of allowable values. Be sure to set the Value and Toggle Value properties to the appropriate values. For enumerated fields, the Value and Toggle Value properties are set from an enumerated list

            1. Location: Left column
            2. Binding: boolean complete (in clsTask)
            3. Label: None (remove text from text box)
            4. Size: Reduce column width to just larger than the checkbox (22 pixels)
         2. Add a Label
            1. Location: Center column
            2. Binding: string description (in clsTask)
            3. Size: 120 pixels)
         3. Add a Label
            1. Location: Right Column
            2. Binding: string dueDate (in clsTask)
            3. Size: 40 pixels
                
3. Add a class for listing multiple task objects (clsTaskList)

   (Concept: Understanding Classes)
   (Concept: Understanding Fields)

   This class holds a collection of tasks. It uses the previously created class as the type.

   1. Add a class to the project
      1. Name: clsTaskList
   2. Add a field to the class
      1. Collection(clsTask): TaskList (collection of tasks)
         1. Type: clsTask
         2. Select Is Collection
4. Add the main class for the project (clsMain)

   (Concept: Understanding Classes)
   (Concept: Understanding Fields)
   (Concept: Understanding Bungee Logic)

   Now that you have created a class for an individual task, a class for storing multiple individual tasks, and a Datasource in which to store the list of individual tasks, you can create the main interface and program logic for a basic task list.

   1. Add a class to the project
      1. Name: clsMain
   2. Add a field to the class
      1. clsTaskList savedTaskList 
      2. Type: clsTaskList 
   3. Add a field to the class
      1. clsTask inputTask
      2. Type: clsTask
5. Create the primary user interface for the project

   (Concept: Understanding Forms)

   With the data structures for clsMain defined, you can create the primary user interface for the project.

   1. Add a form to the clsMain class
      1. Name: frmMain
      2. Layout
         1. One column, two rows
         2. Width: 400 pixels
         3. Height of top row: 55 pixels
   2. Add controls to the form
      1. Add a Grid control to top row
      2. Layout: Three columns, two rows
         1. Column widths:
            1. Column 1: 160 pixels
            2. Column 2: 160 pixels
            3. Column 3: 120 pixels
      3. Add a Label to Grid
         1. Location: Left column, top row
         2. Binding: None (drag Label from Text category)
         3. Text property: Description
      4. Add a Label  to Grid
         1. Location: Center column, top row
         2. Binding: None (drag Label from Text category)
         3. Text property: Due Date
      5. Add TextEdit control  to Grid
         1. Location: Left column, bottom row
         2. Binding: string description (under clsTask inputTask)
      6. Add TextEdit control  to Grid
         1. Location: Center column, bottom row
         2. Binding: string dueDate (under clsTask inputTask)
      7. Add a DynamicFormList control
         1. Location: Bottom row of form
         2. Binding: Collection(clsTask): TaskList (under clsTaskList savedTaskList) 
            
6. Implement a form adapter for displaying saved tasks

   (Concept: Understanding Adapters and Connections)

   To enable the DynamicFormList to display multiple saved tasks, you need to create a form adapter. The form adapter re-uses the clsTask frmTask form and displays it in the DynamicFormList for each individual task that the user has saved. To implement the form adapter, you create a the form adapter, set frmTask to use the Form Adapter, and then set the form adapter to act as the Element Form for the DynamicFormList. (A list is comprised of multiple list items, or elements, so a form list is comprised of form elements.)

   1. Add a form adapter to the project
      1. Name: TaskListFormAdapter (sets which form is displayed by the DynamicFormList control)
      2. Type: Form Adapter
   2. Add the form adapter to frmTask (in clsTask)
      1. For the Adapter List property, add FormAdapter: TaskListFormAdapter (under TypeLib: QuickTaskList)
   3. Set the Element Form Adapter for the DynamicFormList control (on frmMain in clsMain)
      1. For the Element Form property (under Adapter), add FormAdapter: TaskListFormAdapter (under TypeLib: QuickTaskList)
7. Create a function in the clsMain class for adding tasks

   (Concept: Understanding Functions)

   You now need to create a function that adds data from the inputTask field to the clsTaskList (and thereby stores it in clsTaskList DataSource). After adding each inputTask field into the task list, you want to create a new inputTask that is empty and ready to receive input for another task.

   1. Add a function
      1. Name: addTask (writes the tasks to the datasource and then clears the input fields)
   2. Edit public addTask
      1. Add call function ()
         1.  For Function Path:
            1. Type: Path
            2. Select Function: add (under clsTaskList savedTaskList > Collection(clsTask): TaskList)
         2. Parameter
            1. Type: Path
            2. Select clsTask inputTask
      2. Add assignment
         1. Left side:
            1. Type: Path
            2. Select clsTask inputTask
         2. Right side:
            1. Type: Object

            2. Set new object:

               1. Set boolean complete to Data
               2. Set string description to Data
               3. Set string dueDate to Data 
                  
   3. Add a button to call the function
      1. Form: frmMain
      2. Location: Right column, bottom row of Grid
      3. Binding: addTask
      4. Button Label property: Add Task
         
8.   Run the form

   (Concept: Understanding Simulate)

   1. Add several tasks to your project. Mark some tasks as complete.
   2. Close your running project and immediately re-run it. The items previously added (and whether they're marked as complete) will not be displayed. It was lost when you closed the previous session. To persist data across sessions requires a datasource. If you would like to try this project with persistent data, we recommend trying the  Task_List with Datasource tutorial.