ExtJS Javascript Library for Beginners!

The Ext Javascript library for beginners, as I learn ExtJS so will you!

Do you do usability testing?

with one comment

Hello My Unknown Audience!

I have a come to a point in my day job where I would like to know how the users are actually using our application. For this I need someone or some people to do some usability testing, not lots, but some. Anything in fact, would be better then where we are now.  Let me give you a bit of background.

We design and build a product in New Zealand, and it is marketed and sold to clients in the USA. We, the developers don’t garner a lot of feedback from our management about how the users actually use the software, just the list of what’s wrong with it and what needs to be added e.g. bugs and feature requests,  the usual whip cracking.

Very few of the feature requests come from actual end users. The features and product direction are driven by management, not users. Which in itself is not all bad, they know the market and have a good understanding of what the product needs to be able to do to keep up with our competitors. However, as a developer who wants to improve the users experience of the application I would love to start doing some usability testing. Nothing exciting like setting up a special room with darkened glass windows where the developers watch eagle eyed the subjects use the application. Some basic Q & A with customers and someone observing how people use the application once a month would do!

Doing it wrong

Doing it wrong

So my question to you is, if you do usability testing at your company, how do you do it and how has it changed your product, has it proved beneficial to your product?

If you have no idea what usability testing is, have a watch of this video: Usability Testing, the least you can do.

Answers on a post card🙂

Written by jameshd

7th May, 2009 at 12:18 am

Posted in usability

Tagged with ,

Setting a Select box to a specified value

leave a comment »

Quick post on how to set a select box to a string string value, after a page has loaded.

In the app I work with we have a list of search engines thus:


<select name="_select_criteria" id="_select_criteria">
 <option value="" selected></option>
 <option value="Altavista">Altavista</option>
 <option value="AOL">AOL</option>
 <option value="Ask Jeeves">Ask Jeeves</option>
 <option value="Comcast">Comcast</option>
 <option value="Earthink">Earthink</option>
 <option value="Google">Google</option>
 <option value="Google Images">Google Images</option>
 <option value="MSN">MSN</option>
 <option value="Netscape">Netscape</option>
 <option value="Windows Live Search">Windows Live Search</option>
 <option value="Yahoo">Yahoo</option>
</select>

Now when the page loads the first time, we have no way of determining what should be selected as the default, after something has been selected, that’s relativly easy to handle server side.

I wrote a quick piece of javascript to come up with a solution to setting the default value of the select box. Thus:

Ext.onReady(function(){
 // set the search box to google as it defaults there.
 // query for the select criteria box.
 var selectbox = Ext.get('_select_criteria');

 Ext.each(selectbox.options, function(item, index){

// iterate and set the select box's selected index to whatever position google is.
 if(item.value == "Google")
 {
     selectbox.selectedIndex = index;
 }
 });
});

That’s why I love Javascript! especially with Ext… Yum!

Written by jameshd

5th May, 2009 at 4:55 am

Posted in Ext / Javascript

I’m half way to being MySQL certified

leave a comment »

Hey Hey,

If anyone still reads this after the other domain expired (I trust most of you updated your links/subscriptions) I’ll explain the reason behind my prolonged absence.

I’ve been studying for a MySQL exam, the certified developer exam part 1. Ok not big news in itself, but it was big for me, I’ve given it 6 months and a heck of a lot of practice and I’m please to say I passed on Friday 1st May with a score of 61 / 70.Couple that with the fact that it’s probably the first legitimate study I’ve undertaken since being 17 and breezing through high school.

So, now that’s down I’m gonna hold up on the study for a short time as the Mrs and I are planning on getting busy, heh not like that… although…. hahha stop now. We’ve got some projects under way, wheels in motion that kind of thing that we want/need to focus on.

So After passing this exam, I’m think give it a gcouple of week / months and hit the books again for part two, by which time it’ll be defunct as Oracle will have totally owned MySQL.

Changing the subject a little, if you get the chance and are around in Auckland for the next few weeks, take the time to go to the Comedy Festival. You won’t regret it. We went to see the opening night’s “Big Show”, yeah it’s actually called “the big show” it was fantastic, the comedians included Dan Nightingale (Preston, UK – I used to live there, awesome funny chap), Lindsay Webb (Aussie, who heckled me for going to Mexico on honeymoon) and a guy called Carey Marx, who I think stole the show! His timing and delivery was just fantastic, all of these guys plus a couple more who I can’t remember made for a fantastic night out! So go see some comedy.

Time to get back to some javascripting posts now…

James

Written by jameshd

5th May, 2009 at 3:52 am

Posted in mysql

I’ve Moved!

leave a comment »

Hey Ya’ll!

Ext-Perience has moved, although not far, it’s a change of theme and a change of URL so update your bookmarks and feed reader settings etc…

The 1018 domain was expiring at the end of April and since this was the only thing on that domain I decided to move home to wordpress.com for the managed hosting of this blog.

Everyone will get 301’d here from now on so hopefully I won’t loose any valuable traffic or linkage. If I do, not worries.

