Differences between Flex 3 and flex 4 Beta

ArticleDirectory

• Requirements
• Migrate applications to flex 4 Beta
• Overview of flex 4 beta architecture changes
• Add components and containers
• Changes in results
• Use text
• Backward compatibility with Flex 3
• Follow-up work

Flex 4 (CodeName: gumbo) major changes made to the beta release based on Flex 3. Flex 4 beta introduces a new component and exterior architecture. However, as a Flex 3 developer, you are using Flex 4 Beta to compile Flex 3 applications.ProgramIt may not encounter too many problems, because one of the purposes of the new release is to maintain backward compatibility with Flex 3.

In this article, I will briefly describe the main purpose and architecture differences of flex 4 beta and introduce the changes in components, layout, status usage, and effects. I will also answer some questions when using Flex 4 Beta to compile the Flex 3 application. This article cannot cover all new features of flex 4. For more information, see the new feature * In Flex 4 SDK beta of Matt chotin.

Terms in this articleHalo ComponentsIt refers to the component originally included in Flex 3. TermsSpark ComponentsIt refers to a new set of components in flex 4 beta.

Requirements

To make full use of this article, you need

Flex 4 SDK Beta

• Trial *
• Learn more *

Required knowledge

This document assumes that you are familiar with the Flex 3 framework.

Migrate applications to flex 4 Beta

The procedure is not complex when migrating a Flex 3 Application to flex 4 beta. Except for some bug fixes and slightly changed default themes, your applications can normally run as (or better) In Flex 3 ). However, you must pay attention to the following points.

Player dependency

Be sure to compile Flash Player 10. Flash Player 10 is required for flex 4 beta.

The font selector requires a namespace.

The CSS font selector names the flex class as style. For example, the following is the font selector of Button and datefield:

 
Button {
Cornerradius: 10;
}
Datefield {
Color: #780800;
}
 

From flex 4 beta, namespace is required when the application uses a font selector. If you only use the mxml 2006 namespace in the flex application, add the following default namespace declaration to CSS:

 
<Mx: style>

@ Namespace "http://www.adobe.com/2006/mxml ";
...
</MX: style>
 

If you use multiple namespaces in an application, you must provide each namespace in CSS. For examples, see namespaces and packages in flex 4 beta later in this article.

If the application uses methods such as stylemanager. getstyledeclaration ("button"), the font selector must contain its package. For example, the call to getstyledeclaration () is changed to stylemanager. getstyledeclaration ("MX. Controls. Button ").

Theme change

The default topic of the Flex 3 (HALO) component is currently the spark topic. Therefore, when you use flex 4 Beta to compile an application, it may adjust its appearance and size. However, if you want to use the appearance of Flex 3, you can still do it, because flex 4 beta contains the halo topic of Flex 3. To use the halo topic for compilation, you can use-Compatibility-version = 3.0Flag or use-theme as an additional compiler parameter to compile the application. In flash Builder 4 beta, you can change "Additional compiler arguments" (Other compiler parameters) in the "flex compiler" section of the "properties" panel) set to do this (see figure 1 ). If you want to use other compiler parameters, make sure that the framework/themes/halo directory is included in your source path.

Figure 1.Set other compiler Parameters

If you choose to use a new spark topic, note that many styles that can be used for the halo topic cannot be used for the spark topic. Spark topics only support a limited number of styles, includingBasecolor,Color,Contentbackgroundcolor,Focuscolor,Symbolcolor,SelectioncolorAndRolovercolor. To use the spark topic to change the visible parts such as borders or rounded corners on the component, you need to create a custom appearance. Flex 4 beta also adds a line-Frame Design for fast models.

In addition to topic changes, the default pre-download tool for the flex 4 beta application has been changed to MX. preloaders. sparkdownloadprogressbar. This lightweight predownload can shorten the startup time. To use the Flex 3 predownload, you only need to change the code line. InApplicationAdd the following content to the tag:Preloader = "MX. preloaders. downloadprogressbar".

If you want to migrate applications from Flex 3 to flex 4 Beta, I do not recommend replacing each Flex 3 halo component with the corresponding flex 4 beta component. This may not be a good way to invest time. You should switch to the flex 4 beta component architecture for new applications.

