| FoxitPDFSDKforWeb v11.0.4 Archives Foxit PDF SDK for Web

Public Member Functions | Static Public Member Functions | Public Attributes | Protected Member Functions | List of all members
Component Class Reference
UIExtension » components

PDFUI allows you to define a component as a class inherit from Component and register that into a module to provide UI features. Each component has several 'lifecycle methods' that you can override to run code at particular times in the process. More...

Inheritance diagram for Component:

## Public Member Functions
| active ()
| Actives the component, and set `isActive` property to true, this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.ACTIVE event. More...
| addDestroyHook (...hooks)
| Add a function to destroyHooks list, which will be called during destroy. More...
| after (component, fragments)
| Inserts this component after the specified component. More...
| attachEventToElement (element, types, listener, options)
| Binds single or more DOM events of the specified type to the specified element. This or these events are automatically removed when the element component is destroyed. More...
| before (component, fragments)
| Insert this component before the specified component. More...
| deactive ()
| Deactives the component, and set `isActive` property to false, this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.DEACTIVE event. More...
| destroy ()
| Destroy the component and remove from its parent. this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.DESTROYED event. More...
| disable ()
| To disable the component, and set `disabled` property to true, this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.DISABLE event. More...
| enable ()
| Enables component, and set `disabled` property to false, this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.ENABLE event. More...
| findClosestComponent (callback)
| Find the first ancestor in the component tree which passed the testing of callback. More...
| getClosestComponentByName (name)
| Find the first ancestor in the component tree which name is equal to the passing value. More...
| getClosestComponentByType (type)
| Find the first ancestor in the component tree which type is equal to the passing value. More...
| getComponentByName (name)
| This method returns an Component object representing the component whose name property matches the specified string. If there are more than one components matched, only the first one is taken. More...
PDFUI | getPDFUI ()
| Get PDFUI instance, PDFUI instance is passing into a component after constructed. So that an undefined value will be returned in constructoring lifecycle. More...
| getRoot ()
| Get root component of this component tree. More...
| hide ()
| Hide component and set `isVisible` property to false, this method UIExtension.UIConsts.COMPONENT_EVENTS.HIDDEN event. More...
| index ()
| Get the index of this component in parent. More...
| isContainer ()
| Method used to detect whether a component is a container. More...
| isStateKept (kind=KeepStateKind.VISIBILITY)
| Check if state is kept or not. More...
| keepState (kind=KeepStateKind.VISIBILITY)
| This method is used to keep the current state of the component unchanged. After the state is kept, the show/hide methods of the component will no longer take effect unless the keep-state is revoked. More...
| localize (localizer=this.localizer)
| Localize message with the value of the data-i18n attribute above the DOM element of component recursively. More...
| nextSiblings ()
| This method returns the component immediately following this component's parent children list, or returns null if this component is the last in that list. More...
| off (eventName, listener)
| Unregister event handler of a geven event type, if no handler function specified, all handler of this given event type will be removed. More...
| on (eventName, listener)
| Registers an event handler to a specific event type on the component. More...
| once (eventName, listener)
| Registers an event handler to a specific event type on the component, but difference from Component#on, this event handler will be triggered only once. More...
| postlink ()
| Lifecycle method: postlink. The postlink method is called after all of the children are parsed. More...
| prelink ()
| Lifecycle method: prelink. The prelink method is called after component is rendered. More...
| previousSiblings ()
| This method returns the component immediately preceding this component's parent children list, or returns null if this component is the first in that list. More...
| querySelector (selector)
| Queries the first result returned from `querySelectorAll`. More...
| querySelectorAll (selectors)
| Returns all components that match the specified selector string. selector syntax: More...
| remove ()
| Remove component from its parent, and triggers UIExtension.UIConsts.COMPONENT_EVENTS.REMOVED event. More...
| removeElement ()
| Remove element from DOM tree.
| revokeKeepState (kind=KeepStateKind.VISIBILITY)
| Revoke keep-state and makes the show/hide methods back to normal. More...
| show (showParams)
| Shows up component, and set `isVisible` property to true, this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.SHOWN event. More...
| trigger (eventName,...data)
| Calls each of the listeners registered for a given event type. More...

