what is flex?

[falltimemusic]

the thing i hate about macromedia is that they don't describe what the hell their software does!!!!

what is wrong with them!? what is flex used for? why would you use it? is it supposed to replace flash, or be used in conjunction with flash?

i mean i see this

http://www.macromedia.com/software/flex/?promoid=BINV

but i want to know what people are doing with flex... any examples?

[hangalot]

we have some stuff thats in beta at the moment, so its a bit flacky
www.fidelitylabs.com which is done in flex
all flex is is a different compiler for flash. basically you use a xml variation to layout your screens and still write actionscript to do what you want the thing to do, and in the end it all compiles down to a swf. you can still make components in flash which you can use in flex.

[falltimemusic]

does compiling in flex make your SWFs run better? have you noticed a difference with that?

[hangalot]

what do you mean run better? the components in flex are better than the standard v2 components in flex (they are the same components, but with a whole lot of bugs fixed) and flex takes care of a lot of stuff for you, and databinding anf layout and stuff like that is really easy in flex.

why don't you download the flex 2 beta from labs.macromedia.com and check it out.

[outlando]

I tried playing around with Flex, but eventually just built my app in Flash and made custom components instead of the v2 ones in Flash.

My biggest problem with v2 components is the PAIN IN THE BACKSIDE trying to skin them! :mad:

Still, I might take a look at the new version of Flex - AS3 looks nice and powerful, although pretty scary at the same time :eek:

[hangalot]

once you understand how the v2 components work they are not that dffficult to skin actually

[outlando]

I spose that's possible... but they still weigh heavily on the old filesize...

[hangalot]

yeah, but they provide so much functionality that you would normally not think about until you need it.

[Headshotz]

I might give it a try

[snapple]

Just another way for Macromedia to make money from another server application that won't ever really take off. May as well use JSP.

Regards, snapple

[tg]

Just another way for Macromedia to make money from another server application that won't ever really take off. May as well use JSP.

Regards, snapple

i gotta disagree on that.... i think stuff like flex will probably get plenty of use on intranets, once companies see the benefits, and there is a pool of available developers.


coldfusion is not to popular on the internet (compared to other serverside languages), but it is much more accepted on large corporate intranets, i think flex will likely fit in the same way.

[hangalot]

sorry snapple but that is a very ignorant argument as to what flex is. your gripe seems to be the licensing model which has changed for flex2. futhermore if you say might as well use jsp, well then why ever use flash?
flex is a RAD enviroment for flash, making the development of UI's considerably flaster than it was tradtionally in flash, and you do not need to deploy the flex war to your app server. we use the the mxml compiler on its own and just deploy the swf, so we loose out on the flex server built in stuff like history mangement, but its the company i consult for's policy that nothing gets deployed to a server without a code review for security.

ITS JUST ANOTHER COMPILER...

[snapple]

hangalot, your right, i am ignorant, this is because I don't use Flex, so i cannot discuss in detail the points you make.

Because i don't know much about it, i downloaded and read through the Flex white paper on Macromedia's site. As far as i can tell, it's a mix between JSP and JSF... only for Flash. What exactly is the massive advantage to Flex, i read through the entire white paper (ignoring the, almost humorous, jargon and made-up words) and still couldn't really see why it would become a big success.

I can't see any major advantages. I'm not saying it's a bad technology, but really, how big do you think Flex is going to get? Macromedia release so many of these technologies, only to never really take-off and only to be replaced 15 months later.

Regards, snapple

[hangalot]

ignore what they say in their papers, obviously the person who wrote that never did flash development. they market it to attract java developers.

its just flash. lets take a simple MVC app as an example. my view would be written in mxml and would look something like this:

<?xml version="1.0" encoding="utf-8"?>

<mx:VBox xmlns:mx="http://www.macromedia.com/2003/mxml"
xmlns:fid="com.fmr.feb.pf.ui.controls.*"
horizontalAlign="center"
verticalAlign="middle"
xmlns:controls="com.fmr.feb.pf.search.ui.controls.*"
styleName="PopularSearchStyle"
>

