In general, installing any Complete UI component consists of four steps: specifying the XML namespace attribute of your HTML tag, linking all the required JavaScript files to your web page, linking all the required CSS files to your web page and initializing the components after the page has loaded completely. This short tutorial should get you up to speed on what needs to be done to get the components running on your page in no time!
ASP.NET USERS: Please refer to the .NET Installation and Integration article instead!
The xmlns Attribute
Every web page that gets sent to a user's browser usually starts with an <html> tag. You have to be sure that the Nitobi XML namespace is properly referenced in this tag. Simply specify the xmlns:ntb attribute inside your <html> tag, like so:
<html xmlns:ntb="http://www.nitobi.com">
Linking In The JavaScript
The next step is to make sure your web page is correctly referencing the required JavaScript files. This is done in the <head> section of your web page. All pages containing Complete UI components need to reference the nitobi.toolkit.js. Additionally, each component has its own JavaScript file which also need to be linked in. For example, if I was to include both a Grid and a Combo Box in my web page, I would have to include the following in the <head> of my web page:
<script language="javascript" src="script/nitobi.toolkit.js"></script> <script language="javascript" src="script/nitobi.grid.js"></script> <script language="javascript" src="script/nitobi.combo.js"></script>
Linking In The Stylesheets
Next, similarily to the previous step, we need to include the stylesheets for the included components. Just like for the JavaScript, include these links in the <head> section of your page. The stylesheets are organized with a base stylesheet (for example, nitobi.grid.css for the Grid component) as well as a subdirectory containing individual stylesheets for the various themes (for Grid, there is a Grid subdirectory). The base stylesheet needs to be linked into the page and needs to have access to its matching subdirectory. So, building on the example started in the section above, I would need to include links to two stylesheets, one for Grid and one for Combo:
<link type="text/css" rel="stylesheet" href="style/nitobi.grid.css"></link> <link type="text/css" rel="stylesheet" href="style/nitobi.combo.css"></link>
In the above example, I have placed the base stylesheets in a sub-folder called 'style', located in the same folder as my web page.
Initializing The Components
One last step! These components are almost all JavaScript, so to get the components running you need to bootstrap them into your web page. This is done with the nitobi.loadComponent('ID') function. The recommended way to initialize your components is to do it non-destructively by attaching it to the web page's body's onload event. Here is an example JavaScript snippet, located at the end of the <head> section of my web page:
<script type="text/javascript"> <!-- nitobi.html.attachEvent(window,"load",function(){nitobi.loadComponent("myComboBox")}); nitobi.html.attachEvent(window,"load",function(){nitobi.loadComponent("myGrid")}); //--> </script>
The above code would attach the loadComponent calls to the web page's load event. Alternatively, you can simply call nitobi.loadComponent directly in the onload attribute of your <body> tag. However, this may have the undesired side-effect of overwriting the initialization procedures of other frameworks that are included in your web page.
