corMVC jQuery single page framework

CorMVC by Ben Nadel is a jQuery-powered Model-View-Controller (MVC) framework that can aide in the development of single-page, web-based applications. CorMVC stands for client-only-required model-view-controller and is designed to be lowest possible entry point to learning about single-page application architecture. It does not presuppose any server-side technologies, or a web server of any kind, and requires no more than a web browser to get up and running.

Real time apps using nowJS

Real time technology is powerful, syncing states between peers in finger tips.

A JavaScript framework built on Node.JS, which named nowJS, provides a very simple, reliable real time feature that easily sync states between client and server, written entirely in JavaScript.

It’s automatically sync the JavaScript variables and functions between clients and servers. Say call client’s functions from server, or call server’s function from client.

Links:

  1. nowJS Official Page http://nowjs.com
  2. nowJS Source code available on Github https://github.com/Flotype/now
  3. Flotype real time infrastructure http://flotype.com
  4. Real time messaging and synchronization using nowJS and Node.JS http://www.bennadel.com/blog/2171-Realtime-Messaging-And-Synchronization-With-NowJS-And-Node-js.htm
  5. nowJS Best Practices http://nowjs.com/bestpractices
  6. nowJS simplifying development of real time apps http://www.building43.com/videos/2011/08/02/nowjs-simplifying-development-of-real-time-apps/

Kranium a lightweight MVC framework for Titanium Mobile

Kranium is a lightweight MVC framework for JavaScript application. Its main aim is to simplify Titanium Mobile development.

Adam Renklint gave a post on getting started for Kranium.

Some advantages Kranium brought over than original Titanium mobile are as following.

  • Build interface elements grouped into tree structure using K as a root namespace, instead of using old ways, we add one label instance, one button instance, and then add one by one into windows. In old way, we cannot know exactly the orders the elements placed, until at the end we add one by one to the window, but using Kranium we can manage it well using the tree structure. (Refer here…)
  • Easily extends the elements instance. It provides an extendable class structure that is able to create our own UI interface element easily. For example, we want to create a label that showing our login status automatically when we log in and log out from our application. We can extend the original label type UI element, and register own custom events to inform the login status and update to the label UI element. (Refer here…)
  • Live updating UI modules. I haven’t tried but it sounded amazing and powerful. It said, built from Livetanium, you are able to see the changes of UI elements immediately on the simulator and the actual device whenever you made changes to the UI files or stylesheets. It is amazing, because currently I only can make change to the UI element to the JavaScript file and then click stop and start the simulator and see the changes and it takes some times, you know, when you design the UI layout, it’s frustrating. At the back end, it implemented Kranium watcher, that is able to monitor the file changes and pipe the changes through Node.JS server to the simulator or actual device in real time and you can see the real time updates of UI element on the simulator or actual device. It said it currently worked well in iOS only. (Refer here…)
  • Simple selector engine. Like jQuery, you can use the selector like $(".label .button").text("test") to modify the attributes of the UI elements. You can even chain the statements to include the other modification. Influenced from jQuery, Kranium also provides other utility methods such as .each(), .filter(), .find(), .parents() with the selector defined to modify the UI elements easily.

Kranium is very powerful as you can see, it made developments of Titanium Mobile easier and even quicker. But, I hoped that we can have a WYSIWYG editor in order to show the UI elements what exactly look liked inside the IDE without running it in the simulator or actual device.

HTML5 Full Screen API

HTML5 now supports Full Screen API that allows browser to request full screen, and it is useful for video element. It is awkward that HTML5 video does not full screen while Flash video does have previously.

The first full screen API is developed by Apple Webkit implemented in iOS. Now Google Chrome, Firefox, Safari did support full screen API that called using JavaScript. However, they did use their own API methods with less standardization for developer to write cross-platform full screen operation.

Related Links:

Native Fullscreen JavaScript API (plus jQuery plugin)


http://arstechnica.com/business/news/2011/11/html5-games-video-get-boost-from-full-screen-api-in-firefox-nightly.ars
http://peter.sh/2011/01/javascript-full-screen-api-navigation-timing-and-repeating-css-gradients/

Joli.js a lightweight ORM for Titanium Mobile

Researching Titanium Mobile development, I want to create a database application and I need a database framework or ORM (Object-Relational Mapper) to manage my entities without troubling with SQL.

Many available ORM frameworks written by JavaScript is capable of dealing with SQLite database that can worked with HTML5, Google Gears, and Titanium Mobile, and Joli.js is the one I found that is more suitable when used with Titanium Mobile.

Joli.js provides simplistic way to create database query, like amazing Query constructs (query().select(“tablename”).where(“name = ?”, “age”).execute()), and easier / extensible way to define the model entities. It is enough for simple application development. However, it does not support relationship association between entities (one-to-one, one-to-many) such like ActiveRecord did originally.

Fork out Joli.js demo on Github!

Imgshow Platform added support for Microsoft Bing Map

Imgshow Platform added support for Microsoft Bing Map. The websites that had installed Imgshow Platform can easily embed Bing Map into their web pages.

For Discuz! forum who had installed Imgshow Platform plugin, they can enable this feature, by entering into their Discuz! Admin Panel, then go to Plugins -> Imgshow Platform, clicked on “Fetch latest Imgshow Service”, and then “bingmap” code will be automatically added. It is available for both English and Chinese version.

View the help details on how to embed Bing Map into Discuz! forum,
English version: http://www.discuz.my/misc.php?mod=faq&action=plugin&id=qx_imgshow:help&topic=bingmap
Chinese version: http://bbs.qxinnet.com/misc.php?mod=faq&action=plugin&id=qx_imgshow:help&topic=bingmap

Imgshow on Facebook also supported Bing Map service. For example, you want to show “Singapore”, you may have two ways:
1) Imgshow Query Language
http://apps.facebook.com/imgshow/q:name=bingmap,center=Singapore

2) Or this convenient way
http://apps.facebook.com/imgshow/bingmap/Singapore

After you get right the map with the URL you assigned, then you share it to your wall.