logo
Simple Chinese Traditional Chinese Japanese

How to develop a Pjax application with Flash

How to develop a Pjax application with Flash

August 29, 2006, by Fred Chiang, Senior Consultant of ICE Technology Corp.

Level: Beginning

API: iPush V2 Flash Component Library (for ActionScript 2)

Background

With iPush Flash API, we can develop a Pjax flush agent to trigger off JavaScript for proactively updating specific contents of a web page. No XMLHttpRequest, no background pulling, all streaming data come alone in the event-trigger, push way.

Requirements

The requirements of developing and run-time environment for Pjax with Flash here are:

  1. iPush Server V2
  2. iPush V2 Flash API
  3. Flash MX 2004 or Flash 8
  4. Web Server
  5. Browser with the interaction capability between JavaScript and Flash Player. Such as IE, Firefox, Netscape, or Safari.
  6. Flash Player plug-in installed in browser

Note 1: You can get iPush Server V2 and iPush V2 Flash API in ICE Developer Center.

And the skills required here for understanding further introduction in this article:

Note 2: Quickly learn about how the iPush pub/sub messaging works, please refer to White Paper: Enabling Real-time RIA with iPush Server.

Working flow

Please take a look at following figure:

Pjax working flow

Figure 1. Pjax working flow

Streaming data keep coming and displaying by repeating 4.~8..

As the data source, it can be live feed of financial market, news, sport scoreboard, instant messenger, chat room... etc. Of course, data can come from file, database, web services, HTTP get/put, socket connection, or other messaging system, data can be accessed with the software development tool you familiar with, then publish them to iPush Server through iPush API.  

Sample introduction and download

We will use Flash applications to be samples of streaming data source and Pjax flush agent.

After extract the zip file, there are two folders you will work on:

Figure 2. data source: pjax_table_sender.htm

Figure 3. live table: pjax_livetable.htm

Publisher uses the data source pjax_table_sender.swf (run in standalone Flash Player or browser with Flash Player plug-in) to connect and send data in four cells (A1, B1, A2, B2) to iPush Server.

Subscriber uses the live table web page to subscribe and receive the cells data from iPush Server. The web page is a working stage of:

Why not try them now?

Let's go deeply on each part.

Data Source - pjax_table_sender.fla

Please use the Flash MX 2004 or Flash 8 to open the file pjax_table_sender.fla, check out the ActionScript codes and iPush Flash component library (iPush2Link).


A1_txt.tabEnabled = yes;
A2_txt.tabEnabled = yes;
B1_txt.tabEnabled = yes;
B2_txt.tabEnabled = yes;
send_btn.tabEnabled = yes;
A1_txt.tabIndex = 1;
B1_txt.tabIndex = 2;
A2_txt.tabIndex = 3;
B2_txt.tabIndex = 4;
send_btn.tabIndex = 5;

// properties for connecting to iPush Server; iplink is the instance name of iPush component library
_root.iplink.group = "ICEDC";
_root.iplink.product = "evaluation";
_root.iplink.username = "foo1";
_root.iplink.password = "bar";
_root.iplink.ipuship = "www.icetechnology.com";
_root.iplink.ipushport = 8000;

// add event listener for status report on sending data to iPush Server
var listener:Object = new Object();

_root.iplink.addEventListener("onStatus", listener);

listener.onStatus = function (ev) {
  if (ev.code == 200) { // login ok
     status_txt.text = "logined iPush Server successfully";
  } else {
     status_txt.text = "return code = " + ev.code;
  }
}

// connect and login to iPush Server
login_btn.onRelease = function () {
  _root.iplink.ipushTCPConnect();
  status_txt.text = "login proceeding...";
}

// send cells data to iPush Server
send_btn.onRelease = function () {
  _root.iplink.ipushSendNPSubjectData("pjax_table.A1",A1_txt.text,13,3,0);
  _root.iplink.ipushSendNPSubjectData("pjax_table.B1",B1_txt.text,13,3,0);
  _root.iplink.ipushSendNPSubjectData("pjax_table.A2",A2_txt.text,13,3,0);
  _root.iplink.ipushSendNPSubjectData("pjax_table.B2",B2_txt.text,13,3,0);
  status_txt.text = "sent message: " + A1_txt.text + "," + B1_txt.text + "," + A2_txt.text + "," + B2_txt.text;
}

Code 1. ActionScript source codes of pjax_table_sender.fla

For knowing how to program with iPush Flash component library, you may download the iPush Flash API package from ICE Developer Center.

Here we use four different subjects for carrying four cells data:

Four subject names all start from pjax_table, this is quite convenient for receiver to subscript a grouping subject instead of each individual sub-subject.

5 text fields, 2 buttons, 1 iPush component, and few codes, we have done with the data source application which completed the 3. and 4. of Pjax working flow here.

Pjax flush agent - pjax_livetable.fla

Please use the Flash MX 2004 or Flash 8 to open the file pjax_livetable.fla, check out the ActionScript codes and iPush Flash component library (iPush2Link).


var status_txt:String = new String();
var cellDataA1:String = new String();
var cellDataB1:String = new String();
var cellDataA2:String = new String();
var cellDataB2:String = new String();

