# # Xbutton component

Xbutton is the UIExtension button component. It can be used to customize icon, define whether to show text, whether to disable/enable button, etc.

## # Code examples

1. Simple xbutton example:

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <xbutton>simple button(character data)</xbutton>
                       <xbutton text="simple button(text property)"></xbutton>
                   </div>
                   <div class="fv__ui-body">
                       <viewer></viewer>
                   </div>
               </webpdf>
           </template>
       </html>
       <script>
       var CustomAppearance = UIExtension.appearances.Appearance.extend({
           getLayoutTemplate: function() {
               return document.getElementById('layout-template').innerHTML;
           },
           disableAll: function(){}
       });
           var libPath = window.top.location.origin + '/lib';
           var pdfui = new UIExtension.PDFUI({
                   viewerOptions: {
                       libPath: libPath,
                       jr: {
                           licenseSN: licenseSN,
                           licenseKey: licenseKey
                       }
                   },
                   renderTo: document.body,
                   appearance: CustomAppearance,
                   addons: []
           });
       </script>

2. Force to show text in built-in toolbar component

       <html>
           <template id="layout-template">
               <webpdf>
                   <toolbar>
                       <xbutton class="fv__ui-toolbar-show-text-button">Force to show text</xbutton>
                       <xbutton icon-class="fv__icon-toolbar-hand">Text will be hidden</xbutton>
                   </toolbar>
                   <viewer></viewer>
               </webpdf>
           </template>
       </html>
       <script>
           var CustomAppearance = UIExtension.appearances.Appearance.extend({
               getLayoutTemplate: function() {
                   return document.getElementById('layout-template').innerHTML;
               },
               disableAll: function(){}
           });

           var libPath = window.top.location.origin + '/lib';
           var pdfui = new UIExtension.PDFUI({
                   viewerOptions: {
                       libPath: libPath,
                       jr: {
                           licenseSN: licenseSN,
                           licenseKey: licenseKey
                       }
                   },
                   renderTo: document.body,
                   appearance: CustomAppearance,
                   addons: []
           });
       </script>

3. Customize icon-class

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <xbutton icon-class="fv__icon-toolbar-hand">button with icon</xbutton>
                       <xbutton icon-class="custom-icon-css-class">button with custom icon</xbutton>
                   </div>
                   <viewer></viewer>
               </webpdf>
           </template>
       </html>
       <script>
           var CustomAppearance = UIExtension.appearances.Appearance.extend({
               getLayoutTemplate: function() {
                   return document.getElementById('layout-template').innerHTML;
               },
               disableAll: function(){}
           });
           var libPath = window.top.location.origin + '/lib';
           var pdfui = new UIExtension.PDFUI({
                   viewerOptions: {
                       libPath: libPath,
                       jr: {
                           licenseSN: licenseSN,
                           licenseKey: licenseKey
                       }
                   },
                   renderTo: document.body,
                   appearance: CustomAppearance,
                   addons: []
           });
       </script>
       <style>
           .custom-icon-css-class {
               background-repeat: no-repeat;
               background-position: center;
               background-image: url(data:image/png;charset=utf-8;base64, );
           }
       </style>

4. Disable button

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <xbutton disabled="true">disabled button</xbutton>
                   </div>
                   <viewer></viewer>
               </webpdf>
           </template>
       </html>
       <script>
           var CustomAppearance = UIExtension.appearances.Appearance.extend({
               getLayoutTemplate: function() {
                   return document.getElementById('layout-template').innerHTML;
               },
               disableAll: function(){}
           });
           var libPath = window.top.location.origin + '/lib';
           var pdfui = new UIExtension.PDFUI({
                   viewerOptions: {
                       libPath: libPath,
                       jr: {
                           licenseSN: licenseSN,
                           licenseKey: licenseKey
                       }
                   },
                   renderTo: document.body,
                   appearance: CustomAppearance,
                   addons: []
           });
       </script>

