Category Archives: JavaScript

JavaScript/ECMAScript/JS

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.

IE7 “improvement” turns into a bug for us

This is an interesting one that I just came across today.

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.

Ad hoc SQL Query builder

Came across an interesting project on CodeProject by Mike Ellison called SqlWhereBuilder a few days ago. It basically allows users of your app to dynamically build their own SQL Queries without needing to fiddle with the actual SQL.

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]

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