sorry for my poor English.
I seached for hours but I couldn't find any solution for my problem.
I want to navigate my view to another from getting name of view from arrayList in DataProvider.
How can I get the clicked item's url and navigate as View.
Thanks..
<s:List id="listMenu" top="0" bottom="0" left="0" right="0" height="100%" width="100%"
click="navigator.pushView(listMenu.url as View)">
<s:dataProvider>
<s:ArrayList>
<fx:Object name="Title1" detail="Detail1" src="#Embed('../media/graphics/credit-card.png')" url="View1" />
<fx:Object name="Title2 Sorgulama" detail="Detail2" src="#Embed('../media/graphics/IMEI.png')" url="View2" />
</s:ArrayList>
</s:dataProvider>
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer labelField="name" messageField="detail" iconField="src" iconWidth="64" iconHeight="64" height="68" />
</fx:Component>
</s:itemRenderer>
Here you go -
assets/icons/FB.png:
assets/icons/GG.png:
views/Home.mxml:
<?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">
<fx:Script>
<![CDATA[
import mx.core.BitmapAsset;
import mx.events.FlexEvent;
import spark.components.SplitViewNavigator;
import spark.components.ViewNavigator;
import spark.core.SpriteVisualElement;
import spark.events.IndexChangeEvent;
[Embed(source="assets/icons/FB.png")]
private static const FB_CLASS:Class;
[Embed(source="assets/icons/GG.png")]
private static const GG_CLASS:Class;
private static const FB_ICON:BitmapAsset = new FB_CLASS() as BitmapAsset;
private static const GG_ICON:BitmapAsset = new GG_CLASS() as BitmapAsset;
protected function handleChange(event:IndexChangeEvent):void {
var item:Object = login.selectedItem;
navigator.pushView(item.view, item.str);
}
]]>
</fx:Script>
<s:List width="100%" height="100%" id="login" change="handleChange(event);">
<s:dataProvider>
<s:ArrayCollection>
<fx:Object icon="{FB_ICON}" view="{FB}" label="Play at" msg="Facebook.com" />
<fx:Object icon="{GG_ICON}" view="{GG}" label="Play at" msg="Google+" />
</s:ArrayCollection>
</s:dataProvider>
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer labelField="label" iconField="icon" messageField="msg"/>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:View>
App.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.Home">
</s:ViewNavigatorApplication>
The views/FB.mxml and views/GG.mxml referenced above - to be created by yourself ;-)
Related
I created a subclass of Event Class. I used the subclass in an itemrenderer, no error observed. But once I declared the itemrenderer to the List in the Main application, errors appears in the itemrenderer claiming "Type was not found or was not a compile-time constant: CustomDeleteEvent" and "Incorrect number of arguments: Expected no more than 1"
Please give me some advice. Thanks in advance.
In subclass :
package widgets.GetMap
{
import flash.events.Event;
public class CustomDeleteEvent extends Event
{
public static const DELETE_ITEM:String = "DELETE_ITEM";
public var deletedItem:String;
public function CustomDeleteEvent(type:String, deletedItem:String)
{
super(type);
this.deletedItem = deletedItem;
}
}
}
In ItemRenderer :
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer name="CustomItemRen"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true"
minHeight="24">
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
import spark.components.List;
protected function deleteHandler():void
{
var deleteItem:String = itemIndex.toString();
var tryevent:CustomDeleteEvent;
owner.dispatchEvent(tryevent,deleteItem);
Object(owner).dataProvider.removeItemAt(itemIndex);
}
]]>
</fx:Script>
<s:HGroup width="100%" height="100%"
verticalAlign="middle"
paddingLeft="2" paddingRight="2"
paddingTop="2" paddingBottom="2">
<s:Label id="lbl" text="{data.toString()}" width="100%" color="#30FF00"/>
<s:Button id="btn" includeIn="hovered,selected" y="-16" width="35" height="22" label="X"
accentColor="#FFFFFF" color="#FF0000" fontFamily="Verdana" fontSize="12"
fontWeight="bold" mouseDown="deleteHandler();" toolTip="Delete item"/>
</s:HGroup>
</s:ItemRenderer>
In the main application:
<s:Application name="Spark_List_itemRenderer_hovered_test"
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:Style source="test.css"/>
<s:List id="lst"
itemRenderer="CustomItemRen"
width="300"
horizontalCenter="0" verticalCenter="0">
<s:layout>
<s:VerticalLayout gap="0"
horizontalAlign="justify"
requestedRowCount="8" />
</s:layout>
<s:dataProvider>
<s:ArrayList>
<fx:Object label="Application" />
<fx:Object label="Label" />
<fx:Object label="List" />
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:Application>
In this line, you didn't initialize the event object ("tryEvent" like new CustomDeleteEvent())..
and also in your "CustomDeleteEvent"..there is "type" parameter, which is not in "tryEvent" object...
var tryevent:CustomDeleteEvent;
owner.dispatchEvent(tryevent,deleteItem);
Use below code for dispatch the event....
owner.dispatchEvent(new CustomDeleteEvent(CustomDeleteEvent.DELETE_ITEM, deleteItem));
hope this will help you....
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 am very new to flex. I have successfully added a dropDownList in my dataGrid table.The dropdownList works fine. Its just that since I am doing this for the user. I want to be able to see the dropDowList component/Icon itself in the dataGrid table, instead of me clicking the cell and then the dropDownList appears for me to select. Is it possible for me to achieve this?? Must I use flex skin or something ? Pls guide me on how can I can achieve this and pls if possible give me an example.
Thanks
Rekha
This is the code I have right now:
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import spark.events.IndexChangeEvent;
import mx.controls.Alert;
[Bindable]
private var myDP:ArrayCollection = new ArrayCollection([
{label1:"Order #2314", quant:3, color:'red'},
{label1:"Order #2315", quant:3, color:'red'}
]);
]]>
</fx:Script>
<s:DataGrid id="myDG" x="29" y="33" width="393" height="151" dataProvider="{myDP}"
editable="true" variableRowHeight="true">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="label1" headerText="Order #" editable="false"/>
<s:GridColumn dataField="quant" headerText="Qty" editable="true"/>
<s:GridColumn dataField="color" headerText="Color" editable="true">
<s:itemEditor>
<fx:Component>
<s:GridItemEditor>
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
override public function set value(newValue:Object):void {
cb.selectedItem = newValue;
}
override public function get value():Object {
return cb.selectedItem.toString();
}
override public function setFocus():void {
cb.setFocus();
}
override public function save():Boolean
{
data[column.dataField] = value;
return true;
}
]]>
</fx:Script>
<s:DropDownList id="cb" requireSelection="true" skinClass="MySkins.mytestddbSkin">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>red</fx:String>
<fx:String>blue</fx:String>
<fx:String>green</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
</s:GridItemEditor>
</fx:Component>
</s:itemEditor>
</s:GridColumn>
</s:ArrayList>
</s:columns >
</s:DataGrid>
You can use an ItemRenderer instead of the ItemEditor. In this case you should set rendererIsEditable property of the GridColumn to true.
Then you can use the change event of the DropDownList, to register the change in your data provider.
I have added the color column twice to let you see, that the data is actually edited after the selection.
<?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 myDP:ArrayCollection = new ArrayCollection([
{label1:"Order #2314", quant:3, color:'red'},
{label1:"Order #2315", quant:3, color:'red'}
]);
]]>
</fx:Script>
<s:DataGrid id="myDG" x="29" y="33" height="151" dataProvider="{myDP}"
editable="true" variableRowHeight="true">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="label1" headerText="Order #" editable="false"/>
<s:GridColumn dataField="quant" headerText="Qty" editable="true"/>
<s:GridColumn dataField="color" headerText="Color" editable="true" width="120"/>
<s:GridColumn dataField="color" headerText="Color" editable="true" rendererIsEditable="true" width="180">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
protected function onCbChange(event:IndexChangeEvent):void
{
var value:String = (event.currentTarget as DropDownList).selectedItem;
data[column.dataField] = value;
}
]]>
</fx:Script>
<s:DropDownList id="cb" requireSelection="true" width="100%" change="onCbChange(event)">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>red</fx:String>
<fx:String>blue</fx:String>
<fx:String>green</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns >
</s:DataGrid>
</s:Application>
I have tried to do this many ways but for the life of me cannot think how to. Basically I have a list. When an item on the list is selected the radio button labels change. However, I want a label and text area to appear saying once the user has clicked on the radio button if it is right or not.
Code so far: -
<s:VGroup x="103" y="130" width="123" height="125">
<s:RadioButton id="RadioButton1" label="{data.QuestionsRadioButton1}" groupName="QuestionsTestRadioButtons" click="RadioButton1_clickHandler(event)"/>
<s:RadioButton label="{data.QuestionsRadioButton2}" groupName="QuestionsTestRadioButtons" click="radiobutton1_clickHandler(event)" />
<s:RadioButton id="RadioButton3" label="{data.QuestionsRadioButton3}" groupName="QuestionsTestRadioButtons" click="radiobutton2_clickHandler(event)"/>
</s:VGroup>
I will not post all the code as we will be here forever. However, is there a way maybe an if function? To say if the radio button clicked actually is the right answer or not?
Any suggestions would be helpful
Thank You
My attempt to draft a complete example:
Questionaire.mxml
<?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:local="*">
<fx:Declarations>
<s:ArrayCollection id="questions">
<local:Question text="It is raining …">
<s:ArrayCollection>
<local:Answer text="Men"/>
<local:Answer text="Cats and dogs" correct="true"/>
<local:Answer text="Candy"/>
</s:ArrayCollection>
</local:Question>
<local:Question text="The sky is …">
<s:ArrayCollection>
<local:Answer text="Blue" correct="true"/>
<local:Answer text="Orange" correct="true"/>
<local:Answer text="Grey" correct="true"/>
<local:Answer text="Green"/>
</s:ArrayCollection>
</local:Question>
</s:ArrayCollection>
</fx:Declarations>
<s:DataGroup dataProvider="{questions}" itemRenderer="QuestionRenderer">
<s:layout>
<s:VerticalLayout gap="24"/>
</s:layout>
</s:DataGroup>
</s:Application>
QuestionRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:DataRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
[Bindable("dataChange")]
public function get question():Question {
return data as Question;
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id="answerGroup"/>
</fx:Declarations>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label fontWeight="bold" text="{question.text}"/>
<s:DataGroup dataProvider="{question.answers}">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:DataRenderer>
<fx:Script>
<![CDATA[
import spark.components.RadioButtonGroup;
public function get answerGroup():RadioButtonGroup {
return outerDocument.answerGroup;
}
]]>
</fx:Script>
<s:RadioButton groupName="answerGroup" label="{data.text}" value="{data}"/>
</s:DataRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
<s:Label visible="{answerGroup.selectedValue}" text="This is {answerGroup.selectedValue.correct ? 'correct' : 'incorrect'}."/>
</s:DataRenderer>
Question.as
package {
import mx.collections.ArrayCollection;
[Bindable]
[DefaultProperty("answers")]
public class Question {
public var text:String;
public var answers:ArrayCollection;
}
}
Answer.as
package {
[Bindable]
public class Answer {
public var text:String;
public var correct:Boolean = false;
}
}
I have a spark datagrid with a custom itemrenderer which contains two buttons. I would like to allow the user to access those two buttons when tabbing through the controls in my page, is that possible?
I have put together a simple example application illustrating what I have attempted so far (just try tabbing through the buttons to see what i mean). Do i have to use a GridItemEditor?
Thanks in advance
Gav
<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDGStyledIR.mxml -->
<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"
width="450" height="450">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
// Data includes URL to album cover.
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection([
{Artist:'Pavement', Album:'Slanted and Enchanted',
Price:11.99, Cover:'../assets/slanted.jpg', tabIndex:2},
{Artist:'Pavement', Album:'Slanted and Enchanted',
Price:11.99, Cover:'../assets/slanted.jpg', tabIndex:3},
{Artist:'Pavement', Album:'Slanted and Enchanted',
Price:11.99, Cover:'../assets/slanted.jpg', tabIndex:4},
{Artist:'Pavement', Album:'Brighten the Corners',
Price:11.99, Cover:'../assets/brighten.jpg', tabIndex:5}
]);
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:DataGrid id="myGrid"
hasFocusableChildren="true" tabEnabled="true" tabChildren="true" focusEnabled="true" tabFocusEnabled="true"
dataProvider="{initDG}" selectionMode="singleCell" tabIndex="1"
variableRowHeight="true">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="Artist" rendererIsEditable="true">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer hasFocusableChildren="true" tabEnabled="true" tabChildren="true" focusEnabled="true" tabFocusEnabled="true"
selectAll="meBtn.setFocus()">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</fx:Script>
<s:Button id="meBtn" label="{this.data.tabIndex} Click me" click="Alert.show('clicked','info')" tabIndex="{this.data.tabIndex}"
tabEnabled="true" tabChildren="true" focusEnabled="true" tabFocusEnabled="true"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="Album"/>
<s:GridColumn dataField="Price"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
<s:Button label="Some other button" tabIndex="100" click="Alert.show('this button below the grid is tab enabled fine','note')" />
</s:Application>
datagrid
editable = true
On the columns of you buttons you set
rendererIsEditable="true"
non editable columns
editable = false
Tabbing should work with these settings when you use a custom GridItemRender