Goal: Introduce you to using Bungee Builder, the Bungee Connect on-demand IDE, for developing and deploying software

Result: After building and deploying a Hello World application to the public Internet, you can deploy applications with Bungee Connect.

This tutorial is the first of three tutorials that comprise the "Bungee Essentials" tutorial series.

Contents 1 Objectives 2 Prerequisites 3 Overview 4 Part 1: Design and Simulate the Application 4.1 Create a New Solution and Project 4.2 Add a Class to your Project 4.3 Add a Field to your Class 4.4 Add a Form to your Class 4.5 Design your Form 4.6 Run (Simulate/Test) your Project 5 Part 2: Build and Deploy Your Application 5.1 Add a Page to your AppProject 5.2 Edit the Page 5.3 Add the Form to the Page 5.4 Set the Main Page for Application Property 5.5 Check in the Solution 5.6 Post your Application 5.7 Deploy your Application 6 Summary 7 What Next? 8 Further Reference 9 Report Your Speed

[edit] Objectives

By completing this tutorial, you will:

• Learn the high-level steps of managing applications
• Learn the basics about how to design, build, and deploy an application
• Familiarize yourself with the Bungee Connect environment

[edit] Prerequisites

Before starting this tutorial, we recommend reviewing the following:

• Video: Intro to Bungee Concepts (4:45)
  • Explains the major concepts of creating a Bungee-powered application, including the relationship between solutions and projects, and the different project types (AppProject, TypLib, WSDL, StyleProject, and ResourceProject)

• Video: Intro to Bungee Builder (3:15)
  • Provides an orientation to Bungee Builder, including the names of the different functional areas of the the IDE interface
  • Alternately, you can read the related article "Introduction to Bungee Builder"
• Print the Bungee Builder Layout image to use as quick reference while doing the tutorial.
• If you get stuck at any point in the tutorial, post a question in the Bungee Connect Developer Network (BCDN) Forums thread for this tutorial.

[edit] Overview

The tutorial comprises two parts.

1. In Part 1, you design an extremely simple application using Bungee Builder, and then learn how to simulate your application. The application uses a TypLib project type, containing a single class, with one field, one form, two controls, and no custom program logic. The user interface is a form with a simple TextEdit box and a Label. When a user enters some text, the text gets displayed directly below the TextEdit box on the Label. You can test the application by clicking here or on the screenshot at right.
   1. Note TypeLibs are the primary project type used in Bungee Connect. You use TypeLibs as containers for the classes that you define. You can use more than one TypeLib to logically group related classes.
2. In Part 2, you build and deploy the 1.0 release of your application. This requires you to check in the application's components (the development phase is now complete), then place the application in the Staging Depot. From there, you move the application into Production and deploy it as a live web application. Once deployed, you can run your application from any supported web browser with an Internet connection.

[edit] Part 1: Design and Simulate the Application

Estimated Time to Complete: ~4 minutes

In this section, you begin working with Bungee Builder. You create a solution, containing a project (of type TypLib). The project acts as a container for the components of your application. In the project, you create a class, then add a field and a form, including two interface controls. Finally, you test the functionality of the user interface that you have created.

The resulting interface has just two controls, both bound to the same field. The first is a TextEdit control and the second is a Label control; the user enters text into the TextEdit control and then sees the text in the Label control.

[edit] Create a New Solution and Project

1. In the Solution toolbar, click the New Solution icon.
   
2. In the dialog box that's displayed, do the following:
   1. In Design Group, select the Design Group where you would like to create the Solution.
   2. In Solution Name, type Hello_Bungee_Connect.
   3. Under Choose the Projects you would like to include in your new Solution, TypeLib Project and App Project are already selected. 
   4. Click Next.
      
3. In the next pane of the wizard, do the following:
   1. Under Name, type Main.
   2. Click Next.
4. In the next pane of the wizard, do the following:
   1. Under Name, type HelloApplication.
   2. Click Done.
      

[edit] Add a Class to your Project

1. In the Solution Explorer, right-click on Main and select Add Class. The Add Class Wizard is displayed.
   
2. In Class Name, type HelloBungeeConnect (leave the remaining settings at their default values). Click OK.
3. Click the + next to Main to expand the project.
4. Click on HelloBungeeConnect to select it.

[edit] Add a Field to your Class

1. In the Solution Explorer, right-click on the HelloBungeeConnect 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.
   

[edit] Add a Form to your Class

1. In the Solution Explorer, right-click on the HelloBungeeConnect class and select Add Form. The Add Form Wizard is displayed.
   
2. Leave all settings at their default values. Click OK.
   

[edit] Design your Form

