[flexcoders] Re: Dynamically referencing arbitrarily deep arrays?
Thanks Yves,
I think that will work :)
The reason I want to do this is because I'm working on a component to allow
multiple filters to be easily assigned to a DataGrid
(http://tech.groups.yahoo.com/group/flexcoders/message/143771), and to also be
able to work with multi-dimensional data-structures.
For example, if you have an array of items like:
{
id: 1234,
properties: {
shape: round,
color: blue
}
etc...
}
Some of the DataGrid columns will then have data fields like
properties.shape. In order to keep the FilterManager as general as possible
and avoid having to require to user to specify this information, I need to be
able to use the dataField string to look up the relevant field in the original
data source.
I hope this is a little more clear. Thanks for your help!
Keith
[flexcoders] Closures in ActionScript 3?
Could someone please explain to me how closures work in ActionScript? I
am attempting to create a set of Flex Form fields, and assign an
event-handler to each of them, however, it seems that after creation,
all of the fields have the same event handler.
For example:
var i:int = 0;
for each (var item:Object in this._myItems) {
var f:FormItem = new FormItem();
f.label = item.header;
var input:TextInput = new TextInput();
// Setup event-handler
var self:MyClass = this;
input.addEventListener(change, function (e:Event):void
{
Alert.show(Event-hanlder #: + String(i));
});
i++;
// Add text input to FormItem
f.addChild(input);
// Save a reference to the form control
item.ui = f;
addChild(f);
}
So I would expect that the number displayed when I change any given
field matched the order of the field on the screen. When I run the code,
however, no matter which field I adjust, the number is always the same
(it is the number of the last form item to be added).
It appears that what is happening is that a single function is being
created, and each input field has a reference to that same function.
Any suggestions? Any help would be greatly appreciated.
Thanks!
Keith
[flexcoders] Re: Custom Actionscript component data-binding question
Thanks for all of the help guys! I have gotten things pretty much
working now: I just need to sort out some issues relating to working
with multidimensional data-sources, which I'm going to post in another
thread. In case it is helpful to anyone else though, here is the
near-completed class:
/***\
* Filter Manager
\
**/
package custom {
import mx.containers.Form;
import mx.containers.FormItem;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.TextInput;
import mx.utils.ObjectUtil;
import flash.events.Event;
/***\
* Class definition for a class to manage the various search filters
\
***/
public class FilterManager extends Form {
private var _datasource:ArrayCollection;
private var _datagrid:DataGrid;
private var _filterSettings:Array;
/***
* FilterManager (Constructor)
*
* Creates an instance of the filter manager class
***/
public function FilterManager():void {
super();
}
/***
* datagrid
*
* A reference to the DataGrid object for which the filter will
be applied
***/
[Bindable]
public function set datagrid(dg:DataGrid):void {
_datagrid = dg;
this.initFilters(); // DG not yet ready in constructor...
this.setupUI();
}
public function get datagrid():DataGrid {
return _datagrid;
}
/***
* datasource
*
* A reference to the actual data to be filtered
***/
[Bindable]
public function set datasource(data:ArrayCollection):void {
_datasource = data;
}
public function get datasource():ArrayCollection {
return _datasource;
}
/***
* initFilters
*
* Builds an array to manage the different filters that may be
set
***/
private function initFilters():void {
this._filterSettings = new Array();
// Create an array for each column to keep track of it's
filter status
for each (var col:DataGridColumn in _datagrid.columns) {
var d:Object = new Object();
// Add all filterable items (exclude thumbnails, etc)
if (col['dataField'] != null) {
d.field = col['dataField'];
d.header = col['headerText'];
d.enabled = false;
d.filter = null;
this._filterSettings.push(d);
}
}
}
/***
* setupUI
*
* Sets up the form fields for entering filters
***/
private function setupUI():void {
for each (var item:Object in this._filterSettings) {
var f:FormItem = new FormItem();
f.label = item.header;
// Filter input field
var input:TextInput = new TextInput();
// Setup event-handler
var self:FilterManager = this;
input.addEventListener(change, function (e:Event):void
{
item.filter = e.target.text;
// Update filter information
item.enabled = (item.filter == ? false : true);
// Update filter on DataGrid and throw event
self._datasource.filterFunction = self.filter;
self._datasource.refresh();
});
// Add text input to FormItem
f.addChild(input);
// Save a reference to the form control
item.ui = f;
addChild(f);
}
}
[flexcoders] Dynamically referencing arbitrarily deep arrays?
Does anyone know a method to dynamically index an arbitrarily deep array
or object-literal?
e.g. Given an object t, and the string one.two, how can you access
t.one.two?
Here is some sample code to demonstrate the problem:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=vertical
mx:Script
![CDATA[
public function f():void {
var t:Object = new Object();
t.one = [];
t.one.two = content;
// Works:
output1.text = t[one][two];
// Now what?
var indices:String = one.two;
var tmp:String = ;
for each (var item:String in indices.split(.)) {
tmp += [ + item + ];
}
output2.text = t + tmp;
}
]]
/mx:Script
mx:Text text=test id=output1 creationComplete={f()} /
mx:Text text=test id=output2 /
/mx:Application
Any help would be greatly appreciated.
Thanks!
Keith
[flexcoders] Re: Custom Actionscript component data-binding question
I'm testing the variable during the FilterManager constructor. I
actually don't have Flex Builder, so I've been using Alert and
ObjectUtil to output information about the variables at run-time, e.g.:
public function FilterManager():void {
super();
Alert.show(test);
this.initDataGrid(dataSource);
this.initFilters();
}
When I try to print out the contents of either test or _test using
Alert, a blank box pops up. I *am* able to see the contents set from
MXML during the setter:
[Bindable]
public function set test(value:String):void
{
_test = value;
Alert.show(_test);
}
So perhaps the constructor is simply called before the variable has been
set?
Also, I am trying out your suggestion of passing in the ArrayCollection
instead of the DataGrid itself. One of my initial reasons for using the
DataGrid was so that I could have access to the column names that had
been chosen. Perhaps what I'll do is pass in a list of columns names
along with the data.
Does this look about right though?
public class FilterManager extends Form {
[Bindable]
public var dataSource:ArrayCollection;
private var _datagrid:DataGrid;
public function FilterManager():void {
super();
this.initDataGrid(dataSource);
this.initFilters();
}
private function initDataGrid(d:ArrayCollection):void {
_datagrid = new DataGrid();
_datagrid.dataProvider = d;
}
...
vso:FilterManager dataSource={Application.application.dataArray}
test=Test String width=100% height=100%/
...where dataArray is the relevant ArrayCollection.
Thanks!
Keith
--- In flexcoders@yahoogroups.com, valdhor valdhorli...@... wrote:
That should work.
When are you testing the variable test (ie. where is your breakpoint
set) when you get a null value.
[flexcoders] Re: Custom Actionscript component data-binding question
Hi Valdhor, Thanks for the suggestion, that is a very good idea and something I hadn't thought of. I'll certainly try that out, however, I'm still uncertain as to how to pass in / accept data in custom AS classes. For instance, when I specify things as MXML parameters, are they available in the class constructors, or are they set sometime after the constructor is called via setters? Thanks, Keith --- In flexcoders@yahoogroups.com, valdhor valdhorli...@... wrote: Why are you trying to bind a datagrid? That is a display object. A far better way is to pass in the arraycollection the datagrid is based on. Then just create the datagrid in your custom component.
[flexcoders] Re: Custom Actionscript component data-binding question
Hi Steve, Thanks, that makes things pretty clear. I'm still having trouble passing in variables. For example, in the MXML example above I specify a test variable. When I try to access it in the FilterManager constructor, however, the variable is empty (both test, and _test). I must be missing something simple. Any suggestions? Thanks, Keith --- In flexcoders@yahoogroups.com, valdhor valdhorli...@... wrote: MXML is just a nice easy way to create an instance of a class. Flex will compile the MXML into ActionScript and then compile that into bytecode for the Flash Player to run. When you instantiate the object in MXML, the parameters will either be public variables of the class or will be set via setters. For example, if you look at the Panel class you can see that the title is set via a setter (To see the Panel class in Flex Builder, click on the mx:Panel... MXML and hit F3). You can then find the function: public function set title(value:String):void HTH Steve
[flexcoders] Re: Custom Actionscript component data-binding question
custom:FilterManager datagrid={Application.application.dgResults} test=Test
String width=100% height=100%/
[flexcoders] Custom Actionscript component data-binding question
Hi all,
I have been working on my first custom ActionScript component and have
been trouble getting the data-binding setup properly.
I am trying to making a FilterManager component which will enable to
the user to filter based on one or multiple columns in a DataGrid. In
order to do this though I need to be able to bind a DataGrid to the
component. I have not been able to figure out how to do this though, and
was hoping someone might be able to help shed some light.
Here is the code for the component, and the MXML used to instantiate the
component:
custom:FilterManager datagrid={Application.application.dgResults}
test=Test String width=100% height=100%/
/***\
* Filter Manager
\
**/
package custom {
import mx.containers.Form;
import mx.containers.FormItem;
import mx.controls.Alert;
import mx.controls.DataGrid;
import mx.utils.ObjectUtil;
import flash.events.Event;
/***\
* Class definition for a class to manage the various search filters
\
***/
public class FilterManager extends Form {
[Bindable]
public var datagrid:DataGrid;
private var _test:String;
private var filterSettings:Array;
/***
* FilterManager (Constructor)
*
* Creates an instance of the filter manager class
***/
public function FilterManager():void {
super();
this.initFilters();
}
[Bindable]
public function set test(value:String):void
{
_test = value;
}
public function get test():String
{
return _test;
}
/***
* initFilters
*
* Builds an array to manage the different filters that may be
set
***/
private function initFilters():void {
this.filterSettings = new Array();
for each (var col:* in this.datagrid.columns) {
var d:Object = new Object();
if (col['dataField'] != null) {
d.field = col['dataField'];
d.enabled = false;
d.filter = null;
this.filterSettings.push(d);
}
}
}
/***
* component overrides
***/
override protected function createChildren():void {
super.createChildren();
for each (var item:Object in this.filterSettings) {
var f:FormItem = new FormItem();
f.label = item.field;
addChild(f);
}
Alert.show(createChilden());
}
override protected function commitProperties():void {
super.commitProperties();
}
override protected function measure():void {
super.measure();
}
override protected function
updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth,unscaledHeight);
}
}
}
I've tried passing in data both via public variables (the datagrid
field), and using the preferred accessor mutator route (test), but
have not had any luck with either.
Can anyone please tell me what the proper way to bind a DataGrid in the
application to the custom component so that I can reference it in the
initFilters function?
Any help would be greatly appreciated.
Thanks!
Keith
[flexcoders] Re: Setting the resize event handler for Application?
if (myPanel != null) myPanel.title = TEST; That did the trick! So it looks like the resize event *is* being fired as soon as the application is being loaded, before the panels have even been instantiated? Thanks for the help :) Keith
[flexcoders] Setting the resize event handler for Application?
Hi all, I am getting run-time errors in strange situations and was wondering if anyone might be able to provide some insight as to what is going on. If I try to attach a resize event handler to the Application class, and refer to other components within the application, I end up getting run-time errors (but only when using the debug version of the flash player), e.g.: ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=vertical resize=myPanel.title='TEST' mx:Panel id=myPanel width=200 height=200 / /mx:Application The above compiles fine, but when executing with the debug flash player the following error message results: An ActionScript error has occurred: TypeError: Error #1009: Cannot access a property or method of a null object reference. at test/___test_Application1_resize() at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at mx.core::UIComponent/dispatchEvent() at mx.core::UIComponent/dispatchResizeEvent() at mx.core::UIComponent/setActualSize() at mx.managers::SystemManager/initializeTopLevelWindow() at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::d\ ocFrameHandler() at mx.managers::SystemManager/docFrameListener() If I try to do the same thing using a different event-hanlder (e.g. click), however, it works fine. I thought that maybe this was caused by the resize() handler being executed as soon as the application loaded, perhaps before it had finished loading all of the components, however, if this were so, the panel in the above example should display TEST right away, which it does not. Any ideas? The application actually behaves fine in both the debug and non-debug flash players, but I would like to know what is going on. Thanks, Keith
[flexcoders] Re: Converting strings to numbers before sorting?
var a:Number = obj1.number; var b:Number = obj2.number; That made things much more clear. The reason things weren't working for me was because I expected the sort function to receive only the variable mapped to the column (i.e. number) and not the entire row. The above worked perfectly for me. Thanks for the help :) Take care, Keith
[flexcoders] Converting strings to numbers before sorting?
Hi all,
I have a problem related to sorting type-casted numeric data, and was
wondering if someone could help me out:
Given some numeric data stored as strings (11.5), how can I populate
it into a DataGrid and have it sort properly?
From the Flex API docs
http://livedocs.adobe.com/flex/3/langref/mx/controls/dataGridClasses/Da\
taGridColumn.html#sortCompareFunction it appears that when you use a
labelFunction instead of a dataField to specify what should be displayed
in a column, that the output of the label function is what is then used
for sorting:
If you specify a value of the labelFunction property, you must
also provide a function to the sortCompareFunction property,
unless sorting is not allowed on this column.
So my first attempt was to simply cast the strings to numbers within the
label function and hope that the default sorters would still be
available:
private function testLabel2(item:Object, col:DataGridColumn):Number {
return parseFloat(item.string);
}
... I also tried using Number(item.string), however, neither worked so
I went to manually specifying the sort compare function:
public function sortAsIs(obj1:Object, obj2:Object):int {
if (obj1 obj2)
return -1;
else if (obj1 == obj2)
return 0;
else
return 1;
}
This didn't do the trick either. So finally, I decided to try doing the
conversion in the sortCompareFunction, just in case it was comparing the
original data fields and not the output of the label function. Again no
luck.
Anyone have any suggestions? Any help would be greatly appreciated.
Here is the full code for the test case I am describing:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
mx:Script
![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var test:ArrayCollection = new ArrayCollection([
{string: 11.0, number: 11.0},
{string: 0, number: 0},
{string: 7.75, number: 7.75},
{string: 8, number: 8},
{string: 3, number: 3},
{string: 8.93, number: 8.93}
]);
private function testLabel1(item:Object,
col:DataGridColumn):Number {
return Number(item.string);
}
private function testLabel2(item:Object,
col:DataGridColumn):Number {
return parseFloat(item.string);
}
public function sortAsIs(obj1:Object, obj2:Object):int {
if (obj1 obj2)
return -1;
else if (obj1 == obj2)
return 0;
else
return 1;
}
public function sortAfterCasting(obj1:Object, obj2:Object):int {
var a:Number = Number(obj1);
var b:Number = Number(obj2);
if (a b)
return -1;
else if (a == b)
return 0;
else
return 1;
}
]]
/mx:Script
mx:DataGrid id=testDG dataProvider={test}
mx:columns
mx:DataGridColumn dataField=string /
mx:DataGridColumn dataField=number /
mx:DataGridColumn headerText=Number(string) - sortAsIs
labelFunction=testLabel1 sortCompareFunction=sortAsIs/
mx:DataGridColumn headerText=parseFloat(string) -
sortAsIs labelFunction=testLabel2 sortCompareFunction=sortAsIs/
mx:DataGridColumn headerText=Number(string) - casting
labelFunction=testLabel1 sortCompareFunction=sortAfterCasting/
mx:DataGridColumn headerText=parseFloat(string) - casting
labelFunction=testLabel2 sortCompareFunction=sortAfterCasting/
/mx:columns
/mx:DataGrid
/mx:Application
Thanks!
Keith
[flexcoders] Re: Does anyone know how to get an accordion to occupy a specified relative height (
--- In flexcoders@yahoogroups.com, Tim Hoff timh...@... wrote:
Unless you specify the height of the accordion, it will grow; based on
the size of the first child.
mx:Panel width=100% height=25%
mx:Accordion id=optionsAccordion width=100% height=100%
vso:Form label=Accordion Entry 1 width=100% /
-TH
Still no luck-- even if I specify the height as above, the accordion
will expand beyond 25% if there is enough content in the child node.
I have found a found a potential work-around solution, however: If I
specify an absolute height for the first accordion child based off of
the application height, the accordion will use that height:
mx:Panel width=100% height=25%
mx:Accordion id=optionsAccordion width=100%
vso:Form label=Accordion Entry 1 width=100%
height={this.height / 5}/
The only problem is that because the height is now absolute, it remains
the same even when resizing. The next thing to do will be to set an
event-handler that responds to the application being resized and
recompute the height for the accordion.
[flexcoders] Re: Does anyone know how to get an accordion to occupy a specified relative height (
In case anyone else runs into the same problem, here is how you can
setup the event handler to respond to application resizes:
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; width=100%
height=100% resize=onResize();
...
private function onResize():void {
optionsAccordion.height = details.height = this.height / 5;
}
If you want more information about the event, you can also import the
ResizeEvent and pass it to onResize, e.g.
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; width=100%
height=100% resize=onResize(event);
...
import mx.events.ResizeEvent;
private function onResize(e:ResizeEvent):void {
optionsAccordion.height = details.height = this.height / 5;
}
Hope this helps.
If anyone knows of a simpler solution, I'd still be interested to know!
[flexcoders] Does anyone know how to get an accordion to occupy a specified relative height (
Does anyone know how to get an accordion to occupy a specified relative
height (e.g. 25% of the application) while ensuring that all accordion
headers are visible?
There are two methods that come pretty close. Both solutions behave
exactly as desired when the content of the accordion's first child is
small, however, they become problematic when there is a larger amount of
content there. (The accordion containers are default behavior is to use
a height equal to their first child:
http://livedocs.adobe.com/flex/3/langref/mx/containers/Accordion.html).
The first method:
mx:Panel width=100% height=25%
mx:Accordion id=optionsAccordion width=100%
vso:Form label=Accordion Entry 1 width=100% /
.
.
.
In this case, things work fine when the content of the first accordion
section is small, but when it is larger than the desired height, it
pushes the panel size up so that it may become very large (e.g. 60%
instead of 25% of the screen).
For the other method:
mx:Panel width=100% height={this.height / 4}
mx:Accordion id=optionsAccordion width=100%
vso:Form label=Accordion Entry 1 width=100% /
.
.
.
...the height of the panel containing the accordion always uses the
correct size, however, the accordion itself may be much larger causing a
scrollbar to appear within the panel, and some of the accordion section
headers to be pushed down.
Originally, I thought the issue was related to how the Panels behaved
(see http://tech.groups.yahoo.com/group/flexcoders/message/137291), but
after some further testing, it appears to be specifically related to how
the accordions behave.
Any Ideas? Any help would be greatly appreciated!
Thanks,
Keith
[flexcoders] Re: Relative Layout Question
Hm you also said something about a resize I completely blanked on that. Are you doing a manual resize of the component? (mouse involved?) Nope. Just responding to screen resizes. The application is set up to use ~100% of the browser width height, and the components are automatically resized when the user resizes the browser. I would like to have the two panels also resize automatically so that they still occupy the same amount of space relative to each other. I haven't tried out your example yet.. I will give it a shot first thing tomorrow. Thanks! Keith
[flexcoders] Relative Layout Question
Hi all, I have a question about using creative relatively-sized layouts: The default behavior http://livedocs.adobe.com/flex/3/langref/mx/containers/Panel.html of many containers is to use adopt a height just large enough to fit all of it's children content. Manually specifying a relative height (e.g. 25%) for the container will work, but only if the content is small enough. Otherwise the height is increased to fit the content. e.g. ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=vertical width=600 height=600 mx:Panel height=75% mx:Text text=This panel should take up 75% of the application's height / /mx:Panel mx:Panel height=25% mx:Accordion mx:Form mx:Text text=Item 1 / mx:Text text=Item 2 / mx:Text text=Item 3 / mx:Text text=Item 4 / /mx:Form mx:Form mx:Text text=etc / /mx:Form /mx:Accordion /mx:Panel /mx:Application Instead of taking up 25% of the application height the bottom panel will expand to fit the accordion (which in turn has a height equal to the amount of space used up by it's larged child). Is there anyway I can force the panel to only expand to 25% of the main application's height? I can set an absolute height the panel's children which will assure a maximum height, but I would like to be able to use a relative height. Any ideas? Any suggestions would be greatly appreciated. Thanks! Keith
[flexcoders] Re: Relative Layout Question
Thank you both for the suggestions.
You can use an expression in binding braces. Try this, see if it
does
what you want:
mx:Panel height={this.height/4}
This could work if I computed the desired height during initialization
and set it, however, this would mean that I would need to update it each
time the
window was resized. Perhaps if it's possible I could bind the height to
a variable, initialize the variable to use the desired height, and then
add an event handler
to update the variable each time the height changes. This isn't the most
elegant solution, however.
This should do the trick
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
verticalGap=0 paddingTop=0 paddingBottom=0 width=600
height=600
mx:Panel height=75%
mx:Text text=This panel should take up 75% of the
application's height /
/mx:Panel
mx:Panel id=my25panel height=25% layout=absolute
title={100/(this.height/my25panel.height)}
...
This also was pretty close, but not quite the effect I was looking for.
Aside from needing to update the height after resizing, setting the
height this way caused a scrollbar to surround the accordion. My end
goal (I probably could have been more clear about this before...) is to
have the entire accordion fit on screen at all times and take up 30% of
the available space. Any overflow within a given accordion entry could
be handled with a scrollbar.
Thanks :)
Keith
[flexcoders] Re: Is there any way to use predefined functions for a sortCompareFunction?
Thanks all for the suggestions! Will using the sortOptions property on a DataGridColumn do what you want? Hmm. I don't think that is supported in Flex 3 (http://livedocs.adobe.com/flex/3/langref/mx/controls/dataGridClasses/DataGridColumn.html), although that would have been nice. Both of the other solutions looks pretty promising. I will probably do something like what Adrian suggested, in order to keep things as simple as possible. Perhaps I will post a feature-request on JIRA sometime soon and see if it is something they could add easily :) Take care, Keith
[flexcoders] Is there any way to use predefined functions for a sortCompareFunction?
When working with DataGrid ItemRenderers, you can say something like itemrenderer=Text, and Flex will know how to deal with the data. Is there anyway you can do this with a sortCompareFunction, e.g. sortCompareFunction=Numeric or sortCompareFunction=String? The reason is that I have some simple datatypes (Integers and Strings) that are nested (e.g. time.start), and thus require using a labelFunction instead of simply specifying a dataField. A result of which is that Flex does not know how to sort them anymore. I can write a sortable function for Integers and Strings, but I'm pretty sure this has already been done. Any ideas? Any help would be appreciated. :) Thanks! Keith
[flexcoders] Publishing source code without Flex Builder?
Anyone know how to include a View Source option in the context menu for Flex applications built using the SDK alone?
[flexcoders] Re: Mapping complex objects to custom components with data binding?
Why do not you make a custom class and bind on this? Could you please give an example? I'm not entirely sure of what you mean. Thanks! Keith
[flexcoders] Re: Mapping complex objects to custom components with data binding?
In case this helps anyone else, here is a fairly simple way to solve
this problem:
main.xml
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
xmlns:custom=custom.*
mx:Script
![CDATA[
import mx.controls.Alert;
public function updateObj(e:Event):void {
detailsPanel.breed= e.target.label;
detailsPanel.age = 5;
}
]]
/mx:Script
mx:Button label=Lab click=updateObj(event) /
mx:Button label=Poodle click=updateObj(event) /
mx:Label text=Details: /
custom:Details id=detailsPanel /
/mx:Application
custom/Details.xml:
?xml version=1.0 encoding=utf-8?
mx:VBox xmlns:mx=http://www.adobe.com/2006/mxml;
horizontalAlign=center verticalAlign=middle
mx:Script
![CDATA[
[Bindable]
public var breed:String;
[Bindable]
public var age:Number;
]]
/mx:Script
mx:Text text=Breed: {breed} /
mx:Text text=Age: {age} /
/mx:VBox
This wasn't to original solution I was going for, but it is simple
enough.
Hope this helps someone else :)
Keith
[flexcoders] [AIR] Custom install badge image not displaying?
Hi all, I have been experimenting with using the custom install badge by Grant Skinner (http://www.adobe.com/devnet/air/articles/badge_for_air.html), however, for some reason the background image specified by imageurl does not display, even in the example badge. Instead of displaying the background image, the appname and version are displayed in blue text. I've tried using both relative and absolute URL's, PNG's and JPG's, and checked to make sure the permissions for the file were okay, but nothing worked. Any suggestions? Thanks, Keith
[flexcoders] Re: [AIR] Custom install badge image not displaying?
FIXED: There is a mistake(?) in the sample code. The parameter for the image should be image instead of imageurl.
[flexcoders] Using FABridge with SWFObject 2?
Hi all,
I was wondering if anyone has been able to successful use SWFObject with
the Flex-Ajax Bridge (FABridge)?
The SWFObject wiki offers a modified version of FABridge.js is supposed
to resolve issues with supporting the FABridge, but I have not had any
luck with it. I have a simple Flex application with a function that
calls alert:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
layout=vertical width=640 height=480
fab:FABridge xmlns:fab=bridge.* /
mx:Script
![CDATA[
import mx.controls.Alert;
public function test():void {
Alert.show(You called?);
}
]]
/mx:Script
/mx:Application
And here is what I have on the JavaScript side:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
html
head
titleFABridge Test/title
meta http-equiv=Content-Type content=text/html;
charset=utf-8 /
script src=bridge/FABridge.js type=text/javascript /
script src=swfobject.js type=text/javascript /
script type=text/javascript
swfobject.registerObject(myFlashContent, 9.0.0,
expressInstall.swf);
/script
/head
body
div
object classid=clsid:D27CDB6E-AE6D-11cf-96B8-44455354
width=640 height=480 id=myFlashContent
param name=movie value=out.swf /
!--[if !IE]--
object type=application/x-shockwave-flash
data=out.swf width=640 height=480
!--![endif]--
a href=http://www.adobe.com/go/getflashplayer;
img
src=http://www.adobe.com/images/shared/download_buttons/get_flash_playe\
r.gif alt=Get Adobe Flash player /
/a
!--[if !IE]--
/object
!--![endif]--
/object
/div
input type=button id=bridgeBtn value=Talk to Flex
click=var flexApp = FABridge.flash.root(); flexApp.test(); /
/body
/html
I've tried a lot of different things with no success. Initially I
thought the problem was related to compatability issues jQuery, although
even by doing things manually It does not want to work. I also tried
manually setting the bridge to use via flashvars:
param name=flashvars value=bridgeName=testBridge /
FABridge.testBridge.root();
But that did not do the trick either.
Finally, I noticed that with the above code, it seems like only one
external script, either FABridge.js or swfobject.js is loaded, depending
on which one comes first, according to Firebug. I.e. when swfobject.js
is loaded first, Firebug only sees it. When FABridge.js is loaded first,
Firebug only sees that.
Any ideas? Any advice would be greatly appreciated.
Thanks!
Keith
[flexcoders] Re: Using FABridge with SWFObject 2?
Update: I figured out how to get the FABridge to work with SWFObject. Here is a simple working example with a button which when pressed calls a function test in the Flex app: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; html head titleFABridge Test/title meta http-equiv=Content-Type content=text/html; charset=utf-8 / script src=bridge/FABridge.js type=text/javascript / script src=swfobject.js type=text/javascript / script type=text/javascript swfobject.registerObject(myFlashContent, 9.0.0, expressInstall.swf); /script /head body div object classid=clsid:D27CDB6E-AE6D-11cf-96B8-44455354 width=640 height=480 id=myFlashContent param name=movie value=out.swf / !--[if !IE]-- object type=application/x-shockwave-flash data=out.swf width=640 height=480 !--![endif]-- a href=http://www.adobe.com/go/getflashplayer; img src=http://www.adobe.com/images/shared/download_buttons/get_flash_playe\ r.gif alt=Get Adobe Flash player / /a !--[if !IE]-- /object !--![endif]-- /object /div input type=button id=bridgeBtn value=Talk to Flex onclick=var flexApp = FABridge.flash.root(); flexApp.test(); / /body /html I have not been able to get the bridge/SWFObject to play nicely with Prototype/jQuery, however. I would like to instantiate the FABridge when the DOM is loaded, and then store a reference to be called periodically later. So far the only thing that has worked for me is to instantiate it as it's used, sometime after the DOM is loaded. When I try to use either Prototype's Event.observer(window,) or jQuery's $() after loading FABridge.js nothing happens. If anyone has any idea why this is, I would be very interested to find out. Keith
[flexcoders] Mapping complex objects to custom components with data binding?
Hello all,
I am trying configure a DataGrid so that whenever a row is selected, a
custom Details components will be updated to show some various
information relating to that row. I am able to retrieve the row
information whenever a row is selected, but I have not been as
successful getting it to the custom component using data binding.
Here is a simpler example of what I'm trying to do:
main.xml:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml;
xmlns:custom=custom.*
mx:Script
![CDATA[
import mx.controls.Alert;
[Bindable]
private var dog:Object;
public function updateObj(e:Event):void {
var myDog:Object = {
breed: e.target.label,
age : 5
}
dog = myDog;
}
]]
/mx:Script
mx:Button label=Lab click=updateObj(event) /
mx:Button label=Poodle click=updateObj(event) /
mx:Label text=Details: /
custom:Details dataProvider={dog} /
/mx:Application
custom/Details.mxml:
?xml version=1.0 encoding=utf-8?
mx:VBox xmlns:mx=http://www.adobe.com/2006/mxml;
horizontalAlign=center verticalAlign=middle
mx:Script
![CDATA[
public var dataProvider:Object;
]]
/mx:Script
mx:Text text=Breed: {data.breed} /
mx:Text text=Age: {data.age} /
/mx:VBox
There is an article in the livedocs that is pretty close:
http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_4.h\
tml, but I was hoping to be able to keep things simpler than that.
Anyone know if this is possible using a similar approach to the above?
Any suggestions?
Any advice would be greatly appreciated.
Thanks!
Keith
[flexcoders] ArrayCollection COLLECTION_CHANGE event doesn't fire right away?
Hi all,
I'm trying to detect changes in an ArrayCollection which is bound to a
DataGrid with some editable components. For some reason, however, the
event only seems to fire when the focus is change. For example, I
check a check-box, and nothing happens. When I then click somewhere
outside of the checkbox, the event is fired. Furthermore, If I check
the box twice before changing focus, nothing at all happens.
Is is possible that the event is only fired when the DataCollection is
refreshed, and that the refresh is not occurring until the focus changes?
Here is an example of what I'm doing (colors is the id for the
DataGrid associated with the colors ArrayC:
import mx.collections.ArrayCollection;
import mx.events.CollectionEvent;
import mx.controls.Alert;
[Bindable]
private var colors:ArrayCollection = new ArrayCollection([
{color:Red, display: true},
{color:Blue, display: true},
{color:Green, display: true}
]);
// Watch for changes to DataGrid CheckBox's
private function init():void {
colors.addEventListener(
CollectionEvent.COLLECTION_CHANGE, onChange
);
}
public function onChange(evt:Event):void {
Alert.show(Datagrid altered!);
}
Any ideas? Any advice would be greatly appreciated.
Thanks!
Keith
[flexcoders] Re: ArrayCollection COLLECTION_CHANGE event doesn't fire right away?
Hi Alex, Thanks for the suggestion. I was already trying to set the value using the click-handler, but even using change, I still am not having any luck: change=cbSelected = displayCheckBox.selected; (The data-binding is somewhat indirect: the checkbox sits inside a HBox, which I've given a cbSelected property that is then set as the columns editorDataField field, similar to the last example from the Returning data from an item editor section: http://livedocs.adobe.com/flex/3/html/help.html?content=celleditor_1.html in the Flex 3 Help pages.) Am I setting the change handler properly? Thanks, Keith
[flexcoders] Re: ArrayCollection COLLECTION_CHANGE event doesn't fire right away?
I was able to get it working in one case using itemUpdated. I had to
change the ArrayCollection to public, and then set the handler:
[Bindable]
public var colors:ArrayCollection = new ArrayCollection([
{color:Red, display: true},
{color:Blue, display: true},
{color:Green, display: true}
]);
private function init():void {
colors.addEventListener(CollectionEvent.COLLECTION_CHANGE,
onChange);
}
.
.
.
mx:DataGridColumn dataField=display rendererIsEditor=true
editorDataField=selected
mx:itemRenderer
mx:Component
mx:CheckBox label={data.color} selected=true
click=data.display = selected; outerDocument.colors.itemUpdated(data);
/
/mx:Component
/mx:itemRenderer
/mx:DataGridColumn
I still cannot get it working in the more complex case where I have a
more complex component item renderer:
mx:DataGrid id=colorDG dataProvider={colors} editable=true
mx:columns
mx:DataGridColumn headerText=Color dataField=display
rendererIsEditor=true editorDataField=cbSelected
mx:itemRenderer
mx:Component
mx:HBox horizontalAlign=left paddingLeft=5
mx:Script
![CDATA[
[Bindable]
public var cbSelected:Boolean;
]]
/mx:Script
mx:CheckBox id=displayCheckBox
selected=true change=cbSelected = displayCheckBox.selected;
outerDocument.colors.itemUpdated(data); /
mx:Label text={data.color} /
/mx:HBox
/mx:Component
/mx:itemRenderer
/mx:DataGridColumn
/mx:columns
/mx:DataGrid
When I click the checkbox in the above example, the COLLECTION_CHANGE
event is fired three times: the 1st and 3rd time with the prior (wrong)
value and the middle time with the updated (correct) value. When I use
data.selected = displayCheckBox.selected the event is fired anywhere
between once and three times and the wrong values end up being stored in
ArrayCollection.
The version I got working is good enough for the time being, but If
anyone can tell what I'm doing wrong in the later example, I would love
to find out so I can understand the SDK better.
Thanks for your help Alex!
Keith
[flexcoders] Hierarchical data without the AdvancedDataGrid?
Hi all, I was wondering if anyone had any suggestions for handling hierarchical data without having to use the AdvancedDataGrid (I'm working with the open-source SDK). I can flatten the arrays and add the grouping as a properties of each array item so that I can display all of the entries, which is alright. Is it possible to add sub-headers/dividers to a regular DataGrid? Any other ideas? Any suggestions would be greatly appreciated. Thanks! Keith
