Flex Study Notes (1)

Note: It was easy to organize the content of this video tutorial, but it was not easy and time-consuming. We have only made the following simple preparations, so please forgive me.

Video 1.01: introducing flex and the Adobe Flash Platform

Abstract:

• Learn about Adobe Flash Platform and related tools
• Understand New Features of flex framework and flash Builder

The Adobe Flash Platform page describes a variety of tools and technologies on the Adobe Flash Platform.

Demonstrate the technologies and tools on the Adobe Flash Platform, as well as their respective roles and roles.

• Flash builder: formerly called Flex builder, used to develop flex applications and assist in design.
• Flash Professional: Uses Visual tools, programming, and other methods to create content, animation, and application environments.
• Flash catalyst: an interactive design tool that creates interfaces and content without writing code.

All the above three tools can compile SWF files. This file can be rendered Using Flash Player or air runtimes.

• Flex 4.5 framework: a free and open-source class library for actionscript3.0 and UI components, including mxml and actionscript3.0.
  • Mxml: XML-based declarative language. We recommend using it for UI layout.
  • ActionScript 3.0: it is compatible with the script language of ECMA and is recommended to write business logic.

Both mxml and ActionScript are compiled languages (unlike JavaScript, they are interpreted languages ). The browser can parse JavaScript directly, but mxml and ActionScript must be compiled into a SWF file before they can run in Flash Player or air runtimes.

• The flex SDK: a free software development tool that packs the flex framework, compiler, and debugger together to build a flex application.

 

Video 1.02: inconfigurating flex into the client/serverworld

Abstract:

• Review the basic development process of HTML-based data-driven applications
• Describes how to apply SWF files to and change the development process.
• Describes how to access data from a SWF file directly from the server.

Adobe Developer Connection's Flex Developer Center: Here developers can find some useful materials.

Typical process of generating HTML for end users using server-side technology:

1. On the user request server page, the web server locates the file and transmits it to the application server for processing;
2. The business logic in the Code accesses system resources such as databases, email servers, and file systems;
3. The server page uses the requested data and services to generate HTML Dynamic Display and return to the browser for rendering.

The process for generating HTML after adding the SWF file:

1. On the user request server page, the web server locates the file and transmits it to the application server for processing;
2. The business logic in the Code accesses system resources such as databases, email servers, and file systems;
3. The server page uses the requested data and services to generate HTML code, which is embedded with SWF file reference and then returned to the browser for rendering;
4. The browser downloads the SWF file and renders it in Flash Player;
5. Once a SWF file appears in a browser, it can directly communicate with the server code.

Note: HTML, JavaScript, CSS, and flex are complementary technologies that can be seamlessly integrated.

Advantages:

1. Allows you to dynamically update the user interface of the Flex application without refreshing the HTML page;
2. This reduces the number of requests to the server and the total amount of content transmitted over the network.

 

Video 1.03: padding ing flash builder and Flash Player

Abstract:

• Understand the eclipse basic development platform and Application Framework
• Learn the configuration and Version options of Flash builder and the differences between the installation directory and the project directory.
• Learn about the versions of Flash Player and Flash Player debugger.

Flash builder 4.5: formerly known as flex builder, developed based on the non-profit and open-source eclipse development platform and application framework. It is a commercial product developed by Adobe ), use the flex framework to build flash applications. It can be installed independently or as a plug-in for eclipse.

Flash builder has some good features:

• Context-sensitive code prompts and syntax templates (context-sensitivecode hinting and syntax templates)
• Interactive single-step debugging with variable evaluation (an interactivestep-through debugger with variable evaluation)
• Mobile phone simulator and debugging tool (a mobile emulator anda debugger that works directly on a mobile device)
• Visual Design Environment (a visual design environment)
• Data Access wizards)
• Automatic Test support)

Four versions of Flash builder:

• Flash builder 4.5 standard: includes most of the features commonly used by developers
• Flash builder 4.5 premium: for enterprise users to add some advanced features to the Standard Edition
• Flash builder 4.5for PHP Standard
• Flash builder 4.5for PHP premium

 

Video 1.04: Using Flash Builder

Abstract:

• Understand related terms in Flash builder software
• Learn how to organize code in the flex project and how to switch the Workspace
• Describes the encoding style in this series of videos.

The best way to learn this part of content is to follow the instructions in the video to practice it step by step, and then it is easy to get started. Reading text comments is not as intuitive and easy to understand as videos.

Name of commonly used interface elements in Flash builder:

