Using a canvas for item renderer

I have an array collection of objects. The class has a
function getDisplayObject which returns a canvas with all of the
components I need in it. I'd like to use that canvas directly as a
custom renderer for a combo box. How can I set the returned canvas
as the item renderer? I've made custom renderers, but not with a
canvas itself. I think I need to call getDisplayObject inside of
the item renderer for each object, but am not sure how. Thanks.
(Below is what I've tried, but this only adds the first one out of
an array of 5... hmm...)

Hi Usernnnnnn,
I know an applciation that's using such kind of tree.
It's published in the Oracle magazine, may 2006. And is named: Build a menu framework. You can dowload the application:
http://oracle.com/technology/oramag/oracle/06-may/o36apex.zip
The menu looks like you have described.
Leo

Similar Messages

Flex Using Tree Control in item renderer(Url Navigate)?

HI All.,
Iam Using flex 3 using tree control in item renderer to click haschildren label to be navigate url is possible ?.
Any one help me.....
Thanks in Advance......

You can do this by writing the item's tag to the ActiveItemTag property, the column number you're intersted in to the ActiveColNum property and reading the Cell String Property.
Mike....
PS: If anybody at NI is listening, that interface really, really, REALLY needs to get rewritten...
Certified Professional Instructor
Certified LabVIEW Architect
LabVIEW Champion
"... after all, He's not a tame lion..."
Be thinking ahead and mark your dance card for NI Week 2015 now: TS 6139 - Object Oriented First Steps
Attachments:
tree_properties.vi ‏9 KB

Using PDF files for items rather than .png.