// properties for connecting to iPush Server; iplink is the instance name of iPush component library
_root.iplink.group = "ICEDC";
_root.iplink.product = "evaluation";
_root.iplink.username = "foo1";
_root.iplink.password = "bar";
_root.iplink.ipuship = "www.icetechnology.com";
_root.iplink.ipushport = 8000;

// call JavaScript function ShowStatus to replace the HTML content (ID=Status) with value of status_txt
_root.status_txt = "connecting iPush Server...";
getURL("javascript:ShowStatus('Status','pjax_livetable')");

// connect and login to iPush Server
_root.iplink.ipushTCPConnect();

// add event listener for status report and on receiving data from iPush Server
var listener:Object = new Object();

iplink.addEventListener("onStatus", listener);
iplink.addEventListener("onSubjectMessage", listener);

listener.onStatus = function (ev) {
  if (ev.code == 200) { // login ok
     _root.status_txt = "logined iPush Server successfully";
     getURL("javascript:ShowStatus('Status','pjax_livetable')");
     // subscribe grouping subject pjax_table
     _root.iplink.ipushSubSubject("pjax_table");
  } else if (ev.code == 700) { // subject subscribed ok
     _root.status_txt = "subscribed subject " + ev.param + " successfully";
     getURL("javascript:ShowStatus('Status','pjax_livetable')");
  }
}

listener.onSubjectMessage = function (ev) {
  // iplink will assign the subject name associated received data to ev.subject
  var subjectName:String = ev.subject;
  switch (subjectName) {
    case "pjax_table.A1":
    // if received cell A1 data, assign data to variable cellDataA1, then call triggerShowTable
         _root.cellDataA1 = iplink.joinUnicodeString(ev.message);
         triggerShowTable();
         break;
    case "pjax_table.B1":
    // if received cell B1 data, assign data to variable cellDataB1, then call triggerShowTable
         _root.cellDataB1 = iplink.joinUnicodeString(ev.message);
         triggerShowTable();
         break;
    case "pjax_table.A2":
    // if received cell A2 data, assign data to variable cellDataA2, then call triggerShowTable
         _root.cellDataA2 = iplink.joinUnicodeString(ev.message);
         triggerShowTable();
         break;
    case "pjax_table.B2":
    // if received cell B2 data, assign data to variable cellDataB2, then call triggerShowTable
         _root.cellDataB2 = iplink.joinUnicodeString(ev.message);
         triggerShowTable();
         break;
    default:
         _root.status_txt = "unexpected subject " + subjectName + " received, data: " + iplink.joinUnicodeString(ev.message);
         getURL("javascript:ShowStatus('Status','pjax_livetable')");
         break;
  }
}

function triggerShowTable () {
  // call JavaScript function ShowTable to replace the HTML content of four cells data
  getURL("javascript:ShowTable('pjax_livetable')");
}

Code 2. ActionScript source codes of pjax_livetable.fla

So, we make this Flash application connect to iPush Server and subscribe subject pjax_table,  means it can receive all four cells data (carried by subject pjax_table.A1, pjax_table.B1, pjax_table.A2, and pjax_table.B2).

You may see that method getURL is the key for calling JavaScript library in Flash application.

OK, now we have completed the 1., 2., 6., and 7. of Pjax working flow here.

JavaScript library - pjax_livetable.js

Please use any text editor you like to open the file pjax_livetable.js, check out the JavaScript codes.


function ShowTable(ThisPjaxFlushAgentID) {
  // get the four cells data from variables in pjax_livetable.swf and replace respective HTML contents with them
  if (document.all) { // is IE browser
     document.all.A1.innerHTML = document.all[ThisPjaxFlushAgentID].getVariable("cellDataA1");
     document.all.B1.innerHTML = document.all[ThisPjaxFlushAgentID].getVariable("cellDataB1");
     document.all.A2.innerHTML = document.all[ThisPjaxFlushAgentID].getVariable("cellDataA2");
     document.all.B2.innerHTML = document.all[ThisPjaxFlushAgentID].getVariable("cellDataB2");
  } else { // is Not IE browser
     document.getElementById("A1").innerHTML = document[ThisPjaxFlushAgentID].GetVariable('cellDataA1');
     document.getElementById("B1").innerHTML = document[ThisPjaxFlushAgentID].GetVariable('cellDataB1');
     document.getElementById("A2").innerHTML = document[ThisPjaxFlushAgentID].GetVariable('cellDataA2');
     document.getElementById("B2").innerHTML = document[ThisPjaxFlushAgentID].GetVariable('cellDataB2');
  }
}

function ShowStatus(ThisStatusID, ThisPjaxFlushAgentID) {
  // get the status string from variable status_txt in pjax_livetable.swf and replace respective HTML content with it
  if (document.all) { // is IE browser
     document.all[ThisStatusID].innerHTML = document.all[ThisPjaxFlushAgentID].getVariable("status_txt");
  } else { // is Not IE browser
     document.getElementById(ThisStatusID).innerHTML = document[ThisPjaxFlushAgentID].GetVariable('status_txt');
  }
}