Overview of flex 4 beta architecture changes

One of the important theme of flex 4 beta is "careful design ". This goal involves creating a smoother workflow between the designer and the developer. To help achieve this, the framework clearly divides the visible part of the component and its remaining behavior. In Flex 3, component code includes logic centered on its behavior, layout, and visual changes. In Flex 4 beta, components are divided into different classes and each class is responsible for handling specific behaviors.

The description in the gumbo architecture document * is as follows:

"The main component class, that is, the class that matches the mxml Tag Name of the component, encapsulates the Core Behavior of the component. This includes defining the event scheduled by the component, the data represented by the component, any sub-component that consists of the main component, and managing and tracking the status of the internal component (we will discuss the status in detail later ).

The corresponding component class is an appearance class, which is responsible for managing all content related to the visual appearance of the component, including graphics, layout, data representation, changing the appearance of different states, and transition from one state to another. In the halo model, the appearance of the Flex component is only responsible for the resources of a certain graphic part of the component. To change any other aspect of the component's appearance, such as layout or State Visualization, You need to subclass the component and directly edit the ActionScript code. In the gumbo model, all of this is defined in the appearance class in a declarative manner, and is mainly defined by a new graphic tag named fxg tag ."

To learn more about the new graphic labels in flex 4 beta, read the fxg 1.0 specification *.

As an example of the above architecture, you can refer to the code of the spark. components. Button class. This class only contains the logic centered on Component behavior. Define all the visible parts of this evil component in the appearance class spark. Skins. Default. buttonskin.

Considering the performance, flex 4 beta provides developers with construction blocks to choose functions as needed. By default, not all applications require heavyweight features such as rolling and virtualization.

Namespace and package in flex 4 Beta

Keep Flex 3 classes in the same MX. * In the package, flex 4 beta introduces spark for components, core classes, effects, filters, la S, primitives, appearances, and utils. * package.

Flex 4 beta provides a new set of components and effects that share many of the same class names with the Flex 3 component. To avoid name conflicts in mxml, flex 4 beta comes with four unique namespaces: mxml 2006, mxml 2009, spark, and halo.

Mxml 2006:The old version of the mxml language namespace used in the previous version of flex. The Flex 3 application compiled using Flex 4 beta can continue to use this namespace.

Uri: http://www.adobe.com/2006/mxml

Default Prefix: MX

Mxml 2009:The new mxml language namespace. This is purely a language namespace,NoContains component labels.

Uri: http://ns.adobe.com/mxml/2009
Default Prefix: FX

Spark:This namespace contains all new spark components. It should be used with the namespace of the mxml 2009 language.

Uri: Library: // ns.adobe.com/flex/spark
Default Prefix: S

Halo:This namespace contains all halo components. It should be used with the namespace of the mxml 2009 language.

Uri: Library: // ns.adobe.com/flex/halo
Default Prefix: MX

The following is a concise example of creating a simple flex 4 beta application using the mxml 2009, spark, and halo namespaces. It uses a halo datechooser and a spark button.

<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/halo">

<Mx: datechooserId ="Main_calendar"X ="20"Y ="20"/>
<S: buttonLabel ="Submit"X ="220"Y ="20"/>
 
</S: Application>
 

Flex 4 beta also supports multiple namespaces in CSS. If you use the mxml 2009, spark, and halo namespaces together with the font selector, You need to define a set of namespaces in the CSS definition to avoid name conflicts.

The following is an example of CSS that uses the font selector for Halo and spark components:

 
<FX: style>

@ Namespace s "Library: // ns.adobe.com/flex/spark ";
@ Namespace MX "Library: // ns.adobe.com/flex/halo ";

S | button {
Color: # ff0000;
}

MX | datechooser {
Color: # ff0000;
}

</FX: style>
 

Default property and declarations labels

