Log In  
  Getting Started  
Version 31 by Randy Nielsen
on Feb 22, 2008 09:47.

<< Changes from 30 to 31
compared with
Current by Randy Nielsen
on Feb 22, 2008 09:49.
(show comment)
 
Key
These lines were removed. This word was removed.
These lines were added. This word was added.

View page history


There are 1 changes. View first change.

 {section}
 {column:width=80%}
  
 h2. Debugging Tutorial
  
 {adv-popup:Open New Window|http://www.adobe.com/support/documentation/en/flex/quick_start/debug/|896|720|no} Watch the video version of this tutorial.{adv-popup}
 1. Create a Flex Builder project. Set the *Project Name* to *Debugging* and the *Server type* to *Other/None*.
  
 2. Click *Finish*. Flex Builder creates an MXML file called Debugging.mxml and opens it in the Source mode.
 {column}
 {column}
 {adbe-prev:http://learn.adobe.com/wiki/display/Flex/3g.+Debug+your+application}
 {adbe-next:http://learn.adobe.com/wiki/display/Flex/Part+IV.+Building+Your+Own+Flex+Application}
 {rate:title=User rating|theme=dynamic|key=focal|display=default}
 {column}
 {section}
 !NavigatorSourceDesign.jpg!
  
 h2. The Problems View
  
 The *Problems* view is located below the Source mode. Whenever the Problems view shows errors, it means there are problems to be fixed before the application can be compiled.
  
 !ProblemsView.jpg!
  
 1. Add a *Button* control inside the {{<mx:Application>}} tags, and set its label property to *Click Me*.
 Add a *click event handler* with the code *"Alert.show('Hello from Flex');"*.
 {code}
 <?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:Button label="Click Me" click="Alert.show('Hello from Flex');"/>
 </mx:Application>
 {code}
 2. Save the changes. When you save changes, the project automatically recompiles. Any problems that are detected by the Flex compiler are displayed automatically in the Problems view.
  
 The Problems view shows an error.
  
 !ProblemsView2.jpg!
  
 Alert is an ActionScript class that should be imported before it is used within any ActionScript code.
  
 3. Double-click on the error in the Problems view, to move the cursor to the corresponding line of code in the Source mode.
  
 4. To fix this problem, add an {{<mx:Script>}} tag code block after the first Application component tag, but before the Button component.
 {code}
 <?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:Script>
  <![CDATA[
  
  ]]>
  </mx:Script>
  
  <mx:Button label="Click Me" click="Alert.show('Hello from Flex');"/>
 </mx:Application>
 {code}
 5. Add an *import* statement by placing the cursor after the word {{Alert}} in the {{click}} event handler, and then press Ctrl+Spacebar. This shows the list of ActionScript classes that match the string {{Alert}}. Select the *Alert* class from the list.
  
 !SourceView.jpg!
  
 The Alert class is imported.
  
 !SourceView2.jpg!
  
 6. Save the file, which compiles&nbsp;the code - the problem should go away.
  
 7. Run the application and click the button to see the Alert dialog box.
  
 !ApplicationScreen.jpg!
 !Browser.jpg!
  
 8. Close the browser and return to Flex Builder.
  
 h2. The Trace Function
  
 The {{trace}} function sends a simple string to the Console view, so you can track what is happening internally as your application is running. You can call the {{trace}} function from anywhere in your ActionScript code.
  
 1. In the {{<mx:Script>}} tag and after the {{import}} statement, create a *private function* named *initApp* that returns *void*.
 {code}
 private function initApp():void
 {
 }
 {code}
 2. In the {{initAp}} function body call the {{trace}} function and pass in a literal string of *"Hello from Flex debugging\!"*.
 {code}
 private function initApp():void
 {
  trace("Hello from Flex Debugging!");
 }
 {code}
 3. Call the custom {{initApp}} function by adding a *creationComplete* event handler to the {{mx:Application}} tag. The {{creationComplete}} event is dispatched when the application is initialized and all of its properties are set. You can use the {{creationComplete}} event handler to initialize an application.
 {code}
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  creationComplete="initApp()">
 {code}
 The {{trace}} function works only when you run the application in debugging mode.
  
 4. Click the *Debug* button (next to the *Run* button), and watch as the application opens in an external browser window. If the *Save and Launch* dialog box appears before the application opens, click *OK*.
  
 5. Keeping the browser open, switch back to *Flex Builder* (Alt+Tab for Windows, and Cmd+Tab for Mac OS).
  
 6. Open the *Console* view located at the bottom of the interface. The trace message "Hello from Flex Debugging\!" appears in the Console view.
  
 !ConsoleView.jpg!
  
 Each time the {{trace}} function is called, the string that is passed in is displayed in the *Console* view. The {{trace}} function can accept any sort of string expression composed of literals, variables, and the concatenation operator (more on the concatenation operator later).
  
 7. Click the *terminate* button in the *Console* view to stop the debugging session. You can also close the external browser window to stop the debugging session.
  
 8. In the {{initApp}} function, add a variable declaration after the first {{trace}} section. Name the variable *myVar*, set its data type to *Number*, and set the value to *9*.
 {code}
 private function initApp():void
 {
  trace("Hello from Flex Debugging!");
  var myVar:Number = 9;
 }
 {code}
 9. Add another {{trace}} statement. Use the concatenation operator (+) to put together the literal string {{"The value of myVar is"}} and the variable {{myVar}}.
 {code}
 private function initApp():void
 {
  trace("Hello from Flex Debugging!");
  var myVar:Number = 9;
  trace("The value of myVar is " + myVar);
 }
 {code}
 10. Debug the application. Select the Console view to see the resultant {{trace}} message.
  
 !ConsoleView2.jpg!
  
 11. Stop the debugging session by closing the browser. Then switch back to the Console view and notice that the red *terminate* button is disabled. You can use the {{trace}} function to check the value of a variable, trace the order of execution when working with complex event flows, and generally find out what is happening inside a running application.
  
 h2. Breakpoints
  
 *Breakpoints* are lines of code that have been marked so that the debugger stops application execution at that point. While the breakpoint is active, you can inspect the values of variables, step through code one line at a time, and add or remove breakpoints as needed.
  
 1. Add the following lines of code to the {{initApp}} function.
 {code}
 private function initApp():void
 {
  trace("Hello from Flex Debugging!");
  var myVar:Number = 9;
  trace("The value of myVar is " + myVar);
  /* New lines follow */
  var newVar:Number = 0;
  newVar++;
  newVar--;
  newVar-=3;
  trace(newVar);
 }
 {code}
 2. Set a *breakpoint* on the line that declares the {{newVar}} variable. A breakpoint can be set or unset (toggled) by double-clicking on the line number, by right-clicking (control-clicking on Mac OS), and then selecting *Toggle Breakpoint* or by using the keyboard shortcut Ctrl+Shift+B (Cmd+Shift+B on Mac OS). A dot next to the line number indicates the breakpoint.
  
 !Breakpoint.jpg!
  
 3. Save and debug the application. As the application starts up, Flex Builder should take focus. If Flex Builder doesn't immediately take focus, use Alt+Tab (Cmd + Tab on Mac OS) to switch back to Flex Builder.
  
 A *perspective* in Flex Builder is a particular arrangement of views and other development tools. When the execution of an application stops at a breakpoint, Flex Builder switches to the Flex Debugging perspective so that the debugging tools available. Click *Yes* to confirm a switch to the Debugging perspective.
  
 The *Variables* view is in the upper-right corner of Flex Builder interface. The Variables view lets you inspect variables that are local to the function being executed, or that are declared elsewhere in the application.
  
 4. Locate the *newVar* variable, and check its value.
  
 !VariablesView.jpg!
  
 The {{newVar}} variable is undefined; although the variable is declared, the breakpoint prevented it from being assigned a value of zero.
  
 5. Look at the *Debug* view, which includes buttons to step through code.
  
 6. Click the *Step Over* button once (it's the middle one of the enabled stepping buttons), and check the value of the {{newVa}} variable again. Each button click causes a line of code to be stepped over.
  
 7. Step through the code observing the value of {{newVar}} as it changes. Continue until the {{trace}} statement is reached.
  
 8. Click the *Resume* button in the Debug view, and the application in the browser becomes active again.
  
 !DebugView.jpg!
  
 9. Close the browser to terminate the debugging session and return to Flex Builder.
  
 10. To switch to the Development perspective, click to display the list of available perspectives and select *Flex Development*.
  
 !DevelopmentPerspective.jpg!
  
 The ability to inspect variables isn't restricted to simple values - complex data returned from a remote service may also be inspected.
  
 11. After the {{Script}} block and before the {{Button}} component, add an {{HTTPService}} component with the url value of *[http://rss.adobe.com/resources_flex.rss?locale=en_US]*. This is an Adobe RSS service.
  
 Do this between the {{Script}} component and the {{Button}} component.
  
 12. Add a result event handler, the result event occurs when the data is returned from the RSS service. When that happens, the event calls a custom function named {{resultHandler}} and passes the {{event}} object.
 {code}
 </mx:Script>
  
 <mx:HTTPService id="service"
  url="http://rss.adobe.com/resources_flex.rss?locale=en_US"
  result="resultHandler(event)"/>
 {code}
 13. At the top of the {{Script}}, just above the {{initApp}} function, add import statements and create a *Bindable* private variable named *feed* of type *ArrayCollection*.
 {code}
 import mx.controls.Alert;
 import mx.rpc.events.ResultEvent;
 import mx.collections.ArrayCollection;
  
 [Bindable]
 private var feed:ArrayCollection;
  
 private function initApp():void
 {code}
 14. In the {{Script}} block, just below the {{initApp}} function, create the *resultHandler* function. Pass an argument named *event* with a data type of *ResultEvent*. Populate the previously declared {{feed ArrayCollection}} by assigning the service call result of *event.result.rss.channel.item* and casting it as an *ArrayCollection*.
 {code}
 private function resultHandler(event:ResultEvent):void
  {
  feed = event.result.rss.channel.item as ArrayCollection;
  }
  ]]>
 {code}
 15. Add a *breakpoint* on the last line of the {{resultHandler}} function, that is, the line that contains closing brace.
  
 16. Change the {{Button}}'s {{click}} event handler to {{service.send()}} to send the request to the remote service.
 {code}
 <mx:Button label="ClickMe" click="service.send()"/>
 </mx:Application>
 {code}
 17. Debug the application. When the browser opens, control passes back to Flex Builder.
  
 18. Confirm the switch to the *Debug perspective*, and then *Resume* execution of the application.
  
 19. Switch back to the browser, and click the button to send the request to the remote service.
  
 !Browser2.jpg!
  
 Control returns to Flex Builder when the result event is dispatched by the HTTPService.
  
 20. Inspect the data that is returned. Go to the {{feed}} variable, right-click it (control-click on Mac OS), and select *Watch feed*.
  
 !WatchFeed.jpg!
  
 This adds the {{feed}} variable to the Expressions view. The Expressions view is a part of the Debugging perspective that allows any variable to be inspected, simple or complex.
  
 21. Go to the *Expressions* view and double-click on its tab to expand it to full screen.
  
 22. Click the *feed* variable. The {{feed}} variable displays a certain number of objects.
  
 23. Click one of the object proxys to open it. You can view the data from the remote service.
  
 !ExpressionsView.jpg!
  
 24. Double-click the *Expressions* view tab to return the *Expressions* view to normal size.
  
 25. Stop the debugging session. Notice that there is also a *terminate* button in the Debug view.
  
 !DebugView2.jpg!
  
 h2. Learn more
  
  * Read the
 {adbe-popup:http://livedocs.adobe.com/flex/3/html/logging_01.html}Logging chapter{adbe-popup} in the Flex 3 documentation.
  * Read the {adbe-popup:http://livedocs.adobe.com/flex/3/html/logging_01.html}Logging chapter{adbe-popup} in the Flex 3 documentation.
 * {adbe-popup:http://livedocs.adobe.com/flex/3/html/debugging_01.html}Command-line debugger{adbe-popup}
 * New in Flex 3! Use the {adbe-popup:http://livedocs.adobe.com/flex/3/html/profiler_2.html#205079}Profiler{adbe-popup}
  
 {adbe-prev:http://learn.adobe.com/wiki/display/Flex/3g.+Debug+your+application}
 {adbe-next:http://learn.adobe.com/wiki/display/Flex/Part+IV.+Building+Your+Own+Flex+Application}
Powered by Atlassian Confluence 2.7.1, the Enterprise Wiki. Bug/feature request - Atlassian news - Contact administrators