<window border="normal" title="hello" apply="org.zkoss.bind.BindComposer" 

            viewModel="@id('vm') @init('pkg$.TestViewModel')">

    <div  width="100%" height="100%" style="background-color:#E7F9FF;">

            <hbox width="100%" height="280px" style="background-color:red;" widths="50%,50%" spacing="0">

                <vbox width="100%" align="center" height="100%" style="border-width:3px;border-color:#B0EBFF;border-style: ridge;background-color:#E7F9FF;">

                    <separator spacing="5px" style="background-color:#E7F9FF;"/>

                    <label value="Contatti in Rubrica" style="margin:20px 2px 5px 15px;font:italic bold 12px Georgia,arial,sans-serif;text-shadow: 0.1em 0.1em 0.2em #C5C1BF"/> 

                    <separator spacing="5px" style="background-color:#E7F9FF;"/>

                    <listbox id="left" width="100%" model="@load(vm.contacts)" height="200px" draggable="true" droppable="true" onDrop="@command('move')">                      

                        <listhead>

                            <listheader label="Contatto" align="center"  />

                        </listhead>

                        <template name="model" var="contact">

                            <listitem value="@bind(contact)" draggable="true" droppable="true" onDrop="@command('move')">

                                <listcell src="/img/contact-icon_x32.jpg" label="@load(contact.surname.concat(' ').concat(contact.name))" />

                            </listitem>

                        </template>

                    </listbox>

                </vbox>

                <vbox width="100%" align="center" height="100%" style="border-width:3px;border-color:#B0EBFF;border-style: ridge;background-color:#E7F9FF;"> 

                    <separator spacing="5px" style="background-color:#E7F9FF;"/>

                    <label width="100%" value="Tasti Rapidi Configurati" style="font:italic bold 12px Georgia,arial,sans-serif;text-shadow: 0.1em 0.1em 0.2em #C5C1BF"/>                

                    <separator spacing="5px" style="background-color:#E7F9FF;"/>

                    <listbox width="100%" id="right" model="@load(vm.contactsQuickKey)" height="250px" draggable="true" droppable="true" onDrop="@command('move')" >

                        <listhead>

                            <listheader label="Etichetta" align="center"  />

                            <listheader label="Contatto" align="center"  />

                        </listhead>

                        <template name="model" var="contactQuickKey">

                            <listitem value="@bind(contactQuickKey)" draggable="true" droppable="true" onDrop="@command('move')">

                                <listcell>                                    

                                    <textbox width="90%" value="@load(contactQuickKey.label) @save(contactQuickKey.label, before={'move', 'saveData'})"/>

                                </listcell>

                                <listcell src="/img/contact-icon_x32.jpg" label="@load(contactQuickKey.contact.surname.concat(' ').concat(contactQuickKey.contact.name))" />

                            </listitem>

                        </template>

                    </listbox>

                </vbox>

            </hbox>

            <separator spacing="10px" style="background-color:#E7F9FF;"/>

            <hbox align="center" pack="center" width="100%" style="background-color:#E7F9FF;">

                <button label="Salva" mold="trendy" onClick="@command('saveData')" />

            </hbox> 

        </div> 

  </window>

</zk>

​