ptg 27 Running Your Application Running Your Application In the rst exercise, you created your project and an application page. Before you had a chance to run the application, the second exercise took you on a tour of the Flash Builder workbench. Yo u w i l l n o w g e t b a c k t o y o u r a p p l i c a t i o n . Yo u w i l l r u n i t , a d d c o d e t o i t , a n d l e a r n t h e b a s i c s of le manipulation. 1 Open the Project menu. Be sure the Build Automatically option has a checkmark in front of it. When Build Automatically is selected, Flex continuously checks for saved les, compiles them upon saving, and prepares them to run. Even before you run your application, syn- tax errors are agged, which does not occur if Build Automatically is not selected. Tip: As your applications grow more complex, you might find that having this setting selected takes too much time, in which case you should deselect the setting. The build will happen only when you run your application or you specifically choose Build Project from the menu. 2 Run your application by clicking the Run button. You will not see anything in the browser window when it opens. Run FlexGrocer tip Yo u h a v e n o w r u n y o u r  r s t F l e x a p p l i c a t i o n , a n d i t w a s n’ t t h a t i n t e r e s t i n g . I n t h i s c a s e , the skeleton application contained no tags to display anything in the browser. But you did see the application run, and you saw the default browser open and display the results, uninteresting as it was. From the Library of Wow! eBook Download from www.eBookTM.com ptg 28 LESSON : Getting Started NoTe: What exactly happened when you clicked the Run button? A number of processes occurred. First, the MXML tags in the application file were translated to ActionScript. ActionScript was then used to generate a SWF file, which is the format Flash Player understands. The SWF file was then sent to Flash Player in the browser. www.flexgrocer.com/FlexGrocer.html Client with Flash Player FlexGrocer.swf MXML ActionScript SWF 3 Close the browser and return to Flash Builder. 4 Add an <s:Label> tag by placing the cursor aer the closing </fx:Declarations> tag; press Enter/Return; enter the less-than sign (<) and then enter s, followed by a colon (:). Yo u w i l l s e e a l o n g l i s t o f t a g s . P r e s s t h e l e t t e r L (upper- or lowercase) and select the Label tag by highlighting it and pressing Enter or by double-clicking it. is is an example of code hinting, which is a very helpful feature of Flash Builder that you should take advantage of. 5 Press the spacebar, and you’ll see a list of options, including properties and methods, which you can use with the <s:Label> tag. Press the letter t and then the letter e; then select the text property. From the Library of Wow! eBook Download from www.eBookTM.com ptg 29 Running Your Application Code hinting shows only the elements that relate to the selected tag. So, seeing the text element appear in this list indicates that it is a valid attribute for this tag. Not only can you select tags via code hinting, but you can also choose attributes that belong to those tags. NoTe: In these two instances of code hinting, both the desired options happen to be at the top of the list. If the options were not at the top, you would select the desired option either by pressing the Down Arrow key and then pressing Enter or by double-clicking the selection. 6 Enter My First Flex Application for the value of the text property. Be sure that the text is in the quotes supplied by code hinting. Given that MXML is an XML language, it is required to follow all XML rules and stan- dards. Proper XML formatting dictates that the value of any attribute be placed in quotes. 7 End the tag with a slash (/) and a greater-than sign (>). Check to be sure that your code appears as follows: <?xml version=”1.0” encoding=”utf-8”?> <s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009” xmlns:s=”library://ns.adobe.com/flex/spark” xmlns:mx=”library://ns.adobe.com/flex/mx” minWidth=”955” minHeight=”600”> <fx:Declarations> <! Place non-visual elements (e.g., services, value objects) here > </fx:Declarations> <s:Label text=”My First Flex Application”/> </s:Application> From the Library of Wow! eBook Download from www.eBookTM.com ptg 30 LESSON : Getting Started NoTe: The code in this example places the minWidth and minHeight attribute/value pairs of the Application tag on a separate indented line. The entire Application tag could have been on one line; whether or not to add line breaks to code is a matter of personal preference. Some developers like the look of placing each attribute/value pair on a separate indented line. Proper XML syntax gives you two ways to terminate a tag. You just used one of them—to place a slash at the end of the tag, which is called a self-closing tag. e other option is to use the slash in front of the tag name, which is completely typed out again, as follows: <s:Label text=”My First Flex Application”> </s:Label> Yo u u s u a l l y u s e t h e s e l f - c l o s i n g t a g u n l e s s t h e r e i s a r e a s o n t o p l a c e s o m e t h i n g i n s i d e a t a g block. For example, if you want to place the </mx:Label> tag inside the <mx:Application> tag block, you have to terminate the </mx:Application> tag on a separate line. 8 Save the le and run it. e text “My First Flex Application” appears in your browser. Finally, you get to see something displayed in your new Flex application. e <s:Application> tag comes with a default background color of white (#FFFFFF). Yo u will learn more about adjusting styles in Lesson 16, “Customizing a Flex Application with Styles.” 9 Change the value of the text property from “My First Flex Application” to New Text. Save the le and run it. e next step shows another helpful feature of Flash Builder, but to see this feature you must have at least two saved versions of the le, which is why you changed the text and saved another version of the le. 10 Right-click in the editor, and from the contextual menu choose Replace With > Local History. A large dialog box appears. From the Library of Wow! eBook Download from www.eBookTM.com ptg 31 Running Your Application 11 Compare the current version of your le, which is located on the le side of the dialog box, to the older version on the right. Select the rst item in the list. A history of the last 50 versions of your le is kept at the top of the dialog box. Click Replace to bring back your original text, which reads “My First Flex Application”. Yo u w i l l  n d t h i s f e a t u r e v e r y h e l p f u l w h e n y o u w a n t t o r o l l b a c k t o a p r e v i o u s v e r s i o n of code. Tip: You can alter the settings for Local Histor y by choosing Window > Preferences; then from the dialog box choose General > Workspace and click Local History. 12 Purposely introduce an error into the page by removing the ending l from Label, chang- ing the <s:Label> tag to <s:Labe>, and save the le. is will cause an error, because the compiler can nd the Label class in the s namespace, but not a Labe class. Aer you save the le, the compiler checks your code. e error is found and reported in two ways. First, a small white X in a red circle will appear next to the line of code in which the coding mistake is located. Also, a description of the error appears in the Problems view. Tip: You can place the pointer over the Red circle by the line number to see the complete description. You can also double-click the error listed in the Problems view, and the pointer will then appear at the appropriate line of code in the editor. From the Library of Wow! eBook Download from www.eBookTM.com ptg 32 LESSON : Getting Started 13 Run the application. You will see the following warning, telling you there are errors in your project and prompting you to conrm that the launch should continue. In this case, click Cancel. Because of the compile time error, Flash Builder will not be able to compile the applica- tion with the latest change. If you click Proceed in this dialog box, Flash Builder will run the last successfully compiled version of your application. 14 Correct the error, save the le, and run it to be sure that everything is again working properly. Close the le. Exploring the Flash Builder Debugger As you build applications, things will sometimes not work properly or will perhaps throw errors. To help you understand what is causing these problems, Flash Builder has an interac- tive debugger. e debugger lets you set breakpoints in the code and inspect various property and variable values at the point where the execution of the code stops. You can also use the debugger to step through the code, so you can see how those values change over time. From the Library of Wow! eBook Download from www.eBookTM.com ptg 33 Exploring the Flash Builder Debugger 1 From the main menu of Flash Builder, choose File > Import > Flash Builder Project. is project le contains a small application with a button, a label, and an ActionScript that will add two numbers and display the results. Flash Builder has the ability to import pre- existing projects packaged in the FXP format as a stand-alone le. 2 In the Import Flash Builder Project dialog box that opens, click the rst Browse button on the right of the screen. Navigate to the ex4tfs/Lesson02/independent directory, and select the DebugTest.fxp le. Set the location for “Extract new project(s) to” as driveroot:/ ex4tfs/debugTest. If the debugTest directory does not exist (and it probably doesn’t, unless you have done these steps before), it will be created for you. If it does exist, and you want to replace the previous version, be sure to select the “Overwrite existing project” radio button in the “Import method” section of the dialog box. If you are overwriting an existing version, you will be prompted to conrm that the previous version is to be replaced. At this prompt, you will need to click OK to continue. 3 Click Finish. From the Library of Wow! eBook Download from www.eBookTM.com ptg 34 LESSON : Getting Started 4 In Flash Builder, notice that a new debugTest project has been created. Expand the src and default package nodes to nd the DebugTest.mxml le. Open DebugTest.mxml by double-clicking it. 5 Run the application and click the Click Me button. You should see a line of text appear next to the button, reading “2 + 4 = 6”. When you clicked the button, the event handler dened on line 26 was executed, calling the button_clickHandler() method. is method denes two integer variables (numTwo and numFour) and passes them to a function that adds the integers together and then displays the results in a label. e ActionScript syntax, event handlers, and datatyping variables will all be covered in detail in the next few chapters. 6 In Source view, double-click the line number 24 to set a breakpoint on that line. You need to double-click the number itself, not merely that line of code. When the breakpoint is set, you should see a blue circle appear to the le of that line number. When the application runs in Debug view, and a user clicks the button, the applica- tion will stop executing at the line with the breakpoint. You will be able to debug from that point in the application. You can set breakpoints at any line of executable code in an application, such as an event handler in MXML, or a line of ActionScript in the Script block. From the Library of Wow! eBook Download from www.eBookTM.com ptg 35 Exploring the Flash Builder Debugger 7 Launch the application in Debug view, by clicking the button that looks like a bug (located to the right of the Run application button). 8 When the browser launches the application, click the button labeled Click Me. is time the application runs until it reaches the breakpoint, then control is passed from the browser to Flash Builder. If Flash Builder is in the Flash perspective, you will be asked if you want to switch to the Debug perspective. Select the Remember My Decision check box, then click Yes. As you learned earlier in this chapter, Eclipse (and therefore Flash Builder) uses perspec- tives to group together sets of views. By default, the Debug perspective adds four views above the code. To the le is the Debug view, which shows where the application encoun- tered the breakpoint. is view also has buttons to continue running the application, to stop debugging, and to step into the code, step over a line in the code, or return to the place which called the current function. To th e ri ght of t he De bu g pers pe ct iv e are t hr ee ta bb ed vi ews . e Va riabl es v ie w sh ows the current state of the variables, the Breakpoints view shows all the breakpoints, and the Expressions view shows any watch expressions you have added. You will explore these views and buttons in the next few steps. From the Library of Wow! eBook Download from www.eBookTM.com ptg 36 LESSON : Getting Started Resume Terminate Step Into Step Over Step Return Variables Breakpoints Expressions 9 In the Debug view, click the Step Into button, which will move control to the button_clickHandler() method. e Debug view is showing you that you’re looking at the button_clickHandler() method. e Variables view will still show this event, as it did initially, but three new items are visible there as well, representing the three variables dened locally to the func- tion. Since you have not yet executed the line of code that instantiates and sets the values of those variables, they currently have a value of undefined. From the Library of Wow! eBook Download from www.eBookTM.com [...]... 12 In the Debug view, click the Resume button to allow the application to continue executing This time, the label reads “3 + 4 = 7”, as we changed the value of the numTwo variable from 2 to 3 13 In the Debug view, click the Terminate button (red square) to stop this debugging session Double-click the line number 14 to set a breakpoint there You now have breakpoints set at lines 14 and 24 14 Click the. .. delete only the Flash Builder project, or also the files for the project from the file system Select the radio button to also delete contents The project and related files will be removed from the file system Download from www.eBookTM.com From the Library of Wow! eBook 42 LESSON 2: Getting Started 3 From the main menu of Flash Builder, choose File > Import > Flash Builder Project 4 In the Import Flash... cannot resolve 2 Find and select the Checkout Button Toward the bottom of the Properties view, in the Constraints area of the Size and Position section, add a constraint so the right edge of the Button is 10 pixels away from the right edge of the container Make sure that the Y position of this control is set to 10 pixels Y position Right-edge constraint Download from www.eBookTM.com From the Library of... Laying Out the Interface To set a constraint from the right edge, click the rightmost check box above the button icon in the Constraints area In the text box that appears, enter the number of pixels away from the edge you want the button to be If the label seems to disappear from the screen, check the scroll bars on the bottom of Design view By default, Design view shows you just a portion of the application... that it is 10 pixels above the bottom and 10 pixels away from the right edge of its container Click the check box in the top-right corner of the Constraints area, and enter 10 in the text box that appears Also, click the bottom check box and enter 10 in the text box that appears Because the copyright label is below other containers, it is probably easiest to select it using the Outline view These settings... down for 15 0 pixels, where it crosses the screen You can drop the Label anywhere in this area 2 Set the ID of the Label control to prodName and the Text property to Milk 3 Drag a second Label control below the first one Give the second one the ID price and set $1. 99 as the Text Because these new Label controls are children of the Group container, and the Group has a VerticalLayout object, the product... variables local to the button_clickHandler() method It is now showing value1 and value2, the arguments to the method 17 Click the Step Over button As it did the previous times you used Step Over, the debugger executes the next line, this time populating the sumInts variable with the value 6 18 Click the Step Return button Notice that control returns to the button_clickHandler() method, and that the sumInts... always 10 pixels from the right edge of the Application object 6 Drag a second Button control to the control bar, just to the left of the first Button control In the Properties view, give the new Button control the ID btnCheckout and the label Checkout FlexGrocer users will click this button to indicate that they are finished shopping and want to complete the purchase of the selected products Again, the. .. select the View Cart Button Add a constraint so that the right edge of the button is 90 pixels from the right edge of the container Make sure that the Y position of this control is set to 10 pixels You now have it set so that, regardless of the width of the browser, the two navigation buttons are always anchored relative to the top-right edge of the container 4 Find and select the Label control with the. .. the Layout folder 9 Drag a Group container from the Layout folder of the Components view and place it in the large white area below the control bar Use the Properties panel to set the ID of the Group to bodyGroup Then set both the height and width properties to 10 0% and the xand y-coordinates to 0 10 With the bodyGroup still selected, scroll to the bottom of the Properties panel You will see a Layout . i n e s 1 4 a n d 2 4 . 14 Click the Breakpoints tab to see that view and notice that you now have breakpoints set on lines 14 and 24 . You can turn on or o breakpoints by clicking the check. Started 12 In the Debug view, click the Resume button to allow the application to continue executing. is time, the label reads “3 + 4 = 7”, as we changed the value of the numTwo variable from 2. produce • the code for those les (pages 27 – 32) Learned about debugging an application with the Flash Builder debugger (pages 33 40 )• Prepared for the next lessons (pages 41 43 )• From the Library