Showing Drupal's CCK Module Fields in Flash

by Travis Tidwell | May 2009 | MySQL Content Management Drupal Open Source PHP

The CCK (Content Construction Kit) module is one of Drupal's most popular, contributed modules, and for a good reason. It gives the administrator the ability to create custom content types as well as custom fields that are essential for creating a web site that manages specific forms of content.

In this article by Travis Tidwell, we will use this module to create the structure required to enter content for each recipe in our Drupal web site. The dynamic content extracted from Drupal is incorporated as custom data within a Flash application.

Building a Recipe widget in Flash

We will start out by first increasing the size of our stage in Flash to 500 x 640. Once we have done this, we will need to resize our background so that it fits to the new stage. We will start this by first selecting the whole background region, and then converting that into a new Movie Clip by selecting Modify | Convert to Symbol from the Flash menu.

Flash with Drupal

This will t hen bring up a new dialog, where we can give our new Movie Clip a name, which we will call mcBackground. We then need to make sure that we check the Enable guides for 9-slice scaling, which will allow us to resize the background without affecting the rounded edges.

Flash with Drupal

Once we create a new movie clip from our background, we will then enter this Movie Clip and then adjust the 9-scale guides so that they only cover the rounded edges.

Flash with Drupal

We can now ex it the background movie clip, and then resize the movie clip to a new height of 632 using the Properties panel. Our next task is to move the current title field to the top-left of our Flash application, and then create some background regions that will hold our new fields. The design of how this will look is completely up to you, but here is an illustration of what I just described:

Flash with Drupal

Now that our layout is ready for new content, the next step is to add new TextFields to hold our recipe content.

Adding dynamic TextFields for Drupal content

The important thing to note here is that we will need to create a new layer for each text element within our Flash application, so that we can keep track of each field separately. We will do this within the timeline by creating three new layers for each of our new fields, and by then labeling them so that we can easily determine what they contain.

Flash with Drupal

Now that we have each one of these separated, we can add new text fields in each layer, to be used for the description, ingredients, and the instructions. For each new Text field that we create, we will need to make sure to give them an instance name so that we can reference them within ActionScript. Each of these instance names should reflect the names of the fields that we created for our Recipe content type, which will be description, ingredients, and instructions respectively.

Flash with Drupal

When we are done, we should have something that resembles the following:

Flash with Drupal

We are now ready to hook up these TextFields to real Drupal content.

Using ActionScript to show Drupal CCK fields

We can start this off by opening up our main.as file, and then we will shift our focus to the onNodeLoad function.

// Called when Drupal returns with our node.
function onNodeLoad( node:Object )
{
// Print out the node title.
title.text = node.title;
}

This function gets called after our service call to Drupal's node.get service call and returns with the contents of the node. Since we have new TextFields for each custom recipe field, we can use the node object, passed to the onNodeLoad function, to reference the data from these custom fields, and populate our TextFields with that data. Since the contents of this node object are somewhat a mystery, there is a fantastic tool that is provided with Drupal that will allow us to examine how this node is structured. We will then be able to use that information to fill out the contents of our onNodeLoad function to show our complete recipe node.

Using the Services Administrator

We now need to shift our focus back to Drupal, where we will navigate to the Service Administrator section by going to Administer | Services. The Services module comes equipped with a fantastic tool for analyzing any service routine when working with external applications. It allows for you to call any service routine, with any specified argument, and then see the result of that routine call. This can be used to easily analyze the data structure that our Flash application will receive after it makes a call to any of the service routines available.

Since we are using the node.get service routine to load each recipe node, we should be able to examine how the Description, Ingredients, and Instructions fields are represented, and then easily apply that to our Flash application. Let's do this by clicking on the link that says node.get in the node section. This will bring up the following page:

Flash with Drupal

The Services module automatically places a valid Session id in the session field, so we can just keep this field as it is. Because of this, all we really need to provide is the nid (node ID) of our Recipe node—since the fields field is optional.

