![Spark
layout
classes
• Classes
are
defined
in
the
spark.layouts
package
– BasicLayout,
HorizontalLayout,
TileLayout
and
Ver3calLayout
• Must
be
used
with
containers
• Defines
how
children
within
a
container
are
laid
out
• Each
container
has
a
layout
property
–
–
–
–
Property
of
the
container,
example
:
WindowedApplicaHon
Use
the
layout
block
InstanHate
the
layout
class
inside
the
block
The
layout
property
has
a
value
that
is
an
instance
of
another
class
<s:WindowedApplicaHon
...>
<s:layout>
[..Layout
class
goes
here..]
</s:layout>
</s:WindowedApplicaHon>
Adobe
AIR
Programming,
Pasi
Manninen.
30](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-30-320.jpg)
![AcHonScript
event
handler
funcHons
• Use
event
handler
funcHons
– If
the
acHon
requires
more
than
one
line
of
code
– Enables
reuse
– Keeps
code
cleaner
• Place
code
within
a
Script
tag
body
• Everything
inside
the
Script
tag
body
is
treated
as
XML
by
parser
• Use
CDATA
to
prevent
the
compiler
from
interpreHng
the
AcHonScript
code
as
XML
<fx:Script>
<![CDATA[
private
funcHon
dateChangeHandler():void
{
Alert.show('You
have
selected
'
+
sDate.selectedDate.toDateString());
}
]]>
</fx:Script>
<mx:DateChooser
id="sDate"
change="dateChangeHandler()"/>
Adobe
AIR
Programming,
Pasi
Manninen.
52](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-52-320.jpg)
![Using
Custom
Events
• Communicate
informaHon
and
data
between
applicaHon
components
• Create
own
event
class
that
extends
from
Event
class
– handle
event
type,
bubling
and
cancellabe
in
constructor
– override
clone()-‐method
(used
to
create
a
copy
of
Event
object)
• Custom
events
are
declared
with
<fx:Metadata>
tag
<fx:Metadata>
[Event(name="custom
event
name",
type="event
object
type")]
</fx:Metadata>
• Use
dispatchEvent()-‐method
to
”send”
event
with
data
Adobe
AIR
Programming,
Pasi
Manninen.
60](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-60-320.jpg)
![Playing
an
effect
• Use
the
play()
method
of
the
effect
instance
in
a
system
or
user
event
handler
• Use
inline
or
funcHon
coding
to
start
effect
<s:BuTon
click="shake.play()"/>
<fx:Script>
<![CDATA[
private
funcHon
checkLogin():void
{
shake.play();
}
]]>
</fx:Script>
<s:BuTon
click="checkLogin()"/>
Adobe
AIR
Programming,
Pasi
Manninen.
73](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-73-320.jpg)
![HostComponent
direcHve
• The
HostComponent
metadata
direcHve
is
central
to
the
component
and
skin
contract
• Define
the
HostComponent
direcHve
in
the
skin
class
file
• Define
the
host
component
by
using
a
Metadata
tag
with
the
following
syntax
• Define
the
component
class
on
which
the
skin
will
be
applied
(below
example
from
BuTon)
<fx:Metadata>
[HostComponent("spark.components.BuTon")]
</fx:Metadata>
Adobe
AIR
Programming,
Pasi
Manninen.
90](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-90-320.jpg)
![One
and
two-‐way
Data
Binding
in
MXML
• Braces
{}
are
the
most
commonly
used
technique
to
use
data
binding
• Bind
properHes
without
wriHng
any
actual
code
<?xml
version="1.0"
encoding="uX-‐8"?>
<s:ApplicaHon
xmlns:fx="hTp://ns.adobe.com/mxml/2009"
…>
<s:layout>
<s:VerHcalLayout
/>
</s:layout>
<fx:Script>
//
two-‐way
data
binding
<![CDATA[
<s:TextInput
id="textInput1"
text="@{textInput2.text}"
/>
[Bindable]
<s:TextInput
id="textInput2"
/>
public
var
value:String
=
"Hello
Flex!";
]]>
</fx:Script>
<s:Label
text="{value}"
/>
<s:TextInput
id="textInput"
change="{value=textInput.text}"
/>
</s:ApplicaHon>
Adobe
AIR
Programming,
Pasi
Manninen.
99](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-99-320.jpg)
![Binding
XML
Object
• Bind
the
XML
object,
all
of
the
properHes
of
the
XML
bind
as
well
…
<fx:Script>
<![CDATA[
[Bindable]
private
var
xml:XML
=
<employees>
<employee
id="1">
<firstname>John</firstname>
<lastname>MaTerson</lastname>
<room>101</room>
</employee>
</employees>;
]]>
</fx:Script>
<s:Label
text="Employee
name:
{xml.employee.(@id==1).firstname}
{xml.employee.(@id==1).lastname}"
/>
…
Adobe
AIR
Programming,
Pasi
Manninen.
100](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-100-320.jpg)
![Retrieving
data
with
lastResult
• AMer
the
request
executes,
returned
data
is
placed
in
the
object’s
lastResult
property
• Access
the
data
as
[instance
id].lastResult
• Returned
data
format
is
configurable
using
the
resultFormat
property
<mx:HTTPService
id="EmployeeService"
url=
"Employees.xml"
showBusyCursor="true"
resultFormat="e4x"
/>
Adobe
AIR
Programming,
Pasi
Manninen.
111](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-111-320.jpg)
![Displaying
message
with
Alert
pop-‐up
• Fault
messages
can
be
displayed
in
a
pop-‐up
using
the
Alert
class
• Import
from
mx.controls.Alert
• Use
show()
method
with
the
most
used
parameters
(in
order)
• text:
shown
in
the
body
of
the
pop-‐up
• 3tle:
shown
in
the
header
of
the
pop-‐up
• An
OK
buTon
appears
by
default
to
close
the
Alert
pop-‐up
<fx:Script>
<![CDATA[
import
mx.controls.Alert;
Alert.show("Text
of
the
alert
box","Alert
Box
Title");
]]>
</fx:Script>
Adobe
AIR
Programming,
Pasi
Manninen.
118](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-118-320.jpg)
![OS
InteracHons:
Call
• Use
URLRequest
and
navigateToURL
methods
to
open
Phone
applicaHon
to
place
a
call
• Use
tel:
as
a
protocol
<fx:Script>
<![CDATA[
protected
funcHon
callBuTon_clickHandler(event:MouseEvent):void
{
//
make
a
call
var
callString:String
=
"tel:";
callString
+=
callTextInput.text;
navigateToURL(new
URLRequest(callString));
}
]]>
</fx:Script>
Adobe
AIR
Programming,
Pasi
Manninen.
132](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-132-320.jpg)
![OS
InteracHons:
SMS
• Use
URLRequest
and
navigateToURL
methods
to
open
SMS
applicaHon
to
create
message
• Use
sms:
as
a
protocol
<fx:Script>
<![CDATA[
protected
funcHon
callBuTon_clickHandler(event:MouseEvent):void
{
//
make
a
call
var
callString:String
=
"tel:";
callString
+=
callTextInput.text;
navigateToURL(new
URLRequest(callString));
}
]]>
</fx:Script>
Adobe
AIR
Programming,
Pasi
Manninen.
133](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-133-320.jpg)
![OS
InteracHons:
Email
• Use
URLRequest
and
navigateToURL
methods
to
launch
Email
applicaHon
to
send
email
• Use
mailto:
as
a
protocol
and
subject=
and
body=
properHes
to
assign
data
<fx:Script>
<![CDATA[
protected
funcHon
sendBuTon_clickHandler(event:MouseEvent):void
{
//
send
email
var
emailString:String
=
"mailto:";
emailString
+=
sendToTextInput.text;
emailString
+=
"?subject="+subjectTextInput.text;
emailString
+=
"&body="+messageTextArea.text;
navigateToURL(new
URLRequest(emailString));
}
]]>
</fx:Script>
Adobe
AIR
Programming,
Pasi
Manninen.
134](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-134-320.jpg)
![OS
InteracHons:
Open
Web
Page
• Use
navigateToURL
method
to
launch
Browser
applicaHon
to
show
web
page
<fx:Script>
<![CDATA[
protected
funcHon
openBuTon_clickHandler(event:MouseEvent):void
{
//
open
web
page
navigateToURL(new
URLRequest(urlTextInput.text));
}
]]>
</fx:Script>
Adobe
AIR
Programming,
Pasi
Manninen.
135](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-135-320.jpg)
![OS
InteracHons:
StageWebView
• The
StageWebView
class
displays
HTML
content
in
a
stage
view
port
• In
mobile
StageWebView
uses
the
system
web
control
provided
by
the
device
operaHng
system
(desktop
AIR
WebKit
engine)
<fx:Script>
<![CDATA[
import
mx.events.FlexEvent;
private
var
stageWebView:StageWebView;
private
var
rect:Rectangle;
protected
funcHon
openBuTon_clickHandler(event:MouseEvent):void
{
//
open
url
to
stagewebview
stageWebView.loadURL(urlTextInput.text);
}
protected
funcHon
applicaHon_applicaHonCompleteHandler(event:FlexEvent):void
{
//
create
a
stagewebview
viewport
if
(StageWebView.isSupported)
{
stageWebView
=
new
StageWebView();
stageWebView.viewPort
=
new
Rectangle(5,100,stage.width-‐10,
stage.height-‐110);
stageWebView.stage
=
this.stage;
}
else
{
urlTextInput.text
=
"StageWebView
not
supported";
}
}
]]>
</fx:Script>
<s:TextInput
id="urlTextInput"
leM="5"
right="209"
top="15"
text="hTp://www.jamk.fi"/>
<s:BuTon
id="openBuTon"
right="5"
top="5"
label="Open
URL"
click="openBuTon_clickHandler(event)"/>
Adobe
AIR
Programming,
Pasi
Manninen.
136](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-136-320.jpg)
![Assign
parameters
to
SQL
statement
• RunHme
data
can
be
added
to
the
SQL
statement
with
parameters
• Before
execuHon,
parameters
in
the
statement
are
replaced
by
data
assigned
to
those
named
parameters
in
the
parameters
property
dbStatement.parameters[":name"]
=
nameInput.text;
dbStatement.parameters[":Htle"]
=
HtleInput.text;
dbStatement.text
=
"INSERT
INTO
customer
(name,
Htle)
VALUES
(:name,:Htle)";
Adobe
AIR
Programming,
Pasi
Manninen.
153](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-153-320.jpg)
![Handling
returned
data
• The
target
of
a
SQLResult
event
is
the
SQLStatement
which
dispatched
the
result
event
• To
retrieve
query
results,
get
the
SQLResult
object
from
the
SQLStatement,
using
the
getResult()
method
• SELECT
query
data
is
in
the
result
object’s
data
property
as
an
Array
of
untyped
objects,
each
with
properHes
matching
the
column
names
from
the
SELECT
statement
• ResulHng
data
will
oMen
be
assigned
to
the
applicaHon’s
data
model,
to
which
display
components
are
bound
[Bindable]
private
var
resultData:Array;
private
funcHon
selectHandler(event:SQLEvent):void
{
var
dbStatement:SQLStatement
=
SQLStatement(event.target);
var
dbResult:SQLResult
=
dbStatement.getResult();
resultData
=
dbResult.data;
}
Adobe
AIR
Programming,
Pasi
Manninen.
155](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-155-320.jpg)
![Binding
the
view
to
the
model
• Following
the
MVC
design
paTern,
bind
the
view
to
the
model
• Data
binding
requires
– a
source
property
– a
desHnaHon
property
– triggering
event
• Bind
to
a
value
object
instance
<s:TextInput
id="firstnameInput"
text="{Employee.firstname}"/>
• Bind
to
a
value
object
within
a
collec3on
<s:TextInput
id="firstnameInput"
text="{Employees.getItemAt(1).firstname}"/>
• Two-‐way
data
binding
within
a
collecHon
<s:TextInput
id="firstName"
text="@{Employees.employee[0].firstname}"/>
Adobe
AIR
Programming,
Pasi
Manninen.
162](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-162-320.jpg)
![Example:
Explicit
parameter
passing
• Call
send()
method
with
variable
as
its
parameter
<fx:DeclaraHons>
<fx:String
id="phpFile">hTp://www.domain.com/request.php</fx:String>
<s:HTTPService
id="myService"
url="{phpFile}"
<?php
method="POST"
echo
"Hi
".$_REQUEST['username']."!";
resultFormat="text"
?>
result="{textarea.text
=
String(event.result)}">
</s:HTTPService>
</fx:DeclaraHons>
…
<fx:Script>
<![CDATA[
private
var
username:String
=
"Teppo
Testaaja";
]]>
</fx:Script>
<s:BuTon
label="Send
to
PHP"
click="myService.send({'username':username})"/>
<s:Label
text="Response
from
PHP:"/>
<s:TextArea
id="textarea"
/>
Adobe
AIR
Programming,
Pasi
Manninen.
166](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-166-320.jpg)
![Example:
Explicit
parameter
passing
with
AcHonScript
<fx:DeclaraHons>
<fx:String
id="phpFile">hTp://www.domain.com/request.php</fx:String>
<s:HTTPService
id="myService"
url="{phpFile}"
method="POST"
resultFormat="text"
<?php
result="{textarea.text
=
String(event.result)}">
echo
"Hi
".$_POST['username']."!";
</s:HTTPService>
?>
</fx:DeclaraHons>
<fx:Script>
<![CDATA[
private
funcHon
callMyService():void
{
myService.cancel();
var
params:Object=new
Object();
params.username
=
"Teppo
Testaaja";
myService.send(params);
}
]]>
</fx:Script>
...
<s:BuTon
label="Send
to
PHP"
click="callMyService()"/>
Adobe
AIR
Programming,
Pasi
Manninen.
167](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-167-320.jpg)
![Using
parameter
binding
• Copy
data
from
user-‐interface
controls
or
models
to
request
parameters
• Can
apply
validators
to
parameter
values
before
submitng
requests
to
services
<fx:DeclaraHons>
<fx:String
id="phpFile">
hTp://www.domain.com/request.php
</fx:String>
<s:HTTPService
id="myService"
url="{phpFile}"
resultFormat="text"
result="{textarea.text
=
String(event.result)}">
<s:request>
<username>{username.text}</username>
<?php
</s:request>
echo
"Hi
".$_POST['username']."!";
</s:HTTPService>
?>
</fx:DeclaraHons>
...
<s:BuTon
label="Send
to
PHP"
click="myService.send()"/>
Adobe
AIR
Programming,
Pasi
Manninen.
168](https://image.slidesharecdn.com/adobe-131121123148-phpapp02/85/Adobe-AIR-Programming-to-Desktop-and-Mobile-168-320.jpg)
Adobe AIR Programming to Desktop and Mobile
- 1. Adobe AIR Programming (desktop and mobile) Pasi Manninen JAMK University of Applied Sciences Slide version Nov 21th, 2013
- 2. IntroducHon the Adobe Integrated RunHme (AIR) • Is a cross-‐operaHng system runHme • Allows Rich Internet ApplicaHons (RIAs) to run as desktop applicaHons (behave like any other desktop applicaHon) or mobile devices • Leverages exisHng web development skills to build desktop soMware • Users interact with AIR applicaHons in the same way they interact with naHve desktop applicaHons • AIR is installed once on the user's computer • AIR applicaHons are installed and run inside the runHme • Current version is AIR 3.9 Adobe AIR Programming, Pasi Manninen. 2
- 3. Working with exisHng Technologies • AIR enables you to work in familiar environments • AIR leverages the tools and approaches you already know to build the best possible user experience Adobe AIR Programming, Pasi Manninen. 3
- 4. Understanding the applicaHon stack • AIR is a runHme engine, with liTle or no visible interface • AIR wraps your applicaHon to provide operaHng system access Adobe AIR Programming, Pasi Manninen. 4
- 5. Understanding the benefits • You develop for AIR, not any specific operaHng system or browser • AIR provides a consistent cross-‐operaHng system plaXorm and framework • AIR eliminates cross-‐browser tesHng by ensuring consistent funcHonality and interacHon across desktops AIR 2.6 Adobe AIR Programming, Pasi Manninen. 5
- 6. Adobe AIR features • • • • • • • • • • • • • • • • • Mass Storage DetecHon NaHve Process API Microphone Data Access Drag-‐and-‐drop data sharing Peer-‐to-‐Peer Networking CapabiliHes MulHtouch and gestures Open documents with its default applicaHon Global error handling Enhanced prinHng support WebKit with HTML5/CSS3 support IPv6 format addresses Large maximum window size 4095x4095px Support for screen readers Local embedded database Ability to run at startup ApplicaHon update Web launcher • • • • • • • • • • • • • • Security improvements Content protecHon (DRM) New Linux DEB and RPM installers TLS/SSL sockets Browser collaboraHon Clipboard access Rich media and video NaHve window chrome Universal applicaHon installer Sound APIs 3D Effects and Drawing API PDF file rendering support Digitally signed applicaHons … hTp://www.adobe.com/products/air/features.edu.html Adobe AIR Programming, Pasi Manninen. 6
- 7. Apache Flex (Adobe Flex) • SDK to develop and deployment cross-‐ plaXorm applicaHons with Adobe Flash plaXorm • Flex 2 (2006), Flex 3 (2007), Flex 4 (2010), Flex 4.5 (Adobe Flash Builder 4.5, 2011) • Apache Flex 4.8.0, Apache Flex 4.9.0 (2012) – Flex trademark issues are largely cleared up – New components added to a new namespace – … Adobe AIR Programming, Pasi Manninen. 7
- 8. Understanding the AIR • The Adobe AIR SDK provides tools to develop AIR applicaHons using any text editor, and compile them from the command line – schema and template for applicaHon descriptor file – default icons for AIR applicaHons – framework for AIR APIs – template for AIR applicaHon installaHon badge – command-‐line tools for building and deploying AIR applicaHons Adobe AIR Programming, Pasi Manninen. 8
- 9. Flash Builder Interface Organizes your projects Uses Eclipse terminology for interface elements Is configured for opHmal development flexibility A project is a collecHon of folders, files, resources and class libraries • A workspace is a grouping of projects • • • • – Actual file system directory that contains the files and folders that track a group of projects Adobe AIR Programming, Pasi Manninen. 9
- 10. AIR in Flash Builder 4 • Flash Builder 4 is an integrated development environment which supports AIR applicaHon development with tools including – AIR project wizard – automaHc creaHon and configuraHon of the applicaHon descriptor – compilaHon and debugging tools for AIR applicaHons • AIR Debug Launcher (ADL) • AIR Developer Tool (ADT) Adobe AIR Programming, Pasi Manninen. 10
- 11. CreaHng AIR projects • Create a Flex project • Set the applicaHon type to Desktop applicaHon • AutomaHcally creates the applicaHon descriptor • The applicaHon descriptor uniquely idenHfies an applicaHon and defines several addiHonal properHes • Running or debugging applicaHons from the project will happen through AIR Debug Launcher (ADL) Adobe AIR Programming, Pasi Manninen. 11
- 12. Understanding AIR Debug Launcher • ADL is a development tool which runs AIR applicaHons without having to install them first (can be tested nicely) • Provides debugging support for Flash Builder 4 • Allows only one instance of an AIR applicaHon to run at a Hme • Can be executed via command line Adobe AIR Programming, Pasi Manninen. 12
- 13. ExporHng AIR applicaHons • Flash Builder provides an export wizard that is used to – create the installer package – aTach a code authenHcaHon cerHficate Adobe AIR Programming, Pasi Manninen. 13
- 14. Understanding AIR Development Tool • The export wizard uses the AIR Developer Tool (ADT) to build an AIR applicaHon installer package • The AIR installer package (*.air file) is a compressed file format, which may be opened like any zip-‐compressed file • At a minimum, the installer package will include the applicaHon descriptor and a main SWF or HTML file • ADT is also usable as a command-‐line tool Adobe AIR Programming, Pasi Manninen. 14
- 15. CreaHng first AIR applicaHon • AIR projects are created in Flash Builder 4, and appear as Flex projects, they simply compile differently • ApplicaHons are tested in the AIR Debug Launcher (ADL), in which they run as desktop applicaHons, instead of a web browser • The MXML root element is <s:WindowedApplica3on> instead of <s:Applica3on> <?xml version="1.0" encoding="uX-‐8"?> <s:WindowedApplicaHon xmlns:fx="hTp://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:DeclaraHons> <!-‐-‐ Place non-‐visual elements (e.g., services, value objects) here -‐-‐> </fx:DeclaraHons> </s:WindowedApplicaHon> Adobe AIR Programming, Pasi Manninen. 15
- 16. CreaHng a Main applicaHon • Along with the main applicaHon file, an applicaHon descriptor is generated – the applicaHon descriptor has the same name as the applicaHon file with -‐app appended before the file extension • Specifies parameters for idenHfying, installing, and launching AIR applicaHons Adobe AIR Programming, Pasi Manninen. 16
- 17. Building AIR applicaHon • By default, applicaHons are built (SWF files compiled and related files generated and deployed) each Hme they are saved in Flash Builder 4 – disable this setng by unchecked Project > Build AutomaHcally – a re-‐build with discard of current build files can be forced by selecHng Project > Clean • When an AIR applicaHon is Run – MXML and AcHonScript are compiled to SWF – SWF and current applicaHon descriptor are wriTen to the output folder – SWF is loaded into the AIR Debug Launcher (ADL) to allow funcHonal tesHng Adobe AIR Programming, Pasi Manninen. 17
- 18. Example: Create an AIR applicaHon • Create an AIR project in Flash Builder 4 • Add content to the AIR applicaHon • Build and run an AIR applicaHon Adobe AIR Programming, Pasi Manninen. 18
- 19. ExporHng a release version of AIR applicaHon • A "release" is a version of the applicaHon • The version is defined in the applicaHon descriptor <?xml version="1.0" encoding="uX-‐8" standalone="no"?> <applicaHon xmlns="hTp://ns.adobe.com/air/applicaHon/3.1"> <id>fi.ptm.AIRTestExample</id> <filename>AIRTestExample</filename> <name>AIRTestExample</name> <version>1.0.0</version> <descripHon>AIR TesHng applicaHon</descripHon> <copyright>(c) 2013 PTM</copyright> ... • ExporHng an applicaHon uses the AIR Developer Tool (ADT) to build the compressed, zip-‐format .air file Adobe AIR Programming, Pasi Manninen. 19
- 20. Code-‐signing an applicaHon • Code signing is the process of digitally signing executable files to – confirm the soMware author – guarantee the code has not been altered or corrupted since it was signed, by use of a checksum • AIR Export supports three signature opHons – use a verified digital signature from a public, commercial source like Verisign or Thawte – create an unverified, self-‐signed signature during export – create an unsigned, intermediate .airi file for later signature • ApplicaHon cannot be installed unHl signed Adobe AIR Programming, Pasi Manninen. 20
- 21. A self-‐signed digital serHficate Adobe AIR Programming, Pasi Manninen. 21
- 22. SelecHng applicaHon contents • During export, you select specific project files to include in the .air installer • The compiled SWF and applicaHon descriptor are required • AddiHonal folders and files may be added on a per build basis • Only fully understood and trusted code should be included in the .air installer, as this code runs with all system privileges of the installing user Adobe AIR Programming, Pasi Manninen. 22
- 23. Installing an applicaHon • AIR applicaHons are installed like any other applicaHon – user may customize the install locaHon and choose a desktop shortcut • Steps to install an AIR applicaHon – download the .air file – double-‐click or run the .air file – click Install to start the installaHon – choose installaHon opHons, and then click ConHnue – aMer the installaHon is complete, open the applicaHon Adobe AIR Programming, Pasi Manninen. 23
- 24. Example: Export and install AIR applicaHon • • • • Select the applicaHon to release Sign the applicaHon Set the AIR file contents Install the AIR applicaHon Adobe AIR Programming, Pasi Manninen. 24
- 25. Understanding Flex namespaces • XML namespaces idenHfy sets of related tags • Flex 4 divides funcHonality and components sets into three namespaces • Three primary Flex framework namespaces – fx: groups core funcHonality – mx: groups standard Flex 3 MX components – s: groups new Flex 4 Spark components • A namespace idenHfies a set of MXML tags by prefix <s:WindowedApplicaHon xmlns:fx="hTp://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx”> Adobe AIR Programming, Pasi Manninen. 25
- 26. Using component namespaces in Flex 4 • fx: new MXML language elements plus compiler direcHves <fx:Class …> <fx:Script …> • s: new Spark components and visual primiHves library <s:ColorMatrixFilter …> <s:Label …> • mx: the exisHng Flex 3 MX component library <mx:DataGrid …> <mx:TextInput …> Adobe AIR Programming, Pasi Manninen. 26
- 27. Using component namespaces in Flex 4 • Remember that Custom component libraries are also idenHfied by namespaces <s:WindowedApplicaHon xmlns:fx="hTp://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="components.*" minWidth="1024" minHeight="768"> <components:JAMKEmployee /> • JAMKEmployee.mxml is own component file, defined with mxml language Adobe AIR Programming, Pasi Manninen. 27
- 28. Understanding Flex components • A component is a reusable element in a Flex applicaHon – a control is a visual user interface component • Examples: BuTon, Label, Image – a container hold controls or other containers • Examples: ApplicaHon, Panel, Group • Assign component properHes in MXML: <s:Label text="Here we are…" /> <s:Label> <s:text>Here we are…</s:text> </s:Label> Adobe AIR Programming, Pasi Manninen. 28
- 29. IntroducHon Spark vs MX components • MX components – Used to be called Halo components – Originally included in Flex 3 – Each component contains behavior, layout, styles and skin • Spark components – New components in Flex 4 – Separates behavior, layout, styles and skin into different classes • Spark and MX components can be used together – Based on the UIComponent class • Available components – Approximately 50 MX components – Approximately 20 Spark components • Use Spark components when possible • New Flex 4.8 and 4.9 has a new spark components (from mx) Adobe AIR Programming, Pasi Manninen. 29
- 30. Spark layout classes • Classes are defined in the spark.layouts package – BasicLayout, HorizontalLayout, TileLayout and Ver3calLayout • Must be used with containers • Defines how children within a container are laid out • Each container has a layout property – – – – Property of the container, example : WindowedApplicaHon Use the layout block InstanHate the layout class inside the block The layout property has a value that is an instance of another class <s:WindowedApplicaHon ...> <s:layout> [..Layout class goes here..] </s:layout> </s:WindowedApplicaHon> Adobe AIR Programming, Pasi Manninen. 30
- 31. BasicLayout class • Default layout and uses absolute posiHoning • Absolute posiHoning: – Specifies x and y properHes of the children – The origin is the top-‐leM corner of the container – x increases to the right, y increases to the boTom <s:WindowedApplicaHon ...> <s:layout> <s:BasicLayout/> </s:layout> <components:JAMKEmployee ... x="10" y="10"/> ... Adobe AIR Programming, Pasi Manninen. 31
- 32. HorizontalLayout Class • Lays out children in a single horizontal row – x and y properHes are ignored • The height of the row is the height of the tallest child • Each child calculates its own width by default <s:WindowedApplicaHon...> <s:layout><s:HorizontalLayout/></s:layout> <components:JAMKEmployee .../> <components:JAMKEmployee ../> … </s:ApplicaHon> Adobe AIR Programming, Pasi Manninen. 32
- 33. VerHcalLayout Class • Lays out children in a single verHcal column – x and y properHes are ignored • The width of the column is typically the width of the widest child • Each child calculates its own height by default <s:WindowedApplicaHon...> <s:layout><s:VerHcalLayout/></s:layout> <components:JAMKEmployee .../> <components:JAMKEmployee ../> … </s:ApplicaHon> Adobe AIR Programming, Pasi Manninen. 33
- 34. TileLayout Class • Lays out children in one or more verHcal columns or horizontal rows – x and y properHes are ignored • The orienta3on property determines the layout direcHon • Valid values for orientaHon property are – columns for column layout – rows for a row layout, which is default • All cells of the Hle layout have the same size – Height of the cell is the height of the tallest child – Width of the cell is the width of the widest child <s:WindowedApplicaHon...> <s:layout><s:TileLayout/></s:layout> <components:JAMKEmployee .../> <components:JAMKEmployee ../> … </s:ApplicaHon> Adobe AIR Programming, Pasi Manninen. 34
- 35. Spark Container Classes • Layout an applicaHon using container components – Rectangular region of Flash Player drawing surface – Hierarchical structure contains controls and other containers – Default layout methods to control the layout of its children, including sizing and posiHoning – All containers are children of the UIComponent and Container classes • Containers use a set of layout rules to posiHon components – Keeps you from having to worry about posiHons – Allows easy resizing/re-‐posiHoning with browser window size • Container components support the default layout classes and custom layout classes Adobe AIR Programming, Pasi Manninen. 35
- 36. Spark Container Classes • Spark includes the following non-‐skinnable containers: – Group – DataGroup • And following skinnable containers: – SkinnableContainer – SkinnableDataContainer – Panel – BorderContainer – WindowedApplicaHon, ApplicaHon Adobe AIR Programming, Pasi Manninen. 36
- 37. ApplicaHon Container • The WindowedApplicaHon container holds all content and business logic in an MXML-‐based applicaHon <s:WindowedApplicaHon xmlns:fx="hTp://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <s:layout> <s:VerHcalLayout/> </s:layout> ... content here ... </s:ApplicaHon> Adobe AIR Programming, Pasi Manninen. 37
- 38. Group Container • Used to manage the layout of visual children • This container is not skinnable • Uses a layout property <s:WindowedApplicaHon...> <s:layout><s:VerHcalLayout/></s:layout> <s:Label text="Employee Directory".../> <s:Group> <s:layout> <s:TileLayout/> </s:layout> ... Adobe AIR Programming, Pasi Manninen. 38
- 39. Panel Container • Lets you apply a skin to all elements within it • This container is skinnable • Has a header and a content area <s:Panel Htle=“JAMK Employee of the Month"> <s:layout> <s:VerHcalLayout/> </s:layout> ... content here ... </s:Panel> Adobe AIR Programming, Pasi Manninen. 39
- 40. Sample ApplicaHon layout Adobe AIR Programming, Pasi Manninen. 40
- 41. Example: Spark container that uses BasicLayout and constraints <?xml version="1.0" encoding="uX-‐8"?> <s:Group xmlns:fx="hTp://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="200"> <s:layout> <s:BasicLayout/> </s:layout> <s:VGroup horizontalCenter="0" verHcalCenter="0"> <mx:Image source="images/employee02.png" width="70" height= "100"/> <s:Label text="Tapani Äijänen" /> </s:VGroup> </s:Group> Adobe AIR Programming, Pasi Manninen. 41
- 42. MX navigator containers • Navigator containers control’s navigaHon among child containers – children can only be MX containers or <s:NavigatorContent> tag – Spark equivalents do not exist in Flex 4 • Use navigator containers when you want to control what other container to display • The individual child layout containers, not the navigator, control the layout and posiHoning of their children Adobe AIR Programming, Pasi Manninen. 42
- 43. Available MX navigator containers Container Description Accordion Organizes information in a series of child panels, where one panel is active at any time TabNavigator Displays a container with tabs to let users switch between different content areas ViewStack Defines a stack of containers that displays a single container at a time Adobe AIR Programming, Pasi Manninen. 43
- 44. Using the ViewStack container • Place content into containers • Switch between containers using built in mechanisms • Nest the containers into a ViewStack navigator container – <mx:ViewStack> tag – displays only one child container at a Hme – height and width based on the first acHve child <mx:ViewStack id="JAMKContent"> <s:NavigatorContent label="Music and Media management"> ... </s:NavigatorContent> <s:NavigatorContent label="Nursing"> ... </s:NavigatorContent> <s:NavigatorContent label="ICT"> ... </s:NavigatorContent> </mx:ViewStack> Adobe AIR Programming, Pasi Manninen. 44
- 45. Understanding ViewStack basics • The ViewStack container does not contain a user interface to switch between child containers – use the LinkBar or TabBar containers to switch between child containers – use the label property of the child containers in the LinkBar or TabBar container display – or implement custom navigaHon using ViewStack properHes Adobe AIR Programming, Pasi Manninen. 45
- 46. NavigaHng with LinkBar/TabBar control • Specifies the ViewStack container as the value of the dataProvider property of the LinkBar control • Defines a horizontal or verHcal row of LinkBuKon controls • Typical use is to control the acHve children of a ViewStack container <mx:LinkBar dataProvider="{JAMKContent}" /> <mx:TabBar dataProvider="{JAMKContent}" /> Adobe AIR Programming, Pasi Manninen. 46
- 47. Using the TabNavigator container Works the same way as the ViewStack container Defines a horizontal row of tabs Does not need to specify a ViewStack or dataProvider Displays the associated child content when a tab is selected • Displays child containers in the order they are defined • • • • <mx:TabNavigator id="JAMKContent"> ...child containers... </mx:TabNavigator> Adobe AIR Programming, Pasi Manninen. 47
- 48. Using the Accordion container • Works the same way as the ViewStack and TabNavigator containers • Defines verHcally-‐stacked panels • Panels animate as they open and close • Displays only one child of the Accordion at a Hme <mx:Accordion id="JAMKContent"> ...child containers... </mx:TabNavigator> Adobe AIR Programming, Pasi Manninen. 48
- 49. Handling Events • Events indicates that something happens in applicaHon • System (framework) iniHated – result of systemaHc code execuHon – for example: creaHonComplete, iniHalize, show, ... • User iniHated – result of user interacHon with control or container – for example: click, change, mouseOver, ... • Handling user events supports subset of DOM Level 3 Events specificaHon – http://www.w3.org/TR/DOM-Level-3-Events/ Adobe AIR Programming, Pasi Manninen. 49
- 50. ImplemenHng event handlers • Event handlers respond to events (also called event listeners) • There is two ways to implement an event handler – using inline AcHonScript – using AcHonScript funHons in a Script block Adobe AIR Programming, Pasi Manninen. 50
- 51. Inline AcHonScript events in MXML • Statements in event handlers are inline AcHonScript <s:TagName eventName=“AcHonScript statement or funcHon call here" /> • Values in binding curly braces ({}) are inline AcHonScript <s:BuTon id="submitBuTon" label="Submit" click="personName.text='Jesse James'"/> <s:Label id="personName" text="Click {submitBuTon.label}"/> • Another example with DateChooser with change event <s:DateChooser id="sDate" change="Alert.show('You have selected ' + sDate.selectedDate.toDateString())"/> Adobe AIR Programming, Pasi Manninen. 51
- 52. AcHonScript event handler funcHons • Use event handler funcHons – If the acHon requires more than one line of code – Enables reuse – Keeps code cleaner • Place code within a Script tag body • Everything inside the Script tag body is treated as XML by parser • Use CDATA to prevent the compiler from interpreHng the AcHonScript code as XML <fx:Script> <![CDATA[ private funcHon dateChangeHandler():void { Alert.show('You have selected ' + sDate.selectedDate.toDateString()); } ]]> </fx:Script> <mx:DateChooser id="sDate" change="dateChangeHandler()"/> Adobe AIR Programming, Pasi Manninen. 52
- 53. CreaHng funcHons in external files • FuncHons can be placed in an external AcHonScript file • use .as for the file extension • File can only contain funcHons, variable declaraHons and comments • Do NOT need the CDATA tag set • Include the external AcHonScript file (if needed) • Use the source property of the Script tag in your applicaHon <fx:Script source="MyAsHandlers.as"/> Adobe AIR Programming, Pasi Manninen. 53
- 54. Example: Using inline and funcHon event handling • System events that occur without user interacHon • InteracHon with BuTon to see user events Adobe AIR Programming, Pasi Manninen. 54
- 55. Event Object • Every event that is dispatched contains an event object with informaHon about the event • Every event object inherits from the flash.events.Event class • Event objects contain a large collecHon of named properHes • Refer to the event object inside an event handler as an object named event <mx:DateChooser id="sDate" change="dateChangeHandler(event)"/> import mx.events.CalendarLayoutChangeEvent; funcHon dateChangeHandler(event:CalendarLayoutChangeEvent):void { ... } Adobe AIR Programming, Pasi Manninen. 55
- 56. Event object properHes • All event objects contain properHes – some are the same for all events (type and target) – some are specific to the event being broadcast – custom properHes are specified in a custom event class Property Type Description type String e type of event for example, KeyboardEvent target Object e component instance that broadcast the event target.id String A property of the target object, which is the instance name of the target Adobe AIR Programming, Pasi Manninen. 56
- 57. Datatyping the event object • Use the Event class as the datatype when needed private funcHon dateChangeHandler(event:Event):void • More specific event types are available which are subclasses of Event – – – – MouseEvent DragDropEvent ResultEvent ... • Benefits of datatyping – Faster runHme performance – Compile Hme type checking – Access to event specific properHes Adobe AIR Programming, Pasi Manninen. 57
- 58. Adding event listeners • Event listeners must be added via AcHonScript • Use addEventListener() method from EventDispatcher class • Enables registraHon of event handler funcHons for a specific event • The addEventListener() method will implicitly create the event object for you and pass it to the listener funcHon object.addEventListener(eventType:String,listener:FuncHon):void • Good pracHce to remove event listeners no longer needed object.removeEventListener(eventType:String,listener:FuncHon); Adobe AIR Programming, Pasi Manninen. 58
- 59. Example: Using event listeners • creaHonComplete => call own made funcHon • Register event listener for date change DateChooser control Adobe AIR Programming, Pasi Manninen. 59
- 60. Using Custom Events • Communicate informaHon and data between applicaHon components • Create own event class that extends from Event class – handle event type, bubling and cancellabe in constructor – override clone()-‐method (used to create a copy of Event object) • Custom events are declared with <fx:Metadata> tag <fx:Metadata> [Event(name="custom event name", type="event object type")] </fx:Metadata> • Use dispatchEvent()-‐method to ”send” event with data Adobe AIR Programming, Pasi Manninen. 60
- 61. Example: Dispatch Custom Event • Create a new login event • LoginForm.mxml dispatch a new login event (with username and password data) • Main ApplicaHon capture login event Adobe AIR Programming, Pasi Manninen. 61
- 62. Understanding view states • View states allow developers to create different content layouts in the same applicaHon • Each disHnct layout is called a state • User or system events are used to change states • Components can be added, modified or removed from each state • Create a new state – switch to Design mode – right-‐click in the States view and select New State – in the New State dialog box either create a blank state or duplicate another state Adobe AIR Programming, Pasi Manninen. 62
- 63. Defining states • The states block wraps all of the states in single block of code • Each State tag defines the name of one state – one or more State tags are placed within the states block to define each individual state – the name property of the State tag declares the name of the state – state names are required and each must be unique for a given component – the first state defined is the default state for the applicaHon <s:states> <s:State name="loginState"/> <s:State name="JAMKPortalState"/> </s:states> Adobe AIR Programming, Pasi Manninen. 63
- 64. Defining components in each states • Define the states in which the component exists with the includeIn property for that component • If the component exists in more than one state, add mulHple state names to the includeIn property <s:Panel id="login" Htle="Login" includeIn="loginState, contactState"> • AlternaHvely define which state a component does not exist in by using the excludeFrom property <s:BuTon label="Logout" excludeFrom="loginState, validaHonState"/> • If you do not define either of these properHes, the component will exist in all states Adobe AIR Programming, Pasi Manninen. 64
- 65. Defining component properHes and events in different states • Change a property of a component for each state by declaring the state name aMer the property <s:Label text="Logged in!" text.loginState="Please log in!" x="50" y="100" x.loginState="100" y.loginState="20" /> • Use the same syntax to set events for each state <s:BuTon label="Logout" excludeFrom="loginState" click.JAMKPortalState="logout()"/> Adobe AIR Programming, Pasi Manninen. 65
- 66. Controlling view states • Control the acHve view state with the currentState property • Each component has a currentState property that defines the state of the component – by default the state is the first state defined in the states block – assign the name of the state to the currentState property – custom components also have the currentState property <s:WindowedApplicaHon currentState="loginState" ... > Adobe AIR Programming, Pasi Manninen. 66
- 67. Switching between states • To switch states, set the currentState property in an event handler • In Flash Builder, select the component that will trigger the event and set its click event in the Flex ProperHes view <s:BuTon label="Logout" x="700" y="400" excludeFrom="loginState" click="currentState='loginState'"/> Adobe AIR Programming, Pasi Manninen. 67
- 68. Example: CreaHng mulHple states • States: – LoginState – StaffState – ContactState – AboutState • Use LinkBar to change states <s:states> <s:State name="LoginState"/> <s:State name="StaffState"/> <s:State name="ContactState"/> <s:State name="AboutState"/> </s:states> Adobe AIR Programming, Pasi Manninen. 68
- 69. Component effects • Effects add animaHon and moHon in response to some user or programmaHc acHon • For example – an image grows as a user mouses over it – all elements in an applicaHon fade in as the applicaHon starts • Can be applied to components – individually or together – as their properHes change between states • Remember content is most important in your applicaHon – animaHon is oMen considered to be unnecessary – however, someHmes animaHons help the user experience Adobe AIR Programming, Pasi Manninen. 69
- 70. Animate super class Define effects in the DeclaraHons tag block Define an id property Targets an object in a binding statement Define a Hme period with the duraHon property, default is 1000 milliseconds • Define a SimpleMoHonPath instance for each property of the target to animate • Define details for how the property values should change over the duraHon of the animaHon • • • • <s:Animate id="shake" target="{buTon}" duraHon="1000"> <s:SimpleMoHonPath property="x" valueFrom="0" valueTo="100"/> <s:SimpleMoHonPath property="y" valueTo="100"/> <s:SimpleMoHonPath property="width" valueBy="20"/> </s:Animate> Adobe AIR Programming, Pasi Manninen. 70
- 71. Spark effects classes • Spark effects are divided into 5 categories Category Property effects Description Animates the change of one or more properties of the target Transform effects Animates the change of one or more transformrelated properties of the target, such as the scale, rotation, and position Pixel-shader effects Animates the change from one bitmap image to another, where the bitmap image represents the before and aer states of the target. Filter effects Applies a filter to the target where the effect modifies the properties of the filter, not properties of the target 3D effects A subset of the transform effects that modify the 3D transform properties of the target Adobe AIR Programming, Pasi Manninen. 71
- 72. Reviewing available effects • Look in the Flex Language Reference for a lisHng of effects Adobe AIR Programming, Pasi Manninen. 72
- 73. Playing an effect • Use the play() method of the effect instance in a system or user event handler • Use inline or funcHon coding to start effect <s:BuTon click="shake.play()"/> <fx:Script> <![CDATA[ private funcHon checkLogin():void { shake.play(); } ]]> </fx:Script> <s:BuTon click="checkLogin()"/> Adobe AIR Programming, Pasi Manninen. 73
- 74. Example: header image fading • Fade header image from alpha 0 to 100 when applicaHon starts <?xml version="1.0" encoding="uX-‐8"?> <s:WindowedApplicaHon xmlns:fx="hTp://ns.adobe.com/mxml/2009" … creaHonComplete="headerFade.play()"> <fx:DeclaraHons> <s:Fade id="headerFade" targets="{headerImage}" alphaFrom="0" alphaTo="1"/> </fx:DeclaraHons> <s:layout> <s:VerHcalLayout horizontalAlign="center" paddingTop="20" gap="20"/> </s:layout> <s:Image id="headerImage" source="images/header.jpg"/> </s:WindowedApplicaHon> Adobe AIR Programming, Pasi Manninen. 74
- 75. Composite effects • Apply mulHple effects at once using composite effects • Parallel effect causes all effects to run simultaneously on the target(s) • Sequence effect causes effects on the target(s) to run sequenHally, one aMer the other • Nest Parallel and Sequence components to generate more complex animaHons Adobe AIR Programming, Pasi Manninen. 75
- 76. Example: header image fading and resizing • Fade header image from alpha 0 to 100 and resize from 0 to original size when applicaHon starts <s:WindowedApplicaHon xmlns:fx="hTp://ns.adobe.com/mxml/2009" … creaHonComplete="headerAnimaHon.play()"> <fx:DeclaraHons> <s:Parallel id="headerAnimaHon" target="{headerImage}"> <s:Fade id="headerFade" alphaFrom="0" alphaTo="1"/> <s:Resize heightFrom="0" heightTo="780"/> <s:Resize widthFrom="0" widthTo="200"/> </s:Parallel> </fx:DeclaraHons> Adobe AIR Programming, Pasi Manninen. 76
- 77. TransiHon between component states • TransiHons are animaHons that play while the component switches between two states (automaHcally run) • The transi3ons tag set wraps all of the transiHon definiHons in a single block of code • Each TransiHon tag block defines states to transiHon between – fromState property: the name property value of the state the component is in when the transiHon should start – toState property: the name property value of the state the component is in when the transiHon should end – effects and components to animate <s:transiHons> <s:TransiHon fromState="loginState" toState="JAMKPortalState"> ... define effects and components here ... </s:TransiHon> <s:TransiHon fromState="JAMKPortalState" toState="loginState"> ... define effects and components here ... </s:TransiHon> </s:transiHons> Adobe AIR Programming, Pasi Manninen. 77
- 78. Flash Builder and CSS • Changing any styles under the Appearance view, create and apply changes to CSS file • The Style tag is also added to the main applicaHon which points to the CSS file • CSS file has namespaces: /* CSS file */ s "library://ns.adobe.com/flex/spark"; @namespace – s refers to Spark and mx to MX components <fx:Style source="css/Styles.css"/> @namespace mx "library://ns.adobe.com/flex/mx"; s|Label { color: #C34B4B; fontSize: 20; } Adobe AIR Programming, Pasi Manninen. 78
- 79. Defining styles for components • Apply styles to components using a component via CSS • CSS supports the use of the built-‐in selectors – matches instances of a component by local name – for example, the simple type selector BuTon matches the component with local name BuTon s|BuTon { color: #CC0000; } Adobe AIR Programming, Pasi Manninen. 79
- 80. CreaHng Flex component selector • CSS supports mulHple class selectors in the styleName property s|BuTon.redText { color:#FF0000; } s|BuTon.fontType { font-‐family:"Courier"; } <s:BuTon label="Send Email" styleName="redText fontType"/ > • CSS supports mulHple selectors with the same name and different properHes s|BuTon { color:#FF0000; } s|BuTon { font-‐family:"Courier"; } Adobe AIR Programming, Pasi Manninen. 80
- 81. Create custom component selector • CSS supports a custom namespace • Allows definiHon of a custom component selectors for the namespace @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; @namespace comp "components.*"; s|BuTon { color: #990000; } comp|JAMKEmployee { color: #000099; } Adobe AIR Programming, Pasi Manninen. 81
- 82. Advanced CSS selectors • Flash Player provides advanced selectors like descendant and id selectors • Descendent selector – specify styles for children of a container – allows mulHple level of descendants s|Panel s|BuTon { color: #CCCCCC; } s|Panel mx|ViewStack s|Label { fontSize: 12; } Adobe AIR Programming, Pasi Manninen. 82
- 83. Advanced CSS selectors: id • id selector – selector matches components that meet an id condiHon – is Hed to one specific instance of a component – CSS syntax to declare an id condiHon is to prefix the id with a hash sign #submitBuTon { color: #CCCCCC; } <s:BuTon id="submitBuTon" /> • You can combine an id selector with other selectors Adobe AIR Programming, Pasi Manninen. 83
- 84. Advanced CSS selectors: class • Class selectors define a set of styles (or a class) that you can apply to any component • First create a class selector and define its styles .header { color: #CCCCCC; } • Then apply the style without the leading period to an MXML component using the styleName property <s:Panel styleName="header"> <s:Label text="JAMK Employee InformaHon" /> </s:Panel> Adobe AIR Programming, Pasi Manninen. 84
- 85. Advanced CSS selectors: pseudo • Pseudo selector matches components based on an addiHonal condiHon • You can use pseudo selectors to apply styles to components only when they are in a specified state s|BuTon:up { color: #00FF00; } s|BuTon:down { color: #CCCCCC; } /* universal pseudo selectors */ :up { color:#FF9933; } Adobe AIR Programming, Pasi Manninen. 85
- 86. Exercise: CSS • Create a new Project, Create for example Panel and a few Controls, s|Panel { backgroundColor: #B12700; Test different CSS selectors chromeColor:#B12700; } s|Panel s|Label { color: #FFFFFF; fontWeight: bold; } s|Panel s|BuTon { color: #FFFFFF; chromeColor: #B72700; } s|Panel s|TextArea { contentBackgroundColor:#B00000; borderColor:#000000; color: #FFFFFF; } Adobe AIR Programming, Pasi Manninen. 86
- 87. Skinning • Skins control all visual elements of a component, including layout • Spark skins can contain – graphic elements, text, images, transiHons • Skins support states, so that when the state of a component changes, the skin changes as well • Skins specify minimum sizing requirements for the component • You can apply skins to components using – CSS – MXML – AcHonScript Adobe AIR Programming, Pasi Manninen. 87
- 88. CreaHng a skin for Spark components • Visual design of a component can be defined in a separate class called a skin • Associate the skin class with a component to apply the skin using the skinClass property <s:BuTon label="Send" textAlign="center" skinClass="skins.BuTonWithStatesSkin"/> Adobe AIR Programming, Pasi Manninen. 88
- 89. CreaHng skin MXML class file • Create a new skin class for a component – create a new MXML component file in Flash Builder by selecHng File > New > MXML Component – extend the SparkSkin class (root element is SparkSkin) • Define the following elements in the skin class – the HostComponent within the Metadata direcHve – skin states – skin parts – visual graphical elements Adobe AIR Programming, Pasi Manninen. 89
- 90. HostComponent direcHve • The HostComponent metadata direcHve is central to the component and skin contract • Define the HostComponent direcHve in the skin class file • Define the host component by using a Metadata tag with the following syntax • Define the component class on which the skin will be applied (below example from BuTon) <fx:Metadata> [HostComponent("spark.components.BuTon")] </fx:Metadata> Adobe AIR Programming, Pasi Manninen. 90
- 91. Defining component states • Skins must define at least the default normal and disabled states of a component <s:states> <s:State name="normal"/> <s:State name="disabled" /> </s:states> • Skin parts are elements that make up the component’s skin • There are both required and opHonal skin parts Adobe AIR Programming, Pasi Manninen. 91
- 92. Understanding a BuTon skin part • The Spark buTon control has one required skin part: the text label (icon is opHonal) • Use this skin part to modify the way the label looks • Requires an id property of labelDisplay <s:Label id="labelDisplay" textAlign="center" verHcalAlign="middle" color="0x000000" fontWeight="bold" horizontalCenter="0" verHcalCenter="1" leM="10" right="10" top="2" boTom="2"> </s:Label> Adobe AIR Programming, Pasi Manninen. 92
- 93. Understanding a Panel container skin part • Panel container has three skin parts – 3tleDisplay: Represents the text in the Panel container’s header area – contentGroup: Represents the content area of the container – controlBarGroup: Represents the content area of the containers control bar, if it is implemented <s:Label id="HtleDisplay" lineBreak="explicit" leM="10" right="4" top="2" height="30" verHcalAlign="middle" fontWeight="bold"/> <s:Group id="contentGroup" top="23"/> Adobe AIR Programming, Pasi Manninen. 93
- 94. Finding skin parts of any component • Search the Adobe Flex 4 Language Reference for any Spark component to find informaHon about its skin parts Adobe AIR Programming, Pasi Manninen. 94
- 95. Drawing graphical elements • Use the Spark primiHves to draw graphical elements for your skins • The Spark primiHves are classes in the spark.primi3ves package Adobe AIR Programming, Pasi Manninen. 95
- 96. Example: CreaHng and applying a skin to WindowedApplicaHon • Create a skin class file • Define the component that will use this skin • Define the ApplicaHon container default states • Create a 1-‐pixel black border around the applicaHon • Apply the skin • Display content within a skin Adobe AIR Programming, Pasi Manninen. 96
- 97. Example: CreaHng and applying a skin to Panel • Create a skin class file • Apply a Panel skin with a drawn background • Define the look-‐and-‐feel of the Panel skin’s header text • Fix the content area display Adobe AIR Programming, Pasi Manninen. 97
- 98. IntroducHon to Data Binding • One of the most used processes when building Flex applicaHons • Allows you to pass data between different applicaHon components • Process enables the tying of one object’s data with another object – connecHng a source object with a desHnaHon object – once the source object changes, the desHnaHon object also changes automaHcally • Flash Builder 4 offers two-‐way data binding (bi-‐ direcHonal data binding) Adobe AIR Programming, Pasi Manninen. 98
- 99. One and two-‐way Data Binding in MXML • Braces {} are the most commonly used technique to use data binding • Bind properHes without wriHng any actual code <?xml version="1.0" encoding="uX-‐8"?> <s:ApplicaHon xmlns:fx="hTp://ns.adobe.com/mxml/2009" …> <s:layout> <s:VerHcalLayout /> </s:layout> <fx:Script> // two-‐way data binding <![CDATA[ <s:TextInput id="textInput1" text="@{textInput2.text}" /> [Bindable] <s:TextInput id="textInput2" /> public var value:String = "Hello Flex!"; ]]> </fx:Script> <s:Label text="{value}" /> <s:TextInput id="textInput" change="{value=textInput.text}" /> </s:ApplicaHon> Adobe AIR Programming, Pasi Manninen. 99
- 100. Binding XML Object • Bind the XML object, all of the properHes of the XML bind as well … <fx:Script> <![CDATA[ [Bindable] private var xml:XML = <employees> <employee id="1"> <firstname>John</firstname> <lastname>MaTerson</lastname> <room>101</room> </employee> </employees>; ]]> </fx:Script> <s:Label text="Employee name: {xml.employee.(@id==1).firstname} {xml.employee.(@id==1).lastname}" /> … Adobe AIR Programming, Pasi Manninen. 100
- 101. Binding with fx:Binding • Generates the same code as using curly braces • No differences in performance (compared to MXML braces) <s:TextInput id="textInput1" /> <s:TextInput id="textInput2" /> <fx:Binding source="textInput1.text” desHnaHon="textInput2.text" twoWay="false" /> Adobe AIR Programming, Pasi Manninen. 101
- 102. Binding with BindingUHls class • You can "unbind" properHes • BeTer performance • Methods: bindProperty, bindSeTer <s:TextInput id="textInput" preiniHalize="preiniHalizeHandler(event)" /> <s:Label id="labelText" /> <s:BuTon label="Stop Binding" click="clickHandler(event)" /> import mx.binding.uHls.BindingUHls; import mx.binding.uHls.ChangeWatcher; import mx.events.FlexEvent; private var changeWatcher:ChangeWatcher; private funcHon preiniHalizeHandler(event:FlexEvent):void { changeWatcher = BindingUHls.bindProperty(labelText, "text", textInput, "text"); } private funcHon clickHandler(event:MouseEvent):void { changeWatcher.unwatch(); } Adobe AIR Programming, Pasi Manninen. 102
- 103. Using data in applicaHon • There are a number of ways to make data available to an applicaHon • Use Flex objects and collecHons: – – – – – – – Object (bindable) Array ArrayList (bindable) ArrayCollecHon (bindable) XML (bindable, only when defined in MXML) XMLList (bindable, only when defined in MXML) XMLListCollecHon (bindable) • Use data binding to assosiate data to component <s:DropDownList id="JAMKEmployees" dataprovider="{employees}" private var JAMKEmployees:DropDownList = new DropDownList(); JAMKEmployees.dataProvider = employees; Adobe AIR Programming, Pasi Manninen. 103
- 104. Examples: UI Controls and data • A few test with DropDownList, ArrayList, List, Tree, DataGrid, fx:String, fx:Object, fx:XML, dataProvider • Show data with labelField, labelFuncHon Adobe AIR Programming, Pasi Manninen. 104
- 105. Item Renderers • Many of the data-‐driven components can use item renderers to control how data is displayed • labelFuncHon can customize the displayed informaHon, an item renderer acts more like a template, and allows you to display more than just a string • Item renderers can be wriTen in AcHonScript or MXML • Define item renderer: – in an external file – in the declaraHon block – or inline Adobe AIR Programming, Pasi Manninen. 105
- 106. Example: Item Renderer • Use Item Renderer with ArrayList and List component • Display image and two labels Adobe AIR Programming, Pasi Manninen. 106
- 107. Using remote data • Best to load data dynamically at runHme, instead of hardcoded in SWF • One such source of data is XML data • Some benefits of dynamically loading XML data at runHme are – if the data set is large, segments can be loaded at different Hmes – data might be dynamically generated and current data is required Adobe AIR Programming, Pasi Manninen. 107
- 108. Using HTTPService class • • • • Retrieve via HTTP request Can make get/post requests to specified URL Can use HTTP or HTTPS Within DeclaraHons tag set, create HTTPService object – no request is made at this Hme • Make the HTTP request – use the HTTPService object’s send() method – remote file retrieved Adobe AIR Programming, Pasi Manninen. 108
- 109. CreaHng HTTPService object • Create a Spark HTTPService object in a Declara3ons block • Assign an instance name (id property) • Set url property to relaHve or absolute address of remote data file <fx:DeclaraHons> <s:HTTPService id= "EmployeeService" url= "Employees.xml"/> </fx:DeclaraHons> • The showBusyCursor property can be used to display a ”running clock” when data is being retrieved Adobe AIR Programming, Pasi Manninen. 109
- 110. Making HTTPService request • Use the HTTPService object’s send() method to make the request • Invoke method either by user or system event • Data retrieved on user click event <s:BuTon label="Retrieve Data" click="EmployeeService.send()"/> • Data retrieved by system creaHonComplete event <s:ApplicaHon ... creaHonComplete="JAMKEmployeeService.send()"/> Adobe AIR Programming, Pasi Manninen. 110
- 111. Retrieving data with lastResult • AMer the request executes, returned data is placed in the object’s lastResult property • Access the data as [instance id].lastResult • Returned data format is configurable using the resultFormat property <mx:HTTPService id="EmployeeService" url= "Employees.xml" showBusyCursor="true" resultFormat="e4x" /> Adobe AIR Programming, Pasi Manninen. 111
- 112. Possible return formats from HTTPService Format object Description e value returned is XML and is parsed as a tree of ActionScript objects (this is the default) xml e value returned is XML and is returned as literal XML in an ActionScript XMLnode object flashvars e value returned is text containing name=value pairs separated by ampersands, which is parsed into an ActionScript object text e4x e value returned is text, and is le raw e value returned is XML and is returned as literal XML in an ActionScript XML object, which can be accessed using ECMAScript for XML (E4X) expressions array e value returned is XML and is parsed as a tree of ActionScript objects. By default, XML data is converted into an ArrayCollecHon Adobe AIR Programming, Pasi Manninen. 112
- 113. Understanding ArrayCollecHon result • An ArrayCollec3on is a complex data structure • ArrayCollec3on is the recommended class to use as a data provider • Must import the class to use ArrayCollec3on import mx.collecHons.ArrayCollecHon; • Using an ArrayCollecHon class has the following advantages – the elements of the ArrayCollec3on can be used in bindings that will conHnue to be monitored – implements both the ICollec3onView and IList interfaces Adobe AIR Programming, Pasi Manninen. 113
- 114. Using result in data bindings • The returned ArrayCollec3on can be used in data bindings • Point at the repeaHng node to use it as a data provider <mx:DataGrid id="employeeList" dataProvider="EmployeeService.lastResult.employees.employee}"/> • Use methods of the ArrayCollecHon instance to reference a value in a node String firstName = EmployeeService.lastResult.employees.employee.getItemAt(0).firstname; Adobe AIR Programming, Pasi Manninen. 114
- 115. Handling results • Use HTTPService result event to specify the funcHon to be called when data is returned successfully • The class of the ResultEvent object is mx.rpc.events.ResultEvent and must be imported for use • Manipulate the returned data before using it – assign it to a variable whose scope is the class rather than the funcHon – pass the event object as the parameter • The event object has a result property with the returned data <s:HTTPService id="Employees" url="hTp://www.domain.com/Employees.php" result="resultHandler(event)" /> Adobe AIR Programming, Pasi Manninen. 115
- 116. Handling faults • A FaultEvent is dispatched when there is problem returning a result – due to a connecHon, server, or applicaHon-‐level failure – also dispatched when the property requestTimeout value is exceeded – has properHes target, type and fault, among others • Specify a handler funcHon for the fault event to execute if FaultEvent is dispatched <s:HTTPService id="Employees" url="hTp://www.domain.com/Employees.php" result="resultHandler(event)" fault="faultHandler(event)" requestTimeout="60"/> Adobe AIR Programming, Pasi Manninen. 116
- 117. Handling faults • The fault property, of the FaultEvent class, is a Fault object that has useful properHes for displaying error messages • Fault class has the following properHes (all of datatype String) – faultDetail: any extra details about the fault – faultCode: a simple code describing the fault – faultString: text descripHon of the fault – message: the three properHes above concatenated Adobe AIR Programming, Pasi Manninen. 117
- 118. Displaying message with Alert pop-‐up • Fault messages can be displayed in a pop-‐up using the Alert class • Import from mx.controls.Alert • Use show() method with the most used parameters (in order) • text: shown in the body of the pop-‐up • 3tle: shown in the header of the pop-‐up • An OK buTon appears by default to close the Alert pop-‐up <fx:Script> <![CDATA[ import mx.controls.Alert; Alert.show("Text of the alert box","Alert Box Title"); ]]> </fx:Script> Adobe AIR Programming, Pasi Manninen. 118
- 119. Example: CreaHng a HTTPService request and using lastResult property • Create an HTTPService object • Make the HTTP request • Use the results in bindings Adobe AIR Programming, Pasi Manninen. 119
- 120. Example: Using result and fault handlers • • • • • • Use a result event and create an event handler Use the debugger to examine the returned data Display data in UI controls Specify a HTTPService fault handler Using the debugger to examine the fault event object Display the fault data in an Alert pop-‐up Adobe AIR Programming, Pasi Manninen. 120
- 121. Exercise: Weather Forecast • Register to World Weather Online Service – hTp://www.worldweatheronline.com/weather-‐api.aspx – get the API key for request weather data – examine API and XML data tutorials (to know XML schema) • Follow exercise document to create your own Weather Forecast AIR ApplicaHon Adobe AIR Programming, Pasi Manninen. 121
- 122. Create a Flex Mobile Project • Flex Mobile Project Wizard available • Walk through the rest of the project creaHon process like in Desktop AIR project Adobe AIR Programming, Pasi Manninen. 122
- 123. Project Mobile Setngs • Select specific target plaXorms • ApplicaHon Templates – Blank, View-‐Based or Tabbed • Permissions and PlaXorm Setngs • ApplicaHon Screen Setngs – AutomaHcally reorient – Fullscreen – AutomaHcally scale different screen densiHes hTp://help.adobe.com/en_US/flex/mobileapps/WS19f279b149e7481c682e5a9412cf5976c17-‐8000.html Adobe AIR Programming, Pasi Manninen. 123
- 124. Permissions • Select permissions that you applicaHon needs to interact with the Device • Remember to select only needed permissions • Setngs can be changed later (-‐app xml file) • Server Setngs and Build Paths same as in AIR app Adobe AIR Programming, Pasi Manninen. 124
- 125. ApplicaHon Layouts: Blank • Select to create your own custom navigaHon • Only main applicaHon file is created <?xml version="1.0" encoding="uX-‐8"?> <s:ApplicaHon xmlns:fx="hTp://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" applicaHonDPI="160"> <s:Label text="Blank ApplicaHon" fontSize="30" horizontalCenter="0" verHcalCenter="0"/> </s:ApplicaHon> Adobe AIR Programming, Pasi Manninen. 125
- 126. ApplicaHon Layouts: View-‐Based • Build-‐in navigator framework • Navigator will manage your app screens • Template generates two files – Main applicaHon – Default view of your app <?xml version="1.0" encoding="uX-‐8"?> <s:ViewNavigatorApplicaHon xmlns:fx="hTp://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.MobileViewBasedApplicaHonHomeView" applicaHonDPI="160"> </s:ViewNavigatorApplicaHon> <?xml version="1.0" encoding="uX-‐8"?> <s:View xmlns:fx="hTp://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" Htle="HomeView"> <s:Label text="View Based ApplicaHon" fontSize="30" horizontalCenter="0" verHcalCenter="0"/> </s:View> Adobe AIR Programming, Pasi Manninen. 126
- 127. Navigator methods • Use following methods to moving between views of your applicaHon – navigator.popAll() // remove all views -‐> blank – navigator.popToFirstView() // remove all, not first – navigator.popView() // remove current view – navigator.pushView() // add a new view • TransiHon can be used, wipe is default Adobe AIR Programming, Pasi Manninen. 127
- 128. Send data to new View • navigator.pushView() can take an object // open a new view and send String as a data to new view navigator.pushView(views.SecondView, "Hello from Home View"); • Data is available in data object in a new View // set data is available in data object in a new view <s:Label text="{data}" horizontalCenter="0" verHcalCenter ="30"/> Adobe AIR Programming, Pasi Manninen. 128
- 129. View-‐Based App Top Bar • Adds a few specific elements – navigaHonContent, acHonContent • Include common navigaHon throughout <s:navigaHonContent> <s:BuTon id="homeBuTon" click="homeBuTon_clickHandler(event)" label="Home"/> </s:navigaHonContent> <s:acHonContent> <s:BuTon id="backBuTon" click="backBuTon_clickHandler(event)" label="Back"/> </s:acHonContent> // home buTon // remove all the views navigator.popToFirstView(); /back buTon // remove this view from navigator -‐> back to previous view navigator.popView(); Adobe AIR Programming, Pasi Manninen. 129
- 130. View Life Circle • View class has a few new events – Flex.VIEW_ACTIVATED – Flex.VIEW_DEACTIVATED – FlexEvent.REMOVING (just before above) • View data is destroyed by default – Use destrucHonPolicy=”never” to keep View in cache • Data can be saved using View.data object Adobe AIR Programming, Pasi Manninen. 130
- 131. ApplicaHon Layouts: Tabbed • Define tabs in project wizard – tabs can be added/deleted later in main applicaHon file • Tabs are defined via ViewNavigaro <s:ViewNavigator label="ApplicaHon" width="100%" height="100%" firstView="views.ApplicaHonView"/> <s:ViewNavigator label="Preferences" width="100%" height="100%" firstView="views.PreferencesView"/> Adobe AIR Programming, Pasi Manninen. 131
- 132. OS InteracHons: Call • Use URLRequest and navigateToURL methods to open Phone applicaHon to place a call • Use tel: as a protocol <fx:Script> <![CDATA[ protected funcHon callBuTon_clickHandler(event:MouseEvent):void { // make a call var callString:String = "tel:"; callString += callTextInput.text; navigateToURL(new URLRequest(callString)); } ]]> </fx:Script> Adobe AIR Programming, Pasi Manninen. 132
- 133. OS InteracHons: SMS • Use URLRequest and navigateToURL methods to open SMS applicaHon to create message • Use sms: as a protocol <fx:Script> <![CDATA[ protected funcHon callBuTon_clickHandler(event:MouseEvent):void { // make a call var callString:String = "tel:"; callString += callTextInput.text; navigateToURL(new URLRequest(callString)); } ]]> </fx:Script> Adobe AIR Programming, Pasi Manninen. 133
- 134. OS InteracHons: Email • Use URLRequest and navigateToURL methods to launch Email applicaHon to send email • Use mailto: as a protocol and subject= and body= properHes to assign data <fx:Script> <![CDATA[ protected funcHon sendBuTon_clickHandler(event:MouseEvent):void { // send email var emailString:String = "mailto:"; emailString += sendToTextInput.text; emailString += "?subject="+subjectTextInput.text; emailString += "&body="+messageTextArea.text; navigateToURL(new URLRequest(emailString)); } ]]> </fx:Script> Adobe AIR Programming, Pasi Manninen. 134
- 135. OS InteracHons: Open Web Page • Use navigateToURL method to launch Browser applicaHon to show web page <fx:Script> <![CDATA[ protected funcHon openBuTon_clickHandler(event:MouseEvent):void { // open web page navigateToURL(new URLRequest(urlTextInput.text)); } ]]> </fx:Script> Adobe AIR Programming, Pasi Manninen. 135
- 136. OS InteracHons: StageWebView • The StageWebView class displays HTML content in a stage view port • In mobile StageWebView uses the system web control provided by the device operaHng system (desktop AIR WebKit engine) <fx:Script> <![CDATA[ import mx.events.FlexEvent; private var stageWebView:StageWebView; private var rect:Rectangle; protected funcHon openBuTon_clickHandler(event:MouseEvent):void { // open url to stagewebview stageWebView.loadURL(urlTextInput.text); } protected funcHon applicaHon_applicaHonCompleteHandler(event:FlexEvent):void { // create a stagewebview viewport if (StageWebView.isSupported) { stageWebView = new StageWebView(); stageWebView.viewPort = new Rectangle(5,100,stage.width-‐10, stage.height-‐110); stageWebView.stage = this.stage; } else { urlTextInput.text = "StageWebView not supported"; } } ]]> </fx:Script> <s:TextInput id="urlTextInput" leM="5" right="209" top="15" text="hTp://www.jamk.fi"/> <s:BuTon id="openBuTon" right="5" top="5" label="Open URL" click="openBuTon_clickHandler(event)"/> Adobe AIR Programming, Pasi Manninen. 136
- 137. Exercise: Employees • Create a new View-‐Based mobile project • Load Employees data from XML • Display data in list with Item Renderer • Show Employee data in new View • Add call, sms and email funcHonality Adobe AIR Programming, Pasi Manninen. 137
- 138. Example: Accelerometer • Create a new instance of Accelerometer – Import flash.sensors.Accelerometer • Listen Accelerometer UPDATEs to get new X, Y and Z values if (Accelerometer.isSupported) { accelerometer = new Accelerometer(); accelerometer.setRequestedUpdateInterval(10); // 10 ms accelerometer.addEventListener(AccelerometerEvent.UPDATE, accelerometerUpdate); } protected funcHon accelerometerUpdate(event:AccelerometerEvent):void { // update values to UI xLabel.text = "X: " + event.acceleraHonX; yLabel.text = "Y: " + event.acceleraHonY; zLabel.text = "Z: " + event.acceleraHonZ; // move image image.x -‐= (event.acceleraHonX*10); image.y += (event.acceleraHonY*10); } Adobe AIR Programming, Pasi Manninen. 138
- 139. Example: GPS • Add ACCESS_FINE_LOCATION permission • Create a new instance of GeolocaHon – import flash.sensors.GeolocaHon • Listen GeolocaHon UPDATEs if (GeolocaHon.isSupported) { geolocaHon = new GeolocaHon(); geolocaHon.setRequestedUpdateInterval(500); geolocaHon.addEventListener(GeolocaHonEvent.UPDATE, handleLocaHonUpdate); } protected funcHon handleLocaHonUpdate(event:GeolocaHonEvent):void { var kph:Number = event.speed*3.6; locaHonTextArea.text = "laHtude: " + event.laHtude.toString() + "n" + "longitude: " + event.longitude.toString() + "n" + "alHtude: " + event.alHtude.toString() + "n" + "speed: " + event.speed.toString() + "n" + "kph: " + kph.toString() + " KPH n" + "heading: " + event.heading.toString() + "n" Adobe AIR Programming, Pasi Manninen. 139
- 140. Example: Take Picture • Add CAMERA Permission to your project • Use CameraUI Class to access naHve Camera Interface of the Device • Add MediaEvent.COMPLETE and ErrorEvent.ERROR listeners • Use MediaPromise object to access taken image file URL Adobe AIR Programming, Pasi Manninen. 140
- 141. Example: Take Picture (2) // check if Camera is supported if (CameraUI.isSupported) { camera = new CameraUI(); camera.addEventListener(MediaEvent.COMPLETE, mediaHandler); camera.addEventListener(ErrorEvent.ERROR, errorHandler); } // start taking picture protected funcHon takePicture_clickHandler(event:MouseEvent):void { // call na?ve Camera applica?on of the Device camera.launch(MediaType.IMAGE); } // picture taken, show it private funcHon mediaHandler(event:MediaEvent):void { var mediaPromise:MediaPromise = event.data; status.text = mediaPromise.file.url; image.source = mediaPromise.file.url; } <s:Label id="status" text="Click buTon to take picture" top="10" width="100%" textAlign="center"/> <s:BuTon id="takePicture" width="300" height="60" label="Take a Picture" click="takePicture_clickHandler(event)” horizontalCenter="0" enabled="{CameraUI.isSupported}" top="100"/> <s:Image id="image" width="460" height="500" horizontalCenter="0" top="170"/> Adobe AIR Programming, Pasi Manninen. 141
- 142. Example: Microphone • Add RECORD_AUDIO Permission • Create a new instance of Microphone – import flash.media.Microphone • Recorded audio is stored to ByteArray and it can be played with Sound Class • Read more info here: hTp://help.adobe.com/en_US/FlashPlaXorm/reference/acHonscript/3/flash/media/Microphone.html hTp://help.adobe.com/en_US/FlashPlaXorm/reference/acHonscript/3/flash/events/SampleDataEvent.html Adobe AIR Programming, Pasi Manninen. 142
- 143. Example: MulHtouch • Use GestureEvent to detect two finger tap • Add listeners – – – – TransformGestureEvent.GESTURE_PAN TransformGestureEvent.GESTURE_ROTATE TransformGestureEvent.GESTURE_SWIPE TransformGestureEvent.GESTURE_ZOOM • Be ready to use Matrix Class… • Look course example more info Adobe AIR Programming, Pasi Manninen. 143
- 144. File System • AIR provides access to file system to read, write and update files • Use WRITE_EXTERNAL_STORAGE permission with Android – works in desktop without permissions • Different folder aliases from File class – File.applicaHonDirectory (read only “app src” folder) – File.applicaHonStorageDirectory (read/write app inst) – File.desktopDirectory (sdcard in mobile, desktop) – File.documentsDirectory (sdcard in mobile, documents) – File.userDirectory (sdcard I mobile, users) • Use naHvePath with above commands to get path Adobe AIR Programming, Pasi Manninen. 144
- 145. File System example "File.applicaHonDirectory : " + File.applicaHonDirectory.naHvePath "File.applicaHonStorageDirectory : " + File.applicaHonStorageDirectory.naHvePath "File.desktopDirectory: " + File.desktopDirectory.naHvePath "File.documentsDirectory : " + File.documentsDirectory.naHvePath "File.userDirectory : " + File.userDirectory.naHvePath Adobe AIR Programming, Pasi Manninen. 145
- 146. Read and Write to File System • Example: Create and read text file protected funcHon save_clickHandler(event:MouseEvent):void { // save text to file var file:File = File.userDirectory.resolvePath("data/sampleText.txt"); var fileStream:FileStream = new FileStream(); fileStream.open(file, FileMode.WRITE); fileStream.writeUTFBytes(textTextArea.text); fileStream.close(); } protected funcHon load_clickHandler(event:MouseEvent):void { // read text from file var file:File = File.userDirectory.resolvePath("data/sampleText.txt"); var fileStream:FileStream = new FileStream(); fileStream.open(file, FileMode.READ); resultTextArea.text = fileStream.readUTFBytes(fileStream.bytesAvailable); fileStream.close(); } <uses-‐permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> Adobe AIR Programming, Pasi Manninen. 146
- 147. Browse Files • Example: Read one file from file system // buDon event handling protected funcHon browse_clickHandler(event:MouseEvent):void { // browse for single image var file:File = new File(); file.addEventListener(Event.SELECT, fileSelected); file.browseForOpen("open"); } // show selected file if image private funcHon fileSelected(event:Event):void { var file:File = File(event.currentTarget); filepath.text = file.naHvePath; if (file.extension == "jpg" || file.extension == "JPG") image.source = file.url; } • MulHple files can be read also – use browseForOpenMulHple – returns event.files array Adobe AIR Programming, Pasi Manninen. 147
- 148. Using SQLite database • AIR includes the capability to create and work with local SQL databases • Light weight engine that can support larger amounts of data • Because the database runs and data files are stored locally, this SQL database can be used by an AIR applicaHon regardless of whether a network connecHon is available • The database is stored as a single file in the client’s file system (.db extension) • AIR does not specify how or where the database file is stored • Each AIR applicaHon can access any number of local databases Adobe AIR Programming, Pasi Manninen. 148
- 149. Opening a database • A database must be opened to perform operaHons on it • Use a File object to reference the database file • A SQLConnec3on object represents a connecHon to one or more databases • open() method is a synchronous operaHon • openAsync() is also supported for a more robust internal architecture var dbConn:SQLConnecHon = new SQLConnecHon(); var myDB:File = new File("app-‐storage:/MyDB.db"); // synchronous dbConn.open(dbFile, true); // asynchronous dbConn.addEventListener(SQLEvent.OPEN, openHandler); dbConn.openAsync(dbFile, true); Adobe AIR Programming, Pasi Manninen. 149
- 150. Example: Create a new database • Open the database file • Create a connecHon to the database private staHc const CONNECT:Number = 1; private staHc const CREATE_DB:Number = 2; private funcHon init():void { dbFile = new File("app-‐storage:/Employee.db"); if (!dbFile.exists) connect(CREATE_DB); else connect(CONNECT); } private funcHon connect(type:Number):void { dbConn = new SQLConnecHon(); // create or just open if (type == CREATE_DB) dbConn.addEventListener(SQLEvent.OPEN, createTable); else dbConn.addEventListener(SQLEvent.OPEN, getEmployees); dbConn.addEventListener(SQLErrorEvent.ERROR, errorHandler); dbConn.openAsync(dbFile); } Adobe AIR Programming, Pasi Manninen. 150
- 151. Using SQL statements • flash.data.SQLConnec3on – create and open databases, control transacHons, and perform other database level operaHons • flash.data.SQLStatement – represents a single SQL statement to be executed • flash.data.SQLResult – encapsulates query results, including returned data • flash.events.SQLEvent – event dispatched on successful query compleHon, providing access to the SQLResult object • flash.events.SQLErrorEvent – event dispatched on failed query compleHon, providing error code, message, and detail Adobe AIR Programming, Pasi Manninen. 151
- 152. SQL statement • To create and connect a new SQL statement • SQL statements are assigned as text • Statements may be literal or parameterized • To assign a SQL statement dbConn:SQLConnecHon = new SQLConnecHon(); var var myDB:File = new File("app-‐storage:/MyDB.db"); dbConn,open(myDB, true); var dbStatement:SQLStatement = new SQLStatement(); dbStatement.sqlConnecHon = dbConn; dbStatement.text = "CREATE TABLE IF NOT EXISTS employee (id INTEGER PRIMARY KEY, name TEXT, Htle TEXT)"; Adobe AIR Programming, Pasi Manninen. 152
- 153. Assign parameters to SQL statement • RunHme data can be added to the SQL statement with parameters • Before execuHon, parameters in the statement are replaced by data assigned to those named parameters in the parameters property dbStatement.parameters[":name"] = nameInput.text; dbStatement.parameters[":Htle"] = HtleInput.text; dbStatement.text = "INSERT INTO customer (name, Htle) VALUES (:name,:Htle)"; Adobe AIR Programming, Pasi Manninen. 153
- 154. Execute SQL statement • Once the SQL statement is prepared, call the execute() method • The event handlers will respond when the statement succeeds or fails dbStatement.execute(); • SQLEvent.RESULT events dispatch if the statement succeeds • SQLErrorEvent.ERROR events dispatch if the statement fails, with detail in errorID, message, and details properHes dbStatement.addEventListener(SQLEvent.RESULT, nextStatement); private funcHon nextStatement(event:SQLEvent):void { ... } dbStatement.addEventListener(SQLErrorEvent.ERROR, errHandler); private funcHon errHandler(event:SQLErrorEvent):void { ... } Adobe AIR Programming, Pasi Manninen. 154
- 155. Handling returned data • The target of a SQLResult event is the SQLStatement which dispatched the result event • To retrieve query results, get the SQLResult object from the SQLStatement, using the getResult() method • SELECT query data is in the result object’s data property as an Array of untyped objects, each with properHes matching the column names from the SELECT statement • ResulHng data will oMen be assigned to the applicaHon’s data model, to which display components are bound [Bindable] private var resultData:Array; private funcHon selectHandler(event:SQLEvent):void { var dbStatement:SQLStatement = SQLStatement(event.target); var dbResult:SQLResult = dbStatement.getResult(); resultData = dbResult.data; } Adobe AIR Programming, Pasi Manninen. 155
- 156. Example: Employees Database • Create SQLite database • Store employees data to database • Show employees with ItemRenderer Adobe AIR Programming, Pasi Manninen. 156
- 157. Example: InteresHng Places • Project supports – local SQLite Database – different screen sizes – camera Adobe AIR Programming, Pasi Manninen. 157
- 158. Example: Finnkino Movies • Use HTTPService to get data from Finnkino Service (XML based) • Support different layouts and medias Adobe AIR Programming, Pasi Manninen. 158
- 159. Understanding Value Objects • Each typed object contains all the properHes for one instance • These typed objects are known as value objects – contain only value data related to an object – data that is sent from the server, oMen called a transfer object or data transfer object – defined in the Core J2EE paTern catalogue at hTp://java.sun.com/j2ee/paTerns/ValueObject.html – said that it is ”best way” to transfer data between applicaHon and server Adobe AIR Programming, Pasi Manninen. 159
- 160. CreaHng value objects in Flex • Create value objects with AcHonScript class • OMen stored in a package named vo or valueObjects • Define all the value data as class properHes • Individual properHes or the enHre object can be Bindable // Employee.as in vo package package vo { public class Employee { } } Adobe AIR Programming, Pasi Manninen. 160
- 161. Data bindings with value objects • ProperHes of AcHonScript classes used in data bindings need to be declared in the class definiHon • Two possible ways to declare properHes bindable – make the class bindable if all properHes in class will be used in binding statements – make specific properHes bindable if only a few properHes are used in binding statements Adobe AIR Programming, Pasi Manninen. 161
- 162. Binding the view to the model • Following the MVC design paTern, bind the view to the model • Data binding requires – a source property – a desHnaHon property – triggering event • Bind to a value object instance <s:TextInput id="firstnameInput" text="{Employee.firstname}"/> • Bind to a value object within a collec3on <s:TextInput id="firstnameInput" text="{Employees.getItemAt(1).firstname}"/> • Two-‐way data binding within a collecHon <s:TextInput id="firstName" text="@{Employees.employee[0].firstname}"/> Adobe AIR Programming, Pasi Manninen. 162
- 163. Example: ImplemenHng data bindings with value objects • Create an Employee object and bind to a property • Bind the data model to a view • Create two-‐way binding Adobe AIR Programming, Pasi Manninen. 163
- 164. Making HTTP request with parameters • Most services accept parameters that specify data to be generated and subsequently sent back to the client applicaHon • Two disHnct ways to make a HTTPService request with parameters – explicit parameter passing – parameter binding Adobe AIR Programming, Pasi Manninen. 164
- 165. Using explicit parameter passing • Similar to calling methods in Java • Variables are send like a Object – add object to send() method – use AcHonScript and Object class • Cannot use automaHc Flex data validators • Use cancel() method to cancel any pending HTTPService calls Adobe AIR Programming, Pasi Manninen. 165
- 166. Example: Explicit parameter passing • Call send() method with variable as its parameter <fx:DeclaraHons> <fx:String id="phpFile">hTp://www.domain.com/request.php</fx:String> <s:HTTPService id="myService" url="{phpFile}" <?php method="POST" echo "Hi ".$_REQUEST['username']."!"; resultFormat="text" ?> result="{textarea.text = String(event.result)}"> </s:HTTPService> </fx:DeclaraHons> … <fx:Script> <![CDATA[ private var username:String = "Teppo Testaaja"; ]]> </fx:Script> <s:BuTon label="Send to PHP" click="myService.send({'username':username})"/> <s:Label text="Response from PHP:"/> <s:TextArea id="textarea" /> Adobe AIR Programming, Pasi Manninen. 166
- 167. Example: Explicit parameter passing with AcHonScript <fx:DeclaraHons> <fx:String id="phpFile">hTp://www.domain.com/request.php</fx:String> <s:HTTPService id="myService" url="{phpFile}" method="POST" resultFormat="text" <?php result="{textarea.text = String(event.result)}"> echo "Hi ".$_POST['username']."!"; </s:HTTPService> ?> </fx:DeclaraHons> <fx:Script> <![CDATA[ private funcHon callMyService():void { myService.cancel(); var params:Object=new Object(); params.username = "Teppo Testaaja"; myService.send(params); } ]]> </fx:Script> ... <s:BuTon label="Send to PHP" click="callMyService()"/> Adobe AIR Programming, Pasi Manninen. 167
- 168. Using parameter binding • Copy data from user-‐interface controls or models to request parameters • Can apply validators to parameter values before submitng requests to services <fx:DeclaraHons> <fx:String id="phpFile"> hTp://www.domain.com/request.php </fx:String> <s:HTTPService id="myService" url="{phpFile}" resultFormat="text" result="{textarea.text = String(event.result)}"> <s:request> <username>{username.text}</username> <?php </s:request> echo "Hi ".$_POST['username']."!"; </s:HTTPService> ?> </fx:DeclaraHons> ... <s:BuTon label="Send to PHP" click="myService.send()"/> Adobe AIR Programming, Pasi Manninen. 168
- 169. Exercise: Connect Zend Framework to transfer value objects between Flex and PHP • • • • Install Zend Framework to server Create Zend gateway and EmployeeService Transfer Employee value objects from server to Flex and back Display Employees in DataGrid Adobe AIR Programming, Pasi Manninen. 169
- 170. Exercise: Transfer value objects between PHP and Flex (about 5000 ciHes) • • • • • Install world ciHes MySql database Install Zend Framework to server (if not already installed) Create Zend gateway and CityService Transfer City value objects from server to Flex Display City in DataGrid • What you think about performance? Adobe AIR Programming, Pasi Manninen. 170
- 171. Exercise: Data visualizaHon with Flex CharHng Components • Open ”Tour de Flex” and find out how to use Charts in Flash Builder • Add AreaChart in your applicaHon and display ciHes data • What you think about performance? Adobe AIR Programming, Pasi Manninen. 171
- 172. Exercise: Data Paging and visualizaHon • Create a new getCiHes_paged method to CityService • Add a new getCiHes_paged method to Flex RemoteObject • Add a new UI controls to your applicaHon and load for example 20 ciHes at a Hme Adobe AIR Programming, Pasi Manninen. 172
- 173. Exercise: SorHng and filtering data • SorHng ciHes by Name and PopulaHon • Filtering ciHes more than 300000 populaHon Adobe AIR Programming, Pasi Manninen. 173
- 174. Using Map Control in AIR • Google Maps – officially deprecated Sep 2nd, 2011 – works unHl Sep 2nd, 2014 – so it should work today also • MapQuest – easy mobile mapping soluHon – works with Flash Builder 4.6 with AIR desktop and mobile – hTp://developer.mapquest.com/ Adobe AIR Programming, Pasi Manninen. 174
- 175. MapQuest first steps • Look demos at – hTp://demos.mapquest.com/ • Maps API with Flex at – hTp://developer.mapquest.com/web/products/featured/ as3-‐flex-‐flash • Create account and request api key – hTp://developer.mapquest.com/web/info/account/app-‐ keys • Start coding • Look more info from blogs and forum – hTp://devblog.mapquest.com/ – hTp://developer.mapquest.com/web/info/forums Adobe AIR Programming, Pasi Manninen. 175
- 176. Example: MapQuest in AIR Mobile • Create a new project • Follow previous slide steps to get MapQuest API key <mq:TilemapComponent id="myMap" key="xxx" zoom="3" width="100%" height="100%"/> //set the map center and zoom level myMap.setCenter(new LatLng(62.243,25.747),13); //add a zoomcontrol to the boDom right of the map myMap.addControl(new SMMediumZoomControl()); // new poi myPoi = new Poi(new LatLng(62.241,25.759)); myPoi.rolloverAndInfoTitleText = "JAMK/ICT"; myPoi.infoContent = "JAMK University of Applied Science.nn Technology and transportaHon, ICT"; myMap.addShape(myPoi); Adobe AIR Programming, Pasi Manninen. 176
- 177. Open File Browser • The File class exposes methods to open a system dialog with a specified Htle, and opHonally filter by an array of permiTed types – browseForDirectory(Htle): select a directory – browseForOpen(Htle, typeFilter): select a file from this File object’s directory – browseForOpenMulHple(Htle, typeFilter): select mulHple files • A SELECT, SELECT_MULTIPLE, or CANCEL event is dispatched based on user’s response to this dialog • The target of a SELECT event refers to a File object represenHng the selected file or directory Adobe AIR Programming, Pasi Manninen. 177
- 178. Example: Show selected image • Create a new AIR project • UI: Load BuTon, a few Labels to show naHvePath and selected file url, and one Image to show image • Use FileFilter and browseForOpen to select Image file • Use Loader to get BitmapData of the selected image and show with Image control Adobe AIR Programming, Pasi Manninen. 178
- 179. Example: Show mulHple images • Create a new project • Use FileFilter and browseForOpenMulHple method to get filenames • Create own custom Component to show image and some other data • Use TileLayout to show Images Adobe AIR Programming, Pasi Manninen. 179
- 180. File Browsing Components • File system browsing components display file system informaHon retrieved from the current operaHng system, including – <mx:FileSystemList /> – <mx:FileSystemTree /> – <mx:FileSystemDataGrid /> • File system components iniHally display either the root, or a folder specified by a File object assigned to their directory property list.directory = new File("app-‐storage:/"); <mx:FileSystemList id="list" /> Adobe AIR Programming, Pasi Manninen. 180
- 181. FileSystemList component • Displays contents of a folder (files or more directories) as a scrolling list • selectedItem is a File object poinHng to the selected file or folder • Clicking drills to next directory and dispatches Event.SELECT • target of SELECT event object is the new File object for display • refresh() re-‐reads the current directory and updates the display Adobe AIR Programming, Pasi Manninen. 181
- 182. FileSystemTree component • Displays the contents of a file system directory (files or addiHonal directories) in a tree-‐based view, supporHng drill-‐down behavior • selectedItem is a File object poinHng to the selected file or folder • Clicking drills to next directory and dispatches Event.SELECT • target of SELECT event object is the new File object for display • refresh() re-‐reads the current directory and updates the display Adobe AIR Programming, Pasi Manninen. 182
- 183. FileSystemDataGrid component • Displays specified data about the contents of a file system directory (files and/or addiHonal directories) in configurable columns • selectedItem is a File object poinHng to the selected file or folder • clicking drills to next directory and dispatches Event.SELECT • target of SELECT event object is the new File object for display • refresh() re-‐reads the current directory and updates the display Adobe AIR Programming, Pasi Manninen. 183
- 184. Example: File Browsing Components • Basic UI with three different Browsing Components <mx:FileSystemList id="fileList" itemClick="itemClickHandler(event)" /> <mx:FileSystemTree id="fileTree" itemClick="itemClickHandler(event)" /> <mx:FileSystemDataGrid id="fileDataGrid" itemClick="itemClickHandler(event)"/> protected funcHon itemClickHandler(event:ListEvent):void { // show selectred file's na?vePath selectedPath.text = event.target.selectedItem.naHvePath; } Adobe AIR Programming, Pasi Manninen. 184
- 185. More with File class • A File object may represent either a file or a directory • A File object exposes methods to recycle or delete its path content • Use try/catch to handle errors with File class • AIR can launch files using whatever local applicaHon has been registered for that file type • A flash.filesystem.FileStream object is used to read or write files to the file system – readBytes(), readUTF(), readObject(), ... – writeBytes(), writeUTF(), writeObject(), ... • AIR detects when mass storage devices are mounted (aTached) to and unmounted (detached) from its host • Once connected, AIR can read and write to external device file systems, just as if they were local to the host Adobe AIR Programming, Pasi Manninen. 185
- 186. Using Drag and Drop • NaHve drag and drop behavior is managed within AIR applicaHons through the flash.desktop.Na3veDragManager class • Drag and drop is supported between – AIR applicaHons and the naHve operaHng system – between AIR applicaHons – between components within an AIR applicaHon • The following data types may be transferred, carried within a Clipboard object automaHcally associated with each Na3veDragEvent object – Bitmaps, Files, Text, URL Strings, Serialized objects, Object references • NaHveDragEvent handlers will invoke NaHveDragManager methods to determine what happens when the gesture is dropped Adobe AIR Programming, Pasi Manninen. 186
- 187. IntroducHon drag and drop states • The process of clicking on an object, holding down the mouse buTon, and moving the mouse is called a "gesture" • During drag gestures, the object dragged from dispatches this event: – NATIVE_DRAG_START: something is being dragged from the object dispatching this event • During drag gestures, objects dragged over dispatch these events – NATIVE_DRAG_ENTER: gesture has moved over the dispatching display object – NATIVE_DRAG_DROP: gesture has dropped over the dispatching display object – NATIVE_DRAG_EXIT: gesture has moved away from the dispatching display object Adobe AIR Programming, Pasi Manninen. 187
- 188. Handling drag events • Events receive Na3veDragEvent objects which expose properHes including – allowedAcHons: describes whether copy, move, and similar acHons are supported by the component dispatching the event – clipboard: a reference to the Clipboard holding the data being dragged • When handling drag events, methods of Na3veDragManager are called to control how the gesture is handled, including – doDrag(dragIniHator, clipboard): iniHates a drag operaHon – acceptDragDrop(target): tells NaHveDragManager that target can accept a drop of the current NaHveDragEvent Adobe AIR Programming, Pasi Manninen. 188
- 189. Using the clipboard • AIR provides classes to copy data to and from the system clipboard (flash.desktop package) • The Clipboard object is a container for transferring data and objects • With the clipboard API you may copy data and objects – between AIR applicaHons – to and from the client system – between components within a single AIR applicaHon Adobe AIR Programming, Pasi Manninen. 189
- 190. Using the generalClipboard • The Clipboard.generalClipboard property refers to a staHc singleton Clipboard object represenHng the naHve system clipboard • The Clipboard class provides methods for managing data and objects on the clipboard, including – getData(format, transferMode) – setData(format, data, serializable) – setDataHandler(format, handlerFuncHon, serializable) – clearData(format) – hasFormat(format) Adobe AIR Programming, Pasi Manninen. 190
- 191. WriHng and getng data to/from the clipboard • To write to the clipboard, call the setData() method passing in the name of the format to write, the data and whether it is serializable • It is a good pracHce to clear the clipboard before wriHng to it using the clearData() method Clipboard.generalClipboard.clearData(); var dataString:String = "String to clipboard"; Clipboard.generalClipboard.setData(ClipboardFormats.TEXT_FORMAT, dataString); • To read from the clipboard, call the getData() method passing in the desired format and transfer mode Adobe AIR Programming, Pasi Manninen. 191
- 192. Clipboard formats • The format parameter specifies the structure of the data being read • Formats, defined by ClipboardFormats constants, include – BITMAP_FORMAT -‐ a BitmapData object – FILE_LIST_FORMAT -‐ an Array of File objects – HTML_FORMAT -‐ HTML formaTed String data – TEXT_FORMAT -‐ String data – URL_FORMAT -‐ a URL String • Test for the availability of a format using hasFormat() Clipboard.generalClipboard.hasFormat(ClipboardFormats.BITMAP_FORMAT); Adobe AIR Programming, Pasi Manninen. 192
- 193. Clipboard transfer modes • The transfer mode parameter specifies whether to retrieve a copy of the data in the clipboard, or a reference to it • ClipboardTransferMode class provides constants to define the transfer mode desired when retrieving data – CLONE_ONLY: only return a copy – CLONE_PREFERRED: return a copy if available, otherwise a reference – ORIGINAL_ONLY: only return a reference – ORIGINAL_PREFERRED: return a reference if available, otherwise return a copy • The getData() method returns a generic Object which may be cast to a more specific data type var text:String = Clipboard.generalClipboard.getData( ClipboardFormats.TEXT_FORMAT,ClipboardTransferMode.CLONE_ONLY) as String; Adobe AIR Programming, Pasi Manninen. 193
- 194. Example: Drag images from host OS into AIR applicaHon • Enable acceptance of dragged objects • Drop data in the applicaHon • Add drag event listeners Adobe AIR Programming, Pasi Manninen. 194