1 / 31

Writing air and flex (xml) using a text editor

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

loren
Download Presentation

Writing air and flex (xml) using a text editor

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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/WS5b3ccc516d4fbf351e63e3d118666ade46-7ecc.html • http://help.adobe.com/en_US/AIR/1.1/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade46-7fd8.html • http://learnola.com/all-tutorials/

  5. An html example: HelloWorld.html <html> <head> <title>Hello World</title> </head> <body> <h1>Hello World</h1> </body> </html>

  6. 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>

  7. Shows commandline & window • C:\flex_sdk\bin>cd source • C:\flex_sdk\bin\source>c:\flex_sdk\bin\adl hello.xml

  8. 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>

  9. 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>

  10. 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

  11. Running adl on an swf

  12. 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…

  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 <?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>

  15. 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>

  16. 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

  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\bin>amxmlc flickria.mxml Loading configuration file C:\flex_sdk\frameworks\air-config.xml C:\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

  18. And penultimate time: php+flex(air)+mysql

  19. 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>

  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 -> 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 <?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) ?>

  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 <?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>

  24. 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) ?>

  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 didn’t work.)

  28. Some of blackscreen output c:\flickria>ant Buildfile: 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

  29. 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.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.swf (507019 bytes) BUILD SUCCESSFUL Total time: 5 seconds

  30. 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.

  31. Using ant build for flickria…last slide. index.html launches the flash movie

More Related