Hai i want create a full screen mode ,so i used this link http://blog.flexexamples.com/2007/08/07/creating-full-screen-flex-applications/.But i cannot create a full screen mode.anybody kindly help me.
<mx:Script>
<![CDATA[
import mx.effects.easing.*;
import mx.effects.Fade;
import mx.effects.Rotate;
import mx.controls.Alert;
private var fade:Fade;
private var rotate:Rotate;
private function init():void {
// Fade effect
fade = new Fade();
fade.duration=9500;
// Rotate effect
Alert.show("Text Copied!", "Alert Box", Alert.OK);
stage.displayState=StageDisplayState.FULL_SCREEN;
img.setStyle("showEffect", fade);
}
]]>
</mx:Script>
error
The stage property is still null when the object is initialized. So you can't call
stage.displayState = StageDisplayState.FULL_SCREEN;
at the init() method.
You should call that when the object is added to the stage.
private function init():void {
// ...
this.addEventListener(Event.ADDED_TO_STAGE, addedToStage);
}
function addedToStage(e:Event) {
stage.displayState = StageDisplayState.FULL_SCREEN;
}
Or you can do as in the link you posted:
private function init():void {
// ...
Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;
}
Another possibility for the error is that img is null too. So check that it is already created before using it:
private function init():void {
// ...
if (img) {
img.setStyle("showEffect", fade);
} else {
trace("img is null.");
}
}
Related
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.
I've been trying to get FXG to work in my Flex app, it works and renders fine but what I'm trying to accomplish is a sort of a gallery with data about the images in a database. I used to be able to use <s:Image source=/path/{variable_name}> but now I have to import the FXG files and can't use <s:Image> anymore. Here I can display a static FXG image:
<?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"
xmlns:fxg="assets.fxg.*"
tabBarVisible="false" title="{data.name}">
<fxg:megapicture001 x="118" y="27" width="338" height="519"/>
<s:Label x="78" y="43" text="{data.name}"/>
<s:navigationContent>
<s:Button icon="#Embed('assets/home.png')" click="navigator.popView()"/>
</s:navigationContent>
</s:View>
Trying to do <fxg:{data.picturename} /> blows up.
You can't import and use the FXG elements stand alone since they aren't display objects. My take was to wrap them in a UIComponent container. This class will probably end up as part of the Flextras Mobile Component set in our next update sometime early next year most likely:
package com.dotcomit.utils
{
import flash.display.DisplayObject;
import flash.display.Sprite;
import mx.core.UIComponent;
public class FXGImage extends UIComponent
{
public function FXGImage(source:Class = null)
{
if(source){
this.source = source;
}
super();
}
// this will tell us the class we want to use for the display
// most likely an fxgClass
private var _source : Class;
protected var sourceChanged :Boolean = true;
public function get source():Class
{
return _source;
}
public function set source(value:Class):void
{
_source = value;
sourceChanged = true;
this.commitProperties();
}
public var imageInstance : DisplayObject;
// if you want to offset the position of the X and Y values in the
public var XOffset :int = 0;
public var YOffset :int = 0;
// if you want to offset the position of the X and Y values in the
public var heightOffset :int = 0;
public var widthOffset :int = 0;
override protected function createChildren():void{
super.createChildren();
if(this.sourceChanged){
if(this.imageInstance){
this.removeChild(this.imageInstance);
this.imageInstance = null;
}
if(this.source){
this.imageInstance = new source();
this.imageInstance.x = 0 + XOffset;
this.imageInstance.y = 0 + YOffset;
this.addChild(this.imageInstance);
}
this.sourceChanged = false;
}
}
override protected function commitProperties():void{
super.commitProperties();
if(this.sourceChanged){
// if the source changed re-created it; which is done in createChildren();
this.createChildren();
}
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(unscaledHeight != 0){
this.imageInstance.height = unscaledHeight + this.heightOffset;
}
if(unscaledWidth != 0){
this.imageInstance.width = unscaledWidth + this.widthOffset;
}
}
}
}
You can use it something like this:
<utils:FXGImage id="fxgImage" source="assets.images.mainMenu.MainMenuBackground" height="100%" width="100%" />
I want to capture a change in a property of an item as follows
myItem.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE,listener);
protected function listener(event:PropertyChangeEvent):void {
...
}
the problem i'm having is that when I assign multiple values to the "myItem" object the listened gets kicked off multiple times. for instance
If I do:
myItem.x = new_x;
myItem.y = new_y;
....
the listener kicks off everytime a change happens (after calling first line, then after calling second line..etc). How to prevent that to save processing/memory and avoid inconsistency.
You can listen for Event.COMPLETE (or create a custom event) and manually dispatch that when you've finished changing all your properties. For example:
myItem.addEventListener(Event.COMPLETE, listener);
protected function listener(e:Event):void
{
...
}
then
myItem.x = newX;
myItem.y = newY;
myItem.dispatchEvent(new Event(Event.COMPLETE));
You can override the setter of your component and dispatch a custom event
You can use mx.utils.ObjectProxy class and by overriding its protected "setupPropertyList" method you can specify by youself what properties will trigger PropertyChangeEvent.PROPERTY_CHANGE event
You could do that the "hackish" way. Example follows...
BindingObject.as:
package bindings
{
import mx.core.EventPriority;
import mx.events.PropertyChangeEvent;
import mx.events.PropertyChangeEventKind;
[Bindable]
public class BindingObject
{
private var inEditMode : Boolean = false;
public function BindingObject()
{
this.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, onPropertyChange, false, EventPriority.BINDING - 1);
}
private function onPropertyChange(event : PropertyChangeEvent) : void
{
if (inEditMode)
event.stopImmediatePropagation();
}
public function beginEdit() : void
{
inEditMode = true;
}
public function endEdit() : void
{
inEditMode = false;
this.dispatchEvent(new PropertyChangeEvent(PropertyChangeEvent.PROPERTY_CHANGE, false, false, PropertyChangeEventKind.UPDATE));
}
public var myX : int = 0;
public var myY : int = 0;
}
}
testapplication.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="onCreationComplete();">
<mx:Script>
<![CDATA[
import mx.events.PropertyChangeEvent;
import bindings.BindingObject;
[Bindable]
private var something : BindingObject = new BindingObject();
private function onCreationComplete() : void
{
something.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, listener);
something.beginEdit();
trace("Begun edit");
trace("changing myX");
something.myX = 3;
trace("changed myX");
trace("changing myY");
something.myY = 6;
trace("changed myY");
trace("Ending edit");
something.endEdit();
trace("Ended");
}
private function listener(event : PropertyChangeEvent) : void
{
trace("in my listener");
}
private function myX(val : int) : String
{
trace("in myX");
return val.toString();
}
private function myY(val : int) : String
{
trace("in myY");
return val.toString();
}
]]>
</mx:Script>
<mx:Label text="{myX(something.myX)}" />
<mx:Label text="{myY(something.myY)}" />
</mx:Application>
So, as you can see, I've added an event listener in the class to be bound, that will be triggered right after the generated binding listeners (note the priority is BINDING - 1) and in there I stop the propagation of the event. Which means whatever listeners still need to be executed, won't. The endEdit method will dispatch the PropertyChange event that will trigger your listener.
Now, assuming that you do something costly in your listener this should solve your problem.
I can take snapshot of a component. But the problem is the component is lil bigger with scroll bars. The saved image has scrollbars (only the visible area is getting saved). What i need is I want the entire component to be saved as an image.
This exact functionality is available while we print the component using FlexPrintJob, where by setting the FlexPrintJobScaleType.NONE.
But here in my case i want it to be saved using ImageSnapShot ( not thru FlexPrintJob ).
Thanks Advance,
Sriss
I thought I knew how to do this, but there seem to be lots of awkward issues. I got it working but it's not nice. :-( Maybe you can improve on it.
Here's the code for an example application. And below is the code for the MyCanvas class. When you click the button an image of the Canvas container but without scrollbars should be drawn.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:my="*">
<mx:Script><![CDATA[
import flash.display.BitmapData;
import flash.events.Event;
import mx.containers.Canvas;
import mx.graphics.ImageSnapshot;
import flash.geom.Matrix;
import mx.core.ScrollPolicy;
public function onclick():void
{
var bitmapData:BitmapData = ImageSnapshot.captureBitmapData(canvas);
canvas.addEventListener("BitMapReady", onBitMapReady);
canvas.horizontalScrollPolicy = ScrollPolicy.OFF;
canvas.CreateBitMapData();
}
private function onBitMapReady(e:Event):void
{
DrawBitmapDataAt(canvas.bitMapData, 100, 100);
canvas.removeEventListener("BitMapReady", onBitMapReady);
canvas.horizontalScrollPolicy = ScrollPolicy.AUTO;
}
private function DrawBitmapDataAt(bitmapData:BitmapData,x:int,y:int):void
{
var matrix:Matrix = new Matrix();
matrix.tx = x;
matrix.ty = y;
box.graphics.lineStyle(0,0,0);
box.graphics.beginBitmapFill(bitmapData, matrix, false);
box.graphics.drawRect(x,y,bitmapData.width,bitmapData.height);
}
]]></mx:Script>
<mx:Box id="box">
<my:MyCanvas width="50" height="50" backgroundColor="white" id="canvas">
<mx:Button label="Hello" click="onclick()" />
</my:MyCanvas>
</mx:Box>
</mx:Application>
MyCanvas class:
package
{
import flash.events.Event;
import flash.events.TimerEvent;
import mx.containers.Canvas;
import flash.display.BitmapData;
import mx.core.ScrollPolicy;
import mx.graphics.ImageSnapshot;
import flash.utils.Timer;
public class MyCanvas extends Canvas
{
public var bitMapData:BitmapData;
private var creatingBitMap:Boolean = false;
private var timer:Timer;
public function CreateBitMapData():void
{
this.horizontalScrollPolicy = ScrollPolicy.OFF;
creatingBitMap = true;
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (creatingBitMap == true && this.horizontalScrollBar == null)
{
bitMapData = ImageSnapshot.captureBitmapData(this);
this.dispatchEvent(new Event("BitMapReady"));
creatingBitMap = false;
timer = new Timer(10);
timer.addEventListener(TimerEvent.TIMER, onTimer);
this.width += 1;
timer.start();
}
}
private function onTimer(e:TimerEvent):void
{
this.width -= 1;
trace("timer");
timer.removeEventListener(TimerEvent.TIMER, onTimer);
timer.stop();
}
}
}
How do I diable the drag-drop of an image. I've tried to stopPropagation, but that didn't help.
Here is the snippet of the code that I've written
<mx:Image width="24" height="24" complete="init()" dragStart="disableMove(event)"
source="{(data.id==null)?'': (data.id.search('\\.') > 0) ? 'assets/icons/teacher.png' : 'assets/icons/student.png'}"
toolTip="{data.data}" doubleClick="itemDoubleClick(event, data.id)" doubleClickEnabled="true">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.events.MouseEvent;
import flash.ui.ContextMenu;
import flash.ui.ContextMenuItem;
private var allCurrentItems: Array = new Array();
private function itemDoubleClick(event: Event, id: String): void {
Alert.show("Clicked = "+id);
}
private function init(): void {
var menuLabel:String = "About School\u00A0";
var cm:ContextMenu = new ContextMenu();
cm.hideBuiltInItems();
var item:ContextMenuItem = new ContextMenuItem(menuLabel);
this.addEventListener(MouseEvent.MOUSE_DOWN, showClick);
//add eventlisteners to the menu item and provide functions
cm.customItems.push(item);
//cm.customItems = [item];
this.contextMenu = cm;
}
private function showClick(event:MouseEvent): void {
if (event.buttonDown) {
Alert.show(String(event.buttonDown));
}
}
private function disableMove(event: MouseEvent): void {
event.stopImmediatePropagation();
}
]]>
</mx:Script>
</mx:Image>
I got it, instead of calling disableMove(event) on dragStart(), I called it on mouseDown() it worked.