This tutorial will show you how to build a TabControl which renders tab pages whose layout is based on an HTML template. The screenshot below presents you the final application:
I. References
You must load the following JavaScript files used by the UI controls:
HTML
 Copy Code
|
|---|
<script src="drawing.js" type="text/javascript"></script>
<script src="controls.js" type="text/javascript"></script>
<script src="common.js" type="text/javascript"></script>
<script src="common-collections.js" type="text/javascript"></script>
<script src="common-ui.js" type="text/javascript"></script> |
We will use the Tahoma font for ther wab page and box-sizing for the <div> element that will represent the TabControl. We place the CSS code for this also in the <HEAD> section:
| CSS
Copy Code
|
|---|
<style type="text/css">
body
{
font-family: Tahoma, Verdana, Segoe, sans-serif;
}
/* Setting the box-sizing to avoid page scrollbars */
#host
{
box-sizing: border-box;
}
</style> |
The next step is to initialize the <DIV> element that will represent the TabControl. We do this in the <BODY> part of the web page:
| HTML
Copy Code
|
|---|
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
<div id="host">
</div>
</div> |
The template that will be used for each TabPage is an HTML page with the following code:
| HTML
Copy Code
|
|---|
<!DOCTYPE html>
<html>
<body>
<div style="padding: 20px;">
<div>
<img id="image" width="256" height="256" style="border: 4px dashed;"/>
<h3 id="name"></h3>
<h4 id="title"></h4>
<p>
text goes here......
</p>
</div>
</div>
</body>
</html> |
We save the page as page.html.
II. Building the Tab Control
We create an array with data to be used by the TabControl. This is an array that assigns values to the image, name and title keys that correspond to the id-s of the HTML elements in the template page:
| JavaScript
Copy Code
|
|---|
var d = MindFusion.Drawing; // Create some data for the tab pages.
var data = [];
data.push({ image: "h1.png", name: "Armillaria Ponderosa", title: "Wizard of light bulb moments" });
data.push({ image: "h2.png", name: "Cantharellus Cibarius", title: "Chief robot whisperer" });
data.push({ image: "h3.png", name: "Morchella Esculenta", title: "Software ninjaneer" });
data.push({ image: "h4.png", name: "Tuber Magnatum", title: "Digital overlord" });
data.push({ image: "", name: "unknown", title: "unknown" }); |
We create the TabControl using a reference to the "host" <DIV> that we have initialized above. We set its size using the Unit class and set its styling theme to "standard":
| JavaScript
Copy Code
|
|---|
// Create a new TabControl.
var host = new ui.TabControl(document.getElementById("host"));
host.width = new ui.Unit(100, ui.UnitType.Percent);
host.height = new ui.Unit(100, ui.UnitType.Percent);
host.theme = "standard"; |
We create the TabPage-s as instances of the TabPage class and set its templateUrl property to the HTML page that we've created. Then we add the new tabl to the collection of tabs of the TabControl:
| JavaScript
Copy Code
|
|---|
// Create two templated tab pages and add them to the host's tabs collection.
var tab1 = new ui.TabPage();
// The HTML of the specified page will be set as the innerHTML of a scrollable div inside the tab content element.
tab1.templateUrl = "page.html";
host.tabs.add(tab1); |
We want to be able to add tabs dynamically - for example by adding a "+" sign after the tabs. When the user clicks on this sign a new TabPage will appear. The "+" sign is another TabPage for which we disable interactivity and selection:
| JavaScript
Copy Code
|
|---|
// Create a non-interactive tab to use as an "add tab" button.
var tab = new ui.TabPage("+");
tab.header.size = new ui.Unit(20);
// Disable drag and drop operations on the tab header.
tab.header.interactive = false;
// Disable selection of the tab.
tab.enabled = false;
host.tabs.add(tab); |
Now that we've created all tabs let's not forget to render the tab control:
| JavaScript
Copy Code
|
|---|
// Render the host control.
host.render(); |
III. Event Handling
The first event we handle is the tabHeaderClick event of the TabControl.
| JavaScript
Copy Code
|
|---|
host.tabHeaderClick.addEventListener(handleTabHeaderClick); |
In the event handler method we will check if the header of the "+" tab page was clicked and if yes - we insert a new TabPage right before the "+" tab. The event handler method receives two arguments - one is the sender and the other an instance of the ItemEventArgs class that provides data or the event. The sender is the TabPage that was clicked:
| JavaScript
Copy Code
|
|---|
// This is the handler function of the tabControl.tabHeaderClick click.
// If the "add tab" header is clicked add a new tab with the same template.
function handleTabHeaderClick(sender, args)
{
if (sender.title == "+")
{
var tab = new ui.TabPage("");
// show the close button in the tab header.
tab.allowClose = true;
tab.templateUrl = "page.html";
host.tabs.insert(host.tabs.count() - 1, tab);
tab.contentLoad.addEventListener(tabLoad);
}
} |
When a new
TabPage is created we handle its
contentLoad event. In the event handler method we calculate which is the index of the record in the data array that we will use to populate the new
TabPage. We have a few records with text and images for the first tabs the user creates. Afterwards all
TabPage-s will be created with an empty default content:
| JavaScript
Copy Code
|
|---|
// This is the handler function of the tabs contentLoad event.
// The sender argument is the TabPage control.
// Template elements can be accessed through the DOM to set their correspoding values.
function tabLoad(sender, args)
{
var index = Math.min(sender.parent.tabs.indexOfItem(sender), data.length-1);
sender.element.querySelector("#image").src = data[index].image;
sender.element.querySelector("#name").innerText = data[index].name;
sender.element.querySelector("#title").innerText = data[index].title; // Change the title of the tab's header.
sender.header.title = data[index].name; |
We use the ToolTip control to render a tooltip that follows the mouse whenever the user hovers the image in the TabPage. We bind the tooltip to the image element and we take its text from the "name" key in the data array. Finally we render the tooltip:
|
Copy Code
|
|---|
// Create a tooltip for the image element.
// The tooltip will follow the mouse cursor with the specified offset.
var tooltip = new ui.Tooltip(sender.element.querySelector("#image"), data[index].name);
tooltip.follow = true;
tooltip.offset = new d.Point(20, 20);
tooltip.render();
}//end of function tabLoad |
