Online Advertising, Web Development & General Rantings

In my previous post where i discussed webservices i forgot to mention something very very important! Calling webservices by “PROXY”!

Ultimately the application we are building consists of a rendered HTML page sitting on the client’s end which contains SilverLight controls, standard HTML controls and Ajax controls. The rendered page came from web server “X”, which can be considered the domain of the website the page came from eg. in my “iTunes sample” wireframe the server “X” is www.ripthispage.com . The diagram below shows this :

Now when the iTunes application (from the client side web page) needs to communicate with a webservice we have the following options available to us:

i ) from the clients end make a direct call to the third party webservice. This is considered a “Cross-Domain” call.

ii ) from the clients end make a call to the same domain webserver (to an exposed webservice in light red below) then proxy a call to the third party webservice. This is considered a “Proxied” call.

The diagram below hopefully explains both options better

My previous post used “proxied” calls because that is the most flexible method acceptable from a security perspective. SilverLight and Ajax.asp.net have issues with “cross domain” calls. That is “cross domain” calls have been locked down by browsers due to abuse by hackers in the past. So the safest bet to ensure that your application works across the latest browsers is to use “proxied” webservice calls (ii).

Anyway this was my interpretation of webservice methods and im sure that there are other methods out there, feel free to send comments to me and i’m more than happy to correct mistakes and/or add extra useful information if requested.

If you want to see the latest version of the sample then go here (JF000018.ASPX) or if you want to download the full sample source code here it is (JF000018.ZIP)

The title for this post is very cryptic.. What i meant to say is that i want to prototype being able to consume webservices from other people.

The scenario is this, i want to be able to get a playlist from a third party like LastFM.com.

LastFM provide API’s to there valuable data. Rather than me build my own datastore of songs i want to consume there data into my application.

LastFM provide many hooks into there webservice, the one i want to access is this one:

http://ws.audioscrobbler.com/1.0/tag/ + [genre] + /toptracks.xml

The end result is that LastFM data is integrated into the application via the grid.  

So LastFM is a music social site that has a wealth of data around music such as “Top 100 tracks by genre”.

What im going to do is configure the current playlist in “left navigation control”. Im going to populate the Playlists section with groups from LastFM.

In the prototype source code the navigations are hard coded as a “generic list” (c# term) in the App_code/wsITunes.asmx.cs file. The method used to populate the navigations is called GetAllNavigations().

What i did was hard code groups from LastFM into this list, ideally in the end product it will be data driven somehow but for prototyping purposes this will suffice. The below picture is a snippet of code from the webservice where i replaced the existing playlists with the ones from LastFM.

The next step was to wire up each rendered tree node with an onclick event which will make the webservice call which will then populate the grid with LastFM returned data.

If you remember from a previous post that the navigation tree is fully self contained on the client. That is the navigation tree is rendered on the client end using raw data provided from a webservice. The rendering is done in the file js/tree.js. I basically replaced the onclick javascript for each “playlist” navigation item with the following code:

As i mentioned in some early post’s, i wanted each control to be independent of each other, that is i wanted each control to do there own tasks and not know about the other controls. In cases where one control needed to affect another control, eg. the left navigation item when clicked should populate the grid with the relevant songs, i wanted the base page to contain this logic.

I created a _PageController.js file to contain this binding/linking logic. In the case of a left nav click causing the songs in the grid to be populated the function that performs this logic is “loadSongsLastFM”.

The method is very simple in concept it

1) performs the webservice call to LastFM to retrieve a data packet of songs

2) passes this data packet to the grid control for rendering of the list of songs

That’s it for this post. Again the aim of this post was to proove that i could consume webservices and pass the resulting data to any controls that needed it. The Controller script was in charge of marshalling calls between the controls, such that each control did not need to know about the others. 

Check out the sample here JF000019.aspx. Or if you want download the code here (JF000019.ZIP)

What did i have to do to get the source code working with the latest Release Candidate (RC)? These were the simple steps i followed!

UPDATE SILVERLIGHT.JS

1) Update my js/silverlight.js file with this RC version (silverlight.zip contains only the silverlight.js file)

UPDATE CODEBASE (C# & JAVASCRIPT) WITH BREAKING CHANGES

2) checked off every breaking change from this document (Breaking Changes in the RC) and ensured i made the relevant changes in my xaml and javascript calls. Below I’ve identified the most common changes i needed to make to the xaml and createsilverlight.js files.

a) remove all “sys.” references in your javascript code that refers to silverlight code . In my case it was all found in the createsilverlight.js include. e.g. instead of sys.Silverlight.createObject i now only call Silverlight.createObject.

b) all calls to the Silverlight.createObject method needs to have properties with values true converted to the string value of ‘true’. e.g.  before isWindowless:true , after isWindowless:’true’

