AIR dilema!

tj99ay
Points:10
Posts:0

Answered

8/4/2010 4:22:26 AM

Title: AIR dilema!

Hi All,

I've been racking my brain for weeks now trying to work out how to do the following. I can do some of it in Flash and some of in Flex, but I can't do it all in Flex which is frustrating.

In a nutshell, I want to create an Air App that will allow me to load an XML file from:

File.userDirectory

and then display images or SWF's based on the XML data:


 
<?xml version="1.0" encoding="utf-8"?>
<GALLERY>
<IMAGE TITLE="shop">test_4.swf</IMAGE>
</GALLERY>

In Flex 3 I can get the XML file loading from the userDirectory no problem, but I can't work out how to code it to display the images on the stage.

In Flash I can get the XML file loading from the app's installation directory only, but I can display the images on the stage.

Here are the two lots of code:

FLASH (Note: I have a few movieclips holding the images)

 
var myXML:XML;
var myLoader:URLLoader = new URLLoader();
myLoader.load(new URLRequest("example.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);
function processXML(e:Event):void {
myXML = new XML(e.target.data);
//trace(myXML.IMAGE);
for (var i:int = 0; i<myXML.*.length(); i++) {
  trace("My image number is " + (i+1) + ", it's title is " + myXML.IMAGE[i].@TITLE + " and it's URL is " + myXML.IMAGE[i]);
  var url:URLRequest = new URLRequest(myXML.IMAGE[i]);
  var loader:Loader = new Loader();
  loader.load(url);
  switch (i) {
   case 0 :
    trace(0);
    mc_container_0.addChild(loader);
    break;
   case 1 :
    trace(1);
    mc_container_1.addChild(loader);
    break;
   case 2 :
    trace(2);
    mc_container_2.addChild(loader);
    break;
   default :
    //trace("Not 0, 1, or 2");
  }
}
}

and:

FLEX 3

 
<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"

width="768" height="1366" xmlns:comp="*" xmlns:fmtComp="fmtComps.*"

creationComplete="readXMLContent();" paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" backgroundColor="#ff00ff">

<mx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.utils.ObjectProxy;

import mx.rpc.events.ResultEvent;

[Bindable]

private var userManualObj:ObjectProxy;

private function loadModelData(event:ResultEvent):void

{
userManualObj=event.result.UserManual;
}

private function readXMLContent():void
{
var reportDir:File = File.userDirectory.resolvePath("myassets");
var xmlFile:File;
var fileStream:FileStream = new FileStream();
xmlFile = reportDir.resolvePath("example.xml");

if(xmlFile.exists && xmlFile.size > 0)// Checking if the UserGuide.xml file already exists and the file is not empty

{
var stream:FileStream = new FileStream();
var xml:XML = new XML();
stream.open(xmlFile, FileMode.READ);
xml = XML(stream.readUTFBytes(stream.bytesAvailable));
var strXml:String = xml.toXMLString();
Alert.show(strXml);
trace(strXml);
stream.close();
}

}

]]>

</mx:Script>
<mx:SWFLoader height="93" width="708" id="mc_container_0" />
<mx:SWFLoader height="393" width="708" id="mc_container_1" />
<mx:SWFLoader height="293" width="708" id="mc_container_2" />
 </mx:WindowedApplication>

Somehow I need to get the XML data for the file location into each of the SWF loaders in Flex, but I simply don't know how to code it? It's probably very easy for an expert out there. Note: I only want to end up with an Air App which will be running locally on my machine. The idea is, when the XML file changes with new image data, the Air App will display that new image. The image will be added to the "myassets" folder too. If anyone out can point me in the right direction, it would certainly be appreciated. Many thanks. Tim

Wilbur
Points: 510
Posts:0

Accepted Answer

8/4/2010 5:59:37 AM

you can use tileList to display the image list loaded using xml file . You can code it like this in flex. get back to me if any problem



