Touchkit and Embedded object (PDF)

Hi all,

I’m evaluating the touchkit and built a sample application using NavViews.
On the left side is a hierarchical structure and on item touch the right side shows up an pre-rendered PDF within an Embedded object.

In Chrome and Safari (both on Desktop) they’re shown correctly with the ability of resizing.

iPads Safari Browser shows the PDF, but it is not possible to scroll or resize the PDF.
How can this be achieved on the iPad?

Any help is greatly appreciated.
Regards,
Erik

The code to show the preview data looks like this and will be called on touching an item on the left side hierarchy


  private void showPreviewData(Object id) {
    preview.removeAllComponents();
    if (id != null) {
      final byte[] previewData = (byte[]
) havDS.getDetailData(id);
      if (previewData != null) {
        Embedded embedded = new Embedded();
        embedded.setType(Embedded.TYPE_BROWSER);
        embedded.setSource(getEmbeddedResource(previewData));
        embedded.setSizeFull();
        embedded.setImmediate(true);
        embedded.setMimeType("application/pdf");

        preview.addComponent(embedded);
        preview.setSizeFull();
        preview.setImmediate(true);
        embedded.requestRepaint();
      }
      else {
        AxionApplication.getApp().getMainWindow().showNotification(Messages.get().errorNoPreview,
            Notification.TYPE_HUMANIZED_MESSAGE | Notification.POSITION_CENTERED);
      }
    }
    setModuleArea();
  }
  
  private StreamResource getEmbeddedResource(final byte[] data) {
    StreamResource sr = new StreamResource(new StreamSource() {
      @Override
      public InputStream getStream() {

        return new ByteArrayInputStream(data);
      }
    }, Messages.get().preview, AxionApplication.getApp());

    sr.setMIMEType("application/pdf");
    // Do not cache embedded data
    sr.setCacheTime(0);
    return sr;
  }
  • preview is a CSSLayout.
  • The right side view is a NavigationView containing a CSSLayout like in the MobileMail sample
  • preview will be set as a component to the CSSLayout of the NavigationView

  public void setModuleArea(Component component) {
    layout.removeAllComponents();
    layout.setSizeFull();
    layout.addComponent(component);
  }

It is an OSGI application consisting of a set of plugins (main, module1, … moduleN, … DataSets, …) which runs on Equinox and Felix.
The method
setModuleArea
in the latter code snippet belongs to the main plugin whereas the call to
setModuleArea()
belongs to a module, just for clarification.

Does any of the above code looks wrong or weird?

Hi,

I’d assume native browsers on mobile devices treat pdf like an image if it is embedded into a host page. I don’t know if there is a setting to enable native zoom controls.

One way to enable zoom controls etc would be to open pdf “fullscreen”. I guess you could add a click listener that opens the file fullscreen if it is clicked.

cheers,
matti

Hi Erik,

were you able to get this solved?

Koen