Writing air and flex xml using a text editor
This presentation is the property of its rightful owner.
Sponsored Links
1 / 31

Writing air and flex (xml) using a text editor PowerPoint PPT Presentation


  • 103 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Writing air and flex xml using a text editor

Writing air and flex (xml) using a text editor


Downloads

downloads

  • Download the adobe flex and air sdk (free)

  • Install


The air application

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

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

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

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

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

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

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 amxmlc then run air using adl on previous

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

Running adl on an swf


To create an air installation file not done yet

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

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

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

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

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

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


And penultimate time php flex air mysql

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


Mxml to connect to php on apache to access mysql database

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

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

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

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

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

Desktop air app using php/apache


Using the ant build tool

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

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 output

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


Writing air and flex xml using a text editor

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


Remarks

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

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


  • Login