Project SilverLight 1.1 – Prototype – Part 14 – left nav control


subheading 3

Today i’m going to be working on the “left navigation” control. I have the option of creating it as a silverlight control, an ajax control or plain html control(s).

I have choosen to create it using plane HTML rendered on the clients end , much like the GRID control. I’m going to have a webservice return a list of navigation items as raw data then have the client render the html.

So this is how the left navigation looks in iTunes

 iTunes left navigation 1

This is the result after my prototyping

left nav wireframe result

And this is what the current wireframe with the new “left navigation” looks like! Damn it’s iTunes online!!!

wireframe 12

The ease at which i was able to create the webservice then use microsoft webservice toolkit and sdk to consume the webservice (much like the grid) made the creation of this “left navigation” control so easy. The entire project so far has been dirt easy. Yep im a believer that the suite of Microsoft technologies are going to foster in a new age of web applications….

Ok back to this posting, how did i achieve this? I’ll upload the video of the walk thru of the code base this weekend, but in the meantime here is a written down account of what i did (accompanied with source code and sample pages that can be found at the end of this posting)

Using photoshop i took a snapshot of the icons from iTunes, for educational/demonstration purposes only of course, then cut them up into small icon parts. I then added them to the project as simple jpg’s images into the images/icons folder.

left nav icons for iTunes

I then set out on creating a dummy webservice that would return the raw navigation list (without markup) to the client. I reused the webservice for the grid, used from the previous “Grid posting”.

1. Created a definition entity called “NavigationItem” which defined the data that made up a navigation item.

2. Create a webservice call called “GetAllNavigations” that the client would need to call to return back the list of defined navigation items

left navigation code 1

For the client side rendering of the navigation tree I then created 2 javascript classes similar to the grid control with the below mentioned functionality:

a) js/Tree.js contained the logic to call the server side webservice “GetAllNavigationItems” (see above) and render the HTML tree.

b) js/CreateAjaxTree.js contained the logic to instantiate and launch the tree that would be called from the base page.

So all that was left was to wire up the 2 javascript files into the base page and have the base page create the tree from step (b) above.

See below picture for the actual entry point where i do this”AjaxTree_pageLoad()

left nav entry point

If you want to check out the sample wireframe go here (Sample Wireframe JF000012.ASPX).

If you want to play with the code then download the zip file here (JF000012.zip).

I look forward to prototyping the last 3 controls🙂  Fun begins after that with the analysis and development part of this project!

I hope you’ve been enjoying these post’s and if you have any comments please pass them on. And thank’s to all the comments people have already left! See you soon!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s