Writing air and flex xml using a text editor

1
Writing air and flex (xml) using a text editor
2
downloads

• Download the adobe flex and air sdk (free)
• Install

3
The air application

• Air application descriptor file is an xml file
  following a dtd or schema located at
  http//ns.adobe.com/air/application/1.0
• It references an application file which may be
  html or swf.
• These two files would typically be in some
  directory.
• Open a command prompt into that directory and
  then execute adl (by specifying its path info)
• See examples.

4
URLs with examples

• http//help.adobe.com/en_US/AIR/1.5/devappshtml/WS
  5b3ccc516d4fbf351e63e3d118666ade46-7ecc.html
• http//help.adobe.com/en_US/AIR/1.1/devappsflex/WS
  5b3ccc516d4fbf351e63e3d118666ade46-7fd8.html
• http//learnola.com/all-tutorials/

5
An html example HelloWorld.html

• lthtmlgt
• ltheadgt
• lttitlegtHello Worldlt/titlegt
• lt/headgt
• ltbodygt
• lth1gtHello Worldlt/h1gt
• lt/bodygt
• lt/htmlgt

6
The application descriptor called hello.xml

• lt?xml version"1.0" encoding"UTF-8"?gt
• ltapplication xmlns"http//ns.adobe.com/air/applic
  ation/1.0"gt
• ltidgtcom.example.html.HelloWorldlt/idgt
• ltversiongt1.0lt/versiongt
• ltfilenamegtHelloWorldlt/filenamegt
• ltinitialWindowgt
• ltcontentgtHelloWorld.htmllt/contentgt
• ltvisiblegttruelt/visiblegt
• ltwidthgt640lt/widthgt
• ltheightgt480lt/heightgt
• lt/initialWindowgt
• lt/applicationgt

7
Shows commandline window

• C\flex_sdk\bingtcd source
• C\flex_sdk\bin\sourcegtc\flex_sdk\bin\adl
  hello.xml

8
I saved as helloswf.xml

• lt?xml version"1.0" encoding"UTF-8"?gt
• ltapplication xmlns"http//ns.adobe.com/air/applic
  ation/1.0"gt
• ltidgtsamples.flex.HelloWorldlt/idgt
• ltversiongt0.1lt/versiongt
• ltfilenamegtHelloWorldlt/filenamegt
• ltinitialWindowgt
• ltcontentgtHelloWorld.swflt/contentgt
• ltvisiblegttruelt/visiblegt
• ltsystemChromegtnonelt/systemChromegt
• lttransparentgttruelt/transparentgt
• ltwidthgt400lt/widthgt
• ltheightgt200lt/heightgt
• lt/initialWindowgt
• lt/applicationgt

9
Save as HelloWorld.mxml

• lt?xml version"1.0" encoding"utf-8"?gt
• ltmxWindowedApplication xmlnsmx"http//www.adobe
  .com/2006/mxml" layout"absolute" title"Hello
  World"gt
• ltmxStylegt
• WindowedApplication
• background-color"0x999999"
• background-alpha"0.5"
• lt/mxStylegt
• ltmxLabel text"Hello World"
  horizontalCenter"0" verticalCenter"0"/gt
• lt/mxWindowedApplicationgt

10
Compile mxml using amxmlcThen run air using adl
(on previous)

• C\flex_sdk\bingtamxmlc HelloWorld.mxml
• Loading configuration file C\flex_sdk\frameworks\
  air-config.xml
• C\flex_sdk\bin\HelloWorld.swf (284853 bytes)
• C\flex_sdk\bingtadl helloswf.xml

11
Running adl on an swf
12
To create an air installation filenot done yet

• You need a certificate if you worked for
  someone, you would use that. You can
  self-certify your distribution.
• Create a password protected self certification
• C\flex_sdk\bingtadt -certificate -cn SelfSigned
  1024-RSA sampleCert pfxsamplePassword
• The certificate is in sampleCert.pfx
• To be continued

13
A real (cute) flex app with rss feed from
http//api.flickr.com/services/feeds/photos_public
.gne
14
flex code for FlickRIA rss feed pasted in slide
notes also

• lt?xml version"1.0" encoding"utf-8"?gt
• ltmxApplication xmlnsmx"http//www.adobe.com/200
  6/mxml" layout"vertical"gt
• ltmxScriptgt
• lt!CDATA
• import mx.rpc.events.ResultEvent
• import mx.collections.ArrayCollection
• Bindable
• private var photoFeedArrayCollection
• private function requestPhotos()void
• var paramsObjectnew Object()
• params.format'rss_200_enc'
• params.tagssearchterms.text
• photoservice.send(params)
• private function photoHandler(eventResultEvent)
  void
• photoFeedevent.result.rss.channel.item as
  ArrayCollection