The flex language allowsApplicationThe root tag contains both visual and non-visual child. Visible child andAddchild ()AddApplicationThe non-visual child is declared as an attribute. Then, the non-visual child of the new attribute declaration cannot be usedApplication. You can add these non-visual child<FX: declarations>Label. This includes effects, validators, formatters, data declarations, RPC classes, and other non-visual child generations. The following is a brief example:

<S: Application xmlns: FX = "http://ns.adobe.com/mxml/2009"
Xmlns: S = "Library: // ns.adobe.com/flex/spark">
<FX: declarations>
<S: fade id = "fadeeffect" target = "{targetbutton}" alphafrom = "1" alphato = "0"/>
</FX: declarations>
<S: button id = "targetbutton"/>
<S: button label = "play effect" Click = "fadeeffect. Play ()" x = "80"/>
</S: Application>
 

Add components and containers

As mentioned above, flex 4 beta introduces many new component classes that use the new architecture, which should make the appearance and other custom operations easier. The following table lists the Flex 3 halo components and their corresponding components of flex 4 beta spark:

Flex 3 halo Components	Flex 4 beta spark component
MX. Controls. Button	Spark. components. Button
MX. Controls. buttonbar	Spark. components. buttonbar
MX. Controls. checkbox	Spark. components. checkbox
MX. Controls. ComboBox	Spark. components. dropdownlist (not editable)
MX. Controls. horizontallist	Spark. components. List (with a horizontallayout)
MX. Controls. hrule	Spark. primitives. Line
MX. Controls. hscrollbar	Spark. components. hscrollbar
MX. Controls. hslider	Spark. components. hslider
MX. Controls. Image	Spark. primitives. bitmapimage
MX. Controls. linkbar	Spark. components. buttonbar (with a custom appearance)
MX. Controls. linkbutton	Spark. components. Button (with a custom appearance)
MX. Controls. List	Spark. components. List
MX. Controls. numericstepper	Spark. components. numericstepper
MX. Controls. radiobutton	Spark. components. radiobutton
MX. Controls. radiobuttongroup	Spark. components. radiobuttongroup
MX. Controls. textarea	Spark. components. textarea
MX. Controls. textinput	Spark. components. textinput
MX. Controls. tilelist	Spark. components. List (with a tilelayout)
MX. Controls. togglebuttonbar	Spark. components. buttonbar
MX. Controls. videodisplay	Spark. components. videoplayer
MX. Controls. vrule	Spark. primitives. Line
MX. Controls. vscrollbar	Spark. components. vscrollbar
MX. Controls. vslider	Spark. components. vslider
MX. Core. Application	Spark. components. Application
MX. Core. Window	Spark. components. Window
MX. Core. Wide wedapplication	Spark. components. parse wedapplication
MX. containers. Canvas	Spark. components. Group
MX. containers. hbox	Spark. components. hgroup
MX. containers. Panel	Spark. components. Panel
MX. containers. Tile	Spark. components. group (with a tilelayout)
MX. containers. vbox	Spark. components. vgroup

Adobe encourages you to use HALO components and containers with spark components. Since Adobe builds components on the same base class (uicomponent), spark and halo should be able to achieve comprehensive interoperability. The following table lists the components and containers without spark direct equivalence classes.

Flex 3 class, no direct flex 4 beta corresponding class
MX. Controls. Alert
MX. Controls. colorpicker
MX. Controls. DataGrid
MX. Controls. datechooser
MX. Controls. datefield
MX. Controls. Menu
MX. Controls. menubar
MX. Controls. popupbutton
MX. Controls. popupmenubutton
MX. Controls. progressbar
MX. Controls. richtexteditor
MX. Controls. tabbar
MX. Controls. Tree
MX. containers. Accordion
MX. containers. applicationcontrolbar
MX. containers. controlbar
MX. containers. dividedbox
MX. containers. Form
MX. containers. Grid
MX. containers. tabnavigator
MX. containers. titlewindow
MX. containers. viewstack

Changes in status syntax

Flex 4 beta upgraded the status feature to a comprehensive mxml language feature. Therefore, you may find that the status is more flexible and direct. New State syntaxInlineTo a greater extent, you can specify specific State Changes in the context. The following are the main differences in the flex 4 beta Syntax:

