Using a flexbook component

Now that you know the basics of writing Flex applications, you can visit livedocs.adobe.com to learn about the various built-in components.
For custom built components however, there are very few tutorials to aid you. I will be talking about adding a FlexBook component to your application. This allows you to layout your components on a set of pages, in a book, and also gives you a nice page-turning effect. This component has become very popular recently, and you can see it on many online magazines.

Firstly, download the FlexBook component from here.

Create a new project named, say "MyBook" using FlexBuilder. Then, unzip the file you downloaded into the project's main directory. This should create a folder named 'qs' containing all the ActionScript files.

Now, to create your simplest application with FlexBook, use the following code :

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://www.adobe.com/2006/mxml" 
    xmlns:l="*" layout="absolute"
    xmlns:controls="qs.controls.*"
    xmlns:containers="qs.containers.*"
>

<containers:Landscape width="100%" top="30"
           bottom="50" paddingLeft="30" 
           paddingTop="30" paddingBottom="30" 
           paddingRight="30" id="landscape" 
           zoomLimit="none"
           clipContent="false"
           cachePolicy="off" 
>
 <Canvas width="100%" height="100%" 
             horizontalScrollPolicy="off"
 >    
 <controls:FlexBook id="book" 
        y="47" left="40" right="40" top="40"
        height="400"
    animateCurrentPageIndex="true"
    showCornerTease="true"
    activeGrabArea="corner"
    edgeAndCornerSize="60"
    itemSize="halfPage" 
 >  

 <controls:cover>
 <l:LetterPage text="front" 
                   backgroundColor="#000000" 
                   color="#FFFFFF" />
 </controls:cover>

 <controls:backCover>
 <l:LetterPage text="back" 
                  backgroundColor="#000000" 
                  color="#FFFFFF" />
 </controls:backCover>

 </controls:FlexBook>
 </Canvas>
</containers:Landscape>

</Application>

This creates a FlexBook for you with a front and back-cover. Put in any container like a HBox or a list within the FlexBook tags and you should be able to see them inside a book when you build and run your application. I am sure this has given you an insight into how to use custom components, and how to integrate them with your project.

Now that you know how to use a custom component, next time I will be teaching you about how to create your own custom component using MXML and ActionScript.