Working with widgetsAdded by IBM on May 19, 2011 | Version 1 (Original)
|Mashup Center offers several standard widgets that are available in the palette. You can customize, configure, and wire these widgets as you design and create your mashup applications. You can also create your own widgets using the widget builder.
Mashup Center offers several standard widgets that are available in the palette. You can customize, configure, and wire these widgets as you design and create your mashup applications. You can also create your own widgets using the widget builder.
The following list describes the standard widgets that are provided with Mashup Center:
- Action Timer -- allows you to set up a timer that controls the frequency that an event gets passed to another widget in milliseconds. Each time an event gets passed, the counter increases by one. You can wire the Action Timer widget to another widget on the page to trigger repeatable actions such as page refreshes or other updates.
- Chart -- displays data in a bar, pie, or line chart. The Chart widget can receive and display data in either XML or comma-separated value (CSV) format.
- Customer List – a sample Data Viewer widget that is configured with a URL that points to a feed in the catalog. The feed data is a sample of the type of data you may find in a veterinary office.
- Data Editor – uses common operations such as sort, filter, and limit to transform content received from one widget into outgoing content to be sent to a second widget. Using the Data Editor widget, you can send only the content you need in a format that can be consumed by other data-displaying widgets.
- Data Viewer -- organizes and displays content in a table. It can display data from an Atom feed from the catalog or from a file that contains data in comma-separated value (CSV) format.
- Event Explorer -- displays event data published by a different widget on the page. Has to be wired to the other widget to display event data.
- Feed Reader -- displays the content of a feed. Can receive a feed URL from another widget on the page.
- HTML Markup -- displays a web page based on HTML code typed or pasted into an editor.
- Image -- displays an image that you can upload from a URL.
- Navteq Map – displays street and map information for a selected location. Supports location, route, and overlay feeds.
- Nested Data Viewer – displays nested XML data in a table format for easy browsing.
- Portal -- displays a portal page from a specified IBM® WebSphere® Portal URL. When users first access the widget in the mashup application, they have to log in with their credentials to display the page.
- Regular Expression -- finds and replaces strings within larger strings based on a specified regular expression.
- Slide Show -- displays a set of images as a slide show. Users can advance the slides automatically or manually, skip to specific images, and select whether or not to display bubble descriptions.
- URL Customizer -- allows you to create dynamic URLs with customized parameters. The URL can come from an event that is passed from another widget on the mashup page, or it can come from a parameterized feed in the catalog or on the web.
- User Input -- provides a way for you to create a simple form with various input controls quickly and easily.
- Website Displayer -- displays a website based on a specified URL.
For more information about Mashup Center standard widgets, including descriptions, supported events, and scenario-based examples, see the Widget reference
Creating, editing, and exporting custom widgets
This topic describes how to create and edit your own custom widgets. You can either use the widget builder in the catalog to create widgets based on a set of templates, or you can create and edit widget projects as a set of individual files that you can import and export.
Editing, configuring, and personalizing widgets
This topic describes the difference between editing and configuring widgets. It also describes how users can personalize widget settings that apply only to them.
When you wire two widgets on a mashup page, you essentially introduce the widgets to each other and tell them how to communicate. The widgets communicate by passing event data (often called a payload).
Working with payload types
When you wire widgets together, you create the communication line that allows data to pass from one widget to another. This data is defined by the event name, the payload (the actual content), and the payload type.
Hiding widgets on the mashup page
Sometimes you will want to add widgets to your mashup application but not display them on the page. For example, perhaps you need to convert Celsius to Fahrenheit in a data string, or you need to transform some data using the Data Editor
, or Regular Expression
widgets. You will need to add those widgets to your page, but you probably do not want them to display in view mode. In this case, you can easily hide the widgets in the hidden widgets corral.
Marking widgets as non-trusted
As a business user, you can use the Mashup Center widget builder to create widgets and then flag them as non-trusted. Marking widgets as non-trusted is useful when your widget has the potential to cause a security risk to the host system, for example by sending malicious scripts that grab cookies or modify DOM nodes. By default, widgets that you create using the widget builder are trusted.
Applying skins to widgets
This topic describes how to apply skins to individual widgets on your mashup page. Skins define the look and feel of the widgets that you drag onto the page. Skins essentially wrap the widgets and define the menu icons and colors of the widget.