blog.log2e.com » Cairngorm http://blog.log2e.com Tutorials and Code Snippets Mon, 01 Jun 2009 13:05:31 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Getting Started with the PureMVC Startup Manager – Part 1 http://blog.log2e.com/2008/05/16/getting-started-with-the-puremvc-startup-manager-part-1/ http://blog.log2e.com/2008/05/16/getting-started-with-the-puremvc-startup-manager-part-1/#comments Fri, 16 May 2008 14:04:50 +0000 Stefan Schmalhaus http://blog.log2e.com/?p=19 Coming from a Flex/Cairngorm background, I’ve always missed a utility that takes care of the asynchronous loading of resources during application startup. Being too lazy to write one myself, I usually chain together several Cairngorm commands for loading configuration settings, stylesheets, language resources and initial data from a database. Each command is only executed if the predecessor task has been finished successfully. The user interface isn’t initialized until the whole chain is completed, otherwise an error message is generated and the application won’t start. It’s not elegant but it works.

When I started to learn PureMVC (and I’m still learning), I was happy to discover that the AS3 version is accompanied by a Startup Manager. This utility isn’t part of the core PureMVC framework and has to be downloaded and installed separately, but it nicely integrates with the “PureMVC way of things”.

There’s a very well-documented sample project (Startup as Ordered) from the author of the utility, Philip Sexton. After exploring the source code of this project, I thought I give it a try and set up my own little startup sequence. Philip’s sample just simulates the asynchronous loading with the help of another utility he wrote (Asynchronous Stub), so I decided to take a more real-world scenario where an external stylesheet and an XML file are loaded before the user interface is created. Once you have understood the basic setup, it’s no big deal to extend the startup sequence by, for example, making asynchronous calls to remote services.

Preparing the Project Space

Loading a stylesheet and some initial data is a common task in both Flash and Flex projects. So my approach in this tutorial is to set up a pure AS3 project that can easily be adjusted to work in both worlds. This also means that you can use whatever IDE you prefer for ActionScript coding. I’m using FlashDevelop along with the Flex 3 SDK but the project space would look very similar in FlexBuilder.

If you haven’t already done so, download the PureMVC framework and the Startup Manager. Make sure that both libraries are available to your project. Either copy the SWC files in your project space or add their locations to the classpath. On the top level, your project should contain the three folders bin, lib and src. For my purposes, I placed copies of the SWC files in the lib folder so that I can provide a working FlashDevelop project for download that includes all resources.

Choose a package name (I’m going to use com.log2e.puremvcdemo) and create the usual model, view, controller folders. Also, in addtion to your document class (Main.as) create an empty file with the name ApplicationFacade.as in the puremvcdemo folder. You project panel should look similar to this now:

Project Panel

The Resource Files: styles.css and data.xml

Inside the bin folder create two text files with the names styles.css and data.xml. These are the resources that we will be loading during startup. The stylesheet is pretty simple:

  1. .title {
  2.    font-size:16px;
  3.    font-family:Arial,Helvetica,sans-serif;
  4.    font-weight:bold;
  5.    color:#990000;
  6. }
  7.  
  8. .label {
  9.    font-size:14px;
  10.    font-family:Arial,Helvetica,sans-serif;
  11.    font-weight:bold;
  12.    color:#999999;
  13. }
  14.  
  15. p {
  16.    font-size:12px;
  17.    font-family:Arial,Helvetica,sans-serif;
  18.    color:#333333;
  19. }

The XML file contains some sample content:

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <site>
  3. <title>Welcome to the PureMVC Startup Manager Demo!</title>
  4. <sections>
  5. <section id="1" label="Home">
  6. <content>
  7. <![CDATA[<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque consequat. Nam ut leo <i>vitae metus vehicula</i> posuere. Nullam nunc. Vivamus nec ligula vel tortor molestie elementum. Integer faucibus elementum dolor. Nulla lorem. Quisque varius sodales mi. Nam tincidunt pede. Nam scelerisque nulla a nisl.</p>
  8. <p>Vivamus nec ligula vel tortor molestie elementum. Nam ut leo vitae metus vehicula posuere. Nullam nunc. Vivamus nec ligula vel <b>tortor molestie elementum</b>. Integer faucibus elementum dolor. Nulla lorem. Quisque varius sodales mi. Nam tincidunt pede. Nam scelerisque nulla a nisl. Quisque consequat.</p>]]>
  9. </content>
  10. </section>
  11. </sections>
  12. </site>

Important note: Make sure that the HTML-coded content inside the CDATA block is only composed of HTML tags that can be interpreted by HTML-enabled textfields in Flash/Flex.

