Hybris (7) Cockpit

Submitted by Lizhe on Fri, 02/01/2019 - 21:46

 

使用 ant 命令创建一个 基于 cockpit 模板的 extension

然后你会在发现webroot下终于出现了一个可用的 index.zul

20190202035724

原来的 index.zul 会使用 hybris 的 component 类创建一个空页面, 这里我们做一下改动, 来看看 ZK 到底能干些什么

<?xml version="1.0" encoding="UTF-8"?>

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>

<?page title="Lizhebuglistcockpit" ?>

<div width="100%" height="100%" style="overflow: hidden;">

<!--  custom styles in here -->

<style src="/cockpit/css/cockpit.css" /> 

<style src="/lizhebuglistcockpit/css/lizhebuglistcockpit.css" />

<include src="/cockpit/commonCSA.zul" visible="false"/>

<include src="/lizhebuglistcockpit/lizhebuglistcockpitCSA.zul" visible="false"/>

<div class="lizhebuglistcockpit" style="">

<window title="My First ZK Application" border="normal">

    <label value="Hello World!"/>

    <button label="Say Hello" onClick='Messagebox.show("Hello World!")'/>

</window>

</div>

</div>

20190202035148

稍微改动一下, 试试取值

<?xml version="1.0" encoding="UTF-8"?>

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>

<?page title="Lizhebuglistcockpit" ?>

<div width="100%" height="100%" style="overflow: hidden;">

 

<!--  custom styles in here -->

<style src="/cockpit/css/cockpit.css" /> 

<style src="/lizhebuglistcockpit/css/lizhebuglistcockpit.css" />

 

<include src="/cockpit/commonCSA.zul" visible="false"/>

<include src="/lizhebuglistcockpit/lizhebuglistcockpitCSA.zul" visible="false"/>

 

<div class="lizhebuglistcockpit" style="">

<window title="My First ZK Application" border="normal">

    <label value="Hello World!"/>

    <button label="Say Hello" onClick='Messagebox.show("Hello World!")'/>

    <button label="Say Hi" onClick='sayHi("Hiiiiiiiiii")'/>

    <zscript>

    void sayHi(String message){ 

Messagebox.show(message);

}

    </zscript>

    Enter a property name: <textbox/><button label="Retrieve" onClick="alert(System.getProperty(self.getPreviousSibling().getValue()))"/>

</window>

</div>

</div>

20190202055602

 

20190212051113