//format of your images.xml file 
<?xml version="1.0" encoding="utf-8"?>
<root>
	<image title="Image Title" thumbnailImage="assets/myImage.jpg" />
	<image title="Image Title1" thumbnailImage="assets/myImage1.jpg" />
</root>


//code in your main application mxml file
<mx:XML id=”xml” source=”images.xml” />
<mx:XMLListCollection id=”xmlCollection” source=”{xml.image}” />
<mx:TileList id="tileListCtrl" dataProvider="{xmlCollection}" itemRenderer="ImageRenderer" columnCount="4" columnWidth="120" rowCount="3" rowHeight="120" verticalScrollPolicy="on" />

//save the following code as "ImageRenderer.mxml"
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle">
	<mx:Image source="{data.@thumbnailImage}" />
	<mx:Label text="{data.@title}" />
</mx:VBox>

Tim
Points: 0
Posts:0

8/4/2010 6:27:46 AM

Hi Wilbur,

Thanks heaps for that.

So am I correct in thinking that your application mxml file replaces everything I have currently? If so, that's amazing!

My only concern is that the XML file and the images *must* load from a folder named "myassets" inside the userDirectory NOT from the app's application diretory. So how would I code it to do something like this:

<mx:XML id=”xml” source=[userDirectory]."myassets/images.xml” />

?

Thanks mate,

Tim

Wilbur
Points: 510
Posts:0

8/4/2010 7:05:30 AM

do not delete the whole code from main mxml , keep the default code(the code generated by flex when new file is created) and the code needed to load xml from assets folder. I have loaded xml from path which is used for web applications, so you have to use ur xml only .

delete my xml tag and declare your xml variable out side the function so that it can be accessed by xmlCollection

public var xml:XML = new XML();

Tim
Points: 0
Posts:0

8/4/2010 7:25:12 AM

Ummmm ... starting to lose me. Do you mean I do the following, which doesn't work BTW:



<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="768" height="1366">
	 
	
	
		<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.utils.ObjectProxy;
			import mx.rpc.events.ResultEvent;
			[Bindable]
			
			public var xml:XML = new XML();  
			
			private var userManualObj:ObjectProxy;
			private function loadModelData(event:ResultEvent):void
			{
				userManualObj=event.result.UserManual;
			}
			private function readXMLContent():void
			{
							
				var reportDir:File = File.userDirectory.resolvePath("myassets");
				var xmlFile:File;
				var fileStream:FileStream = new FileStream(); 
				xmlFile = reportDir.resolvePath("example.xml");
				if(xmlFile.exists && xmlFile.size > 0)// Checking if the UserGuide.xml file already exists and the file is not empty
				{
				var stream:FileStream = new FileStream();
				var xml:XML = new XML();
				stream.open(xmlFile, FileMode.READ);
				xml = XML(stream.readUTFBytes(stream.bytesAvailable));
				var strXml:String = xml.toXMLString();
				Alert.show(strXml);
				trace(strXml);
				stream.close();
				}
			}
			
			
		]]>
	</mx:Script>
	
	
	<mx:XMLListCollection id="xmlCollection" source="{xml.image}" />   
	<mx:TileList id="tileListCtrl" dataProvider="{xmlCollection}" itemRenderer="ImageRenderer" columnCount="1" columnWidth="768" rowCount="1" rowHeight="1366" verticalScrollPolicy="off" />   
</mx:WindowedApplication>

Tim
Points: 0
Posts:0

8/4/2010 7:47:58 AM

Hi Wilbur,

Has a breakthrough with this code below, however I need to load the images from the userDirectory/myassets folder as well. I though the XML would handle that, but Air tries to load the images from it's own installation folder instead. Any thoughts on how to get the images loaded directly from userDirectory/myassets?



