hi guys i have xml database how to call phone and display in label ?
i already have label Field but i want to call phone in side the Field
how ?
this my cod
<s:List id="lst" x="73" y="197" width="295" height="214" change="lst_changeHandler(event)"
dataProvider="{arr}" fontSize="30" fontWeight="bold"
textAlign="right">
<s:labelField>RestaurantsKuwaiti</s:labelField>
http://www.mlfnt.com/lives6/13510357301.png
First of all, your xml is not like a list:
<RestaurantsKuwaiti>
...
<RestaurantsOther>
...
I think it should be like:
<Restaurants>
<name>Kuwaiti</name>
</Restaurants>
<Restaurants>
<name>Syria</name>
</Restaurants>
...
use labelFunction can solve your problem:
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
private var xml:XML =
<dataroot>
<alldata>
<ID>1</ID>
<Main>2</Main>
<RestaurantsKuwaiti>
<phone>55555555</phone>
</RestaurantsKuwaiti>
</alldata>
</dataroot>;
[Bindable]
private var dataList:XMLListCollection = new XMLListCollection(xml.alldata);
private function labelFunc(item:Object):String {
return item.RestaurantsKuwaiti.phone;
}
]]>
</fx:Script>
<s:List dataProvider="{dataList}" labelFunction="labelFunc"/>
as I mentioned above, the "dataList" has only one item: "alldata".
Related
I need to make a label in flex as if you click on it you can open a specific URL let us say Google.
Any ideas?
regards.
Here is sample:
<fx:Script>
<![CDATA[
import flash.net.navigateToURL;
protected function clickHandler(event:MouseEvent):void
{
var urlReq:URLRequest = new URLRequest("http://www.google.com");
navigateToURL(urlReq, "_self");
}
]]>
</fx:Script>
<s:Label x="110" y="149" text="Open Google" click="clickHandler(event)"/>
I have encountered somthing a little strange in flex, possibly somthing im doing wrong
but im not sure.
In two cases which i have noticed, when there is only 1 item in a s:List or s:DropDownList
for some reason when using list.selectedItem it appears as null. Using requireSelection="true"
i know this isnt the case.
Has anyone else seen anything similar? or am i doing it completly wrong?
Thanks
Jon
Edit: In the code bellow it happens when clicking the edit document, which calls the open edit method
------------ Added Code ---------------------------
I have removed small portions to make it more readable
<s:TitleWindow width="486" height="300" title="Document Store"
xmlns:tmsbean="services.tmsbean.*"
close="close()">
<fx:Declarations>
<s:CallResponder id="getAllAttachedDocumentsResult"/>
<tmsbean:TMSBean id="tMSBean" showBusyCursor="true"/>
<s:CallResponder id="removeDocumentLinkResult" result="getDocumentList()"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
private static var documentStoreView:DocumentStoreView = null;
[Bindable]
private var attachedToMenomic:String;
public static function getInstance():DocumentStoreView
{
if(documentStoreView == null){
documentStoreView = new DocumentStoreView();
DocumentForm.getInstance().addEventListener(DocumentFormEvent.DOCUMENT_ATTACHED,documentStoreView.getDocumentList);
}
return documentStoreView;
}
public function open(menomic:String,parent:DisplayObject):void
{
attachedToMenomic = menomic;
getDocumentList();
PopUpManager.addPopUp(documentStoreView,parent,true);
PopUpManager.centerPopUp(documentStoreView);
y = y - 80;
}
public function close():void
{
PopUpManager.removePopUp(documentStoreView);
}
private function getDocumentList(evt:DocumentFormEvent = null):void
{
getAllAttachedDocumentsResult.token = tMSBean.getAllAttachedDocuments(attachedToMenomic);
}
private function openEdit():void{
var editDsi:DocumentStoreItem = documentList.selectedItem as DocumentStoreItem;
Alert.show(editDsi.documentName);
DocumentForm.getInstance().openInEditMode(editDsi,this);
}
]]>
</fx:Script>
<s:VGroup left="10" top="10" right="10" bottom="10">
<s:List width="100%" height="100%" id="documentList" itemRenderer="com.documentStore.DocumentItemListRenderer"
dataProvider="{Utilitys.toArrayCollection(getAllAttachedDocumentsResult.token.result)}" />
<s:HGroup horizontalAlign="right" width="100%">
<s:Button label="Attach Document" click="{DocumentForm.getInstance().open(attachedToMenomic,this)}"/>
<s:Button label="Edit Document" click="openEdit()"/>
</s:HGroup>
</s:VGroup>
</s:TitleWindow>
By default Spark's DropDownList displays a prompt if selectedIndex is -1, which will be the case if requireSelection is false and you have not otherwise set the list to a specific item. This would correspond with selectedItem being null.
The Spark ComboBox does something similar but it has a TextInput as you can type into it.
My data grid is displaying stale data, rather than the real time data available in it's data provider (array collection). I've tried refeshing the data in the collection, but that has no effect. Below is my code, does anyone see what could be the problem?
<mx:Accordion/>
<fx:Script>
<![CDATA[
private var _gridData:ArrayCollecton = new ArrayCollection;
[Bindable] public function get gridData():ArrayCollection { return _gridData; }
public function set gridData(value:ArrayCollection):void { _gridData = value; }
public function loadGridData():void {
// imgCollection is the data returned from the server
var tempCollection:ArrayCollection = new ArrayCollection();
for (var i:int = 0; i < imgCollection.length; i++)
{
var img:Object = new Object();
img.id = imgCollection.getItemAt(i).imgId;
img.url = "http://..." + imgCollection.getItemAt(i).imgId;
img.caption = (imgCollection.getItemAt(i).imgCaption == null) ? "": imgCollection.getItemAt(i).imgCaption;
img.group = images;
tempCollection.addItem(new ObjectProxy(img));
}
gridData = tempCollection;
<!-- Use http service to get data and save it in grid data array collection, this is run on accordion create completion and whenever data is added or removed from the array collection -->
}
]]>
</fx:Script>
<!-- NOTE: There is a cyclic binding between the data grid and the gridData array collection -->
<fx:Binding source="dg.dataProvider as ArrayCollection" destination="gridData"/>
...
...
<s:NavigatorContent>
<s:Panel>
<mx:DataGrid dataProvider="{gridData}" ...>
...
...
</mx:DataGrid>
</s:Panel>
</s:NavigatorContent>
UPDATE:
I tried the suggestions mentioned below, however, they do not resolve the issue. The data grid has custom item renderers, could that be the problem?
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">
<mx:Image id="image" source="{data.url}" height="65" maintainAspectRatio="true" scaleContent="true"/>
</s:MXDataGridItemRenderer>
You don't need "cyclical" binding, because in your datagrid you do not change the collection, but you change its items. The collection stays intact. the dataprovider of the DataGrid and your _gridData point to the same collection.
If I'm not mistaking you should have [Bindable] on the setter as well because the datagrid has not other way of knowing when your data has changed.
Regards, Alin
Looks to me like you are overthinking this. Since you aren't doing anything in your getter/setters you could get rid of them and just mark your ArrayCollection as Bindable, then set it as the dataProvider for the DataGrid and be done:
<fx:Script>
<![CDATA[
[Bindable]
public var gridData:ArrayCollecton = new ArrayCollection;
public function loadGridData():void {
// Whenever you change the gridData, the DataGrid will update appropriately.
}
]]>
</fx:Script>
<mx:DataGrid dataProvider="{gridData}"></mx:DataGrid>
The problem with your existing code is likely that you are not dispatching a change event in your setter. Getting rid of the getter/setters allows the ArrayCollection to handle dispatching that event for you. Hope that helps.
EDIT: Based on the updated question, you may want to try changing your renderer to look like this, which would help if your custom data object is not bindable.
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">
<fx:Script>
<![CDATA[
override public function set data(value:Object):void {
super.data = value;
image.source = value.url;
}
]]>
</fx:Script>
<mx:Image id="image" source="{data.url}" height="65" maintainAspectRatio="true" scaleContent="true"/>
I'm attempting to add an image to a datagrid item render dynamically in flex.
Here is my DataGrid code
The value of "str" in the getImagePath function is correct.
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
doubleClickEnabled="true">
<mx:Script>
<![CDATA[
private function userLabelFunction(item:Object, column:DataGridColumn):String
{
return item.user.username;
}
private function getImagePath(item:Object, column:DataGridColumn):String
{
var str:String=item.track["artwork-url"]
if (str == "")
{
str=item.user["avatar-url"];
}
return str;
}
]]>
</mx:Script>
<mx:columns>
<mx:DataGridColumn dataField="artwork-url"
headerText="Art"
itemRenderer="components.content.contents.datagrids.ImageRenderer"
labelFunction="getImagePath"/>
<mx:DataGridColumn dataField="title"
headerText="Title"
minWidth="100"/>
<mx:DataGridColumn dataField="user"
headerText="User"
labelFunction="userLabelFunction"/>
<mx:DataGridColumn dataField="bpm"
headerText="BPM"/>
</mx:columns>
</mx:DataGrid>
I cant manage to get that image url value into my item renderer
I've tried overriding the set data property like so
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
height="60"
verticalAlign="top"
creationComplete="init()">
<mx:Script>
<![CDATA[
import components.content.contents.containers.ContentContainerSoundCloud;
import mx.core.Application;
import mx.controls.dataGridClasses.DataGridColumn;
import com.adobe.viewsource.ViewSource;
[Bindable]
public var imgPath:String;
private function init():void
{
}
override public function set data(value:Object):void
{
super.data = value.track["artwork-url"];
imgPath =super.data.valueOf()
trace(imgPath)
}
]]>
</mx:Script>
<mx:Image source="{imgPath}" id="rowimage"/>
</mx:HBox>
But in doing so the trace output looks like so
<artwork-url>
<mx_internal_uid>7C98E149-1984-584C-7600-AD8940BF2A9C</mx_internal_uid>
</artwork-url>
I was expecting the "value" property in the set data to recieve the string I sent it from the get imagePathFunction but it fact it returns my entire XMLList.
What am I doing wrong?
Based on your trace output it looks like you are retrieving the wrong value from your dataProvider to set as the source. Without seeing your actual data, it's hard to know what the exact issue may be.
That said, I would re-work your itemRenderer a bit. First, you don't need to put a single image in an HBox. Just use an Image. Also, you should not need to specify the height in the Renderer, the DataGrid should take care of such positioning.
I also removed the creationComplete listener, since no code was in it. And instead of using binding, I just set the soruce property on the component in the data set method. I also set the super.data to the value, not a processed value; and I performed the processing when setting the value's source. The updated code is like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml"
>
<mx:Script>
<![CDATA[
import components.content.contents.containers.ContentContainerSoundCloud;
import mx.core.Application;
import mx.controls.dataGridClasses.DataGridColumn;
import com.adobe.viewsource.ViewSource;
[Bindable]
public var imgPath:String;
override public function set data(value:Object):void
{
super.data = value;
this.source =value.track["artwork-url"];
trace(imgPath)
}
]]>
</mx:Script>
</mx:Image>
My preferred method in itemRenderers is to listen to the dataChange event, however that's just personal preference. There is nothing wrong w/ overriding the data set method.
I am using an component, and currently have a dataProvider working that is an ArrayCollection (have a separate question about how to make this an XML file... but I digress).
Variable declaration looks like this:
[Bindable]
private var _dpImageList : ArrayCollection = new ArrayCollection([
{"location" : "path/to/image1.jpg"},
{"location" : "path/to/image2.jpg"},
{"location" : "path/to/image3.jpg"}
]);
I then refer to like this:
<s:List
id="lstImages"
width="100%"
dataProvider="{_dpImageList}"
itemRenderer="path.to.render.ImageRenderer"
skinClass="path.to.skins.ListSkin"
>
<s:layout>
<s:HorizontalLayout gap="2" />
</s:layout>
</s:List>
Currently, it would appear that each item is processed asynchronously.
However, I want them to be processed synchronously.
Reason: I am displaying a list of images, and I want the leftmost one rendered first, followed by the one to its right, and so on.
Edit:
I just found this answer.
Do you think that could be the same issue?
Instead of declaring the variable and using it as the binding source, declare two collections. Then, onCreationComplete call loadNext() which shifts an object out of the second array and pushes it into the first. When the item has been rendered (custom event dispatched by itemRenderer and caught) call loadNext() again until such time as your source array is empty and your bound dataProvider has all the images.
I can write it in code if this doesn't make any sense. ;)
<?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/halo" minWidth="1024" minHeight="768" creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var _source : ArrayCollection = new ArrayCollection([
{"location" : "path/to/image1.jpg"},
{"location" : "path/to/image2.jpg"},
{"location" : "path/to/image3.jpg"}
]);
[Bindable] private var dataProvider:ArrayCollection;
protected function init():void
{
this.lstImages.addEventListener( "imageLoaded", handleImageLoaded);
loadImage()
}
protected function loadImage():void
{
if(this._source.length<=0)
return;
var image:Object = this._source.getItemAt(0);
dataProvider.addItem(image);
this._source.removeItemAt(0);
}
protected function handleImageLoaded(event:Event):void
{
loadImage()
}
]]>
</fx:Script>
<s:List
id="lstImages"
width="100%"
dataProvider="{_dpImageList}"
itemRenderer="path.to.render.ImageRenderer"
skinClass="path.to.skins.ListSkin"
>
<s:layout>
<s:HorizontalLayout gap="2" />
</s:layout>
</s:List>
</s:Application>
Your item renderer's image's complete handle will dispatch:
protected function handleImageLoaded(event:Event):void
{
owner.dispatch(new Event("imageLoaded"));
}
And that should load your images in a clean sequence.