将值从视图模型传递到 zk 中的脚本

Question

我正在尝试使用 PDFObject 内联显示 pdf 文件。该应用程序可能包含许多文件。所有文件都显示在列表中。单击任何一个文件，如果浏览器包含 pdf 插件，则 pdf 应该是可见的，或者显示一些锚标记以下载文件。

我遇到的问题是..我不知道如何将文件名从视图模型传递到 zul 页面中的脚本。

这就是我到目前为止所做的..

<?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

在此 fiddle 中，您有一个使用 PDFObject 进行动态加载的示例。我只对您的代码做了一些小改动。问题：pdf 容器的高度似乎固定为 150px，但我相信从现在开始您可以找到一些调整:-)

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;
  }

}

干杯，亚历克斯

将值从视图模型传递到 zk 中的脚本

Pass value from viewmodel to script in zk

javascript

zk

zul

pdfobject