On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • 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/
    • Very cool and interesting. Nice work. smiley
        Ryan Thrash, MODX Co-Founder
        Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
      • Nice work there!

        Indeed interesting to see where it goes smiley.

        regards,

        zi
          Zaigham R - MODX Professional | Skype | Email | Twitter

          Digging the interwebs for #MODX gems and bringing it to you. modx.link
        • you can also just pull xml into flash

          http://modxcms.com/forums/index.php/topic,2638.0.html