Web Application testing

A few months ago, at one of the MXPEG (Melbourne eXtreme Programming Enthusiasts Group) there was a presentation by Darrell DeBoer (from ThoughtWorks) on something that a few ThoughtWorkers have been working on called Selenium.

I still haven’t used it yet, but I thought people might be interested in it. I found it quite interesting at the time, and I intend to use it out sometime soon.

Selenium is actually an automated testing system. All done using JavaScript, CSS and HTML.

For those doing Ajax “style” apps, Selenium is definately worth checking out.

Nigel Thorne has a good post about using Selenium with CruiseControl.NET as part of the continuous integration build process used at his workplace. (Nigel’s the guy that organises all of the MXPEG meetings).

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.

Ajax talk at VDNUG

I’m presenting this month at the newly formed Victoria .NET User Group (that’s MDNUG+AusDev+Victoria.NET Cluster).
http://www.victoriadotnet.com.au/index.aspx?link_id=84.459

My talk is on Ajax and apart from the general Ajax stuff, i’ll be talking about how to make use of it in ASP.NET applications.

This will be my first presentation at the user group and my first proper presentation since I graduated from uni (end of 2003).

It’ll be on the 21st of September at the Microsoft Melbourne Como Office. And looks like i’ll be the “first on stage”. Or so says the website.

At this point in time, my focus will most likely be around the most “mature” Ajax library available for ASP.NET apps, which is Ajax.NET.
Unsure how much detail I’ll go into. We’ll just have to wait and see on that.

I remember Chris Garty last year before he left was encouraging me to pick a topic and volunteer to give a presentation on the topic. Well Chris, i’m finally going to give my first presentation at the UG. I’ve learnt a lot from the user group, and I guess it’s my turn to give something back to the UG community.

Well the idea for this presentation came about when I was talking with Matt and Elaine about Ajax (after the Sharepoint User Group meeting) and whether they’d done anything using it. Both said no, and wanted to know more about it, so I said I’d see if I can do a presentation for September on it.

Looking forward to giving this presentation to see how I go. I’m sure i’ll be fine. Already have a fairly good idea what I want to talk about. Just need to put all that into a powerpoint deck of some sort. Think i’ll keep the slides to a minimum with brief points that i’ll elaborate on as I go along and planning to have a few demos. (Haven’t decided how many demos i’ll do).

turboDbAdmin

Wow this looks nice.

It’s basically a DB Admin tool written for the web.

Currently it supports only the MySQL database which is fine for the large majority of web hosting providers (running some form of Linux) as that seems to be the DB of choice (although I’ve come across some that use PostgreSql instead).

But yeah, the demo looks great and it feels really responsive.

Now there’s an idea. Since MSDE doesn’t come with an admin UI, it’d be great to port this turbo DB idea for that. And possibly for DB Access in hosted environments.

Possibly just a cutdown “model” of what’s available through the VS.NET Server Explorer.

Page elements with Rounded corners without images

I was browsing around the net last night and found a link to an interesting resource which shows you how to get rounded corners for your web page elements without resorting to the need of using transparent gif images to replace the corners to make it “look” rounded.

First off, have a look at this page:
http://pro.html.it/esempio/nifty2/nifty10js.html

Looks pretty promising, and you can see that they’ve been able to create this effect on all modern browsers (IE6/IE5.5/FireFox/Opera/Safari).

Here’s the article that I was looking at:
http://pro.html.it/print_articolo.asp/id_599/stampa.html

It appears that the author has utilised both JavaScript and CSS to generate the rounded effect!

Cool ๐Ÿ™‚

Also, it appears with this solution you can specify which corners you want rounded. And if you don’t have JavaScript turned on, you’ll still get the content and everything, but you lose the rounded corners.

JavaScript cookies and cream

Here’s a thought to throw out to all that read ๐Ÿ™‚

I’m sure almost everyone nowadays have used Microsoft Word and have witnessed their sometimes useful “Auto Save” functionality.

Well, I just had a quick idea that juts came to mind.

Using JavaScript one can replicate a similar type of feature through the usage of either persisting the data server side through something like Ajax, or just create a cookie in JavaScript to store this text entry. (Reference on using Cookies in JavaScript via Quirksmode.org)

You can use something like setTimeout(“function()”,time) in your JavaScript to call a function to periodically save the user data and say if the user doesn’t click the “save”/”cancel” button, the next time the user visits you can ask the user if he/she would like to use or delete the previous unsaved data again.

This idea came about because it seems common for users to accidentally close their browser window or go back a page in the browsers’ history. Or even if they click a link in another program such as Outlook and the link opens in that exact window they were writing stuff in your web app! (The whole persist on server side via Ajax is a good idea becaues it can be stored for longer than a cookie.)

Sounds oh so simple.

If anyone uses the idea, leave a comment, I’d like to know how people go with this one.

Some JavaScript UI resources

I was browsing around the web last night looking for resources on building rich javascript User Interfaces and found the following links:

Almost forgot, the CSS tip that Scott Isaac posted on his blog looks quite interesting.

I think the greatest thing about this whole Ajax/DHTML UI building is that the developer gets greater control and flexibility in how they build their new Web UI for Web Applications.

There’s a much greater need for this type of UI when building Web Applications when you’re replacing a traditional Windows App. Users expect things to be instant. They hate waiting, and can get rather impatient if they are forced to wait too long.

I’ve already experimented with Ajax.NET in my day to day app that i’m building at work and for the small part that I use it, it’s been great, and reliable. More importantly, it took not very long to build once I was familiar with how the Ajax.NET library worked. Personally i’ve found it to be quite impressive.

