Back to Tutorials

Contents 1 Temperature Conversion 1.1 Related Resources 1.2 Design Considerations 2 Procedure 2.1 Create a new Solution and Project 2.2 Add a Class to the Project 2.3 Add the fields and function to the Class 2.4 Rename and Change the Type of the Fields 2.5 Rename and Edit the Function 2.6 Create the Form for the UI 2.7 Run (Simulate) your Project 2.8 Refine the UI

[edit] Temperature Conversion

This tutorial is one in a series of tutorials that introduce you to Bungee Builder by leading you through the creation of simple applications. In this tutorial, you'll create a project that converts a temperature in Fahrenheit to Celsius.

[edit] Related Resources

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

[edit] Design Considerations

For the UI, you'll need the following controls:

• Textbox: Used to input the temperature in Fahrenheit
• Button: Used to run the function that converts Fahrenheit to Celsius
• Label: Used to display the temperature in Celsius after the function is run

Programmatically, you'll need the following:

• Two fields: One field holds the value of the Fahrenheit temperature (it's bound to the input Textbox control); the second field holds the output value of the function (the Celsius temperature) and is bound to the Label control.
• Function: The function converts the Fahrenheit temperature to Celsius using the formula, C = (F-32) * 5/9, where C is the temperature in Celsius and F is the temperature in Fahrenheit. The function is bound to the Button control.

The finished application will look like this:

[edit] Procedure

[edit] Create a new Solution and Project

The first task is to log in and create a solution in which you will create a project. Bungee supports five types of projects:

• TypeLib Project Creates a cord (a modular application that's stored in the Gallery and easily added to other applications) or creates a library that encapsulates a set of objects that can be used by other projects
• App Project Creates a Web application
• WSDL Project Creates a Web Service Definition Language (WSDL) project (for importing a Web service)
• Style Project Creates a style sheet that can be applied to applications, forms, or controls
• Resource Project Serves as the container of image resources for use in your applications

For more information on project types, see the Understanding Solutions and Projects.

For this tutorial, you create a solution and a TypeLib.

1. Log in to your Bungee Builder account.
   1. Note Pop-ups must be enabled in your browser.
2. In the Solution Toolbar, click the New Solution icon.
   
3. In the New Solution popup window, do the following:
   1. In Solution Name, type TempConversion.
   2. Click App Project to clear the checkbox.
   3. Click Next.
   4. Under Name, type TempConversion.
   5. Click Done.
       
4. In the Solution Explorer, your solution and project are shown in a tree.
   
5. Save your project. (click the Save icon on the left side of the toolbar).
   

[edit] Add a Class to the Project

Add a class to your project. The class holds the fields and functions for your project.

1. In the Solution Explorer, right-click on TempConversion and select Add Class (alternatively, you can select TypeLib: TempConversion and click the Add Class button--first button on the left--at the top of the Solution Explorer). The Add Class Wizard is displayed.
2. In Class Name, type TemConversionClass for the name of the class. 
   
3. Click OK. 
4. The project is automatically expanded to display the class.
   1. Tip If you expand the added class, you'll see the super class for the object.
5. Select TempConversion (the project) and note the contents of the Property Editor. Now select TempConversionClass and note how the Property Editor updates to reflect the selected object.
6. Save your project.

[edit] Add the fields and function to the Class

Now that you have created a class, add two fields (one for the input and one for the result) and one function (to do the calculation).

1. In the Solution Explorer, right-click TempConversionClass and select Add Field (alternatively, you can select TempConversionClass and click the Add Field button—third button from the left—at the top of the Solution Explorer).
2. The field (and its type—in this case string) is displayed in the Solution Detail (below the Solution Explorer). By default, the name of a new field is field.
   
3. When a field is added, it is automatically selected and the Property Editor updates to reflect the properties available for the field. Add another field by repeating Step 1 above. You should now see two fields in the Solution Detail.
4. In the Solution Explorer, right-click TempConversionClass again, but this time select Add Function (alternatively, you can select TempConversionClass and click the Add Function button—first button on the left--at the top of the Solution Explorer).
5. The Solution Detail now shows the two fields and the function.
   
6. Save your project.

[edit] Rename and Change the Type of the Fields

By default, new fields are of type string and have the name field. In this section you change the names and types of the fields. While the names are arbitrary, it's important to select the correct type for the type of data you plan on using in the field. In order to allow for fractional temperatures, the fields must accept decimals, so you will set the type for the fields to double.

1. Select the first field.
   
2. In the Property Editor, scroll down and change the Name property to Celsius. This field will hold the result of the calculation.
   
3. In the Property Editor, scroll down to the Type property and click the ellipsis button. This brings up a dialog box in which you can change the type for the field. In the bottom right pane, titled Primitive Types, there is a list of the primitive types available in the Builder. Select public double. Click OK. Note that, in the Solution Detail the type for the field changed to double.
   
4. Select the other field in the Solution Detail. Repeat Steps 2 and 3, but change the name to Fahrenheit instead of Celsius. This field will hold the value of the Fahrenheit temperature to be changed (entered by the user). The Solution Detail should now look like this:
   
5. Save your project.

[edit] Rename and Edit the Function

By default, the name of a new function is function. In this section you'll change the name of the function to Convert and edit the function so that it performs the calculation necessary to convert Fahrenheit to Celsius.

Note It really isn't necessary to change the name of the function—it's done in keeping with programming "best practices."

1. In the Solution Detail, select the function.
   
2. In the Property Editor, change the Name property to Convert. To update the name in the Solution Detail, press Tab or Enter, or click outside the text box.
3. In the Solution Detail, double-click Convert. This opens the function, which doesn't do anything yet, in the Design Editor.
   
4. In the Toolbox, under Statements, drag assignment into the Design Editor, below the open brace ({) of the function. The assignment statement will assign the result of the calculation to the Celsius field.
   
5. Assign the left side of the assignment to the Celsius field. In the Property Editor, click the ellipsis button on the To side.
   
6. A dialog box is displayed with the class you created. Select double Celsius. Click OK.
   
7. Now set the right-hand side of the assignment. This side needs to contain the formula for the conversion. Click the arrow in the drop-down box on the right side of the equal sign and select Expression.
   
8. In the text box next to Expression, type the formula for the temperature conversion: (Fahrenheit-32) * 5/9
   1. Note In the formula, Fahrenheit is the name of the field in which the Fahrenheit temperature is entered.
9. Click outside the Property Editor. In the Design Editor, the function now looks like this:
   2. Note The formula is shown in green text in the Design Editor (when it's not highlighted). If you type an invalid expression, the formula is displayed in red to indicate an error condition.
10. Save your project.

[edit] Create the Form for the UI

The programmatic part is finished. In this section, you create the UI with which the user interacts. The UI is created on a form. Add a form to the class, and then add controls (two text boxes and a button) to the form.

1. In the Solution Explorer, right-click on the TempConversionClass class and select Add Form (alternatively, you can select TempConversionClass and click the Add Form button—second button from the left—at the top of the Solution Explorer). The Add Form wizard is displayed.
   
2. In Form Name, type TempConversionForm and click OK. 
3. The new form is shown in the Solution Detail.
4. Double-click the new form. A two-row by two-column form is displayed in the Design Editor.
   
5. At this point, you need to decide how the UI will look. Your UI needs an input field for entering the temperature to be converted, a button to run the function, and another field to display the result of the calculation. For simplicity, you can use the form as is—the input field can go in the top row of the left column, the button in the top row of the right column, and the result field in the bottom row of the left column.
6. In the Solution Detail, select double Fahrenheit. From the Toolbox, under Selection, drag TextEdit into the top row, left column. The row automatically resizes to accommodate the control. 
    
   1. Note Because you selected double Fahrenheit before adding the control from Selection to the form, the control is automatically bound to double Fahrenheit (had you used a control from Common Controls, it would not automatically be bound to an object).
7. Add a Label to show the output of the calculation (in the Solution Detail, select double Celsius. From the Toolbox, under Selection, drag Label into the bottom row of the left column).
   1. Note You can verify what a control is bound to by holding the mouse cursor over the control. A ToolTip shows you to what the control is bound.
8. Your form should look like this:
   
9. In the Solution Detail, select Convert (like with the fields, by selecting the function before you drag a button into the form, it will already be automatically bound to the function).
10. From the Toolbox, under Selection, drag Button into the top row of the right column.
    
11. The label automatically assumes the name of the function (the default text in the Button Label property). To change the text of the button label, in the Property Editor, for the Button Label property, change Convert to Convert Temperature in the text box (press Tab or Enter, or click outside the Property Editor to update the button label in the Design Editor). Note that the text does not fit the button--the button's default width is 80 pixels. You need to change the width of the button.
    
12. At the top of the Property Editor, click Layout. Change the Width property to 130.
    
13. Save your project.
    

[edit] Run (Simulate) your Project

You can simulate running (test) your project from within Bungee Builder. To run a project, the main form must be displayed in the Design Editor (if no form is displayed in the Design Editor, the Run button is inactive).

1. Click the Run button (green arrow) in the Run Toolbar.
   
2. Your project opens in a browser window. Enter a temperature in the text box and click Convert Temperature. The temperature in Celsius is displayed in the label.
   

[edit] Refine the UI

In this section, to gain experience editing forms and using styles, you change the appearance of your project by adding a label with instructions for using the application.

1. Close the simulated form.
2. To put a label above the text box, you have to first add a row to the top of the form. If the Edit Row buttons are not visible on the rulers, click in the dark area around the form.
3. Click the Edit Row button in the middle of the vertical ruler and select Insert Above. Click outside of the menu to close it.
   
4. Remove the dividing line between the two columns by moving your mouse cursor over the line and clicking on the minus (-) sign).
   
5. Because you want a label that does not change value, drag Label from the Text category of the Toolbox to the left cell in the new top row.
   1. Note The Edit Bindings button is red, indicating that the control is not bound to a data element.
   2. 
      
6. In the Property Editor, scroll down to Text. In the text box, type Enter the temperature in Fahrenheit.
   
7. Save and run your project.
   
8. Now dress up the text a little. Close your simulated project.
9. In the Design Editor, select the the label in the top row.
10. At the top of the Property Editor, click Style. Scroll down and click the ellipsis button for the StyleSheet property.
    
11. In the dialog box that's displayed, select Locally Defined. This gives you control of the styles for the control. Select the checkbox next to Font and then click on Font. Now you can change the attributes of the label text.
    
12. For Color, type Red into the text box. Change Size to 18. For Weight, select bold from the drop-down list. Click OK.
    
13. Save and run your project.
    
14. For convenience, you can change the behavior of the button so that, after you enter a temperature to convert, you can press Enter instead of clicking the button. To make this change, in the Design Editor, select the button.
    1. At the top of the Property Editor, click Behavior.
    2. In the Property Editor, select Default.
15. Run your project and press Enter after entering a temperature.
16. There are many ways in which you can improve the UI. For example, you can add a label for the result, make the width of the input field more reasonable, and so forth. Save your project and experiment to learn about the various ways you can make changes to a form. You can always reopen your project and return to the point at which you last saved.