Last posting i said that i was going to start with building the page components (starting with the top left media component) then the web page (which will host the components).
Since then i’ve changed my mind, i’m going to create the web page first, so as to have something to place the components on.
So for this post im going to walk through the logic behind the Web Page. It’s only going to be a simple web page, most of the wireing up code will be done later as i attach components.
So lets begin…
The iTunes application, the library pages, consists of 4 major rows
Row (1) consists of 3 columns
Row (2) consists of 3 columns - the last two controls (search and views) are grouped together into the same column
Row (3) consists of 2 columns - first column consists of a tree nav and the second column consisting of 2 controls, the albums and the grid
Row (4) consists of 3 columns
The actual columns across all four rows can’t easily be aligned to each other so im going to do the un-thinkable… treat each row as independent tables …. OH NO you say… i say it’s only a prototype and i can do what i want!
RANT: I’m not a believer of using div’s over tables. I’ve had no issue’s with using tables and having them behave themselves over different browser types. Infact im so good at using tables i can knock up complex designs using them way faster than using div’s. And to the people who roll there eye’s in disgust due to my lack of standard’s use - GET OVER IT !
Here is the current iTunes layout:
Now after some playing around i came up with this ASP.NET page with the outlines of where the future controls will sit. It is very rough and it isn’t all that nice to look at but over time it will take shape into the iTunes application that we all know and love.
The code can be found zipped up here (JF000004.ZIP) and the template asp.net web page is called JF000004.aspx
The next post will cover creating Control 4, which will be the media control (play, stop etc)







1 response so far ↓
Jenny // July 10, 2007 at 9:06 am
nice…. please post more
Leave a Comment