Flex 3 with Java- P2

Tham khảo tài liệu flex 3 with java- p2, công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
Nội dung trích xuất từ tài liệu:
Flex 3 with Java- P2 Chapter 2To create a TabNavigator control, switchback to the Design mode and followthese steps: 1. Drag and drop a TabNavigator container from the Navigators section in the Components view, in the design area. 2. Notice that TabNavigator will be created with one default tab—Tab 1. It can be seen in the following screenshot: 3. You can add another tab to this container by clicking on the + (the plus sign) that is displayed above the container. Similarly, use the - (the minus sign) to delete a tab. 4. Adding a tab will prompt you to enter a new tab label and the type of container you want to use. Remember the definition of navigator containers: Navigator container controls user movement, or navigation, among multiple child containers. These tabs are actual containers, which will be added as children of the TabNavigator container. For now, I am leaving selection to default Canvas. 5. Once you click on OK, a new tab will be added to TabNavigator.You can explore these containers from the Navigators section of the Componentsview, as shown in the following screenshot: [ 37 ]Introduction to Flex 3 FrameworkForm containersForms are commonly used containers in the web world. Forms are typically usedto collect user information, such as registration, purchases, billing, and so on. Flexprovides a form-based container with various built-in advantages, such as formvalidation, required field indicator, auto-alignment, auto-layout, and so on.Forms are constructed using the following three types of components: • Form container - Represents the main Form container • FormHeading - Represents Form heading • FormItem - Represents individual control on the Form container, such as text field, button, and so onExample of creating a form control: [ 38 ] Chapter 2You can also create forms in the Design view by dragging and dropping Form,FormHeading located in the Layout section of the Components view, or individualcontrols such as TextInput, Button in the Design view. Flex Builder willautomatically add the FormItem tag around the individual control.In the previous image, A indicates the main Form container; B indicates FormHeader;and C indicates FormItem. You will also notice the red asterisk (*) symbolthat indicates a mandatory field. You can set a mandatory field by adding therequired=true property to your FormItem tag.Constraint-based layoutFlex supports adding a constraint-based layout to relatively arrange componentsinside a container. This layout can only be used when the layout property isset to absolute. I will use the previous form example to demonstrate aconstraint-based layout: 1. Switch to the Design view. 2. Click on the Application area and change the layout property of the Application tag to absolute from the Flex Properties view, or you can change it manually from code by switching back to code view. 3. Select the Form container by clicking on its border or selecting the Form node from the Outline view. [ 39 ]Introduction to Flex 3 Framework 4. Now in the Flex Properties view, scroll down to the Layout section. You will notice that you now see a Constraints preview window with a couple of checkboxes, as shown in the following screenshot: 5. You can select checkboxes to set constraints. I have selected top and right constraints, as shown in the following screenshot: [ 40 ] Chapter 2 6. Now, the Form container will stay in the top right corner even if you resize your Flex application window.Now that you have understood Flex containers and their usage, its time to dive intothe MXML event model.Using events in MXMLEvents let a developer know when something happens within an application. Eventscan be triggered by either user interactions (such as keyboard or mouse clicks), orthey can be system-generated to notify the user that something happened internally(for example, the application finishes loading, the application closes, and so on). Theevent model in Flex provides an excellent way to design loosely-coupled applicationsthat can consume or dispatch events. This simply means that you can designcomponents that can perform tasks and notify the outside world by broadcasting oneor more custom events. The event model is broadly based on a well-known designpattern known as the observer pattern. The observer pattern allows one object,known as the observer, to watch another object, known as the subject, by registeringa listener(s) for a specific event(s), and then the subject broadcasting event(s) to allsubscribed observers.For example, you might have two list components where one shows the list ofcountries and the other shows the list of states pertaining to the selected country.In this case, the states list component will listen for any change in the country listselection and reload itself to show a list of states of the selected country. So, in thiscase, the state list component is an observer and the country list component isa subject.Events are used to add behavior and actions to your user interface. You can handlethese events in your code by adding event handlers. Event handler ...