• Only States are defined in the status array.
• In the new State syntaxAddchildAndRemovechild. You must useIncludeinAndExcludefromAttribute defines the role of a component in a specific State on the component.

In the following Flex 3 exampleCurrentstateIsSubmitstateTo delete a textinput. This method can be very detailed for complex states.

<Mx: States>
<Mx: State name = "submitstate" basedon = "">
<Mx: addchild relativeto = "{loginform}">
<Mx: button label = "Submit" Bottom = "10" Right = "10"/>
</MX: addchild>
<Mx: removechild target = "{firsttextinput}"/>
</MX: State>
</MX: States>

<Mx: textinput id = "firsttextinput"/>
<Mx: canvas id = "loginform"/>
 

The following is a usage example:IncludeinAndExcludefromAnd simpler flex 4 beta code.

 
<S: States>
<S: State name = "submitstate"/>
</S: States>
<S: textinput id = "firsttextinput" excludefrom = "submitstate"/>
<S: Group ID = "loginform">
<S: button label = "Submit" Bottom = "10" Right = "10" includein = "submitstate"/>
</S: group>
 

• Setproperty,SetstyleAndSeteventhandlerReplacedPointSyntax, which allows you to limit the mxml attribute values that have specific status identifiers.

In the following Flex 3 example, the code isSubmitstateA button in defines attributes, styles, and events.

 
<Mx: States>
<Mx: State name = "submitstate" basedon = "">
<Mx: setproperty target = "{submitbutton}" name = "label" value = "Submit"/>
<Mx: setstyle target = "{submitbutton}" name = "textdecoration" value = "underline"/>
<Mx: seteventhandler target = "{submitbutton}" name = "click" handler = "trace ('done');"/>
</MX: State>
<Mx: State name = "clearstate" basedon = "">
<Mx: setproperty target = "{submitbutton}" name = "label" value = "clear"/>
<Mx: seteventhandler target = "{submitbutton}" name = "click"Handler = "emptydocument ()"/>
</MX: State>
</MX: States>

<Mx: button id = "submitbutton"/>
 

In Flex 4 beta, the Code is as follows:

 
<S: States>
<S: State name = "submitstate"/>
<S: State name = "clearstate"/>
</S: States>

<S: button label. submitstate = "Submit" textdecoration. submitstate = "underline"
Click. submitstate = "trace ('done')" click. clearstate = "emptydocument ()"
Label. clearstate = "clear" textdecoration. clearstate = "NONE"/>
 

• The component cannot be in the undefined or empty state. By default, the first State declared is the initial state of the component.
  When the document uses the mxml 2009 language namespace, you can use the new syntax. You can use both the old and new status syntaxes. Only the old syntax can be used in the mxml 2006 namespace.

In addition, each component now supports a set of States defined in the appearance class, which makes it easier to apply visual changes based on the component status. For example, if you view the appearance of the spark button, you will find that the following States have been defined:

 
<S: States>
<S: State name = "up"/>
<S: State name = "over"/>
<S: State name = "down"/>
<S: State name = "disabled"/>
</S: States>
 

The buttonskin class defines visual changes of spark buttons in various States.

The preceding section briefly introduces the new Flex 4 beta state syntax. For more details, see enhanced State syntax specification *.

Changes in results

The performance architecture of flex 4 Beta has been significantly improved. Although halo effects can only be used for controls that are not based on uicomponent, spark effects can be used for any target, including new graphic elements in the framework. All these effect classes are included in spark. effects. * package. Since spark effects can be used for Halo components, spark components, and graphic elements, Adobe recommends that you use spark effect classes in future applications.

I did not go into details about this issue, because you can learn more about the new features in the effect class through the effect article in the Adobe Flex 4 SDK beta of Chet Haase.

Changes in Layout

The previous flex version defines the component and container layout in each control. Therefore, components such as list, tilelist, and horizontallist share the same functions other than layout. Their layout logic is still defined in these component classes. In Flex 4 beta, the layout is separated from the component. Currently, spark components such as application, list, buttonbar, and Panel can be declared to define the layout. Among all components, the Group class is responsible for managing the inclusion, and the layout of the child of the group is delegated to the relevant layout object. In addition to fxg graphic elements, the layout also supports spark and halo components. You can even change the layout at runtime.

