CODEWITHSUNDEEP
apache-flexcoldfusion
Gahiggidy
Gahiggidy

Reputation: 98

What is the equivalent of <cfoutput> in Flex?

I'm a longtime CF developer that is trying to get into to Flex mobile development with Flash Builder but I've become frustrated in trying to output results from a simple database query.

I'm looking to do something along the lines of this...

<cfoutput query="myQ">
  <s:Button label="#title#" click="myFunction(#id#)">
</cfoutput>

Upvotes: 3

Views: 130

Answers (1)

JeffryHouser
JeffryHouser

Reputation: 39408

You're going to be best suited to use a List based class with an itemRenderer. Conceptually like this:

<sList dataProvider="myQ">
 <s:itemRenderer>
  <fx:Component>
    <s:ItemRenderer dataChange="onDataChange(event)">
     <fx:Script>
         protected function onDataChange(event:FlexEvent):void{
            myButton.label = data.title;
         }
         protected function myFunction(event:MouseEvent):void{
           // access the ID using data.id
         }
     </fx:Script>
     <s:Button id="myButton" click="myFunction(event)" />
    <s:ItemRenderer>
  </fx:Component>
 </s:itemRenderer>

</s:List>

This code was written in the browser; so it probably isn't perfect, but should give you an approximation. To understand list based classes, you should research how renderers work in Flex; specifically renderer recycling.

If we were to create a loop like what you have display, then if you had 100 items in the loop, 100 buttons would could cause performance issues. Instead we use lists and renderers. Only the items displayed on screen are rendered. As you scroll through the list, the other items are rendered as they scroll into view; and the items that roll out of view are no longer renderered. So instead of 100 objects hanging out in memory, you have 10 or so that are actually displayed on screen. This is why my in-line itemRenderer listens to the data change event; so the render will update when the data changes.

As you scroll the list will send the next data item into the already created renderer.

I understand the need to frame things in a context you already understand, but UI Development (Flex) is not the same as server side development (ColdFusion); so you'll probably run into a lot of differences. This is one of them.

Upvotes: 3

Related Questions