Creating a Flip Book CQ Component

The canvas element is a new tag included in HTML 5. This allows for dynamic renderings of 2D shapes and bitmap images. I recently stumbled across a great example of the powerful effects that can be accomplished with the canvas element and javascript on a web app called 20 Things I learned about Browsers and the Web. The web application tells a nice summary of the basic history of the internet and open web technologies. What really makes it cool is that the information is presented as an interactive book and allows the user to “flip” the pages by dragging the mouse.

I thought it would be interesting to take this functionality and create a re-usable component in CQ. This would allow authors to add the component onto any paragraph system and drag text and images from the content finder to populate the “pages” of the book. The following tutorial focuses on creating a custom CQ component that uses its own CSS, images, and Javascript to make it run.

The first step is to pop open CRXDE and create a custom component called pageflipper. Set the sling:resourceSuperType to foundation/components/list and set the following properties:

 

Next we are going to create a dialog so that the authors can add an image and title to each page in the flip book. Create a new Dialog underneath the pageflipper component and create nested nodes to match the below structure:

Now we are going to configure the properties of the bookPages widget with an xtype of slideshow. The SlideShow widget is an out of the box CQ5 widget that allows users to create slides (pages in our case) consisting of an image and title:

Next we will configure the headertext widget as simple textfield that will allow the authors to set a header for our component:

And finally as the last part of our dialog we will configure the size widget to allow the user to specify the size of the images displayed on a page:

Now we need to write some code in our pageflipper.jsp file to render the slide content as HTML. Below is the main portion of the code in which we iterate through all of the nodes below the current node whose name starts with “image”. We then render a specific HTML that our javascript library will use to dynamically create the flip book. View Full Source Code

 //grab all image nodes below the current element

NodeIterator childNodes = currentNode.getNodes("image*");
while (childNodes.hasNext()) {

  Node currNode = childNodes.nextNode();

   //caclulate relative path of image node
    String path = currNode.getPath();
    int index = path.indexOf("/jcr:content");
    path = path.substring(index + 13);
    Resource res = currentPage.getContentResource(path);
    if(res != null)
    {
          Image img = new Image(res);
          String imageName = img.getName();
         //get source URL of image
 String srcURL = img.getFileReference();
          //if the image has a valid file reference then render the html below
 if(srcURL != null && srcURL != ""){
    %>
 <section>
    <div>
       <h2 class="titleImage" id="<%=imageName %>"><%= name %></h2>
       <img style="margin-left:25px" src="<%=srcURL %>" width="<%=width != -1 ? width: "100%" %>" height="<%=height != -1 ? height: "100%" %>" />
     </div>
      </section><%
       }
    }
 }
 %>

Next we need to add the CSS and JavaScript for this custom component in our clientlibs folder within the pageflipper component. Copy the contents of the CSS and JS files from the source code into pageflipper.css and pageflipper.js respectively.  If you are looking for a more detailed examination on the canvas element and javascript used to create the page flip effect please check out this Case Study on HTML5Rocks.com

 

 

Make sure the categories property of the clientlibs folder is referencing the application in which you have created your custom component. In this case I have created the pageflipper component underneath the geometrixx-outdoors application.

Finally the last step is to add two images (included in the source code) to the design of the current site. It is considered a best practice in CQ to add images to the design of the site, rather than directly within the component structure. Make sure to update the pageflipper.css file to ensure that the images are referenced appropriately.

Now we can test our component, open up your browser and navigate to your author environment. You should see te Page Flipper component under Other (you may have to enter design mode and add it to the paragraph system) and drag it on to a paragraph system. Double click the component to configure it.

       

Once you have configured the component switch to preview mode and test out your component!

  

   

  1. Source Code
  2. Page Flipper Package (configured to be installed on the Gemoetrixx-Outdoors site, make appropriate changes for your site)
  3. images