Play swf file using flex like Virtual Girl - apache-flex

I am working on Flex 4.6 Air application in which there is a list and the data is transparent background swf file. My problem is that when i double click on the list item the respected swf file should be play in the background or we can say on desktop like virtual girl application. if we minimize the main application, swf should be play on desktop like virtual girl application.
If anybody have any idea please tell me.
Thnank You so much.

You can use the following code in which you will open a mx or spark window on double click of list item.
May be the following code useful for you.
<?xml version="1.0" encoding="utf-8"?>
<s:Window xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:customcomponents="customs.customcomponents.*"
xmlns:services="services.*"
width="100%" height="100%" backgroundAlpha="0"
creationComplete="window1_creationCompleteHandler(event)" minimizable="false"
showStatusBar="false" systemChrome="none" transparent="true">
<fx:Script>
<![CDATA[
import air.net.URLMonitor;
import dbconnection.Connection;
import globalData.DataModel;
import mx.collections.ArrayCollection;
import mx.core.FlexGlobals;
import mx.events.FlexEvent;
import mx.utils.UIDUtil;
import vo.UserSettingsVo;
private var movie:MovieClip;
private var movieTotalFrame:int = 0;
public var countMovie:int = 0;
public var timer:Timer;
private var newRate:int = 0;
private var mainScreen:Screen = Screen.mainScreen;
private var newStyle:CSSStyleDeclaration;
private var flagPreNext:String="";
private var flagFullMin:Boolean = false;
private var monitor:URLMonitor;
private var timerClosePop:Timer;
private var sqlStatStatus:SQLStatement;
private var objSelectedItem:Object;
[Bindable]
private var modellocator:DataModel = DataModel.getInstance();
[Bindable]
private var uservo:UserSettingsVo = UserSettingsVo.getInstance();
private var connection:Connection = Connection.getInstance();
protected function window1_creationCompleteHandler(event:FlexEvent):void
{
seqEffect.target = this;
rotate.target = canDesktopVideo;
loadMovie(0);
}
protected function myVidTeaser_completeHandler(event:Event):void
{
trace(modellocator.arrMovie[countMovie].Videoname.toString());
movie = myVidTeaser.content as MovieClip;
if(movie != null)
{
movieTotalFrame = movie.totalFrames;
var sizeWidth:Number = 0;
var sizeHeight:Number = 0;
/** Always on top setting **/
if(modellocator.userSettingsac[0].alwaysontop == "no")
{
this.alwaysInFront = false;
}
else
{
this.alwaysInFront = true;
}
/** Size Settings **/
if(modellocator.flagMaxMin)
{
sizeWidth = mainScreen.visibleBounds.width;
sizeHeight = mainScreen.visibleBounds.height;
}
else
{
sizeWidth = mainScreen.visibleBounds.width*(modellocator.userSettingsac[0].size/100);
sizeHeight = mainScreen.visibleBounds.height*(modellocator.userSettingsac[0].size/100);
}
if(!this.closed)
{
this.width = mainScreen.visibleBounds.width;
this.height = mainScreen.visibleBounds.height;
}
modellocator.setSizeWidth = sizeWidth;
modellocator.setSizeHeight = sizeHeight;
rotate.autoCenterTransform = true;
rotate.angleYFrom = 0;
myMov.xTo = 0;
myMov.xFrom = mainScreen.visibleBounds.width;
myMov.yFrom = 40;
myMov.yTo = 40;
myMov.duration = 0;
fadeEffect.alphaFrom = 0;
fadeEffect.alphaTo = 1.0;
fadeEffect.duration = 1000;
rotate.play();
seqEffect.play();
}
}
protected function myVidTeaser_enterFrameHandler(event:Event):void
{
if(modellocator.flagDesktopVIdeoPlay == true)
{
if(movie != null)
{
if(movie.currentFrame == movieTotalFrame)
{
if(countMovie == (modellocator.arrMovie.length - 1))
{
countMovie = 0;
}
else
{
countMovie++;
}
/** Show Time Settings **/
movie.gotoAndStop(0);
System.gc();
System.gc();
timer = new Timer(int(modellocator.userSettingsac[0].showtime)*60000);
timer.addEventListener(TimerEvent.TIMER, movieLoadOnTimer, false, 0, true);
timer.start();
}
}
}
else
{
if(timer != null)
{
timer.stop();
timer.removeEventListener(TimerEvent.TIMER, movieLoadOnTimer);
timer = null;
System.gc();
System.gc();
}
event.preventDefault();
event.stopImmediatePropagation();
}
}
private function movieLoadOnTimer(event:TimerEvent):void
{
loadMovie(countMovie);
}
public function loadMovie(num:int):void
{
if(modellocator.arrMovie != null && modellocator.arrMovie.length > 0)
{
if(num < modellocator.arrMovie.length)
{
if(modellocator.arrMovie[countMovie] != null)
{
if(modellocator.arrMovie[countMovie].VideoBuyFlag == "yes")
{
if(flash.system.Capabilities.os.indexOf("Mac") > -1)
{
myVidTeaser.source = "file://" + modellocator.arrMovie[countMovie].VideoFullURL;
}
else
{
myVidTeaser.source = modellocator.arrMovie[countMovie].VideoFullURL;
}
}
else
{
if(flash.system.Capabilities.os.indexOf("Mac") > -1)
{
myVidTeaser.source = "file://" + modellocator.arrMovie[countMovie].VideoTeaserURL;
}
else
{
myVidTeaser.source = modellocator.arrMovie[countMovie].VideoTeaserURL;
}
}
}
}
else
{
countMovie = 0;
loadMovie(countMovie);
}
}
else
{
this.close();
}
}
]]>
</fx:Script>
<fx:Declarations>
<s:Move id="moveUp" duration="500" target="{this}" yFrom="350" yTo="0"/>
<s:Move id="moveDown" duration="500" target="{this}" yFrom="0" yTo="350"/>
<s:Sequence id="seqEffect">
<mx:Move id="myMov"/>
<mx:Fade id="fadeEffect"/>
</s:Sequence>
<s:Rotate3D id="rotate"/>
</fx:Declarations>
<mx:Canvas id="canDesktopVideo" width="100%" height="100%" horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<s:SWFLoader id="myVidTeaser" right="0" bottom="0" width="{modellocator.setSizeWidth}"
height="{modellocator.setSizeHeight}" alpha="{modellocator.setTransparency}"
buttonMode="true"
complete="myVidTeaser_completeHandler(event)"
enterFrame="myVidTeaser_enterFrameHandler(event)" maintainAspectRatio="true"
scaleContent="true"
scrollRect="{new Rectangle(0, 0, myVidTeaser.width, myVidTeaser.height)}"
useHandCursor="true"/>
</mx:Canvas>
</s:Window>