1. In the Solution Detail, double-click the form Default to open it in the design pane. Click the dark gray area just 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 or delete rows and columns and change other settings. The gray row and column handles are for resizing the rows and columns.
2. Your form needs only one column; click the green Edit Column button at the right end of the horizontal ruler and select Remove Column.
3. Now, to add the controls to the form, in the Solution Detail select string text.
4. 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 bound to the field string text. You can verify this by hovering your mouse over the control. A tooltip appears displaying the path of the control. The arrow button at the top right of the control shoul also be green. If the arrow is red, or the path is empty, you can bind the control to the text string using the Path property (on the Behavior tab of the Property Editor). You can make this check on any control you add, or if the interaction you expect does not occur.

5. 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.
6. Save your solution (click the floppy icon in the Solution toolbar).
   

[edit] 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 below.
   

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.
• You did not have to create any program logic in the interface in order to link the two controls on your form. Because the two controls are bound to the same field, when you change the value of the field, updates happen dynamically. As you continue to learn development with Bungee Connect, this paradigm becomes one of the most powerful aspects of the system. Further tutorials, articles, and documentation show more about how Bungee Connect modifies the traditional relationship between the View and the Model of an application.

[edit] Part 2: Build and Deploy Your Application

Estimated Time to Complete: ~6 minutes

To deploy your application on the Internet, you need to do a few more steps. In the following procedure, you add a page to your AppProject and then assign a default form to it. The default form displays when your application first runs. Next, you need to check in your application from your account in Bungee Builder, and move it into the Staging Depot. From there, you move the application into Production, and then Deploy it. When you deploy your application, you assign it a version number, and the system assigns it a live Internet URL.

[edit] Add a Page to your AppProject

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

[edit] Edit the Page

The page will display the form you just built, so it needs only one cell. Remove one row and one column so the form takes up the entire page.

1. In the Solution Explorer, double-click the HelloBCApp page to open it in the design editor.
2. Use the green Edit Row and Edit Column button to delete one row and one column. You should be left with a single cell when finished
   

[edit] Add the Form to the Page

Add the form you just created to this page.

1. In the Solution Explorer, select the class (HelloBungeeConnect).
2. From the Solution Detail, drag the form (Default) and drop it onto the page in the Design Editor.
3. Save your solution (click the floppy icon in the Solution toolbar).

[edit] Set the Main Page for Application Property

Set the page you just added as the default page for the application.

1. In the Solution Explorer, select HelloApplication.
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: HelloBCApp. Click OK.

[edit] Check in the Solution

Prior to deployment, everything must be checked into the depot. Checking in solutions, or their individual components, allows you to coordinate application production among multiple developers in a DesignGroup.

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

[edit] Post your Application

In order to deploy your application, it must be posted to the Production datastore. Posting copies the entire solution from the depot to the Production datastore, with a name and version number you provide.

1. At the top of Bungee Builder, click the Staging tab.
2. Under Depot, expand the DesignGroup that contains your application, expand the solution (Solution: Hello_Bungee_Connect), and then select AppProject: HelloApplication.
3. Click Post.
4. If the Software Posting Agreement is displayed, read the agreement, select the I Accept option, and click Close.
5. In the dialog box that's displayed,
   1. In Application Name, type a name for the application (such as HelloBungeeConnect). The application name cannot contain spaces.
   2. In Version, type a version number for the posted application (such as 1.0).
   3. Click OK.

Note Over the life of your applications, you can post multiple versions to Production. This allows you to do beta testing of new versions, and to upgrade your applications to a newer version. The ability to post multiple versions also allows you to fall back to a previous version in the event that you discover that a newly upgraded application has some kind of showstopper defect.

[edit] Deploy your Application

With the application posted to the Production datastore, you can deploy it and make it available to end users.

1. Under Production, expand the DesignGroup that contains your application, expand the AppProject (HelloApplication), and then select the version you want to deploy (HelloBungeeConnect (Version: 1.0)).
   • Note There is currently a minor defect in the Production component of Bungee Connect that may prevent your Application from appearing in the Design Group 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.
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.
   1. In Deployment Name, type the name of the deployed application (if you want to change it from the default). Click OK.
6. Under Deployments, select HelloBungeeConnect (or the name you specified in Step 5a).
7. In the bottom section of the page, expand Deployment Settings.
8. You can 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.

[edit] Summary

In this tutorial you have:

• Developed a basic understanding of the high-level steps of managing applications
• Learned how to design, simulate, build, and deploy an application in Bungee Builder
• Become familiar with the interfaces for managing your applications in Bungee Connect

[edit] What Next?

We recommend doing the following next steps to continue your learning of Bungee Connect:

• Continue on to Tutorial 2 of 3: Introduction to MVA.

[edit] Further Reference

The following resources will further increase your understanding of the concepts covered in this tutorial:

• Videos: If you did not watch the videos suggested in the Prerequisites section, doing so now will provide a richer understanding of the concepts that you explored in this tutorial.

Did we leave something out of this Bungee Connect Core Curriculum Tutorial? Get answers to questions, or make suggestions in the BCDN Forums thread for this tutorial.

[edit] Report Your Speed

If you'd like to compare your speed building and deploying Hello Bungee Connect to the speed of other developers, click here.