Tutorial : Hello World

Create New Solution and Projects

Solution   A solution functions as a top-level container for all code created in Bungee Connect. Within each solution, you create different types of Projects. Any developer who is a member of the DesignGroup in which you create the solution can access the solution.

1. In the Solution toolbar, click the New Solution icon.
   
2. In the Create a Solution dialog box, do the following:
   1. Use the default Design Group for the new Solution.
   2. For Solution Name, type Hello_World.
   3. Under Choose the Projects you would like to include in your new Solution, leave the checkboxes for TypeLib and AppProject selected. 
   4. Click Next.
      
3. In the dialog box that's displayed, do the following:

   TypeLib   A TypeLib (pronounced: type-LIBE) is one of several types of project that you can add to a solution. You use a TypeLib as a container for the classes that power application logic. You can organize your classes into functional groups by using more than one TypeLib.

   1. Under Name, type HelloTypeLib.
   2. Click Next.
   
4. In the dialog box that's displayed, do the following:

   App Project   App Projects are used for deploying a finished application to the web. App Projects typically contain at least one Page, which contains at least one Form.  When you deploy an App Project, the forms on the main page of an App Project  become the first user interface of your application.

   1. Under Name, type HelloApp.
   2. Click Done.
      

Add a Class to your TypeLib Project

Class   Bungee Connect is an Object-Oriented Programming (OOP) environment. You use classes to define the different types of objects used in your programs. As in other OOP-based systems, a class defines the abstract attributes (fields) and behaviors (functions) of an object. Unlike other OOP-based systems, classes in Bungee Connect include views (forms) and adapters (which you learn to apply later in your Bungee Initiation). Developers often use the term type interchangeably with class, which is why the primary container for classes is called a TypeLib--it's a library of type definitions, or classes.

1. In the Solution Explorer, right-click on HelloTypeLib and select Add Class. The Add Class Wizard is displayed.
   
2. In Class Name, type Main (leave the remaining settings at their default values). Click OK.

The Solution Explorer should now display your solution like this:

Add a Field to your Class

Field   Fields are one of four types of class members. Fields define the data that a class can store. A field can be based upon a primitive type (such as an integer or a string), or based on a complex type (defined by a class, either in your solution or in the Runtime Types in Bungee Connect). Other object-oriented programming languages may use a terms such as property or instance variable for field.

1. In the Solution Explorer, right-click on the Main class and select Add Field. The field is displayed in the Solution Detail (below the Solution Explorer). 
2. In the Property Editor, change the name of the field to text.

The Solution Explorer should now display your solution like this:

Add a Form to your Class

1. In the Solution Explorer, right-click on the Main class and select Add Form . The Add Form Wizard is displayed.
   

   Form   In Bungee Connect, forms are a similar concept as in other IDE frameworks, but they are implemented much differently than in other object-oriented programming (OOP) systems. In Bungee Connect, each form is a member of a class, just as fields and functions are. For many—especially experienced developers—this can be a challenging concept. However, this approach unlocks an enormous amount of power, as you will soon find out from subsequent learning modules.

   
2. Leave all settings at their default values. Click OK.

 The Solution Explorer should now display your solution like this:

Design your Form

Here is a preview of the form you will now design:

