When developers start building web applications with Flex or desktop applications with Air, you come to the point when you want to do more with your application. For instance if you are working for a company and you just got finished building a product manager for SandKicker clothing, and he decided since you did such a great job that application he has asked you to build him another application for him, but not anything for his company something for him, something for his blog that he has had for years.
He tells you that his blog is self hosted with WordPress, after you hear that a bunch of things pop into your mind, what can I use to connect to WordPress? I could build a custom remoting script for making calls to WordPress through amfphp…. no no that would take to long and he wants this ASAP. You quickly snap back into reality and let him know that you know exactly how to do this and part ways.
So when you get back to your desk you begin searching for a library that will help you connect to an XML-RPC server with ActionScript and come across this wonderful library hosted at Google Code.
So you download it and open up the source in your project. Now what are you to do…
Requirements
- Flex 3
- WordPress Self Hosted Blog
- XML-RPC Library
Setting Up
If you haven’t dropped the xml-rpc library’s source into your src folder of your Flex project please do so now you are going to have to do one quick fix to this library because the owner has not updated it yet.
For people who are using Flex 3, and have the "Illegal Override of XMLRPCObject" error.
Do the following:
1) Open up XMLRPCObject.as. Look for "setCredentials" and replace the function signature with:
1: override public function setCredentials (username:String,password:String,charset:String = null):void
2) In the same file, find "setRemoteCredentials" and replace the function signature with:
1: override public function setRemoteCredentials (username:String,password:String,charset:String = null):void
Now you should be able to rock and rock.
Up and Running
To get this hooked up and running we are going to need to first create a service variable holding our XML-RPC Object, then we need to upon application creation completing create a new XML-RPC Object with our service variable, set up some result and fault handlers and specify the endpoint, we already know our destination and that is "/xmlrpc.php".
Then we are going to have to handle the results appropriately but for now we are going to just use one result and fault handler to test these calls before creating a full blown service class. Then we have to throw a few components on the view so we can enter the required parameters for these calls.
Following up by creating 3 small functions to get our confidence built up.
Here we go.
Essential Script
Create a new component called WordPressTester.mxml and add a script block with following code:
1: import com.jonniespratley.http.rpc.xmlrpc.XMLRPCObject;
2: import mx.utils.Base64Encoder;
3: import mx.utils.ArrayUtil;
4: import mx.collections.ArrayCollection;
5: import mx.rpc.events.ResultEvent;
6: import mx.rpc.events.FaultEvent;
7: import mx.rpc.AsyncToken;
8: import mx.controls.Alert;
9:
10: //Our data that is going to be returned
11: [Bindable] private var returnedData:ArrayCollection;
12:
13: //Our website endpoint where WordPress is installed at
14: [Bindable] private var wordpressEndpoint:String = "http://website.com";
15:
16: //Our service variable that is a xmlrpc object
17: private var service:XMLRPCObject;
18:
19: private function init():void
20: {
21: //Create a new service
22: service = new XMLRPCObject();
23:
24: //Specify the endpoint
25: service.endpoint = wordpressEndpoint;
26:
27: //We know what destination we need to access
28: service.destination = "/xmlrpc.php";
29:
30: //Set a fault handler
31: service.addEventListener( FaultEvent.FAULT, onFault );
32:
33: //And set a result handler
34: service.addEventListener( ResultEvent.RESULT, onResult );
35: }
36:
37: /*******************************************
38: * wp.getUsersBlogs
39: * @args user_name, user_pass
40: ********************************************/
41: private function getUsersBlogs():void
42: {
43: service.call("wp.getUsersBlogs", txt_username.text, txt_password.text)
44: }
45:
46: /*******************************************
47: * blogger.getUserInfo
48: * @args fake app id, user_name, user_pass
49: ********************************************/
50: private function getUserInfo():void
51: {
52: service.call( "blogger.getUserInfo", "43243423", txt_username.text, txt_password.text );
53: }
54:
55: /*******************************************
56: * blogger.getRecentPosts
57: * @args blog_ID, user_login, user_pass, num_posts
58: ********************************************/
59: private function getRecentPosts():void
60: {
61: service.call( "blogger.getRecentPosts", "43243423", txt_blogid.value,
62: txt_username.text, txt_password.text, txt_count.value );
63:
64: }
65:
66: /*******************************************
67: * onResult/ Populates the dp:Array
68: ********************************************/
69: private function onResult( event:ResultEvent ):void
70: {
71: returnedData = new ArrayCollection(ArrayUtil.toArray( event.result ) );
72: }
73:
74: /*******************************************
75: * onFault/ Displays the FaultString
76: ********************************************/
77: private function onFault ( event:FaultEvent ):void
78: {
79: Alert.show(event.fault.faultString,event.fault.faultCode);
80: }
Now lets go over the ActionScript really quick:
- Our first variable is a bindable variable that is going to be the holder of all the data that is being sent back from WordPress.
- Then we a private bindable variable that is a string, here is the web site on which WordPress is installed.
- Next is our service variable that is holding the XMLRPCObject that we need to establish a connection using XML-RPC.
- First function init(), with this we are initializing our service, setting our services endpoint to the wordpressEndpoint variable, the destination to the location of the xmlrpc.php file required for establishing a connection to WordPress through XML-RPC then followed by setting up our event listeners just incase any faults happen, we also add our result handler for dealing with the data.
- Second function is going to call a method on WordPress that is to get all of the users blogs, the required parameter are the username and password of the blog.
- Third function is going to call for the users info, that returns all of the information for the given user by the username and password sent with that call, you might notice that we use "blogger.getUserInfo", we are just calling that method on our WordPress blog, we didn’t change services or anything. WordPress XML-RPC supports almost if not all of XML-RPC APIs, see there site for an official list. Inside the call to the service is the name of the method we are calling, followed by a random set of numbers these numbers have no significance they are just there because without then this call will not work, you can try it if you’d like, after the numbers we set the username and password parameters to the values of our text inputs that we are going to create.
- Fouth function we call a method that returns recent posts from the users blog, again we have the random numbers followed by the id of the blog that the user owns, usually 1. Then we add in the username and password again from the text inputs, then one more parameter which is how many, we set that value to the value of the numeric stepper inside our view.
- Fifth function is our result handler, we take our returnedData variable and make a new array collection with the help of array utilities from our result.
- Sixth function is our fault handler, we just alert the user of the fault.
Now for the view
To create the view for our WordPressTester.mxml file we need a few inputs and buttons, so add the following to your view.
Here is what mine looks like:
1: <!--View-->
2: <mx:HDividedBox width="100%" height="100%">
3: <mx:Accordion width="225" height="100%">
4: <mx:VBox label="User Infomation" width="100%" height="100%">
5:
6: <!--Wordpress Username-->
7: <mx:Label
8: text="Username:"
9: fontWeight="bold"/>
10: <mx:TextInput id="txt_username"
11: text="admin"/>
12: <!--Wordpress Password-->
13: <mx:Label
14: text="Password:"
15: fontWeight="bold"/>
16: <mx:TextInput id="txt_password"
17: displayAsPassword="true"
18: text="fred"/>
19: <!--Wordpress Website-->
20: <mx:Label
21: text="Your Website:"
22: fontWeight="bold"/>
23: <mx:TextInput id="txt_website"
24: text="{ wordpressEndpoint }"/>
25:
26: </mx:VBox>
27: <mx:VBox label="Methods without Parameters" width="100%" height="100%">
28:
29: <!--GetUsersBlogs-->
30: <mx:Button
31: click="getUsersBlogs()"
32: label="Get Users Blogs"
33: width="100%"/>
34:
35: <!--GetUserInfo-->
36: <mx:Button
37: click="getUserInfo()"
38: label="Get User Info"
39: width="100%"/>
40:
41: </mx:VBox>
42: <mx:VBox label="Methods with Parameters" width="100%" height="100%">
43:
44: <!--What Blog-->
45: <mx:Label
46: text="What Blog"
47: fontWeight="bold"/>
48: <mx:NumericStepper id="txt_blogid"
49: maximum="5"
50: minimum="1"/>
51:
52: <!--How Many-->
53: <mx:Label
54: text="How Many"
55: fontWeight="bold"/>
56: <mx:NumericStepper id="txt_count"
57: maximum="25"
58: minimum="5"/>
59:
60: <!--GetRecentPosts-->
61: <mx:Button
62: click="getRecentPosts()"
63: label="Get Recent Posts"
64: width="100%"/>
65:
66: </mx:VBox>
67: </mx:Accordion>
68:
69: <!--Sandbox Results-->
70: <mx:DataGrid id="dg_returneddata"
71: height="100%"
72: width="100%"
73: dataProvider="{ returnedData }"/>
74: </mx:HDividedBox>
We have some simple controls for holding the username and password values, also we have a input for the URL of the endpoint which we are connecting to. The code is pretty much self explanatory.
Conclusion
With these simple calls you know have a basic idea of what it it takes to make calls using a XML-RPC library to a XML-RPC enabled blog. We learned a lot just now from a few simple calls, with this knowledge of how things work you can know get really creative and create a whole blogging application for you or your client.
Which ever person you decide to create an application for you now know how to get it started, and how to handle the calls. More calls could be achieved by just viewing the documentation of that blogs XML-RPC and then creating the functions replicating what there methods are, and sending the required arguments along with that call you are calling.