15
I used the earlier application descriptor with a
couple changes

• lt?xml version"1.0" encoding"UTF-8"?gt
• ltapplication xmlns"http//ns.adobe.com/air/applic
  ation/1.0"gt
• ltidgtsamples.flex.HelloWorldlt/idgt
• ltversiongt0.1lt/versiongt
• ltfilenamegtflickrialt/filenamegt
• ltinitialWindowgt
• ltcontentgtflickria.swflt/contentgt
• ltvisiblegttruelt/visiblegt
• ltsystemChromegtnonelt/systemChromegt
• lttransparentgttruelt/transparentgt
• ltwidthgt400lt/widthgt
• ltheightgt200lt/heightgt
• lt/initialWindowgt
• lt/applicationgt

16
Note about version of air/flex and namespace in
xml

• ltapplication xmlns"http//ns.adobe.com/air/applic
  ation/1.0"gt
• In previous slide, depending on your version,
  this attribute may be different. I got a load
  error, searched the internet, and found that I
  needed to change the 1.0 to 1.5

17
Repeat the process

• Run amxmlc on the mxml file in the bin directory.
• Copy this flash movie (swf) file to your project
  directory. (I called my directory flickria)
• Create your application descriptor xml and put it
  in here too.
• Run adl (remember to type the path) in this
  project directory. For the previous example, the
  commandline would look like
• c\flex_sdk\bingtamxmlc flickria.mxml
• Loading configuration file C\flex_sdk\frameworks\
  air-config.xml
• C\flex_sdk\bin\flickria.swf (324105 bytes)
• c\flex_sdk\bingtcd flickria
• (remember to cut or copy that swf to the flickria
  directory!!!)
• C\flex_sdk\bin\flickriagtc\flex_sdk\bin\adl
  flickriaswf.xml

18
And penultimate time phpflex(air)mysql
19
Mxml to connect to php on apache to access mysql
database

• lt?xml version"1.0" encoding"utf-8"?gt
• ltmxApplication xmlnsmx"http//www.adobe.com/20
  06/mxml" layout"vertical" creationComplete"userR
  equest.send()"gt
• ltmxHTTPService id"userRequest"
  url"http//localhost/request.php"
  useProxy"false" method"POST"gt
• ltmxrequest xmlns""gt
• ltusernamegtusername.textlt/usernamegtltemailaddress
  gtemailaddress.textlt/emailaddressgt
• lt/mxrequestgt
• lt/mxHTTPServicegt
• ltmxForm x"22" y"10" width"493"gt
• ltmxHBoxgt
• ltmxLabel text"Username"/gt
• ltmxTextInput id"username"/gt
• lt/mxHBoxgt
• ltmxHBoxgt
• ltmxLabel text"Email Address"/gt
• ltmxTextInput id"emailaddress"/gt
• lt/mxHBoxgt
• ltmxButton label"Submit" click"userRequest.send
  ()"/gt
• lt/mxFormgt
• ltmxDataGrid id"dgUserRequest" x"22" y"128"
  dataProvider"userRequest.lastResult.users.user"
  gt

20
Notes about php code for this project

• The dot . is the concat operator for strings.
• A hash is an array of key-value pairs.
• If you have a hash, you use the -gt operator (as
  in c) to access a value given a key.
• Flex accepts xml formatted input, so the php has
  to build a string that contains the xml data.

21
Php to deliver xml content to flex

• lt?php
• //connect to the database
• mysql_connect("localhost", "root", "") or
  die(mysql_error())
• mysql_select_db("test") or die(mysql_error())
• if( _POST"emailaddress" AND
  _POST"username")
• //add the user
• Query "INSERT INTO users VALUES ('',
  '"._POST'username'."', '"._POST'emailaddress'
  ."')"
• Result mysql_query( Query )
• //return a list of all the users
• Query "SELECT from users"
• Result mysql_query( Query )
• Return "ltusersgt"
• while ( User mysql_fetch_object( Result )
  )
• Return . "ltusergtltuseridgt".User-gtuserid."lt/
  useridgtltusernamegt".User-gtusername."lt/usernamegtltem
  ailaddressgt".User-gtemailaddress."lt/emailaddressgtlt
  /usergt"

22
Your project

• Adjust mxml and xml files as need be for your
  database table.
• Write a php program like mine to serve the data
  to the flex app.
• I provided CR (create and read) but we still need
  UD (update-delete). These are left for you to
  complete but here are some hints
• Put multiple buttons on the form with different
  functionality (harder solution).
• In php if just name is entered assume it is a
  delete operation.
• In php, if all fields are entered and a select
  shows this student already exists, then do
  update.
• Create and test an ant build script for your
  project.

23
My form in mxml in notes, too