5. Click event handler

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <xbutton name="alert-btn">Click Me!</xbutton>
                   </div>
                   <viewer></viewer>
               </webpdf>
           </template>
       </html>
       <script>
           var CustomAppearance = UIExtension.appearances.Appearance.extend({
               getLayoutTemplate: function() {
                   return document.getElementById('layout-template').innerHTML;
               },
               getDefaultFragments: function() {
                   return [{
                       target: 'alert-btn',
                       config: {
                           callback: function() {
                               alert('click button!');
                           }
                       }
                   }];
               },
               disableAll: function(){}
           });
           var libPath = window.top.location.origin + '/lib';
           var pdfui = new UIExtension.PDFUI({
                   viewerOptions: {
                       libPath: libPath,
                       jr: {
                           licenseSN: licenseSN,
                           licenseKey: licenseKey
                       }
                   },
                   renderTo: document.body,
                   appearance: CustomAppearance,
                   addons: []
           });
       </script>

6. Use controller to handle click event

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <xbutton name="alert-btn">Click Me!</xbutton>
                   </div>
                   <viewer></viewer>
               </webpdf>
           </template>
       </html>
       <script>
           var CustomAppearance = UIExtension.appearances.Appearance.extend({
               getLayoutTemplate: function() {
                   return document.getElementById('layout-template').innerHTML;
               },
               getDefaultFragments: function() {
                   return [{
                       target: 'alert-btn',
                       config: {
                           callback: UIExtension.controllers.Controller.extend({
                               handle: function() {
                                   alert("Click button!");
                               }
                           })
                       }
                   }];
               },
               disableAll: function(){}
           });
           var libPath = window.top.location.origin + '/lib';
           var pdfui = new UIExtension.PDFUI({
                   viewerOptions: {
                       libPath: libPath,
                       jr: {
                           licenseSN: licenseSN,
                           licenseKey: licenseKey
                       }
                   },
                   renderTo: document.body,
                   appearance: CustomAppearance,
                   addons: []
           });
       </script>

7. Use controller directive

       <html>
           <template id="layout-template">
               <webpdf>
                   <div>
                       <xbutton name="alert-btn" @controller="custom-module:ClickButtonController">Click Me!</xbutton>
                   </div>
                   <viewer></viewer>
               </webpdf>
           </template>
       </html>
       <script>
           var module = UIExtension.PDFUI.module('custom-module', []);
           module.controller('ClickButtonController', {
               handle: function() {
                   alert("Click button!");
               }
           });

           var CustomAppearance = UIExtension.appearances.Appearance.extend({
               getLayoutTemplate: function() {
                   return document.getElementById('layout-template').innerHTML;
               },
               disableAll: function(){}
           });

           var libPath = window.top.location.origin + '/lib';
           var pdfui = new UIExtension.PDFUI({
                   viewerOptions: {
                       libPath: libPath,
                       jr: {
                           licenseSN: licenseSN,
                           licenseKey: licenseKey
                       }
                   },
                   renderTo: document.body,
                   appearance: CustomAppearance,
                   addons: []
           });
       </script>

## # API

### # Xbutton object properties

Properties | Description | Type
--- | --- | ---
disabled | Button disabled status | `boolean`
isVisible | Button visibility status | `boolean`

### # Methods

Method | Description | Version
--- | --- | ---
setText(text: String): void | Set button text. It supports I18n entry. | 7.0
setIconCls(cssClass: String): void | Set icon's css-class of a button | 7.0
disable(): void | Disable button. The disabled button will not respond to the click event | 7.0
enable(): void | Enable button. The enabled button will respond to the click event | 7.0
show(): void | Show the hidden button | 7.0
hide(): void | Hide the button | 7.0
destroy(): void | Destroy the button component | 7.0

## # Events

Name | Description | Sample | Version
--- | --- | --- | ---
click | Click button to trigger | `button.on('click', () => {})` | 7.0