I stuck. I've been trying to get working simple app with Adobe Flash Builder but with no luck.
It's pretty simple and I even didn't get visual elements such as button to be displayed on any kind of simulator/devices.
I followed by some video tutorial and seems like configured everything right, no errors appeared but the problem is that when I launch app on device/simulator/air iOS/Android even real iOS device - it remains blank.... empty. Just white screen
<?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" applicationDPI="160"
applicationComplete="init(event)">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button id="button1" x="100" y="58" label="300ms"/>
<s:Button id="button2" x="200" y="58" label="500ms"/>
<s:Button id="button3" x="300" y="58" label="1000ms"/>
<fx:Script>
<![CDATA[
import com.adobe.nativeExtensions.Vibration;
private var vibrate:Vibration
private function init(evt:Event):void
{
trace("We are here");
if(Vibration.isSupported)
{
setupButtons();
} else {
trace("Vibration is not supported");
}
}
private function setupButtons():void
{
button1.addEventListener(MouseEvent.CLICK, handleButtons);
button2.addEventListener(MouseEvent.CLICK, handleButtons);
button3.addEventListener(MouseEvent.CLICK, handleButtons);
vibrate = new Vibration();
}
private function handleButtons(event:MouseEvent):void
{
switch (event.currentTarget.id)
{
case "button1":
vibrate.vibrate(300);
break;
case "button2":
vibrate.vibrate(500);
break;
case "button3":
vibrate.vibrate(1000);
break;
}
}
]]>
</fx:Script>
</s:Application>
At least 3 buttons should appear. No useful information while debugging in console, no stopping on breakpoints in -init() method.
I'm pretty frustrated about my first meeting flash builder and developing for mobile platforms.
Flash Builder 4.7
thanks in advance
I think is a crash in the initialize code, try removing all the lines , then when works add one by one the script lines back until you find the issue.
Related
I have been searching thru the posts but I have not been able to find (I could have missed it) how to allow items in an s:List or s:Arraycollection to be clicked to advance to another view in an mobile app. Any help would be much appreciated!
Thanks!
<?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"
creationComplete="onCreationComplete()"
>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
private var _listDataProvider:ArrayCollection = new ArrayCollection(['one', 'two', 'three']);
private function onCreationComplete():void
{
list.dataProvider = _listDataProvider;
list.addEventListener(MouseEvent.CLICK, onListItemClick);
}
private function onListItemClick(event:Event):void
{
Alert.show('Replace this Alert with code to go to view ' + event.currentTarget.selectedItem.toString() + '.', 'Item #' + (event.currentTarget.selectedIndex + 1).toString());
}
]]>
</fx:Script>
<s:List id="list"
horizontalCenter="0"
verticalCenter="0"
/>
</s:Application>
I'm getting the same issue. For some reasons, flash builder is importing the Alert class correctly (import mx.controls.Alert) with its full package name but the project does not compile because it says "Import alert could not be found". I am developing a mobile application using SDK 4.6 which i know doesn't have support for mx controls. This only explains why mx namespace control classes aren't importing properly. I hope this answers your question correctly as i'd advice you to find other means of alerting information to the user. Maybe write a custom alert component or use the platform's alert control via Native extensions.
Inspired by the lazy loading abilities of Hibernate I wanted to make the model part of my Flex UI request data from the server only when necessary. I thought this would be as simple as adding a public accessor that only sends server requests when the variable is accessed.
public function get tab2AC():ArrayCollection
{
if(_tab2AC == null){
//Request data from server
}
return _tab2AC;
}
Problem is that Flex seems to access all bound variables on application launch, even if the referencing component has yet to be created. So even though the DataGrid with dataProvider="{tab2AC}" has yet to be created, the server request still goes out, thus defeating the "only when required" laziness.
I do not want to place the server request inside a creationComplete handler as I want to keep my UI model ignorant of view state and my view ignorant of server requests.
Interestingly, if I add an Alert.show("anything"); inside the accessor, it works as desired.
UPDATE: Here is a full example. Set breakpoints and you'll see that Flex accesses both variables even though titleForScreen2 is not used by any created component.
<?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" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
private var _titleForScreen1:String;
private var _titleForScreen2:String;
public function get titleForScreen1():String {
if(_titleForScreen1 == null){
//Server Request
}
return _titleForScreen1;
}
public function get titleForScreen2():String {
if(_titleForScreen2 == null){
//Server Request
}
return _titleForScreen2;
}
]]>
</fx:Script>
<mx:ViewStack>
<s:NavigatorContent label="Screen 1">
<s:Label text="{titleForScreen1}"/>
</s:NavigatorContent>
<s:NavigatorContent label="Screen 2">
<s:Label text="{titleForScreen2}"/>
</s:NavigatorContent>
</mx:ViewStack>
</s:Application>
Bindings in flex are pretty stupid. More of a proof of concept than an actual optimized production quality feature. What's worse is that short of modifying the compiler, there's little you can do about it without having all sorts of verification logic in your getter or (perhaps more likely) some kind of interceptive layer that makes sure that expensive calls are only made when the UI state is meaningful. At that point however, you might as well do away with bindings altogether and just implement an active controller for a passive view.
I know this is a pretty lame answer, but it's true. I've been a flex developer for several years and have had a complicated relationship with its binding feature for just as long. As well, over all this time, the only thing that has changed in the binding implementation is the ability to do two-way bindings.
By the way, syntactically I'd use a regular method rather than a property for returning a promise. Properties are often read as synchronous and cheap(-ish) operations, whereas a method (especially one that returns a promise) would have more flexible connotations.
<?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" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
private var _titleForScreen1:String;
private var _titleForScreen2:String;
public function get titleForScreen1():String {
if(_titleForScreen1 == null){
//Server Request
}
return _titleForScreen1;
}
public function get titleForScreen2():String {
Alert.show("test");
if(_titleForScreen2 == null){
//Server Request
}
return _titleForScreen2;
}
]]>
</fx:Script>
<mx:ViewStack>
<s:NavigatorContent label="Screen 1">
<s:Label text="{titleForScreen1}"/>
</s:NavigatorContent>
<s:NavigatorContent label="Screen 2">
<s:Label text="{titleForScreen2}"/>
</s:NavigatorContent>
</mx:ViewStack>
</s:WindowedApplication>
Breakpoints on lines 12 and 19, check out the stack trace during each, also you can pop open Binding and take a look at wrapFunctionCall (drop a breakpoint in there too). So when it gets to lines 12 and 19, it hits them 2 times because of the preloader dispatching a complete event. I put breakpoints in every file that the stack-trace showed the execution path moving through. Unfortunately I couldn't find the point where it caused 2 calls to happen (must be in the parts I don't have the source for) it seemed every spot in the trace was only called once but I think the wrapFunctionCall was called twice during the period of those two executions. The third one that happens is due to a call to doPhasedInstantation which calls down to execute on Bindings for all the children that have the systemManager, so it would seem somehow the components have a system manager even though they may have not yet been added to the stage or created. Sorry I don't have a more concrete answer for why each of these has to happen but my guess is there's some good reason.
Ah yah almost forgot, also you'll see when the Alert is shown it causes an error but that error is captured in the wrappedFuncitonCall method in Binding.as
catch(error:Error)
{
// Certain errors are normal when executing a srcFunc or destFunc,
// so we swallow them:
// Error #1006: Call attempted on an object that is not a function.
// Error #1009: null has no properties.
// Error #1010: undefined has no properties.
// Error #1055: - has no properties.
// Error #1069: Property - not found on - and there is no default value
// We allow any other errors to be thrown.
if ((error.errorID != 1006) &&
(error.errorID != 1009) &&
(error.errorID != 1010) &&
(error.errorID != 1055) &&
(error.errorID != 1069))
{
throw error;
}
else
{
if (BindingManager.debugDestinationStrings[destString])
{
trace("Binding: destString = " + destString + ", error = " + error);
}
}
}
Your statement is not true, tab2AC getter is not accessed by Flex app on launch, as a proof here is the full application code:
<?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" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var _tab2AC:ArrayCollection;
public function set tab2AC(value:ArrayCollection):void
{
_tab2AC = value;
}
[Bindable]
public function get tab2AC():ArrayCollection
{
if(_tab2AC == null){
trace("THIS WILL NOT BE CALLED");
}
return _tab2AC;
}
]]>
</fx:Script>
</s:Application>
As you can see, the trace will not be triggered, so your problem seems to be coming from a call to that getter from somewhere in your app, to find it, put a break-point and then "Step return" when needed.
That being said, you should not implement the lazy loading this way directly in the getter as the service call is asynchronous.
Why not return back a new ArrayCollection when the variable is null, then set the source on the ArrayCollection when the server call returns?
I think this is just wonky behavior of the debugger, rather than what would happen in ordinary execution. If you put any logic in there that will enable you to determine that the function was called that doesn't tie into the debugger (such as setting the text on a label), then the getter doesn't get called. However, if you put a trace statement in there, the getter does get called.
The conundrum is how much do you want to depend on the idea that this is only going to happen in debugging, and how critical is it to get the real behavior while you are using the debug player?
So yeah, that's just the way it is. Since Flex evaluates bindings immediately, I have to delay bindings until creation in order to prevent premature evaluation. Seems like extra work to undo Flex's weird behavior, but that's just how it goes sometimes.
<?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" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.binding.utils.ChangeWatcher;
private var _titleForScreen1:String;
private var _titleForScreen2:String;
public function get titleForScreen1():String {
if(_titleForScreen1 == null){
//Server Request
}
return _titleForScreen1;
}
public function get titleForScreen2():String {
if(_titleForScreen2 == null){
//Server Request
}
return _titleForScreen2;
}
public function updateLabel1(value:String):void {screen1Label.text = value;}
public function updateLabel2(value:String):void {screen2Label.text = value;}
public function bindLabel1():void {
var changeWatcher:ChangeWatcher = BindingUtils.bindSetter(updateLabel1,this, "titleForScreen1");
}
public function bindLabel2():void {
var changeWatcher:ChangeWatcher = BindingUtils.bindSetter(updateLabel2,this, "titleForScreen2");
}
]]>
</fx:Script>
<mx:ViewStack>
<s:NavigatorContent label="Screen 1">
<s:Label id="screen1Label" creationComplete="bindLabel1()"/>
</s:NavigatorContent>
<s:NavigatorContent label="Screen 2">
<s:Label id="screen2Label" creationComplete="bindLabel2()"/>
</s:NavigatorContent>
</s:NavigatorContent>
</mx:ViewStack>
</s:Application>
I'm trying to make VideoDisplay playing media with FlashDevelop. Here's the source of my application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.VideoEvent;
private function pause():void
{
if (moo_player.state == VideoEvent.PLAYING)
moo_player.pause(); else
if (moo_player.state == VideoEvent.PAUSED)
moo_player.play();
}
]]>
</mx:Script>
<mx:Panel>
<mx:VideoDisplay
source="bar.flv"
width="640"
height="480"
maintainAspectRatio="true"
id="moo_player"
autoPlay="true"
doubleClick="pause();"
doubleClickEnabled="true"
/>
</mx:Panel>
</mx:Application>
The problem is when i build application and run it (unfortunately, got no idea how to run it without KMPlayer or Mozilla - Flash Player is a plugin afaik) i got no video. The movie file is in the same directory as application's "Application.flv" one. But if i reload application (within player or browser) a few times, video starts.
So, here are my questions:
what's wrong with VideoDisplay
component and how to fix this
'non-playing'?
what's the better way
to execute application than running
it within movie player or browser?
P.S.: please, do not get mad of my knowledge lacks - i began to use Flex nearly 30 minutes ago.
You should be using Spark components, not MX components. Try this:
<?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">
<s:VideoPlayer source="bar.flv" width="640" height="480" />
</s:Application>
There's some issues with video display internally in the component. One of the only flex components that's kind of poorly done in some ways. Please don't let it discourage you from exploring Flex.
Create a custom component that extends it, create a file named CustomVideoDisplay.as with this code:
package
{
import mx.controls.VideoDisplay;
public class CustomVideoDisplay extends VideoDisplay
{
[Bindable]
override public function get source():String
{
return super.source;
}
override public function set source(value:String):void
{
super.source = value;
play();
}
public function CustomVideoDisplay()
{
super();
}
}
}
Then add this into your root <application> tag :
xmlns:local="*"
And for your video component, refer to it as:
<local:CustomVideoDisplay
source="bar.flv"
width="640"
height="480"
maintainAspectRatio="true"
id="moo_player"
autoPlay="true"
doubleClick="pause();"
doubleClickEnabled="true"
/>
Let me know if this doesn't do the trick for you!
Well, i thought: my player will be ran at client-side of web project, and in FireFox that code runs successfully each of seven runs. I think this would be enough for testing and implementation.
Thanks everyone for the trouble-taking!
i am new to flex. I want to create some buttons and when v click on that button, it should open some images. how to give this functionality in flex builder 3. Thanks for ur time
Try this example if it helps.
The important thing is embedding the image before you use it.Another way of embedding is inline in the mx:Image tag.Please be careful with the path to the location of the image.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
/*in the source put the absolute path(like directory:/folder/image.gif) or the relative path (../image.gif where ../ is your project directory )to the location of your image
*/
[Embed (source="../src/assets/images/image.gif")]
[Bindable]
//this variable of type Class is used to refer to the aboveimage..
public var img:Class;
public function buttonClickHandler():void{
if(image.visible)
image.visible = false;
else
image.visible = true;
}
]]>
</mx:Script>
<mx:Image source="{img}" visible="false" id="image"/>
<mx:Button x="172" y="225" label="Button" id="button" click="buttonClickHandler()"/>
</mx:Application>
hi have a click handler for the button. in the function of click handler handle displaying of image by switching visibilities.have the image embedded in the design before itself. then play with its visibilities on button click.
try going through the examples here.explains about all kind of asset embedding,including sound
http://livedocs.adobe.com/flex/3/html/help.html?content=04_OO_Programming_09.html
I'm a Flex rookie tasked with enhancing an existing application. One of those enhancements is getting the field that currently shows the time to smoothly fade back and forth between showing the time and the date.
I know the proper way to do this is to embed the font file in the application so I can fade the label in and out directly. I'm trying to avoid that if I can, since I'd prefer to make my changes as unobtrusive as possible.
I came up with what I felt was a reasonable workaround: create a "privacy screen" that just so happens to be the exact size, shape, and color of the clock's background; initialize its alpha to 0; then when changing the time/date, fade-in the privacy screen, make the change, and fade the screen back out again.
The code looks something like this:
var targets:Array = new Array();
targets.push(this.privacyScreen);
this.effectFadeIn.play(targets);
this.mylabel.text = "I am a date and/or time";
this.effectFadeOut.play(targets);
... with the key components looking like this:
<mx:Label text="" id="mylabel" width="100%" height="100%" x="0" y="0" color="0xff0000"/>
<mx:Canvas id="privacyScreen" width="100%" height="100%" x="0" y="0" alpha="1" backgroundColor="{myConfiguration.backgroundColor}"/>
<mx:Fade id="effectFadeIn" alphaFrom="0.0" alphaTo="1.0" duration="250"/>
<mx:Fade id="effectFadeOut" alphaFrom="1.0" alphaTo="0.0" duration="250"/>
As I'm sure the experienced Flex designers already know, this code is made from delicious fresh-squeezed FAIL. The basic assumption that execution will wait for the fade-in effect to finish is wrong, and the fade-out effect is apparently ignored while the fade-in is still in progress.
So I guess I have two related questions:
Is it possible to get execution to pause while waiting for an effect to run to completion?
Is this approach even viable, or does it simply reek of Doing It Wrong from top to bottom?
My thanks in advance for any insight anyone can offer.
(And I admit in advance that the more I try to learn this by doing, the more I realize I need to avail myself of some of the online training resources out there.)
I just played a bit with your code, is this what you're looking for?
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="onComplete();">
<mx:Script>
<![CDATA[
private var targets:Array = new Array();
private function onComplete():void {
targets.push(canv);
effectFadeOut.play(targets);
}
private function onFadeInEnd():void {
effectFadeOut.play(targets);
}
private function onFadeOutEnd():void {
effectFadeIn.play(targets);
}
]]>
</mx:Script>
<mx:Label text="{(new Date()).toString()}" id="lbl" x="0" y="0" color="0xff0000"/>
<mx:Canvas id="canv" width="100%" height="{lbl.height+5}" x="0" y="0" backgroundColor="#000000"/>
<mx:Fade id="effectFadeIn" alphaFrom="0.0" alphaTo="1.0" duration="250"
effectEnd="onFadeInEnd();" />
<mx:Fade id="effectFadeOut" alphaFrom="1.0" alphaTo="0.0" duration="250"
effectEnd="onFadeOutEnd();" />
</mx:WindowedApplication>
Hope that helps :)
Your code is executed while the label fades. this.effectFadeIn.play () does not wait for it to finish. I would add a setTimeout call to the lines of code you need to call later, or better yet, put them in another function. Then, call the function again after a certain interval.
import flash.utils.*;
private function FadeIn () : void {
var targets:Array = new Array();
targets.push(this.privacyScreen);
this.effectFadeIn.play(targets);
this.mylabel.text = "I am a date and/or time";
setTimeout (function (): void {FadeOut (targets);}, effectFadeIn.duration); // Function and duration
}
private function FadeOut (targets : Array) : void {
this.effectFadeOut.play(targets);
setTimeout (FadeIn (), this.effectFadeOut.duration;
}
I'm pretty sure this should work...