Quorum Programming 3

Open up Quorum Studio.  The application you were working on yesterday should still be loaded.

If you didn't finish the lab yesterday, you can catch up by copy-and-pasting the code listing below into your Main.quorum file.  To catch up, use this code to replace the contents of your current Main.quorum file.

Code listing:

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("Login")

16. 
    

17. form:Display()

We're going to start today by adding a new file to our project that is going to contain the behavior we want our login button to have.  Separating out our behavior into separate files is good programming practice, but the reasons why you want to do this are perhaps a bit in the weeds for this lab.  If you're interested in learning more you can check out this tutorial on the Quorum website.

To add a behavior file to your project make sure your project is selected in the left-hand palette by clicking it or pressing ctrl+1 and navigating to your project in the "Projects" tab.

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

In the "Name" textbox enter the name "LoginBehavior".  Make sure the Location textbox is set to the default "SourceCode\" location.  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 project.  Inside the project you should see a SourceCode folder.  Inside the SourceCode folder you should see the LoginBehavior.quorum file.

Select the LoginBehavior.quorum file to open it.

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

Right now your LoginBehavior file is completely empty.  Let's add some default code to it so we have a place to start working from.

Copy-and-paste the following code listing into your LoginBehavior file:

1. use Libraries.Interface.Forms.FormBehavior

2. use Libraries.Interface.Events.BehaviorEvent

3. 
   

4. class LoginBehavior is FormBehavior

5.     // Action triggered by button press.

6.     action Run(BehaviorEvent event)

7.         

8.         output "Login button pressed"

9.     end

10. end

After you have pasted the code into your file, save the file by pressing the save button on the main tool bar or by pressing ctrl+s.

This code provides us a template to build our custom button behavior in.

Lines 1 and 2 tell the compiler what libraries we'll be using in our behavior. You can see the libraries are related to form behavior and event behavior. 

Line 4 creates a new class.  In Quorum, classes are code structures that we can use to build custom reusable code.  If you're interested in learning more about classes you can explore this Quorum tutorial.  

Line 5 is a comment that informs us that the next section of code will handle button presses.

Line 6 introduces the Quorum action that we are going to trigger when our login button is pressed.

Line 8 is a simple output statement that will write "Login button pressed" to the console.  This works exactly like the "Hello World" output statement that we wrote on the first day of camp.  We're going to use it to test our program and make sure we've wired up our button correctly.

Now we need to modify the button in our Main.quorum file to use the new LoginBehavior we just created.

To do that select the Main.quorum tab in your code editor.

The first three lines of your program tells the compiler which libraries we're planning to use.  Add a forth library to that list so the first four lines of file look like this:

use Libraries.Interface.Forms.Form

use Libraries.Interface.Forms.Page

use Libraries.Interface.Controls.TextField

use Libraries.Interface.Controls.Button

Line 4 in the listing above adds a new library dealing with buttons to your program.  The documentation for the button component can be found here.

We also need to alter the section of code which adds the button to the form.  This section starts on a line with comment which should now be line 15 and looks like this:  

// Add button to Form.

page:AddButton("Login")

Replace these two lines with the following four lines:

// Add button to Form.

Button button = page:AddButton("Login")

LoginBehavior behavior

button:SetBehavior(behavior)

After you've made these two changes your new Main.quorum file listing should look like this:

1. use Libraries.Interface.Forms.Form

2. use Libraries.Interface.Forms.Page

3. use Libraries.Interface.Controls.TextField

4. use Libraries.Interface.Controls.Button

5. 
   

6. // Setup Login Form.

7. Form form

8. Page page = form:GetMainPage()

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

10. page:AddLabel("Username")

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

12. page:AddLabel("Password")

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

14. 
    

15. // Add button to Form.

16. Button button = page:AddButton("Login")

17. LoginBehavior behavior

18. button:SetBehavior(behavior)

19. 
    

20. form:Display()

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.  You'll need to fix the errors before you can continue with running your app.

If your app compiles correctly, then a new window should appear.

The app should look the same as it did yesterday.  However, if you click the Login button a couple of times and return to Quorum studio you should now see "Login button pressed" written in the Console tab of the Output palette. 

You should see "Login button pressed" output for each time you pressed the button.  This proves to us that we've wired up the behavior of our button correctly.  With that confidence we can now embark on adding more sophisticated behavior to the button.  

Close the app window and return to the code editor. 

Now we're going to start modifying the behavior template to customize the behavior for our login application.

Make sure the "LoginBehavior.qorum tab" is selected in the code editor.

We'll start by adding two additional libraries to the top of the file so that we can interact with the Page and TextFields on our form.  Your first two lines should look like:

use Libraries.Interface.Forms.FormBehavior

use Libraries.Interface.Events.BehaviorEvent

Add the libraries shown on the third and forth line listed below to your program:

use Libraries.Interface.Forms.FormBehavior

use Libraries.Interface.Events.BehaviorEvent

use Libraries.Interface.Forms.Page