c) the new silverlight version is “1.0“. Anywhere in your javascript code, mine was all in the createsilverlight.js, where you call Silverlight.createObject you need to pass in a version of “1.0″ instead of “0.9″. eg. before version:’0.9′ , after version:’1.0′

d) can no longer use ‘\’ in uri’s. So everywhere in my xAML’s where i had an image source i had to replace the ‘\‘ with a ‘/‘.

e) visibility=”Hidden” is now visibility=”Collapsed”

There were other changes but they were the main ones that affected me. Make sure you check the “breaking changes” document to make sure your code works with the Release Candidate version.

Here is the updated source code which is optimized for the release candidate 1 (RC1). It will work with either 1.0 or 1.1 version.

Entry point is JF000016.aspx (JF000016.ZIP)

Hi everyone,

I’m posting to let you know that I’m still alive and this project is still chugging along.

I have been busily writing post’s and they’re all sitting in draft mode.

I’ve got about 6 post’s waiting to be completed. I won’t be releasing them till this weekend (about 3 days away).

It’s been hectic at work (real work) so haven’t had much time to concentrate on my SilverLight stuff .

Anyway stay tuned …. a barrage of post’s will soon be coming your way!

The 3 remaining controls are all being tackled in this post. It’s actually a very boring post as these 3 remaining controls are very simple, saying that they still play an important part in the final look of iTunes.

Here are the three controls and how i’ve created them

1) top “main dropdown menu” control - i’ve used the “HoverMenuExtender”, which is an ajax controltoolkit control for this.

Here’s iTunes version of the “drop down menu”

 

Here’s the wireframes version of the “drop down menu”

2) top “title” control - this is a simple html control

Here’s iTunes version of the “title”

Here’s the wireframes version of the “title”

3) bottom “status bar” control - again this is going to be a simple html control

Here’s iTunes version of the “status bar”

Here’s the wireframes version of the “status bar”

Below is the wireframe with all 3 above mentioned controls added..

Ok that is all the major GUI controls done. It does look very similar to iTunes, man i can’t wait to start wireing them up. That won’t happen for atleast another week (as mentioned in my previous post i still have a few things to complete before development begins)

If you want to see the sample page go here (MetallicGrey or Wooden)

Of if you feel like downloading the full sample here’s the zip (JF000015.ZIP-1.9MB) the entry point is the page JF000015.ASPX

I’ll catch you soon!

I have been getting alot of great emails from people, keep sending them please!!! I’ve also been asked many questions alot of which are the same. Here is a common question asked by many

“Where am I in my project, and how long is it going to go for?” 

So here is my answer to the above…

This is a quick roundup of where im still yet to go with this project

a) “prototyping”

i) control (1) - top menu

dropdown menu that will be built using ajax control toolkit

ii) control (2) - top header

simple html control that will show the name of the application

iii) control (12) - footer feedback

simple html control that will provide html markup of the current status of the application (like a status bar)

iv) downloader control

need to prototype a downloader so that media elements (like album covers) can be downloaded in the background whilst the user is doing something else 

b) “project planning” phase

i) initial draft

ii) detailed drilldown

c) ”technical design” phase

i) clarification

ii) documentation

d) “development” phase

i) task driven development

ii) unit testing of task

iii) documentation of tasks

Their is still a while to go till my project is completed. I would say that there’s at least a week till we begin development.

I hope you persist and stay with me on this journey. From my perspective it’s been an enjoyable learning experience and i truly hope all you visitors have learnt or are enjoying the the journey with me

In this short post i thought id take a break from control development and talk about something thats very dear to me “themeing”

A week ago when i had finished creating my 2nd silverlight control it dawned on me that SilverLight allows a level of personalization and customization that was never there before within web development!

SilverLight gives designers and developers near limitless control of the UI. We can chop and change elements of the GUI design as easily as we change font’s in a word processor.

Below is an example of how easy it is to theme iTunes, i changed the look from the metallic standard version to a wooden grained version. It took me under 5 minutes…. check out how all the components (silverlight/html/ajax) just fit into the new theme , Amazing!!! (if i had spent another hour on the wireframe i would of gotten a more complete wooden look, none the less it’s still damn good)

Here is my standard “Metallic” wireframe of iTunes: [JF000012.ASPX]

Here is my themed “Wooden” wireframe of iTunes: [JF000014.ASPX]

Source code for this sample can me found in this zip file [JF000014.ZIP]

Imagine if the real iTunes was like this, allowing people to customize the theme of the skin! How cool!!

Skined versions of iTunes isn’t the only thing i wanted to discuss..

Imagine widgetizing the silverlight components on the page!! imagine having 20 different play buttons to choose from, or having 10 different ”album swooshers” to play with !! Customization to the nth degree!!! 

I’ll demonstrate this in the next prototype ….

Exciting times ahead!