1. The default flash Builder environment is workbench)
2. The panel on the interface is called a view)
3. The main Encoding Area is the editor)
4. There is a switch button on the editor to switch between the Code view and the Visual View, called the source mode and design mode respectively)
5. Different view la s become perspective (Perspective), the main perspective is flash perspective, and a common perspective is flash debugperspective, you can also use the window menu> saveperspective as option in the menu bar to save the custom perspective. Select reset perspective to restore the initial perspective.
6. The component view is available in the design mode)
7. The left-side view of the editor is package explorer, which displays all the files and folders of the project and can be automatically refreshed.
8. The lower-side view of the editor is the problems view, which displays the error and warning information for the code you have written.
9. At the bottom left of the editor is the outline view, which displays all the user interfaces and code elements in a file in layers. Click the elements in the view to quickly locate the corresponding position in the editor.
10. A workspace is a file system directory that includes all the files and folders of a group of projects in eclipse. You can view the default workspace through File> switchworkspace> Other.

Summary of Common Operations in Flash builder:

1. Double-click the tab of the page to maximize page/normal page switching;
2. How to open the start page of Flash builder: Help Menu> flashbuilder start page option in the menu bar;
3. Right-click the vertical bar (margin bar) on the left side of the editor to select a line number;
4. In package explorer, right-click a project and choose Close project from the shortcut menu );
5. How to create a project: File> New> flex project;
6. How to modify the font of the Editor: WINDOW> preferences, select general> appearance> colors and fonts> basic> text font, click Edit to modify the font, and save the modification;
7. Method for modifying the default indentation distance of the Code: WINDOW> preferences, select Flash builder> editors> ActionScript code> indentation;
8. How to import a project file: File> importflash builder project, and select a file with the suffix fxp;
9. Export project files: Right-click the project and select export.

Notes for flex mxml:

Similar to HTML Annotations: Start with Angle brackets, followed by an exclamation point and two broken signs, and end with two broken signs and one angle bracket (<! -->)

Notes for ActionScript:

Double slash //

Some encoding styles:

1. Each property of the mxml tag occupies a single row. Unless these attributes are very relevant (such as width and height), they can be placed in the same row;
2. The ID attribute is placed in the first row as the unique identifier of each element.

 

Video 1.05: compiling and viewing the application

Abstract:

• Learn how to run a flex application in Flash Builder

The special names of some forms, views, or controls in the Flash Builder development environment will be mentioned in the video. We recommend that you browse this video to better understand the operations in Flash builder.

Click the "run" button in the toolbar to run the project application in the browser (the SWF file is actually running ). Flash builder usually calls the default browser on the computer. Of course, you can also modify it in WINDOW> preferences> General> Web browser.

In the flex project, there is a noteworthy folder named bin-Debug. When we run the flex project in a browser, the HTML file indicated by the URL and the compiled SWF file are stored here.

As needed, we can open project> Properties> flex compiler to set the flex compiler, which includes the following four parts:

• Flex SDK version
• Adobe Flash playeroptions
• Compiler Options
• HTML wrapper

In bin-debug, HTML is essentially an HTML wrapper that implements a javascript class library called swfobject. This class library abstracts implementation details such as Flash Player detection and SwF embedding. This html contains the code embedded in the SWF file, which is automatically generated by flash builder.

