Skip to content

You are here: Creating a PDFView Using a Constructor: voltmx.ui.PDFView

PDFView Widget

The PDFView widget is a container that displays the content of the PDF URL in your application.

PDFView is newly added from iOS11 onwards. Before PDFView was ntroduced, the Browser widget was used to render any PDF content. With the addition of the PDFView widget, you can control not only the display but also various things.

The way to load the content of a PDFView widget are as follows:

  • URL: Use this method when the content that is to be loaded in a PDFView widget is susceptible to a lot of changes. You must publish the content to a server, and then load that URL in the Browser widget. A perfect example for this is the Terms and Conditions page. As the terms and conditions of an organization are susceptible to a lot of changes, you need not republish your application whenever there is a change in the terms and conditions.
  • Path: Using the File API, you can get the location details of the PDF document that is saved in the device memory and pass the path as a URL to the PDFView widget.

Note: PDFView widget is only supported on iOS platform (from iOS 11).

Widgets are normally added to your application using Volt MX Iris, but can also be added from code. For general information on using widgets in Volt MX Iris, see Designing an Application in the Iris User Guide.

The PDFView widget capabilities can be broadly categorized into the following:

3D Touch

Methods Description
registerForPeekandPop Registers a widget to enable 3D Touch peek and pop gestures.
setOnPeek Sets and overrides the existing onPeekCallback for the widget.
setOnPop Overrides the existing onPopCallback for the widget.
unregisterForPeekandPop Unregisters a widget from 3D Touch peek and pop gestures.

Animations

Methods Description
animate Applies an animation to the widget.

Data Management

Methods Description
clone When this method is used on a container widget, all the widgets inside the container are cloned.
Properties Description
url Enables you to load the URL into the widget.

Layout

Events Description
doLayout Invoked for every widget when the widget position and dimensions are computed.
Properties Description
anchorPoint Specifies the anchor point of the widget bounds rectangle using the widget's coordinate space.
bottom Determines the bottom edge of the widget and is measured from the bottom bounds of the parent container.
centerX Determines the center of a widget measured from the left bounds of the parent container.
centerY Determines the center of a widget measured from the top bounds of the parent container.
enableZoom Specifies if Zoom (ability to change the scale of the view area) must be enabled.
height Determines the height of the widget and measured along the y-axis.
left Determines the lower left corner edge of the widget and is measured from the left bounds of the parent container.
maxHeight Specifies the maximum height of the widget and is applicable only when the height property is not specified.
maxWidth Specifies the maximum width of the widget and is applicable only when the width property is not specified.
minHeight Specifies the minimum height of the widget and is applicable only when the height property is not specified.
minWidth Specifies the minimum width of the widget and is applicable only when the width property is not specified.
right Determines the lower right corner of the widget and is measured from the right bounds of the parent container.
top Determines the top edge of the widget and measured from the top bounds of the parent container.
width Determines the width of the widget and is measured along the x-axis.
zIndex Specifies the stack order of a widget.
Methods Description
canGoToFirstPage Returns a Boolean value indicating whether the user can navigate to the first page of the document.
canGoToLastPage Returns a Boolean value indicating whether the user can navigate to the last page of the document.
canGoToNextPage Returns a Boolean value indicating whether the user can navigate to the next page of the document.
canGoToPreviousPage Returns a Boolean value indicating whether the user can navigate to the previous page of the document.
canGoBack Returns a Boolean value indicating whether the user can navigate to the previous page in the page history.
canGoForward Returns a Boolean value indicating whether the user can navigate to the next page in the page history.
goToFirstPage Navigates to the first page of the document.
goToLastPage Navigates to the last page of the document.
goToNextPage Navigates to the next page of the document.
goToPreviousPage Navigates to the previous page of the document.
goBack Navigates back one step in the page history.
goForward Navigates forward one step in the page history.

User Input Handling

Methods Description
addGestureRecognizer Allows you to set a gesture recognizer for a specified gesture for a specified widget.
removeGestureRecognizer Allows you to remove the specified gesture recognizer for the specified widget.
setGestureRecognizer Allows you to set a gesture recognizer for a specified gesture for a specified widget.

Enabling RTL

Properties Description
displayRTL Helps to retain the content alignment of the widget while applying RTL. The presentation of pages is from right-to-left.

Miscellaneous

Methods Description
isPDFLocked A Boolean value indicating whether the document is locked.
isPDFEncrypted A Boolean value specifying whether the document is encrypted.
Properties Description
displayMode Specify the current display mode of the PDFView.
displayDirection The layout direction, either vertical or horizontal, for the given display mode.
interpolationQuality The interpolation quality for images drawn into the PDFView context.
displayPageBreak A Boolean value indicating whether the view displays page breaks.
displaysAsBook A Boolean value indicating whether the view will display the first page as a book cover
autoScale A Boolean value indicating whether autoscaling is set.
enableZoom Enable Zoom operations for a PDF View.
opacity Specifies the opacity of the widget.
enablePDFThumbnailView A Boolean value indicating whether ThumbnailView should present along with the PDF.
pdfThumbnailPosition Set the position of the ThumbnailView.
pdfThumbnailSizeInPercentage Set the ThumbnailView size
thumbnailBackgroundColor Set the background color for the ThumbnailView
minScaleFactor The minimum scaling factor for the PDF document.
maxScaleFactor The maximum scaling factor for the PDF document.
transform Contains an animation transformation that can be used to animate the widget.
Events Description
onPageChanged An event callback that gets invoked by the platform when the user changes the page
onDocumentChanged An event callback that gets invoked by the platform when a new PDF is loaded

Configurations common to all widgets

Methods Description
convertPointFromWidget Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system).
convertPointToWidget Using the convertPointToWidget method, you can modify the co-ordinate system.
removeFromParent Allows you to remove a child widget from a parent widget.
setEnabled Specifies the widget that must be enabled or disabled.
setVisibility Use this method to set the visibility of the widget.
Properties Description
accessibilityConfig Enables you to control accessibility behavior and alternative text for the widget.
isVisible Controls the visibility of a widget on the form.
id id is a unique identifier of PDFView widget consisting of alpha numeric characters.
info A custom JSObject with the key value pairs that a developer can use to store the context with the widget.
parent Helps you access the parent of the widget.

PDFView Widget Basics

Creating a PDFView Using a Constructor: voltmx.ui.PDFView

You can dynamically create an instance of the PDFView widget as follows.


var pdftemp = new voltmx.ui.PDFView(basicConf, layoutConf, pspConf);
  • basicConf is an object with basic properties.
  • layoutConf is an object with layout properties.
  • pspConf is an object with platform specific properties.

Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored


var pdfBasic = {

               "id": " pdfViewID",
                "isVisible": true,
                "left": "0dp",
                "top": "0dp",
                "width": "100%",
                "height": "100%",
                "url":   " http://www.africau.edu/images/default/sample.pdf" 
};
var pdfayout = {
    containerHeight: 100
};
var pdfPsp = {};
var pdfViewID = new voltmx.ui.PDFView(pdfBasic, pdfLayout, pdfPsp);
frm1.add(pdfViewID);