Paging the DataList

A few days ago I looked at various solutions to enhance an exhisting DataList control at work.

The DataList brings back a fair bit of data from several different tables and seemed a bit bloated.

The first solution I looked at was data paging and only showing rows as needed. The DataList doesn’t come with built in Paging capabilities, so you’ll need to write your own. Scott Guthrie has a great post about Efficient Data Paging with the DataList control.

Although that is a great solution, in this current environment of Ajaxifying everything you can get your fingers upon I found a great open source product named Ajax Data Controls (or ADC for short) and their DataList Paging example. You can download the controls from their CodePlex page.

The controls are basically an Ajaxified replacement for the exhisting ASP.NET 2.0 Data Controls (GridView/DataList/Repeater), with a few minor differences.

One of the authors, Kazi Manzur Rashid has a great blog post on how to use their GridView control.

A third solution is to use the PagedDataSource, which comes with ASP.NET 2.0. Sreejith Thathanattu has posted a good example of using the PagedDataSource on CodeProject with the DataList. If you decide to go down this path, consider assigning a Cached version of your DataSource to PagedDataSource as that will help with performance (you’ll be hitting the Database less).

Internet Explorer 8 Beta 1 – Changes for Devs

The IE Team have just announced the availability of Beta 1 of IE8 for developers. You can read more about that on their blog.

Obviously as a web developer, the mind immediately turns to “so, what’s in it for me?”.

Picked up the following points from an MSDN Doc on what’s new for IE8:

Oh, and IE8 Whitepapers.

And finally, for those who want to try IE8 with no risks, you can download a Virtual PC image with IE8 from here.

Aptana – A JavaScript IDE

Looks like there’s a new JavaScript IDE in town.

It goes by the name Aptana.

It actually looks quite interesting from the screenshots, haven’t tried it yet. Currently downloading it to give it a go. It’s open source, and it’s free.

If you use Eclipse, they have a plugin available for that.

I like that it shows you the compatability of JavaScript functions/properties/etc with various browsers, as seen in this screenshot of their code-complete (er, “code assist”) feature.

And checkout their blog.

Found them via the Ajaxian blog.

Atlas Class Browser

Wilco Bauwer has posted an Atlas Class Browser which will show the public properties/events/methods of each Atlas type.

It includes the Web, Web.Net, Web.Data, Web.Services, Web.UI, Web.UI.Data namespaces.

If you prefer, however to explore the actual Atlas JavaScript files, but prefer a more “spaced out” version, check out Ralph Sommerer’s post. He’s got some funky “InScript Code Listing Enhancer” going on.

Looking at one of Ralph’s links (AtlasCore), you can click on the InScript link to see another representation of the classes/global variables/functions for each JavaScript file.

This is all very handy as there is still very little documentation aside from the Hands on Labs, and the QuickStart documentation.

I’d also recommend reading Wilco’s blog posts on Atlas.

Morfik Ajax IDE

Saw Morfik mentioned in a recent blog entry at the Ajaxian.com blog, and have finally had a bit more of a look.

First thing? Had a look at their About Morfik page. What did I see?

Morfik is located in Hobart, Australia.

Wow, innovation from that little island just south of Melbourne 🙂
(And we share the same area code! Victorian numbers are +61 3, as is Tasmania)

Anyway, Morfik looks really interesting. The IDE seems to resemble Visual Studio .NET’s IDE. (Or at least it does to me! … To a certain extent)

They’ll be at the Web 2.0 conference next week, with more details about this app of theirs (they are a sponsor).

Ok, now onto the interesting stuff about this IDE and their JavaScript Synthesis Technology (JST)

From their page:

Morfik offers ground-breaking Javascript Synthesis Technology (‘JST’) that allows developers to use a visual design environment and a high-level language of their choice to create applications comprised purely of HTML and Javascript. This revolutionary technology combined with its tight integration of the browser, a database and web server, uniquely offers developers the opportunity to create web applications that run on the desktop after being unplugged from the web.

Now that’s really blurring the lines between a desktop app and a web app which “lives” inside of a browser. This “JST” it seems gives Morfik the ability to work with an online/offline mode, akin to what’s offered by a Smart Client.

It says you can use an OO language of your choice to implement the business logic. There’s a bit more in this blog post. Which says the supported OO languages are: C++/C#/Java/Delphi.

This could be interesting. But i’ll reserve my judgement until I’ve seen it in action.

A few useful cheatsheets for web developers

A little while ago, I blogged about a CSS cheat sheet made available at the ILoveJackDaniels.com website.

I just noticed that the blogs’ author (Dave Child) has a few more up.

From: http://www.ilovejackdaniels.com/cheat-sheets/

JavaScript Cheet Sheet
CSS
RGB Hex Colour Chart

Looks handy. Though I always keep a local saved copy of this page for the Color codes. (There’s a lot more listed “named” colours on there compared with the cheat sheet). Note though that the colour chart cheet sheet only contains 216 web safe or non-dithering colours.

Cheat sheets are good for the times when you just want to check on little things that you’ve not used in awhile. One JavaScript area I’ve not really had a look at, which is a part of the cheet sheet, is Regular Expressions. I can imagine cases where this is handy. Such as a dynamically filtered javascript table, whereby the user just types and as they type, the table gets filtered. There’s obviously other situations where this could be handy as well. Especially given the recent popularity of Ajax.