Related

How to position spark List control below StageWebView in Flex Mobile

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

Spark Mobile Callout with List does not position / resize correctly

I've created a simple Callout with a List in it.
Like this:
<s:Callout xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoLayout="true" >
<fx:Declarations>
<!-- Platzieren Sie nichtvisuelle Elemente (z. B. Dienste, Wertobjekte) hier -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.skill.flextensions.factories.StyledClassFactory;
import mx.collections.IList;
import spark.components.IconItemRenderer;
import spark.components.List;
import spark.events.IndexChangeEvent;
import spark.layouts.HorizontalAlign;
import spark.layouts.VerticalLayout;
private var _list:List;
//
// PUBLIC PROPERTIES
//
private var _dataProvider:IList;
private var _dataProviderChanged:Boolean = false;
public function get dataProvider():IList
{
return _dataProvider;
}
public function set dataProvider(value:IList):void
{
_dataProvider = value;
_dataProviderChanged = true;
this.invalidateProperties();
}
private var _itemRenderer:IFactory;
private var _itemRendererChanged:Boolean = false;
public function get itemRenderer():IFactory
{
return _itemRenderer;
}
public function set itemRenderer(value:IFactory):void
{
_itemRenderer = value;
_itemRendererChanged = true;
this.invalidateProperties();
}
//
// # SUPER
//
override protected function commitProperties():void
{
super.commitProperties();
if(_dataProviderChanged)
{
_dataProviderChanged = false;
_list.dataProvider = _dataProvider;
// TODO
// we have to remeasure, after dataprovider updated
// unfortunately, this doesn't work:
/*
_list.invalidateSize();
_list.invalidateDisplayList();
_list.validateNow();
invalidateSize();
invalidateDisplayList();
validateNow();
*/
// so we will have to find a workaround for this situation.
}
if(_itemRendererChanged)
{
_itemRendererChanged= false;
_list.itemRenderer = getItemRenderer();
}
}
override protected function createChildren():void
{
_list = new List;
_list.top = _list.bottom = 0;
_list.itemRenderer = getItemRenderer();
_list.addEventListener( IndexChangeEvent.CHANGE , onChange , false , 0 , true );
var l:VerticalLayout = new VerticalLayout;
l.gap = 0;
l.requestedMinRowCount = 0;
l.horizontalAlign = HorizontalAlign.CONTENT_JUSTIFY;
_list.layout = l;
this.addElement( _list );
}
//
// # LIST
//
protected function onChange(e:IndexChangeEvent):void
{
var obj:Object = _list.selectedItem;
this.removeAllElements();
_list = null;
this.close(true , obj);
}
private function getItemRenderer():IFactory
{
if( ! _itemRenderer )
{
var fac:StyledClassFactory = new StyledClassFactory( IconItemRenderer );
var props:Object = new Object;
props.messageField = "message";
props.labelField = "";
props.styleName = "itemName";
props.iconField = "icon";
var styles:Object = new Object;
styles.messageStyleName = "itemHeadline";
fac.properties = props;
fac.styles = styles;
return fac;
}
return _itemRenderer;
}
]]>
</fx:Script>
The problem here is, that my Callout does not measure correctly. When the dataProvider is added to the List, it always resizes the List to the first item. When some user-interaction happens with the List, it suddenly resizes correctly (adjusting to the largest item).
Unfortunaltely, the CallOut-Position does not change, leading to a misplaced Callout, sometimes it's even half off screen.
So I want to make sure, List has the right size, before I open the Callout.
How can I do this? Many thx for your input.
I had the same problem. I'm sure there's a more elegant way to do it but this was my solution.
Listen for Callout FlexEvent.CREATION_COMPLETE:
<s:Callout xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoLayout="true"
creationComplete="init()">
Force the callout to redo its layout/sizing:
function init():void
{
validateNow();
updatePopUpPosition();
}
In my app, i handle list data population slightly differently than you, so you may need to call init() after setting data instead.

