Okay i know, i haven’t posted much in this blog. But in the last week with the release of Google Gears i came up with some ideas.

Jamal MVC:

Jamal is a set of conventions and small javascript libraries to archieve a complete separation of html, css and javascript in your web application. Jamal is built on jQuery and inspired by MVC frameworks like Ruby on Rails, CakePHP and its derivatives.

The MVC concept:

• Controller: Interaction with the user interface (events)
• Model: Business Logic and AJAX calls
• View: DOM, CSS modifications

Google Gears just crys for a MVC Framework! It would be perfect to integrate Google Gears into Jamal.

After some research i found Google Gears Orm. The code looks pretty cool. So the idea is : integrate it into Jamal!

Model:

1
2
3
4
5
6

$m.Client = {
    table: {
        firstname : jamal.Fields.String({maxLength:70}),
        lastname   : jamal.Fields.String({maxLength:70}),
    }
};

Controller:

1
2
3
4
5
6
7
8
9

$c.Clients = {
index: function() {
$v.Clients.showList($m.Client.select());
$('#save').bind('click',function(){
$m.Client.insert([$('#firstname').val(),$('#lastname').val()]);
$v.Clients.showList($m.Client.select());
});
}
};

View:

1
2
3
4
5
6
7
8

$v.Clients = {
showList : function(array) {
$('#clients-list').empty();
for(i = 0;i < array.length;i++) {
$('#clients-list').append('<li>'+array[i].firstname+' '+array[i].lastname+'</li>')
}
}
}

looks pretty cool eh?

Demo: http://dev.floriansweb.com/upload/sandbox/jamal/

Sourcecode Download: http://dev.floriansweb.com/upload/jamal_mvc_orm.zip

But i got some more ideas: real offline/online support need data synchronizations!

1
2
3
4
5
6
7
8
9

 
$m.Client = {
externalData: '/ajax/clients/findAll',
syncEngine: '/ajax/clients/sync',
table: {
firstname     : jamal.Fields.String({maxLength:70}),
lastname      : jamal.Fields.String({maxLength:70}),
},
};

$m.Client.externalData could also be ‘index.php?model=client&action=getAll’. Its the method on the server which get all the server data and encode it into JSON. I get it with JQuerys $.getJSON. It should look like this:

1

$m.Client.download();

Synchronizations:

First time you start the Application you need to download all the data from the server. Every insert,update,delete,select goes to the local DB. Every time you call insert,update,delete from a model the jamal.History.log(action,model,id) method creates a log entry.

1

jamal.History.log("new","client",5)

Action is the action - new, updated or deleted , model is the Model - client, user etc.. and ID is the affected rowid.

After the log the sync method is called. The Sync Method sends via ajax all the changed data / log entries to $m.Client.syncEngine. The syncEngine on server should manage now the synchronizations with replaying the log. If it fails - timeout - the jamal online status is set to false. If the request is successful the jamal online status is set to true and all log entries will be deleted.

To sum up:

Scenario: The user is offline and goes back online after 2 inserts :

1
2
3
4
5

$m.Client.insert(["test1","test1"]); // new log entry  "new","client",lastInsertRowId
$m.Client.sync();  //  fail - status : offline
//User goes online
$m.Client.insert(["test2","test2"]);  // new log entry "new","client",lastInsertRowId
$m.Client.sync(); //  success - status online - delete log entries!

Okay thats for now! I hope you understood my idea. I’m trying to implement it right now.

I’m very thankful for every feedback.

Thanks!

Today i tried mootools.

Its really great and easy to understand. I love it. With my first idea in the head i tried to rebuild the new feature of OS X Leopard Mail but also integrate some own ideas. The presentation of Mail wasn’t that detailed.

Try Hackdev - Notes 0.1 Demo

I played a bit with the nice effects of mootools. Its really fun!

Select a random task from the note and then click on Create a To Do!

The selected text is now highlighted and a new task appears in the menu “Task”-list.

Thats it. Very simple and only tested on Firefox 2.0. The effects are working on Safari and IE though.

The next steps:

• Working on usability
• Crossbrowser
• PHP/MYSQL/AJAX integration
• editable notes
• and a lot of more things

I hope you like it. Its not a finished thing just some brainstorming and sandbox programming.

When you have more ideas let me know.

greetings

Hackfrag