Quorum Programming 2

First things first, open Quorum Studio.

From the Windows start menu search for Quorum Studio and launch the app.

If you need to make the text bigger you can use the Ctrl + = shortcut to increase the size.  The Ctrl + - shortcut will decrease the size.

There is a Quorum Studio shortcut key info button at the top of this page.

Today, instead of a console app we're going to create a new forms app.

Select File from the main menu (alt+f) and then New Project (ctrl+n).  This will open up the New Project Dialog.

The make sure the General tab is selected in the dialog and select the App option.

In the Project Name text box enter a name like "Login" for this project.  Select the OK button at the bottom-right of the dialog.

Select the left-hand tool palette by clicking it or pressing ctrl+1.  Make sure the Projects tab is selected.
 

Expand your new project.  Inside the project you should see a SourceCode folder. 

Inside the SourceCode folder you should see the Main.quorum file.

Select the Main.quorum file to open it.   

Move the focus to the editor by clicking in the editor window or by pressing the ctrl+2 shortcut.

Since we selected an App project, the Main.quorum file should be populated with a few lines of code that matches the text shown below:

1. use Libraries.Interface.Forms.Form

2. use Libraries.Interface.Forms.Page

3. Form form

4. Page page = form:GetMainPage()

5. 
   

6. page:AddButton("Hi")

7. form:Display()

Let's examine this starter App code.

Start by studying the first two lines of the program.  They are nearly identical and only differ at their ends. These two lines tell the program that we're going to be using two classes from Quorum's Forms library.

The documentation for these two classes is provided on the Quorum Reference site and be found by follow these links for the Form class and the Page class.

The third line actually creates the form object in our program and names it "form".  

Notice that the class name starts with a capitol F and the object variable name starts with a lower case f.

The fourth line creates a page in our new form and names it "page".  Each form can contain multiple pages. The form:GetMainPage() portion of this line sets the page variable as the default page for our form.  The documentation for this action can be found here.

The sixth line adds a button to our default page that is labelled "Hi".  The documentation for this action can be found here.

The seventh line instructs the program to display the form to the user.

To run your program you can either click the green play button in the main toolbar over the editor window or press ctrl+r.

The build information for our program will be displayed in the Output palette.  You can navigate to it by clicking the palette in the bottom of the screen or by pressing ctrl+3.  If your form application has any errors, the error information will be shown in the error tab of this palette.

Since this default code does not contain errors, a new window should appear containing your form app.  In this window there should be a button that says "Hi".

Interact with your new form app.  When you click the button nothing should happen because we haven't told the program what to do when the button is pressed.

When you're done interacting with your form you can close the window and return to the editor.

Now we're going to start modifying the default form app to make our login page.  Update your code so it matches the listing below:

1. use Libraries.Interface.Forms.Form

2. use Libraries.Interface.Forms.Page

3. 
   

4. // Setup Login Form.

5. Form form

6. Page page = form:GetMainPage()

7. page:AddBanner("Secret CIA Server of Doom")

8. 
   

9. // Add button to Form.

10. page:AddButton("Hi")

11. 
    

12. form:Display()

Let's look at the new lines we've added.  Lines 3 and 4 are new.  Line 3 is a blank line used to separate the section of the code that introduces libraries and the section of the code that builds the form components.

Line 4 is a special kind of line called a comment.  You can tell it is a comment because it starts with a double forward slash.  This line will be ignored by the compiler and is just a descriptive note for people reading the code.  We added the comment to remind us what the following section of code does.  You can learn more about comments on the Quorum reference site with this link.

Line 7 is new.  It adds a banner component to the page and provides some fun text to display in the banner.  You can find the documentation for banner components by following this link.

Lastly, line 9 is new.  This line adds another comment to the code to remind us that the following section deals with adding a button to our form.

To run your modified app you can either click the green play button in the main toolbar over the editor window or press ctrl+r.

Once again, the build information for our program will be displayed in the Output palette.  You can navigate to it by clicking the palette in the bottom of the screen or by pressing ctrl+3.  If your form application has any errors, the error information will be shown in the error tab of this palette.  You'll have to fix the errors before you can continue with running your app.

If your app compiles correctly, then a new window should appear.  You'll notice that it now has a banner at the top of the form that reads "Secret CIA Server of Doom".

Once you're done examining your form, close the window and return to the code editor.

Now we're going to add a new component to our login form that will accept a username.  

The first two lines of your program introduce the libraries that it will be using.  Those lines should look like:

use Libraries.Interface.Forms.Form

