Yahoo UI Ext, Now Named Ext JS is released!
Get it while it’s HOT. Yahoo UI Ext is now renamed as Ext JS and it is now in Beta. I believe it is now compatiable with JQuery as well as Scriptaculous.
I’ve talked about the Yahoo UI Ext in my earlier posts and to recap on what it has to offer, here are the screen shots again to refresh everyone’s memory
1. An Ajax Search That turns up search result with paging! Useful!
2. Post your comment is this window and view the comments in a separate tab!
3. Want to add a new tab? Here it is!
4. Want to have a grid that’s resizeable, draggable and sortable? Look no further! (if you are like me, being searching for a grid that has these three features, you KNOW it’s nearly impossible. ActiveWidget is nice, but well, they are not as nice as Jack, they want $$$)
The advantage of Ext JS is the fact that it provides powerful GUI components which I have emphasized repeatedly that they are important to Ajax development.
You can think of it as the Java Swing or Windows Winform for the web world and by having these GUI widgets at our disposal, we can truly make some amazing apps. In fact, some of the widgets such as the Grid control, Tree Control might be incorporated into our next version of the Jumptree Project Management software.
One thing I need to mention is that the license of Ext Js is still LGPL, they provide a commercial license in the sense if you want to give support for Jack, you can purchase them (to top the cherry, you will get premium support as well)
Lastly, Ext JS is not just a javascript framework as I see people comparing it with JQuery and Scriptaculous. They are different breeds. Ext Js is compatible with JQuery and Scriptaculous, Ext Js is a suite of GUI components powered by Yahoo UI library or JQuery or Scriptaculous on the backend. Hope that clarifies the confusion.
Now, don’t wait anymore, start experiment with Ext JS NOW.
Mini Ajax Examples and Source Code
I just came across this MiniAjax.com site and the author did a great job centralizing all the ajax examples out there and all of the examples he/she collected are pretty too!
A lot of the examples there I have seen before, but I just never collected them myself. The best part of this site is all source code of the examples are available for us to download, study and use them in our own application.!
The favorite ajax example of mine had to be the JQuery based example of google home page like drag/drop widget, I strongly recommend every Ajax enthusiast to check it out.
MS Ajax and Yahoo UI Hand-In-Hand. Very NICE!
I decided to test out if MS Ajax would play nicely with Yahoo UI/Ext and to my suprise, they do!! How sweet is that!!!
I decided to take the sweet FeedViewer from Yahoo UI Ext ,
and instead of add/listing RSS channels, I list a bunch of sites which are pulled back from the database and when you click the a site, the site detail (which is also pulled from the database like site description, site popularity and etc etc) is displayed into a new tab inside the main center panel!
Here is what I did.
1.
Yahoo UI initaite a function upon window’s onload by doing
YAHOO.util.Event.on(window, ‘load’, Viewer.init, Viewer, true);
because MS Ajax has the buildIn function “pageLoad()”, I replaced the above statement with
function PageLoad()
{
Viewer.init();
}
much simpler and it works! :)
2. I added a Search text box to the toolbar div “myfeeds-db”, and used MS Ajax’s “addhandler” to watch for “keyup” activity (sort like auto-suggest) by doing
a) var searchBox = new YAHOO.ext.DomHelper.Template(‘Search :’);
b) searchBox.append(‘myfeeds-tb’);
c) Sys.UI.DomEvent.addHandler($get(“SearchBox”),”keyup”, this.searchSites);
As you can see, the first statement, I used Yahoo UI/Ext to create the textbox, the second statement, I added the textbox to the container div and the last statement, I used MS “addHandler” fucntion to watch for “keyup” and attached a callback function “searchSites” for rendering later.
and guess what? it works too!
3. To retrieve the sites from db upon while you are typing, I needed to performe my Ajax function. In my case, I used a method in my codebehind instead of webservices, so I did
PageMethods.GetSites(typed_value, this.onSiteRendering);
again, it worked beautifully.
So to sum up,
1. I used pageLoad() instead of Yahoo.Util.Event.on(window, ‘load’, ......) checked
2. I used addHandler() function, checked
3. I used PageMethods to retrieve my data in JSON format, checked.
A few things I noticed.
1. Yahoo UI/Ext use getEl() as a shortcut to document.getElementByID where MS Ajax use $get().
2. Yahoo UI use Yahoo.util.Connect.asynRequest(‘POST’,’your page’, {success:success_callback_function, failure:failure_callback_function}, ‘parameters’) where in MS Ajax we simply do PageMethods.YourMethod(parameter, callback_fucntion);
3. Yahoo UI ext supports Templates
for example
var postSites = new YAHOO.ext.DomHelper.Template(‘{name}
{desc}’);
to replace the value such as {id}, {name}, {desc}, simply declare a variable like so
var mysites = {};
mysites[id] = {id: id_value, name: name_value, desc: desc_value};
postSites.append(‘ui-element’,mysites[id]);
all values will be replaed with your value in the Template. Very handy. MS Ajax should have this functionality as well, I just can’t find any documentation on how to do it right now..(todo)
I probably didn’t have to do these things the way I did it, but I just want to test out if I mix functions from both libraries, would it work? That’s my purpose and I’m gladed that they placed so well together.
MS ajax is missing some powerful UI elements, their AjaxToolKit are somewhat useless to me as nothing is paticular useful. Yahoo UI provides a suite of much thought out UI elements and I intend to use them all to my advantages. In the next few days, I want to test out the Yahoo UI/Ext Grid (supports resizing!!) with MS ajax, let’s see how well that will work.
Looks like it’s going to be fun for the next few days. :)
No Love for my "Web Command Prompt" project?
I was cleaning up my documents in my computer
earlier and I found the “Web command project” that I felt worthy to bring up again, but
for some reasons, people never took much interests in it. I’ve always
wondered why aren’t there anybody else who can see the usefulness of this
project?
Basically, it is a JavaScript “web command prompt” project. A basic
bare bone example can be seen here on my “web
command prompt” project home page
In this bare bone example, you can execute commands such as
“clear” (to clear the screen), “enable debug” (to see my
internal debugging message in another window”) “open
http://www.slashdot.com” (to open a random website, in this example, it’s
slashdot.com)
Because I know by hard code pre-defined commands will simply be boring, to make
this project useful, I have to allow developer to easily define their own
command and what the commands do, so I designed the framework to be
“pluggable” where developers are able to plug-in their own commands
and do whatever they want. I like to brag it as the web command prompt
version of the eclipse environment.
Take this Ajax
one for example, I hooked up several commands to execute the backend
.net classes using
It’s a web traffic stats monitor tool, commands like “webstats top
visitors” will hit my backend classes which in return will query my IIS
logs and return a list of visitors who visited my sites most often. There are
some other commands on that page that pulls different statistics as well, but
the ideas remains the same.
If you are doing
how certain JavaScript function can call your backend class right? well, this
is no different. You simply provide your commands and their associated
is taken care by the framework like generating your output to the screen and
what not. (okay maybe it’s not that easy, but it’s really simple) You can view an
example of how to write the plug-in here.
My original intention of this project is to monitor log files on the remote
server in real time. My .NET application used log4net to generate log files, so
I wanted to monitor the output on the remote server without the need to FTP in
and download the log files to view manually. Implement something like the
Unix “tail” commands where I can see the log output in reverse order.
Of course, all this requires a bit ajax magic, but it’s really no harder than
the traditional ajax way provided the command prompt itself handles most of the
rendering.
Anyhow, it has been several month and even I forgot about it because it wasn’t
generating much traffic. However, I will start the v2 of the project where I’m
going to look for another JavaScript framework as the base library (Currently,
I’m using Atlas JavaScript library, unfortunately, it doesn’t support safari).
The requirement of the JavaScript library must give me the following abilities.
1. Namespace support
2. Inheritance
3. Interface
4. Load other JavaScript libraries.
I’m still researching around for the best fit. Dojo seems to provide all this,
but it feels a little heavy for me, once I find one that suits me, I will begin
v2 regardless how many people like it or not out there. In the past year,
I’ve developed a project management application with my fellow designer friend
(soon to be released), so I hope the v2 command prompt will later be an additional
asset to the application (for viewing application errors, users who are online
and what not).
If there are anybody out there who would like to help me on this, it’s greatly
appreciated it. The source code is hosted on GoogleCode which can be found
here.
Atlas to Ajax Beta
I loved Atlas and Now I’m out of Ajax.
I downloaded Atlas Control Toolkit on 10/19/2006 around 3:00am and guess what? Around noon which was 9 hours later, Atlas Control Toolkit became “Ajax Control Toolkit” which is now updated and based on “Ajax v1.0 Beta”.
Well, at first glance, I was tempted to download the new release and then I decided to read the new documentation first and I noticed this in this installation instruction
note
The installation package installs the assembly (Microsoft.Web.Extensions.dll) in the Global Assembly Cache (GAC). Do not include the assembly in the Bin folder of your AJAX-enabled Web site.
Did I read what I just read?
My applications and the products I’m working on are geared towards customers in hosting environments, meaning I will only use functionalities that works in a “medium-trust” environment. This essentially means my products are shot out of the sky for maybe the next one year, at least not until the Ajax Library goes official and is widely adopted by hosting companies and/or rolls into .NET v3.0. If that is the case, how many hosting companies will install .NET 3.0 in the next one year?
Okay, Atlas itself was an “unproven” framework and to use it in any products that I’m trying to develop was not such a good idea, but hey, I spend a lot hours to get around its limitations and I’m very confident to say my products worked well with Atlas.
Now, Ajax Beta is installed into GAC, this means even if I want to follow up, I don’t have a practical reason to do so. At least with Atlas, I could merge into my products and deploy them to customers… and now? I can’t do it anymore.
For early adopters like myself, this is truly a bad news.
For now, I will stick with what Atlas has to offer which is not a bad set, pretty much offer what I need at this time with lots of things still left to be desired. I’m just not sure in the next one year, what kind of stuff will come out of other Ajax frameworks like Dojo, scriptaculous, etc and give my competitors a leg up, especially if the Ajax v1.0 kept improving with the things that I want, and yet, I can’t use it. It’s as if someone offered this super delicious meal in front of me and I can’t eat it.
I’ll have to keep my eyes peeled for other frameworks now, so I don’t miss out anything important.
BUMMER!
Some Thoughts on Ajax Application
While working the whole day today with my clients back and forth, I wanted to document some more thoughts on developing Ajax Application.
It is really more about make your GUI refresh just part of the page without post back.
For example, during an ajax update, it’s very common to take one parameter change and a few different components have all to be updated. Say you have a repeater, a drop down list, and yet another repeater, each bind to a different data query depending on the parameter. With Ajax, it’s impossible to bind all three components in one call. You have to make three separate db calls. For a big site, this could be a big performance hit.
What’s more is, say your three components are hierarchal laid out, one depends on another. With Ajax, you have to “chain” them up, after one is finished, get the callback, then call another, get another callback and do your thing. Quickly, your javascript gets so complicated, almost feel as if you are loosing control of it.
The last issue I faced is concurrency. Two parts of my applications loads at the same time . However, the second part depends on a session variable from the first part. While first part is making an Ajax call, the second part is already loading.
Just a few things I thought Ajax developers out there should know. Plan out your action items before you dig into Ajax, otherwise, you’ll quickly find out what kind of holes you just dug yourself into.
AjaxPro Namesapce Error
While I was imlementating my AjaxPro application last night, I came across an interesting issue that I debugged for hours and I thought all you AjaxPro users should know so you wouldn’t spend as many hours debugging like I did.
I added an AjaxMethod to one of my code behind class and when the page is loaded, I get an error
”[Namespace] not defined”.
where [Namespace]” is the class namespace that I registed using
AjaxPro.Utility.RegisterTypeForAjax(typeof([my class name ]));
So everything is there! What went wrong? All my configurations are correct (I know that because another page/code behind with AjaxMethod worked perfectly fine), so what is the problem????
After hours of debugging, googling and reading newsgroup, I found an anwer by this guy (my hero) and the gottcha is
MAKE SURE you have a server side form tag (with runat=”server”) in the page. For some reasons, AjaxPro need the form tag to keep track of the hidden values I guess, so without it, your [namespace] wont’ be reconginized.
Sure enough, once I added the empty form tag, things worked perfectly. That was 2 sleepless hours.
Hope this information helps some of you guys out there.
Happy Coding.
AjaxLab Command Prompt Checked In
Okay, the first version of the command prompt has been checked in. However, I didn’t manage to solve the issue that I wanted to, but I’ll check it in anyway.
The issue is that currently, I wanted to give third party developer the ability to include the libraries per page. Meaning, some pages might have one set of commands and another page can have another set, but I wasn’t successful on that.
The only choice you have right now is to include in the central conifguration file and that would make all pages have all the commands libraries (which makes it bigger than necessary if you don’t want certain plugins)
I’ll have to think of another solution to this and meanwhile, the source code is a exact duplicate of the project site including the source code.
Hope someone can help me out on it.
GoogleCode - AjaxLab Command Prompt
AjaxLab Command Prompt just had its own open source project home. It is now hosted under Google Code
Please join me at Google, you will find the latest discussions, project updates and more importantly source code on SVN. (I will check in the code after one more fix here on my end)
If you have any questions, please post your discussions under google groups which can be found on the right of the google-code project home page or for simplicity’s sake, here
Thanks.
Google Code is here!
It’s finally here. A competitor to sourceforge, gotdotnet and codecomplex, not only you can find a lot of google code there in different languages, you can store your own open source projects there as well, so I’ve heard?
I’ve been fighting myself whether to release the command prompt under codeplex or google code in the last few days and for traffic and visibility reasons, I might go with google code if it’s indeed true that google host open source projects.
The other issue is codeplex seems to be more .NET centric and my Command Prompt is pure javascript centric (although, it does utilize the Atlas javascript libraries), it’d seem to make more sense if I store my project with google code.
Speaking of which, my final fixes of the command prompt is near completion. I have one more outstanding issue left which would enable developers to include plug-ins anywhere in their webapp and include them only when needed. Currently, all plug-ins once registered, would be available to all pages even if they don’t use those plug-ins, not so ideal.
So stay tuned. I will release the source code shortly in google code or codeplex and documentation will be updated to reflex the latest changes.