:: CodeThatXPBar - navigation control that provides with the same look, feel and functionality as the special control bar which can be found in Windows Explorer, Control panel and other system tools of the WindowsXP ::

User Manual

Introduction Style customize Bar position Items' actions

HTML code as items' text XPBar from the database

Change XPBar Behaviour Standard vs PRO

On-line Builder

PRO

STD

123Guide Examples Download

Themes FAQ

XPBar Generation from the Database

In addition to wide range of useful features CodeThatXPBar allows you to generate bar script from the database.

At the example below we use MySQL as database platform and PHP as web-script language. But you can choose your own favorite database platform and web-script language. Here we just try to show basic principles for database XPBar generation.

First of all we create three tables - script_items, script_styles and scripts. Tables structure and data are listed below:

CREATE TABLE scripts
(
	id INT AUTO_INCREMENT NOT NULL,
	scriptname VARCHAR(255),
	PRIMARY KEY (id)
);

CREATE TABLE script_items
	(
	item_id INT AUTO_INCREMENT NOT NULL,
	script_id INTEGER NOT NULL,
	item_name VARCHAR(255),
	style_id INTEGER DEFAULT 0,
	style_over_id INTEGER DEFAULT 0,
	item_parent_id INTEGER DEFAULT 0,
	PRIMARY KEY (item_id)
);

CREATE TABLE script_styles
(
	style_id INT AUTO_INCREMENT NOT NULL,
	css VARCHAR(255),
	size VARCHAR(20),
	bgcolor VARCHAR(7),
	color VARCHAR(7),
	bgimg VARCHAR(255),
	shadow VARCHAR(255),
	border VARCHAR(255),
	imgitem VARCHAR(255),
	imgdir VARCHAR(255),
	imgendon VARCHAR(255),
	imgendoff VARCHAR(255),
	fixheight INT,
	fixwidth INT,
	imgdiropen VARCHAR(255),
	itemoffset VARCHAR(255),
	PRIMARY KEY (style_id)
);

insert into scripts values(1, 'CodeThatMenu Standard');
insert into scripts values(2, 'CodeThatTree Standard');
insert into scripts values(3, 'CodeThatCalendar Standard', );
insert into scripts values(4, 'CodeThatXPBar Standard');
insert into script_items values(8, 4, 'Item 1', 3, 4, 0);
insert into script_items values(9, 4, 'Item 2', 3, 4, 0);
insert into script_items values(10, 4, 'Item 3', 3, 4, 0);
insert into script_items values(11, 4, 'Item 1:1', 0, 0, 8);
insert into script_items values(12, 4, 'Item 1:2', 0, 0, 8);
insert into script_items values(13, 4, 'Item 2:1', 0, 0, 9);
insert into script_items values(14, 4, 'Item 2:2', 0, 0, 9);
insert into script_items values(15, 4, 'Item 3:1', 0, 0, 10);
insert into script_items values(16, 4, 'Item 3:2', 0, 0, 10);
insert into script_styles values(3, 'bartitle', '[110,25]', '#6C86DC', '#ffffff',
	'"img/title_bg.gif"', '{"color":"#C0C0C0","width":1}',
	'{"color":"#000000","width":1}', '', '',
	'{ "src":"img/arr_down.gif", "width":24, "height":24}',
	'{ "src":"img/arr_up.gif", "width":24, "height":24}',
	300, 110, "", "");
insert into script_styles values(4, 'bartitleover', '', '', 'yellow', '"img/title_bg.gif"',
	'', '', '', '',
	'{ "src":"img/arr_down_over.gif", "width":24, "height":24}',
	'{ "src":"img/arr_up_over.gif", "width":24, "height":24}',
	0, 0, "", "");
insert into script_styles values(7, 'bartitleover', '', '#265BCC', '#ffffff', '', '', '', '', '',
	'', '', 0, 0, "", "");
