• Utilities
• Overview
• Properties
• Methods
• Other
• Events
• Extending

Overview

In w2ui library there are several global variables. If you link w2ui.js as "text/javascript": <script type="module"> import { w2utils, w2alert } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js' w2alert(w2utils.base64encode('some text')) </script> Following global object and function will be defined:

• w2ui - object that holds all created widgets
• w2locale - locale object
• w2utils - utilities object
• w2popup - popop object
• w2alert - alert function
• w2confirm - confirm function
• w2prompt - prompot function

And following global classes (see extending w2ui)

• w2base - base class, implements event handling, can be exteded
• w2field - field class, can be extended
• w2form - form class, can be extended
• w2grid - grid class, can be extended
• w2layout - layout class, can be extended
• w2sidebar - sidebar class, can be extended
• w2tabs - tabs class, can be extended
• w2toolbar - toolbar class, can be extended

However, starting with version 2.0, you can load libaray as ES6 module and these variables will not be registered globally by default. If you link w2ui as type "module" <script type="module" src="w2ui.es6.min.js"></script> There will be no global variables and it makes no sense to link it this way, but load proper class for each script where you need it import { w2ui, w2utils, w2grid } from "w2ui.es6.min.js" You can also link ES6 modules and auto-register globals if you do <script type="module" src="w2ui.es6.min.js?globals"></script>

w2ui

All objects you create - layouts, grids, toolbars, sidebars, tabs, forms - will be attached to global w2ui object. Initially it is an empty object, but as soon as you start creating widgets, they will become part of this object. This object serves two important purposes:

• It provides a common and uniform way for accessing created objects
• It makes sure that you will not overwrite already created object (object name must be unique)

For example, if you created a grid with name myGrid then it can be accessed in the following manner: w2ui['myGrid'].get(3); // returns record with id=3 // or w2ui.myGrid.get(3);

w2locale

This object holds all variables for localization purposes, such as date and tiem format, currency format, number format, days of weeks, months names, and translation phrases. To load different locale use w2utils.locale

w2utils

This global object has useful functions for data validation, data sanitation, data formatting, encoding, etc. For example, you can check if a string is in email format by: w2utils.isEmail('som@email.com'); // returns true if the string is a valid email See w2utils.methods for more information.

w2popup

Generic dialog object w2popup.open({ title: 'Title', body: 'Body' })

w2alert

Alert dialog w2alert('some alert')

w2confirm

Confirm dialog w2confirm('Question') .yes(() => { ... }) .no(() => { ... })

w2prompt

Generic prompt dialog w2prompt('Enter age') .change(() => { ... }) .ok(() => { ... })

Extending w2ui

All w2ui classes can be extended and in such way a new and/or custom functionality can be added to grid, toolbar, sidebar, tabs, etc. For example, to extend a grid, do the following: import { w2grid } from "w2ui.es6.min.js" class w2customGrid extends w2grid { constructor() { super() ... } // custom methods }

User Comments