<mx:Script>
<![CDATA[
// import com.fmr.feb.pf.search.model.AbstractSearchResult;
import com.fmr.feb.pf.search.model.PopularSearches;
import fast.echo.Echo
//

private var __model:PopularSearches;

public function set model(m:PopularSearches){
__model= m
// Echo.info("model set to " + m.length)
setLabelDepths()
}
public function setLabelDepths(){
// Echo.info("HELLO "+this);
for (var i in __categoryTitle){
__categoryTitle[i].swapDepths(this.getNextHighestDepth());
}
}
private function onLinkClicked(eventObj){
/**************** THIS PULLS OUT THE VALUE FROM TEH LABEL FIELD, BUT REALLY SHOULD
* GET THE VALUE FROM THE DP...
*/
// Echo.info("clicked -- "+eventObj.target.getRepeaterItem(searchItems))
// Echo.info("clicked -- "+eventObj.target.getRepeaterItem)
// for (var i in eventObj.target){
// Echo.info("clicked -- "+i+", "+eventObj.target[i])
// }
// Echo.info("clicked -- "+eventObj.target.__label)
dispatchEvent({type:"linkClicked", data:eventObj.target.__label})
}


]]></mx:Script>
<mx:Label
text="POPULAR SEARCHES"
/>

<mx:HBox width="100%">
<mx:Repeater id="searchCategories" dataProvider="{__model}" recycleChildren="true" >
<mx:VBox verticalGap="-6" width="{100/__model.length}%">
<mx:Link
id="__categoryTitle"
label="{searchCategories.currentItem.name.toUpperCase()}"
styleName="popularSearchTitle"
click="onLinkClicked(event)"
></mx:Link>
<mx:Repeater
id="searchItems"
dataProvider="{searchCategories.currentItem}"
recycleChildren="true">
<mx:Link
id="popularSearchItem"
label="{searchItems.currentItem}"
styleName="popularSearchItem"
click="onLinkClicked(event)"
></mx:Link>
</mx:Repeater>

</mx:VBox>
</mx:Repeater>
</mx:HBox>
</mx:VBox>

sorry if this seems a bit much but i want to point out a few things here.

notice how we have actionscript in the mx:script tag (this is an old class so it has been refactored out, thus it is in such a bad shape :))

notice the imports which just point to normal actionscript classes and the like.
here is the thing, before the swf gets made the flex compiler just turns this mxml into a piece of actionscript, which i have added next

i have to add the as to another post...

so it basically writes the code for you to setup your view. everthing else is just normal actionscript.
so thats my view. my model and controller are normal actionscript objects, and for my model to work with the databinding all i need is to make certain my model has a length property and a getItemAt method. thats it.
so even if you want to use flash i would still advise people to do the quick prototype in flex, and then later on replace the view layer with flash code.

does that clear it up a bit? if you get flex (trial or anything) give me shout and i will direct you to some resources to develop mxml in eclipse (which is what we do) and share my ant script for compiling mxml apps to swf's

and then as to why flex is goin g to make it or not. well the new licensing model is way cheaper. but in the last couple of months flex work has exploded in enterprise/corperate enviroments and it is showing no signs of abating. as swf content becomes more standard for big companies the more people will use flex as it can be managed by sourcecontrol software, which the fla binary cannot.

[hangalot]

