Pass value from viewmodel to script in zk

Question

I am trying to use PDFObject to show the pdf files inline. The application may contain many files. All the files are shown in the list. On clicking any one of the file, the pdf should be viewable if browser contains the pdf plugin or else show some anchor tag to download the file.

The problem I am having is .. I couldn't figure out how to pass the file name from viewmodel to the script in the zul page.

This is what I have done so far..

<?page title="Auto Generated index.zul"?>
<?script type="text/javascript" src="pdfobject.js"?>
<window title="Hello World!!" border="normal" width="200px"     apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('com.shahukhalroshan.vm.DemoViewModel')"  xmlns:w="http://www.zkoss.org/2005/zk/client">
<button label="ok" w:onClick="embedPDF()" />
<script type='text/javascript'>
  function embedPDF(){
    var myPDF = new PDFObject({ 
      url: 'abc.pdf'
    }).embed();  
  }
  window.onload = embedPDF; //Feel free to replace window.onload if needed.       
</script>
    <div>
       It appears you don't have Adobe Reader or PDF support in this web
       browser. <a href="abc.pdf">Click here to download the PDF</a>
    </div>  
</window>

Answer 1

In this fiddle you have an example on dynamic load using PDFObject. I've only done some small changes to your code. Issue: the pdf container seems to have a fixed height to 150px, but I'm sure you can find some tweaks from now on :-)

Index.zul

<?script type="text/javascript" src="http://pdfobject.com/scripts/pdfobject.js"?>
<zk>
  <script type='text/javascript'>
  function embedPDF(_url){
    var myPDF = new PDFObject({ 
      url: _url
    }).embed('pdfContainer');  
  }
</script>

  <vlayout apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('pkg$.TestVM')" xmlns:w="http://www.zkoss.org/2005/zk/client">
    <listbox model="@load(vm.pdfUrls)">
      <template name="model" var="url">
        <listitem>
          <listcell label="@load(url)" />
          <listcell>
            <button label="load" onClick="@command('loadPdf', url=url)" />
          </listcell>
        </listitem>
      </template>
    </listbox>
    <vlayout xmlns:n="native">
      <n:object id="pdfContainer"></n:object>
    </vlayout>
  </vlayout>
</zk>

TestVM.java

import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.BindingParam;
import java.util.List;
import java.util.ArrayList;
import org.zkoss.zk.ui.util.Clients;

public class TestVM {

    List<String> pdfUrls;

    @AfterCompose
    public void afterCompose() {
      pdfUrls = new ArrayList<String>();
      pdfUrls.add("http://www.pdf995.com/samples/pdf.pdf");
      pdfUrls.add("https://partners.adobe.com/public/developer/en/xml/AdobeXMLFormsSamples.pdf");
      pdfUrls.add("https://www.iscp.ie/sites/default/files/pdf-sample.pdf");
    }

  @Command
    public void loadPdf(@BindingParam("url")String url) {
      Clients.evalJavaScript("embedPDF('"+ url +"')");
    }

  public List<String> getPdfUrls() {
    return pdfUrls;
  }

}

Cheers, Alex