Example 2: Hello World

Example 2: Hello World

A short walkthrough on how to design/style a simple scripted Widget Button. The finished Widget will will have just one task - to display the text Hello World on the website.

The Hello World script is a very basic Javascript function, but it demonstrates how Widgets are put together, and this can be used as a template to build more useful stuff from.

Setting up the Widget

Click the image to enlarge it

Select the Hello World Widget Template you can find in the Widget Toolkit container
Press and hold the ALT key on your keyboard while dragging the Clean Widget Template Icon to your SiteWidgets container [/Ensemble/SiteWidgets]. This creates an editable copy that is immediately published to your website footer [Wwe want the widget to be live, so we can test it while we work]
Open the copy, and check the "Active" button to publish it Then go to your website and take a look; the words "Hello World" should now appear in the Site Footer. This is what we have in the right code box. However, we want a button to click on - so open the Widget again, and check the "This is a Button" checkbox [1]. This activates the left code box, which is the one we´re interested in.
The Button Code box already contains a tiny javascript, tied to a FirstClass Icon on a button. You could substitute that function with anything at all. But for now, we are simply going to change it´s appearance. So, look at [2]: the number in the circle is the Icon ID of a FirstClass Icon.

If you open an icon picker in FirstClass [see View Properties on any FirstClass object], you can find icons for a lot of different subjects and get their Icon IDs. To give your Widget a topical button, simply find an Icon that matches your subject and replace the number value in [2] with your new Icon ID.

If you keep the rest of the "widgetbutton" code as is, it will be formatted like all other Widget Buttons - but with a little HTML you can exchange this with any graphic you want - you are not restricted to icons.

The Button Appearance Code

The red text formats the link as a button; if you remove it, you are left with a transparent 56x56 pixel square area for a normal link.

The green text is the image on the button.

With a little HTML and inline CSS, you could fill the button area with something else..

Example:

Addendum: using the above method to create a button for our Google Translator [Example 1]

To do this, we will link the button directly to Google´s own Translation tool so that when it is clicked, the visitor opens it in a new window and can choose what and how to perform the translation. There are then three elements to our button:

The link [the button function]
The background image (the shape of the button]
The foreground image [the graphic on the button]

The URL to the translation service is: http://translate.google.com/

So, we do this:

We will keep the "widgetbutton" declaration, so we don´t have to format our own button shape. That leaves finding a Google Translate Icon. Let´s use the Translate App icon, pictured below:

Now, to get this graphic onto the button, do the following:

Grab the icon above: drag-and-drop it to your Desktop [your OS Desktop, not the FirstClass Desktop]. It will appear there as "GoogleTranslate.png".
Go to your FirstMagic website in FirstClass, and open the Ensemble Folder
Drag the graphic from your OS Desktop into the Ensemble folder.

Now you have it online, in your FirstMagic site, and can link to it. The URL to use is:

/Ensemble/GoogleTranslate.png

So, we input that into our button code:

... And our button is complete. To use it, simply copy the code snippet we created into the Button Field in your Google Translator Widget and remove the "No Button" check you put there in Example 1. Then turn on the "This Widget is a Button" checkbox to try it out!