Back to photostream

10 - Creating the snippet for our widget

Next, we need to open up the view class for our snippet. In the template, we have already fleshed out one in the Javascript/views/view.snippet.js file. Open it up and replace the code in there with the following:

 

Get code from here: gist.github.com/384653

 

Here we are creating a Text element and setting it's label to the localized string we setup in the previous step with the key of 'Snippet.Text'. We also setup some style information (like making the font color white, fontSize to be 20, and centered text) while we are at it.

 

Advanced Users:

Here you can also start to see parts of our class pattern (similar in style to MooTools). Basically we are mapping a pseudo classical inheritance structure onto Javascript. In this code, we are creating a new class named "SnippetView" and having it extend from the AnchorSnippetView class. All snippets which aren't profile (aka TV user) specific extend from AnchorSnippetView (as opposed to ProfileSnippetView). You also see we are providing a single method implementation called createView(). View event lifecycle will be covered in more depth in future howtos.

611 views
0 faves
0 comments
Uploaded on April 30, 2010
Taken on April 29, 2010