Telerik UI for Windows 8 HTML

All hub tile components derive from one base class, which defines the common functionality for all tiles:

  • A time interval specifying how often the tile will flip from its front to its back side.

  • Freezing logic so that tiles can be stopped from flipping (e.g. if they are hidden). A tile without a back side defined is always frozen.

  • A title that is overlayed over the tile content on the bottom left.

  • A backContentTemplate property. Setting the back content property will make the tile periodically flip to show the back content.

  • A tileinvoked event that is raised when the user clicks/taps the tile.

This topic contains the following sections.

Prerequisites

Before you declare a Telerik control in your application, make sure that you have added the references to the needed JavaScript and CSS resources, as described here:

Adding Telerik UI for Windows 8 HTML to an HTML Page

Creating a Tile

To create a RadHubTile component in the HTML markup, add an empty div element with a data-win-control attribute with a value of Telerik.UI.RadHubTile:

HTML Copy imageCopy
<div data-win-control="Telerik.UI.RadHubTile">
</div>

Alternatively, you can create a HubTile programmatically through JavaScript by first defining a div element with an id and then passing it as a first argument to the HubTile constructor:

HTML Copy imageCopy
<div id="myHubTile">
</div>
JavaScript Copy imageCopy
var hubTile = new Telerik.UI.RadHubTile(document.getElementById("myHubTile"));

Defining a RadHubTile control without any properties set will render an empty blue rectangle with the default Modern UI tile size 248x120. To fill the tile with content, you need to set value to some of the control's properties. Below you can find an example of how you can set property values to RadHubTile to achieve a better looking and more usable control.

Important

When using RadHubTile in a WinJS.Binding.Template or any other scenario, in which the control is added to the DOM after it is already initialized, you must specify inline width and height for the host element. This is so because RadHubTile needs its parent element to have non-zero size when it is initialized.

For example, if you will use the above-defined RadHubTile in a template, its host element should be defined like this:

<div id="myHubTile" style="height: 150px; width: 248px"></div>

Setting Tile Options

Just like any other Windows Runtime JavaScript control, the tile component options can be defined through the data-win-options attribute.

RadHubTile Markup Definition Copy imageCopy
<div id="markupHubTile" data-win-control="Telerik.UI.RadHubTile" data-win-options="{
            title: 'Sales',
            imageSource: '/images/charts-icon.png'
        }"></div>

Alternatively, you can programmatically pass an options object as a second argument to the control constructor:

Markup Copy imageCopy
<div id="codeHubTile"></div>
Initializing RadHubTile in the Code-Behind Copy imageCopy
var hubTile = new Telerik.UI.RadHubTile(document.getElementById("codeHubTile"), {
    title: 'Sales',
    imageSource: '/images/charts-icon.png'
});

The examples above provide a title to the tile, identical to the application names on Windows 8 start screen tiles, and an icon to display in the middle of the tile. To see all available configuration options, go to RadHubTile

Both of the declarations output the same tile. Here is an image of the result:

hubtile-gettingstarted

Accessing and Modifying RadHubTile

You can get hold of the hubtile object the same way as the native WinJS components - find its DOM element and access its winControl property.

JavaScript Copy imageCopy
var tile = document.getElementById("myTile").winControl;

Once you have a reference to the control, you can modify its properties as required:

JavaScript Copy imageCopy
tile.updateInterval = 1;

Attaching Events

You can either declare an event handler in the options object that you pass to the control during initialization, or you can use the addEventListener method to attach a function for execution upon a certain event. Below you can see samples of both approaches:

Assigning Event Handler Function During Initialization Copy imageCopy
var tile = new Telerik.UI.RadMosaicHubTile(document.getElementById("myTile"), {
    onchange: tileInvokedHandlerFnName
});
// OR
var tile = new Telerik.UI.RadMosaicHubTile(document.getElementById("myTile"), {
    ontileinvoked : function(e) {//...}
});
Note

If you attach the event handler as shown above but in HTML mark-up you would need to mark the handler function as safe in your code, using the WinJS.Utilities.markSupportedForProcessing function.

Using addEventListener Method Copy imageCopy
tile.addEventListener("tileinvoked", tileInvokedHandlerFnName);

See Also