Foxit PDF SDK For Web - V9.1.0

# Layout Template

# Example

In Foxit PDF SDK for Web, templates are written with HTML that contains UIExtension specific elements, attributes and directives. UIExtension combines the layout template with information from the component, controller and directive to render UI in the browser. The following code snippet shows a template with UIExtension components and directives.

<webpdf>
    <div class="toolbar" style="display:flex;flex-direction:row;padding:6px">
        <print:print-ribbon-button></print:print-ribbon-button>
        <ribbon-button name="freetext-typewriter" @tooltip tooltip-title="toolbar.tooltip.typewriter.title" @controller="states:CreateTypewriterController" icon-class="fv__icon-toolbar-typewriter" >toolbar.create.typewriter</ribbon-button>
    </div>
    <div class="fv__ui-body">
        <viewer @touch-to-scroll></viewer>
    </div>
    <template name="template-container">
        <print:print-dialog></print:print-dialog>
    </template>
</webpdf>

Click "run" button to view the running result:

# Description of the format of layout template

<!-- Layout template must take <webpdf> as the root component. -->
<webpdf>
    <!-- Layout templates support all html tags and properties. -->
    <div class="toolbar" style="display:flex;flex-direction:row;padding:6px">
        <!-- The colon prefix is the name of the component module, and the component name and module name must be in lowercase. -->
        <print:print-ribbon-button></print:print-ribbon-button>

        <!-- The parameters that begin with @ are used to mark directives, the content that follow with @ is the name of directives. If the directive is registered in a non-root module, then the directive name should be written in the @module-name:directive-name format.   -->
        
        <ribbon-button name="freetext-typewriter" @tooltip tooltip-title="toolbar.tooltip.typewriter.title" @controller="states:CreateTypewriterController" icon-class="fv__icon-toolbar-typewriter" >toolbar.create.typewriter</ribbon-button>
    </div>
    <div class="fv__ui-body">
        <!-- Viewer is used to display the area of PDF, so there must be a viewer component in the layout template -->
        <viewer @touch-to-scroll></viewer>
    </div>
    <!-- Template is a re-written html template tag. It is typically used to hold the components that do not need to be displayed immediately, such as dialog boxes, context menus, floating boxes, and etc.. -->
    <template name="template-container">
        <print:print-dialog></print:print-dialog>
    </template>
</webpdf>

# How to specify layout templates and implement device adaptation

Please refer to the section Appearance.

# Dynamically insert layout templates

Please click "run" button to run the example:

The APIs that support inserting templates are as follows:

  • Component
    • #after(component|template, fragments)
    • #before(component|template, fragments)
  • ContainerComponent
    • #append(component|template,fragments)
    • #prepend(component|template,fragments)
    • #insert(component|template, index, fragments)

For more information about these APIs, please refer to the API Reference: Component and ContainerComponent

# Insert the layout template when initializing

Please refer to UI Fragments.

← UI fragments →