writing air and flex xml using a text editor
Download
Skip this Video
Download Presentation
Writing air and flex (xml) using a text editor

Loading in 2 Seconds...

play fullscreen
1 / 31

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


  • 139 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Writing air and flex (xml) using a text editor' - loren


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

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)

?>

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

slide29
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.
ad