In the next part of this tutorial we will be taking a closer look at the inner working of the Startup Manager.

You can download the sample files from here (the ZIP archive includes a FlashDevelop project file). If you want to comment on this tutorial please post in the comments section at the end of the introductory post.

]]> http://blog.log2e.com/2008/05/16/getting-started-with-the-puremvc-startup-manager-part-1/feed/ 4 Using AMFPHP with ADOdb http://blog.log2e.com/2008/05/05/using-amfphp-with-adodb/ http://blog.log2e.com/2008/05/05/using-amfphp-with-adodb/#comments Mon, 05 May 2008 11:15:09 +0000 Stefan Schmalhaus http://blog.log2e.com/?p=1 Very often you want to add functionality from a PHP library to your AMFPHP service classes. This short tutorial shows the use of ADOdb as database abstraction layer and may be especially helpful for beginners with AMFPHP.

ADOdb is a widely used database abstraction library that supports a lot of databases. If you want to add cross-database support to your Flex application, ADOdb is an excellent choice. But even if you only use MySQL as your bread-and-butter database, ADOdb will greatly help you to simplify your database operations.

Folder Structure

First, let’s take a look at the folder structure on the server. I usually organize my server directories like this:

There is an includes folder on the same level as the amfphp installation folder. The includes folder contains other folders, one for each PHP library (in this case ADOdb, PHPMailer and TCPDF). Download the ADOdb library from here and upload the files to the includes/adodb folder.

globals.php

It is recommended that you add globally used variables to AMFPHP’s globals.php file. Since most of your service classes probably need access to the database this file is the best place for configuring your database settings and the path to your external PHP libraries. So let’s add these lines to the globals.php file:

  1. define('DB_HOST', 'localhost');
  2. define('DB_USER', 'dbuser');
  3. define('DB_PASSWORD', 'dbpassword');
  4. define('DB_NAME', 'dbname');
  5. define('INCLUDES_PATH', '/base/server/path/includes/');

Of course, you have to adjust the database and path settings to your needs. The INCLUDES_PATH constant should hold the absolute path to your includes directory on the server.

Sample Classes

Let’s say you have a MySQL database that holds a table with product data. For the sake of simplicity, we assume that there are only two fields in this table, product_id and product_name.

If you use the Cairngorm framework for your Flex application you are familiar with the concept of Value Objects (VOs). Instead of using XML or simple arrays, VOs allow for sending back and forth typed objects between Flex and AMFPHP. We define a simple ProductVO class and place the ProductVO.php file in AMFPHP’s services folder.

  1. <?php
  2. class ProductVO
  3. {
  4.    var $_explicitType = 'ProductVO';
  5.    var $productId;
  6.    var $productName;
  7. }
  8. ?>

Now we add a service class (ProductsService.php) to the services folder. The ProductsService.php file includes the ProductVO class and the ADOdb library. The constructor establishes the database connection (for the syntax take a look at the ADOdb documentation), and the getProducts() mehod retrieves all products from the database, wraps them into ProductVO objects and sends them back to your Flex application.

  1. <?php
  2. require_once(INCLUDES_PATH.'adodb/adodb.inc.php');
  3. require_once('ProductVO.php');
  4.  
  5. class ProductsService
  6. {
  7.    var $db;
  8.  
  9.    /**
  10.     * Constructor
  11.     */
  12.    function ProductsService()
  13.    {
  14.       $this->db = NewADOConnection('mysql');
  15.       $this->db->Connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
  16.       if (!$this->db) die('Connection failed');
  17.       $this->db->SetFetchMode(ADODB_FETCH_ASSOC);
  18.    }
  19.  
  20.    /**
  21.     * This method retrieves all products from the database
  22.     */
  23.    function getProducts()
  24.    {
  25.       $products = array();
  26.       $sql = 'SELECT product_id, product_name FROM products';
  27.       $result = $this->db->Execute($sql);
  28.       if ($result)
  29.       {
  30.          while (!$result->EOF)
  31.          {
  32.             $productVO = new ProductVO();
  33.             $productVO->productId = $result->fields['product_id'];
  34.             $productVO->productName = $result->fields['product_name'];
  35.             array_push($products, $productVO);
  36.             $result->MoveNext();
  37.          }
  38.       }
  39.       return $products;
  40.    }
  41.  
  42. }
  43. ?>

In a similar way you can add other PHP libraries to your AMFPHP classes (like the above mentioned PHPMailer and TCPDF libraries). I hope this example helps you to utilize the power of some of the most popular PHP libraries for your Flex applications. If you have suggestions or requests please comment or get in touch with me.

]]> http://blog.log2e.com/2008/05/05/using-amfphp-with-adodb/feed/ 3