Creating the Login Screen

So far you have a working application which displays a master/detail view of two related tables, without typical browser refreshes. That is pretty impressive in and of itself. But more impressive would be the ability to add, edit, and delete records all from within the grid.

The truth is, to make a Flash grid editable is really easy. For instance, editable is a grid property; just set it to true and you have an editable grid. But you'd probably not want every user to be able to edit data, and so next you'll implement a login screen. All users will be able to browse data, but edits will require a log-on.

The first thing you'll do is create the login screen. Here are the steps:

1. Add a new form to the application by clicking the Plus (+) button in the form tree control.

2. This new form will contain the login screen. Double-click the default name and change it to login (Figure 14).

   

   Figure 14. Each form in a form application must be uniquely named.

3. Now add some form components to the login screen. Drag a Label component from the Components panel onto the Stage. Open the Property inspector (select the Parameters tab) and set W=100, H=22, X=30, Y=20. Then select the text field (in the Property inspector Parameters tab) and enter the text Login:.
4. Place another Label component on the Stage. Set W=100, H=22, X=30, Y=50. Then select the text field and enter the text Password:.
5. Drag a TextInput component onto the Stage. In the Property inspector name the instance loginName. Set W=100, H=22, X=145, Y=20.
6. Drag another TextInput component onto the Stage. In the Property inspector name the instance loginPassword. Set W=100, H=22, X=145, Y=50. Click the password field and set it to true. You make it a password field so that when a user types a password, it does not appear on screen.
7. Drag a Button component onto the Stage. In the Property inspector, name the instance loginButton. Set W=100, H=22, X=35, Y=85. Click the label field and set it to Login.
8. Drag another Button component onto the Stage. In the Property inspector name the instance cancelButton. Set W=100, H=22, X=140, Y=85. Click on the label field and set it to Cancel. Your form will look like Figure 15.

9. You now have a complete form (you'll wire it up shortly). For now, save the changes and test the application.

   

   Figure 15. The login form contains two labels, two input components, and two buttons.

   

   Figure 16. Flash Forms are "transparent," and will show through each other by default.

You'll find that the application works, actually, a bit too well. A seen in Figure 16, the new login form displays automatically on startup and overlays the grids; obviously, that is not the correct behavior. By default, all new forms will display when the application starts. To prevent the login form from initially displaying, do the following:

1. Click the login form in the form tree.
2. Open the Property inspector and ensure that you've selected the Parameters tab.
3. Select the visible parameter, and set it to false.
4. Save and test the application, now the form will not automatically display when it starts; although there is no way to make it appear yet, you'll learn how to fix that next.

When working with multiple forms, here's a useful tip: Right-click any form in the tree and select Hide Screen to prevent it from appearing while you work on other forms. This has no impact on runtime execution, it only affects visibility within the Flash authoring tool.

You must display a login screen only when you need a log-on. You'll add a login button and display the login form when it a user requests information that requires a log-on. Here are the steps:

1. Add another form to the application and name it navLogin; ensure that its visible parameter is true. (You want the login button to display on startup.)
2. Select the navLogin form and add a Button component to it. In the Property inspector, name the instance buttonLogin. Set W=75, H=22, X=460, Y=370. Click the label field and set it to Login.
3. Save the changes and run the application; you'll see the new Login button displayed (because it is on the form that is displaying). Clicking the button will not do anything yet, though.
4. Click the new Login button (in the navLogin form), and open the Actions panel. The Actions panel should show buttonLogin in the ActionScript tab.

5. Type the following code in the Actions panel (Figure 17):

   // Display login form
   on (click) {
     _root.application.login.visible=true;
   }
   

   

   Figure 17. Flash associates code in the Actions panel with the currently selected form or component

6. Save the changes and run the application. When a user clicks Login, your application will now display the form.

That worked—the form displayed, but the UI is clumsy. The grids show through the form, and users can use them while the login form appears. What you really want is for the form to display in a pop-up window. This is feasible, but requires some manual coding. Here is what you need to do:

1. Go back to the Actions panel for the buttonLogin, remove the code you just inserted, and enter the following code instead:

   // Popup login form when button pressed
   on (click) {
      // Work out position
      var x = (_root.application.width-300)/2;
      var y = (_root.application.height-150)/2;
      // Create popup
      var loginWindow = mx.managers.PopUpManager.createPopUp(_root,
                      mx.containers.Window,
                      true,
    		   {contentPath:"login", title:"Login", _x:x, _y:y});
      // Set window size
      loginWindow.setSize(300, 150);
      // Save window instance (so it can be closed later)
      _root.application.login.loginInstance=loginWindow;
   }
   

2. This code uses the Window component to create a pop-up window. (You'll learn more about the code in a moment.) If you were to run it as is, the form would not pop up because the Window component code would not be in the final compiled SWF file. Add the component to the SWF by dragging a Window component from the Components panel onto the Stage.

3. Of course, you don't actually need the Window component on the Stage, so delete it. If that sounds a bit awkward, well, it is. Open the Library panel (Figure 18) if you are so inclined; it lists the components currently in use, and you'll see that it lists Window (even if you deleted it).

   

   Figure 18. Use the Library panel to see the components used by an application.

4. Save your changes and test the application. When you press the Login button, the form will now display in a pop-up window.

So what does the ActionScript code that you just used actually do? The on(click) traps button clicks so that the code that follows will execute when a user presses Login. The first two lines of code define two variables, x and y, which contain the position of the pop-up window (calculated by taking the application height and width minus the pop-up window height and width divided by two). The next line of code uses the PopUpManager class to create a pop-up window, specifying login as the name of the form to load in the window, Login as the window title, and passing x and y variables for the position. Next, the code sizes the window and saves a reference to the window instance so that the SWF can close the window later on. You'll add login form processing in a moment; for now, you need, at the very least, a way to close the Login window.

The following steps add processing to the login form Cancel button:

1. Select the login form.
2. Select the Cancel button.

3. Open the Actions panel, and enter the following code:

   // Close login window
   on (click) {
     _root.application.login.loginInstance.deletePopUp();
   }
   

4. Save your changes and test the application. You will now be able to press the Login button to pop up the login form (Figure 19); click Cancel to close the pop-up window.

   

   Figure 19. Use the Window component and the PopUpManager class to create intuitive pop-up windows.

Page 5 of 10

Previous Page

Next Page