• lt?xml version"1.0" encoding"utf-8"?gt
• ltmxApplication xmlnsmx"http//www.adobe.com/20
  06/mxml" layout"vertical" creationComplete"userR
  equest.send()"gt
• ltmxHTTPService id"userRequest"
  url"http//localhost/flexstudents.php"
  useProxy"false" method"POST"gt
• ltmxrequest xmlns""gt
• ltstudentnamegtstudentname.textlt/studentnamegtltage
  gtage.textlt/agegtltgpagtgpa.textlt/gpagtltyeargtyear.
  textlt/yeargtltsexgtsex.textlt/sexgt
• lt/mxrequestgt
• lt/mxHTTPServicegt
• ltmxForm x"22" y"10" width"493"gt
• ltmxHBoxgt
• ltmxLabel text"Name"/gt
• ltmxTextInput id"studentname"/gt
• lt/mxHBoxgt
• ltmxHBoxgt
• ltmxLabel text"Age"/gt
• ltmxTextInput id"age"/gt
• lt/mxHBoxgt
• lt! more of these HBox/Label/TextInputs as needed
  for your table.--gt
• ltmxButton label"Submit" click"userRequest.send(
  )"/gt
• lt/mxFormgt

24
My php

• lt?php
• //connect to the database
• mysql_connect("localhost", "root", "") or
  die(mysql_error())
• mysql_select_db("test") or die(mysql_error())
• if( _POST"studentname" AND _POST"age"
  AND _POST"year" AND _POST"gpa" AND
  _POST"sex" )
• name_POST"studentname"
• age_POST"age"
• year_POST"year"
• gpa_POST"gpa"
• sex_POST"sex"
• //add the student
• Query "INSERT INTO Students
  (Name,Age,GPA,Year,Sex) VALUES ('name','age','g
  pa','year','sex')"
• Result mysql_query( Query )
• //return a list of all the users
• Query "SELECT from Students"
• Result mysql_query( Query )

25
Desktop air app using php/apache
26
Using the ant build tool

• For starters, download apache ant.
• Make sure it is in the path and working properly.
• Apache has a tutorial for using ant on a modest
  java project with a few classes and an image.
  Work through this tutorial!!!
• Read the README in the flex_sdk\ant directory. It
  may recommend that you copy the anttask jar file
  to c\ant\lib

27
Ant build.xml script in notes

• I have a dir called C\flickria, with a dir
  called src. The flickria.mxml file is in the src
  directory.
• The build.xml goes in the directory flickria.
• You should be able to go through the xml script
  and see what changes to make for your system.
• It is easiest to make a shortcut cmd.exe in this
  root directory and run ant from the commandline
  there.
• Then go look for index.html it is in a
  appname/build/appname directory.
• This particular one came from a site
  http//mdzyuba.blogspot.com/2008/05/building-flex-
  project-with-ant.html
• (I found many sample ant builds that didnt work.)

28
Some of blackscreen output

• c\flickriagtant
• Buildfile build.xml
• init
• echoproperties Ant properties
• echoproperties Thu Jan 22 163540 EST 2009
• echoproperties APP_HEIGHT600
• echoproperties APP_TITLESample Application
• echoproperties APP_WIDTH800
• echoproperties FLEX_HOMEC\\\flex_sdk
• echoproperties ant.core.libC\\\apache-ant-1.7.
  1\\lib\\ant.jar
• echoproperties ant.filec\\\flickria\\build.xml
  
• echoproperties ant.file.flickriac\\\flickria\\
  build.xml
• echoproperties ant.homeC\\\apache-ant-1.7.1
• echoproperties ant.java.version1.6
• echoproperties ant.library.dirC\\\apache-ant-1
  .7.1\\lib
• echoproperties ant.proj.nameflickria
• echoproperties ant.project.nameflickria
• echoproperties ant.versionApache Ant version
  1.7.1 compiled on June 27 20

29
More

• echoproperties build.dirc\\\flickria\\build
• echoproperties file.encodingCp1252
• echoproperties file.encoding.pkgsun.io
• echoproperties file.separator\\
• echoproperties flex_srcc\\\flickria\\src
• echoproperties java.awt.graphicsenvsun.awt.Win3
  2GraphicsEnvironment
• echoproperties java.awt.printerjobsun.awt.windo
  ws.WPrinterJob
• all
• init
• clean
• delete Deleting directory c\flickria\build
• init
• build
• init
• compile.flex
• mxmlc Loading configuration file
  C\flex_sdk\frameworks\flex-config.xml
• mxmlc C\flickria\build\flickria\flickria.sw
  f (507019 bytes)

30
remarks

• This particular ant script generates an html
  wrapper for flickria.swf
• Ill try to get a working ant script example that
  uses the application descriptor xml file (named
  appname-app.xml) to generate the air application.

31
Using ant build for flickrialast slide.
index.html launches the flash movie