In developing Javascript Applications, the best thing you can do is rely on a framework such as SproutCore (that has recently reached version 1.0) or JavascriptMVC. However in some cases the Dojo toolkit or the jQuery library can satify most of your needs, expecially when you are relatively new to Javascript or just want to avoid the initial learning time associated to the use of a framework. But, as often happens in these situations, the lack of a framework, or at least of standardized and shared solutions, causes problems with maintainability, extensibility and complexity. This is particularly true for Mobile Widgets, which are relatively simple Javascript Applications which don’t need, at least in my experience, a framework on which rely on, but need to implement architectural patterns and design patterns.
My goal for this article is to show how to create the main structure of a MVC-based Javascript Application using pure Javascript in defining classes, and the jQuery library to access and manipulate the DOM.
Model Let’s start with the implementation of a Model object. ListModel is a very simple class that implements a list of items, in which items can be added and deleted.
getItems : function () { return this._items; },
addItem : function (item) { this._items.push(item); },
removeItemAt : function (index) { this._items.splice(index, 1); } });
View The View implements an action form which is included inside the finditems HTML div, consisting of an input text field and a button to apply the form. The init method bind the apply button to the method findItemsController’s apply method, for the click event. The show method cleans the screen and makes the view visible, the hide method makes the view not visible, and the getInputValue method returns the value that has been inserted in the input text field.
show : function () { $(this.view).show(); },
hide : function () { $(this.view).hide(); },
getInputValue : function () { return $(this.input).val(); } };
Controller The FindItemsView class is tightly bound with the FindItemsControllerclass, which handles the input event from the user interface via direct calls, registered handlers or callbacks. In our example FindItemsController’s apply method is called when the apply button is pressed (this event has been register in the init method of the FindItemsView class), gets the value of the input field from the View, then performs an asyncronous call to a service: the response handler is FindItemsController itself, and three callback methods (success, error and timeout) are passed. If nothing goes wrong, the success callback is called and a new ListModel object is created and initialized with retrieved items. At this point the control is given to the ListItemsController, that has the responsibility to display the ListModel on a different View.
apply : function () { var input = findItemsView.getInput(); service.findItem(input, findItemsController, success, error, timeout); },
success : function ( items ) { listModel = new ListModel(); listModel.init(items); listItemsController.display(listModel); /* give the control to ‘listItemsView’ */ },
error : function () { alert("Error"); },
timeout : function () { alert("Timeout"); } };
Alright! This is the starting point to write a MVC-based Javascript Application using pure Javascript and jQuery library. Alex Netkachov in this article shows how to write a simple MVC-based JavaScript component with the support of the Dojo language utilities. Also want to point out this interesting video about JavascriptMVC: using a framework or a toolkit is rarely a bad idea.
Well, since in this period I am extensively developing Mobile Widgets (i.e. Javascript Application), I’m going to come back on the subject soon, showing how to implement widely used design patterns, such as Observer, Facade, Singleton and Factory.
Stay tuned !
In this moment I’m on a train heading back to Rome from the Novotel Hotel in Milan where I participated in the Vodafone widget developer port-a-thon (October 5 and 6). Vodafone and the JIL team provided a presentation of the upcoming JIL Developer Portal, market opportunity associated to mobile widgets and brand new devices. But above all this meeting has been a working session: I had to bring my laptop and to roll up my sleeves and get to work. The JIL team provided us user experience guidelines, quality criteria to follow for a widget to be accepted for publishing, showed how to port a real mobile widget and supported us all the time in developing our widgets through JIL Widget SDK and JIL Software Development Kit (Eclipse-based IDE). The JIL team also provided brand new devices on which we installed our widgets for testing purpose.
I come from mobile web site and application development for mobile handsets, and mobile widgets are rather a new thing for me despite I had to deal with Nokia Web Runtime some months ago. At first glance mobile widgets seem to incorporate all advantages associated on both classic mobile applications and browser “applications” (i.e. mobile web sites):
However JIL Widget SDK is actually far from perfect: lack of features (to be implemented), device heterogeneity and limitations, different Web RunTimes to be handled. Fortunately the JIL project, currently in Beta, consists of a skilled team of developers and a large community, so I’m sure platform stability will be improved, missing features will be implemented and new features will be added.
Ruby on Rails is a Full-Stack Web Framework I started working with in 2007.
Convention over configuration through naming conventions, Ruby on Rails reduces the repetitive writing of configuration tasks. Less code means less potential for bugs.
This is the feature that made me fall in love with this framework, and that, incidently, makes hard to find a full featured IDE specific for Ruby on Rails.
Here we compare TextMate + RailsBundles with Aptana RadRails to choose the best Ruby on Rails IDE for Mac OS X. I’m sorry I couldn’t take NetBeans IDE into account, because unfortunately my good old iBook PPC is simply too slow for it.
Textmate is by far the faster one, there’s no comparison at all. Everything you do with Textmate doesn’t take more than 1-2 seconds to complete, whereas Aptana Studio takes half a minute sometimes.
In TextMate Bundles are Plugins. Textmate is highly configurable just if you know how (and have time) to work from command line and edit or create bundles by youself, otherwise you just have to understand how commands, macros and snippets provided by RailsBundles work.
On the other hand Aptana RadRails is based on Eclipse, that means it’s a full featured IDE with a world of plugins to support Subversion and Git for instance, and is easily configurable via graphic interface. Unfortunately it inherits from Eclipse itself, and especially from plugins, configuration limitations and bugs.
TextMate has no auto-complete, and no documentation about Rails: this is a big lack especially if you are new to Ruby on Rails and you don’t know much about existing classes, functions and keywords. I started programming in Ruby on Rails using TextMate and without knowing how bundles work, it was just like using a text editor such as VIM: I used to continuously switch among TextMate, the console for Rake and scripts, and Firefox for documentation. The beauty of auto-complete is that it helps you learn your classes, the libraries you’re using (if any) and the framework you’re working on. After all, TextMate is the missing editor for Mac OS X: it doesn’t aim to be an IDE.
Lack of auto-complete in TextMate has been the main reason that made me switch to Aptana, even if it doesn’t perform very good: sometimes takes more than 5 seconds to show up the list of entries, and up to 5 seconds to make the entry documentation appear.
RailsBundles allows TextMate to perform some rake tasks, such as migrations, without switching to Darwin. That’s that, unless you want to write your bundles, obviously…
On the other hand, Aptana RadRails provides a nice interface in which you can run scripts, rake tasks and control all your servers: logs are tailed inside the IDE so you can take the outcome under control. Moreover a browser is integrated inside the IDE so that you never need to switch to Firefox or Safari. That’s what an IDE should offer.
TextMate costs about 50€. AptanaStudio is free.
Have a look at RadRails on Aptana.tv .
Here we are again dealing with the Abstract Wizard Form Controller, a form controller for typical wizard-style workflows, provided by Spring, a Java Web Application Framework. This time we discuss a more frequent problem: skipping steps.
For istance, let’s consider the situation in which you are at page n of your wizard and submitting a form for target n+1. What if, for some reason, you need to skip the step n+1 and go forward one step?
The first attempt to face this problem might consists in conditionally changing the target value inside the form included in the jsp page corresponding to the view for page n. For example we might switch between passing the request parameter _target3 or _target4 by using the JSTL Core TagLib. This works, but we are putting a conditional control inside a View, that is a very bad practice in a MVC-based framework like Spring.
Let’s move the conditional control into our wizard controller, and to be more precise into the getTargetPage method:
if (currentPage == 2 /* n */) { if (/* insert your condition here*/) { return 3; /* n+1 */ } }
return super.getTargetPage(request, command, errors, currentPage); }
This solution is clean and makes your application more readable, your code more reusable and so on…
But what if the step we want to jump to is the final step? We cannot reach it by using the getTargetPage method because the final step has no page number assigned: the finish action is triggered by the request parameter _finish and the view name is retrieved by the ModelAndView object that the processFinish method returns.
To solve this problem we can modify the view name for target n+1 at runtime by overriding the getViewName method as following:
if (page == 3 /* n+1 */) { retun "redirect:myWizard.html?_finish="; // go to final step }
return super.getViewName(request, command, page); }
In this way we simply redirect the flow to the final step. Obviously, at finish all pages get validated to guarantee a consistent state, so you cannot skip a step whose page needs validation.
The Abstract Wizard Form Controller is a form controller for typical wizard-style workflows, provided by Spring, a Java Web Application Framework.
In contrast to classic forms, wizards have more than one form view page. Therefore, there are various actions instead of one single submit action: finish: trying to leave the wizard successfully, i.e. performing its final action, and thus needing a valid state; cancel: leaving the wizard without performing its final action, and thus without regard to the validity of its current state; page change: showing another wizard page, e.g. the next or previous one, with regard to “dirty back” and “dirty forward”.
In contrast to classic forms, wizards have more than one form view page. Therefore, there are various actions instead of one single submit action:
In this article I want to focus on pages, how to set them up, expecially in the uncommon situation in which you don’t know exactly the number of pages you want to put in your wizard before running the application.
Every Spring manual would suggest you to put WizardFormController’s pages in the Spring XML configuration file, and actually this is the best way to set up your pages. Let’s consider the following configuration:
<bean name="/myWizard.html" class="control.MyWizardFormController" p:sessionForm="true" p:commandClass="forms.MyWizardForm" p:commandName="myWizardForm"> <property name="pages"> <list> <value>page0</value> <value>page1</value> <value>page2</value> </list> </property> </bean>
We have put a property named pages inside myWizard.html bean, in which we listed the page values. Each value is used as the name of the view inside your jsp folder.
And now the wizard form, you can set it up for your needs.
// put your fields here
public MyWizardForm() { // initialization }
// put your setters and getters here }
Finally the wizard controller.
public MyWizardFormController() { }
protected Map referenceData(HttpServletRequest request, Object command, Errors errors, int page) throws Exception {
Map map = new HashMap(); // put information you need into the map
return map; }
protected ModelAndView processFinish(HttpServletRequest request, HttpServletResponse response, Object object, BindException exception) throws Exception { return new ModelAndView("finish"); }
What if, for some reasons, you need to create or edit your wizard page list at runtime? Let’s face the problem.
First of all, you can override the XML configuration through the setPages method. The following example replaces the page list specified in the XML file with an identical one but that has been built at run-time in MyWizardFormController constructor.
This doesn’t help much: we moved the configuration outside XML (that’s a bad thing) but we still have a fixed number of pages with fixed values.
Let’s consider an application in which the page values are the request parameter keys for the first step (i.e. _target0). We might call setPages inside an overridden method used before the wizard controller accesses to page list, such as the getInitialPage method.
protected int getInitialPage(HttpServletRequest request, Object command) {
// override pages only when the target page is 0 if (this.getTargetPage(request, 0) == 0) {
// retrieve keys from request parameters Set parameters = new HashSet(request.getParameterMap().keySet()); Iterator parametersIterator = parameters.iterator(); String pages[] = new String[parameters.size() – 1]; int i = 0;
// fill wizard pages while (parametersIterator.hasNext()) { String page = (String) parametersIterator.next(); // let’s ignore the ‘_target0′ parameter key if (page.startsWith("_") == false){ pages[i] = page; i++; } }
this.setPages(pages); }
return super.getInitialPage(request, command); }
In this way, as soon as myWizard.html bean is invoked by clicking on a link (i.e. GET http request) or submitting a form (i.e. POST http request), the page list is dinamically built starting from request parameter keys. This would be more useful if you decide to use request parameters values, or attributes.
For my purposes I used request parameter keys retrieved from a form submission in order to run an unordered set of pages and reporting each result (i.e. validation) in the final step.
Its name is Ovi Store, has been announced at the Mobile World Congress 2009 (Barcelona) in February, and on May 26 it went live for all Nokia users in the world. More than 50 Nokia devices were compatible with the service from day one and Nokia estimated that around 50 million people with Nokia devices would be able to benefit for Ovi Store. Initial number of applications was 20.000 and new applications creation is propelled by an high percentage of money going to developers. Moreover the Nokia N97 will be the first to come out with Ovi Store pre-installed.
The Global Intelligence Alliance Group conducted an interesting analysis on mobile market places. Different market places have been compared in terms of:
to get the following rankings table:
Source: Global Intelligence Alliance. Points are allocated as follows: 2 – strong, 1 – medium, 0 – weak based on assessment/expectations of all application stores along the parameters.
It’s interesting to note that Nokia’s rank is two points lower than iPhone Apps Store’s, but equal to Android Marketplace’s. Further information in the Global Intelligence Alliance’s article.
What distinguish Nokia Ovi Store from the other marketplaces is the device and application heterogeneity Nokia had to manage and offers. Despite iPhone Apps Store, that is clearly made for one phone, Nokia Ovi Store covers more than 50 Nokia devices, Series 40 and Series 60 included, and because of this for each mobile application the Ovi Store needs to indicate the device compatibility. Moreover, even if every application you can find inside the Ovi Store behaves and looks like it has been developed using the same technology, the same programming language, it doesn’t ! In fact, a Nokia application you download from Ovi Store might be:
This might be seen as an advantage for the developer because she/he has the chance to choose the technology which likes more or which better fits to application features or customer requirements. And maybe it is, we’ll see what happens in the next few months.
«If you ever admired those colleagues who stayed in office for more than 10 hours day by day, you should consider the fact that after a specific amount of work time bug rates increase dramatically and work results tend to reach lowest levels. Thus, working too hard for a long period of time could even have a negative effect.» Michael Stal
“WEP suffers from two fundamental deficiencies: it was poorly designed and it was poorly implemented. Other than that, it’s fine.”
H. Berghel and J. Uecker. Wireless Infidelity II: Airjacking. Communications of the ACM, Volume 47, Issue 12, pages 15-20, December 2004.
<script type="text/javascript" xsrc="http://pub.mybloglog.com/comm2.php?mblID=your_id //your id &c_width=___px // The width in pixel. Ex: c_width=148px &c_sn_opt=y|n // Show screen names? Yes=y No=n. &c_rows= // Number of rows. Ex: c_rows=3 &c_img_size=f|h // Image size. f=full h=half-size. Ex: c_imgsize=h &c_heading_text="title" // Title of the widget. Ex: c_heading_text="Readers" &c_color_heading_bg=color_code // Color heading background. Ex: FFFFFF &c_color_heading=color_code // Color heading. &c_color_link_bg=color_code // Color link background. &c_color_link=color_code // Color link. &c_color_bottom_bg=color_code"> // Color bottom background. </script>
Google Blog Search and Technorati are two blog search engines I use regularly, hence I should be able to make a comparison between them by evaluating the main features. If you don’t know the differences between a blog search engine and a web search engine click here.
Technorati is both a social networking system and a search engine for blogs, but search results are ordered only by freshness and you have not the possibility to choose another way to sort them. In my opinion this is the weakness of Technorati. Indeed I use Technorati just to look for news in the blogosphere, that’s that.
Instead, by using Google Blog Search you can sort search results both by date and by relevance (default setting). Google experience in searching brings a better accuracy in result, but it’s not so unusual to obtain search results which are not blogs. And this is not good for a blog search engine! Maybe this is due by the fact that Google Blog Search is still a beta version and only recently has launched an own Pinging Service.
When in mid December 2006 Google Blog Search surpassed Technorati in market share of visits (although TechCruch didn’t agree with the stats by hitwise) I was not surprised. It has been enough to place a link to Blog Search on the Google News home page to rocket its traffic.
I think Google Blog Search reaches mainly people that have never used a blog search engine before. Moreover most people could not like a blog search engine that lists just recent posts, such as Technorati. This might be good for who’s looking for (technology) news, but not for the remaining people.