I haven’t really gone and abandoned the traditional postback model of ASP.NET but i’m trying to cut down on postbacks where I can and utilising a bit more JavaScript to handle displaying and hiding of form elements based upon user interaction. Postbacks are slow on large pages.

I’ve combined my JavaScript with CSS to perform the hiding/showing and enabling/disabling of form elements for more and more things and only doing a postback and rebinding of page elements after a user clicks on the submit button. I’m not really a fan of the idea that a lot of demos out there are showing where a user just types in some data in a text field and when the field loses focus, there’s a little bit of async callback to the server to “submit” that input.

I mean it’s nice and all, but I don’t think it’s neccessary. Users still like their “Save” buttons.

As an example of one of the things I’m doing right now is rather than using the Visible property for my HTML/Web control I use the “display” CSS style property.

Eg: Rather than myControl.Visible = false;

I use…: myControl.Style[“display”] = “none”;
Or if I want to manipulate it with JavaScript I can do something like…

var theControl =document.getElementById('myControl');
theControl.style.display = "none";

This approach I feel is more flexible if there is a fair bit of showing/hiding of UI elements based on user interaction. With the Visible property your control gets totally hidden (eg: it is ommited from the Page output) and is inaccessible by client side scripts.

I like the idea of showing the user a “please wait…” notice immediately after the user clicks a button and something needs to come down the pipe from the server as that at least allows the user to know “hey I clicked something, and something is happening” rather than “should I click that button again, did I click it yet? nothing seems to be happening” etc… And this will cause two or more of the same things being submitted to the server.

The more you can do without needing to postback to the server an entire page for it to process the better I think.

JavaScript and the whole DHTML concept has been around for quite awhile and it’s only now that we’re seeing really great web applications that fully utilise this.

Years ago, you’d have web apps that use a bit of it here and there to string things together.

Nowadays with the greater attention given to JavaScript/DHTML through the whole Ajax concept is great.

I look forward to being amazed by these apps.

Although I haven’t yet abandoned the Page postbacks in ASP.NET, I think it’s a real possibility that if I had my time around, I’d design the app UI differently to better utilise DHTML.

You could probably get away with only downloading the HTML once from the server, and then having a whole set of different JavaScripts managing the updating etc… of the actual page elements and then the postback becomes something which is much more rare.

Think about it. If you’re page consists of a html data table with about 200+ rows of data, you’d not want to cause a postback when the user changes the status of one of those elements.

Here’s an example…

A user is browsing a catalogue of products at an ecommerce website with about 20 elements in the html table and he/she clicks on the “Add to cart” button.

Now if you’re still using the Postback model, you’re page will have a refresh just so you can update the little item count on the page to show that the item has been added already.

In the world of DHTML you’re more likely to have that little items count update without a postback. As soon as the user clicks on it, it’ll update straight away.

That’s the e-commerce world.

In the web app world users want more items displayed on their page and still get the same responsiveness as having less items displayed on it.

Some JavaScript stuff

Noticed this on Scott Isaacs’ blog (bolding signifies the area that I found the most interesting):

Having a strong framework for building and integrating rich, highly interactive components enables MSN to deliver much better (and consistent) user experiences. The Framework provides us with a client-side component model, network stacks, firefox compatibility, and OO language enhancements that allows us to “engineer” rather than ad-hoc script the client.

Many of our goals and work is going to be captured in the Microsoft Atlas effort. Microsoft Atlas, from the ASP.net team, is an upcoming toolset to quickly enable any web-developer to create and build highly-interactive web-sites.

Interesting, it’s probably quite easy to draw many conclusions from that quote, so I won’t. I was actually thinking the other day when browsing the start.com pages whether or not they were using a “version” of the Atlas framework, or if Atlas would build upon previous JavaScript frameworks that I’m sure do exist internally at Microsoft (just an assumption that I made that they would have one already.).

I also noticed via the Ajaxian blog a link to an article on the IBM website entitled “Migrate apps from Internet Explorer to Mozilla“, an interesting article that goes through the various differences between the browsers and how to accomodate for both in your apps. Basically, an article about developing for cross browser compatibility.

OOJS and Ajax

Oh look, so Microsoft is creating an Atlas hey?

Actually, it’s their codename for their new “Web client framework” which will provide us (developers) with tools for developing AJAX style applications.

I think what web developers really want is a really good JavaScript IDE. Well, I do anyway… And i’ve seen lots of posts around to place (mostly web forums) where people are asking questions like “what is the best JavaScript IDE out there?”

JavaScript’s been around for awhile, it’s not going to go away anytime soon.

I think people should really start exploring Object Orientated JavaScript. The way that JavaScript does its’ OO is fairly different from the way say C#/Java etc do OO.

Exploring some of the below articles you’ll get introduced to a term called “prototyping”. If you already get inheritance, then looking at the code here and you’ll get prototyping straight away. Just one of the many new terms you’ll start seeing a lot of when exploring the below articles on OOJS as they call it!

For those that want to get up to speed with OO JavaScript, here’s a few articles.

From Code Project: Part 1 Part 2 and Part 3.

From JavaScriptkit.com: JavaScript and Object Oriented Programming (OOP)

From WebRerence.com: Object-Oriented Programming with JavaScript Part 1 Object-Oriented Programming Part 2

JavaScript can be a mess if you don’t write it well, which is basically the same any other piece of code you don’t write well. It’s a mess and a headache to go back to and debug later.