I’ve installed teh IE Developer Toolbar, but thus far, I don’t see any additional benefits of it on top of what I was using previously that the bar does. I’m using the AIS Web Accessibility Toolbar (which I’ve found to be quite handy), and I also use their Colour Constrast Analyser which is quite good for helping me decide on what colours to use. One of our internal users finds it hard to distinguish between various shades of reds and greens (colour blindness) so this colour contrast analyser helps with that.

I also make use of the Mio PixelRuler as a screen ruler. I find it quite useful. I know the IE toolbar has one, but I also need the screen ruler outside of IE.

Atlas Demo

On Wednesday night I did a demo of Atlas. I was going to do a little demo on the Virtual Earth Atlas Server Control. In hindsight, doing a demo that depended on “external resources” was probably not the best idea. But it was working fine just moments before the presentation, and I hadn’t noticed the delays. And I also never noticed any delays during my practice runs days before the presentation.

I need to learn to be more patient during my presentations because I just ran the exact same demo on my PC at home.

And it took some time to load (over wifi).

It showed the same blank map canvas as it did during the demo, but for a brief moment or two. Perhaps the maps would have shown up if I had waited longer that night, rather than declaring straight away that the net connection was playing up? Possibly. Well, it’s all done and dusted now. Admittedly, I should have prepared for a worse case scenario rather than on the fly decide to go look for something I did several days ago (the hands on labs). But some of these things you learn through the experience of doing a presentation.

I had prepared several longitude and latitude locations to show a demo of the power of Atlas. How easy it was to use.

Below is the actual demo for those interested…

Here’s the code for the Virtual Earth part:

<atlas:VirtualEarthMap ID="VirtualEarthMap1" runat="server" Latitude="-37.83"
Longitude="144.98" MapStyle="Aerial" ZoomLevel="10" PushpinActivation="Hover">
</atlas:VirtualEarthMap>

The Lat/Long figures above are for South Yarra (37.83South/144.98East), which is where the presentation was held.

I had a few other Lat/Long figures prepared for the next part of that demo that didn’t go ahead.

The next step would have been to put two Atlas TextBox controls and one Atlas Button control onto the canvas above the Map.

So we end up adding:

<span>Latitude</span>
<input type="text" id="txtLat" />
<span>Longitude</span>
<input type="text" id="txtLong" />
<input type="button" id="btnChangeMapLocation" value="Change Map Location" onclick="Change_Location();" />code>

I've also decided to change the map style to Hybrid so we can actually see the place names of the various locations we goto.

Note the onclick event is calling a Change_Location() javascript function.

Let's code that now:

function Change_Location()
{
var latitude = document.getElementById("txtLat").value;
var longitude = document.getElementById("txtLong").value;

var veMapCtrl = document.getElementById("VirtualEarthMap1");
veMapCtrl.control.set_latitude(latitude);
veMapCtrl.control.set_longitude(longitude);
}

The first two lines are pretty simple, just getting the values entered by the user in the Latitude and Longitude text boxes.

I’ve not actually seen the last two lines documented anywhere, but after doing some “research” (digging into the AtlasUIMap.js file from the Atlas Script Library), they set the latitude and longitude values for the Virtual Earth map.

One thing to keep in mind, the “.control” means you’re accessing one of these Atlas controls.

Here’s a few Lat/Long locations I had prepared for the presentation (More Latitude/Longitude values):

City Latitude Longitude
Melbourne (-)37.50S 145.0E
South Yarra (-)37.83S 144.98E
Redmond 47.41N (-)122.07W
Paris 48.50N 2.20E
Luang Prabang 19.52N 102.10E
New Orleans 29.58N (-)90.04W

There’s a lot more that can be done to show what is possible with Atlas, but this is all I had prepared for the presentation because of time constraints.

Continue reading “Atlas Demo”

Ajax Browser History

I was just browsing through the Ajaxian.com blog and noticed this post which talked about one of the issues known as the “back button” issue.

Basically, what do you do when the user clicks on the back button in the browser? Naturally, the user expects to see the previous state of the page before they interacted with it to make changes, right?

Let’s say we have a pageable datagrid and we navigate to other “pages”. When you navigate to the next page, and then click on the browsers’ back button, a users’ natural reaction is to hope for the previous page that they were just reading.

Brad Neuberg has a good post on this (which was linked to from the Ajaxian Blog).

Looks very interesting… From Brad’s blog:

The Really Simple History framework, available here, uses several techniques to solve these bugs. The primary mechanism is achieved using DhtmlHistory, a JavaScript class that allows developers to store history state after the browser has left a web page. This data is persisted between page loads using the auto save capability of web forms; see my blog post “AJAX Tutorial: Saving Session Across Page Loads Without Cookies, On The Client Side” for implementation details. DhtmlHistory wraps the auto save trick with an easy hash table API for developers, and the main RSH framework then uses the DhtmlHistory class to implement stateless tracking of history; variables that allow the detection of fake versus real page load events; and more.

Ajax at VDNUG

Here’s the actual presentation file: VDNUG_AjaxPresentation.ppt

I’ll post the actual demos another time.

Just a quick note, there’s a lot of links below. You could spend a long long time reading about it.

If you’re interested in Atlas, do download the Hands On Labs and play around with it. There’s a lot there, and there’s also a lot not yet documented fully on the Atlas website.

There’s a whole host of PDC slides available here for those interested.

UPDATE: Also, check out these videos on MSDN’s Channel 9
Scott Isaacs – MSN DHTML Foundation unveiled
Omar Shahine and team – New Hotmail “Kahuna”

And below is the links from the resources slide:

To all that came to the presentation, thanks for listening! 🙂

UPDATE (25/09/2005): I’ve finally found enough time to post the Atlas demo that I did of Virtual Earth here.