Setting Breakpoints

The following steps will guide you through using the Flash Debug Perspective. First take a look at utilizing breakpoints in the Source view.

1. In Flash Builder create a new Flex Mobile project and call it Debugging App (Figure 6-1).

   

   FIGURE 6-1: New Flex Mobile Project panel for the Debugging App in Flash Builder

2. In DebuggingAppHome.mxml, set the title property of the view to Debugging App. Add a <s:VGroup> container with the paddingLeft, paddingRight, and paddingTop properties set to 20. Within the container add a <s:Label> and <s:Button> component to the view, setting the id property on the <s:Label> component to testLabel, and the id property on the <s:Button> component to testButton. Also set the label property on the <s:Button> component to Test onClick() (Listing 6-1).

   

   LISTING 6.1: Adding the <s:Button> and <s:Label> components to a <s:VGroup> container in DebuggingAppHome.mxml

   <?xml version="1.0" encoding="utf-8"?>
   <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           title=“Debugging App”>
   
         <s:VGroup paddingLeft=“20”
                   paddingRight=“20”
                   paddingTop=“20”>
   
               <s:Label id=“testLabel”/>
   
               <s:Button id=“testButton”

   label=“Test onClick()”/>
   
         </s:VGroup>
   
   </s:View>