class com.fmr.feb.pf.search.ui.containers.FPopularSearch es extends mx.containers.Panel
{
// removed before bytecode generation...
static function __generateDocumentDescriptor() {
new mx.core.UIObjectDescriptor({ type: mx.containers.Panel, nonInheritingStyles: function() { return {horizontalAlign: "center", verticalAlign: "middle"}; },
_properties: function() { return { titleStyleDeclaration: "PopularSearchTitleBarStyle", title: "POPULAR SEARCHES", styleName: "PopularSearchStyle", childDescriptors: [
new mx.core.UIObjectDescriptor({ type: mx.containers.HBox,
_properties: function() { return { width: "100%", childDescriptors: [
new mx.core.UIObjectDescriptor({ type: mx.core.Repeater, id: "searchCategories",
_properties: function() { return { recycleChildren: true, childDescriptors: [
new mx.core.UIObjectDescriptor({ type: mx.containers.VBox, id: "_VBox2", nonInheritingStyles: function() { return {verticalGap: -6.0}; },
_properties: function() { return { childDescriptors: [
new mx.core.UIObjectDescriptor({ type: mx.controls.Label, id: "__categoryTitle",
_properties: function() { return { styleName: "popularSearchTitle" }; }
}),
new mx.core.UIObjectDescriptor({ type: mx.core.Repeater, id: "searchItems",
_properties: function() { return { recycleChildren: true, childDescriptors: [
new mx.core.UIObjectDescriptor({ type: mx.controls.Link, id: "popularSearchItem", events: { click: _global.com.fmr.feb.pf.search.ui.containers.FPopul arSearches.prototype.__popularSearchItem_click },
_properties: function() { return { styleName: "popularSearchItem" }; }
})
]};}
})
]};}
})
]};}
})
]};}
})
]};}
});
}
var popularSearchItem:Object;
var _VBox2:Object;
var searchItems:Object;
var __categoryTitle:Object;
var searchCategories:mx.core.Repeater;

function FPopularSearches()
{

}

function init():Void
{
__document = this;
__documentDescriptor = com.fmr.feb.pf.search.ui.containers.FPopularSearch es["_documentDescriptor_"];
__documentDescriptor.document = this;


super.init();

var props = new Object();
props.horizontalAlign = "center";
props.titleStyleDeclaration = "PopularSearchTitleBarStyle";
props.title = "POPULAR SEARCHES";
props.verticalAlign = "middle";
props.styleName = "PopularSearchStyle";
applyProperties(props, props);


_com_fmr_feb_pf_search_ui_containers_FPopularSearc hes_bindingSetup();

if (nonInheritingStyleSheet == undefined)
{
nonInheritingStyleSheet = new mx.styles.CSSStyleSheet();
}

nonInheritingStyleSheet.defaultFactory = function() { return {horizontalAlign: "center", verticalAlign: "middle"}; };
}

// Event handler functions...
function __popularSearchItem_click(event:Object):Void
{
onLinkClicked(event)
}



// import com.fmr.feb.pf.search.model.AbstractSearchResult;
import com.fmr.feb.pf.search.model.PopularSearches;
import fast.echo.Echo
//

private var __model:PopularSearches;

public function set model(m:PopularSearches){
__model= m
// Echo.info("model set to " + m.length)
setLabelDepths()
}
public function setLabelDepths(){
Echo.info("HELLO "+this);
for (var i in __categoryTitle){
__categoryTitle[i].swapDepths(this.getNextHighestDepth());
}
}
private function onLinkClicked(eventObj){
/**************** THIS PULLS OUT THE VALUE FROM TEH LABEL FIELD, BUT REALLY SHOULD
* GET THE VALUE FROM THE DP...
*/
// Echo.info("clicked -- "+eventObj.target.getRepeaterItem(searchItems))
// Echo.info("clicked -- "+eventObj.target.getRepeaterItem)
// for (var i in eventObj.target){
// Echo.info("clicked -- "+i+", "+eventObj.target[i])
// }
// Echo.info("clicked -- "+eventObj.target.__label)
dispatchEvent({type:"linkClicked", data:eventObj.target.__label})
}



// Bindings and watchers...

function _com_fmr_feb_pf_search_ui_containers_FPopularSearc hes_bindingSetup():Void
{
var _bclass = mx.binding.Binding;
var _barray = new Array();
var _bmclass = mx.binding.BindingManager;
var _btemp;
_btemp = new _bclass(this,
function() { return (__model); },
function(_v) { searchCategories.dataProvider = _v;},
"searchCategories.dataProvider");
_bmclass.addBinding(this, "searchCategories.dataProvider", _btemp);
_barray[0] = _btemp;
_com_fmr_feb_pf_search_ui_containers_FPopularSearc hes_repeatableBindingSetup(_barray);
_com_fmr_feb_pf_search_ui_containers_FPopularSearc hes_watcherSetup(_barray);
}

function _com_fmr_feb_pf_search_ui_containers_FPopularSearc hes_bindingExprs():Void
{
var bexpr0; searchCategories.dataProvider = (__model);
var bexpr1; _VBox2.width = mx.binding.Binding.noUndefined((100/__model.length) + "%");
var bexpr2; __categoryTitle.text = (searchCategories.currentItem.name.toUpperCase());
var bexpr3; searchItems.dataProvider = (searchCategories.currentItem);
var bexpr4; popularSearchItem.label = (searchItems.currentItem);
}

var _bindings:Array;
var _watchers:Array;

function _com_fmr_feb_pf_search_ui_containers_FPopularSearc hes_watcherSetup(_barray):Void
{
var _dummy1:mx.binding.PropertyWatcher;
var _dummy2:mx.binding.ArrayElementWatcher;
var _dummy3:mx.binding.FunctionReturnWatcher;
}

function _com_fmr_feb_pf_search_ui_containers_FPopularSearc hes_watcherSetupBottom(_warray, _barray):Void
{
}

function _com_fmr_feb_pf_search_ui_containers_FPopularSearc hes_repeatableBindingSetup(_barray):Void
{
var _dummy1:mx.binding.RepeaterItemWatcher;
}


}

