Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
 | 1 | initial version | |
Hello,
i have a zhtml layout derived from a customers HTML/CSS corporate design. When i add ZK-components directly to the zhtml the page is rendered fine. Meta-tags and CSS links are in head and head contains the ZK CSS/JS stuff as expected:
<head>
<title>Event Planner</title>
<link rel="shortcut icon" href="resources/images/images_admin/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta name="META_SEARCH" content="1">
<meta name="robots" content="noodp">
<link rel="stylesheet" type="text/css" href="resources/css/basic.css">
<link href="eventplanner/zkau/web/ac292a86/zul/css/zk.wcs" type="text/css" rel="stylesheet">
<link href="eventplanner/zkau/web/ac292a86/silvergray/img.css.dsp" type="text/css" rel="stylesheet">
<link href="eventplanner/zkau/web/ac292a86/silvergray/color.css.dsp" type="text/css" rel="stylesheet">
<script charset="UTF-8" src="/eventplanner/zkau/web/ac292a86/js/zk.wpd" type="text/javascript">
<script charset="UTF-8" src="/eventplanner/zkau/web/ac292a86/js/zul.lang.wpd" type="text/javascript">
<script type="text/javascript">
<script type="text/javascript" charset="UTF-8" src="/eventplanner/zkau/web/_zv2011102015/js/zul.wnd.wpd">
<script type="text/javascript" charset="UTF-8" src="eventplanner/zkau/web/_zv2011102015/js/zul.box.wpd">
<script type="text/javascript" charset="UTF-8" src="/eventplanner/zkau/web/_zv2011102015/js/zul.inp.wpd">
<script type="text/javascript" charset="UTF-8" src="/eventplanner/zkau/web/_zv2011102015/js/zul.sel.wpd">
<script type="text/javascript" charset="UTF-8" src="eventplanner/zkau/web/_zv2011102015/js/zk.fmt.wpd">
<script type="text/javascript" charset="UTF-8" src="eventplanner/zkau/web/_zv2011102015/js/zul.mesh.wpd">
</head>
When i use the same zhtml as template and add the zk components by
<h:div id=" box_navTop " self="@{insert(topnav)}"></h:div>
all meta-tags and links of the ZHTML-template are rendered not in head but in the first div of the body:
...
<body class="gecko gecko8">
<div id="aJzP5" style="width:100%;height:100%;">
<title>Event Planner</title>
<link rel="shortcut icon" href="resources/images/images_admin/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta name="META_SEARCH" content="1">
<meta name="robots" content="noodp">
<link rel="stylesheet" type="text/css" href="resources/css/basic.css">
<a shape="rect" name="top"></a>
The css is recogniced but renders different in firefox and shows for a short time the plain HTML without CSS.
How is it possible to leave the original template head in the head of the rendered page? Is this a bug or is there some kind of workaround?
template code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.zkoss.org/2005/zk/native"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:zk="http://www.zkoss.org/2005/zul">
<head>
<title>Event Planner</title>
<link href="resources/images/images_admin/favicon.ico" rel="shortcut icon"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta content="IE=7" http-equiv="X-UA-Compatible"/>
<meta content="1" name="META_SEARCH"/>
<meta content="noodp" name="robots"/>
<link href="resources/css/basic.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<!-- START Header -->
<a name="top"></a>
<div id="frame_header">
<div class="logo">
</div>
<div class="box_meta">
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<!-- START TopNav -->
<h:div id=" box_navTop " self="@{insert(topnav)}"></h:div>
...
ZUL-code
<?init class="org.zkoss.zk.ui.util.Composition" arg0="resources/layout/template.zhtml"?>
<zk:zk xmlns="http://www.zkoss.org/2005/zk/native"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:zk="http://www.zkoss.org/2005/zul">
<!-- TOP NAV -->
<h:ul class="navTop" self="@{define(topnav)}">
<li class="top">
<a class="top_link active" href="overview.zhtml">
<span>Overview</span>
</a>
</li>
<li class="top">
<a href="eventlist.zhtml" class="top_link">
<span>Eventlist</span>
</a>
</li>
<li class="top">
<a href="detailview.zhtml" class="top_link">
<span>Detailview</span>
</a>
</li>
</h:ul>
<zk:div self="@{define(content)}">
<zk:window
apply="
de.empego.eventplanner.web.eventlist.EventListFilterComposer ">
<fieldset style="padding:15px 30px">
<zk:label>Title</zk:label>
<zk:combobox id="eventTitle" autodrop="true"
buttonVisible="true" ></zk:combobox>
<zk:label>Event type</zk:label>
<zk:listbox id="eventType" rows="1" mold="select">
<zk:listitem label="All" value="" ></zk:listitem>
<zk:listitem label="New product"
value="NEW_PRODUCT" ></zk:listitem>
<zk:listitem label="Product modification"
value="PRODUCT_MODIFICATION" ></zk:listitem>
<zk:listitem label="Product optimization"
value="PRODUCT_OPTIMIZATION" ></zk:listitem>
<zk:listitem label="Service Tool"
value="SERVICE_TOOL" ></zk:listitem>
</zk:listbox>
<zk:label>Period</zk:label>
<zk:combobox id="eventPeriod" autodrop="true"
buttonVisible="true" ></zk:combobox>
<zk:button id="applyButton">Apply</zk:button>
</fieldset>
</zk:window>
</zk:div>
</zk:zk>