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
This is the result after my prototyping
And this is what the current wireframe with the new “left navigation” looks like! Damn it’s iTunes online!!!
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.
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
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.
See below picture for the actual entry point where i do this”AjaxTree_pageLoad() ”
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!