FLEX 2.0.1 Editing a TextArea with RichTextEditor, PHP, and MYSQL

The first thing we want to do is create a database and tables. Assuming you know something about mysql, you can use this script which works with the sample files included for this tutorial.

database.sql

#
# Table structure 
#
DROP TABLE IF EXISTS MyTable;
CREATE TABLE MyTable (
     
 id int(10) unsigned NOT NULL,
 myhometext text,
 PRIMARY KEY (id)
);

The first part of our application will have a TextArea that displays the information from our database by using a little bit of ActionScript to call a PHP file. Then it uses an event listener for changes.  It will also contain a state that calls to a component which houses the RichTextEditor.

test.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();" xmlns:test="*">
 <mx:states>
  <mx:State name="admin">
   <mx:RemoveChild target="{homeText}"/>
   <mx:RemoveChild target="{button1}"/>
   <mx:AddChild position="lastChild">
    <test:edit x="212" y="48"/>
   </mx:AddChild>
   <mx:RemoveChild target="{button2}"/>
   <mx:AddChild position="lastChild">
    <mx:Button x="264" y="486" label="Return Home" click="this.currentState=''"/>
   </mx:AddChild>
  </mx:State>
 </mx:states>
<mx:Script>
 <![CDATA[
       import flash.events.*;
       import flash.net.*;
    private function init():void {
     var loader:URLLoader = new URLLoader();
     loader.load(new URLRequest("/php/get.php"));
     loader.addEventListener(Event.COMPLETE,onComplete);
     function onComplete(event:Event):void {
     homeText.htmlText = event.target.data;
     }
    }
 ]]>
</mx:Script>
 <mx:TextArea x="209" y="129" width="615" height="301" id="homeText"/>
 <mx:Button x="742" y="438" label="Admin" id="button1" click="this.currentState='admin'"/>
 <mx:Button x="623" y="438" label="Refresh Text" click="init()" id="button2"/>
 
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="614" height="478" creationComplete="init();" >
 <mx:Script>
 <![CDATA[
    import flash.events.*;
       import flash.net.*;
    private function init():void {
  var loader:URLLoader = new URLLoader();
     loader.load(new URLRequest("/php/get.php"));
     loader.addEventListener(Event.COMPLETE,onComplete);
     function onComplete(event:Event):void {
     myhometext.htmlText = event.target.data;
     }
    }
 ]]>
</mx:Script>
 <mx:Script>
<![CDATA[
 import mx.controls.Alert;
   private function sendInfo():void{
    if(myhometext.text==""){
     mx.controls.Alert.show("You can't submit a blank form!")
    } else {
      homeform.send()
    }
   }
  private function thanks(evt:Event):void{
    if(String(homeform.lastResult)=="yes") mx.controls.Alert.show("Updated - Click OK then click refresh")
    if(String(homeform.lastResult)=="no")mx.controls.Alert.show("Darn, it didn't work")
   }
  ]]>
</mx:Script>
<mx:HTTPService id="homeform" url="/php/post.php" method="POST" contentType="application/x-www-form-urlencoded" resultFormat="text" result="thanks(event)">
         <mx:request>
         <myhometext>{myhometext.htmlText}</myhometext>
         </mx:request>
         </mx:HTTPService>
 <mx:RichTextEditor x="39" y="10" width="516" height="389" id="myhometext">
 </mx:RichTextEditor>
 <mx:Button x="475" y="407" label="Submit" click="sendInfo()"/>
 <mx:Button x="396" y="407" label="Refresh" click="init()"/>
</mx:Panel>

<?PHP
ini_set('display_errors', "1");
ini_set('error_reporting', E_ALL ^ E_NOTICE);
//Connect to Database
include 'connect.php'; 
//collect the main data
$myhometext = $_POST['myhometext'];

$id = $_POST["id"];
$query = ("REPLACE MyTable (id,myhometext) VALUES ('$id','$myhometext')");
$result = mysql_query($query);
echo "yes";
if (!$result) {
    $message  = 'Invalid query: ' . mysql_error() . "\n";
    $message .= 'Whole query: ' . $query;
    die($message);
    echo "no";
}
?>

We use “replace” here because we only insert one record in the row with a value of 0. So when we pull the text back into the editor it only replaces it and doesn’t create a new record.

Now to pull the information from the database. Instead of using XML, we are simply going to echo or print whats in the database. FLEX will think of it as text, or raw htmlText in this case.

get.php

<?PHP
ini_set('display_errors', "1");
ini_set('error_reporting', E_ALL ^ E_NOTICE);
//Connect to Database
include 'connect.php'; 
//collect the main data
$query = "SELECT * FROM MyTable WHERE id=0";
$result = mysql_query($query) or die('Error, query failed');
$_POST = mysql_fetch_array($result);
$myhometext = $_POST["myhometext"];
echo "$myhometext";
 
?>

There you have it. Now all you need is database info so the PHP can talk to the database.

connect.php

<?php
$db_host = "localhost";
$db_user = "";
$db_pwd = "";
$db_name = "";
mysql_connect($db_host, $db_user, $db_pwd);
mysql_select_db($db_name) or die( "Unable to select database");
?>

The key thriller is the ability to pull the htmlText from the database and listen for changes.

<![CDATA[
    import flash.events.*;
       import flash.net.*;
    private function init():void {
  var loader:URLLoader = new URLLoader();
     loader.load(new URLRequest("/php/get.php"));
     loader.addEventListener(Event.COMPLETE,onComplete);
     function onComplete(event:Event):void {
     myhometext.htmlText = event.target.data;
     }
    }
 ]]>
</mx:Script>

creationComplete="init();

If you play with the project files remember to edit  loader.load(new URLRequest("/php/get.php")); to use http://yourdomain.com/php/get.php

Do this for each and also include a crossdomain.xml file or you are allmost surely going to run into errors. - ISO