## Static Public Member Functions
static | extend (name, def, statics={})
static | getName ()
| This method returns a string identifies as the name of a component type that you can use this string as the tag name in the template. Each component must override this static method so that the template can get this component class. More...

## Public Attributes
boolean | canBeDisabled
| Whether or not this component can be disabled. All of the component can be disabled by default unless you manually set the value of this property to true. More...
Controller | controller
| The controller instanceof of this component. The controller is specified externally and that contains the business logic of this component. More...
boolean | disabled
| Whether or not this component is enabled. Components are enabled by default, and must be enable to recieve user inut or generate events. More...
HTMLElement | element
| The root DOM element object of this component. More...
boolean | isActive
| Whether or not this component is active.Active is a complicated state, it can prepresent different interaction states in different component. More...
boolean | isVisible
| Whether or not this component is visible. Expect for layers, Most components are initially visible. More...
string | name
| The name of this component. More...
ContainerComponent | parent
| The parent of this component. More...

## Protected Member Functions
| constructor (options, module, localizer)
| createDOMElement ()
| This method creates a HTMLElement as the root element for this component. More...
| doActive ()
| This method is called after the component is activated. It is used to update the rendering effect after the component is activated. It is usefull to override this method to customize the rendering.
| doDeactive ()
| This method is called after the component is deactivated. It is used to update the rendering effect after the component is deactivated. It is usefull to override this method to customize the rendering.
| doDestroy ()
| This method is called to destroy the component, You should override this method for your custom component to write your customize destroy logic.
| doDisable (reason='')
| This method is called after the component is disabled. It is used to update the rendering effect after the component is disabled. It is usefull to override this method to customize the rendering.
| doEnable (reason='')
| This method is called after the component is enabled. It is used to update the rendering effect after the component is enabled. It is usefull to override this method to customize the rendering.
| doHidden ()
| This method is called to hide the DOM element of this component. It is usefull to override this method to customize the hidding logic.
| doShown ()
| This method is called to show the DOM element of this component. It is usefull to override this method to customize the showing logic.
| mounted ()
| Lifecycle method: mounted. The mounted method is called after the element of component is appended into the DOM tree. More...
| render ()
| Lifecycle method: render. The render method is always been called to create DOM element of the component, it's called after createDOMElement called and before calling prelink. More...

## Detailed Description

PDFUI allows you to define a component as a class inherit from Component and register that into a module to provide UI features. Each component has several 'lifecycle methods' that you can override to run code at particular times in the process.

Component

Since
  7.0.0

## Member Function Documentation

## ◆ active()

void Component::active | ( |  | ) |
| inline

Actives the component, and set `isActive` property to true, this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.ACTIVE event.

component.on(UIExtension.UIConsts.COMPONENT_EVENTS.ACTIVE, function(){
})

## ◆ addDestroyHook()

Component::addDestroyHook | ( |  | hooks | ) |
| inline

Add a function to destroyHooks list, which will be called during destroy.

Parameters

  ...hooks | Array<()=>void> -

Examples:
  /builds/foxit/phantom/cloud/phantompdf_online/foxitwebsdk/doxygen/workspace/headerfiles/uix-addons/thumbnail/thumbUIComponent.js.

## ◆ after()

void Component::after | ( |  | component,
|  |  | fragments
| ) |  |
| inline

Inserts this component after the specified component.

Parameters

  component | `Component`|string
  fragments | `UIFragmentOptions[]`

Examples:
  /builds/foxit/phantom/cloud/phantompdf_online/foxitwebsdk/doxygen/workspace/headerfiles/uix-addons/thumbnail/thumbUIComponent.js.

## ◆ attachEventToElement()

Component::attachEventToElement | ( |  | element,
|  |  | types,
|  |  | listener,
|  |  | options
| ) |  |
| inline

Binds single or more DOM events of the specified type to the specified element. This or these events are automatically removed when the element component is destroyed.

Parameters

  element | EventTarget - The specified element
  types | string - The type of event. Use comma to separate if there are multiple event types.
  listener | EventListenerOrEventListenerObject - This function will be triggered by the type of Event
  options | AddEventListenerOptions - An options object specifies characteristics about the event listener, e.g. the EventTarget.addEventListener() method. https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

Returns
  void

## ◆ before()

Void Component::before | ( |  | component,
|  |  | fragments
| ) |  |
| inline