Hopefully this new hosted blog will inspire me to post more often as the other one started to run into technical difficulties due to the hosting provider, but you get what you pay for and I paid nothing so I have no room to complain.

By the way, I’m thinking of trying to push this blog a little more now they’ve released Ext Core, very cool idea guys… would anyone like to write a piece on here or a regular column? Leave a comment if you’re interest.

I know I don’t blog as often as I should but, my microblogging is second to none! Why not follow me on Twitter as well.

jameshd out.

Written by jameshd

23rd April, 2009 at 11:18 pm

Posted in Home

Tagged with

Checking all your checkboxes with jQuery

leave a comment »

Ok I know this blog is geared towards ExtJS and I do expect you to lambast me for posting jQuery code snippets but, in my free time one lunch time I decided what it would be like to rewrite the ExtJS vertical checkbox examples I’ve been posting using jQuery.

Turns out, there’s not a great deal of difference in the length of the code, maybe the clarity and readability is slightly improved with jQuery, although looking at it there’s not a great deal in it. So for shits n giggles here’s my jQuery code:


<script type="text/javascript">

$(document).ready(function(){
$("#select_none").click(function(){
$(":checkbox").attr("checked", false);
$("#update_button").attr("disabled", true);
return false;
});

$("#select_all").click(function(){
$(":checkbox").attr("checked", true);
$("#update_button").attr("disabled", false);
return false;
});

// clear all checkboxes.
$("#select_none").click();

$(":checkbox").click(function(){
if($(this).attr("checked") == true)
{
if($("#update_button").attr("disabled")==true)
$("#update_button").attr("disabled", false);
}
else
{
if($(":checked").length == 0)
{
$("#update_button").attr("disabled", true);
}
}

})
});

FYI if you’re interested in checking out jQuery in more detail, have a look at the post over on Ajaxian filled with jQuery videos presented by John Resig himself.

Written by jameshd

22nd February, 2009 at 6:52 pm

Posted in Ext / Javascript, Patterns, PHP, Zend

Tagged with , ,

Checking all your checkboxes with Ext

with one comment

Following on from the previous post about vertical check box lists, here’s a little addition I made to add 3 buttons at the bottom, one to select all, one to select none and one to perform some kind of AJAX update.
I don’t quite know why this took me a while to figure out, but I thought it’d be worth sharing with the masses of readers I get to this blog, yeah right!

First the 3 buttons to perform the actions.


<div style="text-align:right;margin:5px;clear:left"><input id="select_none" onclick="selectNone();" type="button" value="Select None" />
<input id="select_all" onclick="selectAll();" type="button" value="Select All" />
<input id="update_button" onclick="update_charts();" type="button" value="Update Graphs" /></div>

Easy enough, we’re going to implement the select all and select none operations first. I use the onclick attribute because, well you’ll see don’t like calling an elements click() handler when it hasn’t actually been clicked!

function selectAll(){
var checkboxes = Ext.query('input[id*=state_]');
Ext.each(checkboxes, function(obj_item){
obj_item.checked = true;
});

Ext.getDom('update_button').disabled = false;
}

function selectNone(){
var checkboxes = Ext.query('input[id*=state_]');
Ext.each(checkboxes, function(obj_item){
obj_item.checked = false;
});

Ext.getDom('update_button').disabled = true;
}

Two features I love here are the Ext.getDom() method and the query with the wildcard (*=) pattern match. great stuff Ext team!

Now for the coolness, I wanted to write 1 block of code, which would add the event handler to each checkbox and take care of enabling / disabling the update button for me. Here’s what I came up with:


// add disabling / enabling code.
Ext.onReady(function(){

// clear the check boxes , this is why it's a separate function
selectNone();

// add a click event handler to each checkbox.
var checkboxes = Ext.query('input[id*=state_]');
Ext.each(checkboxes, function(obj_item){

Ext.get(obj_item).on('click', function(event, checkbox){

up_button = Ext.getDom('update_button');
if(checkbox.checked == true){
if(up_button.disabled = true)
up_button.disabled = false;
}
else
{
if(Ext.query('input:checked').length == 0) // great place to use the selectors
up_button.disabled = true;
}
});
});
});

This code handles the disabling and enabling, it’s really simple to understand too, I’m pretty sure jQuery could do this with less code, due to it’s method chaining abilities. One thing I would have loved to do is this, but I don’t think it’s possible:


// apply handler direct from the query() method. You can do this with jQuery.

var checkboxes = Ext.query('input[id*=state_]').on('click', function(event, checkbox){

up_button = Ext.getDom('update_button');

if(checkbox.checked == true){
if(up_button.disabled = true)
up_button.disabled = false;
}
else
{
if(Ext.query('input:checked').length == 0)
up_button.disabled = true;
}
});
});

Alas, it was not possible so I forfeit 1 extra line of code to get something working right, not a big deal really eh?

James @twitter

Written by jameshd

19th February, 2009 at 6:50 pm

Posted in Ext / Javascript

Vertical Checkbox Groups

with one comment

While working on my usual project at work I encountered the need to solve the problem of having check boxes display in a vertical list, across several columns from a non numerically indexed PHP array. I came up with two solutions; one used Ext JS and one was plain PHP with some CSS thrown in for good measure. One thing I noticed was that this task is not as easy as it seems.

