Differences between flex3 and flex4

Flex4 beta was released, a major reform since flex3. Flex4 beta provides a new component and skin architecture. As a developer of flex3, you should not encounter too many challenges when compiling your flex3 application with flex4 beta, because one of the goals of flex4 beta is to maintain compatibility with flex3.

In this article, I will provide a rough view of the flex4 beta subject belt, introduce the differences in architecture and changes in components, layout, status, and effects. In this article, Halo represents the original components of flex3 Reid. Spark represents the new component in flex4 beta.

Migrate applications to flex4 Beta

Migrating applications from flex3 to flex4 won't be too much trouble. In addition to fixing bugs and changing the default theme, you can also see that your application will work better in flex4. But you still need to pay attention to some things.

Player Dependencies

Flex4 beta requires Flash player10 support.

The style selector requires a namespace. 

For a CSS style selector, you may only need to write it like this before.

Button {<br/> cornerradius: 10; <br/>}< br/> datefield {<br/> color: #780800 ;}

However, you must add a namespace in flex4 beta.

<Mx: style> <br/> @ namespace "http://www.adobe.com/2006/mxml"; <br/>... <Br/> </MX: style>

Further, if you use stylemanager. getstyledeclaration ("button"). In flex4, you do not need to add the namespace, for example, stylemanager. getstyledeclaration ("MX. controls. button ").

Theme Changes

The topic has changed from Halo to spark by default. So your application may look different in flex4. Of course, you can also use HALO. You can use the-compatibility-version = 3.0 identifier or modify additional compiler argument (the additional compiler independent variable) to _ local en US-theme = halo. SWC.

If you choose to use spark, you will find that many styles that work in Halo do not work in spark, and spark topics only support limited styles. To modify the appearance of a skin such as border, you need to customize the skin. Flex4 also provides a wireframe skin to help you quickly build models.

In addition to the changes in the default style, the progress bar of the pre-load changes. This lightweight progress bar will shorten the start time. To use the original loading progress bar, you only need to add the following: preloader = "MX. preloaders. downloadprogressbar ".

Flex4 beta architecture change Overview

Flex4 provides designers and developers with a smoother workflow. To achieve this, the flex4 framework provides a clear demarcation between visual components and their behavior. In flex3, a component code includes logic, layout, and visual changes. However, in flex4, a component is assigned to different classes, and each class has different control aspects.

Pack and namespace in flex4

Flex4 stores all flex3 classes in the MX. * package. Of course, flex also provides a new spark. * package to save components, core classes, effects, filters, la S, skins, and tools.

Flex provides a set of components, many of which have the same name as HALO. To avoid name conflicts, flex4 comes with four different namespaces: mxml 2006, mxml 2009, spark, and halo.

Mxml 2006: The out-of-date mxml language namespace, used in flex3. If flex4 is used to compile flex3 applications, you can still use this space.

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

Default Prefix: MX

Mxml 2009: The brand new mxml language namespace. It is a pure language namespace and does not contain components.

Uri: http://ns.adobe.com/mxml/2009

Default Prefix: FX

Spark: This namespace contains all the new spark components, which should be used with mxml 2009.

Uri: Library: // ns.adobe.com/flex/spark

Default Prefix: S

Halo: This namespace contains all halo components and should be used with mxml2009.

Uri: Library: // ns.adobe.com/flex/halo

Default Prefix: MX

 

Flex4 also supports various namespaces in CSS. Therefore, when using CSS, you must note that the namespace has avoided conflicts.

<FX: style> <br/> @ namespace s "Library: // ns.adobe.com/flex/spark"; <br/> @ namespace MX "Library: // ns.adobe.com/flex/halo "; <br/> S | button {<br/> color: # ff0000; <br/>}< br/> MX | datechooser {<br/> color: # ff0000; <br/>}< br/> </FX: style>

New components and containers

Components

Flex4 has modified and added some components, some of which are halo, but spark does not. Adobe recommends that you use HALO and spark together. There is nothing to do with both of them. You can check the URL below.
Http://www.adobe.com/devnet/flex/articles/flex3and4_differences_04.html

Change of State syntax

The State syntax has changed and becomes more flexible and direct. You can even change your status based on context. The following are the key points:

1. Only the status is defined in the status array.

2. addchild and removechild cannot be reused. Replace the includein and excludefrme attributes. These two attributes are component attributes.

Let's look at the example!

This is the method of flex3 application status.

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

This is flex4

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

3. setproperty, setstyle, and setevent are replaced by vertex syntax.

The following describes how flex3 works.

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

The following describes how to use flex4.

<S: States> <br/> <s: State name = "submitstate"/> <br/> <s: state name = "clearstate"/> <br/> </S: States> <br/> <s: button label. submitstate = "Submit" textdecoration. submitstate = "underline" <br/> click. submitstate = "trace ('done')" click. clearstate = "emptydocument ()" label. clearstate = "clear" textdecoration. clearstate = "NONE"/>

4. The component cannot be in the stateless or empty state. It is the first declared State by default.

Flex4 Beta has other features, which will be discussed later.

Adobe officially said the transition from flex3 to flex4 to painless. What do you think?

The original Article: http://www.adobe.com/devnet/flex/articles/flex3and4_differences_07.html