Wednesday, December 26, 2007

Merry Belated Xmas: Take a stroll down Ext Lane

Took a bit of break from blogging and spent some time bonding with the family, doing some fun coding, watched a sick amount of movies and even did a bit of exercising. Wow, that seems like a lot to put in one sentence. Well, now it is time to get back blogging! It's almost the new year but I have plenty of articles left to write in 2007. Without further ado, let's take a stroll down Ext lane!

I spent a fair amount of time tinkering with new technology. At least new to me. I didn't really have a term for it, so I have dubbed it fun coding. Alas, I happened to go to Javascript, its nothing new to me but I haven't really gotten a chance to sit down and play with Ext 2.0 yet. I am amazed by what you can do with around 65 lines of code. Makes me want to learn more about what dynamic languages can do for me! Who wants verbose statically typed java/c# anymore! Ha, I kid. But, I could potentially cut my code base by half if I went to dynamic languages such as python, groovy, or ruby. I am sure there are others but the aforementioned languages came to mind. Anyway let's check out some ext code that I wrote up:

Ext.onReady(function(){
var north = new Ext.Panel(
new Ext.BoxComponent({ // raw element
region:'north',
el: 'north',
height:32
}));
var west = new Ext.Panel({
region: 'west',
contentEl: 'west',
title: 'Nav',
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 5 5',
cmargins: '0 5 5 5',
layout: 'accordion',
layoutConfig: {
animate: true
},
items: [{
title: 'Nav1',
autoScroll: true,
border: false,
}, {
title: 'Nav2',
border: false,
autoScroll: true,
}]
});
var center = new Ext.TabPanel({
region: 'center',
contentEl: 'center',
border: false,
activeTab: 1,
tabPosition: 'top',
items: [{
html: '

Test Me

',
title: 'Tabby Tab',
autoScroll: true
}]
});
var south = new Ext.Panel({
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title: 'South',
margins: '0 0 0 0'
});

var viewport = new Ext.Viewport({
layout: 'border',
items: [north, west, center, south]
})
});

This is a basic skeleton that you could work with. You could refactor these parts to be extended ext objects, and then add your own custom functionality to these pieces, but I leave that as an exercise for the reader. This could be another blog post if someone is interested in it. Just holler!

Still did a bit of plugging away with GWT. I find it verbose, but manageable. I wanted to show you, but it is too much code. I will make another post specifically on GWT soon.

Still striving to make my way to a (close to) perfectly working, usable example of ext with a JEE middle tier, and , that hopefully you can use as a skeleton for your own projects. I have my basic interface designed but the database needs to be worked on. I am trying to be careful, because there are many potential features that could go into a workout program and there is only one person to maintain the code! Hence, I want to make the code as brief as possible.

I do hope you all had a great holiday and I will be posting soon. I figure I gotta talk about some of the movies I saw. Oh boy, there are some great ones (Live Free or Die Hard) and some really horrible, I-can't-believe-you-call-this-piece-of-trash-a-movie movie(Lions for Lambs).

Update: I need to find a better way to post code. Please bare with me for the time being!

1 comment:

A Chaotic Mind said...

Time for more entries Matt!