Writing air and flex (xml) using a text editor. downloads Download the adobe flex and air sdk (free)...
31
Writing air and flex (xml) using a text editor
-
date post
20-Dec-2015 -
Category
Documents
-
view
223 -
download
1
Transcript of Writing air and flex (xml) using a text editor. downloads Download the adobe flex and air sdk (free)...
Writing air and flex (xml) using a text editor
downloads
• Download the adobe flex and air sdk (free)
• Install
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.
URLs with examples
• http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7ecc.html
• http://help.adobe.com/en_US/AIR/1.1/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade46-7fd8.html
• http://learnola.com/all-tutorials/
An html example: HelloWorld.html
<html><head> <title>Hello World</title> </head><body> <h1>Hello World</h1></body></html>
The application descriptor called hello.xml
<?xml version="1.0" encoding="UTF-8"?><application xmlns="http://ns.adobe.com/air/application/1.0"> <id>com.example.html.HelloWorld</id> <version>1.0</version> <filename>HelloWorld</filename> <initialWindow> <content>HelloWorld.html</content> <visible>true</visible> <width>640</width> <height>480</height> </initialWindow></application>
Shows commandline & window
• C:\flex_sdk\bin>cd source
• C:\flex_sdk\bin\source>c:\flex_sdk\bin\adl hello.xml
I saved as helloswf.xml <?xml version="1.0" encoding="UTF-8"?> <application xmlns="http://ns.adobe.com/air/application/1.0"> <id>samples.flex.HelloWorld</id> <version>0.1</version> <filename>HelloWorld</filename> <initialWindow> <content>HelloWorld.swf</content> <visible>true</visible> <systemChrome>none</systemChrome> <transparent>true</transparent> <width>400</width> <height>200</height> </initialWindow> </application>
Save as HelloWorld.mxml<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="Hello World">
<mx:Style> WindowedApplication { background-color:"0x999999"; background-alpha:"0.5"; } </mx:Style> <mx:Label text="Hello World" horizontalCenter="0"
verticalCenter="0"/> </mx:WindowedApplication>
Compile mxml using amxmlcThen run air using adl (on previous)• C:\flex_sdk\bin>amxmlc HelloWorld.mxml
• Loading configuration file C:\flex_sdk\frameworks\air-config.xml
• C:\flex_sdk\bin\HelloWorld.swf (284853 bytes)
• C:\flex_sdk\bin>adl helloswf.xml
Running adl on an swf
To create an air installation file…not 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\bin>adt -certificate -cn SelfSigned
1024-RSA sampleCert pfxsamplePassword• The certificate is in sampleCert.pfx • To be continued…
A real (cute) flex app with rss feed from
http://api.flickr.com/services/feeds/photos_public.gne
flex code for FlickRIA rss feed –pasted in slide notes also<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"><mx:Script>
<![CDATA[import mx.rpc.events.ResultEvent;import mx.collections.ArrayCollection;
[Bindable]private var photoFeed:ArrayCollection;private function requestPhotos():void{var params:Object=new Object();params.format='rss_200_enc';params.tags=searchterms.text;photoservice.send(params);}private function photoHandler(event:ResultEvent):void{photoFeed=event.result.rss.channel.item as ArrayCollection;}
]]></mx:Script><mx:HTTPService id="photoservice"url="http://api.flickr.com/services/feeds/photos_public.gne"result="photoHandler(event)"/>
<mx:HBox width="100%"><mx:Label text="flickr tags or search"/><mx:TextInput id="searchterms" enter="requestPhotos()"/><mx:Button label="Button" id="search" click="requestPhotos()"/>
</mx:HBox><mx:TileList width="100%" height="100%" dataProvider="{photoFeed}"><mx:itemRenderer>
<mx:Component><mx:VBox width="125" height="125"horizontalAlign="center"paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"horizontalScrollPolicy="off" verticalScrollPolicy="off"><mx:Image width="75" height="75"source="{data.thumbnail.url}"/><mx:Text text="{data.credit}"/></mx:VBox>
</mx:Component></mx:itemRenderer></mx:TileList>
</mx:Application>
I used the earlier application descriptor with a couple changes
<?xml version="1.0" encoding="UTF-8"?> <application xmlns="http://ns.adobe.com/air/application/1.0"> <id>samples.flex.HelloWorld</id> <version>0.1</version> <filename>flickria</filename> <initialWindow> <content>flickria.swf</content> <visible>true</visible> <systemChrome>none</systemChrome> <transparent>true</transparent> <width>400</width> <height>200</height> </initialWindow> </application>
Note about version of air/flex and namespace in xml
<application xmlns="http://ns.adobe.com/air/application/1.0">
• 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
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\bin>amxmlc flickria.mxmlLoading configuration file C:\flex_sdk\frameworks\air-config.xmlC:\flex_sdk\bin\flickria.swf (324105 bytes)c:\flex_sdk\bin>cd flickria(remember to cut or copy that swf to the flickria directory!!!)C:\flex_sdk\bin\flickria>c:\flex_sdk\bin\adl flickriaswf.xml
And penultimate time: php+flex(air)+mysql
Mxml to connect to php on apache to access mysql database
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="userRequest.send()"> <mx:HTTPService id="userRequest" url="http://localhost/request.php" useProxy="false" method="POST"> <mx:request xmlns=""> <username>{username.text}</username><emailaddress>{emailaddress.text}</emailaddress> </mx:request> </mx:HTTPService> <mx:Form x="22" y="10" width="493"> <mx:HBox> <mx:Label text="Username"/> <mx:TextInput id="username"/> </mx:HBox> <mx:HBox> <mx:Label text="Email Address"/> <mx:TextInput id="emailaddress"/> </mx:HBox> <mx:Button label="Submit" click="userRequest.send()"/> </mx:Form> <mx:DataGrid id="dgUserRequest" x="22" y="128" dataProvider="{userRequest.lastResult.users.user}"> <mx:columns> <mx:DataGridColumn dataField="userid" headerText="User ID"/> <mx:DataGridColumn dataField="username" headerText="User Name"/> </mx:columns> </mx:DataGrid> <mx:TextInput x="22" y="292" id="selectedemailaddress" text="{dgUserRequest.selectedItem.emailaddress}"/> </mx:Application>
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 ->
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.
Php to deliver xml content to flex
<?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 = "<users>"; while ( $User = mysql_fetch_object( $Result ) ) { $Return .= "<user><userid>".$User->userid."</userid><username>".$User->username."</
username><emailaddress>".$User->emailaddress."</emailaddress></user>"; } $Return .= "</users>"; mysql_free_result( $Result ); print ($Return) ?>
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.
My “form” in mxml in notes, too<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
creationComplete="userRequest.send()"> <mx:HTTPService id="userRequest" url="http://localhost/flexstudents.php" useProxy="false" method="POST"> <mx:request xmlns=""> <studentname>{studentname.text}</studentname><age>{age.text}</age><gpa>{gpa.text}</gpa><year>{year.text}</
year><sex>{sex.text}</sex> </mx:request> </mx:HTTPService> <mx:Form x="22" y="10" width="493"> <mx:HBox> <mx:Label text="Name"/> <mx:TextInput id="studentname"/> </mx:HBox> <mx:HBox> <mx:Label text="Age"/> <mx:TextInput id="age"/> </mx:HBox><!– more of these HBox/Label/TextInputs as needed for your table….--><mx:Button label="Submit" click="userRequest.send()"/> </mx:Form> <mx:DataGrid id="dgUserRequest" x="22" y="128" dataProvider="{userRequest.lastResult.students.student}"> <mx:columns> <mx:DataGridColumn dataField="Name" headerText="Name"/> <mx:DataGridColumn dataField="Age" headerText="Age"/> <mx:DataGridColumn dataField="Sex" headerText="Sex"/> <mx:DataGridColumn dataField="Year" headerText="Year"/> <mx:DataGridColumn dataField="GPA" headerText="GPA"/> </mx:columns> </mx:DataGrid> <mx:TextInput x="22" y="292" id="selectedgpa" text="{dgUserRequest.selectedItem.GPA}"/> </mx:Application>
My php<?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','$gpa','$year','$sex')"; $Result = mysql_query( $Query ); }
//return a list of all the users $Query = "SELECT * from Students"; $Result = mysql_query( $Query ); $Return = "<students>";
while ( $student = mysql_fetch_object( $Result ) ) { $Return .= "<student><Name>".$student->Name."</Name><Age>".$student->Age."</Age><GPA>".$student-
>GPA."</GPA><Year>".$student->Year."</Year><Sex>".$student->Sex."</Sex></student>"; } $Return .= "</students>"; mysql_free_result( $Result ); print ($Return) ?>
Desktop air app using php/apache
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
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 didn’t work.)
Some of blackscreen outputc:\flickria>antBuildfile: build.xml
init:[echoproperties] #Ant properties[echoproperties] #Thu Jan 22 16:35:40 EST 2009[echoproperties] APP_HEIGHT=600[echoproperties] APP_TITLE=Sample Application[echoproperties] APP_WIDTH=800[echoproperties] FLEX_HOME=C\:\\flex_sdk[echoproperties] ant.core.lib=C\:\\apache-ant-1.7.1\\lib\\ant.jar[echoproperties] ant.file=c\:\\flickria\\build.xml[echoproperties] ant.file.flickria=c\:\\flickria\\build.xml[echoproperties] ant.home=C\:\\apache-ant-1.7.1[echoproperties] ant.java.version=1.6[echoproperties] ant.library.dir=C\:\\apache-ant-1.7.1\\lib[echoproperties] ant.proj.name=flickria[echoproperties] ant.project.name=flickria[echoproperties] ant.version=Apache Ant version 1.7.1 compiled on June 27 20[echoproperties] awt.toolkit=sun.awt.windows.WToolkit[echoproperties] basedir=c\:\\flickria
More…[echoproperties] build.dir=c\:\\flickria\\build[echoproperties] file.encoding=Cp1252[echoproperties] file.encoding.pkg=sun.io[echoproperties] file.separator=\\[echoproperties] flex_src=c\:\\flickria\\src[echoproperties] java.awt.graphicsenv=sun.awt.Win32GraphicsEnvironment[echoproperties] java.awt.printerjob=sun.awt.windows.WPrinterJoball: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.swf (507019 bytes)
BUILD SUCCESSFULTotal time: 5 seconds
remarks
• This particular ant script generates an html wrapper for flickria.swf
• I’ll try to get a working ant script example that uses the application descriptor xml file (named appname-app.xml) to generate the air application.
Using ant build for flickria…last slide. index.html launches the flash movie
