Ok, here’s a documentation of my first foray into putting a Flash 8 front end on a ModX database using AMFPHP ( flash remoting ) and Actionscript 2.0, with a dose of css.
Demo here
http://www.scraf.nl/flash/mod01.html
I want to show the Flash side of things as opposed to the amfphp stuff, as you can get the data from the database with various methods i.e LoadVars, but here’s the class on the server anyway.
<?php
include_once("inc_sql.php"); // include database info.
// ---------------------------
// class name must be the same
// as the php file name
// ---------------------------
class ModxTut
{
var $dbhost = HOSTNAME;
var $dbname = DATABASE;
var $dbuser = USERNAME;
var $dbpass = PASSWORD;
// constructor function
function ModxTut()
{
// -----------------------------------------
// the method table describes all the
// available methods for this class to flash
// and define the roles of these methods
// -----------------------------------------
$this->methodTable = array(
// name of the function
"getPageTitle" => array(
"description" => "Details on a post",
"access" => "remote", // available values are private, public, remote
"arguments" => array ("dataa"),
"returntype" => "string"
),
"getPageContent" => array(
"description" => "Details on a post",
"access" => "remote", // available values are private, public, remote
"arguments" => array ("dataa"),
"returntype" => "string"
),
);
// Initialize db connection
$this->conn = mysql_pconnect($this->dbhost, $this->dbuser, $this->dbpass);
mysql_select_db ($this->dbname);
}
function getPageTitle($id)
{
$sql = "SELECT pagetitle FROM modx_site_content where id=$id";
$query = mysql_query($sql);
$dataa = mysql_fetch_array($query); // I use $dataa instead of $data in case of future conflicts
return $dataa;
}
function getPageContent($id)
{
$sql = "SELECT content FROM modx_site_content where id=$id";
$query = mysql_query($sql);
$dataa = mysql_fetch_array($query);
$dataa = str_replace("\r", "", $dataa); // flash being buggy about line breaks
return $dataa;
}
}
?>
I then put #include "amfphp_tut.as" on frame one of the actions layer in flash and this is remoting part of the .as file. ( ActionScript file )
/// NOTE: I have added the <?php syntax just to activate syntax highlighting, actionscript does not want or need the php tags.
<?php
import mx.remoting.*;
// ----------------------------
// create the responder object
// In this object we will define
// all the result function for
// the data received from server
// ----------------------------
mainResponder = new Object();
// echoString receiver
mainResponder.echoString_Result = function( dataa ){
trace("echoString result")
trace("received: " + dataa )
trace("----")
}
// echoPageTitle receiver
mainResponder.getPageTitle_Result = function( dataa ){
pageTitle.text += dataa;
}
// echoPageContent receiver
mainResponder.getPageContent_Result = function( dataa ){
pageContent.htmlText += dataa;
}
// generic onStauts responder, it will be invoked
// when an error is received from the server
mainResponder.onStatus = function ( dataa ) {
trace("an error occurred")
trace("in line: " + dataa.line)
trace("error level: " + dataa.level)
trace("description: " + dataa.description)
}
// define the path of our gateway.php
NetServices.setDefaultGatewayUrl( 'http://localhost/amfphp/gateway.php' );
// initialize a variable for the connection
conn = NetServices.createGatewayConnection();
// initialize the service for our class ModxTut
// an tell which is the responder object
// for all the calls to the server
serv = conn.getService("ModxTut", mainResponder);
serv.getPageTitle(1);
serv.getPageContent(1);
?>
Ok that was all amfphp stuff, but basically we have assigned the data from the title in the modx database to pageTitle.text and the modx_site_content to the pageContent.htmlText.
Time to make the text fields. The pageTitle field has an x and y postion of 2, and is 300 by 40 px.
<?php
_root.createTextField("pageTitle", getNextHighestDepth(), 2, 2, 300, 40);
pageTitle.html = true; // or else you see the html tags
pageTitle.wordWrap = true;
_root.createTextField("pageContent", getNextHighestDepth(), 20, 40, 300, 200);
pageContent.html = true;
pageContent.wordWrap = true;
?>
Add a scrollbar to the pageContent text field ( a scrollbar component must be in the library of the movie, add one to the stage then delete it to accomplish that.)
<?php
// scrollbar
this.createClassObject(mx.controls.UIScrollBar, "my_sb", 20);
// Set the target text field.
my_sb.setScrollTarget(pageContent);
// Size it to match the text field.
my_sb.setSize(16, pageContent._height);
// Move it next to the text field.
my_sb.move(pageContent._x + pageContent._width, pageContent._y);
?>
Ok the the matter of style. Flash only reads some styles, but I trying to use cascading styles, so have wrapped the pageContent in <html> tags.
<?php
// echoPageContent receiver
mainResponder.getPageContent_Result = function( dataa ){
pageContent.html = true;
pageContent.wordWrap = true;
pageContent.htmlText += "<html>";
pageContent.htmlText += dataa;
pageContent.htmlText += "</html>";
}
?>
and pageTitle....
<?php
// echoPageTitle receiver
mainResponder.getPageTitle_Result = function( dataa ){
pageTitle.text += "<html><h1>";
pageTitle.text += dataa;
pageTitle.text += "</h1></html>";
}
?>
Then a function to couple the stylesheet with the textfields ( must be done before accessing the data )
<?php
function getStyle() {
// load stylesheet first, then get content (separate function)
var flash_css = new TextField.StyleSheet();
flash_css.onLoad = function(success:Boolean) {
if (success) {
pageTitle.styleSheet = flash_css;
pageContent.styleSheet = flash_css;
} else {
pageContent.htmlText = "Style sheet appears to be rodgered";
}
};
flash_css.load("includes/bla.css");
};
getStyle();
?>
The whole .as file is now so..
<?php
function getStyle() {
// load stylesheet first, then get content (separate function)
var flash_css = new TextField.StyleSheet();
flash_css.onLoad = function(success:Boolean) {
if (success) {
pageTitle.styleSheet = flash_css;
pageContent.styleSheet = flash_css;
} else {
pageContent.htmlText = "Style sheet appears to be rodgered";
}
};
flash_css.load("includes/bla.css");
};
getStyle();
import mx.remoting.*;
// ----------------------------
// create the responder object
// In this object we will define
// all the result function for
// the data received from server
// ----------------------------
mainResponder = new Object();
// echoString receiver
mainResponder.echoString_Result = function( dataa ){
trace("echoString result")
trace("received: " + dataa )
trace("----")
}
// echoPageTitle receiver
mainResponder.getPageTitle_Result = function( dataa ){
pageTitle.text += "<html><h1>";
pageTitle.text += dataa;
pageTitle.text += "</h1></html>";
}
// echoPageContent receiver
mainResponder.getPageContent_Result = function( dataa ){
pageContent.html = true;
pageContent.wordWrap = true;
pageContent.htmlText += "<html>";
pageContent.htmlText += dataa;
pageContent.htmlText += "</html>";
}
// generic onStauts responder, it will be invoked
// when an error is received from the server
mainResponder.onStatus = function ( dataa ) {
trace("an error occurred")
trace("in line: " + dataa.line)
trace("error level: " + dataa.level)
trace("description: " + dataa.description)
}
// define the path of our gateway.php
NetServices.setDefaultGatewayUrl( 'http://localhost/amfphp/gateway.php' );
// initialize a variable for the connection
conn = NetServices.createGatewayConnection();
// initialize the service for our class ModxTest
// an tell which is the responder object
// for all the calls to the server
serv = conn.getService("ModxTest", mainResponder);
serv.getPageTitle(1);
serv.getPageContent(1);
// flash stuff again
_root.createTextField("pageTitle", getNextHighestDepth(), 2, 2, 300, 40);
pageTitle.html = true;
pageTitle.wordWrap = true;
_root.createTextField("pageContent", getNextHighestDepth(), 20, 40, 300, 200);
pageContent.html = true;
pageContent.wordWrap = true;
// scrollbar
this.createClassObject(mx.controls.UIScrollBar, "my_sb", 20);
// Set the target text field.
my_sb.setScrollTarget(pageContent);
// Size it to match the text field.
my_sb.setSize(16, pageContent._height);
// Move it next to the text field.
my_sb.move(pageContent._x + pageContent._width, pageContent._y);
?>
includes/bla.css
html{
font-family:Arial,Helvetica,sans-serif;
}
p,ul,li {
color:#666666;
}
a {
color:#000099;
}
h1 {
color:#FF0000;
}
h3 {
color:#000022;
font-weight: bold;
}
I spent a lot more time debugging this thing than I did writing it up, I’ve probaby missed a lot of important things.
More on amfphp here
http://amfphp.org/
MODX Staff
.