1,007
edits
Labs/Ubiquity/Ubiquity Source Tip Author Tutorial: Difference between revisions
Jump to navigation
Jump to search
Labs/Ubiquity/Ubiquity Source Tip Author Tutorial (view source)
Revision as of 07:08, 22 June 2009
, 22 June 2009→A Better Preview
| Line 180: | Line 180: | ||
The other thing I've done is to do some string formatting using the <code>renderTemplate()</code> function. This takes a template string and performs the appropriate substitution given the passed-in JSON object. Templates can handle a wide range of functionality, as we are currently using TrimPath's [http://code.google.com/p/trimpath/wiki/JavaScriptTemplates JavascriptTemplates]. You should read their site for more documentation. Although JavascriptTemplates has some nice properties, we are contemplating moving to [http://mjtemplate.org/ MJT] sometime soon. | The other thing I've done is to do some string formatting using the <code>renderTemplate()</code> function. This takes a template string and performs the appropriate substitution given the passed-in JSON object. Templates can handle a wide range of functionality, as we are currently using TrimPath's [http://code.google.com/p/trimpath/wiki/JavaScriptTemplates JavascriptTemplates]. You should read their site for more documentation. Although JavascriptTemplates has some nice properties, we are contemplating moving to [http://mjtemplate.org/ MJT] sometime soon. | ||
=== A shortcut for localization and rendering templates === | |||
Note how in the code above, we used the localization wrapper <code>_()</code> before passing the string to renderTemplate. Because this is such a very common combination when displaying strings, we have a shortcut for it. Calling _() with a JSON object as the second argument will automatically trigger <code>CmdUtils.renderTemplate()</code> on the post-localization string. So the above preview method could be rewritten more simply as: | |||
<pre> | |||
preview: function( pblock ) { | |||
var msg = 'Inserts todays date: "<i>${date}</i>"'; | |||
pblock.innerHTML = _( msg, {date: this._date()} ); | |||
}, | |||
</pre> | |||
=== Networking calls and placeholder previews === | |||
Previews display something meaningful to the user immediately. If you have a preview that requires an AJAX request—say, to fetch some search results—that call might take a while to return. In the meantime, your command should display a placeholder preview giving the user feedback. | Previews display something meaningful to the user immediately. If you have a preview that requires an AJAX request—say, to fetch some search results—that call might take a while to return. In the meantime, your command should display a placeholder preview giving the user feedback. | ||
| Line 185: | Line 198: | ||
<pre> | <pre> | ||
preview: function( pblock ) { | preview: function( pblock ) { | ||
pblock.innerHTML = "This will show until the AJAX request returns"; | pblock.innerHTML = _("This will show until the AJAX request returns"); | ||
// AJAX request | // AJAX request | ||
pblock.innerHTML = getFromServer(); | pblock.innerHTML = getFromServer(); | ||