insert into script_styles values(8, '', '[110,25]', '#D6DFF7', '', '""', '""',
	'{"color":"#ffffff","width":1}', '', '', '""',
	'""', 0, 0, "", '{ "x":5, "y":1 }');
insert into script_styles values(9, '', '', '', '', '""', '""', '""', '', '', '""', '""',
	0, 0, "", '');

Of course, when you create your real CodeThatXPBar script, tables will contain more information.

Next step - we create .php script. Result of this script implementation is a string variable that contains full menu definition:

$StrQuery1 = "select distinct bgimg " .
	" from script_styles, script_items where " .
	" script_styles.style_id = script_items.style_id " .
	" and script_items.item_parent_id=0 and script_id=4";
$result1 = db_query($StrQuery1);
$res_num1 = db_numrows($result1);
$Error = mysql_error($db);
if ($Error != "")
{
	echo "$Error";
	exit();
}
if ($res_num1 != 0)
{
	$style_item = '"style":{"bgimg":' . db_result($result1, 0, 'bgimg') . '} ';
}
$StrQuery1 = "select distinct bgimg, size, bgcolor, shadow, border, itemoffset " .
	" from script_styles where script_styles.style_id = 8";
$result1 = db_query($StrQuery1);
$res_num1 = db_numrows($result1);
$Error = mysql_error($db);
if ($Error != "")
{
	echo "$Error";
	exit();
}
if ($res_num1 != 0)
{
	$menu_style = '"style":{"bgimg":' . db_result($result1, 0, 'bgimg') .
		',"size":' . db_result($result1, 0, "size") . ', ' .
		'"bgcolor":"' . db_result($result1, 0, "bgcolor") . '", ' .
		'"shadow":' . db_result($result1, 0, "shadow") . ', ' .
		'"border":' . db_result($result1, 0, "border") . ', ' .
		'"itemoffset":' . db_result($result1, 0, "itemoffset") . '}';
}
$StrQuery1 = "select distinct bgimg, imgendon, imgendoff " .
	" from script_styles where script_styles.style_id = 9";
$result1 = db_query($StrQuery1);
$res_num1 = db_numrows($result1);
$Error = mysql_error($db);
if ($Error != "")
{
	echo "$Error";
	exit();
}
if ($res_num1 != 0)
{
	$menu_style = $menu_style . ', "itemover":{"bgimg":' .
		db_result($result1, 0, 'bgimg') .
		',"imgendon":' . db_result($result1, 0, "imgendon") . ', ' .
		'"imgendoff":' . db_result($result1, 0, "imgendoff") . '}';
}

function create_level($parent_id)
{
	global $style_item, $menu_style;
	$items = '';
	$StrQuery = "select item_id, item_name from script_items " .
		" where script_id=4 and item_parent_id=" . $parent_id;
	$result = mysql_query($StrQuery);
	$Error = @mysql_error($db);
	if ($Error != "")
	{
		echo "$Error";
		exit();
	}
	$first = 1;
	while (list($item_id, $item_name) = mysql_fetch_row($result))
	{
		if ($first == 1)
		$first = 0;
		else
		$items .= ",";
		$next_level = create_level($item_id);
		if ($next_level == "")
		{
			$items .= '{"text":"' . $item_name . '"';
			$items .= $next_level;
			$items .= "} ";
		}
		else
		{
			$items .= '{"text":"' . $item_name . '", ' . $style_item . ', ' .
			'"menu":{ ' . $menu_style . ', '.
			'"items":[';
			$items .= $next_level;
			$items .= "]}}";
		}
	}
	return ($items);
}