<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="768" height="1366" creationComplete="readXMLContent();">
	 
		<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.utils.ObjectProxy;
			import mx.rpc.events.ResultEvent;
			[Bindable]
			
			public var xml:XML = new XML();  
			
			private var userManualObj:ObjectProxy;
			private function loadModelData(event:ResultEvent):void
			{
				userManualObj=event.result.UserManual;
			}
			private function readXMLContent():void
			{
							
				var reportDir:File = File.userDirectory.resolvePath("myassets");
				var xmlFile:File;
				var fileStream:FileStream = new FileStream(); 
				xmlFile = reportDir.resolvePath("images.xml");
				if(xmlFile.exists && xmlFile.size > 0)// Checking if the UserGuide.xml file already exists and the file is not empty
				{
				var stream:FileStream = new FileStream();
			//var xml:XML = new XML();
				stream.open(xmlFile, FileMode.READ);
				xml = XML(stream.readUTFBytes(stream.bytesAvailable));
				var strXml:String = xml.toXMLString();
				//Alert.show(strXml);
				//trace(strXml);
				stream.close();
				}
			}
						
		]]>
	</mx:Script>
	
	
	<mx:XMLListCollection id="xmlCollection" source="{xml.image}" />   
	<mx:TileList id="tileListCtrl" dataProvider="{xmlCollection}" itemRenderer="ImageRenderer" columnCount="1" columnWidth="768" rowCount="1" rowHeight="1366" verticalScrollPolicy="off" />   
</mx:WindowedApplication>

Thanks again, Tim

Tim
Points: 0
Posts:0

8/4/2010 7:55:30 AM

Hi Wilbur,

One other thing, do you know how to go FULL SCREEN and disable scroll bars when the Air App runs?

We're getting there :-)

Ta

Tim

Friend
Points: 710
Posts:0

Accepted Answer

8/4/2010 10:24:40 AM

@Tim to load images from your desktop path you should use a similar way that you are using for loading xml file . In your renderer the image source should be complete system path else it will try to pick images from installation directory only .

REMEMBER image path in xml should be only image name. because we are resolving the myassets directory in the code below.

<image title="Image Title" thumbnailImage="myImage.jpg" />

the renderer code should be like this.


<?xml version="1.0" encoding="utf-8"?>  
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle">  
	<mx:Script>
		<![CDATA[
//images directory
var reportDir:File = File.userDirectory.resolvePath("myassets");
var imagePath:File;  
//image name from xml file   
imagePath = reportDir.resolvePath(data.@thumbnailImage);
// we got the complete system path 
myImage.source=imagePath.url;

//when we trace the path looks like 
//file:///C:/Users/Administrator/Desktop/myassets/myImage.JPG

		]]>
	</mx:Script>
    <mx:Image id="myImage" />  
    <mx:Label text="{data.@title}" />  
</mx:VBox>

Troy
Points: 820
Posts:0

8/4/2010 10:56:02 AM

you can use the fullscreen event to know when screen is switched to fullscreen

stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenRedraw);
function fullScreenRedraw(event:FullScreenEvent):void
{
if (event.fullScreen)
{
//set horizontal and vertical scrollpolicy of application to false
}
else
{
//set horizontal and vertical scrollpolicy of application to tru
}
}

tj99ay
Points: 10
Posts:0

8/4/2010 3:08:22 PM

Hi Friend,

Love your work, however I now get these errors. Do we have a typo somewhere?

Severity and Description Path Resource Location Creation Time Id
1120: Access of undefined property data. tileTest/src ImageRenderer.mxml line 9 1280958505891 196
1120: Access of undefined property data. tileTest/src ImageRenderer.mxml line 9 1280958507376 201
1120: Access of undefined property imagePath. tileTest/src ImageRenderer.mxml line 9 1280958505891 194
1120: Access of undefined property imagePath. tileTest/src ImageRenderer.mxml line 9 1280958507376 199
1120: Access of undefined property imagePath. tileTest/src ImageRenderer.mxml line 11 1280958505891 198
1120: Access of undefined property imagePath. tileTest/src ImageRenderer.mxml line 11 1280958507391 203
1120: Access of undefined property myImage. tileTest/src ImageRenderer.mxml line 11 1280958505891 197
1120: Access of undefined property myImage. tileTest/src ImageRenderer.mxml line 11 1280958507391 202