use Libraries.Interface.Forms.Page

We're need to add a third library so that we can use the TextField component.  TextField components provide a textbox that we place on our form that allows users to enter information.  The Quorum documentation for the TextField component can be found by following this link.

Update your library section so that it looks like this:

use Libraries.Interface.Forms.Form

use Libraries.Interface.Forms.Page

use Libraries.Interface.Controls.TextField

Next find the portion of your program that sets up the login form.  It should start on line 5 and look like this:

// Setup Login Form.

Form form

Page page = form:GetMainPage()

page:AddBanner("Secret CIA Server of Doom")

Update this section so it looks like the code below.  The last to lines are new and need to be inserted:

// Setup Login Form.

Form form

Page page = form:GetMainPage()

page:AddBanner("Secret CIA Server of Doom")

page:AddLabel("Username")

TextField username = page:AddTextField("Username")

Line 9 adds a Label component to our form.  This component is used to tell the user what information they are expected to enter into our TextField.  You can see on line 9 that we've set the label to display the text "Username".  Documentation on the Label component can be found at this link.

Line 10 adds a TextField component to our form.  The line creates a TextField named "username" and adds it to our page.  Documentation on the TextField component can be found at this link.

After you've made these changes your code should match the listing below:

1. use Libraries.Interface.Forms.Form

2. use Libraries.Interface.Forms.Page

3. use Libraries.Interface.Controls.TextField

4. 
   

5. // Setup Login Form.

6. Form form

7. Page page = form:GetMainPage()

8. page:AddBanner("Secret CIA Server of Doom")

9. page:AddLabel("Username")

10. TextField username = page:AddTextField("Username")

11. 
    

12. // Add button to Form.

13. page:AddButton("Hi")

14. 
    

15. form:Display()

To run the app again to check out your new TextField.  Either click the green play button in the main toolbar over the editor window or press ctrl+r.

Make sure your app built successfully by checking the output in palette in the bottom of Quorum Studio or by pressing ctrl+3.  If your form application has any errors, the error information will be shown in the error tab of this palette.  You'll have to fix the errors before you can continue with running your app.

If your app compiles correctly, then a new window should appear.  It will have a TextField labeled Username under the banner.

Try entering text into your TextField.  Once you're satisfied it works close the window and return to the code editor.

Next we're going to add another TextField to our login form so users have a place to enter their passwords.  Update your program so it matches the listing below:

Lines 9 and 10 of your program ought to looks like this:

page:AddLabel("Username")

TextField username = page:AddTextField("Username")

Insert the two lines shown below directly after line 10.

page:AddLabel("Password")

TextField password = page:AddTextField("Password")

The new line 11 adds another label to our form and sets the text to "Password".  

The new line 12 adds another TextField component to our form named password.

After you've made this change your code should match the listing below:

1. use Libraries.Interface.Forms.Form

2. use Libraries.Interface.Forms.Page

3. use Libraries.Interface.Controls.TextField

4. 
   

5. // Setup Login Form.

6. Form form

7. Page page = form:GetMainPage()

8. page:AddBanner("Secret CIA Server of Doom")

9. page:AddLabel("Username")

10. TextField username = page:AddTextField("Username")

11. page:AddLabel("Password")

12. TextField password = page:AddTextField("Password")

13. 
    

14. // Add button to Form.

15. page:AddButton("Hi")

16. 
    

17. form:Display()

Run the app again to check out our new password TextField.  Either click the green play button in the main toolbar over the editor window or press ctrl+r.

Make sure your app built successfully by checking the output in palette in the bottom of the screen or by pressing ctrl+3.  If your form application has any errors, the error information will be shown in the error tab of this palette.  You'll have to fix the errors before you can continue with running your app.

If your app compiles correctly, then a new window should appear.  It will now have two TextFields labeled Username and Password. 

Try entering text into both of the TextFields.  

Once you're satisfied with your examination, close the window and return to the code editor.

Lastly, we need to change what the text on our login button says.  Currently the button says "Hi", but instead we'd like it to say "Login".

To do this you need to search for the line of code that adds the button to the form.  It should be on line 15 and looks like this:

page:AddButton("Hi")

Alter the line so it looks like this:

page:AddButton("Login")

Run your app one last time to bask in the glory of your login user interface.

Today we created a new Quorum form app.  By altering the default form app code we built out the user interface necessary to collect the username and password information you'd see on a typical login page.

While we can enter information into our TextField the app doesn't actually do anything with that information... yet.  Tomorrow we'll add even more code to add that behavior to the app.