function create_definition()
{
	global $db;
	$definition = "";
	$StrQuery = "select distinct css, size, bgcolor, color, bgimg, " .
		" shadow, border, imgitem, imgdir, " .
		" imgendon, imgendoff, fixheight " .
		" from script_styles, script_items where " .
		" script_styles.style_id = script_items.style_id " .
		" and script_items.item_parent_id=0 and script_items.script_id=4";
	$result = db_query($StrQuery);
	$res_num = db_numrows($result);
	$Error = mysql_error($db);
	if ($Error != "")
	{
		echo "$Error";
		exit();
	}
	if ($res_num != 0)
	{
		$definition = $definition . 'var BarDef = {"style"	: {"css" : "' .
			db_result($result, 0, "css") . '", ' .
			'"size":' . db_result($result, 0, "size") . ', ' .
			'"bgcolor":"' . db_result($result, 0, "bgcolor") . '", ' .
			'"shadow":' . db_result($result, 0, "shadow") . ', ' .
			'"border":' . db_result($result, 0, "border") . ', ' .
			'"fixheight":' . db_result($result, 0, "fixheight") . ', ' .
			'"imgendon":' . db_result($result, 0, "imgendon") . ', ' .
			'"itemoffset":{ "x":5, "y":10 }, ' .
			'"imgendoff":' . db_result($result, 0, "imgendoff") . '}';
	}
	$StrQuery = "select distinct css, bgcolor, color, bgimg, shadow, border, " .
		" imgitem, imgdir, imgendon, imgendoff, bgimg " .
		" from script_styles, script_items where " .
		" script_styles.style_id = script_items.style_over_id " .
		" and script_items.item_parent_id=0 and script_id=4";
	$result = db_query($StrQuery);
	$res_num = db_numrows($result);
	$Error = mysql_error($db);
	if ($Error != "")
	{
		echo "$Error";
		exit();
	}
	if ($res_num != 0)
	{
		$definition = $definition . ', "itemover": { "css" : "' .
			db_result($result, 0, 'css') . '", ' .
			'"bgcolor":"' . db_result($result, 0, 'bgcolor') . '", ' .
			'"bgimg":' . db_result($result, 0, 'bgimg') . ', ' .
			'"imgendon":' . db_result($result, 0, "imgendon") . ', ' .
			'"imgendoff":' . db_result($result, 0, "imgendoff") . ', ' .
			'"itemoffset":{ "x":5, "y":10 }' . '} ';
	}
	$StrQuery = "select distinct bgcolor, color " .
		" from script_styles, script_items where " .
		" script_styles.style_id = script_items.style_on_id " .
		" and script_items.item_parent_id=0 and script_id=4";
	$result = db_query($StrQuery);
	$res_num = db_numrows($result);
	$Error = mysql_error($db);
	if ($Error != "")
	{
		echo "$Error";
		exit();
	}
	if ($res_num != 0)
	{
		$definition = $definition . ', "itemon": { "' .
			'bgcolor":"' . db_result($result, 0, 'bgcolor') . '", ' .
			'"color":"' . db_result($result, 0, 'color') . '"} ';
	}
	$definition = $definition . ', "position": { "absolute": false, "pos":[30,20] } ';
	$items = ', "items" : [ ';
	$items = $items . create_level(0);
	$items = $items . ' ] ';
	$definition = $definition . $items . " };";
	return $definition;
}

And finally we complete a web page for XPBar script:

<php
echo '<HEAD><link href="/common_codethat.css" rel="stylesheet" type="text/css"> ' .
	'<script language="javascript1.2" src="' .
	site_url . 'codethatsdk.js"></script> ' .
	'<script language="javascript1.2" src="' .
	site_url . 'xpbar/codethatxpbarpro.js"></script> ' .
	'<script language="javascript1.2"> ' .
	. create_definition() . '</script> </head>'; 
?>

<body bgcolor="#ffffff">

<script language="javascript1.2">
<!--

var barTest1 = new CXPBar(BarDef, 'barTest1');
barTest1.create();
barTest1.run(); 

//-->
</script>
</body>
</html>

CODETHATXPBAR USER MANUAL

XPBar Generation from the Database

Example - XPBar Generation from the Database