use Libraries.Interface.Controls.TextField

Next, we'll update the action that occurs when the button is pressed so that it pulls information from the TextFields that we placed on our form.  To do that, locate the action code which looks like this:

// Action triggered by button press.

    action Run(BehaviorEvent event)

        output "Login button pressed"

    end

Alter the action by adding additional lines of code so that it now looks like this:

// Action triggered by button press.

    action Run(BehaviorEvent event)

        Page page = GetPage()

        TextField usernameField = page:GetTextField("Username")

        TextField passwordField = page:GetTextField("Password")

        output "Login button pressed"

        output "Username = " + usernameField:GetText()

        output "Password = " + passwordField:GetText()

    end

The new lines we added are explained after the full file listing with line numbers shown here:

1. use Libraries.Interface.Forms.FormBehavior

2. use Libraries.Interface.Events.BehaviorEvent

3. use Libraries.Interface.Forms.Page

4. use Libraries.Interface.Controls.TextField

5. 
   

6. class LoginBehavior is FormBehavior

7. // Action triggered by button press.

8.     action Run(BehaviorEvent event)

9.         Page page = GetPage()

10.         TextField usernameField = page:GetTextField("Username")

11.         TextField passwordField = page:GetTextField("Password")

12.         

13.         output "Login button pressed"

14.         output "Username = " + usernameField:GetText()

15.         output "Password = " + passwordField:GetText()

16.     end

17. end

Line 9 creates a new Page variable that is named "page" and gets a reference to our app's page.

Line 10 creates a new TextField variable and gets a reference to username TextField we added to our page.

Line 11 creates a new TextField variable and gets a reference to password TextField we added to our page.

Taken together these three lines allow our button behavior to access the information that the user enters on our login page.

Line 13 was already part of our behavior template and provides evidence on the Console tab that the button was actually pressed.

Line 14 outputs the text the user entered into the username TextField on the Console tab.

Line 15 outputs the text the user entered into the password TextField on the Console tab.

Taken together these three lines are writing information to the Console tab to convince us that our program is able to detect a button press and then collect the information the user has entered into the username and password TextFields.

Let's test our modified behavior to make sure the program works like we expect.  Testing often helps ensure that we haven't accidently introduced any errors.

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 need to fix the errors before you can continue with running your app.

If your app compiles correctly then a new window should appear.  

Enter some text into the Username and Password TextFields.   

Press the login button.  

Now return to Quorum Studio and check the Console tab of the Output palette to see if it has been updated after you pressed your login button.  You should see three new lines that indicate that the button was pressed and what the contents of your TextFields were.

If you don't see this information in the Console tab ask for help to correct your program.

Now that we're confident that the information we entered on our form is being passed to our behavior, it's time to do something with that login information.

To start, we're going to add some credentials to our code to compare against what is entered on the form.

Line 6 and 7 of your LoginBehavior.quorum file should look like this.

class LoginBehavior is FormBehavior

    // Action triggered by button press.

We're going to add three new lines between the line 6 and 7 so those lines now look like this:

class LoginBehavior is FormBehavior

    text myUsername = "Luggage"

    text myPassword = "1234"

    // Action triggered by button press.

The first two lines we added are text variables and the third is just a blank line.

The first variable is named "myUsername" and we're going to use it to store the correct username for the login form.  Note that the correct username has been set to "Luggage".

The second variable is named "myPassword" and stores the correct password.  Note that the password is set to "1234".  That's an easy to remember password, but a terrible password.  Get your act together Luggage.

In the action triggered by the button press section we have three output lines that should now start on line 16 and look like this:

        output "Login button pressed"

        output "Username = " + usernameField:GetText()

        output "Password = " + passwordField:GetText()

We are going to replace those three lines with the following lines:

        boolean userCorrect = false

        boolean passwordCorrect = false

        // Check to see if user can log in.

        if userCorrect and passwordCorrect

            output "Logged in as: " + usernameField:GetText()

        else

            output "Could not log you in. Did you forget your password?"

        end

The first two of these new lines introduce two new variables to our program.  These are boolean variables which means they only accept the values true and false.  

One variable is named "userCorrect" and the other is named "passwordCorrect".  We are using these two variables to keep track if the user has entered in the correct username and password.

You can see that we are setting both variables to false by default.

The other chunk of code we just added is a conditional statement which is a code structure the program uses to make decisions.  You can learn more about conditionals with this tutorial.

The conditional statment starts on line 20 with if and checks to see if both the usernameCorrect variable and the passwordCorrect variable are true.  Remember, both of these variables are booleans and can only be true or false.  If both are true, it runs the output on line 21 which indicates that the user has logged in.

The other half of the conditional statement is the else on line 22, which is what happens if the usernameCorrect and passwordCorrect variables are not both true.  In this case it runs the output on line 23 which prints out a message indicating the user is not logged in.

After those changes your entire LoginBehavior.quorum file should look like this:

1. use Libraries.Interface.Forms.FormBehavior

