button - リストボックス行からウィンドウを表示するボタン

Question

クリックしたときにリストボックス内の要素の詳細を表示するウィンドウを表示できるボタンを作成したいと思います。リストボックスitsetfは、次のようなJSONObjectのリストから作成されました。

<listbox id="userListbox">
<listhead>
    <listheader laber="Action"></listheader>
    <listheader label="Id"></listheader>
    <listheader label="Name"></listheader>
    <listheader label="Address"></listheader>
    <listheader label="Phone"></listheader>
</listhead>
<listitem forEach="${userController.list}">
    <listcell>
        <button label="Detail"  id="detailButton"></button>
    </listcell>
    <listcell label="${each.id}" ></listcell>
    <listcell label="${each.name}" ></listcell>
    <listcell label="${each.address}" ></listcell>
    <listcell label="${each.phone}" ></listcell>
</listitem>
</listbox>

すべての行（リストセル）には、詳細を表示するためのボタンが常にあります。しかし、ページをロードすると、エラーメッセージが表示されたリストが表示されませんでした。

IDスペースで一意ではありません<ウィンドウcP8Q0＃userWindow>：detailButton。

ボタンがクリックされたときにウィンドウを表示するアイデアはありますか？ボタンがクリックされたときのコードは次のとおりです。

@Listen("onClick = #detailButton")
public void showModal(Event event) {
    Component comp = Executions.createComponents("/widgets/window/modal_dialog/employee_dialog.zul", null, null);

    if(comp instanceof Window) {
        ((Window)comp).doModal();
    }
}

ご協力ありがとうございました。

Answer 1

問題は、別のボタンをクリックすると、createComponentsが何度も実行されていることです。employee_dialog.zulは、IDが含まれているため、ページに1回だけ含めることができます。操作を2回実行すると、同じIDを持つコンポーネントの2番目のセットが作成され、IDは特定のidSpace内で一意である必要があります（理論については、ZK開発者ガイドを参照してください）。

ここには他の問題があります：なぜコンポーネントを2回作成するのですか？ボタンのクリックに基づいて表示と非表示を切り替えて、1つだけのセットを維持してみませんか。それはより効率的です。

ボタンを見て 、リストボックスの行からウィンドウを表示します。これは、次のことができることを示しています。

<zk>
    <!-- hidden -->
    <window id="wnd" title="My Modal" visible="false" width="300px">
        <button label="close" onClick="wnd.visible = false"/>
    </window>
    <!-- click button to pop the hidden window! -->
    <button label="do it" onClick="wnd.doModal()"/>
</zk>

だからあなたは使用することができます

<include src="/widgets/window/modal_dialog/employee_dialog.zul">

モデルダイアログをメインページの下部に一度だけプルします。次に、コードでデータを設定して実行できます

win1.doModal(); 

ここで、win1はフラグメントで定義されたモーダルウィンドウです。ポップする前にモデルウィンドウに何を表示するかを指示する必要がありますが、それは難しいことではありません。desktopScope.put（ "myName"、this）を使用して、ダイアログボックスのコントローラー/ビューモデルを、メインウィンドウのコントローラー/ビューモデルが見つけて通信できる場所に登録します。レンダリングするデータ。

他の2つのヒント。

1. フラグメントを/WEB-INF/zul/employee_dialog.zulとして非表示にします。これは、セキュリティを強化するために、ブラウザからWEB-INFの下にあるものに直接アクセスできないためです。
2. Javaにzulを入れないようにしてください。それは、行動とプレゼンテーションの混合です。避けられない場合もありますが、常に最初にzulをzulに保持してから、Java IDのみを介して対話するようにしてください（私の提案のように）。常に可能であるとは限りませんが、ロジックをレイアウトから分離することがコアデザインパターンです。

サイモン

Answer 2

<button label="Detail" />
@Listen("onClick = listbox listitem listcell button")