A front-end development blog

From command line follow these steps

    $ wget http://framework.zend.com/releases/ZendFramework-1.10.6/ZendFramework-1.10.6.tar.gz

Replace the url with the latest, see http://framework.zend.com/download/latest

$ gunzip ZendFramework-1.10.6.tar.gz
$ tar -xvf ZendFramework-1.10.6.tar
$ ln ZendFramework-1.10.6 zend

The last one there is a personal preference. When upgradring ZF you only need to replace the symbolic link.

Next up, test that zf.sh is working by running it:

$ ./zend/bin/zf.sh

This should display the zf.sh usage docs.

Enjoy!

The Ext Team, now Sencha, launched Ext Designer in April 2010. I had already tested the beta a bit, and was looking forward to the final product.

The following post is aimed at developers and interaction designers also doing javascript coding, not the business managers Sencha claims are potential users of their product. I’ll walk you through the basics, before we get our fingers dirty and make the application do something that might remind you of useful.

First, we launch Ext Designer and start a blank project.

Read the rest of this entry »

Got a comment on my previous post Ext JS Charts and timeaxis:

Hi Nils -
Thanks for the article. We have got two lines within a chart. We are using this for trend analysis. So, one line should show the actual data and the other we want to trend it beyond the actual data. We know how to trend and all. But, can we have two datasets to be used for drawing the lines? Would appreciate any information. Thanks, again.


“Two datasets” – I did some testing based on the Charts package in ExtJs. But, I soon figured out it would not work without lots of work.

Flot charts and multiple stores in ExtJs

But, I have worked with another charts library called flot in a project lately. We even hired Ole Laursen, the guy behind flot, to do some further development on the library. He wrote a method for converting ExtJs Stores to flot data series. The following shows how this can be done. Happy reading.

Read the rest of this entry »

Simple start

This post starts out with clearifying how scope works in JavaScript, some common mistakes and how to think about scope. As usual, the post is inspired by my own struggeling.

Take the following:

var sampleData=[1,2,3,4,5,6];

function writeSampleData() {
    for(i=0; i<sampleData.length; i++) {
        document.write("1."+i+", ");
    }
}

writeSampleData();

Isolated this works fine. The above will, as expected, output:

1.0, 1.1, 1.2, 1.3, 1.4, 1.5,

Notice how sampleData, defined in the global scope, is available from within the function.

Complicating stuff a bit

var sampleData=[1,2,3,4,5,6];

function writeSampleData() {
    for(i=0; i<sampleData.length; i++) {
        document.write("1."+i+": ");
        document.write(returnSomething(i)+"
");
    }
}

function returnSomething(number) {
    for(i=0; i<3; i++) {
        // Do something here
    }
}

writeSampleData();

Uups! Sorry about that. If you tried running the example code your browser probably froze. Maybe I should mark it with “do not try this at home”…

Read the rest of “Understandig Javascript scope and finally ExtJs scope”

I am stuck in time (and dates).

ExtJs has in their version 3 launched a Chart package. I have been working on a project that uses charts quite a lot. So far it has been based on FusionCharts, a flash based commercial alternative with more than 45 different types of charts. Quite interesting and impressive. Since the rest of the front end of the application I am working on is based on ExtJs it was exciting to see their Charts package. But again, I find the Ext documentation lack. Or maybe it’s just me.

Following is a guide for using the line charts in ExtJs combined with a timeseries axis. And hopefully I manage to fill some of the holes I have found in the documentation.
Read the rest of

Dates, time, timezones and date format hunts me.

Right now it feels like there are  5 millions way of writing the same datetime. Let’s say 7/8/2009. Is that 7. August 2009, or is it 8. July 2009? Most of the world thinks it’s 7. August, but the Americans think it’s 8. July. We are no better in Norway actually, writing 07.08.2009. I know this is 7. August, but thats just because I grew up here.

We should really appreciate ISO8601! I love this standard. Writing 2009-08-07 is great, start with the year, then break it down to smaller pieces. Natural and no hazzle or discussion. And simple to parse.

—

I started writing this post as a quite harsh criticism of ExtJs and their Date class. Now I only find it’s docs a bit uncomplete. I don’t think it should be necessary to read very much sourcecode to use a library like ExtJS. In other words, this blogpost should not be needed.

I have been thinking of ExtJs’s Date class as something special. But it’s not. It’s actually very very simple. It just extends the regular Date object you find in Javascript with some interesting methods. The ones I’ll cover now is:

- parseDate()

- format()

parseDate() is the ISO8601 helper.

var iso_date = Date.parseDate("2008-01-11 22:00:00", "Y-m-d H:i:s");
alert(iso_date.format("d.m.Y H:i:s")); // alerts 01.11.2008 22:00:00

This is the basic basics.

Line 1: Date.parseDate() returns a Date object based on the format you specify and is a grat alternative to the ugly variant:

var date = new Date('11/1/2008 10:00:00 PM GMT+0100');

Let’s move along, let’s say we have a store. A JsonStore, with three columns: firstname, lastname and date-of-birth. And date-of-birth is stored in ISO 8601 format.
Read the rest of “ExtJS Date format demystified (ISO 8601)”

I have been working on a project for a client the last months, a big portal for a british client. The portal delivers content from various sources, and is built in a frameset (please, the frameset discussion is off-topic!).

From quite early in the project my clients client reported some weird behaviour that we, no matter what, managed to reproduce.

The frameset is quite simple:

<frameset rows="100, *" frameborder="0" border="0">
<frame name="top" src="topp.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" border="0" />
<frame name="main" src="main.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0" border="0" />
</frameset>

What happened was that links in “top”, which contains the menu, behaved like they had target=”_top” and not target=”main” as they actually had!

After weeks of discussions we arranged an online meetings with the client for them to show us and reproduce the issue, but no way – it couldn’t be reproduced.

Then they found a clue. It always happened after they visited the BBCs website! How strange isn’t that? Quite early in the process I understood that something, somehow, had changed the DOM on the clients browser. Which by the way was IE6.

So, finally we had somewhere to start digging. After endless code digging at bbc.co.uk’s site I finally found it. At news.bbc.co.uk they have a javascript for opening their webradio, and that little devil script is the root of all evil:

window.name="main";
function aodpopup(URL){
window.open(URL,'aod','width=693,height=525,toolbar=no,personalbar=no,location=no,directories=no,statusbar=no,menubar=no,status=no,resizable=yes,left=60,screenX=60,top=100,screenY=100');
}
if(location.search.substring(1)=="focuswin"){
	window.focus();
}

Do you notice that code on line 1? window.name=”main”; What the heck is that? Who writes this crap?
Read the rest of “BBCs hidden javascript framekiller!”