Funny Video telling us how the web and real life are changing
http://www.youtube.com/watch?v=6gmP4nk0EOE&eurl=
You are currently browsing the archive for the AJAX category.
Dojo Version: 0.4.1
In the previous few months, I was using Dojo to develop one application. The reason that I chose at that time is due to the beautiful widgets provided by its framework. In fact, I don’t know dojo also provide many utilities which facilitates the development on the web interface. In my application, I made use of several widgets, like ComboBox, FilteringTable, TabContainer, ContentPane, LinkPane, Button, FloatingPane and Tooltip, etc. Besides the widgets, I also make use of its dojo.io.bind and dojo.event.connect service.
Widgets - Ease of Use
TabContainer
Dojo provides a lot of widgets. At least it satisfies what I want. The first widget that I want is the TabContainer. It provides nice layout in navigating between pages. However, this widget got a very important problem, it limits the height of the block. For webpages, we always set the height in percentage so that we expect the page can heighten when it is long. Nevertheless, by setting height: 100% to the style, it renders to be the height of the current browser view, the block does not heighten automatically.
ComboBox
Another widget that I always use is ComboBox. It enables end users to type part of the text and the web will provide a list of matching entries. Here are the problems I face. The first one is about support on IE. This widget is not in a good condition when using in IE. It easily lose focus when pressing backspace or after switching window. My user always complain why the whole page loses when pressing backspace. Then I will tell them the reason is the backspace triggers the “Back” function of the browser.
Besides, a suggestion on ComboBox should be eliminating the limitation on prefix search. I did see some ComboBox like implementation in a commercial framework like can do that. It should not be a big performance issue to Javascript either.
Performance
Besides the availability of widgets, performance is also a major issue for AJAX frameworks. In fact, I did not perform any specific testing using any tool on Dojo. So, my saying here may be somehow subjective. However, what I say is based on its framework design.
In Dojo, if you want to use Dojo widget, the browser will load a lot of js, css files. If your web application is not designed well, it will load the same set of files again and again, which consumes time and network bandwidth. In my application, the performance is still good for local network. Nevertheless, it is quite slow when connecting from home through the Internet. Sometimes, the browser is even hanged.
Also, the size of these files are quite large compared with other frameworks. I know Dojo community is always doing the compression to make file size smaller, but it is not enough yet. Hope this becomes better in the coming releases.
Other Problems
There is one problem on the support of different browsers. I focus on supporting Firefox and IE. For Firefox, all things are good because we have Firebug to help, and Dojo it tightly integrated with the debugging function of Firebug. However, IE support is really not enough. There are many strange debug messages when using IE. I can’t find where they come from.
Also, the most serious problem is that my IE will crash if I use my system for some time. This doesn’t happen in Firefox. Google Search gives me some hints about the issue, which says that if we open a lot of widgets in IE, the memory control will get into problem and the browser will crash. Really serious…
Summary
Even I have faced so many problems in my development, I still think Dojo is worth to use in development. The main reason is that Dojo is only in a beta version now. The more stable release 0.9 M1 is released when I am writinig and 1.0 will be released soon. The architecture is totally re-factored, I believe the Dojo community will work out a much better solution to the problems I faced.
Mashup, a term suggested to be part of Web 2.0, means integrating services and contents from different web sites to provide your own website. A common example we can always see nowadays, is website makes use of Google Map to show where their users and businesses are located.
The web is now blooming in a very fast speed. With the introduction of Web 2.0, includes the use of AJAX, many people around the World are developing applications much easier. Quite a lot fantastic ideas in the old days become real and appear on the Web. Despite this, ONLY one group of developers still cannot do much, so people starts to collaborate.
By using Web Services and related technology, they start to exchange information in a raw XML format. Mashup then comes out. Mashup mainly are websites that retrieves the information above. Transferring XML format is brilliant since the service provider only aims to provide content. The service receiver can then fit the data to their own design. From this approach, even the end-users are viewing the same news feed, they can choose different layout from various websites according to their own preference.
An article by Sun is talking about Mashup
http://java.sun.com/developer/technicalArticles/J2EE/mashup_1/
ProgrammableWeb collects many Mashup website
Since learning about AJAX from Shan Shin’s JavaPassion course last year, I have tried several AJAX Frameworks in testing environment and have already made use part of them in production application. These frameworks always lead me to dead end. Most of them are not mature enough, and each of them do have something better and worser.
Here, I would like to make a comparison between several frameworks that I’m really interested in, and probably make use of them in the coming projects. (You know? There are probably more than 100 frameworks available, both commercial and open-source. I guess no one will have time to investigate one by one) Let me first list them out.
Dojo
This is the first framework that I learnt and made use of. It is developed by a group of web application developer, and most of them are well equipped with web technology skills like Javascript, DOM, etc.
YUI (Yahoo! User Interface)
Shan Shin’s course didn’t mention about this framework at the time being. The reason that I know about this comes from Dojo. Many people complains Dojo is slow in terms of performance, and I know some of them switched to YUI due to this reason.
GWT (Google Web Toolkit)
Yet another framework that is developed by big IT company, but this one is not an open-source framework. It provides API and guidelines to help you developing applications.
ZK
Sourceforge.net #1 AJAX Project. I have noticed this framework long time ago, saying that creating AJAX applications without Javascript. This will also be covered in Sang Shing’s course in the coming few months.
In the next part, I will be continuing on the topic by providing table of information.
In using Dojo, I tried to return an XML String from the server side, and parsed it in the javascript. This is the code portion for making the AJAX call:
retrieveUserDetail = function(id) {
// Use dojo.io.bind() for remoting
dojo.io.bind({
// URL - destination you want to send your request
url: “validate?id=” + escape(data.Id),// Callback function that will be invoked asynchronously
load: function(type, data, evt){ processRetrieval(data);},// Error handler function that will be invoked in case of an error
error: function(type, error){ alert(”error”); },// Backward and forward button handling
backButton: function() { alert(”back button pressed”); },
forwardButton: function() { alert(”forward button pressed”);},// Type of data you want to receive
mimetype: “text/xml”
});
}processRetrieval = function(data) {
var message = data.getElementsByTagName(”loginName”)[0].childNodes[0].nodeValue;
var userId = dojo.byId(”fUserId”);
userId.value = message;
userId.disabled = “true”;
}
As specified, I used mimetype in the dojo.io.bind() function. This works in Firefox perfectly, but in Internet Explorer, it does not work. IE will recognize the responding result as plain text. As a result, you have to explicitly declared in the server side telling that the result is in XML format. For me, I am developing Java Web Application, so I used this in the servlet:
response.setContentType(”text/xml”);
By doing this, IE will recognize the result as XML document.
Reference:
http://dojotoolkit.org/pipermail/dojo-checkins/2007-January/015183.html
See. Here is my certificate from the teacher, Mr. Sang Shin
http://www.javapassion.com/ajax/certificates1/HarryNgCheukKeung.jpg
Finished another homework on the AJAX Work Shop, which is the practice for GWT (Google Web Toolkit). It is a very good exercise to learn about GWT, since it will be difficult to start GWT without a tutorial.
GWT is a JAVA-based toolkit for developing AJAX applications. You don’t need to know any HTML and javascript under this framework. All you need is the knowledge of JAVA and GWT API. Writing GWT applications is just developing Swing applications. You need to make a button by creating a Button object, make a textfield by creating a TextField object. All that easy if you are simply a Swing player.
In fact, to me, I’m mainly doing traditional web applications, writing JSP and using MVC patterns. It will be quite strange to me for familarising a Swing-liked GWT.
Anyway, the technology of GWT is really a great idea for all JAVA developers. The same question just like in DWR I would like to ask, is whether this framework can be integrated to a J2EE framework, for the sake to raise the flexibility of resource allocation.
Just finish the practice on AJAX Class 6 which is about another framework, DWR (Direct Web Remoting). This framework provides the capability of calling the function of a JAVA class directly by a corresponding Javascript function.
This kind of framework is good, in which it saves the time to construct the relationship between an AJAX call and a web resource provided by the server side. However, the framework also limits the use of server side to be a JAVA web application. Also, the server side should provide the interface in terms of Javabean, that means other frameworks like Struts and Spring cannot be used.
Another concern that I’m wondering is that, whether I can use DWR at the same time with EJB framework. Theoratically, an EJB should be able to be called by a Javabean, so I guess such combination should work. In fact, I didn’t have a chance to look in depth. May consider to work on this in the future.
Anyway, here is my homework screen capture for Class 6.
Reference:
http://www.javapassion.com/handsonlabs/ajaxdwrintro/
Finally finish the lab 3 of the Ajaxworkshop. Since the flash is not posting, I have totally slowed down my learning on AJAX. It’s too bad and I have to work hard to follow from now.
This lab is for learning basic Javascript. To me, just a lesson for revision. The homework is easy too. Here just put my results.
Reference:
http://www.javapassion.com/handsonlabs/ajaxjavascript/
FireBug - an extension of Firefox, helps to debug javascript error.
In the past, it’s always annoying to check the error of javascript. We always waste so much time to debug Javascript code. There are two major reasons.
- The javascript is so difficult to see, since not like in JAVA, which we can run in the debug mode, and stop at particular line to see the object state.
- Our javascript is written in JSP pages, each time when we need to change a little bit of javascript or even add an alert message, the whole JSP need to be compiled again. This compile time is relatively longer than JAVA codes a lot.
Now, FireBug helps to solve those problems. It solves the first problem easily by its “Debugger” function, you can see the object reference by going through the codes line by line.
For the second problem, FireBug allows us to ad-hoc change the code contents, and see the results using the “Debugger” as well.
FireBug actually have more than that, here is a video talking about the detail functions of FireBug. Take a look!
A Guide to Javascript Debugging
http://www.digitalmediaminute.com/screencast/firebug-js/
Get FireBug:
https://addons.mozilla.org/firefox/1843/
http://www.joehewitt.com/software/firebug/