Getting started
This page will help you start using Geppeto and gain a better understanding of how it works. Geppeto is a tool that allows the user to compose existing iGoogle gadgets through simple and intuitive point-and-click operations on the gadgets' user interface elements (text boxes, buttons etc.). This can be used to either create complex gadgets building on top of existing gadget functionality, or to customize an existing gadget by changing its user interface. When referring to the gadgets you create using Geppeto, we will often use the term composite gadget. We call the gadgets we use in creating our composite gadget elementary gadgets.
Table of Contents
- Getting started
In this section, you'll find instructions for setting up your iGoogle page for creating your first composite gadget and step-by-step instructions how to create a composite gadget using Geppeto.
- Geppeto reference
In the reference section, we'll take a look at tabs, a feature used to help you organize the graphical user interface of your gadget, and the right-click context menu that drives the Geppeto GUI.
- Advanced Geppeto features
This sections explains some advanced features that might be interesting to Web developers. You can learn about how Geppeto stores your gadget composition in the Geppeto Spreadsheet using the Geppeto Language. These advanced features allow you to modify your composition and even make it faster through parallelization.
Setting up Geppeto on iGoogle(back to top)
Before you can start the tutorial, you need to install Geppeto on your computer. When you're done, point your browser to your iGoogle page. If you're not signed in through Google Single Sign On, you'll need to sign in. Click on the Sign in link in the top right corner of the page. After following the Sign in link, you'll have to enter your Google username and password. If you don't have a Google account, you'll need to create one, following the instructions on the page.
Before you start creating a composite gadget, you should bring gadgets you're going to be composing onto your iGoogle page. If you're already using iGoogle, you might not want to add a bunch of new gadgets to your Home tab, so go ahead and create a new tab. To create a new tab, you need to click on the little arrow to the right of Home in the left navigation menu of your iGoogle page and select "Add a tab" in the drop down menu. Feel free to name the tab whatever you like, and check off the "I'm feeling lucky" option.
Creating your first composite gadget(back to top)
In this tutorial, we'll be creating a finance gadget that, given a stock symbol (e.g. GOOG) displays the stock's current value in Euros. To get this functionality, we'll use two existing gadgets, namely Snap Quote and Currency Converter. As mentioned in the introduction, we call gadgets that we use as building blocks for our composition elementary gadgets. Let's add these elementary gadgets to our iGoogle tab.
To add the Snap Quote gadget to your iGoogle page, click on this link. You'll be prompted to confirm that you want to add the Snap Quote gadget. After you click on the Add to Google button, you'll be forwarded to your iGoogle page where you should see the Snap Quote gadget. If the gadget didn't appear in the tab you created for this tutorial, you can move it there via drag&drop. The Snap Quote gadget is shown on the picture below.
Given a stock symbol (e.g. "GOOG" for Google, "GM" for General Motors etc.), the Snap Quote gadget displays various information about the stock. To try it out, enter "GM" into the Symbol text box and press the Go button. The information we're interested in is the current price of the stock, which is displayed in large bold font right below the Symbol text box. However, the Snap Quote gadget lists the price in American Dollars, and we want the stock price in Euros. To convert the value to Euros, we will add the Currency Converter gadget to our iGoogle page. To add the Currency Converter gadget, follow the analogous procedure to adding the Snap Quote gadget after clicking here.
To use the Currency Converter gadget, you specify the source and the target currency (the default values are USD and EUR; exactly what we need), enter the amount into the Amount text box and press the Convert! button. To get the stock price in Euros, we can now copy the stock price in American Dollars from the Snap Quote gadget into the Currency Converter gadget and press the Convert! button.
Using Geppeto, we can make this whole process a lot simpler! We will create a composite gadget that does all this clicking and copying for us. First, notice the Add Geppeto link in the right corner, just above your iGoogle tab. This link adds a new Geppeto gadget to your iGoogle page. When you click on the link, you'll get prompted to name the gadget you're adding. After you've entered a name into the Gadget Name text box, click the Create! button.
Notice that the gadget we added already has some content in it. This is the Geppeto user interface. Let's take a moment and go through the items in the interface. First, under the Geppeto logo, you'll notice three buttons: Editor, Recovery and Set. The gadget logic you define for your composite gadget is stored in a spreadsheet using the Geppeto programming language. Using the Editor button, you can view and modify this program. This is an advanced feature we won't be covering in this tutorial, but you can read about it in the advanced features section of this page. The good news is that most of Geppeto's functionality is available through the point-and-click interface.
The Recovery and Set buttons support trial-and-error experimentation with Geppeto. Once you're satisfied with a piece of functionality you've created for your gadget, you can create a checkpoint using the Set button. If you make some subsequent changes that don't turn out the way you planned, you can go back to the checkpoint by clicking the Recovery button.
Tabs are another Geppeto feature we won't be covering in this basic tutorial. Basically, tabs let you group related interface elements so you can later switch between different parts of the interface. If this sounds like something you need, check out the tabs section to find out exactly how they work and how to use them.
The last and most important part of the Geppeto user interface is the right-click context menu. You might have noticed this menu if you've right-clicked somewhere on your iGoogle page since installing Geppeto. If you haven't, move your mouse onto the Symbol text box on the Snap Quote gadget and press the right mouse button. Rather than going through all the options listed in this context menu now, we'll explore the various options as we need them for creating our composition. The context menu is the workhorse of the Geppeto user interface, and in most Geppeto applications, we expect it will provide you with all the functionality you need to create your gadget.
After exploring the Geppeto user interface, we're now ready to tackle our initial problem: creating a gadget that will, given a stock symbol, retrieve the stock's current value in Euros. So how do we do it? The main idea of Geppeto is basing gadget composition on reusing existing gadget interface elements. That means that the first question we need to ask ourselves is which interface elements from the elementary gadgets do we need on our composite gadget. Well, we will definitely need a text box to specify the stock symbol. To make the semantics of the text box clear, we should probably also add a text label too. Let's add that to our composite gadget. Remember the right-click context menu? Just right-click on the Symbol text label on the Snap Quote gadget and select Add. A label should appear on your Geppeto gadget. Do the same with the Symbol text box. It's as simple as that! What else do we need? Well, we'll need a button that we'll press once we've entered the stock symbol, so let's add the Go button from the Snap Quote gadget. Right-click on the Go button and select Add. In fact, whenever you want to add a user interface element to your Geppeto gadget, you'll do the exact same thing. Right-click, Add, done. Finally, we'll need an element that displays the stock value, so add the big bold number from the Snap Quote gadget.
You might have noticed that after adding a user interface element to the Geppeto gadget, the Clear All button appeared. This button resets your Geppeto gadget to its initial state, as it was when you added it to your iGoogle page (i.e. empty). Be careful about using this button; if you haven't stored a snapshot of your gadget via the Set button, the effect of the Clear All button is irreversible!
Now that we've finished the gadget's user interface, we need to specify the logic of the gadget. Fortunately, with Geppeto, this step is not much harder than adding the interface elements. Most gadgets do some work when the user clicks a button. We want our gadget to get the stock price when we click the Go button. To get this behavior, we will use the When clicked... option in the context menu. All the subsequent logic we define for our gadget will play out when we click the button. Right click on the button and choose When clicked... from the context menu. So what do we want to happen when we click the Go button? Well, we want to get the stock price for the stock symbol we've entered in Euros. To get this functionality, our composite gadget will use the elementary gadgets we have on our page. First, it must copy the stock symbol from our composite gadget to the Snap Quote gadget. To specify this functionality, we'll use the Copy and Paste options in the right-click context menu. Right click on the Symbol text box on the composite gadget and select Copy from the menu. Now right click on the Symbol text box in the Snap Quote gadget and select Paste.
Now we need our gadget to make the Snap Quote gadget get the stock data. To do that, we'll use the Click option from the context menu. Right click on the Go button on the Snap Quote gadget and select Click. What happens when a user clicks the Go button on the Snap Quote gadget? Well, the gadget will get the newest data for the specified stock symbol. So after our gadget clicks the Go button on the Snap Quote gadget, the big bold number in the Snap Quote gadget will have the stock price in American Dollars. What our gadget needs to do next is copy this number from the Snap Quote gadget into the Amount text box on the Currency Converter gadget. We'll add this functionality with another copy-paste sequence. Right click on the big bold number on the Snap Quote gadget and select Copy. Now right click on the Amount text box on the Currency Converter gadget and select Paste. Again, our gadget needs to make the Currency Converter gadget actually do the conversion, so we'll add a click to the Convert! button on the Currency Converter gadget. As before, right click on the Convert! button on the Currency Converter gadget and select Click. Finally, we need our gadget to take the converted value and display it in its stock value interface element. This is just another copy-paste sequence. Right click on the Amount text box on the Currency Converter gadget and select Copy. Now right click on the stock value interface element on the composite gadget and select Paste.
That's it! You've created your first Geppeto gadget! To try it out, enter a stock symbol (e.g. GOOG or GM) into the Symbol text box on your composite gadget and click Go. You should see the elementary gadgets do their work and finally the stock price in Euros on your composite gadget! Finally, to save your gadget in this state click on the Set button on the Geppeto gadget.
A part of Geppeto's funcionality wasn't covered in this basic tutorial. If you'd like to learn more, check out the Geppeto reference and the advanced features section.
We'd love to hear what you think about Geppeto, and which features you'd like to see in future releases of the tool. If you have any questions or comments, please join us on the Geppeto discussion group.
Geppeto Reference
This section provides some information about organizing the user interface of your gadget with tabs and a detailed explanation of all the options in Geppeto's right-click context menu.
Tabs(back to top)
When creating more complex gadget compositions, the gadget interface can quickly become crowded. Tabs are a feature of the Geppeto environment that allows you to group related GUI elements into separate entities. Using tabs helps keep the gadget interface well organized and user-friendly. It gives you the ability to quickly switch between different functionalities of your composite gadget.
To add a new tab to your gadget, just click on the "+" symbol next to existing tab names (see Figure 1). You are prompted to choose a name for the new tab. After clicking on the OK button, the new tab is added to your design. You can remove tabs by clicking on Delete tab. Note that you can't remove the initial tab named Tab1.
You can freely move GUI elements between tabs. To do so, right click on a GUI element to open the right-click context menu. Select the Move to next tab option from the menu (see Figure 2). The selected GUI element is moved to the right neighboring tab. In Figure 2, the Go button is moved from Tab1 to Tab2. Note that the movement wraps around, i.e. if a GUI element is moved from the tab with no right neighbor, its destination is the first tab (in Figure 2, the tab named Tab1 is the first tab).
Right-click Context Menu(back to top)
The right-click context menu is the main part of the Geppeto point-and-click user interface. In this section, we'll go through all the options available in the menu.
The first options you'll encounter when creating a gadget using Geppeto are Add and Remove. The Add option is used to add interface elements from elementary gadgets to the composite gadget. If you ever want to simplify the interface of the composite gadget, you can remove elements using the Remove option.
The Move to next tab option is another option used in creating the interface of the composite gadget. Tabs and the Move to next tab option are explained in the tabs section of this page.
To run the composite gadget, the user will have to click on a button on the gadget's interface. To define the gadget start button, you right-click on a button and choose the When clicked... option.
The Copy and Paste options are used to define input and output mapping between elementary gadgets and the composite gadget. To define an input mapping, you right-click on an input element on the composite gadget, choose the Copy option and then right-click on an elements in an elementary gadget and choose the Paste option.
To specify constant values for some gadget element (either on the composite gadget or on an elementary gadget), you can use the Type in... option. Basically, what you enter in the pop-up will be entered into the specified element as part of the event sequence you are defining for the composite gadget. For example, in the tutorial example, we assumed that the Currency Converter gadget will always convert from American Dollars to Euros. If we use the currency converter gadget to convert between other currencies and don't reset the source and target currency to USD and EUR, our application won't do what we expect. To avoid this problem, we could add Type in... instructions to the sequence.
Finally, to make the composite gadget click on buttons, the context menu provides the Click option. To see an example of the Click option, check out the basic tutorial on this page.
Advanced Features
This section describes some Geppeto internals, and how you can use them to modify your composition and even make it faster through parallelization.
Geppeto Spreadsheet(back to top)
You can edit your gadget composition design by clicking on the Editor button in the Geppeto gadget. This gives you access to the Geppeto Spreadsheet application which allows you to create, modify or review your design. Geppeto Spreadsheet is divided into three sections: Gadget List, GUI Elements and Geppeto program.
The purpose of the Gadget List spreadsheet is to define gadgets participating in the composition. The Gadget List spreadsheet is divided into two columns as shown in Figure 3. The first column contains the gadget name. The second column contains the address of the gadget's XML specification file. In the figure below, two gadgets with names "Minicharts" and "Translate" are defined along with their corresponding XML specification addresses.
The GUI Elements spreadsheet is used to define which gadget elements are being used to perform gadget composition. It is organized into three columns (see Figure 4). The first column defines the GUI element's XPath. The GUI element's XPath describes the position of the element in the gadget's DOM tree. The second column defines the GUI element's name. The last column contains the name of the tab in which the GUI element is placed. Since element name, XPath and tab name are generated automatically by the Geppeto environment, it is a good convention to use the GUI Elements spreadsheet for revision purposes only.
The Geppeto Program spreadsheet is used to review or define the Geppeto program. Each Geppeto instruction is stored into a separate cell of the spreadsheet. The execution order of instructions in the spreadsheet is: from top to bottom and from left to right. An example of a Geppeto program is shown in Figure 5. Further details on the Geppeto language are available in the section below.
Geppeto language(back to top)
The Geppeto language is a spreadsheet language designed for gadget composition. It consists of three instructions: wait for click, transfer and click. The syntax of Geppeto instructions is explained below.
Wait for click
#[gui element name]@[gadget name]
The wait for click instruction specifies the button that starts the Geppeto gadget. When a user clicks on the element addressed by wait for click, the Geppeto environment executes instructions in neighboring cells (below or to the right of the starting cell). GUI element name in the instruction corresponds to an element name defined in the GUI Elements spreadsheet. This also applies to gadget name which corresponds to a gadget name defined in the Gadget List spreadsheet.
Transfer
[gui element name]@[source gadget name] => [gui element name]@[destination gadget name]
The Transfer instruction is used to transfer content of a GUI element to a GUI element of another gadget. This instruction is used with GUI elements that have useful content, such as text boxes. The source gadget with its belonging GUI element is addressed in the left-hand side of the transfer instruction, while the destination gadget and GUI element are addressed in the right-hand side of the transfer instruction.
Click
click [gui element name]@[gadget name]
The Click instruction is used to execute the functionality of a gadget. When click is executed, the addressed GUI element (usually a button) is clicked. This way it is possible to obtain useful data for the composite gadget. This data can then be transferred between other participating gadgets, using transfer instructions, in order to achieve a more complex gadget composition.
Using parallelization to speed up the composition(back to top)
One of the implications of the 2D time flow explained above is the ability to create parallel compositions. Basically, whenever a cell in the Geppeto program has a command right below it and a command to its right, those commands are executed in parallel or concurrently. This means that their execution is completely independent of one another. The Geppeto point-and-click interface doesn't currenlty support this feature, i.e. all the actions you specify through the right-click context menu are stored in a single sequence in the Geppeto spreadsheet. However, if there's a part of your composition that could be executed in parallel, you can manually rearrange the commands to achieve this. Also note that if a Geppeto command has a command right above it and a command to its left, it will only be executed once both of the neighboring commands are executed.
What do you get by making your composition parallel? Basically, you get a gadget that does its job faster. For example, immagine we had another finance gadget on our iGoogle page that, say, displayed the stock's value graph for the week. Rather than typing the stock quote to both of our finance gadgets, we can create a composite gadget with Geppeto that will do it for us. Our gadget will have to copy the stock symbol from a text box on its interface to both of the finance gadgets and click some buttons on them to make them get the stock data. These sequences of actions are independent, so we can reorder the instructions to make them execute in parallel.
Finally, keep in mind that only independent sequences can be parallelized. For example, in the composition we created in the tutorial, we can't convert the stock price to Euros before we get the American Dollar amount from the Snap Quote gadget. These two sequences are dependent, so they can't be parallelized.