I have recently figured out how to use an SQLite db with Flex. Now I'm having trouble displaying the data properly. I've tried several binding strategies and I've largely come up short. I had undefined property errors, unusable errors, and finally! Code without errors! Also, code without a displayed image. Any help is appreciated as always.
Here's my code so far; trying to keep it tidy, Async, and I've left an unused variable or two from my messing around with it. Thanks for any insight.
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="NM1"
>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import flash.data.SQLConnection;
import flash.data.SQLResult;
import flash.data.SQLStatement;
import flash.filesystem.File;
import mx.collections.ArrayCollection;
private var conn:SQLConnection;
private var createStmt:SQLStatement;
private var selectStmt:SQLStatement;
[bindable] private var dataField:ArrayCollection;
[bindable] private var row:Object;
[bindable] private var pngIndex:int;
[bindable] public var pngTitle:String;
[bindable] private var pngByteArray:ByteArray;
private function init():void
{
conn = new SQLConnection();
conn.addEventListener (SQLEvent.OPEN, openSuccess);
conn.addEventListener (SQLErrorEvent.ERROR, openFailure);
var dbFile:File = File.applicationDirectory.resolvePath("assets/NM.sqlite");
conn.openAsync(dbFile);
}
private function openSuccess(event:SQLEvent):void
{
conn.removeEventListener(SQLEvent.OPEN, openSuccess);
conn.removeEventListener(SQLErrorEvent.ERROR, openFailure);
getData();
}
private function openFailure(event:SQLErrorEvent):void
{
conn.removeEventListener(SQLEvent.OPEN, openSuccess);
conn.removeEventListener(SQLErrorEvent.ERROR, openFailure);
// Make an alert Dialog
// = "Error opening database";
trace("event.error.message:", event.error.message);
trace("event.error.details:", event.error.details);
}
private function getData():void
{
//status = "Loading data";
selectStmt = new SQLStatement();
selectStmt.sqlConnection = conn;
var sql:String = "SELECT Picture FROM Data WHERE 'Index' = 0";
selectStmt.text = sql;
selectStmt.addEventListener(SQLEvent.RESULT, selectResult);
selectStmt.addEventListener(SQLErrorEvent.ERROR, selectError);
selectStmt.execute();
}
private function selectResult(event:SQLEvent):void
{
//status = "Data loaded";
selectStmt.removeEventListener(SQLEvent.RESULT, selectResult);
selectStmt.removeEventListener(SQLErrorEvent.ERROR, selectError);
var result:SQLResult = selectStmt.getResult();
// dataField = new ArrayCollection(selectStmt.getResult().data);
if (result.data != null) {
row = result.data[0];
pngIndex = result.data[0].Index;
pngTitle = result.data[0].Title;
pngByteArray = result.data[0].Picture;
Pic.source = pngByteArray;
}
}
private function selectError(event:SQLErrorEvent):void
{
//status = "Error loading data";
selectStmt.removeEventListener(SQLEvent.RESULT, selectResult);
selectStmt.removeEventListener(SQLErrorEvent.ERROR, selectError);
trace("SELECT error:", event.error);
trace("event.error.message:", event.error.message);
trace("event.error.details:", event.error.details);
}
]]>
</fx:Script>
<s:Image id="Pic" x="0" y="0" width="263" height="99"/>
<s:TextArea id="text1" x="0" y="313"
/>
EDIT I have updated the code now, with perfect, error-free code that does not display my image. Help!!
Make sure you call the first function in the initialize() function as your program starts!
I had forgotten it somewhere in my code testing. :/
Related
I am developing mobile application for iOS and Android using Flex Mobile. On one of the views I am displaying StageWebView with a Google map and a spark List control to display another data. I am using the StageWebView in order to benefit from Google Maps JavaScript API v3. Example code below:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Clubs" backgroundAlpha="0"
viewActivate="view1_viewActivateHandler(event)"
backKeyPressed="view1_backKeyPressedHandler(event)"
initialize="view1_initializeHandler(event)">
<fx:Script>
<![CDATA[
import flash.sensors.Geolocation;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import spark.events.ViewNavigatorEvent;
private var myWebView:StageWebView;
[Bindable]
private var locations:ArrayCollection;
private var geolocation:Geolocation;
protected function view1_initializeHandler(event:FlexEvent):void
{
myWebView = new StageWebView();
myWebView.stage = this.stage;
}
protected function view1_viewActivateHandler(event:ViewNavigatorEvent):void
{
if(Geolocation.isSupported)
{
geolocation = new Geolocation();
geolocation.addEventListener(GeolocationEvent.UPDATE, onGeolocationChange);
}
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (myWebView) {
var point:Point = (new Point());
point = localToGlobal(point);
myWebView.viewPort = new Rectangle(point.x,point.y, stage.width,stage.height/3);
}
}
protected function view1_backKeyPressedHandler(event:Event):void
{
if (myWebView)
{
myWebView.viewPort = null;
myWebView = null;
}
navigator.popView();
}
protected function onGeolocationChange(event:GeolocationEvent):void
{
geolocation.removeEventListener(GeolocationEvent.UPDATE, onGeolocationChange);
locations = new ArrayCollection();
var location0:Object = new Object();
location0.lat = event.latitude;
location0.long = event.longitude;
locations.addItem(location0);
var location1:Object = new Object();
location1.lat = "42.697325";
location1.long = "23.315364";
locations.addItem(location1);
var location2:Object = new Object();
location2.lat = "42.696441";
location2.long = "23.321028";
locations.addItem(location2);
var url:String = "http://whozzzin.dev.mediatecture.at/gmapsformobile/map.php";
var counter:Number = 1;
for each(var location:Object in locations)
{
if(counter == 1)
{
url += "?locations["+counter.toString()+"][lat] = " + location.lat;
url += "&locations["+counter.toString()+"][long] = " + location.long;
}
else
{
url += "&locations["+counter.toString()+"][lat] = " + location.lat;
url += "&locations["+counter.toString()+"][long] = " + location.long;
}
counter++;
}
myWebView.loadURL(url);
}
]]>
</fx:Script>
<s:navigationContent>
<s:Button includeInLayout="{Capabilities.version.indexOf('IOS') > -1}" visible="{Capabilities.version.indexOf('IOS') > -1}" id="backButton" label="BACK" click="view1_backKeyPressedHandler(event)"/>
</s:navigationContent>
<s:List width="100%" contentBackgroundAlpha="0" id="placesList" dataProvider="{locations}" labelField="lat">
<s:layout>
<s:TileLayout columnWidth="{(width - 16)/3}"/>
</s:layout>
</s:List>
</s:View>
Currently the list is not visible because it appears behind the StageWebView. My question is how to position the List control exactly after the WebStageView.
You can use the top constraint:
<s:List width="100%" top="{stage.height/3}" id="placesList"
Edit: Put in a trace(stage.height); in your updateDisplayList function and also look at stage.stageHeight. Those values should help you figure out the exact top value to use in this case.
How I solved it:
I get the bottom of the WebStageView and convert a new point from global to local with x =0 and y = myWebView.bootom:
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (myWebView) {
var point:Point = (new Point(0,this.radiusDropDown.height));
point = localToGlobal(point);
myWebView.viewPort = new Rectangle(point.x,point.y, stage.width,stage.height/3);
this.placesList.y = globalToLocal(new Point(0,myWebView.viewPort.bottom)).y;
}
}
I am trying to bind data within a ArrayList to a list, but here only the last element shows up on the list(99), not the entire contents of the arraylist.
private function completeHandler(event:Event):void
{
var xmlData:XML = XML(event.target.data);
trace(xmlData);
var i:int = 0;
for (i;i<100;i++)
{
var arr:ArrayList = new ArrayList();
arr.addItem(i);
trace(arr);
}
list.dataProvider = arr;
}
I am not able to figure out what to do here?
You're creating an ArrayList with one item a 100 times. Replace with this and you should be fine:
var arr:ArrayList = new ArrayList();
for (var i:int = 0; i<100; i++) {
arr.addItem(i);
}
Or better yet, just wrap your XML in an XMLListCollection instead of copying the nodes one by one (assuming it is the actual content of the XML data you want instead of the indices):
private function completeHandler(event:Event):void
{
var xmlData:XML = XML(event.target.data);
list.dataProvider = new XMLListCollection(xmlData.children());
}
(Note that this is not DataBinding: it is just setting the dataProvider property)
check this code this will help you,
you can navigate through all data on the basis of rowcount of list....
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" minWidth="955" minHeight="600">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]private var _index:int = 0;
private var _coll:ArrayCollection = new ArrayCollection([{name:'ashish',age:'28'},{name:'abhi',age:'29'},{name:'kunal',age:'27'},
{name:'ashish1',age:'28'},{name:'abhi1',age:'29'},{name:'kunal1',age:'27'},
{name:'ashish2',age:'28'},{name:'abhi2',age:'29'},{name:'kunal2',age:'27'},
{name:'ashish3',age:'28'},{name:'abhi3',age:'29'},{name:'kunal3',age:'27'}]);
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
if((_index-li.rowCount>=0))
_index = _index - li.rowCount;
}
protected function button2_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
if((_index+li.rowCount<_coll.length))
_index = _index + li.rowCount;
}
]]>
</mx:Script>
<mx:List id="li" dataProvider="{_coll.source.slice(_index,(_index+li.rowCount))}" labelField="name" rowCount="3" width="100"/>
<mx:HBox>
<mx:Button label="<-" click="button1_clickHandler(event)"/>
<mx:Button label="->" click="button2_clickHandler(event)"/>
</mx:HBox>
</mx:Application>
I have a var that holds the String value for the path to an image.
How can I use that to get the ByteArray from that image synchronously?
Thank you.
You can't do it synchronously. But here is how you do it asynchronously.
<?xml version="1.0" encoding="utf-8"?>
<fx:Script>
<![CDATA[
public function init():void {
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest(encodeURI("http://www.google.com/logos/2011/mary_blair-2011-hp.jpg")));
}
private function onComplete(e:Event)
{
//of course if all you were doing is displaying an image its better to do:
//image.source = e.currentTarget.content;
var bytes:ByteArray = LoaderInfo(e.currentTarget).bytes;
//binary output
trace(bytes);
var imageLoader:Loader = new Loader();
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageComplete);
imageLoader.loadBytes(bytes, null);
}
private function onImageComplete(e:Event):void
{
image.source = LoaderInfo(e.currentTarget).content;
}
]]>
</fx:Script>
<s:Image id="image" />
<fx:Script>
<![CDATA[
import mx.controls.*;
import mx.controls.TextInput;
import mx.events.ListEvent;
public function init():void
{
for(var i:int=0;i<5;i++)
{
var txtbox:TextInput = new TextInput();
txtbox.id = "text"+i;
myHBox.addChild(txtbox);
}
}
public function getVal():void
{
}
]]>
</fx:Script>
<mx:HBox id="myHBox" width="100%" height="100%">
<mx:Button label="Get Value" click="getVal()"/>
</mx:HBox>
I have implemented this one. I am getting 5 textboxes with empty value, if i entered some value in each textbox then, i want to get specific 3rd textbox value wen some event trigger. so how i can i make. since am new to flex. Pls give me solutions. Thanks in advance.
Why don't you just store the values in its own data structure?
<fx:Script>
<![CDATA[
import mx.controls.*;
import mx.controls.TextInput;
import mx.events.ListEvent;
private var inputs:Vector.<TextInput> = new Vector.<TextInput>();
public function init():void
{
for(var i:uint = 0; i<5; i++)
{
var txtbox:TextInput = new TextInput();
inputs.push(txtbox);
myHBox.addChild(txtbox);
}
}
public function getVal():void
{
var value:String;
for(var i:uint = 0, len:uint = inputs.length; i<len; i++)
{
value += inputs[i].text + ' ';
}
trace(value);
}
]]>
</fx:Script>
<mx:HBox id="myHBox" width="100%" height="100%">
<mx:Button label="Get Value" click="getVal()"/>
</mx:HBox>
Also, if this is a new project, why are you using Flex 3?
Your question is not all too clear, but if I understand correctly,
Try this:
public function init():void
{
for(var i:int=0;i<5;i++)
{
var txtbox:TextInput = new TextInput();
//txtbox.id = "text"+i;
txtbox.name = "text"+i;
txtbox.addEventListener(Event.CHANGE,onChange);
myHBox.addChild(txtbox);
}
}
private function onChange(event:Event):void{
Alert.show(TextInput(event.target).text,TextInput(event.target).name + " Changed");
}
public function getVal():void
{
Alert.show(TextInput(myHBox.getChildByName("text3")).text,"Value");
}
cheers
We have requirement with the AIR application which loads the flex generated swf which inturn loads the flash generated swf using SWFLoader. This is not working as desired. This gives the following error:
SecurityError: Error #3226: Cannot import a SWF file when LoaderContext.allowCodeImport is false.
This is our AIR application.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
<mx:Script>
<![CDATA[
import mx.controls.SWFLoader;
[Embed(source="FlexLoadingFlash.swf")]
public var flexMovie:Class;
private function initApp():void {
// First convert the Swf into MovieClip
var movieclip:MovieClip = new flexMovie();
// get the byteArray from movieClip
var byteArray:ByteArray = movieclip.movieClipData;
var swfLoader:SWFLoader = new SWFLoader();
// load bytearray into swfLoader
swfLoader.source = byteArray;
swfLoader.maintainAspectRatio = false;
swfLoader.percentHeight = vbox.height;
swfLoader.percentWidth = vbox.width;
swfLoader.invalidateDisplayList();
swfLoader.invalidateSize();
// now add the swfloader into container
vbox.addChild(swfLoader);
}
]]>
</mx:Script>
<mx:VBox id="vbox" width="100%" height="100%" verticalCenter="0" horizontalCenter="0" cacheAsBitmap="true" >
</mx:VBox>
</mx:WindowedApplication>
Please let me know how can we fix this issue.
Use Loader.loadBytes() to load your SWF. Create an instance of LoaderContext. loadBytes method takes a LoaderContext instance as a parameter. Set the allowCodeImport property of your LoaderContext instance to true and it should work
Or you can just add these three lines before you set the source
var loaderContext: LoaderContext = new LoaderContext();
loaderContext.allowLoadBytesCodeExecution = true;
swfLoader.loaderContext = loaderContext;
<mx:SWFLoader id="swfObj"
width="100%" height="100%"
complete="swfObj_completeHandler(event)"/>
<fx:Script>
<![CDATA[
[Bindable]
[Embed(source="assets/soundbar.swf")]
private static var swfClass:Class;
private var swfSoundBar : MovieClip;
[Bindable] private var mp3Player:MP3Player = MP3Player.getInstance();
protected function init(event:FlexEvent):void
{
swfSoundBar = new swfClass();
var byteArray:ByteArray = swfSoundBar.movieClipData;
var loaderContext: LoaderContext = new LoaderContext();
loaderContext.allowLoadBytesCodeExecution = true;
swfObj.loaderContext = loaderContext;
swfObj.source = byteArray;
}
protected function swfObj_completeHandler(event:Event):void
{
swfSoundBar = SWFLoader(event.target).content as MovieClip;
swfSoundBar.width = 32;
swfSoundBar.height = 14;
swfSoundBarShowHide();
}
protected function swfSoundBarShowHide():void
{
if (swfSoundBar){
if (mp3Player.isPlaying){
swfSoundBar.gotoAndStop(0);
swfSoundBar.stop();
} else {
swfSoundBar.gotoAndPlay(0);
}
}
}
]]>
</fx:Script>