Insert this component before the specified component.

Parameters

  component | `Component`|string
  fragments | `UIFragmentOptions[]`

Examples:
  /builds/foxit/phantom/cloud/phantompdf_online/foxitwebsdk/doxygen/workspace/headerfiles/uix-addons/thumbnail/thumbUIComponent.js.

## ◆ constructor()

Component::constructor | ( |  | options,
|  |  | module,
|  |  | localizer
| ) |  |
| inline protected

Parameters

  options | ComponentOptions
  module | UIXModule -
  localizer | Object - SDK built-in localization tool object.

## ◆ createDOMElement()

Component::createDOMElement | ( |  | ) |
| inline protected

This method creates a HTMLElement as the root element for this component.

Returns
  HTMLElement

## ◆ deactive()

void Component::deactive | ( |  | ) |
| inline

Deactives the component, and set `isActive` property to false, this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.DEACTIVE event.

component.on(UIExtension.UIConsts.COMPONENT_EVENTS.DEACTIVE, function(){
})

## ◆ destroy()

Void Component::destroy | ( |  | ) |
| inline

Destroy the component and remove from its parent. this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.DESTROYED event.

component.on(UIExtension.UIConsts.COMPONENT_EVENTS.DESTROYED, function(){
})

## ◆ disable()

boolean Component::disable | ( |  | ) |
| inline

To disable the component, and set `disabled` property to true, this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.DISABLE event.

component.on(UIExtension.UIConsts.COMPONENT_EVENTS.DISABLE, function(){
})

Returns
  boolean - true if the component is successfully disabled, otherwise no

## ◆ enable()

void Component::enable | ( |  | ) |
| inline

Enables component, and set `disabled` property to false, this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.ENABLE event.

component.on(UIExtension.UIConsts.COMPONENT_EVENTS.ENABLE, function(){
})

Returns
  boolean - true if the component is successfully enabled, otherwise no!

Examples:
  /builds/foxit/phantom/cloud/phantompdf_online/foxitwebsdk/doxygen/workspace/headerfiles/uix-addons/thumbnail/thumbUIComponent.js.

## ◆ extend()

static Component::extend | ( |  | name,
|  |  | def,
|  |  | statics = `{}`
| ) |  |
| inline static

A convenient method for ES5 to inherit components

Parameters

  name | string - component type name
  def | object - component members
  statics | object - static members

## ◆ findClosestComponent()

Component Component::findClosestComponent | ( |  | callback | ) |
| inline

Find the first ancestor in the component tree which passed the testing of callback.

Parameters

  callback | (component:Component)=>boolean - This is a predicate used to find eligible ancestors in the component tree. It returns true to indicate that a match has been found.

Returns
  Component|undefined - Returns the first matching ancestor component, or undefined if no match is found.

## ◆ getClosestComponentByName()

Component::getClosestComponentByName | ( |  | name | ) |
| inline

Find the first ancestor in the component tree which name is equal to the passing value.

Parameters

  name | string - component name

Returns
  Component|undefined - Returns the first matching ancestor component, or undefined if no match is found.

## ◆ getClosestComponentByType()

Component::getClosestComponentByType | ( |  | type | ) |
| inline

Find the first ancestor in the component tree which type is equal to the passing value.

Parameters

  type | string - component type: Component.getName

Returns
  Component|undefined - Returns the first matching ancestor component, or undefined if no match is found.

## ◆ getComponentByName()

Component Component::getComponentByName | ( |  | name | ) |
| inline

This method returns an Component object representing the component whose name property matches the specified string. If there are more than one components matched, only the first one is taken.

Returns
  Component

## ◆ getName()

static Component::getName | ( |  | ) |
| inline static

This method returns a string identifies as the name of a component type that you can use this string as the tag name in the template. Each component must override this static method so that the template can get this component class.

Returns
  string

Examples:
  /builds/foxit/phantom/cloud/phantompdf_online/foxitwebsdk/doxygen/workspace/headerfiles/uix-addons/thumbnail/thumbUIComponent.js.

## ◆ getPDFUI()

PDFUI Component::getPDFUI | ( |  | ) |

Get PDFUI instance, PDFUI instance is passing into a component after constructed. So that an undefined value will be returned in constructoring lifecycle.

Returns
  PDFUI

