I want to load an initial component to be displayed in my flex app, depending on whether a value in the SharedObject is set (first launch). How do I accomplish that?
Easy enough:
<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"
applicationComplete="onApplicationComplete()">
<fx:Script>
<![CDATA[
private function onApplicationComplete():void
{
var so:SharedObject = SharedObject.getLocal('something');
// add conditionals here
addElement(new SomeView());
}
]]>
</fx:Script>
</s:Application>
Or with States:
<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"
applicationComplete="onApplicationComplete()">
<fx:Script>
<![CDATA[
private function onApplicationComplete():void
{
var so:SharedObject = SharedObject.getLocal('something');
// add conditionals here
this.currentState = 'someview2';
}
]]>
</fx:Script>
<s:states>
</s:State name="someview" />
</s:State name="someview2" />
</s:State name="someview3" />
</s:states>
<local:SomeView includeIn="someview" width="100%" height="100%" />
<local:SomeView2 includeIn="someview2" width="100%" height="100%" />
<local:SomeView3 includeIn="someview3" width="100%" height="100%" />
</s:Application>
Related
I am implementing a title window, which is calling from the main appication like this
protected function sampleButton_clickHandler(event:MouseEvent):void
{
var ttlWndw:SampleTitleWindow = PopUpManager.createPopUp(FlexGlobals.topLevelApplication as DisplayObject, SampleTitleWindow, true) as SampleTitleWindow;
PopUpManager.centerPopUp(ttlWndw);
}
the title window will be this
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow 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="*"
width="288" height="230">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<local:SampleVBox id="sampleVBox" x="108" y="83"/>
</s:TitleWindow>
in the title window i had another child component called sample vbox and this component looks like this
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox 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[
protected function closeBtn_clickHandler(event:MouseEvent):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button id="closeBtn" label="Close" click="closeBtn_clickHandler(event)"/>
</mx:VBox>
My question is, I want to close the title window using the button in the sampleVBox component. please someone help me in this.
Thanks in advance!
One solution is to dispatch an event from the SampleVBox component that the parent TitleWindow will listen to. To do this, add some metadata to your SampleVBox class that indicates the class dispatches such an event:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox 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:Metadata>
[Event(name="close", type="flash.events.Event")]
</fx:Metadata>
<fx:Script>
<![CDATA[
protected function closeBtn_clickHandler(event:MouseEvent):void
{
dispatchEvent(new Event(Event.CLOSE));
}
]]>
</fx:Script>
<s:Button id="closeBtn" label="Close" click="closeBtn_clickHandler(event)"/>
</mx:VBox>
Now, that the SampleVBox declares that it dispatches a "close" event, you can listen for it in the TitleWindow:
<s:TitleWindow 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="*"
width="288" height="230">
<fx:Script>
<![CDATA[
protected function onSampleBoxClose():void
{
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<local:SampleVBox id="sampleVBox" x="108" y="83" close="onSampleBoxClose()"/>
</s:TitleWindow>
I want to drag my panel without title when I drag any part of it. I already know how to remove title from panel and I know how to drag it with title bar. But i don't know how to drag without title.. Please help.
Here is my example
//Application
<?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" creationComplete="init(event)">
<fx:Script>
<![CDATA[
import com.dragpanel.MyPanel;
import mx.events.FlexEvent;
protected function init(event:FlexEvent):void
{
var panel:MyPanel = new MyPanel();
panel.width = 300;
panel.height = 200;
panel.title = "Hello";
this.addElement(panel);
}
]]>
</fx:Script>
</s:Application>
//MyPanel.mxml
<?xml version="1.0" encoding="utf-8"?>
<s: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"
width="150" height="80" title="Hello"
mouseDown="onMouseDown(event)" mouseUp="onMouseUp(event)"
skinClass="com.dragpanel.PanelNoTitleBar">
<fx:Script>
<![CDATA[
protected function onMouseDown(event:MouseEvent):void
{
this.startDrag();
}
protected function onMouseUp(event:MouseEvent):void
{
this.stopDrag();
}
]]>
</fx:Script>
<s:HGroup verticalAlign="bottom" x="10" y="10">
<s:Label text="Name:"/>
<s:TextInput width="60"/>
</s:HGroup>
</s:Panel>
How are you starting the drag using the title bar? Do you have a mouseDown listener on the titlebar section of the Panel? You can just move the mouseDown listener to the Panel itself.
I'm trying to alternate between two background colors for each cell in a datagrid. It changes its state upon double clicking in a particular cell.
What I want is that the user be able to select individuals cell in a Datagrid so #FFFFFF color is for unselected cells and #CDCDCD for selected ones.
I have the following code for an ItenRenderer:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
clipAndEnableScrolling="true">
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void {
//lblData.text = data[column.dataField]
}
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State name="selected"/>
</s:states>
<s:Label id="lblData" top="9" left="7" text="10" width="100%" height="100%" textAlign="center"/>
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color.selected="#CDCDCD" color.normal="#FFFFFF"/>
</s:fill>
</s:Rect>
</s:GridItemRenderer>
The question is that label is never shown due to the rect component hide it. how can i accomplish this?
Thanks in advance.
Try this:
//Application
<?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;
[Bindable]private var initDG:ArrayCollection = new ArrayCollection([
{Artist:'01', Album:'Album 01', Year:'2008'},
{Artist:'02', Album:'Album 02', Year:'2009'},
{Artist:'03', Album:'Album 03', Year:'2007'},
{Artist:'04', Album:'Album 04', Year:'2003'},
]);
]]>
</fx:Script>
<s:VGroup>
<s:DataGrid id="myGrid" width="360" dataProvider="{initDG}">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="Artist" headerText="Artist" itemRenderer="com.dgcoloredcells.CellRenderer"/>
<s:GridColumn dataField="Album" headerText="Album" itemRenderer="com.dgcoloredcells.CellRenderer"/>
<s:GridColumn dataField="Year" headerText="Year" itemRenderer="com.dgcoloredcells.CellRenderer"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:VGroup>
</s:Application>
//Renderer
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
implements="mx.controls.listClasses.IDropInListItemRenderer">
<fx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
private var _listData:BaseListData;
[Bindable]private var isSelected:Boolean = false;
override public function set data( value:Object ) : void
{
super.data = value;
lblData.text = data[column.dataField];
}
[Bindable]public function get listData() : BaseListData
{
return _listData;
}
public function set listData( value:BaseListData ) : void
{
_listData = value;
}
private function onClick(evt:Event):void
{
isSelected = !isSelected;
}
]]>
</fx:Script>
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="{isSelected ? 0xCDCDCD : 0xFFFFFF}"/>
</s:fill>
</s:Rect>
<s:Label id="lblData" top="9" left="7" width="100%" height="100%" textAlign="center" doubleClickEnabled="true" doubleClick="onClick(event)"/>
</s:GridItemRenderer>
//EDIT
Here you can see my screenshot for data[column.dataField] problem:
Here is the coresponding value object
So data[column.dataField] = data["Artist"] = "01"
I have this ViewNavigator inside a callout and the callout displays a view inside it using firstView="views.ListMenusHomeView" . Now how can I close the callout from ListMenusHomeView? Hope someone can help.
Here is my code for the callout:
<?xml version="1.0" encoding="utf-8"?>
<s:Callout xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
contentBackgroundAppearance="none"
height="300" width="300">
<fx:Declarations>
<fx:XML id="menu" source="xmldata/menu2.xml" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.events.PopUpEvent;
protected function back(event:MouseEvent):void {
if(viewNav.length>1)
viewNav.popView();
}
]]>
</fx:Script>
<s:ViewNavigator id="viewNav" width="100%" height="100%" firstView="views.ListMenusHomeView">
<s:navigationContent>
<s:Button label="Back" click="back(event)"/>
</s:navigationContent>
<s:actionContent>
<s:Button label="Cancel" click="close(false)" emphasized="true"/>
</s:actionContent>
</s:ViewNavigator>
</s:Callout>
You see that there is a ViewNavigator which holds the ListMenusHomeView. This is the code for the ListMenusHomeView.
<?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="Main Menu" creationComplete="onCreationComplete()">
<fx:Declarations>
<fx:XML id="menu" source="xmldata/menu2.xml" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.adobe.serializers.xml.XMLDecoder;
import mx.collections.ArrayCollection;
import spark.events.IndexChangeEvent;
[Bindable]
private var dataArray:ArrayCollection = new ArrayCollection();
private var object:DataArray = new DataArray();
private function onCreationComplete() : void{
var decoder:XMLDecoder = new XMLDecoder();
var resultObj:Object = decoder.decode(menu);
dataArray = object.onCreationComplete(menu, menu.menuitem, resultObj, resultObj.menuitem);
}
protected function list1_changeHandler(event:IndexChangeEvent):void
{
}
]]>
</fx:Script>
<s:List id="tileLayout"
width="100%" height="100%"
verticalScrollPolicy="off" horizontalScrollPolicy="on"
pageScrollingEnabled="true" dataProvider="{dataArray}"
itemRenderer="renderers.iconList2" change="list1_changeHandler(event)">
<s:layout>
<s:TileLayout orientation="columns" requestedRowCount="3"
verticalGap="20" horizontalGap="20"/>
</s:layout>
</s:List>
Now I want to close MyCallout whenever I click an icon inside ListMenusHomeView. The function list1_changeHandler(event:IndexChangeEvent) is responsible for that one.
What should I do?
The Callout class has a close() method, so you basically just need to access the ListMenusHomeViews parentDocument (which would be your "viewNav" ViewNavigator) and its parentDocument, which should be your ListMenusHomeView.
I haven't tested it but you might fiddle around with the parentDocument, parent and owner properties to access the correct object. Try them with a simple trace and you'll be up and running in no time.
I'm writing a very simple flex application with mxml. I have many buttons, when I click one of them, I hope its value changes to World.
My code is:
<?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:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
private function hello():void {
this.label = "World!";
}
]]>
</fx:Script>
<mx:HBox>
<s:Button click="hello()" label="Hello" />
<s:Button click="hello()" label="Hello" />
<s:Button click="hello()" label="Hello" />
<s:Button click="hello()" label="Hello" />
<s:Button click="hello()" label="Hello" />
</mx:HBox>
</s:Application>
Which is incorrect since this.label = "World!" can't be compiled that this.label is not found.
How to let the this reference to the button I clicked, or how to implement this ?
Try below code this may help you: -
<?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:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
private function hello(event:MouseEvent):void {
event.currentTarget.label = "World!";
}
]]>
</fx:Script>
<mx:HBox>
<s:Button click="hello(event)" label="Hello" />
<s:Button click="hello(event)" label="Hello" />
<s:Button click="hello(event)" label="Hello" />
<s:Button click="hello(event)" label="Hello" />
<s:Button click="hello(event)" label="Hello" />
</mx:HBox>
</s:Application>