In order to determine the node ID for any node within the Drupal web site, simply navigate to Administer | Content, which will list all the content within the Drupal web site. The node ID can be found by hovering over any content link and then reading the last number in the URL. For example, if we hover over our Recipe node, we should see a URL similar to http://localhost/drupal6/node/5, which means that our node ID for this node is 5.

After we have the entered the node ID in the nid field, we can now click on the button that says Call Method. This will then show the results of that call within the Results section just below the Call Method button. To the untrained eye, this may look intimidating, but really what this is showing is the results for all the data contained within the recipe node that we just created, including the Ingredients and Instructions. If we look within this data structure, we should see something that looks similar to the following:

[field_ingredients] => Array
(
[0] => Array
(
[value] => 1 skinless, boneless chicken breast half
2 tablespoons minced green onion
2 tablespoons minced red bell pepper
3/4 cup shredded Monterey Jack cheese
5 (6 inch) flour tortillas
[format] => 1
)
)

Within our Flash application, we can now access the Ingredients field in the node object (which is what is returned when you call node.get). The ActionScript code to reference this field should look similar to the following:

node.field_ingredients[0]["value"]

Now, let's apply this concept to show the ingredients and instructions in our Flash application.

Showing CCK information in ActionScript

Let's move back to your Flash application and open up the main.as file. Since we now have an understanding of how the node data is structured, we can apply that knowledge to display the correct information within our Flash application. And, we will do this within the function onNodeLoad

Showing the node description

Earlier we changed our node type to represent the Body field as a description. Because of this change, it may be confusing at first when we access the Description field, simply because, the node object does not change the data structure to say description, but keeps it as body. Because of this, we will need to use the code node.body instead of node.description in order to access the description of our recipe node.

It is also very important to note that the Body/Description field for the node will be delivered as HTML text. If we set our description TextField with the contents of the node description, then we will end up showing the HTML tags along with the description contents. To solve this issue, Flash has added a new property to the TextField object that allows you to provide HTML text and it will parse the HTML and show that text accordingly. This property is called htmlText, and can be provided like the following:

// Called when Drupal returns with our node.
function onNodeLoad( node:Object )
{
// Print out the node title.
title.text = node.title;
// Print out the description.
description.htmlText = node.body;
}

Showing the ingredients and instructions CCK field

Since we have already examined the contents of the node object using the Drupal Services Administrator, we can populate our ingredients and instructions TextFields using the contents for each CCK field that we created. This will look as follows:

// Called when Drupal returns with our node.
function onNodeLoad( node:Object )
{
// Print out the node title.
title.text = node.title;
// Print out the description.
description.htmlText = node.body;
// Show the ingredients and instructions.
ingredients.text = node.field_ingredients[0]["value"];
instructions.text = node.field_instructions[0]["value"];
}
}

Now that we have all the fields parsed correctly in ActionScript, we are ready to run our application to see it in action. But before we are able to test it, we will need to temporarily hard code the node ID variable at the top of the file, so that it reflects the recipe node ID that we just created in Drupal.

// Declare our variables
var baseURL:String = "http://localhost/drupal6";
var gateway:String = baseURL + "/services/amfphp";
var sessionId:String = "";
var nodeId:Number = 5;

We can now finally test our Flash application, where we should then see something that looks like the following:

Flash with Drupal

Although this is very cool, there is still a big question as to what we do when the ingredients and instructions text does not fit within the TextField region that we created. As it is right now, any text outside of this region will be clipped and therefore unreadable. Since we do not want this to happen, we can easily add some scroll bars to our text fields, so that it can hold any amount of text.

Adding ScrollBars to our TextFields

