166
edits
De:Ubiquity 0.1.2 Programmier-Tutorial: Difference between revisions
De:Ubiquity 0.1.2 Programmier-Tutorial (view source)
Revision as of 05:37, 10 March 2009
, 10 March 2009→Twitter: Wir fügen alles zusammen
| Line 495: | Line 495: | ||
} | } | ||
}); | }); | ||
</pre> | |||
= Switching Tabs = | |||
The final command in this tutorial is for switching between tabs. The end goal is this: type a few keys to that matches the title of an open tab (in any window), hit return, and you've switched to that tab. | |||
We'll write this command in two steps. The first step is creating a tab noun-type. The second step is using that noun-type to create the tab-switching command. | |||
== Switching: Writing your own Noun-Types == | |||
A noun-type needs to only have two things: A name and a suggest function. Soon, we'll probably move to having a convenience <code>CmdUtils.CreateNounType()</code>, which will simplify things even more. | |||
The name is what shows up when the command prompts for input. Suggest returns a list of input objects, each one containing the name of a matching tab. We're using [http://developer.mozilla.org/en/docs/FUEL FUEL] to interact with the browser, which is where the "Application" variable comes from. | |||
<pre> | |||
var noun_type_tab = { | |||
_name: "tab name", | |||
// Returns all tabs from all windows. | |||
getTabs: function(){ | |||
var tabs = {}; | |||
for( var j=0; j < Application.windows.length; j++ ) { | |||
var window = Application.windows[j]; | |||
for (var i = 0; i < window.tabs.length; i++) { | |||
var tab = window.tabs[i]; | |||
tabs[tab.document.title] = tab; | |||
} | |||
} | |||
return tabs; | |||
}, | |||
suggest: function( text, html ) { | |||
var suggestions = []; | |||
var tabs = noun_type_tab.getTabs(); | |||
//TODO: implement a better match algorithm | |||
for ( var tabName in tabs ) { | |||
if (tabName.match(text, "i")) | |||
suggestions.push( CmdUtils.makeSugg(tabName) ); | |||
} | |||
// Return a list of input objects, limited to at most five: | |||
return suggestions.splice(0, 5); | |||
} | |||
} | |||
</pre> | |||
The suggest method of a noun type always gets passed both text and html. If the input is coming from a part of a web page that the user has selected, these | |||
values can be different: they are both strings, but the html value contains markup tags while the text value does not. The Tab noun type only cares about the plain text of the tab name, so we ignore the value of html. | |||
We use the convenience function <code>CmdUtils.makeSugg()</code> to generate an | |||
input object of the type that the Ubiquity parser expects. The full signature of this function is | |||
<pre> | |||
CmdUtils.makeSugg( text, html, data ); | |||
</pre> | |||
but html and data are optional and need be provided only if they differ from text. | |||
If the text or html input is very long, <code>makeSugg()</code> generates a summary for us, and puts it in the <code>.summary</code> attribute of the input object. | |||
We could have accomplished mostly the same thing without calling <code>makeSugg()</code> by returning a list of anonymous objects like these: | |||
<pre> | |||
{ text: tabName, | |||
html: tabName, | |||
data: null, | |||
summary: tabName }; | |||
</pre> | |||
The input objects that our <code>.suggest()</code> method generates are the same objects that will eventually get passed in to the <code>execute()</code> and <code>preview()</code> methods of any commands that use this noun type. | |||
== Switching Tabs: The Command == | |||
Now that we are armed with the tab noun-type, it is easy to make the tab-switching command. Again, we use FUEL to focus the selected tab. | |||
<pre> | |||
CmdUtils.CreateCommand({ | |||
name: "tab", | |||
takes: {"tab name": noun_type_tab}, | |||
execute: function( directObj ) { | |||
var tabName = directObj.text; | |||
var tabs = noun_type_tab.getTabs(); | |||
tabs[tabName]._window.focus(); | |||
tabs[tabName].focus(); | |||
}, | |||
preview: function( pblock, directObj ) { | |||
var tabName = directObj.text; | |||
if( tabName.length > 1 ){ | |||
var msg = "Changes to <b style=\"color:yellow\">%s</b> tab."; | |||
pblock.innerHTML = msg.replace(/%s/, tabName); | |||
} | |||
else | |||
pblock.innerHTML = "Switch to a tab by name."; | |||
} | |||
}) | |||
</pre> | </pre> | ||