Posted on Thursday 14 April 2005
Maybe the reason why few people are making RIAs is they think they will have to program everything from scratch. What if you want to use a Flash interface for content management, wikis, bulletin boards, blog software? You have two options right: stick with HTML or rebuild everything for Flash. Everyone is going to pick the HTML solution. But my point here is that in fact there is a viable third alternative, repurposing existing software for Flash use. Here I am not thinking of creating an XML layer, but rather creating wrapper services that will plug into the core of these content systems. In this way you not only enable Flash to plug in to these ready made systems but you will also provide an access point to the core functionality of that software package; you could reuse this to create a totally new interface for the software in HTML, Flash, SOAP, even PDF if you really wanted. So basically the point is to hack these systems to keep only a thin interface to the data access layer, and then use that thin interface as a Remoting service.
I chose to prove that it's possible to repurpose WordPress, the blogging software this site runs on, to make it run on a Flash interface. The interface to WordPress's admin area is already excellent, so the point is not in actually supplanting the HTML admin area, but proving it's possible. My hope is that sharing my experience will encourage people to do the same for other systems, like phpBB, Xoops, Nuke, osCommerce, and whatnot.
This, I'm hoping, will be an ongoing series, if anyone cares. It's exquisitely hacky, and a good hacker needs some good tools, namely:
- AMFPHP 1.0 beta running on PHP5
- xDebug compiled into PHP
- WinCacheGrind to analyze xDebug files
- Error logging to the Apache log file set to on
My first challenge was logging into the WordPress 1.3 admin area. Using xDebug and WinCacheGrind, I was able to see what files and functions were being called when I was logging to WordPress. The file wp-login.php was first loading a config file, then calling a function called wp_login(user, pass, usecookies). Marvellous! So as a first guess, I set up this PHP:
<?php
define('WP_BASE', 'e:/projets/5etdemi/v3/blog/');
require(WP_BASE . 'wp-config.php');
class WpAdmin
{
function WpAdmin()
{
$this->methodTable = array(
"attemptLogin" => array(
"access" => "remote",
"roles" => "admin"
)
);
}
function attemptLogin()
{
return true;
}
function _authenticate($user, $pass)
{
//Rig wordpress
if(wp_login(addslashes($user), addslashes($pass), false))
{
return 'admin';
}
else
{
return false;
}
}
}
?>
And this very straightforward actionscript file:
import mx.remoting.Service;
import mx.rpc.RelayResponder;
import mx.rpc.FaultEvent;
import mx.rpc.ResultEvent;
import mx.remoting.PendingCall;
import mx.remoting.RecordSet;
import mx.remoting.DataGlue;
import mx.utils.Delegate;
import mx.remoting.debug.NetDebug;
class WpAdmin
{
//Change the gateway URL as needed
var gatewayUrl:String = "http://localhost/iflashservices/gateway.php";
var service:Service;
var root;
function WpAdmin(root)
{
this.root = root;
init();
}
function init()
{
NetDebug.initialize();
service = new Service(this.gatewayUrl, null, "WpAdmin", null, null);
root.btnLogin.addEventListener("click", Delegate.create(this, handlePressLogin));
root.btnLogin.addEventListener("enter", Delegate.create(this, handlePressLogin));
}
function handlePressLogin()
{
service.connection.setCredentials(root.txtUser.text, root.txtPass.text);
attemptLogin();
}
//
function attemptLogin()
{
var pc:PendingCall = this.service.attemptLogin();
pc.responder = new RelayResponder(this, "handleAttemptLogin", "handleRemotingError");
}
function handleAttemptLogin(re:ResultEvent)
{
//Implement custom callback code
}
function handleRemotingError( fault:FaultEvent ):Void
{
NetDebug.trace({level:"None", message:"Error: " + fault.fault.faultstring });
}
}
All very simple stuff. Ran it... Got some errors in the Apache log along the lines of 'calling function on a non-object'... After a lot of hunting around, the problem became clear: AMFPHP classes run in a sandbox. Thus if you include a file outside of the class, its variables are local, not global. But WordPress specifically uses globals for database handling, i10n, and settings. So the solution is to redeclare a bunch of variables as globals. For example, in wp-includes/wb-db.php, the last line should read:
The good news is this shouldn't break your regular HTML-based installation. The code as shown above works as is after taking care of globals. But what about logging out? Authenticate::logout(); ! And that's really all there is to it. Amazing! Hope the rest is just as easy (not likely).
Well this is an interesting endeavour. But I have to ask the question–”Why?” The WordPress admin section is one of the best html apps that I’ve ever seen and there seems to be so much low hanging fruit to add front ends to (hotmail anyone?).
I guess that it’s definitely a challenging undertaking, if you have nothing else to do.
Bonjour,
je suis interesé pour votre projet, ce que je cherche a faire, c’est de publier des news dans Wordpress et pouvoir les lire dans une interface flash , seulemente les litre et news les comentaire sur un site html
si vous avez une solutions ,contacter mois , merci
“After a lot of hunting around, the problem became clear: AMFPHP classes run in a sandbox. Thus if you include a file outside of the class, its variables are local, not global.”
this is interesting, i came across this problem in a recent project i was working on. I was using the a similiar DB connect scheme (a file holding the DB connecter var) and actually included it right into the function i needed, i couldn’t find any other way to get around it.
awesome. I’ve had something like this in the back of my head forever, but knew I didn’t quite have it in me (as far as knowledge of the AMFPHP and PHP in general) to really take a serious approach to it. Looks like you’ve got the knowledge and toolset to go for it. I’m just glad to see you’re tapping in at the right level- I’ve seen some people instead try to take the HTML/XML output of various sites and chew it up in Flash, which seems like an obvious waste of steps.
As for the why? Well, beyond the good reasons you’ve already offered, I’m imagining that once you have it actually get all the methods in place to feed stuff to Flash, designers could start playing around with different interfaces and interactions, similar to how people play with the services from Amazon, Flickr, and Google.
Tim,
You’re right, the admin area is perfect in WordPress. But my point is to see if it’s feasible, not to actually do it and use it on a daily basis, but if I can show that you can do it with WordPress, I am sure other people will be able to do it with phpBB, a wiki software, content managament systems, and whatnot. I chose WordPress because it’s complicated enough to prove my point and I already have a setup on the site.
I might be missing the point here, but what i don’t understand is why you are making things complicated, adding another layer, if all you would really need to do is use the existing markup Wordpress spits out and render it in Flash. It’s XHTML. Flash can parse it. Use a method like SEFFS [1], then in Flash just resolve URLs, add some XPath magic and bind the elements to components, done. If you are concerned about redundant data being transfered, let Wordpress deliver just the content when XHTML is requested from Flash and strip header, footer and sidebar.
cheers,
Claus.
[1] http://wahlers.com.br/claus/blog/?page_id=18
Yes, you’re completely missing the point. Here I am not talking about displaying data from an xHTML source, I am talking about directly accessing the data layer. What you’re doing involves data that already has display info in it, parse it, extract the data, then bind it to stuff already in Flash. But what if you want to change your HTML layout? Then you have to change your Flash layout as well. Have you done view source for this page? Do you see how much stuff there is in there? Do you see a tag, a
tag and the like? Do you have any idea how sluggish doing that king of XPath manipulation would be in Flash?
It would crazily complicated to work around that. It’s an awful, bloated solution. SEFFS seems very nice, but for anything beyond basic HTML, you have to understand that HTML just doesn’t have the kind of semantic content to do anything useful. And just am I supposed to post stuff? LoadVars POST and then XML back, I xPath into it, then check it the localized string matches to see if things went well? What if I change languages? How am I going to handle authentication cookies? How am I going to extract date information to load into a DateChooser? It’s a solution for showing data, but not for creating an application.
Ehrmm.. usually, XHTML does not contain any display info. That’s what CSS is for.
I change the CSS.
XHTML is all about semantics.
xHTML does no contain explicit display info, butid does contain implicit display info simply from the ordering in which it is layed out. Is an <img> tag semantic info? Is a <form> tag semantic info?
What you’re saying about ‘if I want to change the layout, I’ll change the CSS is misleading. If you’re going to make major changes to the layout of the document you’re going to have to modify the placement of the actual tags inside of the xHTML. In addiion if you want to add or remove a section you will consequently modify the data structure.
xHTML has more semantics than old HTML, but not nearly enough for seeing the actual data structure. Is there a <content> tag? A <navigation> tag? a <header> tag? a <copyright> tag? A <datewritten> tag? A <blogentry> tag? A <footnote> tag?
Again, xHTML has some semantics, but it much too generic to represent data in a significant manner.
I have to disagree again. With CSS i can make major changes to the layout without touching the document structure. I was making a reference to XPath, because if i actually want to make changes to the structure (because i add or remove things, or because of whatever other reasons), i just have to change the XPath expressions to reflect those structural changes. Dead simple and elegant.
And no, there is no <content> tag in XHTML, but there are ID and class attributes that you can use in your XPath expressions.
<form>, btw, is semantic. Presentational info is only added through default, user or author stylesheets.
cheers,
Claus.
But here is the deal: the id and class attributes are not consistent across templates. If I chose another template for this site (and maybe I will, I’m seeing it a bit too often ;), then either I would have to rewrite the new template so it uses the same semantics, ids and classes as the old one, or I would have to rewrite some of my Flash movie. You can argue all you want that xHTML is just semantics, but that’s just not true. JavaScript, images, the linear arrangement of the DOM are all non-semantics data embedded into the xHTML. If xHTML was all semantics, why would we have RSS? We could just take any old site and parse it and xPath it into submission, but what’s the point when we can make the data available in a single format that makes everybody’s lives easier? What I’m doing here is making the data layer directly accesible to Flash, using native data types. That’s the obvious, architecturally sane way to plug into server functionality.
Besides, if you did manage to do it, it would be extremely slow because of the sheer size of these pages. If you want to prove me wrong, please go into the edit page of your WordPress installation, copy that HTML and load that table using xPath into a datagrid. I am sure it will be dog slow if you ever do manage to do it.
I have been making AMFPHP flash components for mambo. I can just install a component with AMFPHP included and Its away. I can then use alot of the mambo application layer through includes and it all ties into the whole site without modifying it.
Its nice to have alot of the application writen for you and be able to plug in modules as needed/requested.
I am now thinking about making a full flash front end for mambo which can load flash components.
I havent started using the V1.0 beta yet but cant wait to be able to use sql lite with it. :o)
Big ups for trying this though. I love hacking stuff up and working it into a solution.
your aside about the issues with authentication cookies in flash interests me
is there a reasonable way to use session id in flash and avoid having to resend pwd etc when talking to server via, say, asp?
> Here I am not talking about displaying data from an xHTML source, I am talking about directly accessing the data layer.
most blogging systems i know provide an api layer for that.
it is the
XML-RPC-API.
everytime i stumble across someones ideas/concepts about providing a way of connecting their blog to a flash/xy-client (using custom templates, php/perl, amfphp, etc) it leaves me wondering why they do not check out the xml-rpc-api-methods first. it is a dedicated layer, already has the basic features needed and could be easily extended by custom methods suiting ones special needs.
and yes: xml-rpc seems dated, BUT is a head-on, dead-simple approach that (imo) is perfectly usable by/with flash.
Hi Patrick,
It is funny that I came across this tutorial because I am writing a front-end for WordPress using AMFPHP. However, I have a basic question that I hope you can answer for me. I don’t know how familiar you are with the wp codebase but I am trying to do as much through their API as possible (standards and all that). However, I keep hitting a snag with my services when I try and implement one of their classes as an object. Do you know if services in AMFPHP can be extended through creating instances of other classes?
Thanks, keep up the good fight on AMFPHP too, it is really great.
[…] e API didn’t return anything. This was all pretty confusing until I read the blog post from: http://www.5etdemi.com/blog/archives/2005/04/building-a-flash-front-end-for-wordpress-1-logging-into-the-admin-area/ In his entry Patrick suggested t […]
Yeah this is more than feasible, we just need a framework for efficient reuse of all the possible access methods out there, for Flash use anyway. I had to make a desktop simulator that rendered a UI at runtime based on user configurable xml. Then when I had a web client ask if I could enable them to update interest rates daily for just a few items I immediately thought of xml and php. That was shockingly simple to get working, as the xml write at the server is only like a three line script. Open, write, close. My relevancy here is that these Flash front ends for anything are becoming increasingly more feasible, as standard ways of using Flash to get to data solidify. Which you are to be commended for endeavoring to further, btw.
I believe that any DataLayer must be a simple code block, that they allow operations against DB.
That code block would not have to know on the Business Entities. Single to specialize it is to execute the operations (Store Procedures and SQL Sentences) against the engine DB (SQL, Oracle, DB2, etc.), with which this setting.
Finally, I invite to you to download the DataLayer.Primitives Public Version.
This is very cool Data Layer :)
DataLayer.Primitives - Readme!
http://forums.microsoft.com/msdn/ShowPost.aspx?PostID=1389
Cheers,
Javier Luna
http://guydotnetxmlwebservices.blogspot.com/
Hi PAtrick,
I have problems with your demo:
(note that I use AMFPHP milestone 2.
The “hello” test work so my paths are ok)
here are few questions:
- does it work with the wordpress 1.5? I play with it…
- I put the php class at the top of the wp-login.php file, right?
- Your AS2 script give me error: don’t found the class WpAdmin
(I maybe put the class WpAdmin in external).
- of course I add “global $wpdb;” in wp-includes/wb-db.php just before this existing “$wpdb = new wpdb(DBUSER, DBPASSWORD, DBNAME, DBHOST);”
Thank you for your time,
(I’ll be happy to see the second part.)
[…] Replace everything else […]
I have a basic question that I hope you can answer for me. I don’t know how familiar you are with the wp codebase but I am trying to do as much through their API as possible.
Hello.
I assume one can also look at this example.
its a totally new direction, simply by hooking to the RSS feed
read more about it here : http://www.nastypixel.com/prototype/wordpress-flash-front-end/
That code block would not have to know on the Business Entities. Single to specialize it is to execute the operations (Store Procedures and SQL Sentences) against the engine DB (SQL, Oracle, DB2, etc.), with which this setting.