Create new window in Air Application - apache-flex

how to create new window(same application duplicate) in Air Project. Any one Help thanks.

Use mx:Window, and take your code out of mx:WindowedApplication and put it into a reusable Canvas. The put an instance of that back in mx:WindowApplication, and then you can create a new mx:Window and add your reusable Canvas component in there as well.
<mx:WindowedApplication ...>
<p:YourComponent ... /> <!-- by putting it in your own file you can reuse it -->
</mx:WindowedApplication>
In a separate file called YourComponent.mxml:
<mx:Canvas ...>
<!-- put the contents that's in WindowedApplication here -->
<!-- add this block to your script block, and hook up a button/menu/whatever to
invoke this function. See how it creates a new instance of Window, adds a
new instance of YourComponent (which is the guts of your app), and shows that.
-->
<mx:Script>
private function createNewWindow() : void {
var window : Window = new Window();
var yourComponent : YourComponent = new YourComponent();
// initialize yourComponent instance's properties
window.addChild( yourComponent );
window.width = 800;
window.height = 600;
window.open(true);
}
</mx:Script>
</mx:Canvas>

Related

passing data from view to custom component in flex

I have extended the SkinnablePopUpContainer to make a popup window in mobile application. But i don't know how to pass a variable defined in the main view to this component. My code looks like the following
<fx:Declarations>
<fx:Component className="Alert">
<s:SkinnablePopUpContainer>
<s:Button label="OK" click="close()"/>
<s:SkinnablePopUpContainer>
<fx:Script>
<![CDATA[
private function setMetaDataXML(metaDataXML:XML):void{
var temp = metaDataXML;
}
]]>
</fx:Script>
</fx:Component>
</fx:Declarations>
--- main view continues
and here is how I call the component on a button click from the main view:
click="(new AlertMsg()).open(this, false)"
now i just want to call setMetaDataXML from the main view and pass the value. How can I achieve that? Thank you
I would recommend to create your component in a separate mxml file or even better in a pure AS3 based component. To do what you want to do, you could create a handler function in your Script area for that click event, and in there assign the instance of the component and then call any method before calling open, like:
click = "clickHandler()"
----- inside your script
function clickHandler : void {
var a : AlertMsg = new AlertMsg();
a.setMetaDataXML("foo");
a.open(this,false);
}
I would also recommend you to declare implicit setters and getters the AS3 way

How to display remote swf in flex UI component?