Flex 4 app preloader takes several seconds to show up (loads quickly after that)

I'm somewhere between novice and intermediate levels with Flex and brand new to Flex 4. I've built a magazine app for a client that pulls in dynamic issue information and generates a book using the qs FlexBook component. The problem is that the app seems to take forever to BEGIN loading.
The app progress bar does not display for several seconds. Once it finally shows up, the app loads quickly. The file sizes don't seem overly large to me and the issue remains whether I use RSLs, merge the code or convert it to a module. You can see the effect here: http://whosthatnerd.com/clients/jones/issues/
Here is my MXML file:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
preloader="mx.preloaders.DownloadProgressBar"
skinClass="skins.TransparentAppSkin"
creationComplete="init()"
minWidth="955"
minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#namespace qsctrl "qs.controls.*";
qsctrl|FlexBook {
hardbackCovers: false;
paddingTop: 0;
paddingRight: 0;
paddingBottom: 0;
paddingLeft: 0;
paddingSpine: 0;
color: #000000;
textRollOverColor: #000000;
edgeAndCornerSize: 70;
background-color: #000000;
}
mx|HBox {
paddingTop: 0;
paddingBottom: 0;
paddingLeft: 0;
paddingRight: 0;
horizontalGap: 0;
}
mx|Image {
padding: 0;
margin: 0;
}
mx|ProgressBar {
color: #EEEEEE;
}
</fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.containers.HBox;
import mx.controls.Alert;
import mx.controls.Image;
import mx.core.IUIComponent;
import mx.core.UIComponent;
import mx.events.ResizeEvent;
import qs.controls.FlexBook;
private var issueID:String;
private var xmlLoader:URLLoader;
private var xml:XML;
private var swfLoader:Loader;
private var swfClass:Class;
private var book:FlexBook;
public var pageHeight:int = 890;
public var pageWidth:int = 600;
private function init():void {
loadingIndicator.x = appCanvas.width / 2 - loadingIndicator.width / 2;
loadingIndicator.y = appCanvas.height / 2 - loadingIndicator.height / 2;
issueID = parameters.issue_id;
xmlLoader = new URLLoader();
xmlLoader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
xmlLoader.addEventListener(Event.COMPLETE, fillBook);
xmlLoader.load(new URLRequest('/clients/jones/issues/issues/view/'+issueID+'.xml'));
}
public function progressHandler(e:ProgressEvent):void {
loadingIndicator.setProgress(e.bytesLoaded, e.bytesTotal);
loadingIndicator.label = 'Loading Publication... '+Math.round(e.bytesLoaded / e.bytesTotal * 100).toString();
}
private function scaleBook(e:* = null):void {
book.height = Math.ceil((appCanvas.height * 0.9));
book.width = Math.floor((book.height * 1.491285403050109));
book.y = appCanvas.height / 2 - book.height / 2;
book.x = appCanvas.width / 2 - book.width / 2;
}
private function fillBook(e:Event):void {
xml = new XML(e.target.data);
if(xml.use_swf == 1) {
trace('loading: '+xml.swf);
swfLoader = new Loader();
swfLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, useExternalSwf);
swfLoader.load(new URLRequest(xml.swf));
} else {
usePageImages(xml);
}
publicationName.text = xml.publication.name;
var d:Array = String(xml.pub_date).split('-');
issueDate.text = 'Published: '+d[1]+'/'+d[2]+'/'+d[0];
}
public function prepareDisplay():void {
loadingIndicator.visible = false;
bookDetails.x = book.x;
bookDetails.y = book.y;
bookDetails.width = book.width / 2;
bookDetails.height = book.height;
bookDetails.visible = true;
}
public function usePageImages(xml:XML):void {
book = new FlexBook();
book.itemSize = 'halfPage';
scaleBook();
var box:HBox;
var img:Image;
var pages:Array = new Array();
for(var i:int = 0; i < xml.page.length(); i++) {
trace(i);
trace(xml.page[i].image_url);
box = new HBox();
box.horizontalScrollPolicy = 'off';
box.verticalScrollPolicy = 'off';
img = new Image();
img.maintainAspectRatio = true;
img.percentHeight = 100;
img.percentWidth = 100;
img.source = xml.page[i].image_url;
box.addChild(img);
if(i == 0) {
book.cover = box;
} else if(i+1 == xml.page.length()) {
book.backCover = box;
} else {
book.addChild(box);
pages.push(box);
}
}
book.content = pages;
appCanvas.addElement(book);
prepareDisplay();
appCanvas.addEventListener(ResizeEvent.RESIZE, scaleBook);
}
public function useExternalSwf(e:Event):void {
trace('LOADED SWF');
book = new FlexBook();
book.itemSize = 'halfPage';
scaleBook();
var mc:MovieClip = MovieClip(swfLoader.content);
swfClass = mc.constructor;
var dupe:MovieClip;
var comp:UIComponent;
var box:HBox;
var pages:Array = new Array();
for(var i:int = 0; i < mc.totalFrames; i++) {
dupe = MovieClip(new mc.constructor);
dupe.gotoAndStop(i);
comp = new UIComponent();
comp.addChild(dupe);
box = new HBox();
box.addChild(comp);
box.horizontalScrollPolicy = 'off';
box.verticalScrollPolicy = 'off';
dupe.width = comp.width = book.width / 2;
dupe.height = comp.height = book.height;
if(i == 0) {
book.cover = box;
} else if(i+1 == xml.page.length()) {
book.backCover = box;
} else {
book.addChild(box);
pages.push(box);
}
}
book.content = pages;
appCanvas.addElement(book);
prepareDisplay();
appCanvas.addEventListener(ResizeEvent.RESIZE, scaleBook);
}
]]>
</fx:Script>
<s:BorderContainer id="bookDetails" visible="false">
<s:backgroundFill>
<s:LinearGradient>
<s:entries>
<s:GradientEntry color="0x707070" ratio="0.00" alpha="1" />
<s:GradientEntry color="0x505050" ratio="0.75" alpha="1" />
</s:entries>
</s:LinearGradient>
</s:backgroundFill>
<s:borderStroke>
<s:SolidColorStroke joints="miter" color="0x101010" weight="12" />
</s:borderStroke>
<s:layout>
<s:VerticalLayout paddingTop="18" paddingRight="18" paddingBottom="18" paddingLeft="18" />
</s:layout>
<s:Label id="publicationName" fontSize="32" fontWeight="bold" color="0xEEEEEE" alpha="1" />
<mx:Text id="issueDate" fontSize="20" color="0xEEEEEE" alpha="1" />
<mx:Text id="bookInstructions" fontSize="20" color="0xEEEEEE" alpha="1" text="Click or drag the corners to turn the page." />
</s:BorderContainer>
<s:BorderContainer id="appCanvas" left="0" right="0" top="0" bottom="0" skinClass="skins.TransparentAppSkin"></s:BorderContainer>
<mx:ProgressBar id="loadingIndicator" label="Loading Publication..."/>
</s:Application>
I honestly don't know if the issue is my player or my code. Thanks in advance for your help :)