1. In the Solution Detail, double-click the form Default. This opens it in the Design Editor.
2. Click the dark gray background area just outside the form to select the form. This selects the form's top-level container, causing two types of form-editing controls to appear on the rulers. The green buttons are the Edit Row and Edit Column buttons, which let you add or delete rows and columns and change other settings. The gray row and column handles are for resizing the rows and columns.
3. Your form needs only one column; click the green Edit Column button at the right end of the horizontal ruler and select Remove Column. Click outside the menu to close it.
4. To add controls to the form, first select the text field in the Solution Detail. (If you do not do this step, you're app will have issues.)
5. From the Selection group in the Toolbox, drag a TextEdit control into the Design Editor and drop it into the top row of the form.

   Note Because you had already selected the field string text in the Solution Detail, the TextEdit control is automatically linked, or bound, to the field string text. This binding between a control and a field is a powerful aspect of the Bungee Connect platform that you will learn to use in increasingly more sophisticated ways as you work with Bungee Connect.

6. From the Selection group in the Toolbox, drag a Label control into the Design Editor and drop it into the bottom row of the form. (You still have the text field selected, right?)
7. Save your solution.

Run (Simulate/Test) your Project

1. To see your form in action, click the Run icon on the Run toolbar.
   
2. A new window is displayed with the form you just built. Type Hello Bungee Connect (or other text) into the TextEdit control and press Enter. The text is displayed in the Label control.
   

As you can see, you have now made a functional (albeit, not very interesting) end user interface. This gives you your first taste of how development is done in Bungee Builder. Although you have tested the user interface, it has yet to become a live Web application—that is the goal of Part 2.

Some items to note about what you have created so far:

• Bungee Builder provides the ability to simulate forms as you develop your applications, allowing you to test the effects of each new change to an application's functionality in real time. No compile is required.
• Updates between the TextEdit control and the Label do not require a full page refresh. Dynamic interface updates are an inherent property of applications created with Bungee Connect, which you will learn about in the video that follows this tutorial.
• Although you did not create any program logic to make a basic, interactive form, Bungee Connect does provide an advanced programming language for your applications. You will learn more about this in later modules.

Add a Page to your AppProject

Page   Pages exist only in App Projects, and are used by applications to host one or more forms. Whatever page is declared as an App Project's "Main Page for Application" is the page that is first displayed when an end user connects to your application.

1. In the Solution Explorer, right-click HelloApp and select Add Page.
   
2. In the Property Editor, change the Name of the page to MainPage.

The Solution Explorer should now display your solution like this:

Edit the Page

In order to display your form as a web application, you must first add it to a page in your App Project. To prepare the page for your form, you will remove one of the default rows.

1. In the Solution Explorer, double-click the MainPage page to open it in the Design Editor.
2. Use the green Edit Row button to delete one of the two rows from the page. You should be left with one row and two columns when finished.
   

Add the Form to the Page

1. In the Solution Explorer, select the class Main (in HelloTypeLib).
2. From the Solution Detail, drag the form Default and drop it onto the right-most cell of the MainPage page in the Design Editor. (The visual feedback for this is subtle: the page should now show the outline of the TextBox control from the Default form.)
3. Save your solution.

Set the Main Page for Application Property

1. In the Solution Explorer, select HelloApp.
2. In the Property Editor, for the Main Page for Application property, click the ellipsis button.
3. In the dialog box that's displayed, select Page: MainPage, then click OK

Check in the Solution

1. In the Solution Explorer, right-click on the solution Hello_Worldand select Check In.
2. Save your solution.

Post your Application

1. At the top of Bungee Builder, click the Staging tab.
2. Under Depot, expand the DesignGroup that contains your application, expand Solution: Hello_World, and then select AppProject: HelloApp.
3. Click Post.
4. If the Software Posting Agreement is displayed, read the agreement, select the I Accept option, and click Close. (Unless, of course, you choose not to. In that case, please let us know your concerns: info@bungeelabs.com.)
5. In the dialog box that is displayed,
   1. For Post Name, enter HelloWorld. (The application name cannot contain spaces.)
   2. For Version, enter the current date in this format: 20080420. (You can use any format, such as 1.0, but using the date has the advantage of giving you automatic incrementing, and quickly tells you when you last posted.)
   3. Click OK.

Deploy your Application

1. Under Production, expand the DesignGroup that contains your application, expand HelloApp, and then select HelloWorld (Version: 20080420).
   • Note There is currently a minor defect in the Production component of Bungee Connect that may prevent your Application from appearing in the DesignGroup after posting it from the Staging Depot. To force Production to refresh, click the Design tab, and then click the Staging tab again. You should now see a + symbol on the Design Group, allowing you to expand the design group and view the application you posted to Production.
2. Click Deploy.
3. If the Application Deployment Agreement is displayed, read the agreement, select the I Accept option, and click Close. (Again, should you choose not to, please let us know your concerns: info@bungeelabs.com.)
4. A dialog box is displayed with the Thresholds for Beta/Free Deploy applications.
   1. Read threshold information and click OK.
5. A dialog box is displayed. This dialog box lets you assign a name to the deployed application and set whether SSL (Secure Socket Layer) is allowed or required (for this application we're not going to need SSL). By default, the name used when the application was posted to Production is used as the Deployment Name. Click OK.
6. Under Deployments, select HelloWorld.
7. In the bottom section of the page, expand Deployment Settings.
8. You can now click on the URL to see your application live or copy the URL and email it to friends.

Congratulations! You have deployed your first web application with Bungee Connect. As you create more complex Bungee-powered applications, you will follow this the same procedure in order to deploy and update your applications as you manage them through their lifecycle.