Examples:
  /builds/foxit/phantom/cloud/phantompdf_online/foxitwebsdk/doxygen/workspace/headerfiles/uix-addons/thumbnail/thumbUIComponent.js.

## ◆ getRoot()

Component::getRoot | ( |  | ) |
| inline

Get root component of this component tree.

Returns
  Component

Examples:
  /builds/foxit/phantom/cloud/phantompdf_online/foxitwebsdk/doxygen/workspace/headerfiles/uix-addons/thumbnail/thumbUIComponent.js.

## ◆ hide()

void Component::hide | ( |  | ) |
| inline

Hide component and set `isVisible` property to false, this method UIExtension.UIConsts.COMPONENT_EVENTS.HIDDEN event.

component.on(UIExtension.UIConsts.COMPONENT_EVENTS.HIDDEN, function(){
})

## ◆ index()

number Component::index | ( |  | ) |
| inline

Get the index of this component in parent.

Returns
  number

Examples:
  /builds/foxit/phantom/cloud/phantompdf_online/foxitwebsdk/doxygen/workspace/headerfiles/uix-addons/thumbnail/thumbUIComponent.js.

## ◆ isContainer()

Component::isContainer | ( |  | ) |
| inline

Method used to detect whether a component is a container.

See also
  ContainerComponent

Returns
  boolean - true if it is a container type component, false otherwise

## ◆ isStateKept()

boolean Component::isStateKept | ( |  | kind = `KeepStateKind.VISIBILITY` | ) |
| inline

Check if state is kept or not.

See also
  Component.keepState
  Component.revokeKeepState

Since
  9.0.0

Returns
  boolean - Whether to keep the state, if it is true, it means that the show/hide method will not be available, you can call the revokeKeepState method to modify the state, otherwise, it means that show/hide is available, you can call keepState to keep the state.

## ◆ keepState()

void Component::keepState | ( |  | kind = `KeepStateKind.VISIBILITY` | ) |
| inline

This method is used to keep the current state of the component unchanged. After the state is kept, the show/hide methods of the component will no longer take effect unless the keep-state is revoked.

See also
  Component.revokeKeepState
  Component.isStateKept

Since
  9.0.0

## ◆ localize()

void Component::localize | ( |  | localizer = `this.localizer` | ) |
| inline

Localize message with the value of the data-i18n attribute above the DOM element of component recursively.

Returns
  Promise<void>

## ◆ mounted()

Component::mounted | ( |  | ) |
| inline protected

Lifecycle method: mounted. The mounted method is called after the element of component is appended into the DOM tree.

Returns
  void

## ◆ nextSiblings()

Component Component::nextSiblings | ( |  | ) |
| inline

This method returns the component immediately following this component's parent children list, or returns null if this component is the last in that list.

Returns
  Component

## ◆ off()

Component::off | ( |  | eventName,
|  |  | listener
| ) |  |
| inline

Unregister event handler of a geven event type, if no handler function specified, all handler of this given event type will be removed.

Parameters

  eventName | string -
  [listener] | {(...args:any[]):void;} -

Examples:
  /builds/foxit/phantom/cloud/phantompdf_online/foxitwebsdk/doxygen/workspace/headerfiles/uix-addons/thumbnail/thumbUIComponent.js.

## ◆ on()

Component::on | ( |  | eventName,
|  |  | listener
| ) |  |
| inline

Registers an event handler to a specific event type on the component.

Parameters

  eventName | string -
  listener | ()=>void

Examples:
  /builds/foxit/phantom/cloud/phantompdf_online/foxitwebsdk/doxygen/workspace/headerfiles/uix-addons/thumbnail/thumbUIComponent.js.

## ◆ once()

Component::once | ( |  | eventName,
|  |  | listener
| ) |  |
| inline

Registers an event handler to a specific event type on the component, but difference from Component#on, this event handler will be triggered only once.

Parameters

  eventName | string -
  listener | ()=>void -

## ◆ postlink()

void Component::postlink | ( |  | ) |
| inline

Lifecycle method: postlink. The postlink method is called after all of the children are parsed.

Returns
  void

## ◆ prelink()

void Component::prelink | ( |  | ) |
| inline

Lifecycle method: prelink. The prelink method is called after component is rendered.

Returns
  void