// generated version of _watcherSetup
function _com_fmr_feb_pf_search_ui_containers_FPopularSearc hes_watcherSetup(_barray):Void
{
var _warray = new Array();
_warray[1] = new mx.binding.PropertyWatcher("__model", null);
_warray[12] = new mx.binding.PropertyWatcher("searchItems", null);
_warray[13] = new mx.binding.PropertyWatcher("dataProvider", null);
_warray[14] = new mx.binding.RepeaterItemWatcher(_warray[13]);
_warray[7] = new mx.binding.PropertyWatcher("searchCategories", null);
_warray[8] = new mx.binding.PropertyWatcher("dataProvider", {modelChanged : true});
_warray[9] = new mx.binding.RepeaterItemWatcher(_warray[8]);
_warray[10] = new mx.binding.PropertyWatcher("name", null);
_com_fmr_feb_pf_search_ui_containers_FPopularSearc hes_watcherSetupBottom(_warray, _barray);
}
function _com_fmr_feb_pf_search_ui_containers_FPopularSearc hes_watcherSetupBottom(_warray, _barray):Void
{
var _tempWatcher;
_tempWatcher = _warray[1];
_tempWatcher.addListener(_barray[1]);
_tempWatcher.addListener(_barray[0]);
_warray[1].updateParent(this);
_warray[12].addListener(_barray[4]);
_warray[12].updateParent(this);
_warray[12].addChild(_warray[13]);
_warray[14].addListener(_barray[4]);
_warray[13].addChild(_warray[14]);
_tempWatcher = _warray[7];
_tempWatcher.addListener(_barray[2]);
_tempWatcher.addListener(_barray[3]);
_warray[7].updateParent(this);
_warray[7].addChild(_warray[8]);
_tempWatcher = _warray[9];
_tempWatcher.addListener(_barray[2]);
_tempWatcher.addListener(_barray[3]);
_warray[8].addChild(_warray[9]);
_warray[10].addListener(_barray[2]);
_warray[9].addChild(_warray[10]);
_barray[0].execute();
_barray[1].execute();
_barray[2].execute();
_barray[3].execute();
_barray[4].execute();
_watchers = (_watchers == null) ? _warray : _watchers.concat(_warray);
_bindings = (_bindings == null) ? _barray : _bindings.concat(_barray);
}

// generated version of _repeatableBindingSetup
function _com_fmr_feb_pf_search_ui_containers_FPopularSearc hes_repeatableBindingSetup(_barray):Void
{
var _bmclass = mx.binding.BindingManager;
var _rbclass = mx.binding.RepeatableBinding;
_barray[1] = new _rbclass(this,
function(_indices) { return mx.binding.Binding.noUndefined((100 / __model.length) + "%"); },
function(_v, _indices) { _VBox2[_indices[0]].width = _v;},
"_VBox2.width");
_bmclass.addBindingTemplate(this, "_VBox2.width", _barray[1]);
_barray[2] = new _rbclass(this,
function(_indices) { return (searchCategories.dataProvider.getItemAt(_indices[0]).name.toUpperCase()); },
function(_v, _indices) { __categoryTitle[_indices[0]].text = _v;},
"__categoryTitle.text");
_bmclass.addBindingTemplate(this, "__categoryTitle.text", _barray[2]);
_barray[3] = new _rbclass(this,
function(_indices) { return (searchCategories.dataProvider.getItemAt(_indices[0])); },
function(_v, _indices) { searchItems[_indices[0]].dataProvider = _v;},
"searchItems.dataProvider");
_bmclass.addBindingTemplate(this, "searchItems.dataProvider", _barray[3]);
_barray[4] = new _rbclass(this,
function(_indices) { return (searchItems[_indices[0]].dataProvider.getItemAt(_indices[1])); },
function(_v, _indices) { popularSearchItem[_indices[0]][_indices[1]].label = _v;},
"popularSearchItem.label");
_bmclass.addBindingTemplate(this, "popularSearchItem.label", _barray[4]);
}

// synthetic: Object.registerClass() for com.fmr.feb.pf.search.ui.containers.FPopularSearch es
com.fmr.feb.pf.search.ui.containers.FPopularSearch es["_documentDescriptor_"] =
new mx.core.UIObjectDescriptor({ type: mx.containers.Panel, nonInheritingStyles: function() { return {horizontalAlign: "center", verticalAlign: "middle"}; },

});

