index.zul

ZK是一个Ajax Java Web框架

<?xml version="1.0" encoding="UTF-8"?>
<!--
index.zul

{{IS_NOTE
	Purpose:
		
	Description:
		
	History:
		Tue Nov 11 12:27:05     2008, Created by jumperchen
}}IS_NOTE

Copyright (C) 2008 Potix Corporation. All Rights Reserved.

{{IS_RIGHT
}}IS_RIGHT
-->
<?page id="userGuide" title="ZK Live Demo"?>
<?init class="org.zkoss.zkdemo.userguide.MainLayoutInit" ?>
<?link  rel="stylesheet" type="text/css" href="~./zul/css/ext.css.dsp"?>
<?component name="category" inline="true" macroURI="/userguide/macros/category.zul"?>
<?component name="categorybar" extends="div" moldURI="/userguide/macros/categorybar.dsp"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
<zk>
<script><![CDATA[

// Fix IE6 Graphics
if (zk.ie6Only) {	
	//a small transparent image used as a placeholder
	var BLANK_GIF = '${c:encodeURL('~./img/spacer.gif')}';
	var ALPHA_IMAGE_LOADER = "DXImageTransform.Microsoft.AlphaImageLoader";
	var PNG_FILTER = "progid:" + ALPHA_IMAGE_LOADER + "(src='%1',sizingMethod='%2')";
	
	// these file name should be fixed
	var FILE_NAME = "24x24.png|32x32.png|48x48.png|128x128.png|ButtonBlue.png|ButtonGray.png|small.png|small-sel.png"
				  + "|normal.png|normal-sel.png|large.png|large-sel.png";
	
	//regular expression version of the above
	var PNG = new RegExp(String(FILE_NAME).replace(/([\/()[\]{}*+-.,^$?\\])/g, "\\$1"), "i");
	var filtered = [];

	function fixImage(element) {
		// we have to preserve width and height
		var image = new Image(element.width, element.height);
		image.onload = function() {
			element.width = image.width;
			element.height = image.height;
			image = null;
		};
		image.src = element.src;
		// store the original url (we'll put it back when it's printed)
		element.pngSrc = element.src;
		// add the AlphaImageLoader thingy
		addFilter(element);
	};
	var printing = false;
	zk.listen(window, "beforeprint", function() {
		printing = true;
		for (var i = 0; i < filtered.length; i++) removeFilter(filtered[i]);
	});
	zk.listen(window, "afterprint", function() {
		for (var i = 0; i < filtered.length; i++) addFilter(filtered[i]);
		printing = false;
	});
	
	//apply a filter
	function addFilter(element, sizingMethod) {
		var filter = element.filters[ALPHA_IMAGE_LOADER];
		if (filter) {
			filter.src = element.src;
			filter.enabled = true;
		} else {
			element.runtimeStyle.filter = format(PNG_FILTER, element.src, sizingMethod || "scale");
			filtered.push(element);
		}
		//remove the real image
		element.src = BLANK_GIF;
	};
	function format(string) {
		// Replace %n with arguments[n].
		// e.g. format("%1 %2%3 %2a %1%3", "she", "se", "lls");
		// ==> "she sells sea shells"
		// Only %1 - %9 supported.
		var args = arguments;
		var _FORMAT = new RegExp("%([1-" + arguments.length + "])", "g");
		return String(string).replace(_FORMAT, function(match, index) {
			return index < args.length ? args[index] : match;
			});
	};
	function removeFilter(element) {
		element.src = element.pngSrc;
		element.filters[ALPHA_IMAGE_LOADER].enabled = false;
	};
	zk.addInit(function(){fixImage4IE6();});
	function fixImage4IE6() {
		var images = document.getElementsByTagName("img");
		for (var len = images.length; --len >= 0; ) {
			if (PNG.test(images[len].src)) {
				fixImage(images[len]);
				zk.listen(images[len], "propertychange", function() {
			   	if (!printing && event.propertyName == "src" &&
			   			event.srcElement.src.indexOf(BLANK_GIF) == -1 &&
			   			PNG.test(event.srcElement.src)) fixImage(event.srcElement);
			 	});
			}
		}
	};
}
]]></script>
<script><![CDATA[
function onSelect(cmp, deselect) {
	var parent = cmp.parentNode;
	for (var cn = zk.childNodes(parent, zkCategoryBar._isLegalType), len = cn.length; --len >= 0;) {
		if (!deselect && cn[len] == cmp)
			zk.addClass(cn[len], "demo-seld");
		else
			zk.rmClass(cn[len], "demo-seld");
	}
	if (!deselect) zkCategoryBar.onScrollTo(cmp);
}
zkCategoryBar = {
	init: function (cmp) {
		zk.disableSelection(cmp);
		zk.listen($e(cmp, "right"), "mouseover", this.onClickArrow);
		zk.listen($e(cmp, "right"), "mouseout", this.stop);
		zk.listen($e(cmp, "left"), "mouseover", this.onClickArrow);
		zk.listen($e(cmp, "left"), "mouseout", this.stop);
	},
	onSize: function (cmp) {
		var body = $e(cmp, "body");
		this._forceStyle(cmp, "");
		this._forceStyle(body, "");
		if (zk.ie6Only) {
			this._forceStyle(cmp, zk.revisedSize(cmp, 
					$int(cmp.parentNode.parentNode.style.width) - zk.previousSibling(cmp, "DIV").offsetWidth) + "px");
		} else {
			this._forceStyle(cmp, zk.revisedSize(cmp, cmp.offsetWidth) + "px");	
		}
		this._forceStyle(body, zk.revisedSize(body, cmp.offsetWidth) + "px");
		this._checkScrolling(cmp, body);
	},
	_forceStyle: function (cmp, value) {
		cmp.style.width = zk.ie6Only ? "0px" : "";
		cmp.style.width = value;
	},
	_isLegalType: function (n) {return (n.id);},
	_checkScrolling: function (cmp, body) {
		var cave = $e(cmp, "cave"),
		 	chd = zk.childNodes(cave, zkCategoryBar._isLegalType),
		 	headwidth = body.offsetWidth,
		 	chdwidth = 0;
		chd.forEach(function(n) { chdwidth += $int(n.offsetWidth) + 2;});
		
		if (cmp._scrolling) {
			if (chdwidth <= (headwidth)) {
				cmp._scrolling = false;
				this._fixButton(cmp);
				body.scrollLeft = 0;
			} else {
				var size = body.offsetWidth - $e(cmp, "right").offsetWidth
				- $e(cmp, "left").offsetWidth - 4;
				if (size < 0) size = 0;
				body.style.width = size + "px";
			}
		} else {
			if (chdwidth > (headwidth - 10)) {
				cmp._scrolling = true;
				this._fixButton(cmp);
				var size = body.offsetWidth - $e(cmp, "right").offsetWidth
					- $e(cmp, "left").offsetWidth - 4;
				if (size < 0) size = 0;
				body.style.width = size + "px";
				cave.style.width = "5000px";
			}
		}
	},
	_fixButton : function(cmp) {
		var zcls = getZKAttr(cmp, "zcls");
		zk[cmp._scrolling ? "addClass" : "rmClass"]($e(cmp, "body"), zcls + "-body-scroll");
		zk[cmp._scrolling ? "addClass" : "rmClass"]($e(cmp, "right"), zcls + "-right-scroll");
		zk[cmp._scrolling ? "addClass" : "rmClass"]($e(cmp, "left"), zcls + "-left-scroll");
	},
	onScrollTo: function (cmp) {
		var parent = $outer(cmp.parentNode),
			body = $e(parent, "body"),
			osl = cmp.offsetLeft,
			tosw = cmp.offsetWidth,
			scl = body.scrollLeft,
			hosw = body.offsetWidth;
		if (osl < scl) {
			this.scroll(parent, scl - osl + 2, false, false, true);
		} else if (osl + tosw > scl + hosw) {
			this.scroll(parent, osl + tosw - scl - hosw + 2, false, true, true);			
		}
	},
	onClickArrow: function (evt) {
		var btn = zkau.evtel(evt),
			cmp = $outer(btn),
			body = $e(cmp, "body"),
			chd = zk.childNodes($e(cmp, "cave"), zkCategoryBar._isLegalType),
			scl = body.scrollLeft;
		if (!chd.length) return;
		
		if (btn.id.endsWith("!right")) {
			var hosw = body.offsetWidth;
			for (var i = 0, count = chd.length; i < count; i++) {
				if (chd[i].offsetLeft + chd[i].offsetWidth > scl + hosw) {
					move = chd[i].offsetLeft + chd[i].offsetWidth - scl - hosw + 2;
					if (move == 0 || move == null || isNaN(move))
						return;
					zkCategoryBar.scroll(cmp, move, btn, true);
					return;
				};
			};
		} else { //Scroll to next left tab
			if (scl == chd[0].offsetLeft) {
				clearInterval(zkCategoryBar.run);
				return;
			}
			for (var i = 0, count = chd.length; i < count; i++) {
				if (chd[i].offsetLeft > scl) {
					if (zk.previousSibling(chd[i], "DIV") == null)  return;
					move = scl - zk.previousSibling(chd[i], "DIV").offsetLeft + 2;
					if (isNaN(move)) return;
					zkCategoryBar.scroll(cmp, move, btn);
					return;
				};
			};
			move = scl - chd[chd.length-1].offsetLeft + 2;
			if (isNaN(move)) return;
			zkCategoryBar.scroll(cmp, move, btn);
		}
	},
	stop: function () {
		clearInterval(zkCategoryBar.run);
	},
	scroll: function(cmp, move, btn, isRight, stopPropagate) {
		if (move <= 0) return;
		var step, body = $e(cmp, "body");
		step = move <= 60 ? 5 : eval(5 * ($int(move / 60) + 1));
		clearInterval(zkCategoryBar.run);
		zkCategoryBar.run = setInterval(function() {
			if (move == 0) {
				if (!stopPropagate)
					zkCategoryBar.onClickArrow(btn);
				else clearInterval(zkCategoryBar.run);
				return;
			} else {
				move < step ? zkCategoryBar.goscroll(body, isRight, move) :
						zkCategoryBar.goscroll(body, isRight, step);
				move = move - step;
				move = move < 0 ? 0 : move;
			}
		}, 20);
	},
	goscroll: function(body, isRight, step) {
		body.scrollLeft = isRight ? (body.scrollLeft + step) : (body.scrollLeft - step);
		body.scrollLeft = (body.scrollLeft <= 0 ? 0 : body.scrollLeft);
	}
};
]]></script>
<style>
body {
	padding: 0 !important;
}
h4 {
	margin: 0;
	padding: 10px 0;
}
P {
	margin: 0;
	padding: 5px 0;
}
ul {
	margin-top: 5px;
	margin-bottom: 5px;
}
a, a:visited {
	color:#008bb6;
}
ul li	{list-style: url(${c:encodeURL(c:browser('ie6-') ? '/img/z-bullet1.gif' : '/img/Centigrade-Widget-Icons/Bullet-10x10.png')}) disc}
ul ul li	{list-style: url(${c:encodeURL('/img/z-bullet2.gif')}) circle}
ul ul ul li	{list-style: url(${c:encodeURL('/img/z-bullet3.gif')}) square}
.demo-header .z-north-body {
	background:transparent url(${c:encodeURL( c:property('org.zkoss.zkdemo.theme.cookie') != 'silvergray' ? '/img/category-bg.png' : '/img/Centigrade-Widget-Icons/GradientGray.png')}) repeat-x scroll 0 0;
}
.demo-categorybar {
	position: relative;
	overflow: hidden;
	${c:browser('ie6-') ? 'float: left;' : ''}
}
.demo-categorybar-body {
	margin: 0px;
	width: 100%;
	overflow: hidden;
	zoom: 1;
}
.demo-categorybar-body-scroll {
	position: relative;
	margin-left: 20px;
	margin-right: 20px;
}
.demo-categorybar-right-scroll {
	background-color: transparent;
	background-image: url(${c:encodeURL( c:property('org.zkoss.zkdemo.theme.cookie') != 'silvergray' ? '/img/scroll-right.png' : '/img/g-scroll-right.png')});
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: 0 0;
	border-bottom:1px solid ${c:property('org.zkoss.zkdemo.theme.cookie') != 'silvergray' ? '#8DB2E3' : '#B7B7B7'};
	cursor:pointer;
	position:absolute;
	right:0;
	top:37px;
	width:18px;
	z-index:10;
	height:25px;
}
.demo-categorybar-right-scroll:hover {
	background-position:-18px 0;
}
.demo-categorybar-left-scroll {
	background-color: transparent;
	background-image: url(${c:encodeURL( c:property('org.zkoss.zkdemo.theme.cookie') != 'silvergray' ? '/img/scroll-left.png' : '/img/g-scroll-left.png')});
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: -18px 0;
	border-bottom:1px solid ${c:property('org.zkoss.zkdemo.theme.cookie') != 'silvergray' ? '#8DB2E3' : '#B7B7B7'};
	cursor:pointer;
	left:0;
	position:absolute;
	top:37px;
	width:18px;
	z-index:10;
	height:25px;
}
.demo-categorybar-left-scroll:hover {
	background-position:0px 0;
}
.demo-seld {
	background:transparent url(${c:encodeURL(c:property('org.zkoss.zkdemo.theme.cookie') != 'silvergray' ? '/img/category-seld.png' : '/img/g-category-seld.png')}) no-repeat scroll 0 0;
}
.demo-over.demo-seld {
	background:transparent url(${c:encodeURL(c:property('org.zkoss.zkdemo.theme.cookie') != 'silvergray' ? '/img/category-over-seld.png' : '/img/g-category-over-seld.png')}) no-repeat scroll 0 0;
}
.demo-over {
	background:transparent url(${c:encodeURL(c:property('org.zkoss.zkdemo.theme.cookie') != 'silvergray' ? '/img/category-over.png' : '/img/g-category-over.png')}) no-repeat scroll 0 0;
}
.demo-search-inp {
    padding: 2px 0 1px 18px;
	background: white url(${c:encodeURL(c:browser('ie6-') ? '/img/search.gif' : '/img/search.png')}) no-repeat scroll 0 0;
}
.demo-category {
	margin-top: 10px; float:left; height: 80px; width: 90px;
	text-align:center;
}
.demo-category-img {
	width: 48px;
	height: 48px;
}
.demo-category-text {
	color: #1c5178; font-size:10px
}
.demo-logo {
	padding: 10px 10px 0 10px;
	float:left;
}
.demo-items {
	border: none; background: white;
}
.demo-items .z-listbox-body {
	overflow-x: hidden;
}
.demo-items .z-list-cell-cnt img {
	width:24px;
	height:24px;
}
.demo-items .z-list-cell-cnt {
	padding-left: 5px;
}
.demo-main-cnt {
	padding-left: 5px;
}
.demo-main-desc {
	padding-bottom: 5px;
}
.pointer {
	cursor:pointer;
}
</style>
<borderlayout id="main" apply="org.zkoss.zkdemo.userguide.MainLayoutComposer">
	<north border="none" size="100px" sclass="demo-header" collapsible="true">
		<div>
			<div sclass="demo-logo pointer" onClick='Executions.sendRedirect("http://www.zkoss.org")'>
				<image width="90px" height="80px" src="/img/ZK-Logo.gif"/>
			</div>
			<categorybar zclass="demo-categorybar" id="header">
				<category forEach="${main.categories}" id="${each.id}" src="${each.icon}" label="${each.label}"/>
			</categorybar>
		</div>
	</north>
	<west title="ZK ${desktop.webApp.version} Live Demo" size="250px" flex="true" splittable="true"
		minsize="210" maxsize="500" collapsible="true">
		<panel>
			<toolbar>
				<label value="Search:"/><textbox id="searchBox" ctrlKeys="#down#up" focus="true" sclass="demo-search-inp"/>
			</toolbar>
			<panelchildren>
				<listbox id="itemList" oddRowSclass="non-odd" sclass="demo-items"
					itemRenderer="${main.itemRenderer}" model="${main.selectedModel}" fixedLayout="true" vflex="true">					
				</listbox>
			</panelchildren>
		</panel>
	</west>
	<center autoscroll="true" flex="true">
		<include style="padding:3px;" id="xcontents" />
	</center>
</borderlayout>
<script if="${desktop.execution.serverName == &quot;www.zkoss.org&quot; or desktop.execution.serverName == &quot;www.potix.com&quot;}">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script if="${desktop.execution.serverName == &quot;www.zkoss.org&quot; or desktop.execution.serverName == &quot;www.potix.com&quot;}">
var pageTracker = _gat._getTracker("UA-121377-3");
pageTracker._setDomainName("zkoss.org");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</zk>