Thanks

Tim

tj99ay
Points: 10
Posts:0

8/4/2010 4:31:20 PM

Hi Guys,

Just noticed also when I run in Debug mode, the app is continually displaying this message in the console:

warning: unable to bind to property 'title' on class 'XML' (class is not an IEventDispatcher)
warning: unable to bind to property 'thumbnailImage' on class 'XML' (class is not an IEventDispatcher)

As you can probably tell by now, I am not much of coder :-(

Any assistance with this and the above post would be hugely appreciated.

Thanks

Tim

Troy
Points: 820
Posts:0

8/4/2010 9:40:11 PM

the code written by friend has to be in function , in flex you cannot execute code on root. SO in vbox tag initalize event create a function and put all 4 lines of the script code in that.

in vbox tag

initialize="vbox1_initializeHandler(event)"

in script
protected function vbox1_initializeHandler(event:FlexEvent):void
{
// put all code here
}

tj99ay
Points: 10
Posts:0

8/4/2010 9:52:52 PM

Hi Troy,

I did this:



<?xml version="1.0" encoding="utf-8"?>     
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" initialize="vbox1_initializeHandler(event);">     
    <mx:Script>   
        <![CDATA[   
               
        protected function vbox1_initializeHandler(event:FlexEvent):void 
{ 
//images directory   
var reportDir:File = File.userDirectory.resolvePath("myassets");   
var imagePath:File;     
//image name from xml file      
imagePath = reportDir.resolvePath(image.@thumbnailImage);   
// we got the complete system path    
myImage.source = imagePath.url;   
  
//when we trace the path looks like    
//file:///C:/Users/Administrator/Desktop/myassets/myImage.JPG 
}        
        ]]>   
    </mx:Script>   
    <mx:Image id="myImage" />     
    <mx:Label text="{data.@title}" />     
</mx:VBox>

but the error now says: Severity and Description Path Resource Location Creation Time Id 1046: Type was not found or was not a compile-time constant: FlexEvent. tileTest/src ImageRenderer.mxml line 6 1280983864485 290 Thanks Tim

tj99ay
Points: 10
Posts:0

8/4/2010 10:05:02 PM

Hi Troy,

Good news!

I changed the code to this:



<?xml version="1.0" encoding="utf-8"?>     
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" initialize="vbox1_initializeHandler(event);">     
    <mx:Script>   
        <![CDATA[   
               
        protected function vbox1_initializeHandler(event):void 
{ 
//images directory   
var reportDir:File = File.userDirectory.resolvePath("myassets");   
var imagePath:File;     
//image name from xml file      
imagePath = reportDir.resolvePath(data.@thumbnailImage);   
// we got the complete system path    
myImage.source = imagePath.url;   
  
//when we trace the path looks like    
//file:///C:/Users/Administrator/Desktop/myassets/myImage.JPG 
}        
        ]]>   
    </mx:Script>   
    <mx:Image id="myImage" />     
    <mx:Label text="{data.@title}" />     
</mx:VBox>

And it WORKS!!!!! HOOOORAYYYY!!!!!

The only error I get is during the build process when it says:




  Encountered errors or warnings while building project tileTest.mxml.
    tileTest.mxml: parameter 'event' has no type declaration.

Do you know what that means? One final thing I promise, with the FULL SCREEN code above, how do I implement that and how do I make it so the window doesn't have any borders or buttons when it goes full screen, I think that's called Chrome? Thanks heaps Tim

Marx
Points: 0
Posts:0

8/4/2010 10:16:07 PM

write this on top after cdata in script
import mx.events.FlexEvent;

tj99ay
Points: 10
Posts:0

8/4/2010 10:34:34 PM

Hi Marx,

Thanks, but now I get:



Severity and Description	Path	Resource	Location	Creation Time	Id
1008: parameter 'event' has no type declaration.	tileTest/src	ImageRenderer.mxml	line 6	1280984081297	296

My code now looks like this:



<?xml version="1.0" encoding="utf-8"?>     
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" initialize="vbox1_initializeHandler(event);">     
    <mx:Script>   
        <![CDATA[   
        import mx.events.FlexEvent;
        protected function vbox1_initializeHandler(event:FlexEvent):void 
{ 
//images directory   
var reportDir:File = File.userDirectory.resolvePath("myassets");   
var imagePath:File;     
//image name from xml file      
imagePath = reportDir.resolvePath(data.@thumbnailImage);   
// we got the complete system path    
myImage.source = imagePath.url;   
  
//when we trace the path looks like    
//file:///C:/Users/Administrator/Desktop/myassets/myImage.JPG 
}        
        ]]>   
    </mx:Script>   
    <mx:Image id="myImage" />     
   <mx:Label text="{data.@title}" />
</mx:VBox>

Ta Tim

tj99ay
Points: 10
Posts:0

8/4/2010 10:39:30 PM

Guys, I know I am probably pushing my luck now, but I am desperate to get this working, but if my XML file now looks like this instead:



<?xml version="1.0"?>
<screen><screenname>test</screenname><content name="tester"><item name="Step 2"><file>pic1.jpg</file><start_time>1281006000</start_time><finish_time>1281092400</finish_time></item><item name="Step 1"><file>pic2.jpg</file><start_time>1280919600</start_time><finish_time>1281006000</finish_time></item></content></screen>

How do I get Air to read what is between the <file></file> to determine which file to display on screen? Thanks again, Tim

tj99ay
Points: 10
Posts:0

8/5/2010 3:21:52 AM

Hi Guys,

Everything else appears to be sorted, I just need to work out how to read the image filename from the node <file> in this updated XML file:



view plaincopy to clipboardprint  
  
<?xml version="1.0"?>   
<screen><screenname>test</screenname><content name="tester"><item name="Step 2"><file>pic1.jpg</file><start_time>1281006000</start_time><finish_time>1281092400</finish_time></item><item name="Step 1"><file>pic2.jpg</file><start_time>1280919600</start_time><finish_time>1281006000</finish_time></item></content></screen>

I am thinking I need to change to something like the following:



<mx:XMLListCollection id="xmlCollection" source="{xml.content.item}" />

and here in the ImageRender file:



imagePath = reportDir.resolvePath(data.@file);

I feel I have that part wrong, as it doesn't work. Can anyone help!!!! ??? Ta Tim

tj99ay
Points: 10
Posts:0

8/5/2010 3:21:17 PM

Anyone there??

Justin
Points: 600
Posts:0

8/5/2010 10:07:27 PM

i think it should be {xml.content}

tj99ay
Points: 10
Posts:0

8/5/2010 11:36:15 PM

Thanks Justin, but it didn't work. I needed to go back to the old xml file as a temporary fix until I sort it.

Just would like to thank everyone who helped me out this week. Great work :-)

Thanks

Tim

gourav
Points: 540
Posts:0

8/11/2010 4:12:17 AM

Hii Friends,

I am using Air2 sdk , i want Term & Condition Check box when user click to my application installer.
it should ask to accept term & cond'n .

and also tell me what u think about it, is it possible or not?
how can i cusmize it plz give me solution or any help.

i write here for ur fast responce.

thanks in advance

Name

Email

I want to receive answers to this question as email.

Type your Reply or Answer

Are you human? What is 2+0

Email
Password
	Forgot Password

Sign Up Members Login

Sign Up
Members Login