Flex execution timeout in AdvancedDataGrid

I've a problem, I'm using an AdvancedDataGrid .
It loads about 3000 records with about 20 columns. I constantly get Flex execution timeout because the grid executes a lot inside LayoutManager.
How can I make it asyncronousely or faster at all?
Use Datagrid pagination.
http://gurufaction.blogspot.com/2007/02/flex-datagrid-paging-example-with.html
http://stackoverflow.com/questions/1893350/how-does-flex-3-datagrid-paging-work
or something like this
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="InitApp()" xmlns:MyComp="*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.ItemClickEvent;
[Bindable]
public var myData:ArrayCollection = new ArrayCollection();
public var orgData:ArrayCollection = new ArrayCollection();
[Bindable]
public var nav:ArrayCollection = new ArrayCollection();
private var index:int = 0;
private var page:int = 25;
private var paging:Boolean = true;
private function InitApp():void {
for( var x:uint = 1; x <= 500; x++ ) {
var obj:Object = new Object();
obj.Id = x.toString();
obj.Name = "Column " + x.toString();
obj.Street = "5555 Street";
obj.Title = "CEO";
obj.City = "El Paso";
orgData.addItem(obj);
}
refreshDataProvider(0);
}
private function navPage(d:int):void {
index += d;
refreshDataProvider(index);
}
private function refreshDataProvider(start:int):void {
if (paging == true) {
page = 25;
myData = new ArrayCollection(orgData.source.slice(start,start+page));
}
else {
index = 0;
page = 500;
myData = new ArrayCollection(orgData.source);
}
down.enabled = index > 0;
up.enabled = index + page < orgData.length;
lbl.text = index.toString() + ' to ' + (index + page).toString() + ' of ' + orgData.length;
}
private function togglePaging():void {
paging = !paging;
toggle.label = paging.toString();
refreshDataProvider(index);
}
]]>
</mx:Script>
<mx:DataGrid id="dg" dataProvider="{myData}" width="510" height="202"></mx:DataGrid>
<mx:Button x="10" y="210" label="<" click="navPage(-25);" id="down"/>
<mx:Button x="216" y="210" label=">" click="navPage(25);" id="up"/>
<mx:Label x="58" y="212" text="page" width="150" id="lbl"/>
<mx:Button x="264" y="210" label="true" id="toggle" click="togglePaging();"/>
</mx:Application>
Load the data a chunk at a time? Say slightly more than however many rows are shown visually. That way you get the perceived performance that it renders quickly.
3000 records is a lot to be loading in one go it has to be said...

