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).

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:

• Accessibility
  • No more “alt” for image alternate text/tooltip. So use title or longdesc instead.
• ActiveX
  • Per-Site ActiveX - Permission to allow ActiveX controls to run on a site-by-site basis.
  • Non-Admin install – Allows non-admin users to install ActiveX controls to their user profiles (no UAC).
• Activities & WebSlices
  • Services
  • WebSlices
• Ajax Enhancements
  • Ajax Navigation – Allows browser back button to work when doing ajax based navigation.
  • XMLHttpRequest Enhancements
    • Connection timeout (read/write) property
    • ontimeout event
  • Max Concurrent Connections default changed from 2 to 6. You can change the registry to get this for current versions of IE.
    In IE8, a developer has access to the following JavaScript properties: window.maxConnectionsPerServer and window.maxConnectionsPerServer_01 (both read only)

  • Changed window.navigator.onLine behaviour from being a user-set (File -> Work Offline) global “offline”, to now indicating whether a user is connected to a network.
    Also, new events onOffLine and onOnLine.

  • Cross Domain Request (XDR) – A new object introduced, XDomainRequest. From the MSDN page – “allow restricted and secure communication between untrusted modules in the page. The browser shields the user from potential threats while allowing powerful cross-site interaction. “

  • Cross Document Messaging based on postMessage. From MSDN Page – “allows cooperative text exchange between untrusted modules from different domains embedded within a page.”

• CSS

  • data:URI - Allows one to embed small data resources (eg: small images). Here’s an example.

  • Floats – Several fixes and hasLayout removed from IE8.

  • Margin Collapsing now complies with CSS2.1

  • New :before, :after and :focus pseudo classes, with associated content attribute. Also see w3c article on CSS 2.1 Generated Content and Selectors.

  • outline.

  • Printing Changes

    • page-break-inside

    • widows attribute

    • orphans

  • CSS Table Layout enhancements.

  • text-decoration now conforms to CSS 2.1.

  • border-spacing

  • caption-side

  • Counters & Numbering – counter-reset, counter-increment.

  • Support for CSS3 Ruby Module. Mainly used for East Asian documents for pronunciation/short annotation purposes. Pretty cool, especially for those asian language learning sites.

  • Additional list-style-type values.

  • white-space

  • z-index

• Developer Tools

  • CSS Tool

  • Light-Weight Script Debugger

  • Version Mode switching.

• Document Compatability Mode

• DOM Storage - aka Client-side session and persistent storage

• Protected Mode Cookies

• Selectors API

• Tab Isolation & Concurrency – Improves performance/reliability of IE 8. So if a page in one tab hangs, the others are still usable.

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.

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.

One of our users has downloaded the latest IE7 Beta release and has found that one of the features that she relies on no longer behaves the same way.

I got her to try to use that feature on another PC (which has IE6), and it worked.

The bug?

Our web app depends on the File upload Html Control, and it’s ability to grab the user selected file and directory. It then creates a link to that file (which is usually on a mapped network drive). Users can then click on the document link in their browser, and the document is opened in-browser.

It does seem a little bit of an overkill though to use the File upload control to simply create a link to a document.
But it worked fine at the time.

Here’s some C# code to illustrate what we had:


if (FileUplaoder.PostedFile.FileName != string.empty)
{
string fileName = FileUploader.PostedFile.FileName;
//...
}


In IE6, the fileName string would be something like: c:\docs\doc1.doc
Ie IE7 though, the fileName string would be: doc1.doc

Eric Lawrence, of the Internet Explorer team posted a response to this question on the IEBlog saying that it was a “by-design change for privacy reasons. IE7′s behavior matches that of other browsers”.

I’ll need to come up with a new solution to this problem. Although only 2 users of the system are using IE7, it’s better to come up with a solution to this problem than let it sit until everyone is about to upgrade to IE7.

You can watch it streaming here, or download it for offline viewing here.

You could potentially build some sort of simple reporting page using it.

It uses JavaScript to keep the UI quite responsive. Interesting…

[This post is a bookmark for future reference]

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.

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.

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.

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>

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):

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.

Full Source code for this demo:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<references>
<!-- Repath the following src attributes, using regular client relative paths as necessary -->
<add src="ScriptLibrary/AtlasUI.js" />
<add src="ScriptLibrary/AtlasControls.js" />
</references>
<components>
</components>
</page>
</script>
</body>
</html>


Download full source.

Fig 1: Default Virtual Earth map, with location set to South Yarra, Melbourne.


Fig 2: Changed Virtual Earth map, with location set to Luangphrabang, Laos.