Table Of ContentPractical
Webix
Learn to Expedite and Improve your
Web Development
—
Frank Zammetti
Practical Webix
Learn to Expedite and Improve
your Web Development
Frank Zammetti
Practical Webix
Frank Zammetti
Pottstown, Pennsylvania, USA
ISBN-13 (pbk): 978-1-4842-3383-2 ISBN-13 (electronic): 978-1-4842-3384-9
https://doi.org/10.1007/978-1-4842-3384-9
Library of Congress Control Number: 2018936351
Copyright © 2018 by Frank Zammetti
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the
material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation,
broadcasting, reproduction on microfilms or in any other physical way, and transmission or information
storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now
known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with
every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an
editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the
trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not
identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to
proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication,
neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or
omissions that may be made. The publisher makes no warranty, express or implied, with respect to the
material contained herein.
Managing Director, Apress Media LLC: Welmoed Spahr
Acquisitions Editor: Louise Corrigan
Development Editor: James Markham
Coordinating Editor: Nancy Chen
Cover designed by eStudioCalamar
Cover image by Freepik (www.freepik.com)
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street,
6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-
sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member
(owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a
Delaware corporation.
For information on translations, please e-mail [email protected], or visit www.apress.com/
rights-permissions.
Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and
licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales
web page at www.apress.com/bulk-sales.
Any source code or other supplementary material referenced by the author in this book is available to
readers on GitHub via the book’s product page, located at www.apress.com/9781484233832. For more
detailed information, please visit www.apress.com/source-code.
Printed on acid-free paper
This is my ninth book, and with each one it has become more difficult
to find people to dedicate them to. This time around, though, it was
fairly easy because I realized that I’ve missed a whole host of people
who influenced my life and career in computers in a major way
without them even knowing it. So, this one goes out to the following
individuals, without whom I’d probably be pumping gas or digging
ditches (not that there’s anything inherently wrong with those
vocations—work is work!):
Ian Williamson, Chris Curry, Jim Westwood, and Clive Sinclair
Steven T. Mayer, Joseph C. Decuir, Jay G. Miner, Douglas G. Neubauer,
George McLeod, Ronald E. Milner, Francois Michel, Mark Shieu, Steve
Stone, Steve Smith, Delwin Pearson, and Kevin McKinsey
Jack Tramiel, Chuck Peddle, Robert Russell, Bob Yannes,
Al Charpentier, Charles Winterble, Yash Terakura, Shiraz Shivji,
and David A. Ziembicki
Table of Contents
About the Author �����������������������������������������������������������������������������������������������������xv
About the Technical Reviewer �������������������������������������������������������������������������������xvii
Acknowledgments ��������������������������������������������������������������������������������������������������xix
Introduction ������������������������������������������������������������������������������������������������������������xxi
Chapter 1: Better Web Development with Webix ������������������������������������������������������1
Web Development: The Toddler Years �������������������������������������������������������������������������������������������1
Web Development: The Teen Years �����������������������������������������������������������������������������������������������2
Web Development: Blossoming Adulthood? ����������������������������������������������������������������������������������3
So, Uh, What Is Webix Exactly? �����������������������������������������������������������������������������������������������������5
Why Webix? ���������������������������������������������������������������������������������������������������������������������������������11
Multiple Editions to Choose From �����������������������������������������������������������������������������������������������13
Online Tools ���������������������������������������������������������������������������������������������������������������������������������16
Code Snippet �������������������������������������������������������������������������������������������������������������������������16
Form Builder ��������������������������������������������������������������������������������������������������������������������������19
Skin Builder ���������������������������������������������������������������������������������������������������������������������������21
Getting Started ����������������������������������������������������������������������������������������������������������������������������22
The NPM Way�������������������������������������������������������������������������������������������������������������������������22
The “Direct” Way �������������������������������������������������������������������������������������������������������������������24
Fisher-Price’s My First Webix App �����������������������������������������������������������������������������������������������24
Summary�������������������������������������������������������������������������������������������������������������������������������������31
v
Table of ConTenTs
Chapter 2: Getting to Know Webix ��������������������������������������������������������������������������33
How to Structure a Webix App ����������������������������������������������������������������������������������������������������33
Webix Jet �������������������������������������������������������������������������������������������������������������������������������39
Widgets, Controls, Complex Widgets, and Extensions �����������������������������������������������������������������43
Components ��������������������������������������������������������������������������������������������������������������������������43
Widgets ����������������������������������������������������������������������������������������������������������������������������������44
Specialized Widgets ��������������������������������������������������������������������������������������������������������������44
Complex Widgets �������������������������������������������������������������������������������������������������������������������44
Controls ���������������������������������������������������������������������������������������������������������������������������������45
Extensions �����������������������������������������������������������������������������������������������������������������������������45
Layouts ����������������������������������������������������������������������������������������������������������������������������������45
The Basics of Layout �������������������������������������������������������������������������������������������������������������������46
Specific Layout Components�������������������������������������������������������������������������������������������������������53
abslayout �������������������������������������������������������������������������������������������������������������������������������53
accordion �������������������������������������������������������������������������������������������������������������������������������55
carousel ���������������������������������������������������������������������������������������������������������������������������������58
datalayout ������������������������������������������������������������������������������������������������������������������������������60
multiview �������������������������������������������������������������������������������������������������������������������������������62
portlet ������������������������������������������������������������������������������������������������������������������������������������64
tabview ����������������������������������������������������������������������������������������������������������������������������������68
toolbar �����������������������������������������������������������������������������������������������������������������������������������69
Summary�������������������������������������������������������������������������������������������������������������������������������������71
Chapter 3: Getting to Know Webix Even More! �������������������������������������������������������73
Forms and Data Entry Controls ���������������������������������������������������������������������������������������������������73
form ���������������������������������������������������������������������������������������������������������������������������������������76
htmlform ��������������������������������������������������������������������������������������������������������������������������������78
button ������������������������������������������������������������������������������������������������������������������������������������80
checkbox �������������������������������������������������������������������������������������������������������������������������������81
toggle ������������������������������������������������������������������������������������������������������������������������������������82
colorpicker �����������������������������������������������������������������������������������������������������������������������������82
combo ������������������������������������������������������������������������������������������������������������������������������������82
vi
Table of ConTenTs
counter ����������������������������������������������������������������������������������������������������������������������������������84
datepicker������������������������������������������������������������������������������������������������������������������������������84
daterangepicker ��������������������������������������������������������������������������������������������������������������������87
dbllist �������������������������������������������������������������������������������������������������������������������������������������88
fieldset �����������������������������������������������������������������������������������������������������������������������������������89
icon ����������������������������������������������������������������������������������������������������������������������������������������89
label ���������������������������������������������������������������������������������������������������������������������������������������89
multicombo ����������������������������������������������������������������������������������������������������������������������������89
multiselect �����������������������������������������������������������������������������������������������������������������������������90
multitext ��������������������������������������������������������������������������������������������������������������������������������91
radio ��������������������������������������������������������������������������������������������������������������������������������������91
segmented �����������������������������������������������������������������������������������������������������������������������������91
select �������������������������������������������������������������������������������������������������������������������������������������92
richselect �������������������������������������������������������������������������������������������������������������������������������92
slider ��������������������������������������������������������������������������������������������������������������������������������������93
rangeslider ����������������������������������������������������������������������������������������������������������������������������93
text ����������������������������������������������������������������������������������������������������������������������������������������94
search ������������������������������������������������������������������������������������������������������������������������������������94
textarea ���������������������������������������������������������������������������������������������������������������������������������94
richtext ����������������������������������������������������������������������������������������������������������������������������������95
forminput �������������������������������������������������������������������������������������������������������������������������������95
The Basics of Data ����������������������������������������������������������������������������������������������������������������������97
Loading Data from an External Source ����������������������������������������������������������������������������������97
Dynamic Data Loading �����������������������������������������������������������������������������������������������������������98
DataStore �������������������������������������������������������������������������������������������������������������������������������98
Proxies �����������������������������������������������������������������������������������������������������������������������������������99
Specialized Data Components ��������������������������������������������������������������������������������������������������101
chart ������������������������������������������������������������������������������������������������������������������������������������101
datatable �����������������������������������������������������������������������������������������������������������������������������106
dataview ������������������������������������������������������������������������������������������������������������������������������109
list ����������������������������������������������������������������������������������������������������������������������������������������111
grouplist ������������������������������������������������������������������������������������������������������������������������������113
vii
Table of ConTenTs
unitlist ����������������������������������������������������������������������������������������������������������������������������������115
property �������������������������������������������������������������������������������������������������������������������������������117
tree ��������������������������������������������������������������������������������������������������������������������������������������118
treetable ������������������������������������������������������������������������������������������������������������������������������121
treemap �������������������������������������������������������������������������������������������������������������������������������123
gage �������������������������������������������������������������������������������������������������������������������������������������125
bullet������������������������������������������������������������������������������������������������������������������������������������127
organogram �������������������������������������������������������������������������������������������������������������������������128
rangechart ���������������������������������������������������������������������������������������������������������������������������130
Summary�����������������������������������������������������������������������������������������������������������������������������������132
Chapter 4: Webix: The Final Frontier ��������������������������������������������������������������������133
Context Components �����������������������������������������������������������������������������������������������������������������133
context and contextmenu ����������������������������������������������������������������������������������������������������133
menu �����������������������������������������������������������������������������������������������������������������������������������136
popup�����������������������������������������������������������������������������������������������������������������������������������139
sidemenu �����������������������������������������������������������������������������������������������������������������������������140
tooltip ����������������������������������������������������������������������������������������������������������������������������������143
window ��������������������������������������������������������������������������������������������������������������������������������144
New Concept: “Other” ���������������������������������������������������������������������������������������������������������145
HTML-Oriented Components �����������������������������������������������������������������������������������������������������147
iframe ����������������������������������������������������������������������������������������������������������������������������������147
scrollview ����������������������������������������������������������������������������������������������������������������������������148
template ������������������������������������������������������������������������������������������������������������������������������150
Specialized Widgets ������������������������������������������������������������������������������������������������������������������152
calendar �������������������������������������������������������������������������������������������������������������������������������152
colorboard ���������������������������������������������������������������������������������������������������������������������������152
excelviewer �������������������������������������������������������������������������������������������������������������������������152
google-map �������������������������������������������������������������������������������������������������������������������������154
video ������������������������������������������������������������������������������������������������������������������������������������156
barcode��������������������������������������������������������������������������������������������������������������������������������158
daterange ����������������������������������������������������������������������������������������������������������������������������158
pdfviewer �����������������������������������������������������������������������������������������������������������������������������159
viii
Table of ConTenTs
Premium Components ���������������������������������������������������������������������������������������������������������������160
filemanager �������������������������������������������������������������������������������������������������������������������������161
kanban ���������������������������������������������������������������������������������������������������������������������������������162
pivot �������������������������������������������������������������������������������������������������������������������������������������163
scheduler �����������������������������������������������������������������������������������������������������������������������������164
spreadsheet �������������������������������������������������������������������������������������������������������������������������165
Strutting with Style �������������������������������������������������������������������������������������������������������������������166
Skins ������������������������������������������������������������������������������������������������������������������������������������169
Drag and Drop ���������������������������������������������������������������������������������������������������������������������������170
Extensibility and Integration Points �������������������������������������������������������������������������������������������173
Integration with jQuery ��������������������������������������������������������������������������������������������������������173
Integration with Third-Party Libraries ���������������������������������������������������������������������������������175
Summary�����������������������������������������������������������������������������������������������������������������������������������178
Chapter 5: Getting Practical: Building wxPIM ������������������������������������������������������179
First Things First: What’s a PIM, and What’s wxPIM? ����������������������������������������������������������������179
High-Level Code Structure ��������������������������������������������������������������������������������������������������������182
index�html ���������������������������������������������������������������������������������������������������������������������������������183
core�js ���������������������������������������������������������������������������������������������������������������������������������������186
Preamble �����������������������������������������������������������������������������������������������������������������������������187
Constructor ��������������������������������������������������������������������������������������������������������������������������187
Lifecycle Event Function: start() ������������������������������������������������������������������������������������������189
Lifecycle Event Function: launchModule() ���������������������������������������������������������������������������189
Utility Function: sortArray() ��������������������������������������������������������������������������������������������������191
Utility Function: objectAsArray() ������������������������������������������������������������������������������������������192
Module Helper Function: getModuleData() ��������������������������������������������������������������������������192
Module Helper Function: saveHandler() �������������������������������������������������������������������������������194
Module Helper Function: deleteHandler( ) ����������������������������������������������������������������������������196
animate�css �������������������������������������������������������������������������������������������������������������������������������199
core�css �������������������������������������������������������������������������������������������������������������������������������������200
baseLayout�js ����������������������������������������������������������������������������������������������������������������������������201
mainHeader�js ���������������������������������������������������������������������������������������������������������������������������201
ix
Table of ConTenTs
multiView�js �������������������������������������������������������������������������������������������������������������������������������203
sideMenu�js �������������������������������������������������������������������������������������������������������������������������������203
dayAtAGlance�js ������������������������������������������������������������������������������������������������������������������������206
getDayAtAGlanceConfig() �����������������������������������������������������������������������������������������������������206
getAtAGlance() ���������������������������������������������������������������������������������������������������������������������207
Summary�����������������������������������������������������������������������������������������������������������������������������������210
Chapter 6: Getting Practical: Building wxPIM Redux �������������������������������������������211
Modules: Basic Structure ����������������������������������������������������������������������������������������������������������211
Notes�js �������������������������������������������������������������������������������������������������������������������������������������213
Constructor, activate(), and deactivate() ������������������������������������������������������������������������������216
getUIConfig() ������������������������������������������������������������������������������������������������������������������������216
newHandler() �����������������������������������������������������������������������������������������������������������������������221
editExisting() ������������������������������������������������������������������������������������������������������������������������222
refreshData() ������������������������������������������������������������������������������������������������������������������������223
Tasks�js �������������������������������������������������������������������������������������������������������������������������������������224
Constructor, activate(), and deactivate() ������������������������������������������������������������������������������227
getUIConfig() ������������������������������������������������������������������������������������������������������������������������227
newHandler() �����������������������������������������������������������������������������������������������������������������������231
editExisting() ������������������������������������������������������������������������������������������������������������������������232
refreshData() ������������������������������������������������������������������������������������������������������������������������233
Contacts�js ��������������������������������������������������������������������������������������������������������������������������������235
Constructor ��������������������������������������������������������������������������������������������������������������������������237
activate() and deactivate() ���������������������������������������������������������������������������������������������������238
getUIConfig() ������������������������������������������������������������������������������������������������������������������������238
newHandler() �����������������������������������������������������������������������������������������������������������������������245
editExisting() ������������������������������������������������������������������������������������������������������������������������246
refreshData() ������������������������������������������������������������������������������������������������������������������������248
validateFormsOnChange() ���������������������������������������������������������������������������������������������������249
Appointments�js ������������������������������������������������������������������������������������������������������������������������249
Constructor ��������������������������������������������������������������������������������������������������������������������������251
getUIConfig() ������������������������������������������������������������������������������������������������������������������������252
x
Description:Learn to create speedy cross-platform applications with ease using Webix. You will begin with an introduction to Webix and basic usage, exploring the interface components and utilities it offers, as well as the tools available (skin builder, form builder, and code snippet testing facility).You’ll