Back to Tutorials

Contents 1 Quote Of The Day 1.1 Related Resources 1.2 Design Considerations 1.2.1 GUI 1.2.2 Program Logic 2 Procedure 2.1 Create a New Solution and WSDL Project 2.2 Create a TypeLib 2.3 Add a Class to TypeLib: QOTD 2.4 Add Two Fields to the clsQOTD Class 2.5 Add a Function to the clsQOTD Class 2.6 Edit the doGetQuotes Function 2.7 Create the Form for the UI 2.8 Add the Controls to the Form 2.9 Run (Simulate) the Project

[edit] Quote Of The Day

This tutorial introduces you to Bungee Labs, a 100% on-demand service environment for developers and teams to efficiently create and instantly deploy rich Web applications. In this tutorial you'll create a simple application that uses a Web service to retrieve and display the "quote of the day" and the author's name.

Note You do not have to register or obtain credentials to use the Quote Of The Day webservice.

[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

[edit] GUI

The GUI is built on a form. The form will need the following controls:

• Button Used to initiate the function that calls the Web service
• MultilineLabel Used to display the quote of the day
• Label Used to display the author's name

[edit] Program Logic

For this tutorial, you'll create a solution that contains a TypeLib and a WSDL project. The TypeLib contains the main class (clsQOTD), which contains the following:

• Function: doGetQuotes (calls the Web service and returns the quote of the day and the author)
• Field: QuoteofTheDay quoteOfTheDayService
• Field: GetQuoteResponse quoteResponse (contains the response from the quote of the day service)
  • Field: string Author (contains the author's name as a string returned by the service)
  • Field: string QuoteOfTheDay (contains the quote of the day as a string returned by the service)
• Form: frmQOTD (contains the GUI elements for the application)

The WSDL project is the imported Web service.

The finished application will look like this:

[edit] Procedure

[edit] Create a New Solution and WSDL Project

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

• AppProject Creates a Web application
• TypeLib 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
• WSDL Creates a Web Service Definition Language (WSDL) project (for importing a Web service)
• StyleProject Creates a style sheet that can be applied to applications, forms, or controls
• ResourceProject Serves as the container of image and HTML resources for use in your applications

For more information on project types, see the Bungee documentation wiki.

1. Log in to Bungee.
   1. Note Pop-ups must be enabled in your browser.
2. In the Solution Toolbar, click the New Solution icon.
   
3. In the dialog box that's displayed, do the following:
   1. In Solution Name, type QuoteOfTheDay.
   2. Under Type, select WSDL.
   3. In Project Name, type QuoteOfTheDay.
   4. In WSDL URL, type http://www.swanandmokashi.com/HomePage/WebServices/QuoteOfTheDay.asmx?WSDL.
   5. Click OK.
      
4. The new WSDL project is shown in the Solution Explorer in a tree view.
   
5. Save your project by clicking the Save icon in the Solution Toolbar (as with any creative environment, you should save your work periodically--in this tutorial you'll be reminded to save your work at the end of each section).
   

[edit] Create a TypeLib

1. In the Solution Explorer, right-click on QuoteOfTheDay (the solution at the top level of the tree) and select Add Project (alternatively, you can click the Add Project icon in the Solution Toolbar (to the left of the Save icon).
   
2. In the dialog box that's displayed, do the following:
   1. For Type, select TypeLib.
   2. In Project Name, type QOTD
   3. Click OK.
3. Save your Project. The Solution Explorer shows your solution and two projects.
   

[edit] Add a Class to TypeLib: QOTD

Add the following class the to the QOTD project:

• clsQOTD
1. In the Solution Explorer, right-click TypeLib: QOTD and select Add Class (alternatively, you can select TypeLib: QOTD and click the Add Class button--first button on the left--at the top of the Solution Explorer).
2. The project is automatically expanded to display the class (by default, the name of a new class is Class).
   1. Tip If you expand the added class, you'll see the super class for the object.
   2. 
      
3. Select TypeLib: QOTD and note the contents of the Property Editor. Now select Class and note how the Property Editor updates to reflect the selected object.
4. In the Property Editor, locate the Name property. In the text box, change the name of the class to clsQOTD. To see the change take affect, press Tab or Enter, or click outside the text box.
5. Save your project.
   

[edit] Add Two Fields to the clsQOTD Class

Add the following fields to the clsQOTD class:

• QuoteofTheDay quoteOfTheDayService
• GetQuoteResponse quoteResponse
1. In the Solution Explorer, select clsQOTD.
2. At the top of the Solution Explorer, click the Add Field button (third from the left) twice. The new fields are shown in the Solution Detail.
3. In the Solution Detail, select one of the fields.
4. In the Property Editor, change the Name property to quoteOfTheDayService.
5. In the Property Editor, for Type, click the ellipsis button.
   1. In the dialog box that's displayed, click the Local tab, then expand WSDL: QuoteOfTheDay and select SoapClass: QuoteofTheDay.
   2. Click OK.
6. In the Solution Detail, select the other field.
7. In the Property Editor, change the Name property to quoteResponse.
8. In the Property Editor, for Type, click the ellipsis button.
   1. In the dialog box that's displayed, click the Local tab, then expand WSDL: QuoteOfTheDay and select Class: GetQuoteResponse.
   2. Click OK.
9. Save your Project.
   

[edit] Add a Function to the clsQOTD Class

Add the following function to the clsQOTD class:

• doGetQuotes
1. In the Solution Explorer, right-click clsQOTD and select Add Function (alternatively, you can select the clsQOTD class and click the Add Function button--first button on the left--at the top of the Solution Explorer).
2. The added function is displayed in the Solution Detail. By default, the name of the function is function
3. In the Property Editor, change the Name property to doGetQuotes.
4. Save your Project.
   

[edit] Edit the doGetQuotes Function

When you add a new function, it's "empty" until you edit it and add program statements. In this section you add a function call to the doGetQuotes function (the function call makes the call to get the "quote of the day" from the service).

1. In the Solution Detail, double-click doGetQuotes. The function opens in the Design Editor.
2. From the Toolbox, under Statements, drag call function ( ) into the Design Editor, under the open brace ({).
3. Select the function call just added.
4. In the Property Editor, click the ellipsis button next to Path.
   1. In the dialog box that's displayed, expand QuoteofTheDay quoteOfTheDayService and select SoapFunction: GetQuote.
   2. Click OK.
5. In the Property Editor, two parameters are shown under Parameters.
   1. Leave the first parameter <not set>.
   2. For [out] GetQuoteResponse, click the ellipsis button next to Path.
      1. In the dialog box that's displayed, select GetQuoteResponse quoteResponse.
      2. Click OK.
6. Save your Project.
   

[edit] Create the Form for the UI

In Bungee Builder, you build the UI by adding controls to forms. For this tutorial, your form will contain the following controls:

• Button (executes the function that initiates the call to the Web service)
• MultilineLabel (displays the quote of the day that's returned by the Web service)
• Label (displays the author's name that's returned by the Web service)
1. In the Solution Explorer, right-click clsQOTD and select Add Form. The new form is shown in the Solution Detail (by default, it has the name form).
2. When a form is added, it is automatically selected and the Property Editor updates to reflect the properties available for the form. In the Property Editor, locate the Name property and change the name of the form to frmQOTD (it isn't really necessary to change the name of the form here--in applications where there are several forms, changing the name is helpful in organizing forms).
   
3. In the Solution Detail, double-click frmQOTD. A blank, two-row by two-column form (400 pixels by 400 pixels) is displayed in the Design Editor and the Toolbox shows categories of controls. Click in the form (or in the dark area outside the form) to select the form. With the form selected, two types of form-editing controls appear on the rulers. The green buttons are the Edit Row and Edit Column buttons and let you add, delete, rows and columns, and change other settings. The gray row and column handles are for resizing the rows and columns.
   
4. Customize the form. Though there are many ways to design the UI, a vertical approach works well for this application. You'll create one column, with each of the three controls in its own row. The Button will be in the top row, the MultilineLabel (for the quote) below that, and the Label (for the author's name) at the bottom.
   1. Remove a column: To remove a column, select the form, click either of the green Edit Column buttons on the horizontal ruler, and select Remove Column. Click outside the menu to close it.
      
   2. Your form now has two rows and one column (200 pixels by 400 pixels).
      
   3. Add a row: To add a row, click the green Edit Row button near the middle of the vertical ruler and select Insert Above. Click outside the menu to close the menu.
      
   4. A row 40 pixels high is added to the top of the form.
      
      1. Tip The size of the form, when run, corresponds exactly to the size of the form you create. Consequently, you need to establish the size form you want displayed during the design phase (the form can also be stretched at run-time).
   5. Set and lock the column width to 400 pixels.
      1. Drag the gray column handle on the horizontal ruler to the right until the column width is 400.
      2. Click the Edit Column button on the horizontal ruler and select Locked. This setting keeps the column from changing size during the design phase. If you did not set the column to Locked, it would change width when the button is added to the top row.
   6. Set the height of the middle row to 115 pixels.
      1. Drag the gray row handle in the middle of the vertical ruler upward until the middle row is set to 115.
      2. Note The sizes of the top and bottom rows will be automatically set by the controls when you add them later.
   7. Your form is ready for the controls and should look like this:
      
5. Save your project.

[edit] Add the Controls to the Form

The final step is to add the following controls to the form:

• Button (binds to the function doGetQuotes)
• MultilineLabel (binds to the field string QuoteOfTheDay and displays the text of the quote of the day)
• Label (binds to the field string Author and displays the author's name)

The general procedure for adding controls is to select the object the control binds to in the Solution Detail, and then add the control from the Selection category of the Toolbox to the form by dragging-and-dropping. This automatically binds the control to the object.

1. In the Solution Detail, select doGetQuotes. The Toolbox updates with the controls appropriate for a function.
2. From the Toolbox, under Selection, drag Button into the first row of the form. The row automatically resizes to the height of the control.
   
3. In the Property Editor, for the Button Label property, type Quote Of The Day in the text box. This will be the label for the button. Press Tab or Enter or click outside the text box to update the button's label. 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.
   
4. At the top of the Property Editor, click Layout. Change the Width property to 120.
   
5. In the Solution Detail, expand GetQuoteResponse quoteResponse > Quotes GetQuoteResult and select string Author (note how the Toolbox updates the available controls in the Selection category).
6. From the Toolbox, under Selection, drag Label into bottom row of the form (the row automatically resizes to the height of the control).
   
7. In the Solution Detail, select string QuoteOfTheDay.
8. From the Toolbox, under Selection, drag MultilineLabel into the middle row of the form.
   
9. Save your project.
   1. Tip You can verify how a control is bound by holding the mouse cursor over a control. A ToolTip pops up showing the object to which the control is bound.

[edit] Run (Simulate) the Project

You can simulate running 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. In the Run Toolbar, click the Run icon.
   
2. Your project opens in a browser window. Click Quote of The Day to display the quote and the author. Your project, when run, will look something like this: