Learning2.0 : Journey to about2findout.com

I'm trying to implement some caching features on the site, in order to speed it up or to allow more users to access it simultaneously. There is a good video tutorial on asp.net caching on the asp.net site. On the next major update of the site, I'm using the outputcache control on a few pages, and I hope it will not interfere with the many ajax calls and personalized data on use on the pages.

Update: I tried it and it failed. I'll have to use other caching techniques to cache parts of a highly personalized and multilingual site like about2findout.com

Labels: ajax, caching

Here is what I wanted to share on making the limited mobile web version of the site:

- There is a special domain extension available for mobile sites: .mobi . As my normal registrant that I use for .com and other domains (directnic.com) did not offer .mobi domains, I registered it very cheap on godaddy.com . Godaddy.com is probably one of the biggest or the biggest web domain registrant and they offer a lot of add-on services. In fact, they are so commercially oriented it's very hard not to just buy what you wanted without anything more :-). I redirected the about2findout.mobi site to a subsection of the existing site, as it is in fact just part of the same asp.net web application. (www.about2findout.com/mobile)

- It was hard to choose what to implement and what not. So far it is a very limited site compared to the full web brother, but I hope just enough for mobile phones and their limited bandwidth and screen size.

- I wanted to make it look a little like iPhone applications. Apple does have a SDK (Software Development Kit) for the iPhone, but I didn't find my way in it immediately, and besides I have no time to learn yet another platform or programming language. As far as I know there are no 'iPhone button generators' on the net available, so I ended up making the buttons on the well known mycoolbutton.com, and adjusting them manually for size.

- If you want to test how your site looks like on an iPhone Safari browser, go to iphonetester.com .

- Windows Mobile devices and the provided Pocket Internet Explorer have a lot of issues with an asp.net Ajax enabled web site. The CSS style sheets don't always behave in the same way as on a computer, and for example the ProgressPanel didn't behave well. So I removed a lot of ajax functions in the end. It is possible to run limited Asp.net Ajax functionality on Windows Mobile version 6 or higher, but I just didn't want to figure out what works and what doesn't. If you have that time however, you can start with this excellent video tutorial on MSDN.

- If you make your mobile site with ASP.NET 2.0 on Visual Studio 2005, you will need to update the browsercap files, so that your site would recognize the Windows Mobile 6 platform. There is a good article on how to do that here (Jim Wilson).

Labels: .mobi, about2findout.mobi, ajax, asp.net, mobile

Today's programming struggle was all about getting the Anthem.NET editlabel component to work properly in my site. The idea of an 'edit in place' text on a site is just great. Image: instead of seeing an error in your question, going back to the form and changing it, you can now just click on the text and it changes in a textbox field that you can edit. How cool is that? The free Anthem.NET toolkit of Ajax controls for .NET provides the EditLabel control for this purpose.

Unfortunately it did not quite work out the way I wanted to. I have several of these controls on the same page, but only the last update would stick, the others would not get communicated to the server on a postback. So I started troubleshooting and looking for alternatives. (Problems can either be solved or avoided, both are valid options IMHO.) Nikhel.Net's blog has a similar script for download, but it was written on a beta version before the go-live of the AJAX.NET toolkit, so I did not trust it to run. I stumbled on the DTAjax project on Codeplex that has taken the previous script, updated it and included it in its tools. This control worked fine (almost hurray!), but only in IE and not in Firefox, so I decided not to use it either.

Finally I changed the code of the Anthem.NET EditLabel. By default it uses a proprietary feature of IE to support inline editing when it detects IE and supports a real textbox for other browsers. I disabled the IE detection in the source code and on my test page everything worked out fine. But ... not on the intended page. Now you can change sometimes one, sometimes a few, sometimes all... Before I go completely mad, I just leave it a 'documented bug for IE' of my site and move on...

Labels: ajax, anthem.net

In the battle for RIA (Rich Internet Applications), the dominant Flash player (from Adobe) gets competition from all sides.
Flash is currently installed on 80-90% or even more of browsers, and is also a very popular learning format because of its excellent compression. It is a safe bet to develop for flash because it is the dominant technology by far. But in the future, we might have to consider competing technologies, just as we have to live with multiple browsers, platforms, etc.

- AJAX of course is a popular technology, and makes use of JavaScript on the client side
- Microsoft announced the beta version of Silverlight, a direct Flash competitor and a light version of the Windows Presentation Foundation (WPF) technology in .NET 3.0. There is a cross-browser, cross-platform player for Silverlight and some demo's available.
- Sun just announced the JavaFX scripting language to create rich applications (also for mobile phones etc)
- And the creator of the Ruby on Rails open source framework has his own opinions on all of this as you can read in this InfoWorld article

Will all this mean progress for the web user or double work for site developers?

Labels: ajax, flash, silverlight

It's here and it's free. Formely known as 'the Atlas project', Microsoft released the 1.0 version of their free ASP.NET Ajax add-on end of January. All you need to get started is on the ajax.asp.net site. AJAX essentially will allow you to build richer client interfaces for the web. For example, it will allow you to only update a part of a page instead of remaking the whole page for every single click.

Q: What are all those different downloads?
A: There are 3 downloads in total that are important.

• The basic one is called the ASP.NET 2.0 Ajax Extensions. That is the 'official', released and supported version of the core Ajax functionality.
• The most useful one is the Ajax Control Toolkit. This is a collection of very useful, ready-to-use controls with Ajax behavior, such as watermarktextbox, hoovermenu, modal popup box, etc. They are created by an open source community that is supported by Microsoft.
• The Futures CTP. This is the beta of whatever functionality was not ready for the 1.0 release of the ASP.NET 2.0 Ajax Extensions. It is still in test and will be included in a later version. I'm not using this as I only want to use final and tested material.
  

Q: How to install the ASP.NET 2.0 Ajax Extensions?
A: Easy. Just download it here, and run the installation program. It will install the extentions on your hard disk (normally in the \Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025 folder). It will also install the extra controls in your Visual Studio 2005 toolbox, if installed. There is a good video on how to install the basic Ajax framework here. The major components are the ScriptManager and the UpdatePanel. You need to place one and only one ScriptManager control on every page you want to have Ajax functionality. And you use an UpdatePanel to mark a part of your page for partial updates. (Only what is in the UpdatePanel gets refreshed, the server doesn't need to waste its time on rebuilding the other parts of the page.)









Q: How to use the Ajax Control Toolkit?
A: There is a nice video describing the process here. You can download the toolkit from Codeplex. That is the place where you'll find the open source projects endorsed by Microsoft. There is a live preview site of all the controls in the toolkit on http://ajax.asp.net/ajaxtoolkit/. The toolkit does not have an installer. It comes as a .zip file, so you'll need to unzip it to your hard drive, for example also under the \Program Files\Microsoft ASP.NET\ folder. You will also need to manually add the controls to Visual Studio 2005. To do so, first make a new section in the toolbar: right-click and select 'Add new tab'. Give it any name, for example Ajax Toolkit. Then click right on that tab and select 'Choose Items...'.

















On the next dialog box, Browse to the \Ajax Toolkit\SampleWebSite\Bin\AjaxControlToolkit.dll file (or where you unzipped it). This will add all the controls to your toolbox.

Q: How do the toolkit controls work?
A: You need to understand they are not controls on their own. They are extenders that add Ajax functionality to existing controls. For example, the TextBoxWaterMarkExtender will add a watermark to a textbox control, such as below. When nothing is typed in the box, your message shows. For most of the controls, there are excellent free videos here. Watch a few and you will get the hang of it. Then start experimenting and be amazed!

Labels: ajax, asp.net

This weekend, I played with Ajax on my "toy" project 6C Quotes. More specifically, I added a star rating control to the site. You can see the differences for yourself:
- http://www.about2findout.com/6CQuotes/default.aspx is the 'normal' page
- http://www.about2findout.com/6CQuotes/defaultajax.aspx is the 'ajax' page

The quote (pink area) is now an autonomeous update panel. That means if you refresh the quote, only the pink square is refresed, and the rest of the page is not reloaded by a server round trip. That also means when you click the 'New Quote' button, you stay where you were on the page. The star rating control itself is part of the upcoming Microsoft ASP.NET Ajax Control Toolkit.

So what did I find out that I wanted to share?
- The start place for AJAX on an ASP.NET platform is the site http://ajax.asp.net . There are two parts you need do download and install. First of all the Ajax framework extention itself. This is the core functionality (codename ATLAS) made and supported by Microsoft. It is currently in release candidate 1 and will ship soon. Secondly the Ajax Control Toolkit. This is a set of ready-to-use controls that are built upon the framework and created by an open source community (so not Microsoft itself). It's a combination that seems to work.
- For the rating control and basic information on ajax on asp.net, have a look at the free video tutorials on asp.net (free) or on aspalliance.com (free registration). Highly recommended! I think they are made with Camtasia Studio, but I'm not sure.
- If you want to AJAX-enable existing asp.net applications, you need to add these lines in the web.config file (see attachment webconfigcode.txt)


- You also need to add the AjaxControlToolkit.dll in the \bin folder of your application. If your hosting provider hasn't installed the Ajax extentions on the server yet, you also need the core framework DLLs (System.Web.Extentions.dll) in that \bin folder.
- .PNG image files don't work in a transparant way in most browsers, so I chose some .GIF star images
- I couldn't figure out how to have a message 'Thank you for rating' without adding an extra button and adding a server round-trip. I don't want to add another button, users already need to click a lot.
- The System.Math.Round() function doesn't round properly, or at least not how I would like it to. (Which is how I learned it in school.) For example, it rounds 4.66 to 4. So I made my own rounding formula.

I want to use the Ajax controls on about2findout.com, so I need to play around with them. It's a slow start to implement one feature like star rating on an entire sunday, but I need to get the basics first. So far, Ajax seems a nice technology.

Labels: ajax, asp.net