## ◆ previousSiblings()

Component Component::previousSiblings | ( |  | ) |
| inline

This method returns the component immediately preceding this component's parent children list, or returns null if this component is the first in that list.

Returns
  Component

## ◆ querySelector()

Component::querySelector | ( |  | selector | ) |
| inline

Queries the first result returned from `querySelectorAll`.

Parameters

  selector | string - The syntax is the same as the parameter of `querySelectorAll`

Returns
  `Component`|undefined

See also
  querySelectorAll

## ◆ querySelectorAll()

Component::querySelectorAll | ( |  | selectors | ) |
| inline

Returns all components that match the specified selector string. selector syntax:

1. component name selector: "hand-tool", "home-tab"
2. component type selector: "@sidebar", "@xbutton"
3. select all: "*"
4. select descendants: "@sidebar @sidebar-panel", "home-tab @group"
5. select children: "@sidebar-panel>@xbutton", "@sidebar-panel>*"
6. select attribute: "@sidebar-panel[name='']", "[name^=fv--addon]", "[name$=style]", "[name*=fv]"
7. method selector: "::eq(0)", "::childAt(0)", "::parent()", "::first()", "::last()", "::allAfter()","::allBefore()", "::activated()", "::deactivated()", "::visible()", "::hidden()", "::disabled()", "::enabled()"
   Parameters

     selector | string

   Returns
     `Component[]`

## ◆ remove()

void Component::remove | ( |  | ) |
| inline

Remove component from its parent, and triggers UIExtension.UIConsts.COMPONENT_EVENTS.REMOVED event.

component.on(UIExtension.UIConsts.COMPONENT_EVENTS.REMOVED, function(parentComponent){
})

## ◆ render()

Component::render | ( |  | ) |
| inline protected

Lifecycle method: render. The render method is always been called to create DOM element of the component, it's called after createDOMElement called and before calling prelink.

Returns
  void

Examples:
  /builds/foxit/phantom/cloud/phantompdf_online/foxitwebsdk/doxygen/workspace/headerfiles/uix-addons/thumbnail/thumbUIComponent.js.

## ◆ revokeKeepState()

void Component::revokeKeepState | ( |  | kind = `KeepStateKind.VISIBILITY` | ) |
| inline

Revoke keep-state and makes the show/hide methods back to normal.

Since
  9.0.0

## ◆ show()

void Component::show | ( |  | showParams | ) |
| inline

Shows up component, and set `isVisible` property to true, this method triggers UIExtension.UIConsts.COMPONENT_EVENTS.SHOWN event.

component.on(UIExtension.UIConsts.COMPONENT_EVENTS.SHOWN, function(){
})

## ◆ trigger()

Component::trigger | ( |  | eventName,
|  |  | data
| ) |  |
| inline

Calls each of the listeners registered for a given event type.

Parameters

  eventName | string -
  data | any[] -

## Member Data Documentation

## ◆ canBeDisabled

boolean Component::canBeDisabled

Whether or not this component can be disabled. All of the component can be disabled by default unless you manually set the value of this property to true.

Since
  7.0.0

## ◆ controller

Controller Component::controller

The controller instanceof of this component. The controller is specified externally and that contains the business logic of this component.

Since
  7.0.0

## ◆ disabled

boolean Component::disabled

Whether or not this component is enabled. Components are enabled by default, and must be enable to recieve user inut or generate events.

Since
  7.0.0

## ◆ element

HTMLElement Component::element

The root DOM element object of this component.

Since
  7.0.0

Examples:
  /builds/foxit/phantom/cloud/phantompdf_online/foxitwebsdk/doxygen/workspace/headerfiles/uix-addons/thumbnail/thumbUIComponent.js.

## ◆ isActive

boolean Component::isActive

Whether or not this component is active.Active is a complicated state, it can prepresent different interaction states in different component.

Since
  7.0.0

## ◆ isVisible

boolean Component::isVisible

Whether or not this component is visible. Expect for layers, Most components are initially visible.

Since
  7.0.0

## ◆ name

string Component::name

The name of this component.

See also
  Component.getComponentByName(name);

Since
  7.0.0

## ◆ parent

ContainerComponent Component::parent

The parent of this component.

Since
  7.0.0

@2025 Foxit Software Incorporated. All rights reserved.