Take for example the following array.

$list =   array('AL'=>"Alabama",
'AK'=>"Alaska",
'AZ'=>"Arizona",
'AR'=>"Arkansas",
'CA'=>"California",
'CO'=>"Colorado",
'CT'=>"Connecticut",
'DE'=>"Delaware",
'DC'=>"District Of Columbia",
'FL'=>"Florida",
'GA'=>"Georgia"

... and so on

I won’t paste the entire code as it’d just waste space.

To get that into a 4 column list proved rather tricky.  My first attempt was using an Ext.FormPanel, combined with PHP to generate the array. Not a glamorous solution by any means but it worked .

Here’s the code. It’s pretty self explanatory. are in mind the list variable from above.

<script>

/**
* here we loop our $list variable creating some JSON objects
* which match the specification for an Ext.Checkbox
* The PHP you see just stops the last , being added to the list, IE chokes on that!
*
*/
var _list_items = [
< ?php $lastKey = count($list); $i = 0; foreach($list as $program_id => $program_name): $i++?>
{
boxLabel: '< ?php echo ucwords($program_name);?>',
name: 'programs[]',
inputValue : '< ?php echo $program_id;?>'
}< ?php echo ($i !== $lastKey) ? "," : "";?>
< ?php endforeach;?>
];

Ext.onReady(function(){

/*
Create our FormPanel variable in the usual panel way.
*/
var _fp = new Ext.FormPanel({
renderTo: Ext.getBody(),
frame:true,
title : 'States',
method: 'POST',
url : 'post.php', // dummy page, which spits back the variables passed through
width: 795,
autoHeight:true,
bodyStyle : {
padding: '10px'
},
/**
After seeing the examples of this it's pretty easy, the one thing to rememember is if you don't want a random
Colon (:) to appear in the top left when you enter no fieldLabel, use hideLabel, I think there's a bug for the Ext Boys.

*/
items : [{
xtype: 'checkboxgroup',
hideLabel : true,
id : "program_checkboxes",
itemCls: 'x-check-group-alt',
columns: 5,
vertical: true,
items: _list_items // our php generated list.
}],
// add some funky buttons. bbar is such a cool config option!
bbar : [
'->',
new Ext.Button({
text : 'Clear',
handler : function(){
_fp.getForm().reset();
},
style : {
display: 'inline',
margin : '0px 5px'
}
}),
new Ext.Button({
text: 'Save',
style : {
display: 'inline',
margin : '0px 5px'
},
handler: function(){
if(_fp.getForm())
{
_fp.getForm().submit();
}
}

})]
});
});

</script>

So that should be sufficient to get your Ext.FormPanel displaying check boxes vertically. What surprised me though, was the amount of processing it took to render! Reloading that simple script caused my Firefox to freeze on several occasions. Not sure why!

Anyway here’s how it looked;

ext-formpanel-checkboxes

After the serveral crashes I decided to try some PHP to lighten my mood.  The solution I came up with is a little tricky to get your head around but, is very flexible, and doesn’t crash the browser so much. All it takes is a little PHP and CSS.

<div id="form-container">

< ?php

// set the maximum columns as a hard limit.

$max_cols = 4;

// determine how many rows to output per column
$perCol = round(ceil(count($list) / $max_cols));

// create two numerically indexed array of keys and values.
// this is important, because our initial array is indexed by strings, we need to re index them.
$names = array_values($list);
$ids = array_keys($list);

// now its a simple case of looping and creating a column out of a div each time.
?>

< ?php for ($i = 0; $i < $max_cols; $i++):?>
<div class="programcol">
<ul>
< ?php for ($js = 0; $js < $perCol; $js++):?>
< ?php if(strlen(current($names)) > 0):?>
<li>
<input type="checkbox" name="programs&#91;&#93;" value="<?php echo current($ids);?/>">
<label>< ?php echo ucwords(current($names));?></label>
</li>
< ?php endif;?>
< ?php next($names); next($ids);?>
< ?php endfor;?>
</ul>
</div>
< ?php endfor;?>
</div>

< ?php
/**
* We loop down each time, iterating the array in sections, making a column out of each section.
* I'm sure this can be improved upon!
*/
?>

That generates the divs’ holding a list of columns, now to sprinkle on a little CSS to get the vertical styling.

<style>
body
{
font-family:tahoma;
font-size:10px;
}

#form-container
{
width:795px;
min-height:250px;
max-height:500px;
float:left;

}

.programcol
{
float:left;
width:195px;
height:auto;
text-align:left;
display:inline;
clear:none;

}

.programcol li
{
margin: 4px 0px;
height:12px;
padding:0.25em
}

.programcol li label
{
margin-left:4px;
position:relative;
top:-2px
}

</style>

…and we’re all good, we have vertical checkboxes across several columns! viola

php-vertical-checkboxes

Hope you liked this.

James

Written by jameshd

4th February, 2009 at 10:21 pm

Follow

Get every new post delivered to your Inbox.