In this code I'm creating a new window when I click the button. In the new window are TextInput and DropDownList components. When the new window opens, clicking the DropDownList does nothing - you have to click it a second time round to get it to open. However, click into the TextInput field first and then try opening the DropDownList works no problem.
Any reason why this is happening? Is this a bug or something I'm doing wrong? The issue occurs with Flex 4.1 and Flex Hero (Sept 2010 release).
Below is the code, or download the FXP file here.
// DropDownTest.mxml (application)
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="400" height="300">
<fx:Script>
<![CDATA[
private function newWindow():void
{
this.close();
var w:MyWindow = new MyWindow();
w.open();
}
]]>
</fx:Script>
<s:Button label="New Window" click="newWindow()"/>
</s:WindowedApplication>
// MyWindow.mxml (component)
<?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"
width="400" height="300">
<s:TextInput/>
<s:DropDownList y="30"/>
</s:Window>
Turns out this is a bug. Adobe suggested calling "setFocus()" after "open()" and it worked. See here for further details: http://forums.adobe.com/message/3241460#3241460
Related
I have very simple Flex Air application where I'd like to load image from documents directory:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function init(event:FlexEvent):void {
image.source = File.documentsDirectory.resolvePath('image.jpg').nativePath;
}
]]>
</fx:Script>
<s:BitmapImage id="image"/>
</s:WindowedApplication>
The problem is that Flex Air doesn't know how to handle native (absolute) path.
Looks very easy, but I don't know how to solve it...
You need a URL (or a ByteArray) to load an non-embedded image, so use the File's url property instead of its nativePath.
image.source = File.documentsDirectory.resolvePath('image.jpg').url;
I made this simple application to demonstrate my problem. It has:
An image
A button that launchess a popup window
Scroll bars on the side
<mx: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"
verticalScrollPolicy="on"
horizontalScrollPolicy="on"
layout="vertical">
<fx:Script>
<![CDATA[
import mx.managers.PopUpManager;
public function buttonClick():void {
PopUpManager.createPopUp(this,JakePanel,true);
}
]]>
</fx:Script>
<mx:Image width="2000"
source="#Embed(source='assets/image.jpg')"/>
<mx:Button click="{buttonClick()}" label="Launch"/>
</mx:Application>
When the launch button is pressed it launches this popup window:
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
layout="vertical"
width="400" height="300"
title="Popup"
>
<fx:Script>
<![CDATA[
import mx.managers.PopUpManager;
public function close():void {
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<s:TextArea text="Enter more text here: " width="100%" height="200"/>
<s:Button label="OK" click="{close()}" width="100%" height="30" />
</mx:Panel>
These are my requirements
When the popup is open I need to be able to disable everything except the popup. To do this I am using: PopUpManager.createPopUp(this,JakePanel,true);. The last parameter specifies that the popup is "modal" and that it should capture all mouse events.
I also need to allow the main scroll bars to be enabled while the popup is open. Often my users will have the app open in a very small screen and will not be able to resize the app. For example:
This is a problem when the app is too small to click the ok button:
Is there a way to make everything "modal" except the main scroll bars? I know that I could put a scrollbar on the Panel but I would prefer to avoid this.
I think that the best way to do this is to:
Wrap everything in the main application in a <mx:hgroup id="allYourStuff"> tag.
When you add the Popup to the screen call: allYourStuff.enabled = false
When you remove the Popup from the screen call: allYourStuff.enabled = true
I am trying to create an AIR app that you can maximize, and when you maximize all the components contained in the windowedApplication are scaled with the containing windowedApplication.
At the moment when you maximize the window all the components just stay the same size. Is this even possible?
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:ATE="http://ns.adobe.com/ate/2009"
xmlns:ai="http://ns.adobe.com/ai/2009"
xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
xmlns:d="http://ns.adobe.com/fxg/2008/dt"
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:lib="assets.graphics.UI.*"
xmlns:flm="http://ns.adobe.com/flame/2008"
xmlns:lib2="assets.graphics.*"
xmlns:components="components.*"
xmlns:lib3="assets.graphics.logout.*"
xmlns:lib4="assets.graphics.logo.*"
xmlns:sparkTree="com.sparkTree.*"
xmlns:testsubmitassessmentscore2="services.testsubmitassessmentscore2.*"
minWidth="800" minHeight="600" backgroundColor="#FFFFFF"
creationComplete="creationCompleteHandler()" showStatusBar="false"
currentState="{model.whichViewState}" currentStateChange="onStateChange()"
preloaderChromeColor="#FFFFFF" title="MyApplication">
<!--<fx:Style source="Main.css">-->
<!--minWidth="800" minHeight="600"-->
<fx:Style>
You can listen for the resize event dispatched by any UIComponent :
<?xml version="1.0" encoding="utf-8"?>
<s:Group
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%"
resize="onResize(event)"
>
<fx:Script>
<![CDATA[
import mx.events.ResizeEvent;
private function onResize(event:ResizeEvent):void
{
// code goes here : resize your components and stuff...
}
]]>
</fx:Script>
</s:Group>
Be careful, though, because this kind of trick may cause infinite loop : you listen for a resize event, then resize a component that causes another resizeevent to be dispatched, and the loop goes back from the start...
This is really bugging me, but I have a component where a Button is wrapped in BorderContainer. I'm passing a custom property to the component at run-time to change the label of the button but Flex is reporting the following error:
Cannot access a property or method of a null object reference
When the error occurs, Flex highlights the following code:
myButton.label = value;
Here's the app:
// MyApp.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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:local="*">
<local:MyComp id="myButton" label="My Button"/>
</s:WindowedApplication>
// MyComp.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="400" height="300">
<fx:Script>
<![CDATA[
private var _label:String;
public function get label():String
{
return _label;
}
public function set label(value:String):void
{
_label = value;
myButton.label = value;
}
]]>
</fx:Script>
<s:Button id="myButton" label="Test"/>
</s:BorderContainer>
Any help would be greatly appreciated. Thanks in advance.
The myButton Object is not already created if the setter function for the label property is called the first time. Assign the new label value to myButton.label in commitProperties().
You should read About creating advanced components (most notably "About the component instantiation life cycle") to understand why.
I want to build a component, where the user can play a video in a Flex Spark VideoDisplay. There will be a button and whenever the button is pressed, I want to save the current time of the VideoDisplay plus a screenshot. The screenshot needs to be someway saved, because I want to display all times and screenshots in a DataGrid (screenshots should appear when the user hovers a time in the DataGrid).
So, how can I take screenshots of the Spark VideoDisplay and save/display them?
You can take snapshots a few ways, this way just uses the ImageSnapshot class, but you could do it by manually drawing the bitmap of the video display if you'd like. Here's a sample:
Renderer
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100" height="100" creationComplete="trace(data)">
<mx:Image source="{this.data}" width="100%" height="100%"/>
</s:ItemRenderer>
Sample App
<?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">
<fx:Script>
<![CDATA[
import mx.graphics.ImageSnapshot;
public function takeSnapshot():void
{
var snapshot:BitmapData = ImageSnapshot.captureBitmapData(videoDisplay);
var bitmap:Bitmap = new Bitmap(snapshot);
list.dataProvider.addItem(bitmap);
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<s:VideoDisplay id="videoDisplay"
source="video.mov"
width="400" height="300"/>
<s:Button id="button" click="takeSnapshot()"/>
<s:List id="list" horizontalCenter="0" width="100%" itemRenderer="SnapshotRenderer">
<s:dataProvider>
<mx:ArrayList/>
</s:dataProvider>
<s:layout>
<s:TileLayout/>
</s:layout>
</s:List>
</s:Application>
To accomplish exactly what you were describing (take snapshot and save snapshot), you could store those in an array in that takeSnapshot method, or you could loop through the list.dataProvider do get the bitmaps. Then you'd just need to pass them to a backend language (ruby, python, php...) to save.
Hope that helps,
Lance
use the JPEGEncoder in flex to convert it to bytearray, and then encode the byte array using the b64encoder as follow:
var jpg:JPEGEncoder = new JPEGEncoder();
var ba:ByteArray = jpg.encode(bitmapData);
var b64encoder:Base64Encoder = new Base64Encoder();
b64encoder.encodeBytes(ba);
var b64String:String = b64encoder.flush();
Now you can pass your b64String to your server via HTTP post method :)