I am trying to display remote swf in my flex application, I am able to load swf, but it is not shown(visble) in my flex application.
here is the code
private function onLoaderComplete(event:Event):void{
can.addChild(l);
}
import flash.system.SecurityDomain;
import flash.system.ApplicationDomain;
var l:Loader = new Loader();
private function initApp():void {
var context:LoaderContext = new LoaderContext();
l.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
if(Security.sandboxType == Security.REMOTE){
var context:LoaderContext = new LoaderContext();
context.securityDomain = SecurityDomain.currentDomain;
l.load(new URLRequest('www.somedomain.com/load.swf?id1'), context);
}else{
l.load(new URLRequest('www.somedomain.com/load.swf?id=1'));
}
private function onLoaderComplete(event:Event):void{
can.addChild(l);
}
<mx:Canvas width="100%" height="50%" backgroundColor="red">
<mx:UIComponent id="can" width="100%" height="100%" >
</mx:UIComponent>
</mx:Canvas>
any idea
Thanks all
Your code snippet does not define what 'L' is
The most likely problem you're having with your current code is that you are adding your 'l' onto a UIComponent which has no built in code for sizing and positioning its children, therefore your 'l' will have no height and width, effectively making it invisible.
I would use a SWFLoader to load another SWF File and display it as part of your application.

google maps in flex withiout mxml component

How do I add google maps as Class into main.mxml
withiout <maps:Map key="" sensor="" />
like in Flash
UPDATE:
and if i have class
package{
import com.google.maps.Map;
public function myMap extends MovieClip {
var map:Map = new Map();
map.setSize(new Point(300, 300));
this.addChild(map);
}
}
if i use this in mxml
myMap:myMap = new myMap();
addChild(myMap);
return error
addChild() is not available in this class. Instead, use addElement() or modify the skin, if you have one.
if i use this
var container:UIComponent = new UIComponent();
container.width = 300;
container.height = 300;
addChild(container);
myMap:myMap = new myMap();
container.addChild(myMap);
Nothing is not added
thanx
MXML is declarative markup that is translated into actual instances at compile time.
For example:
<s:Label text="Something" />
is the same as running
var label:Label = new Label();
label.text = "Something";
this.addElement(label);
So in your case, just assign a function to execute at some point in the component lifecycle and keep the reference to the map at the class level. (I'm using some VGroup component for example)
<s:VGroup creationComplete="onCrtComplete()" ...>
<fx:Script>
<![CDATA[
private var map:Map;
private function onCrtComplete():void
{
maps = new Map();
//now you can do something with the map.
}
]]>
</fx:Script>
</s:VGroup>
Alternatively, you can add an id attribute to the MXML and then reference it programmatically using that id as the property name:
<maps:Map id="map" key="" sensor="" />
In the case of "addChild()", use "addElement()" instead - it's part of the changes between Flex 3 to 4.

Is Flex 4 Panel's controlBarContent dynamic?

I have a custom TitleWindow component (written in ActionScript) that extends spark.componenets.TitleWindow
I want to define some controls to be in the control bar but I don't have all controls at the creation stage. Also, this custom component is the base for other components which need other controls in the control bar.
Is there a way to add controls to the controlBarContent in ActionScript at run time?
Maybe something like the following? (this obviously didn't work)
controlBarContent = [];
.
.
.
controlBarContent.push(new Button());
In general, look out for
addElement()
or
addChild()
methods.
addElement() adds other UI components as sub-elements of other components.
This might be of interest. Finnaly, Adobe provides good help here: 'Working with components'.
UPDATE-1
Sorry, my fault. This works for me:
<s:Panel creationComplete="init();" id='p' controlBarVisible="true" >
<s:controlBarContent>
<!-- will show controls -->
<s:Button label="dd">
</s:Button>
</s:controlBarContent>
<fx:Script>
<![CDATA[
import mx.controls.Button;
import spark.components.Button;
private function init(): void {
var s:spark.components.Label = new spark.components.Label();
s.text = 'My Label';
s.width = 200;
var a:Array = new Array();
a.push( s );
p.controlBarVisible = false;
p.controlBarContent = a;
p.controlBarVisible = true;
p.invalidateDisplayList();
}
]]>
</fx:Script>
</s:Panel>

Adding a custom UI component as a panel titleIcon (should be easy, I'm kind of a newbie)

The concept of this seems easy, but I'm having trouble getting it right and can't find anything to help me on this.
I have a panel I need to perform a drag and drop operation on, but I only want to perform that if the user mouses down on a particular area of the panel. I can add an Icon to the panel by doing this:
[Embed("/img/icon.png")]
[Bindable]
public var dragIcon:Class;
newPanel.titleIcon = dragIcon;
But what I really want to add is a box, which I can then add my listeners to for the drag and mouse down like I do on some canvases created in actionscript like so
var tempBox:Box = new Box;
tempBox.x=0;
tempBox.y=0;
tempBox.width = 20;
tempBox.height = 44;
tempBox.setStyle("horizontalAlign","center");
tempBox.setStyle("verticalAlign","middle");
tempBox.addEventListener(MouseEvent.ROLL_OVER,over);
tempBox.addEventListener(MouseEvent.ROLL_OUT,out);
tempBox.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownAnswer);
var tempImg:Image = new Image();
tempImg.source = grabbableItem;
tempBox.addChild(tempImg);
myCanvas.addChild(tempBox);
So what do I need to do to use that tempBox and turn it into a class to be used as my panels titleIcon?
Edit 12/29/09:
So I came up with something where I'm extending the panel class (shown below) but all this is really doing is covering up the icon with something I can access publicly. I'm sure there's a better way out there right?
package custClass
{
import mx.containers.Box;
import mx.containers.Panel;
import mx.controls.Image;
public class DragPanel extends Panel
{
[Bindable] public var iconBox:Box = new Box();
[Embed("../img/doc_page.png")] [Bindable] public var grabbableItem:Class;
public function DragPanel()
{
super();
}
override protected function createChildren():void{
super.createChildren();
iconBox.x = 10
iconBox.y = 4
iconBox.width = 20;
iconBox.height = 20;
iconBox.setStyle("horizontalAlign","center");
iconBox.setStyle("verticalAlign","middle");
iconBox.setStyle("borderStyle","solid");
iconBox.setStyle("backgroundColor",0x000000);
var tempImg:Image = new Image();
tempImg.source = grabbableItem;
iconBox.addChild(tempImg);
this.rawChildren.addChild(iconBox);
}
}
}
EDIT 1/7/10 (or 16 according to my windows mobile phones text messages):
Using Chaims help from below here is my new answer.
Create a box mxml component like Chaim says but also add the following script block to it.
<mx:Script>
<![CDATA[
import mx.core.Application;
[Embed("/img/doc_page.png")]
[Bindable]
public var grabbableItem:Class;
public function init():void{
this.addEventListener(MouseEvent.MOUSE_DOWN,Application.application.mouseDownSection);
this.addEventListener(MouseEvent.ROLL_OVER,Application.application.over);
this.addEventListener(MouseEvent.ROLL_OUT,Application.application.out);
}
]]>
</mx:Script>
This adds in all the event listeners I want on the Box that will be used as my icon. Now just add the box as an Icon and it's good to go.
panel.titleIcon = DraggableBox;
I guess since it's a separate mxml component it is now a class, though I don't think I understand why.
The Panel expecting titleIcon property value to be a IFactory and create an instance by himself.
Make your box a component (lets name it DraggableBox.mxml):
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml"
x="0" y="0" width="20" height="44"
horizontalAlign="center" verticalAlign="middle">
<mx:Image source="{grabbableItem}"/>
</mx:Box>
And assign it to titleIcon:
<mx:Panel titleIcon="{DraggableBox}" >
...
</mx:Panel>
If you want do it in ActionScript use ClassFactory:
panel.titleIcon = new ClassFactory(DraggableBox);

Resources