i have had to remove some code to make the post of acceptable length

[snapple]

Cool. I hadn't seen an example of using it, thanks.

I don't think though (and i am only speculating) that it provides enough separation between MVC (compared to JSP). It also still seems suspiciously 'JSF like'.

I understand the XML provides your View, so the 'length property and a getItemAt method' is all you need to act as the glue between your Controller and you Model. I've never looked at this before, but two things spring to mind:

1) Doesn't this put approach put more important 'business logic' performed by the Controller nearer the View and therefore represent a potential security risk?

2) It all seems a little cluttered - i know this is just because it's new to me.

Quite like:


private var __model:PopularSearches;


Is this how you define a class name. Seems weird that a whole class is made up form attributes and node values in an XML file. Not saying its good or bad - just strange... if you're new to it.

Thanks for taking the time hangalot. Much appreciated.

Regards, snapple

[hangalot]

Cool. I hadn't seen an example of using it, thanks.
thats what we are supposed to do here init :)


I don't think though (and i am only speculating) that it provides enough separation between MVC (compared to JSP). It also still seems suspiciously 'JSF like'.

not certain what JSF is. our standard arcihtecture would look something like this
C sets M in V, V dispatches event C executes Command, M gets altered and V gets updated. where flex is handy is that f the model is set in the View (like we do) it internally handles the update of the view for you (this is a positive, and when its a negative you can remove this behaviour).

so tons of code you would normally write is taken care of in the framework.

as far as frameworks go, we have adapted ARP (check on OSFlash about this) for our own use. someone on the ARP advisory board works with me, and hopefully when we have fledged it out a bit more, we will be contributing some to that framework in general


I understand the XML provides your View, so the 'length property and a getItemAt method' is all you need to act as the glue between your Controller and you Model.
no beteween the View and the model, as this is the mechanism the view uses to itterate over a collection of models (i don't think i made that clear before).
that interface is an itterators interface. for individual models you bind the components themselves.

I've never looked at this before, but two things spring to mind:

1) Doesn't this put approach put more important 'business logic' performed by the Controller nearer the View and therefore represent a potential security risk?

no, i don;t think so. the view should just dispatch events to which the controller reacts IMO. it might occasionally call a method on a controller or create a command (from a factory of some sort, but I am not a big fan of either of this. event driven and all that :)

2) It all seems a little cluttered - i know this is just because it's new to me.

Quite like:


private var __model:PopularSearches;


Is this how you define a class name. Seems weird that a whole class is made up form attributes and node values in an XML file. Not saying its good or bad - just strange... if you're new to it.

Is this how you define a class name. >> no thats a class level variable declaration
Seems weird that a whole class is made up form attributes and node values in an XML file.>> take a look at the next post i submitted to how it compiles down. the great thing about the mxml approach is really the source control angle.

Thanks for taking the time hangalot. Much appreciated.

its a pleasure. i really like flex, i am not a designy type person so am more interested in architecting and the like, but flex has been a relevation to me. using it in conjunction with openAMF or webservices with a proper architecture feels right, i enjoy doing my java coding and my flash coding in one instance of eclipse. great for the workflow and all that :) as a side note if you are planning on using flex, take a look at darron schall's blog on how to get it to work with ASDT + WTP in eclipse, then no flex builder is necesary (and that is just a buggier version of dreamweaver anyway)

[falltimemusic]

looks like a waste to me haha. i mean i guess some people are trying to make flash shopping carts with flex. But you can easily do that with just flash (using php, loadvars, xml, MySQL). And I personally don't care to use the components unless I'm building database management apps with flash. I don't really like their look and I hate their file size.

[hangalot]

ignorance is bliss unfortunately very unemployable have a happy new year

[Panzer]

looks like a waste to me haha. i mean i guess some people are trying to make flash shopping carts with flex. But you can easily do that with just flash (using php, loadvars, xml, MySQL). And I personally don't care to use the components unless I'm building database management apps with flash. I don't really like their look and I hate their file size.

Me too. I'd rather to wait upgrading to Flash 9 but not wet my feet on Flex if it only produce big SWF files(200k?). :p

[csdstudio]

Is this how you define a class name. >> no thats a class level variable declaration

Actually, that is an instance level variable. A class level variable is preceeded by 'static'.



private static var __variable:Number; //class level
private var _variable:Number; //instance level