Code 3. JavaScript library source codes of pjax_livetable.js

The DHTML IDs we use in the JavaScript library are defined in pjax_livetable.htm:

They are key properties of DHTML for Pjax.

The JavaScript functions ShowTable and ShowStatus invoked by pjax_livetable.swf will replace the four cells data and status string to respective positions which DHTML IDs defined. They complete 8. of the Pjax working flow.

Live table web page - pjax_livetable.htm

Finally, we come to the last part of the sample. pjax_livetable.htm is the working stage of Pjax flush agent, JavaScript library, and DHTML feature. Please use any text editor you like to open the file pjax_livetable.htm, check out the HTML codes.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ICE Technology - Pjax Demo: Live Table in HTML, pushed from iPush thru. Flash flush agent</title>
</head>
<body>
<!-- ================ Pjax demo codes ============================== -->
<script language="javascript" type="text/javascript" src="pjax_livetable.js"></script>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="10" height="10" id="pjax_livetable" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="movie" value="pjax_livetable.swf" />
  <param name="wmode" value="transparent" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="pjax_livetable.swf" quality="high" bgcolor="#ffffff" width="1" height="1" wmode="transparent" name="pjax_livetable" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

<table border="1" cellpadding="2" style="border-collapse: collapse" bordercolor="#808080" width="300">
  <tr>
    <td width="50">&nbsp;</td>
    <td width="125" align="center">
    <p align="center"><font face="Century Gothic">A</font></td>
    <td width="125" align="center">
    <p align="center"><font face="Century Gothic">B</font></td>
  </tr>
  <tr>
    <td width="50" align="center">
    <p align="center"><font face="Century Gothic">1</font></td>
    <td width="125" align="center" id="A1" style="font-size: 11px; font-weight: bold; color: #0033FF;">
    <font face="Century Gothic">data_in_cell_A1</font></td>
    <td width="125" align="center" id="B1" style="font-size: 11px; font-weight: bold; color: #33CC00;">
    <font face="Century Gothic">data_in_cell_B1</font></td>
  </tr>
  <tr>
    <td width="50" align="center">
    <p align="center"><font face="Century Gothic">2</font></td>
    <td width="125" align="center" id="A2" style="font-size: 11px; font-weight: bold; color: #FF0033;">
    <font face="Century Gothic">data_in_cell_A2</font></td>
    <td width="125" align="center" id="B2" style="font-size: 11px; font-weight: bold; color: #000000;">
    <font face="Century Gothic">data_in_cell_B2</font></td>
  </tr>
</table>

<table border="0" cellpadding="4" cellspacing="4" style="border-collapse: collapse" bordercolor="#111111" width="300">
  <tr>
    <td width="100%">&nbsp;</td>
  </tr>
  <tr>
    <td width="100%">Status:</td>
  </tr>
  <tr>
    <strong><td width="100%" id="Status" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; background-color: #999999;">see status message here</td></strong>
  </tr>
</table>
<!-- ========================================================= -->
</body>
</html>

Code 4. HTML codes of pjax_livetable.htm

We highlight those DHTML IDs, Pjax flush agent, and JavaScript library above in blue for easily reading. The respective contents will be replaced with those Pjax flush agent assigned through JavaScript.

Wrap them up - deploy your sample

If you want to setup this live table sample on your site, please track the following steps:

1. Extract the sample package pjax_livetable.zip.

2. Run the iPush Server, and configure proper service and user account in iPush BackOffice.

Figure 4. User configuration sample in iPush BackOffice

The related user information we use in this sample have been listed in Readme.txt (included in pjax_livetable.zip).

3. Modify the pjax_table_sender.fla and pjax_livetable.fla as iPush Server and user information changed, then publish them to .swf.

4. Copy the pjax_table_sender.swf and pjax_livetable.swf to folder pjax_table\deliverable and replace the existing ones.

5. Deploy all files in pjax_table\deliverable to your web server. The web server better runs on the same host with iPush Server does. Otherwise, you have to deal with the access policy security we describe in next section.

6. Open the pjax_table_sender.htm and pjax_livetable.htm in separated browser windows to try this sample out.

Access policy security issue for iPush Flash web application

If you would like to deploy your iPush Flash application in web format (.swf run in browser), and the web server which serves the iPush Flash application run on different host from iPush Server run, then you must add the following ActionScript code to the first line of your Flash application:

      System.security.loadPolicyFile("http://YOUR_IPUSHSERVER_DOAMIN/YOUR_POLICY_FILE");

It means the host iPush Server run also need to run a web server other than the one provides .swf download. The Apache-Tomcat for iPush BackOffice can be your choice if you don't want to install another web server.

The policy file must be XML formatted. Please check our iPush Server FAQ for more details.

Another way of Pjax - take Java Applet as Pjax flush agent

As we have mentioned, the Flash applications we illustrate here just a sample, you may use iPush Java Package API to create your Pjax flush agent and data source.

Try it and have fun.

Learn more

Copyright © 2001-2008 ICE Technology Corporation. All Rights Reserved.