domenica, ottobre 14, 2007

[jsn]Adobe Flex Presentation - Behaviour - Business Logic

Before I start I would say that I never seen an action script line
before today, day in which I started playing around with FLEX.

Since the Hello World example is old fashioned, I have the great idea to start
with something a bit harder, but just a bit since I want to separate my action script
code from the mxml.
basically i would to use mxml as a presentation layer,
an external file for all the logic (I called it BI.as)
and another AS file for handle the behaviour of my code



Seems that doing so i didn't respect the K&R commandments #0 that is
c:\> Thou shalt not start to learn a language without write THE proper hello world_

so, for that, i had to pay a big pain!
but in the end I'll be forgive and I come to a solution.


here the MXML:
kentatest.mxml

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="oncreation();">
<mx:Script source="BI.as" />
<mx:Script source="behaviour.as" />
<mx:Panel title="kenta template" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:TextArea id="area1" />
<mx:Button id="btnSubmit" label="Submit" />
</mx:Panel>
</mx:Application>



and here the code, first the Business logic file:

BI.as

public function hello():void{
area1.text='Hello.kenta()';
}


and now the Behaviour file:

behaviour.as

private function oncreation():void{
btnSubmit.addEventListener('click', function (event:MouseEvent):void{
hello();
});
}


so in the end seems that I did i...what?!? why I put that lines in orange?
basically it was the fault that cause all of my pain trying doing this, without that lines
nothing work.
that lines is the same thing of write <body onload="oncreation"
on a HTML page.

so even if I can't completely separate actionscript code from the mxml presentation,
in this way I can add events externally in the behaviour file,
after that i tried to use addEventListener('creationComplete',...
but seems that flex didn't recognise the addEventListener function.
Posta un commento