I have this code. I need change variable DiagnosIsWritten=true, when input_diagnos (TextInput) is written something. Can you help me to say all ways, how i can do it.
<fx:Script>
<![CDATA[
public var DiagnosIsWritten:Boolean;
</fx:Script>
<s:DataGrid id="examsDG" >
<s:columns>
<s:ArrayList>
<s:GridColumn editable="true" headerText=" width="156"
itemRenderer="modules.PatientCardModule.moduls.ToothModule.renderers.examsDG_BiteRenderer"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
examsDG_BiteRenderer.mxml :
<s:TextInput id="input_diagnos" text="test" width="100%" height="100%" />
Add a change listener:
either inline:
<s:TextInput id="input_diagnos" text="test" width="100%" height="100%" change="onChange(event)" />
or in as3:
input_diagnos.addEventListener(spark.events.TextOperationEvent.CHANGE, onChange);
protected function onChange(event:TextOperationEvent):void {
DiagnosIsWritten = true;
}
Related
I have an itemRenderer inside a dataGrid, cant access to a method
<s:Module>
<fx:Script>
<![CDATA[
public function mysort():void{
}
]]>
...<s:panel>...
<s:GridColumn headerText="Service Type" dataField="ServiceType" width="130" labelFunction="labelServicePriority">
<s:headerRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Button label="sort" click="parentDocument.mysort()"/>
</s:GridItemRenderer>
</fx:Component>
</s:headerRenderer>
</s:GridColumn>
...</s:panel>...
</s:Module>
the module is within an application with a iframe
Here is the solution for your problem:
I am using following way to call the method. Hope it will help you:
<s:DataGrid id="gridTest" width="90%" height="100%" dataProvider="{tempList}" horizontalScrollPolicy="auto" >
<s:columns>
<mx:ArrayList>
<mx:source>
<s:GridColumn>
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer width="100%" height="100%">
<s:Image source="imageIcon" horizontalCenter="0" verticalCenter="0" buttonMode="true"
click="{outerDocument.onAddIconClick(data)}"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</mx:source>
</mx:ArrayList>
</s:columns>
</s:DataGrid>
Here is the function:
public function onAddIconClick(item:Object):void
{
//
}
I'm beginner in Flex . my issue when to add button to list , i put the button in the itemrender but the action of navigator.pushView(views.Listde,ProblemsList.selectedItem);
make an error "Acess of undefined property navigator .
Code :
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import views.ButList;
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
navigator.pushView(views.Listde,ProblemsList.selectedItem);
}
]]>
</fx:Script>
<s:Group width="100%" height="100%" styleName="PCS.css">
<s:HGroup width="100%" height="100%" gap="2" verticalAlign="middle" horizontalAlign="center" paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5">
<s:HGroup width="30%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Label text="{data._AddedDate}" textAlign="left" verticalAlign="bottom" width="100%" height="100%"/>
</s:HGroup>
<s:VGroup width="50%" height="100%" verticalAlign="middle" horizontalAlign="right">
<s:BitmapImage source="images/{data.image}"/>
<s:TextArea editable="false" text="{data.description}"/>
<s:Label text="{data.price}"/>
<s:Button label="s" click="button1_clickHandler(event)"/>
</s:VGroup>
</s:HGroup>
</s:Group>
if any solution to resolve it by list or any component instead of list then i want button to navigate to view with the selected item and the change of the list to navigate to another view with the selected item also , then the change of list work success but the button action cannot defined with the navigator.
Thanks in advance for any help .
Create a custom event with data property and dispatch the event from item renderer or dispatch the list change event from the item renderer when clicking the button.
package myEvents
{
import flash.events.Event;
public class CustomEvent extends Event
{
public function CustomEvent(type:String,
data:Object=null) {
// Call the constructor of the superclass.
super(type);
// Set the new property.
this.data = data;
}
// Define static constant.
public static const MY_BUTTON_CLICKED:String = "myButtonClicked";
// Define a public variable to hold the state of the enable property.
public var data:Object;
// Override the inherited clone() method.
override public function clone():Event {
return new CustomEvent(type, data);
}
}
}
MyItemRenderer.mxml
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import views.ButList;
protected function button1_clickHandler(event:MouseEvent):void
{
// dispatch a custom
(this.owner as List).dispatchEvent(new CustomEvent(CustomEvent.MY_BUTTON_CLICKED, data));
//navigator.pushView(views.Listde,ProblemsList.selectedItem);
}
]]>
</fx:Script>
<s:Group width="100%" height="100%" styleName="PCS.css">
<s:HGroup width="100%" height="100%" gap="2" verticalAlign="middle" horizontalAlign="center" paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5">
<s:HGroup width="30%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Label text="{data._AddedDate}" textAlign="left" verticalAlign="bottom" width="100%" height="100%"/>
</s:HGroup>
<s:VGroup width="50%" height="100%" verticalAlign="middle" horizontalAlign="right">
<s:BitmapImage source="images/{data.image}"/>
<s:TextArea editable="false" text="{data.description}"/>
<s:Label text="{data.price}"/>
<s:Button label="s" click="button1_clickHandler(event)"/>
</s:VGroup>
</s:HGroup>
</s:Group>
Your view class
<?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="MY View">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
private function onListCreationComplete_Handler():void
{
myList.addEventListener(CustomEvent.MY_BUTTON_CLICKED, onItemRendererButtonClicked);
}
protected function onItemRendererButtonClicked(event:CustomEvent):void {
var data:Object = event.data;
navigator.pushView(views.Listde,data);//myList.selectedItem
}
]]>
</fx:Script>
<s:Label text="Select an view"/>
<s:List id="myList"
width="100%" height="100%"
labelField="firstName" itemRenderer="MyItemRenderer"
change="myList_changeHandler(event)" creationComplete="onListCreationComplete_Handler()">
<s:ArrayCollection>
<fx:Object description="Fruits" image="assets/icons/1.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="New Item" image="assets/icons/2.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="Doll" image="assets/icons/3.png" _AddedDate="15/05/14" price="154"/>
</s:ArrayCollection>
</s:List>
</s:View>
I hope this might help u. There are tons of examples out there for list and item renderer for mobile.
Based on your ItemRenderer, you can simply listen to the IndexChangeEvent in your View. In this case, you don't need a separate button at all - the whole ItemRenderer can act as the button.
<?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="MY View">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
import views.ButList;
protected function myList_changeHandler(event:IndexChangeEvent):void {
navigator.pushView(views.Listde,myList.selectedItem);
}
]]>
</fx:Script>
<s:Label text="Select an view"/>
<s:List id="myList"
width="100%" height="100%"
labelField="firstName" itemRenderer="MyItemRenderer"
change="myList_changeHandler(event)">
<s:ArrayCollection>
<fx:Object description="Fruits" image="assets/icons/1.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="New Item" image="assets/icons/2.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="Doll" image="assets/icons/3.png" _AddedDate="15/05/14" price="154"/>
</s:ArrayCollection>
</s:List>
</s:View>
I use a fileReference.browse() to select an image file from the harddrive.
How can I load the selected image on DataGrid column?
Thanks
Edit:
My coding is here:
<?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;
public var loadFile:FileReference;
[Bindable]
private var arrayCollection : ArrayCollection = new ArrayCollection ();
private function onBrowseButtonClicked(event : MouseEvent) : void
{
loadFile = new FileReference();
loadFile.addEventListener(Event.SELECT, selectHandler);
var fileFilter:FileFilter = new FileFilter("Images: (*.jpeg, *.jpg, *.gif, *.png)", "*.jpeg; *.jpg; *.gif; *.png");
loadFile.browse([fileFilter]);
}
private function selectHandler(event:Event):void
{
loadFile.addEventListener(Event.COMPLETE, loadCompleteHandler);
loadFile.load();
employeeImageName.text =event.target.name;
}
private var data:ByteArray;
private function loadCompleteHandler(event:Event):void
{
var fileReference:FileReference=event.target as FileReference;
data=fileReference["data"];
employeeImage.source = data;
}
private function storeInputs(event:MouseEvent) : void
{
arrayCollection.addItem({
name : employeeName.text,
id : employeeID.text,
email : employeeEmail.text,
gender : genderOption.selectedValue,
address : employeeAddress.text,
img : data
});
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id="genderOption"/>
</fx:Declarations>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<mx:HDividedBox width="100%" height="100%">
<s:Panel id="mainPanel" title="Employee Details" height="100%" width="50%">
<s:Form id="mainForm" height="100%" width="100%" left="10%" right="10%" top="10%">
<s:FormItem id="nameLabel" label="Employee Name">
<s:TextInput id="employeeName" />
</s:FormItem>
<s:FormItem id="idLabel" label="Embloyee ID">
<s:TextInput id="employeeID" maxChars="6"/>
</s:FormItem>
<s:FormItem id="emailLabel" label="Email">
<s:TextInput id="employeeEmail" />
</s:FormItem>
<s:FormItem id="genderLabel" label="Gender">
<s:HGroup>
<s:RadioButton group="{genderOption}" label="Male" id="male" />
<s:RadioButton group="{genderOption}" label="Female" id="female"/>
</s:HGroup>
</s:FormItem>
<s:FormItem id="addressLabel" label="Address">
<s:TextArea id="employeeAddress"/>
</s:FormItem>
<s:FormItem id="imageLabel" label="Image">
<mx:HBox>
<s:TextInput id="employeeImageName"/>
<s:Image id="employeeImage" height="100" width="100"/>
<s:Button id="imageButton" label="Browse" click="onBrowseButtonClicked(event)"/>
</mx:HBox>
</s:FormItem>
<s:FormItem>
<s:layout>
<s:HorizontalLayout gap="10"/>
</s:layout>
<s:Button id="submitButton" label="Submit" click="storeInputs(event)"/>
</s:FormItem>
</s:Form>
</s:Panel>
<s:DataGrid width="100%" height="100%" dataProvider="{arrayCollection}" id="employeeGrid" variableRowHeight="true">
<s:columns>
<s:ArrayList>
<s:GridColumn headerText="Name" dataField="name" />
<s:GridColumn headerText="ID" dataField="id"/>
<s:GridColumn headerText="Email" dataField="email"/>
<s:GridColumn headerText="Gender" dataField="gender" />
<s:GridColumn headerText="Address" dataField="address" itemEditor="mx.controls.TextArea"/>
<s:GridColumn headerText="Employee" dataField="img">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<mx:HBox>
<s:Image id="image" source="outerDocument.data" />
</mx:HBox>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</mx:HDividedBox>
Here, all the controls are worked well in form. I could get the image and i could load the selected image on the image control. But I couldn't display the image in the DataGrid column when the submit button was clicked. This is my problem.
It can be done using flex custom itemrenderer. I've found a tutorial for you here . Gives a detailed explanation.
I did It
arrayCollection.addItem({
name : employeeName.text,
id : employeeID.text,
email : employeeEmail.text,
gender : genderOption.selectedValue,
qual : getCheckBoxexValues(),
address : employeeAddress.text,
imageData: loadFile.data
});
In grid
<s:GridColumn headerText="Employee" id="imageColumn" dataField="imageData" >
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Image id="image" width="120" height="80" source="{data.imageData}" visible="true" />
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
Thank you
I am stuck at a point where I need to select all check boxes of the Item Renderer.
I have a Select All button on whose click my all check boxes needs to get selected. Is it possible to do in Flex item renderer.
Below is my code for item renderer:
rowCount="2" columnCount="5" dragEnabled="false" dragMoveEnabled="false" height="100%" width="100%" verticalScrollPolicy="on" verticalScrollPosition="0" selectable="false">
<mx:itemRenderer>
<fx:Component>
<!--<mx:VBox height="100%" width="100%" verticalGap="0">-->
<mx:VBox width="175" height="200" verticalGap="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" >
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.List;
import mx.core.FlexGlobals;
import mx.utils.ObjectUtil;
[Bindable]
public var productData:Array = new Array();
import mx.collections.ArrayCollection;
import mx.controls.listClasses.BaseListData;
private var _listData:BaseListData;
private var _tileList:List;
[Bindable("dataChange")]
public function get listData():BaseListData
{
return _listData;
}
public function set listData(value:BaseListData):void
{
_listData = value;
_tileList = value.owner as List;
}
override public function set data(value:Object):void
{
super.data = value;
checkFileToDownload.selected = value["isSelected"];
}
private function onChange(event:Event):void
{
data["isSelected"] = checkFileToDownload.selected;
FlexGlobals.topLevelApplication.checkFileToDownload(event);
}
/* protected function checkSelectedFile(event:MouseEvent):void
{
// TODO Auto-generated method stub
checkFileToDownload.selected = true;
FlexGlobals.topLevelApplication.generateDownloadFileArray("push",checkFileToDownload.name,checkFileToDownload.automationName);
outerDocument.downloadButtonStatus(event)
} */
]]>
</fx:Script>
<mx:HBox id="currentTileElement">
<s:CheckBox id="checkFileToDownload" name="{data.itemUrl}" automationName="{data.contentId}"
change="{onChange(event)}"
skinClass="com.skinClass.CustomCheckBoxSkin" click="{outerDocument.downloadButtonStatus(event)}"/>
<mx:TextArea wordWrap="true" fontWeight="bold" text="{data.title}" borderStyle="none" verticalScrollPolicy="off"
horizontalScrollPolicy="off" textAlign="left" editable="false"/>
</mx:HBox>
<mx:HBox>
<mx:Image source="{'/assets/'+data.contentId.substring(1, 2)+'.png'}" maintainAspectRatio="true"/>
<mx:Image id="tileListImageSource" width="150" height="75" maintainAspectRatio="false"
source="{data.localActualPath}"/>
</mx:HBox>
<!-- <mx:HBox horizontalGap="0">
<mx:Repeater id="itemCategory" dataProvider="{data.category.split('|')}">
<mx:Text textAlign="left" text="{itemCategory.currentItem}" color="#FF9900" fontWeight="bold" fontSize="9" />
</mx:Repeater>
</mx:HBox> -->
<mx:VBox horizontalGap="0" width="100%" verticalGap="0" paddingLeft="25">
<s:Spacer height="2"/>
<mx:TextArea text="{data.author.split('|')}" color="#FF9900" fontWeight="bold" chromeColor="white" height="40" editable="false" wordWrap="true" borderStyle="none" verticalScrollPolicy="on" horizontalScrollPolicy="off" textAlign="left"/>
<!-- <mx:Repeater id="authorCategory" dataProvider="{data.author.split('|')}">
<mx:Text textAlign="left" fontSize="11" fontSharpness="400" fontWeight="bold" color="#FF9900" text="{authorCategory.currentItem}"/>
</mx:Repeater> -->
<s:Spacer height="2"/>
<mx:Text fontSize="11" text="{data.publishedDate}"/>
<s:Spacer height="2"/>
<mx:HBox horizontalGap="0" verticalGap="0">
<mx:Text fontWeight="bold" fontSize="10" text="File Size: " paddingRight="0"/><mx:Text fontSize="10" color="red" paddingLeft="0" fontWeight="bold" text="{data.itemSize}MB"/>
</mx:HBox>
</mx:VBox>
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
</mx:TileList>
Any help is appreciated.
Thanks,
Ankit Tanna.
You can affect all the checkboxes in your list by changing a property in the dataprovider;s objects and binding to that. Something like this in your click handler:
public function selectAllBtnClickHandler(e:MouseEvent):void {
if (selectAllBtn.selected) {
for each (var value:Object in checkboxList.dataProvider) {
value["isSelected"] = true;
}
}
}
Then change your checkbox declaration as follows:
<s:CheckBox id="checkFileToDownload" name="{data.itemUrl}" automationName="{data.contentId}"
change="{onChange(event)}" selected="{data.isSelected}"
skinClass="com.skinClass.CustomCheckBoxSkin" click="{outerDocument.downloadButtonStatus(event)}"/>
I want to clear the concept of Brian a bit , so that you can understand it better.
Here is an array collection i am using to populate the grid below
[Bindable] private var testArray:ArrayCollection = new ArrayCollection
(
[
{NAME:'Alan',DEPT:'CIS',ADDRESS:'dhaka',chk:0},
{NAME:'Jordan',DEPT:'CIS',ADDRESS:'dhaka',chk:1},
{NAME:'Simmi',DEPT:'CIS',ADDRESS:'dhaka',chk:0},
{NAME:'Alex',DEPT:'CIS',ADDRESS:'dhaka',chk:1},
{NAME:'Adams',DEPT:'CIS',ADDRESS:'dhaka',chk:0}
]
);
here goes the code of datagrid
<mx:DataGrid height="100%" width="100%" id="dataGrid" dataProvider="{testArray}">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="NAME"/>
<mx:DataGridColumn headerText="Department" dataField="DEPT"/>
<mx:DataGridColumn headerText="Address" dataField="ADDRESS"/>
<mx:DataGridColumn headerText="Address" dataField="chk">
<mx:itemRenderer>
<fx:Component>
<mx:CheckBox selected="{data.chk==1?true:false}"/>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:Button label="Check All" click="button1_clickHandler(event)"/>
Notice the item renderer which is a check box is looking on the value of "chk". You can make all the check boxes "CHECKED" by clicking "Check All" button. here is the "button1_clickHandler" function
protected function button1_clickHandler(event:MouseEvent):void
{
for(var i:int=0;i<testArray.length;i++)
{
testArray[i].chk = 1;
}
testArray.refresh();
}
I create a datagrid with inline itemrenderer.
The renderer is a dropdownlist.
When dropdowlist value change, I'd like to update dataprovider but I didn't found how to do that.
Can you help me?
Thanks
[Bindable] private var DP_PRAT_INIT:ArrayCollection;
<s:DataGrid id="dgTuVous" fontWeight="normal"
dataProvider="{DP_PRAT_INIT}"
width="100%" height="100%"
horizontalScrollPolicy="on"
fontSize="10"
>
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="prInitiales" width="40" headerText="Prat" />
<s:GridColumn width="75" dataField="prTuVous"
headerText="Tu/Vous" editable="true">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
protected function ddlTuVous_changeHandler(event:IndexChangeEvent):void
{
DP_PRAT_INIT[ddlTuVous.selectedIndex].prTuVous=ddlTuVous.selectedItem;
trace ("ddlTuVous.selectedItem" +ddlTuVous.selectedItem) ;
}
]]>
</fx:Script>
<s:DropDownList width="100%" selectedIndex="1" id="ddlTuVous"
change="ddlTuVous_changeHandler(event)">
<s:dataProvider>
<s:ArrayList>
<fx:String>Tu</fx:String>
<fx:String>Vous</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:DropDownList>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
You reference the host control with the outerDocument property... so you would call outerDocument.DP_PRAT_INIT if you want to access that array. BUT, that array is private, so you have to make it public. Or, you can make a public function that you can call on outerDocument but ... yuck.
If I am understanding your code properly, you should access the data property of the GridItemRenderer which is the same as outerDocument.DP_PRAT_INIT[ddlTuVous.selectedIndex] except that it is better because you don't have possible index mismatches...
So, what you really want is:
data.prTuVous = ddlTuVous.selectedItem;