This object is an advanced feature that is only available in the licensed, commercial version of Klipfolio Dashboard. Contact Klipfolio for further details.
A Tile is an array of Items and has the same properties and functions as the Items object.
This object is very useful when you want to create a Klip that lets your users drill across the data from various sources.
As demonstrated by the simple example below, you can think of Tiles as individual Klips, each of which with its own data source and stylesheet. Set up the Klip with a default Tile that is displayed when it is initially loaded, and as the user interacts with it, other Tiles can be displayed. Just as with a simple Klip with a single data source, you can set up each Tile with its own menu options and other functionality as desired.
If you want a Klip that has just one data source and have users drill down its hierarchy, you don't have to use the Tile object. Instead, you can simply create a "drilldown Klip" by using CSS and no script. Refer to the how-to article on drilldown Klips for details.
Example:
In the following example Klip, there are 5 Tiles including the default Tile. When the Klip is loaded, what you see is the default Tile
with 4 items; all other Tiles and their contents are loaded in the background. The user can click on any of the items to see more about that
item — the click will load the specified Tile.
For example, clicking on the first item labelled as "Items[0] - Chicago" loads the chicagoTile with its own content source. Open the Debug Window to see the trace output from the Klip as you navigate between the Tiles.
<?xml version='1.0' ?>
<klip>
<identity>
<title>
API: Tile
</title>
</identity>
<locations>
<contentsource>
http://www.klipfolio.com/static/klips/samples/tile/defaultTile.xml
</contentsource>
<icon>
http://www.klipfolio.com/static/klips/klipfolio/sample_icon.png
</icon>
<banner>
http://www.klipfolio.com/static/klips/klipfolio/sample_banner.png
</banner>
</locations>
<setup>
<purge>
permanent
</purge>
<autoremove>
false
</autoremove>
<columns>
true
</columns>
</setup>
<content>
<default_style>
city {
type: item;
definition: all;
}
name {
itemcol: 1;
collabel: "Default Tile Items";
}
</default_style>
<chicago_style>
Chicago {
type: item;
definition: all;
}
nickname {
itemcol: 1;
label: "Nickname for Chicago";
}
</chicago_style>
<atlanta_style>
city {
type: item;
definition: all;
}
hq {
itemcol: 1;
label: "Organization";
}
</atlanta_style>
<seattle_style>
city {
type: item;
definition: all;
layout: frame;
}
one {
noterow: 2;
notelabel: false;
}
two {
type: image;
itemcol: 1;
fit: shrink;
noterow: 1;
notelabel: false;
label: "Landmark Photo";
}
home {
type: link;
}
</seattle_style>
<ny_style>
city {
type: item;
definition: all;
}
one {
itemcol: 1;
label: "Song Title";
}
two {
itemcol: 2;
label: "Artist";
}
</ny_style>
</content>
<klipscript>
<![CDATA[
var defaultTile = Items;
var chicagoTile = Items.newTile("Chicago");
var atlantaTile = Items.newTile("Atlanta");
var seattleTile = Items.newTile("Seattle");
var nyTile = Items.newTile("New York");
var currentTile;
var dataURL = "http://www.klipfolio.com/static/klips/samples/tile/";
function onLoad() {
// Set up each Tile with the Back button and
// for the click on the Back button to load the default Tile
chicagoTile.showbackbutton = true;
chicagoTile.onBack = loadDefaultTile;
atlantaTile.showbackbutton = true;
atlantaTile.onBack = loadDefaultTile;
seattleTile.showbackbutton = true;
seattleTile.onBack = loadDefaultTile;
nyTile.showbackbutton = true;
nyTile.onBack = loadDefaultTile;
}
function onRefresh() {
// If any of the tiles are not ready, dim the Klip
if (!prepareTiles()) {
return false;
}
Engines.Data.onCreate = defaultCreate;
Engines.Data.onUpdate = defaultUpdate;
Engines.Data.stylesheet = Prefs.getContent("default_style");
if(!Engines.Data.processTile(Prefs.contentsource, defaultTile))
{
traceln( "Default Tile did not load. Dimming the Klip." );
return false;
}
// Find out what the currentTile is.
currentTile = Prefs.getPref( "currentTile" );
traceln( "The current Tile is: " + currentTile );
// display the cuurrent Tile
displayTile();
return true;
}
function displayTile() {
if ( currentTile == "default" ) {
loadDefaultTile();
}
else if ( currentTile == "chicago" ) {
loadChicago();
}
else if ( currentTile == "atlanta" ) {
loadAtlanta();
}
else if ( currentTile == "seattle" ) {
loadSeattle();
}
else if ( currentTile == "ny" ) {
loadNY();
}
else {
loadDefaultTile();
}
return true;
}
// Set up each tile with its data source and stylesheet
function prepareTiles() {
traceln( "Preparing all Tiles in the background" );
// Set up Chicago tile
Engines.Data.stylesheet = Prefs.getContent("chicago_style");
if(!Engines.Data.processTile( dataURL + "chicago.xml", "Chicago")) {
traceln( "Chicago Tile did not load. Dimming the Klip." );
return false;
}
// Set up Atlanta tile
Engines.Data.stylesheet = Prefs.getContent("atlanta_style");
if(!Engines.Data.processTile( dataURL + "atlanta.xml", "Atlanta")) {
traceln( "Atlanta Tile did not load. Dimming the Klip." );
return false;
}
// Set up Seattle tile
Engines.Data.stylesheet = Prefs.getContent("seattle_style");
if(!Engines.Data.processTile( dataURL + "seattle.xml", "Seattle")) {
traceln( "Seattle Tile did not load. Dimming the Klip." );
return false;
}
// Set up New York tile
Engines.Data.stylesheet = Prefs.getContent("ny_style");
if(!Engines.Data.processTile( dataURL + "newyork.xml", "New York")) {
traceln( "New York Tile did not load. Dimming the Klip." );
return false;
}
return true;
}
function defaultCreate(item) {
item.onClick = launchTiles;
// display an arrow by each item in the default Tile
item.showarrow = true;
return true;
}
function defaultUpdate(existingItem, properties) {
return defaultCreate(properties);
}
function launchTiles(index, style) {
switch( index ) {
case 0:
loadChicago();
break;
case 1:
loadAtlanta();
break;
case 2:
loadSeattle();
break;
case 3:
loadNY();
break;
default:
loadDefaultTile();
}
}
// Load the specified Tile.
// When the specified Tile is loaded, update the title that is displayed and
// remember which Tile was loaded in the Prefs
function loadChicago() {
traceln( "Loading the Chicago Tile" );
Items.loadTile(chicagoTile);
Prefs.title = "Chicago Nicknames";
Prefs.setPref( "currentTile", "chicago" );
}
function loadSeattle() {
traceln( "Loading the Seattle Tile" );
Items.loadTile(seattleTile);
Prefs.title = "Landmarks in Seattle";
Prefs.setPref( "currentTile", "seattle" );
}
function loadAtlanta() {
traceln( "Loading the Atlanta Tile" );
Items.loadTile(atlantaTile);
Prefs.title = "Companies w/ HQ in Atlanta";
Prefs.setPref( "currentTile", "atlanta" );
}
function loadNY() {
traceln( "Loading the NY Tile" );
Items.loadTile(nyTile);
Prefs.title = "Songs about New York";
Prefs.setPref( "currentTile", "ny" );
}
function loadDefaultTile() {
traceln( "Loading the default Tile" );
Items.loadTile("default");
Prefs.title = "API: Tile - Default Tile";
Prefs.setPref( "currentTile", "default" );
}
]]>
</klipscript>
</klip>
Since:
5.4
See also:
Items for all available properties and functions.
How-to article on writing a Drill Across Klip.
|
Klipfolio Dashboard API | ||||||||
| PREV OBJECT NEXT OBJECT | FRAMES NO FRAMES | ||||||||
| SUMMARY: PROPERTY | FUNCTION | DETAIL: PROPERTY | FUNCTION | ||||||||
© 2011 Klipfolio Inc. All Rights Reserved.