Surprisingly, thanks to the wonderful components that Flash provides out of the box, adding scroll bars to our text fields is not that difficult. To add a scroll bar to any text field, we will use the wonderful UIScrollBar component, which can be found in the components section of our Flash application. We will first open up the COMPONENTS section by clicking on the user interface button in our window toolbar on the right-side of the Flash IDE.

Flash with Drupal

We can then easily add a scroll bar to our TextFields by simply dragging a UIScrollBar component so that it overlaps with that TextField. Once we drop the scroll bar over the text region, it will snap into place telling us that a connection has been made. We will do this for both the Ingredients and Instructions TextFields as shown:

Flash with Drupal

After we have our scroll bars in place, the next step is to click on each one of them and give them an instance name using the Properties panel. We will call each one ingredientScroll and instructionScroll respectively. Now that our scroll bars have instance names, we can add some simple code to our onNodeLoad function so that each scroll bar will refresh as the text is populated within them. We can do this by calling the update function on each UIScrollBar component as follows:

// Called when Drupal returns with our node.
function onNodeLoad( node:Object )
{
// Print out the node title.
title.text = node.title;
// Print out the description.
description.htmlText = node.body;
// Show the ingredients and instructions.
ingredients.text = node.field_ingredients[0]["value"];
instructions.text = node.field_instructions[0]["value"];
// Update the scroll bars.
ingredientScroll.update();
instructionScroll.update();
}

When we run our application again, we should be happy to see that our scroll bars show all the text for each CCK field within Drupal.

Flash with Drupal

Now that our Flash application works as we would expect, the next step is to change our nodeId variable back so that any node ID can be passed to our Flash application to show the recipe content of that node.

// Declare our variables
var baseURL:String = "http://localhost/drupal6";
var gateway:String = baseURL + "/services/amfphp";
var sessionId:String = "";
var nodeId:Number = root.loaderInfo.parameters.node;

After we run the Flash application again, we are now ready to take our Recipe Flash application and use it within Drupal.

Summary

In this article we learned how to incorporate custom data within our Flash applications by walking through a real Recipe web site example. By utilizing the power of CCK in our Flash applications, we have opened the door to a number of possibilities where Flash can be used to display dynamic content that is specific to any use case.


If you have read this article you may be interested to view :

About the Author :


Travis Tidwell

Travis Tidwell is the founder and CTO for TMT Digital (http://www.tmtdigital.com), a company that specializes in the development of Flash applications for the Drupal content management system. He is also the sole developer for the Dash Media Player (http://www.tmtdigital.com/project/dash_player, http://www.drupal.org/project/dashplayer), which is a media player built specifically for Drupal. As well as contributing this media player, Travis is also the author and co-maintainer for the FlashVideo module (http://www.drupal.org/project/flashvideo), which is a complete video solution for Drupal.

Travis graduated with a Bachelors of Science in Electrical and Computer Engineering from Oklahoma State University and has worked as an Embedded Systems Engineer for companies specializing in automotive and agricultural GPS products. Travis then fell in love with web development and more specifically with Drupal and Flash, where he has developed numerous sites including http://www.delicioso.com for Food Network's Ingrid Hoffmann.

Travis is happily married to his beautiful wife, Erin, and is the proud parent of a feisty one-year-old named Brycen. When Travis isn't working on the computer (which is rare these days), he enjoys the performing arts including playing guitar, singing, and tap dancing (Search for "Soul Man Tap" at http://www.youtube.com to see him in action).

Books From Packt


Drupal for Education and E-Learning
Drupal for Education and E-Learning

Drupal 6 Social Networking
Drupal 6 Social Networking

PHP 5 CMS Framework Development
PHP 5 CMS Framework Development

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

Spring Web Flow 2 Web Development
Spring Web Flow 2 Web Development

Learning Drupal 6 Module Development
Learning Drupal 6 Module Development

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Mastering phpMyAdmin 3.1 for Effective MySQL Management
Mastering phpMyAdmin 3.1 for Effective MySQL Management


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
c
2
3
H
7
W
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software