Using jQuery with APE – an OOP approach with the DUI
Following up on my previous post, we used a singleton “class” by using a function. I’ve recently come accross the DUI (Digg User Interface) which is a jQuery plugin and extends jQuery so we can use classes – much similiar to MooTools Class method.
Source Demo
We can create a new class by calling DUI.Class.create(obj, fn) – obj being other classes to inherit and fn being our class.
So, to add some OOP to the bgColor application we re-code chat.js like so:
/**
* @author Paul Price
* Who needs MooTools' Class() method?
*/
APE.bgColor = DUI.Class.create(APE.Client.prototype, {
// set default options
options:{
debug: false,
select: null
},
init: function(core, options){
this.core = core;
this.options = options;
// do the following every time we get a new user
this.addEvent('pipeCreate', this.setup);
// when a user joins, update the user list
this.addEvent('userJoin', this.createUser);
// when a user leaves, destroy them with mighty thunder!
this.addEvent('userLeft', this.deleteUser);
// when we want to send data
this.onCmd('send', this.cmdSend);
// and when we recieve data
this.onRaw('data', this.rawData);
// start the session with a random name!
var username = prompt("Hey good lookin', what's your name?", String((new Date()).getTime()).replace(/\D/gi,''));
this.core.start(username);
},
setup: function(type, pipe, options){
// add an event listener on our selectbox
this.options.select.change(function(){
// get the select box value
color = $("option:selected", this).val();
// set the background of the document to the color chosen
$("body").css("background-color", color);
// send the new color to the APE server
pipe.send(color);
});
},
cmdSend: function(pipe, sessid, pubid, message){
if(this.options.debug)
$("<span> " + this.core.user.properties.name + " changed the bg color to " + message + "</span><br />").prependTo("#debug");
},
rawData: function(raw, pipe){
if(this.options.debug)
$("<span> " + raw.datas.sender.properties.name + " changed the bg color to " + raw.datas.msg + "</span><br />").prependTo("#debug");
// set the selectboxes value to match
this.options.select.val(raw.datas.msg);
// set the color
$("body").css("background-color", raw.datas.msg);
},
createUser: function(user, pipe){
user.element = $("<span>" + user.properties.name + " has joined bgColor</span><br />").prepend("<img src='bullet_green.png' />").prependTo("#debug");
},
deleteUser: function(user, pipe){
$(user.element).text(user.properties.name + " has left bgColor").css("color", "#666666").prepend("<img src='bullet_red.png' />");
}
});
You can notice straight away that it looks a lot cleaner and similar to the APE demo’s that use MooTools. Our next step is to update the bit of code that creates the class (from):
new colorChanger(ape, debug).initialize();
(to)
var bgcolor = new APE.bgColor(ape,{
debug: true,
select: $("#wrapper select[name=selectColor]")
});
Don’t forget to include the DUI after jQuery (but before chat.js) in index.html
Source Demo
Related posts:
- Using jQuery With APE
- Using jQuery With APE – change the background-color with PHP
- Diving into APE modules and the JSF – creating topics for channels
- EsenAPE – send and receive SMS in real time using APE, jQuery, PHP and libape_controller
- APE – An Introduction
13 Responses to “Using jQuery with APE – an OOP approach with the DUI”
Leave a Reply
Using jQuery With APE | Paul's Blog on June 29th, 2009
[...] You may be interested in an updated post that uses the same demo but using OOP techniques [...]
ioxdue on December 3rd, 2009
I’ve updated to APE Server 1.0 but this example doesn’t work… on Firefox Console there is this error on load:
Error: DUI is not a function
File sorgente: http://ape-test.local/APE_JSF/Demos/bgChanger_Class/digg-dui/src/DUI.js
Riga: 245
Can you help me, please?
ioxdue on December 3rd, 2009
POST:
[{"cmd":"CONNECT","chl":1,"params":"1259844334141"},{"cmd":"JOIN","chl":2,"params":{"channels":"test"}}]
RESPONSE:
[{"time":"1259844335","raw":"ERR","data":{"code":"001","value":"BAD_PARAMS"}}]
this are from firebugs… thanks.
Gosha on January 4th, 2010
So, basically there’s no hassle at all using jQuery.
I kind of expected a jQuery plugin which linked the APE JSF to jQuery, so you controlled APE through jQuery.
Well, apparently not.
jefetech on January 4th, 2010
I can’t seem to get your demo to even connect to my ape server. I’m using APE.Config.transport = 2 because my ape server is on another machine. The mootools demo hits the server, just not this jquery example.
Have you tested this solution when the server is different from the machine the client is on?
jefetech on January 4th, 2010
One other note, the javascript doesn’t even get into the complete method. I added a console.log here, and firebug doesn execute it. Any help would be appreciated.
client.load({
‘domain’: APE.Config.domain,
’server’: APE.Config.server,
‘identifier’: ‘jquery’,
‘channel’: ‘test’,
‘complete’: function(ape){
// APE has finished loading so now we can load our scripts
console.log(‘whaz up’);
var bgcolor = new colorChanger(ape,{
debug: true,
select: $(“#wrapper select[name=selectColor]“)
});
if(bgcolor.options.debug)
$(“#debug”).append(“APE has finished loading“);
},
’scripts’: APE.Config.scripts //Scripts to load for APE JSF
});
jefetech on January 5th, 2010
One more little piece of info. The iframe your script generated is a url to my ape server, but ape server spits this back:
[{"time":"1262646318","raw":"ERR","data":{"code":"005","value":"BAD_JSON"}}]
Could that be the issue with not getting into the ‘complete’ method?
Paul Price on January 5th, 2010
Hi jefetech, the above article is for APE 0.9 (before it went 1.0), a lot has changed since then but if you change the ‘client.load()’ event it still should work fine; http://www.ape-project.org/wiki/index.php/Tutorial:Hello_world#Complete_source_code
I’ll try and get some 1.0 articles together.
jefetech on January 5th, 2010
Thanks for the reply Paul. I gave it a try and line 54 of JavaScript.js is complaining in Firebug. I’ll try to debug it a bit more. Firebug reads “config is undefined”
config.init = config.init || true;
Paul Price on January 5th, 2010
What line/file is that from? I can’t see that line in my above code..
jpruetting on January 8th, 2010
Whenever I try to use the ape client, I get a Document.Body is null error. I believe this is from it calling:
document.body.appendChild(iframe);
before the DOM is loaded. Does the client file need some sort of Document.Ready() function or am I missing something? I am following the hello world tutorial. I am including the client file like this:
jpruetting on January 8th, 2010
Like this:
script type=”text/javaScript” src=”js/ape-jsf/Build/uncompressed/apeClientJS.js”
jpruetting on January 8th, 2010
Nvm, I got it!