Change label of a NativeMenuItem

I'm experimenting with Adobe AIR and Google Maps API in Flex Builder. The question is, i'm making a NativeMenu, and was wondering, how can I change the label of the "Fullscreen" item to "Exit fullscreen" when the stage is in fullscreen?
If you see any thing in the code that could/should be written better, please let me know ;)
Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
height="600"
width="700"
minHeight="100"
minWidth="100"
showStatusBar="false"
title="Gmaps 0.002"
>
<maps:Map
xmlns:maps="com.google.maps.*"
id="map"
mapevent_mapready="onMapReady(event)"
width="100%"
height="100%"
url=""
key=""
/>
<mx:Button id="fullscreenButton" click="toggleFullScreen()"/>
<mx:Script>
<![CDATA[
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.MapMouseEvent;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import flash.display.NativeMenu;
import flash.display.NativeMenuItem;
import flash.events.Event;
import mx.core.Window;
import flash.display.StageDisplayState;
private function onMapReady(event:Event):void {
map.setCenter(new LatLng(59.908165,10.742719), 14, MapType.NORMAL_MAP_TYPE);
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
function keyDownHandler(event:KeyboardEvent):void {
if (event.keyCode == 70) {
toggleFullScreen();
}
}
createMenu();
map.enableScrollWheelZoom();
map.enableContinuousZoom();
map.enableControlByKeyboard();
systemManager.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
map.addEventListener(MapMouseEvent.ROLL_OVER, function(event:MapMouseEvent):void {
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
});
map.addEventListener(MapMouseEvent.ROLL_OUT, function(event:MapMouseEvent):void {
map.removeControl(new ZoomControl());
map.removeControl(new PositionControl());
map.removeControl(new MapTypeControl());
});
}
private function createMenu():void{
var mainMenu:NativeMenu = new NativeMenu();
var fullscreenMenu:NativeMenuItem = new NativeMenuItem("Fullscreen");
var maximizeMenu:NativeMenuItem = new NativeMenuItem("Maximize");
var restoreMenu:NativeMenuItem = new NativeMenuItem("Restore");
var separatorA:NativeMenuItem = new NativeMenuItem("A", true);
var closeMenu:NativeMenuItem = new NativeMenuItem("Close");
fullscreenMenu.addEventListener(Event.SELECT, handleMenuClick);
maximizeMenu.addEventListener(Event.SELECT, handleMenuClick);
restoreMenu.addEventListener(Event.SELECT, handleMenuClick);
closeMenu.addEventListener(Event.SELECT, handleMenuClick);
mainMenu.addItem(fullscreenMenu);
mainMenu.addItem(maximizeMenu);
mainMenu.addItem(restoreMenu);
mainMenu.addItem(separatorA);
mainMenu.addItem(closeMenu);
//fullscreenMenu.enabled = false;
//fullscreenMenu.label = "Test";
this.contextMenu=mainMenu;
}
private function handleMenuClick(e:Event):void{
var menuItem:NativeMenuItem = e.target as NativeMenuItem;
if(menuItem.label == "Fullscreen") toggleFullScreen();
if(menuItem.label == "Maximize") this.maximize();
if(menuItem.label == "Restore") this.restore();
if(menuItem.label == "Close") this.close();
}
private function fullScreenHandler(evt:FullScreenEvent):void {
if (evt.fullScreen) {
//fullscreenMenu.label = "Test";
} else {
}
}
private function toggleFullScreen():void {
try {
switch (systemManager.stage.displayState) {
case StageDisplayState.FULL_SCREEN_INTERACTIVE:
systemManager.stage.displayState = StageDisplayState.NORMAL;
break;
default:
systemManager.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
break;
}
} catch (err:SecurityError) {
// ignore
}
}
]]>
</mx:Script>
</mx:WindowedApplication>
in order to change a label into a NativeMenu, you can try this
yourNativeMenu.getItemAt(0).label="new_label";
where getItemAt(0) return the first item in the NativeMenu

Resources