Jun 22 2007
FlexBook in Flex3 running in Adobe AIR
Dear readers,
Sorry for the long silence, it’s been extremely busy at work for the past weeks.
I’ve also been making a website for my wedding next month, and for that I wanted to use the magnificent FlexBook component written by Elijah Greenfield. I struggled a little getting it to work on my MacBook Pro without FlexBuilder installed, but finally managed to get it to work and I’d love to share it with you as the tutorials for this component on the web seem to be non-existing.
To take it one step further, I also got it working in Flex 3 (which has been released on Adobe Labs) and running in Adobe AIR (formerly Apollo), which I thought was pretty cool 
You can download the sources here.
To make it extremely cool, I wondered if I could get it to work in Remoting also using AMFPHP 1.9, Flex3 and running in AIR. And so I did:-)
The sources for a simple “Hello World” demo and for the AMFPHP demo are also included in the same ZIP-file.
As always, everything was built using only Open Source software (in my case in Eclipse using the free Flex2/Flex3 SDK, the AIR SDK and the FlexBook component, and AMFPHP 1.9), it can run on any platform at no cost.
If you don’t have the Flex3 SDK or Adobe AIR SDK yet, head over to Adobe Labs first to download them.
Included in the ZIP-file is everything you need to make it run.
Simply unzip the contents of the ZIP-file to a directory on your PC/Mac, create a new project in Eclipse and import the files.
You’ll notice the build.properties file. It is set up to compile the FlexBook demo by default. However, all that is needed to compile the HelloWorld demo and the AMFPHP demo is also set-up. All you need to do to compileone of those is comment out the appropriate lines in the build.properties file, and comment the ones you don’t need anymore.
For more detailed instructions on how to set up your Eclipse environment and use the ANT-templates, check out my other post: “Build and compile AS3, Flex2 and Apollo applications in Eclipse using Mac OS X”.
Basically, to use the FlexBook component, you only need to include the namespaces xmlns:controls=”qs.controls.*” and xmlns:effects=”qs.effects.*” in your mxml file. Make sure you use the right classpath, including it like this presumes the folder “qs” is on the same level in the hierarchy as your MXML-file. If you unzipped the contents of my download it should be in the right place.
Next, you can use the FlexBook component as such:
<controls:FlexBook id=”book” y=”70″ width=”580″ height=”435″ horizontalCenter=”0″
animateCurrentPageIndex=”true”
animatePagesOnTurn=”true”
activeGrabArea=”corner”
edgeAndCornerSize=”50″
><!–create the cover page in the book–>
<controls:cover>
<mx:Label text=”FlexBook AIR example” fontSize=”18″ horizontalCenter=”0″ verticalCenter=”0″ width=”100%” textAlign=”center”/>
</controls:cover><!–create the back cover page–>
<controls:backCover>
<mx:Label text=”And now, go study and have fun :-)” fontSize=”12″ horizontalCenter=”0″ verticalCenter=”0″ width=”100%” textAlign=”center”/>
</controls:backCover>
<mx:Image source=”@Embed(’assets/ss1.jpg’)” />
<mx:Image source=”@Embed(’assets/ss2.jpg’)” />
<mx:Image source=”@Embed(’assets/ss3.jpg’)” />
<mx:Image source=”@Embed(’assets/ss4.jpg’)” />
<mx:Image source=”@Embed(’assets/ss5.jpg’)” />
<mx:Image source=”@Embed(’assets/ss6.jpg’)” />
</controls:FlexBook>
The “controls” namespace is known because you referenced it in your Application tag. To compile, the compiler also needs to know where to find the AS3 sources for the component. That is handled by the build.xml file which serves the right source path to the compiler (qs.*).
Next, you need to provide a front- and back-cover. Between these tags you can use any Flex component you like, like a mx:Label, mx:Text, mx:Image and so on.
Following the </controls:backCover> tag you start creating the pages of your FlexBook. Each component you use represents a new page in the FlexBook. In the demo I just used 6 <mx:Image> tags with embedded images to create 6 photo-pages. Feel free to replace them with your own content, or to use entirely different stuff. You can embed webpages, video, text, htmlText, images, … or your own components.
To compile them for Adobe AIR, you need 1 more XML file that describes your AIR Application. There are 3 files included in the ZIP-archive, one for each demo.
If the compiler gives you cr@p about compile-time constants, edit the flex-config.xml and set the “strict”-option to false. Then you should have no more trouble compiling the sources.
Use it, have fun with it, study it, and let me know what you think!
(P.S.: I’ll be posting more demo’s on Flex2/3, AIR and combining them with AMFPHP this weekend. One of them will be an Flex3/AMFPHP example of how to create a guestbook once I’ve written that for my wedding website. If you speak Dutch or are just curious, go and have a look -> http://www.pinnemuts.be And let me know what you think about it.)
Sven