In bin-debug, there are some SWF files whose names end with some flex framework versions, which are related to implementing the flex framework using the runtime shared class library (runtime sharedlibraries or RSLs. Because different flex applications use different classes of the Flex framework, if you download all the classes of the Flex framework, it will be a waste of bandwidth. Therefore, use the shared class library at runtime to solve this problem. Open project> Properties> flex build path. The default option is use SDK default (Runtime
Share library ).

Several useful operations during compilation are also prompted:

• If a problem occurs during re-compilation, you can select project> cleanmenu to clear some project files, which forces the compiler to re-build.
• If the SWF file cannot access local resources, close all browser windows and run the flex application again.

 

Video 1.06: Understanding namespaces

• Understand XML statements
• Measure the test taker's knowledge about the basic content of a namespace.
• Learn how to use a custom namespace to access custom controls

Mxml is an XML-based descriptive language. It is mainly used for visual layout in the flex framework. Therefore, the first line of the mxml file is the XML declaration statement.

Note: The XML declaration statement must be placed in the first line of the file, and must not contain any characters (including spaces ).

The second element of the mxml file is the application tag. This tag is required for all mxml application files. The xmlns attribute is a reserved attribute in XML and is used to declare the namespace. It defines the namespace related to the class library in the flex framework in the application tag.

The colon of xmlns is its value. In mxml, It is the prefix of the namespace, such as FX, S, and MX.

Where

• MX refers to the flex3 class, including the MX package and data visualization components.
• FX refers to some classes in flex4, including top-levelactionscript language elements (object, number, Boolean, and array) and built-in compilertags (script, declarations, and style ).
• S refers to spark in flex4, including spark components, text frameworkclasses, and data service components (Web Service, HTTP service, and remote objectcils ).

If possible, use spark components as much as possible, instead of MX components. The specific reasons can be found in future videos.

 

Video 1.07: introducing flex components and controls

Abstract:

• Understand the UI components in spark and MX Libraries
• Understand Why spark and MX coexist and their differences

Flex UI components include:

• Controls (Controls): such as textinput, button, DataGrid or dropdownlist
• Container: used to hold controls or other containers. It is mainly used for layout.

We can use both spark and MX components because they all inherit from the same parent class uicomponent. Of course, if you can implement a function, we recommend that you use the spark component first.

MX components, also known as Halo components, are the UI elements provided by flex3. Each MX component also contains the logic used to define behavior, layout, style, and skin.

The spark component is provided in flex4 and is designed to separate behavior, layout, style, and skin into different classes.

Note: not all mxml components are visible. Invisible components must be declared in <FX: declarations> </FX: declarations>.

 

Video 1.08: laying out a form in Flash builder designMode

Abstract:

• Learn how to drag a form using the flash builder Design Mode

This section describes how to use the design mode. You can simply watch the video and drag and drop some widgets as soon as you learn it.

 

Video 1.09: introducing styling and skinning

• Learn how to use CSS
• Learn how to apply spark skins to projects
• Learn how to use theme browser to change component theme

The CSS design method is the same as that in general web development. Styles.css files are included in the examples in the general source code package. You can write styles and apply them to corresponding controls.

In Flex, if you want to modify the display effect (look and feel) of the control, you can also use the skin in addition to the CSS style.

To create a skin, it must be based on a flex framework class called sparkskin. A general control has at least two States: normal state and disabled state ). Buttons are also displayed in the following statuses: Up, down, and over.

Flex skin settings are generally placed in a file named like appskin. mxml. For more information, see video.

How to change the topic:

Switch to the design mode and select the appearance tab. The current topic is displayed, and click the hyperlink next to it, in this window, we can apply other themes to the project.

 

Video 1.10: Understanding data binding

Abstract:

• Learning Data Binding

In short, Data Binding associates data with the display content of the UI component. The example given in the video is to set a property to monitor the data changes in the input box 1. If any changes occur, the data in the input box 1 is instantly displayed in the input box 2.

 

Video 1.11: requesting and retrieving XML data from theserver

Abstract:

• Get XML data from a remote server
• Learn how to use network monitor to observe data requests and responses

There are three methods to obtain data in flex:

• Httpservice: use http get and post operations
• WebService: Use soap/WSDL
• Remoteobject: Use AMF to connect remote objects

Data acquisition often involves events. There are two scenarios for event triggering:

• Flex framework trigger
• User-triggered

 

Video 1.12: laying out components in containers

Abstract:

• Learn how spark uses layout classes for Layout

Spark in flex ):

• Basiclayout: Default layout. Use absolute positioning.
• Horizontallayout: Place all elements in the same row with the same element height. The highest element height prevails.
• Verticallayout: Place all elements in the same column with the same element width. The width of the element prevails.
• Tilelayout: the orientation attribute is used to determine whether the element is horizontal or vertical. The element has the same height and width.

 

Video 1.13: Adding scrollbars

Abstract:

• Understand the concept of viewports
• Learn how to implement the spark scroller component to add a scroll bar to the application

A view refers to a visible area. All parts outside the view are invisible to users.

For details about how to add a scroll bar, see the video example.

 

Video 1.14: implementing object-oriented programmingconcepts In Flex

Abstract:

• This section describes how to apply Object-Oriented Knowledge to mxml tags.
• How to create a custom control with custom class attributes

Object-oriented modeling is essentially a modeling of the real world, including the following four important concepts:

• A class is an abstraction of a classification object.
• Property describes the characteristics of an object.
• Method indicates the action or action of an object.
• An object is an instance of a class)

The attributes and methods are called class members ).

 

ActionScript is an object-oriented language that only supports single inheritance. Its access modifier has four types:

• Interral: the default access modifier, which can be accessed in the same package
• PRIVATE: private. It can be accessed in the current class.
• Protected: accessible to the current class and subclass
• Public: public, accessible

Mxml tags is essentially an ActionScript class .. Components in mxml inherit from spark. components. Group.

How to instantiate a custom mxml component:

1. Define a namespace: xmlns: components = "components .*"
2. Declare an instance: <components: employeedisplayx = "36" Y = "54"/>

Method for creating class attributes in mxml custom components:

1. Create a script block in the component File
2. Create variables and define access Modifiers
3. Use variables in component Logic
4. Instantiate component and PASS Parameters