Issuu on Google+

Movement of Components, Assigning Dynamic Properties Binding Positions, size, SetStyle, eventlistener


Text Controls Control

Multiline

user Input

usage

Label

No

No

Label of a component

TextInput

No

Yes

Data from the user (both i/p and o/p)

Text

Yes

No

Dynamic text with multiline

TextArea

Yes

Yes

Built in scrollbar, used for multi paragraphs with small width & height

RichTextEditor

Yes

Yes

Built in scrollbar and adv formatting options for the user at run time. Used for user setting formats of text( like compose text )


Data Binding • Binding automatically copies the value of a property of a source object to a property of a destination object when the source property changes • Data binding lets you pass data between client-side objects. • Data binding is the process of tying the data in one object to another object •


Binding examples • 1. 2. 3.

3 things to remember { } should be used for binding [Bindable] before the variable declaration <mx:Binding source="No default." destination="No default" />

Some samples ***You cannot bind to style properties.


Styles • All components have styles: • Styles = Colors + Margins + Fonts + skins • Styles refer to all the style properties of a component. • You can create multiple css files for different styling. • Loading dynamic css files. • Give one sample from scalenine.com • global{ } (will set common style properties of all components in the application)


skinning â&#x20AC;˘ Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements â&#x20AC;˘ Skins can define the entire appearance, or only a part of the appearance, of a component in various states


external fonts <mx:Style> @font-face { src:url("assets/MyriadWebPro.ttf"); font-family: myMyriadWebPro; } </mx:Style> you can embed TrueType font (TTF) or OpenType font (OTF) families in your Flex application . *(also swf)

themes â&#x20AC;˘A theme is a collection of style definitions and skins that define the look and feel of a Flex application â&#x20AC;˘It can be a complete reskinning of all the components used by the application.


Button skins State

Skin property

Default skin class

down

downSkin

mx.skins.halo.ButtonSkin

over

overSkin

mx.skins.halo.ButtonSkin

up

upSkin

mx.skins.halo.ButtonSkin

disabled

disabledSkin

mx.skins.halo.ButtonSkin

selectedDisabled

selectedDisabledSki n

mx.skins.halo.ButtonSkin

selectedDown

selectedDownSkin

mx.skins.halo.ButtonSkin

selectedOver

selectedOverSkin

mx.skins.halo.ButtonSkin

selectedUp

selectedUpSkin

mx.skins.halo.ButtonSkin


Dynamic styles â&#x20AC;˘ Use the setStyle() and getStyle() methods to manipulate style properties on instances of controls


Effects (Behaviors) â&#x20AC;˘ A behavior is a combination of a trigger paired with an effect. â&#x20AC;˘ A trigger is an action, such as a mouse click on a component, a component getting focus, or a component becoming visible. â&#x20AC;˘ An effect is a visible or audible change to the target component that occurs over a period of time, measured in milliseconds


Effects • Effects can also be applied in <mx:style> tag. • Effect has properties called play and end.


Effects 1. AnimateProperty 2. Blur 3. Dissolve 4. Fade 5. Glow 6. Iris 7. Move 8. Pause 9. Resize 10. Rotate 11. SoundEffect 12. WipeLeft 13. WipeRight 14. WipeUp 15. WipeDown 16. Zoom


Available triggers 1. addedEffect 2. creationCompleteEffect 3. focusInEffect. 4. focusOutEffect. 5. hideEffect. 6. mouseDownEffect 7. mouseUpEffect. 8. moveEffect. 9. removedEffect. 10. resizeEffect 11. rollOutEffect 12. rollOverEffect 13. showEffect


<?xml version="1.0"?> <!-- behaviors\ASplayVBox.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="createEffect(event);" > <mx:Script> <![CDATA[ // Import effect class. import mx.effects.Resize; // Create a Resize effect private var resizeLarge:Resize = new Resize(); private function createEffect(eventObj:Event):void { // Set the TextArea as the effect target. resizeLarge.target=myTA; // Set resized width and height, and effect duration. resizeLarge.widthTo=150; resizeLarge.heightTo=150; resizeLarge.duration=750; } ]]> </mx:Script> <mx:VBox borderStyle="solid"> <mx:HBox> <mx:Button label="Start" click="resizeLarge.end();resizeLarge.play();"/> <mx:Button label="Reset" click="myTA.width=100;myTA.height=100;"/> </mx:HBox> <mx:TextArea id="myTA" height="100" width="100" text="Here is some text."/> </mx:VBox> </mx:Application>


<?xml version="1.0"?> <!-- behaviors\AnimateHScrollPos.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Sequence id="animateScaleXUpDown" > <mx:AnimateProperty property="scaleX" fromValue="1.0" toValue="1.5"/> <mx:AnimateProperty property="scaleX" fromValue="1.5" toValue="1.0"/> </mx:Sequence>

<mx:Button label="Scale Button" mouseDownEffect="{animateScaleXUpDown}"/> </mx:Application>


easing function • You can change the speed of an animation by defining an easing function for an effect. • With easing, you can create a more realistic rate of acceleration and deceleration. • function myEasingFunction(t:Number, b:Number, c:Number, d:Number):Number { ... } • t specifies time. • b specifies the initial position of a component. • c specifies the total change in position of the component. • d specifies the duration of the effect, in milliseconds.


Multiple Effects • Sequence • Parallel


Dynamic Styles & Effects Use the setStyle() and getStyle() methods to manipulate style properties on instances of controls â&#x20AC;˘ <componentID>.setStyle(styleProp:String, value:Object) â&#x20AC;˘ <componentID>.getStyle(styleProp:String)


Event Listener • Writing Dynamic Events • addEventListener() • removeEventListener()


Size and Position

Tool Box

Colors


Sample App Conditions • Move left, right, top, bottom, top-left, topright, bottom-left, bottom-right, Center. • Should be able to move with keyboard and mouse. Continuous holding should move smoothly. • Resize width, height and both. • Change color. • Add/remove components(buttons, labels) inside panel.


What we have learned? • • • • • • • •

Different text controls. Binding Dynamic Properties. Dynamic styles, effects. Dynamic events (eventlisteners, event handlers,) Dynamic Children additions CDATA – CharacterData Visit all explorers


Bluehawk