As a developer, you can easily write custom la S and cut them into or out of individual components. The following is an example of defining vertical list, horizontal list, And Collage list.

Vertical list (the default layout of spark list is verticallayout ):

 
<S: LIST/>
 

Horizontal list:

<S: List>
<S: layout>
<S: horizontallayout/>
</S: layout>
</S: List>
 

Collage list:

 
<S: List>
<S: layout>
<S: tilelayout/>
</S: layout>
</S: List>
 

As mentioned above, the flex 4 beta architecture aims to provide construction blocks for developers to select functions as needed. By default, virtualization and scrolling are disabled. To add the scroll bar option on the group and enable virtualization, You need:

1) on the layout objectUsevirtuallayoutSetTrue2)ScrollerAdd component to group.

The following is an example of spark panel virtualization and scrolling:

<S: panel title = "horizontal panel" width = "300" Height = "220" Left = "20" Top = "20">
<S: scroller width = "100%" Height = "100%">
<S: group>
<S: layout>
<S: horizontallayout usevirtuallayout = "true"/>
</S: layout>
<S: textinput/>
<S: button label = "clear"/>
<Mx: datechooser/>
<S: button label = "Submit"/>
</S: group>
</S: scroller>
</S: Panel>
 

For more information about all layout enhancements in flex 4 beta, including better support for transformations, see spark layout specifications *.

Use text

All Spark components use the new text engine in Flash Player 10. These new classes provide low-level support for controlling text measurement standards, vertical text, hyphens, bidirectional text, and other font elements. In addition, the font of a device now has most of the built-in font functions, which can be used to remove sertices, rotate, and set styles. Flex 4 beta uses this feature in all spark components that use text. For more information about the text and text components provided by Flex 4 beta, see the text elements section in flex 4 features and migration guide.

The spark component also uses definefont4 in Flash Player 10 and air 1.5 to embed the font format. Since the latest beta version, Halo components cannot use the definefont4 format. Mix spark and halo components in oneApplicationsThis causes some overhead. Currently, to use the same embedded font for all components, You need to embed the font twice, that is, use definefont4 for spark components and definefont3 for Halo components.

The following is an example of embedding the font Arial In the flex 4 beta application using spark textinput and halo DataGrid.

 
<FX: style>

@ Namespace s "Library: // ns.adobe.com/flex/spark ";
@ Namespace MX "Library: // ns.adobe.com/flex/halo ";

@ Font-face {
SRC: URL ("Arial. TTF ");
Fontfamily: "arialdf3 ";
}

@ Font-face {
SRC: URL ("Arial. TTF ");
Fontfamily: "arialdf4 ";
CFF:True;
}

S | textinput {
Fontfamily: "arialdf4 ";
Fontantialiastype: "normal ";
}
MX | DataGrid {
Fontfamily: "arialdf3 ";
Fontantialiastype: "normal ";
}
</FX: style>
 

Note that when embedding a font for the spark component, you must specify CFF: true in the font definition.

The solution for embedding fonts for spark and halo components is still in the development stage, so the process should be simpler in the future.

Backward compatibility with Flex 3

Like Flex 3, you can use other compilation parameters to compile applications:

 
-Compatibility-version = 3.0.0.
 

This compiler parameter allows applications to use certain Flex 3 behavior, rather than the new Flex 4 beta behavior. To be supported in flex 4 Beta-Compatibility-versionFor a complete list of parameter backward compatibility changes, seeBackward compatibility document *.

Note:When Flex 3 compatibility is called, a subset of flex 4 beta behavior changes cannot be selectively retained. If you use parameters-Compatibility-version = 3.0.0Compile and you will get all the Flex 3 actions described in the document.

Follow-up work

Migrating from Flex 3 to flex 4 beta may be less painful. This framework is intended to be as backward compatible as possible. In addition, when you are familiar with the new architecture, you will find that it is actually more"Flexible"! For more information about the flex 4 beta function, visit the Web help *.