Hi there
We have been looking into improving iBook production. We have a few books that feature elements that are comprise of a background image with text over the top. As the text isn't in an iPad-friendly font (I.e. not in iOS) and it doesn't have to be searchable. Previously, the items have been produced individually either in Illustrator or Photoshop. The main 'problem' with this is the plethora of file it creates, and the huge amount to time taken to apply style changes across all the separate items, save, re-import into iBA, and re-apply all the iBA-specific attributes.
In an effort to speed up production somewhat, we have been trying to create these items in InDesign, using style sheets etc to give standardised appearance across all the items, and then drag and drop into iBA. The advantage is that all the separate items are in one document, and all style changes can be instantly applied to all items instantaneously, saving time, space, and effort.
It places them as PDFs, and after unzipping the .iba file, the PDFs look fine, with pin-sharp text (as you'd expect, as PDF text would be vector data. Similarly, when you zoom in to the items in iBA, the text is still pin-sharp.
However, once the iBA is previewed on a iPad, the text goes a little blurry. As one of the fonts is a dot-matrix-type font, the effect is noticeable - all the dots blur together into a line.
Does anyone have any idea as to what is happening to the PDF between iBA and the iPad? Does it rasterise it at some point?

Hi Ken
'What leads me think it would?', well the fact that it worked, and looks ok. The iBook previews fine and works fine on the iPad.
We initially came up with the idea when we 'unzipped' an .iba file (you know, changing the .iba extension to .zip, then unarchiving the contents), and found that iBA itself had created .pdf files for the full-screen photos which appeared rotated and shadowed on the iPad page, but were viewed as straight, unshadowed, images. (the rotated version was the iBA-created PDF file, the full-screen was the original .jpg we pulled into iBA). Naturally, we were surprised. So we started mucking about, and found that drag/drop from ID worked, and looked OK.
As an update to my original post, it appears that the difference in quality was due to the fonts used. Once we opened the .PDFs within the .iba file, we converted the text to outlines, resaved the .pdfs, changed the unzipped folder back to an .iba file, and the font now looks great.
BTW, Is it me, or were you being snippy?

SPEL: Can I use java expressions for complex rendering?

Hi
I would like to avoid complexity in extending controllers and VO's in iProcurement by adding some rendering control to my page attributes such that the value of "rendered" is a more complex SPEL function.
E.g.:
normally I could use:
rendered="${oa.VO.isFieldRendered}"
where the above attribute exists in the VO.
However, I would like not to have to create a new Attribute, but use the following:
rendered="${oa.VO.Field.equals("Y")}"
Does anyone know if this kind of thing is possible?
Cheers
Chris

Hey Jon! Will e-mail ya later!!
Tapash: Am trying to use an existing VO field to determine the rendering of a page item. The current field has a Y/N value, not boolean which the render SPEL generally uses.
The only way I know how to do this is to extend the VO and add a new calculated boolean field. I can do this, but was hoping that SPEL might provide an alternative..
Thanks
Chris

Question about Using States in DataGrid Item Renderer

I have a DataGridColumn with an ItemRenderer that extends the
Box component. The default display is a Text component. When the
user clicks on the text component, I change the State to add a
PopUpMenuButton child, and make the Text component invisible. This
works fine. However, I only want to allow one PopUpMenuButton to be
visible in the DataGrid at a time (similar to how an itemEditor
works). I don't want to use an itemEditor, because I've run into
too many problems trying to get that to work in this instance.
I am implementing IDropInListItemRenderer in my itemRenderer,
in order to access the listData property, which will give me the
owner (DataGrid), but I don't know how to "turn off" the "editing"
state in other itemRenderers in the DataGrid.
How can I accomplish this?
Thanks.

Here we go. I simply added an Listener for Change Events in
the listData.owner - if it is triggered, i update the currentState
to null. Works like a charm. Much easier than trying to access the
itemRenderers in the column and resetting them all. Better on
performance too.

When to use Drop In Item renderer and InLine Item Renderers ??

Hi ,
I am getting confused in where to use Inline ItemRenderer and DropIn Item Renderer .
What i feel is that DROP in Item Renderer are easy to use , and those can satisfy any requirements .
What i read from tutorilas that we cant use Drop In because they say , The only drawback to using drop in is that them is that you cannot configure them
Please help me .

Hi Kiran,
Here is the detailed explanation you needed:
You can also refer the link below:
http://blog.flexdevelopers.com/2009/02/flex-basics-item-renderers.html
Drop-In Item Renderers
Drop-In Item Renderers are generic in nature and don't rely on specific data fields to render data. This allows them to be used with a wide range of data sets, hence, the term “drop-in”. Drop-In Item Renderers can be “dropped-in” to any list-based control regardless of the dataprovider’s data properties.
In our previous example, the employee photo property requires use of a custom Item Renderer to render properly in the UI. In this scenario the Image component satisfies our rendering needs out of the box. Implemented as a Drop-In Item Renderer, the Image component takes any data property regardless of name and uses it as the Image component's source property value. Assuming our employee photo property contains a valid image path, the Image Drop-In Item Renderer will work perfectly and resolve the image path as an image in the UI.

<mx:DataGridColumn dataField="photo"
                   headerText="Employee Photo"
                   itemRenderer="mx.controls.Image"/>
Drop-In Item Renderers are simple and easy to use and satisfy specific use cases nicely. However, they provide no flexibility whatsoever. If your needs are not satisfied by a Drop-In Item Renderer, you must create your own Item Renderer as an inline component or an external component.
Inline Item Renderers
Generally used for simple item rendering requiring minimal customization, inline Item Renderers are defined as a component nested within the MXML of your list-based control.
It is important to note that Item Renderers nested within the itemrender property of a list-based control occupy a different scope than the list-based control. Any attempt to reference members (properties or methods) of the parent component from the nested Item Renderer component will result in a compile-time error. However, references to the members of the parent component can be achieved by utilizing the outerDocument object.
<mx:DataGrid id="myGrid" dataProvider="{gridData}">
   <mx:columns>
      <mx:DataGridColumn headerText="Show Relevance">
         <mx:itemRenderer>
            <mx:Component>
               <mx:Image source="{'assets/images/indicator_' + data.showRelevance + '.png'}"
                         toolTip="{(data.showRelevance == 1) ? 'On' : 'Off'}"
                         click="outerDocument.toggle()" />
            </mx:Component>
         </mx:itemRenderer>
      </mx:DataGridColumn>
   </mx:columns>
</mx:DataGrid>
Remember, rules of encapsulation still apply. Mark all properties or methods public if you want them accessible by your inline Item Renderer. In the previous example, the toggle() method must have a public access modifier to expose itself to the inline Item Renderer.
public function toggle():void
Inline Item Renderers can also be reusable by creating a named component instance outside of the list-based control. This component must have an id property and contain the rendering logic of the Item Renderer. Using data bindings, the component is assigned to the itemrenderer property of one or more data properties of a list-based control.

<mx:Component id="ImageRenderer">
   <mx:VBox width="100%" height="140"
            horizontalAlign="center" verticalAlign="middle">
      <mx:Image source="{'assets/'+data.image}"/>
      <mx:Label text="{data.image}" />
   </mx:VBox>
</mx:Component>

<mx:DataGridColumn headerText="Image"
                   dataField="image" width="150"
                   itemRenderer="{ImageRenderer}"/>
In the previous example, note that the Item Renderer component contains 2 UI controls – Image and Label. When using multiple controls within an Item Renderer, a layout container is required. In this example, a VBox was used.
If this post answers your question or helps, please kindly mark it as such.
Thanks,
Bhasker Chari
Message was edited by: BhaskerChari

Call Icon class in Item Renderer?

I have a class which includes my Icon classes. I want to use it in an item renderer but I couldn't reach it. For your answers, I will be grateful. Here is the related code
<mx:itemRenderer>
     <mx:Component>
          <mx:RadioButton icon="{Icons.ADD_RECORD}" />
     </mx:Component>
</mx:itemRenderer>

Your Icon static Class <yuk> must be imported into the local scope of the itemRenderer.

Setting Focus to datagrid next Item renderer column

Hi
I am having spark datagrid with 7 colum, I am facing problem to set focus for item renderer element.
Below is my datagrid, when user enter some text in text input and press TAB key, I want trade button to be in focus. and from trade column Tab key press I want delete button to be in focus.
I tried giving
tabEnabled="true" tabChildren="false" tabFocusEnabled="true" editable="true" hasFocusableChildren="true"
for datagrid.
Also i tried giving selectedCell
var _focusedCell:Object = new Object();
                                                            _focusedCell.rowIndex = dgTermDepo.selectedIndex;
                                                            _focusedCell.columnIndex = 5;
                                                            dg.selectedCell = _focusedCell as CellPosition;
but nothing is working, I know I am missing some logic or property, Please suggest me on this
Thanks
Sonu

You need to dig down into the event object and look at the
listData.
public function clickMe(e : MouseEvent ):void {
var rowIndex : int = e.currentTarget.listData.rowIndex
var colIndex : int = e.currentTarget.listData.columnIndex
if the listData object is null when you try this you may need
to add the following methods as overrides to the renderer or create
a base renderer and extend all your renderers from the base
renderer so that you always override these methods.
[Bindable("dataChange")]
private var _listData : BaseListData;
override public function get listData() : BaseListData {
return _listData;
override public function set listData( value : BaseListData )
: void {
_listData = value;
}

How to dispatch custom events from an item renderer used for Datagrid Column

Hi,
I am using an Item Renderer for a Data Grid Column and in that mxml, I am dispatching a custom event with data.
But the main mxml which has the DataGrid is not able to resolve the event. How can I solve this?
Thanks

Hi,
This is the constructor for Event.
public function Event(type:String, bubbles:Boolean = false, cancelable:Boolean = false)
When you created your custom event after extending from Event, for the parent container receives the event, the bubbles property must be set to true.
Please check if you have done so. That should solve the problem. Let me know if it doesn't.
Nishad

Using a bitmap object as a item renderer in a datagrid

I have a UIComponent grabbed has a bitmap, and stored in an
array collection.
I want to display a thumbnail in a datagrid, I can make a
itemRenderer for an image with a local or remote file as a source.
But how do I use the bitmap in the array collection in an item
renderer.
Thanks
Dean

Here is an example with a HorizontalList:
<?xml version="1.0" ?>

<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
horizontalAlign="center"
verticalGap="0" borderStyle="none" backgroundColor="white"
>
<mx:Image id="image" width="60" height="60"
source="{data.image}"/>
<mx:Label text="{data.name}" width="120"
textAlign="center"/>
<mx:Label text="${data.price}" fontWeight="bold"/>
</mx:VBox>
<?xml version="1.0"?>

<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml">
<mx:Model id="catalog" source="catalog.xml"/>
<mx:HorizontalList id="myList"
columnWidth="125"
rowHeight="125"
columnCount="4"
dataProvider="{catalog.product}"
itemRenderer="myComponents.Thumbnail"/>
<mx:LinkButton label="Product images courtesy of Lavish"
click="navigateToURL(new URLRequest('
http://www.shoplavish.com'),
'_blank')"/>
</mx:Application>
<?xml version="1.0"?>
<catalog>
<product id="1">
<name>USB Watch</name>
<price>129.99</price>
<image>assets/products/usbwatch.jpg</image>
<thumbnail>assets/products/usbwatch_sm.jpg</thumbnail>
</product>
<product id="2">
<name>007 Digital Camera</name>
<price>99.99</price>
<image>assets/products/007camera.jpg</image>
<thumbnail>assets/products/007camera_sm.jpg</thumbnail>
</product>
<product id="3">
<name>2-Way Radio Watch</name>
<price>49.99</price>
<image>assets/products/radiowatch.jpg</image>
<thumbnail>assets/products/radiowatch_sm.jpg</thumbnail>
</product>
<product id="4">
<name>USB Desk Fan</name>
<price>19.99</price>
<image>assets/products/usbfan.jpg</image>
<thumbnail>assets/products/usbfan_sm.jpg</thumbnail>
</product>
<product id="5">
<name>Caffeinated Soap</name>
<price>19.99</price>
<image>assets/products/soap.jpg</image>
<thumbnail>assets/products/soap_sm.jpg</thumbnail>
</product>
<product id="6">
<name>Desktop Rovers</name>
<price>49.99</price>
<image>assets/products/rover.jpg</image>
<thumbnail>assets/products/rover_sm.jpg</thumbnail>
</product>
</catalog>

Flex SDK 3.4 Tree Item Renderer Root Folder displays Tooltip for Child

I have a Flex Tree that uses a custom item renderer. The item renderer extends Tree Item Renderer and I add my button in commit properties (since the data is dynamic) and I use update displaylist to move it to the right position. I set the button to be visible on rollover and make the icon invisible. On rollout I reverse that logic.
When I have my item renderer add the button, it causes only one problem and it seems to be under certain conditions:
- Single root folder for the tree
- Upon opening the tree, the root folder displays the tool tip for the last child in the tree
Any idea why the tooltip comes up?
public function AssetTreeItemRenderer ()
            super();
            addEventListener(MouseEvent.ROLL_OVER, onItemRollover);
            addEventListener(MouseEvent.ROLL_OUT, onItemRollout);
            addEventListener(ToolTipEvent.TOOL_TIP_SHOWN, toolTipShown);
            addEventListener(ToolTipEvent.TOOL_TIP_CREATE, onCreateToolTip);
        // OVERRIDEN FUNCTIONS
         * override createChildren
        override protected function commitProperties():void {
            super.commitProperties();
            if(data is IAsset) {
                if(playBtn === null) {
                    playBtn = new Button();
                    playBtn.styleName = "previewPlayButton";
                    playBtn.toolTip = "Play";
                    playBtn.width = icon.width + 2;
                    playBtn.height = icon.height + 2;
                    playBtn.visible = false;
                    playBtn.addEventListener(MouseEvent.CLICK, onPlayBtnClick);
                    addChild(playBtn);
            } else {
                if(playBtn !== null) {
                    removeChild(playBtn);
                    playBtn = null;
         * override updateDisplayList
         * @param Number unscaledWidth
         * @param Number unscaledHeight
        override protected function updateDisplayList(unscaledWidth:Number,
                                                      unscaledHeight:Number):void
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            //Move our play button to the correct place
            if(super.data && playBtn !== null)
                playBtn.x = icon.x;
                playBtn.y = icon.y;

You are not clearing tooltip if data is not IAsset

Image in item renderer issue for List Components

Hello,
I have an issue when I use an item renderer with an image in
it. This happens when I do this with a List or TileList component
that has enough items to create a scroll bar. What happens is the
images load fine, then I scroll down and the other items and their
images start appearing, but then the first and last images start
loading the wrong image. I'll scroll back up and the first item now
has a different image, and when I scroll back down, the last images
changes too.
Has anyone had this problem with image itemrenderers in List
components?
Thanks for any help.
Brade

The creationComplete event is called ONCE and that's it. But
each time an itemRenderer is recycled it will have its data
property reset with new a new record from the dataProvider. Thus
overriding the set data function lets you inspect the data and do
what you want with it.
Data binding in MXML <mx:Image source="{data.image}" />
is set up by the Flex compiler. When the data property is reset it
will trigger the data binding notifications. The Flex
compiler-generated code will intercept that and update the Image
source property.
If you use MXML, then use data binding. If you write your
itemRenderer in ActionScript, override the set data
function.

Item renderer for specific rows

I need to have a checkbox item renderer for a spark datagrid column. I am using the following to get an item renderer into column:
var checkBoxRenderer:ClassFactory = new ClassFactory(GridCheckBoxItemRenderer);
column.itemRenderer = checkBoxRenderer;
My question is if I need to show a checkbox for specific rows can I do that without going into GridCheckBoxItemRenderer's source code?
Thanks

Hi Zolotoj ,
Please go through following links :
http://stackoverflow.com/questions/1952940/show-itemrenderer-in-specific-datagrid-rows-oth ers-empty
http://www.flexer.info/2009/01/09/different-rows-in-datagrid-programmatically-added-itemre nderers-classfactory-and-ifactory/
It will provide you some idea to how to proceed further for this problem.
Thanks and Regards,
Vibhuti Gosavi | [email protected] | www.infocepts.com

DataGrid Using an item renderer that spans an entire row

Anyone know how can I do this using DataGrid?

I dont understand how Can I do it. Below I have a source code that I'm working with this case. I have 2 columns and I would like when i click in combobox my item renderer fill all rows.
Look I have this code (Main Application and Renderer):
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo">
     <mx:transitions>
          <mx:Transition fromState="*" toState="*">
               <mx:Resize target="{this}"/>
          </mx:Transition>
     </mx:transitions>
     <mx:states>
          <mx:State name="normal"/>
          <mx:State name="expanded"/>
     </mx:states>
     <fx:Script>
     <![CDATA[
          import mx.collections.ArrayCollection;
          [Bindable]
          public var ac:ArrayCollection;
          private function changeState(event:Event) : void {
               if( event.target.selected )
                    currentState = "expanded";
               else
                    currentState = "normal";
          override public function set data(value:Object) : void {
               super.data = value;
               ac = new ArrayCollection(value.models);
     ]]>
     </fx:Script>
     <mx:CheckBox label="{data.title}" click="changeState(event)"/>
     <mx:List dataProvider="{ac}" y="20" width="100%" includeIn="expanded"/>
</mx:Canvas>
<s:Application
     xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:mx="library://ns.adobe.com/flex/halo"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:ct="*"
     height="100%" width="100%">
     <fx:Script>
     <![CDATA[
          import mx.collections.ArrayCollection;
          [Bindable]
          public var dp:ArrayCollection = new ArrayCollection([
          {title:"Ford", style: 'Modern', models:["Fusion","Taurus","Mustang"]},
               {title:"Volkswagen", style: 'Normal', models:["Passat","Jetta","Beetle", "Golf", "GTI"]},
               {title:"Infiniti", style: 'Modern', models:["FX35","GX35","Q45","M35"]},
               {title:"Audi", style: 'Esport', models:["A3","A4","A6"]}
     ]]>
     </fx:Script>
     <mx:DataGrid dataProvider="{dp}" variableRowHeight="true" height="100%" width="100%">
          <mx:columns>
               <mx:DataGridColumn dataField="title" headerText="title" itemRenderer="DetailItem"/>
               <mx:DataGridColumn dataField="style" headerText="style" />
          </mx:columns>
     </mx:DataGrid>
</s:Application>

Item Renderer for DataGrid

I have a button component as a Item renderer in the column of
the datagrid .
I am not able to access the Itemrenderer component(which I
declared in other mxml file in the datagrid)
This is the data grid where I have the Itemrenderer:
<mx:DataGrid id="dgCondition1"
variableRowHeight="true" width="100%" height="150"
verticalScrollPolicy="auto" editable="true"
dataProvider="{initDataGrid_Create}" >
<mx:columns>
<mx:DataGridColumn headerText="" dataField="conditi"
/>
<mx:DataGridColumn headerText="Condition"
dataField="syntax" width="300" />
<mx:DataGridColumn headerText="1" dataField="value"
width="80" editable="false" itemRenderer="buttonRenderer"/>
<mx:DataGridColumn dataField="value" headerText="2"
itemRenderer="buttonRenderer" />
I created a new mxml component for this button component
.(buttonRenderer.mxml)
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="400" height="300">
<mx:Script source="..TableDataGridBtn.as" />
<mx:Button id="col1" label="" width="75"
click="getDetail(event,col1)" />
</mx:VBox>
The Problem is I am not able to access the buttonRenderer in
the datagrid itemRenderer tag .
It says "Access of Undefined Property buttonRenderer".

"nash99" <[email protected]> wrote in
message
news:g7alc5$nkd$[email protected]..
> So
> Is it that I can Use this ItemRenderer tag in the
Application Tags only
> Is there any other way I can use them in mxml components
because I am
> using
> the same button in 16 datagrid columns , I dont wan't to
make the code
> look
> redundant.
http://www.adobe.com/livedocs/flex/3/html/help.html?content=intro_3.html

Using a canvas for item renderer

Similar Messages

Maybe you are looking for