SDN Mentor Hands On - Exercise 2

®

Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Flex Component 101

dan mcweeney

®


What’s Flex

“…is a cross platform, open source framework for creating rich Internet applications that run identically in all major browsers and operating systems, and now the desktop with Adobe AIR”

Runs just on the Flash Player

“Flash content reaches 99.0% of Internet viewers”

®


What’s Flex

“…is a cross platform, open source framework for creating rich Internet applications that run identically in all major browsers and operating systems, and now the desktop with Adobe AIR”

Runs just on the Flash Player

“Flash content reaches 99.0% of Internet viewers”

Makes Pretty Uis easy

Integrates with SAP Web Services

Java via BlazeDS

Flash Islands

®


Point of reuse in the Flex Framework for UI components

Mostly written in AS but can be created in MXML

Skinable through CSS

Flex Components

®


Flex Applications

Created with many components

Stitched together using Actionscript

The actual run-able unit

®


Flash Islands

Allows Flex Applications to talk to the Web Dynpro Framework Set Data

Get Data

Receive and Fire Events

Why the hell are you talking about Components!?!?

®


Flex Basics

MXML (backronymed to Magic eXtensible Markup Language) XML based markup for defining UI and components

<mx:Button fillColors=“[blue,blue]”color=“red” label=“This is a button”>

</mx:Button>

®


Flex Basics

Actionscript 3 Object oriented language similar to Javascript, both adhere closely to

ECMAScript standards

package{

import mx.controls.Button;

public class MyButton extends Button{

public function MyButton(){

super();setStyle("fillColors", ["blue","blue"]);setStyle("color", "red");label = ”This is a button";

}

}}

®


Actionscript Cheat Sheet

Class Syntax

package i.could.be.useful {

public class Foo extends Bar {

public var imPublic:XML;

protected var imProtected:Number;

private var imPrivate:String;

public function Foo(){

super();

}

}

}

®



Traverse XML

private function traverseXML(xml:XML):Boolean{

for each(var node:XML in xml.collectionToTraverse){

trace("do something with the name");

}

return true;

}

Get an attribute of a XML Node

node.@attributeName

®



Binding Bindings allow you to connect a component to a data set

Data bindings are one way in Flex, from the data to the control. The control has event[s] to allow you to update the data item e.g. “changed”

®



Setters and Getters Flex has public properties but also setters and getters

The standard way

package{

public class Foo{

private var _myString:String;

public function Foo(){}

public function get myString():String{

return _myString;

}

public function set myString(o:String){

_myString = o;

}

}

}

®



Component Methods you might need

addChild(child:DisplayObject):DisplayObject

®



Print to Console

trace(“this will make it to the console to help you debug”);

Alert Window

Alert.show(“This is the text”,”this is the title”);

Date post:	24-Dec-2014
Category:	Technology
Upload:	danmcweeney
View:	1,170 times
Download:	1 times

SDN Mentor Hands On - Exercise 2

Technology