Sunday, January 11, 2009

A PureMVC/Joose example

I changed the strategy a little with the Joose2PureMVC bridge. It no longer "joosifies" all classes of the framework but rather allows subclassing classes of the PureMVC framework using Joose. The reason is that I had to use too much dark magic to make the it work and it proved not be very stable.

If you care: The dark magic involved getting the meta data of the super class in a setTimeout call because the Objs.js system used in the PureMVC code changes prototypes after class declaration.

To try it out you can download I converted some code of an example app from the PureMVC website to use the Joose bridge. You can download it here. I joosified a single class that you can see at the very end of the file bin/employee_admin_demo.js.

The object system used by the PureMVC JS port requires to write a lot of boilerplate code for inheritance and calling the constructors of the super classes. This is all eliminated with Joose.

If you don't want to download the example app, here is the source code of the Joose class:
Module("org.puremvc.js.demos.js.employeeadmin.view", function () {

var EventS = Objs.load("net.tekool.events.EventS");
var Relegate = Objs.load("net.tekool.utils.Relegate");
var IMediator = Objs.load("org.puremvc.js.interfaces.IMediator");
var INotification = Objs.load("org.puremvc.js.interfaces.INotification");
var Mediator = Objs.load("org.puremvc.js.patterns.mediator.Mediator");
var Notification = Objs.load("org.puremvc.js.patterns.observer.Notification");
var ApplicationFacade = Objs.load("org.puremvc.js.demos.js.employeeadmin.ApplicationFacade");
var UserVO = Objs.load("org.puremvc.js.demos.js.employeeadmin.model.vo.UserVO");
var UserProxy = Objs.load("org.puremvc.js.demos.js.employeeadmin.model.UserProxy");
var UserList = Objs.load("org.puremvc.js.demos.js.employeeadmin.view.components.UserList");

Class("UserListMediator", {
meta: PureMVC,
isa: Mediator,

after: {
initialize: function () {
var userList = this._getUserList();
userList.addEventListener( UserList.NEW, Relegate.create(this,this._onNew) );
userList.addEventListener( UserList.DELETE, Relegate.create(this,this._onDelete) );
userList.addEventListener( UserList.SELECT, Relegate.create(this,this._onSelect) );
var userProxy = this._facade.retrieveProxy( UserProxy.NAME );
userList.setUsers(userProxy.getUsers());
}
},

methods: {
_getUserList: function() {
return this._viewComponent;
},
_onNew: function( event ) {
var user = new UserVO();
this.sendNotification( ApplicationFacade.NEW_USER, user );
},
_onDelete: function( event ) {
var selectedUser = this._getUserList().selectedUser ;
if(selectedUser == null)
return;
this.sendNotification
(
ApplicationFacade.DELETE_USER,
this._getUserList().selectedUser
);
},
_onSelect: function( event ) {
this.sendNotification
(
ApplicationFacade.USER_SELECTED,
this._getUserList().selectedUser
)
},
listNotificationInterests: function() {
return [
ApplicationFacade.CANCEL_SELECTED,
ApplicationFacade.USER_UPDATED,
ApplicationFacade.USER_ADDED,
ApplicationFacade.USER_DELETED
];
},
handleNotification: function( note ) {
var userList = this._getUserList();
var userProxy = this._facade.retrieveProxy( UserProxy.NAME );
switch( note.getName() )
{
case ApplicationFacade.CANCEL_SELECTED:
userList.deSelect();
break;
case ApplicationFacade.USER_UPDATED:
userList.setUsers( userProxy.getUsers() );
userList.deSelect();
break;
case ApplicationFacade.USER_ADDED:
userList.setUsers( userProxy.getUsers() );
userList.deSelect();
break;
case ApplicationFacade.USER_DELETED:
userList.setUsers( userProxy.getUsers() );
userList.deSelect();
break;
}
}
}
})
});
Post a Comment