Hedgehogs.net

Hedgehogs.net Website

Widget studio Tutorials

Draft Version 1.5

Widget studio Tutorials / Version: 1.5
Hedgehogs.net Website / Date: 22/01/10

Revision History

Version / Issue Date / Author / Description of Change
V1.0 / 28/10/09 / Sammy Kanan / Created
V1.1 / 28/10/09 / After first review
V1.2 / 11/11/09 / Added section on widget communication
V1.3 / 20/11/09 / After feedback from CitySecret (AM)
V1.4 / 01/12/09 / Added final notes to communication tutorial with respect to remotely hosted widgets.
V1.5 / 22/01/10 / Added further description to the introduction

1.Introduction

This document covers how to use the Widget studio of the Hedgehogs.net website.

Widgets are visual components that a user can add to, or remove from their Hedgehogs.net profile or dashboard tabs. Although Hedgehogs.net provides a range of pre-configured widgets, users may find that it would be useful to embed elements of other websites and services within Hedgehogs.net. Consider a widget a small web page (which is actually what it is) with a maximum of 300 pixels wide, the length is unconstrained by the platform. Widget Studio allows users to do this by defining how Hedgehogs.net interacts with these external services. By combining widgets from a variety of sources a user can thereby create a customized page representing their interests (

Widgets can be defined by any user on Hedgehogs.net using the Widget studio. A degree of technical knowledge is required in order to define a Widget. You will either know how to write some HTML or have deeper knowledge of other web based visualization technologies such as Adobe Flash or Java.

Additional information can be found in the Hedgehogs.net Widget studio Guide.

2.The Widget studio

In order to define and manage widget definitions you have get to the Widget studio tool set on Hedgehogs.net.

  1. Login to Hedgehogs.net
  2. Navigate from the top menu to ‘Tools’ and select ‘Studios’ from the drop down menu
  3. Once the Studios homepage has loaded, select ‘Widget studio’ from the left hand side menu

3.Defining your first widget - “Hello world”

As expected our first tutorial is a “Hello world”, in this tutorial an HTML document is presented as a widget containing the text “Hello world”.

First you have get to the Widget studio tool set on Hedgehogs.net.

  1. Login to Hedgehogs.net
  2. Navigate from the top menu to ‘Tools’ and select ‘Studios’ from the drop down menu
  3. Once the Studios homepage has loaded, select ‘Widget studio’ from the left hand side menu

3.1Creating a widget

From the Widget studio select the “Add widget definition” from the left hand side menu. At this point you are presented with the widget studio definition form.

3.1.1Basic widget description

The first information you are prompted to provide is basic information about the widget, this includes the

  • a title (required) and
  • an optional longer description.

This information is displayed to anyone who views the detailed widget description.

Step 1. Enter “Hello world” as the title.

Step 2. Enter “My first hello world widget” as the description. The description can contain rich text and images.

3.1.2Technical details

Open the technical details section of the form.

Step 3.Click on the “Technical details” link.

You are prompted to provide the Widget source, the HTML code itself and the height of the widget in pixels.

Ensure that the Widget source is set to “HTML”.

Step 4. In the HTML section paste in the following HTML.

<label>HELLO WORLD</label>

Step 5. Set the Height (pixels) to 220.

3.1.3Tags

Tags can be provided in order to better categorize the widget and make it more likely to be found when users are searching for content.

Step 6. Enter some tags which best describe your widget say, “Hello world, test, widget”

By pressing the auto tag button the system will try and add to your tags any additional standard tags it can derive from the widget description.

3.1.4Access control

User defined widgets support the standard Hedgehogs.net access controls allowing the limitation of distribution of the widget to anyone you like; individuals, your user collections, groups or even keeping the widget private.

Step 6. For this tutorial we will set the access to private so that no one else can see or use this widget.

3.1.5Saving the widget

Step 7. Clicking the save “Save” button from the bottom of the form will save the widget.

You will be informed that the widget has been saved and shown the details of the widget.

Using the “Save and continue” feature is useful if you are testing out the effect of changing settings on a widget. Save and continue will save the widget and allow you to continue to edit it.

3.2Widget details

The widget details are displayed after saving a widget definition or when selecting a widget definition from content lists within the site.

As this widget is private it will not show in anyone's content lists but your own.

From this detailed view you can now open the widget in a new window.

Step 8. Click the linked marked “Open widget in a new window”.

A new window will open displaying the widget in the same manner as it would be shown were it to be added to your dashboard or profile.

As the owner of the widget you can open further sections in the page containing a preview of the widget “Preview widget (display only)”, including it's edit properties, the widget gallery description “Widget gallery description” and the technical details “Technical details” by clicking on the appropriate section heading.

From the widget detail the widget can be edited or deleted.

If the widget is deleted all references to it are lost, anyone using the widget on their profile or dashboard will end up with an empty area where the widget would have been placed until this is deleted by the user.

3.3Adding the widget to your dashboard

The final step in this tutorial is to add the widget to your dashboard.

Step 9. Select the “Dashboard” from the top menu.

You will be taken to your dashboard page and it will be loaded.

Step 10. To edit the page select “Edit page” from the top left of the page.

You will be presented with the tab page properties and the Widget gallery.

The Widget gallery allows you to select and drag widgets from the gallery onto your page.

Step 11. Find your Hello world widget from the list by scrolling to the left until you find it.

Step 12. Drag it onto the page by holding the left mouse button down over it and dragging it onto the page below, releasing the left mouse button will drop it on the the page in the position indicated by the dotted white line.

The widget is then loaded.

Note that there is very little description provided in the Widget gallery for this widget, further description can be added, this is covered in the next tutorial.

3.4Viewing your Widget studio definitions

In order to view your widget definitions, go to the Widget studio by:

  1. Navigate from the top menu to ‘Tools’ and select ‘Studios’ from the drop down menu
  2. Once the Studios homepage has loaded, select ‘Widget studio’ from the left hand side menu

You are automatically taken to the list of your widget definitions.

For each definition basic summary information is shown. The owner profile picture, widget title and how many comments (if any) as well as when the widget was created are shown here.

If you have many widget definitions you can page through them.

To view the widget detail, select the widget title e.g. “Hello world”.

3.5End of the “Hello world” tutorial

Congratulations, you have reached the end of the “Hello world” tutorial. You should now know how to navigate around the system and add, edit and delete widget definitions.

4.Adding further description to a widget

In this tutorial we add further detail to an existing widget, particular reference is taken to the “Hello world” widget in the previous tutorial.

Further description can be provided for the Widget gallery in terms of a small screen shot and a short description to be shown with the title as well as a larger screen image for the detailed widget view. Adding further description is particularly useful if you are trying to make your widget appeal to a wider audience.

Initially you have get to the Widget studio tool set on Hedgehogs.net.

  1. Login to Hedgehogs.net
  2. Navigate from the top menu to ‘Tools’ and select ‘Studios’ from the drop down menu
  3. Once the Studios homepage has loaded, select ‘Widget studio’ from the left hand side menu

4.1Viewing your Widget studio definitions

After having selected the “Widget studio” from the Studios left hand side menu you are automatically taken to the list of your widget definitions.

For each definition basic summary information is shown; the owner profile picture, widget title and how many comments (if any) as well as when the widget was created are shown here.

If you have many widget definitions you can page through them.

Step 1. To view the widget detail, select the widget title e.g. “Hello world”.

4.2Editing “Hello world”

Having selected the “Hello world” widget you are presented with the detailed view.

Step 2. To edit the widget, select the “edit” option at the bottom of the detail.

4.3Adding further description

Having selected to edit the widget, you are presented with the widget definition form.

Step 3. Open the further description section of the form by clicking on the “Further description” link.

Two further closed sections are made available, the “Widget gallery description” and the “Widget detail description”.

4.3.1Adding the widget gallery description

Step 4. Open the widget gallery description section of the form by clicking on the “Widget gallery description” link.

You are prompted to provide further description about the widget, this includes the

  • a short description shown in the widget gallery, and
  • a small image shown in the widget gallery.

This information is displayed to anyone who views the widget in the widget gallery.

Step 5. Enter “My first hello world widget” as the short description.

The short description can only contain basic text.

Step 6. Save the below image to your machine and use it as the screen shot.

The screen shot is reduced to a very small image of maximum 64 pixels tall and 48 pixels wide.

4.3.2Adding widget detail description

Step 7. Open the widget detail description section of the form by clicking on the “Widget detail description” link. This will close the widget gallery description section. The information is not lost.

You are prompted to provide a screen shot of the image.

Step 8. Use the same screen shot as saved to your local machine in step 6 before.,

The screen shot will be saved in it's full form and presented to any user viewing the widget detail in page as an image of maximum 200 pixels tall and 200 pixels wide. Users can click on the image to see the original full size image.

4.3.3Saving the widget

Step 9. Clicking the save “Save” button from the bottom of the form will save the widget.

You will be informed that the widget has been saved and shown the details of the widget.

Using the “Save and continue” feature is useful if you are testing out the effect of changing settings on a widget. Save and continue will save the widget and allow you to continue to edit it.

4.4Widget details.

The widget details are displayed after saving a widget definition or when selecting a widget definition from content lists within the site.

Note that the screen shot from the further details has been added moving the mouse over the image displays the title “Click here to view larger screen shot in a new window”.

4.5Viewing the updated details in the Widget gallery

The final step in this tutorial is to view the updated details in the Widget gallery.

Step 10. To edit the page select “Edit page” from the top left of the page.

You will be presented with the tab page properties and the Widget gallery.

The Widget gallery allows you to select and drag widgets from the gallery onto your page.

Step 11. Find your Hello world widget from the list by scrolling to the left until you find it.

Note the inset screen shot and description.

4.6End of the adding further description tutorial

You have reached the end of this tutorial. You should now know how to add further description to a widget.

5.Providing a full HTML document, adding style

By now you are already familiar with the process of defining a widget and it's basic properties and navigating the site.

In this tutorial we concentrate only on the HTML document provided as part of the widget definition.

The first “Hello world” tutorial contains a rather ugly label with the text “HELLO WORLD”.

In order to add style to this we will add a class and set the label to be of this class using standard HTML.

The “Hello world” tutorial used the hosted HTML snippet

<label>HELLO WORLD</label>

When rendering the widget HTML, a standard HTML header and body are added. The actual document which is served is as follows:

<HTML>

<BODY style='background-color:#252525;'>

<label>HELLO WORLD</label>

</BODY>

</HTML>

You can provide either an HTML body snippet as in the “Hello world” tutorial or a full HTML document, if the HTML or BODY elements are provided they will not be added when rendered.

5.1Adding style

To add our style we can provide a full HTML document.

Step 1. Edit the “Hello world” widget.

Step 2. In the HTML section paste in the following HTML.

<HTML>

<HEAD>

<STYLE type='text/css'>

.mylabels {color:#ff9900}

</STYLE>

</HEAD>

<BODY style='background-color:#252525;'>

<label class='mylabels'>HELLO WORLD</label>

</BODY>

</HTML>

Step 3. Save the widget

You will be informed that the widget has been saved and shown the details of the widget.

Step 4. Open the widget by clicking the link “Open widget in a new window”

Note that the label text is now orange, or more precisely color #ff9900.

5.2End of the adding style tutorial

You have now completed the “adding style tutorial”, you should understand that you can add a full HTML document (without any constraints) as the body of a widget.

6.Using file resources, adding images or other file based resources

By now you are already familiar with the process of defining a widget and it's basic properties and navigating the site.

The Widget studio allows you to specify an HTML document (or HTML body snippet) and serves this up when required, however what if your HTML document relies on file resources such as images, external style sheets (CSS), or useful Javascript libraries (JS) such as JQuery? The widget definition allows the addition of up to five file based resources which can be referred to from within your HTML document.

In this tutorial we concentrate on how to add file resources in order to add an image to a widget, and the required injections to the HTML document provided as part of the widget definition.

Using the “Hello world” tutorial edit the “Hello world” widget.

Step 1. Edit the “Hello world” widget.

6.1Adding a file based resource

The file based resources are listed under the “Technical details” in the sub section “File resources”

Step 2. Open the “Technical details”, “File resources” sub section.

Step 3. Save the below image to your machine.

Step 4. Enter the label “IMAGE1” into the first Label text field, specify the saved image file from step 3 as the File.

The HTML document needs to be updated to reference this resource as “IMAGE1”.

6.2Referencing a file resource in the HTML document

The HTML code will need to reference this file resource. The label is used for this purpose. As described in the onscreen hint, the %RESOURCE_LABEL% syntax is used where LABEL is the supplied label. Any reference of this in the HTML document will be replaced with a suitable secure URL for the resource.

In this case the reference is therefore %RESOUCE_IMAGE1%.

Step 5. In the HTML section paste in the following HTML.

<HTML>

<HEAD>

<STYLE type='text/css'>

.mylabels {color:#ff9900}

</STYLE>

</HEAD>

<BODY style='background-color:#252525;'>

<label class='mylabels'>HELLO WORLD</label>

<br />

<img src='%RESOURCE_IMAGE1%' />

</BODY>

</HTML>

When the HTML for the widget is produced a valid URL for the resource will be substituted into the HTML document.

Step 6. Save the widget

You will be informed that the widget has been saved and shown the details of the widget.

Step 7. Open the widget by clicking the link “Open widget in a new window”

Note that the image is shown in the widget.

6.3End of the adding file resources tutorial

You have now completed the “adding resources tutorial”, you should understand that you can add and reference any kind of file based resource in your HTML document.

In this way you can reference hosted Adobe Flash SWF files which will served up from the same secure host as the HTML document.