2. use Libraries.Interface.Events.BehaviorEvent

3. use Libraries.Interface.Forms.Page

4. use Libraries.Interface.Controls.TextField

5. 
   

6. class LoginBehavior is FormBehavior

7.     text myUsername = "Luggage"

8.     text myPassword = "1234"

9.     

10.     // Action triggered by button press.

11.     action Run(BehaviorEvent event)

12.         Page page = GetPage()

13.         TextField usernameField = page:GetTextField("Username")

14.         TextField passwordField = page:GetTextField("Password")

15.         

16.         boolean userCorrect = false

17.         boolean passwordCorrect = false

18.         

19.         // Check to see if user can log in.

20.         if userCorrect and passwordCorrect

21.             output "Logged in as: " + usernameField:GetText()

22.         else

23.             output "Could not log you in. Did you forget your password?"

24.         end

25.     end

26. end

Ok, let's run the app again to check out our changes.  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 need to fix the errors before you can continue with running your app.

If your app compiles correctly then a new window should appear.  Try entering random text into the username and password TextFields and press the Login button.  Go back and check the output in the Console tab of Quorum Studio.  You should see the message "Could not log you in. Did you forget your password?"

Now try entering the correct username and password into your app and press the Login button.  As a reminder, the correct username is Luggage and the password is 1234.

Go back and check the output message in the Console tab of Quorum Studio.  Even though you entered the correct username and password the message is still "Could not log you in. Did you forget your password?"  Why is that?

The reason your app always says that the user is not logged in, even if they enter the correct username and password, is because it doesn't have any logic to check for the correct username and password.  We're going to fix that in now.

Starting on line 16 of the LoginBehavior.quorum file you should see the following code that we recently added:

        boolean userCorrect = false

        boolean passwordCorrect = false

        // Check to see if user can log in.

        if userCorrect and passwordCorrect

            output "Logged in as: " + usernameField:GetText()

        else

            output "Could not log you in. Did you forget your password?"

        end

The two boolean variables are set to false and then the conditional block checks them to see if the user successfully logged in.  Since they are always false the user never logs in successfully.  We're going to add some logic here that will determine if the username and password are correct, and if so, set the booleans to true.

After the two boolean variables, but before the comment on line 19, add the following lines:

        // Gather username info.

        text user = usernameField:GetText()

        if myUsername = user

            userCorrect = true

        end

        // Gather password info.

        text pass = passwordField:GetText()

        if myPassword = pass

            passwordCorrect = true

        end

Let's look at the code we just added.  The first five lines gets the value entered into the username TextField and then uses a conditional statement to check if the username matches the one we're currently storing in the myUsername variable.  If the entered username matches the one in our variable, it sets the userCorrect boolean variable to true.

The second five lines does the same thing for the password.

After those changes your entire LoginBehavior.quorum file should look as follows:

1. use Libraries.Interface.Forms.FormBehavior

2. use Libraries.Interface.Events.BehaviorEvent

3. use Libraries.Interface.Forms.Page

4. use Libraries.Interface.Controls.TextField

5. 
   

6. class LoginBehavior is FormBehavior

7. text myUsername = "Luggage"

8.     text myPassword = "1234"

9.     

10.     // Action triggered by button press.

11.     action Run(BehaviorEvent event)

12.         Page page = GetPage()

13.         TextField usernameField = page:GetTextField("Username")

14.         TextField passwordField = page:GetTextField("Password")

15.         

16.         boolean userCorrect = false

17.         boolean passwordCorrect = false

18.         

19.         // Gather username info.

20.         text user = usernameField:GetText()

21.         if myUsername = user

22.             userCorrect = true

23.         end

24.         

25.         // Gather password info.

26.         text pass = passwordField:GetText()

27.         if myPassword = pass

28.             passwordCorrect = true

29.         end

30.         

31.         // Check to see if user can log in.

32.         if userCorrect and passwordCorrect

33.             output "Logged in as: " + usernameField:GetText()

34.         else

35.             output "Could not log you in. Did you forget your password?"

36.         end

37.     end

38. end

Making small changes to your code and rerunning your app to make sure it does what you think it should is good programming practice.  Let's test our app to see if users can now successfully log in.

Run the app again by clicking 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 need to fix the errors before you can continue with running your app.

If your app compiles correctly then a new window should appear.  

Try entering the correct username and password into your app and press the Login button.  The correct username is Luggage and the password is 1234.  

Now go back to the Console tab in Quorum Studio and examine the output.  You should see a message indicating that the user successfully logged in that reads "Logged in as: Luggage".

Lastly, we should make sure that the app still won't login an user if they enter the wrong username and password.  Go back to your app and enter an incorrect username and password and press the Login button.  Check the Console output to make sure the message indicates that the user was not logged in.

Today we took the user interface we built yesterday and added behavior to it so that the app is able to collect information from the user interface and determine if the user entered the correct credentials.

Tomorrow we're going to stop and think about the security our login app provides and see if we can improve it.