Learning DHTMLX Suite UI

Eli Geske

• Publisher: Packt Publishing
• Year: 2013
• eBook ISBN: 9781849699334
• Topic: Computer Science
• Subtopic: Application Development
• Index: Computer Science

In Detail

JavaScript applications provide an excellent user experience for small to large scale enterprise applications. The amazing growth of JavaScript has opened the door for many great libraries such as DHTMLX.

"Learning DHTMLX Suite UI" will teach you how to use these libraries effectively so you can make presentations that will take your employers/ clients breath away!

"Learning DHTMLX Suite UI" is a step-by-step guide that will teach you the basics of DHTMLX library components and how to apply them in a real-world scenario. This book will start with the installation of DHTMLX before moving on to explore the features of DHTMLX and helping you to create your first user management application.

"Learning DHTMLX Suite UI" will guide you through the installation of DHTMLX as a single-page application. As you progress from one chapter to the next, you will gradually build a simple user management application. You will also learn how to create forums with validation and how to use grids to add and edit users. The book will also suggest the best practices for using toolbars and refreshing data. With "Learning DHTMLX Suite UI Guide", you will be inspired to come up with your own great ideas for your future application development projects.

Approach

A fast-paced, example-based guide to learning DHTMLX.

Who this book is for

"Learning DHTMLX Suite UI" is for web designers who have a basic knowledge of JavaScript and who are looking for powerful tools that will give them an extra edge in their own application development. This book is also useful for experienced developers who wish to get started with DHTMLX without going through the trouble of learning its quirks through trial and error. Readers are expected to have some knowledge of JavaScript, HTML, Document Object Model, and the ability to install a local web server.

Learning DHTMLX Suite UI

---

Table of Contents

Learning DHTMLX Suite UI

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. User Management Web App

About DHTMLX

DHTMLX and other component libraries

The components

What will we be building?

Summary

2. Download, Setup, and Test

Installing a web server

Creating the application directory structure

Downloading the DHTMLX library

Creating the application file app.js

The data storage file

Creating the index.html file

Testing the DHTMLX installation

Summary

3. Data Structures, Storage, and Callbacks

localStorage

Creating the storage object

The storage methods and properties

lastStoredId

setDateFormat

The user methods

The user model

createUser

The user parameter

getUser

updateUser

removeUser

The grid methods

The grid JSON data structure

gridRow

getUserGrid

The chart methods

barChartItem

createUserBarChart

The storage object

The callbacks object

Summary

4. The DHTMLX Layout

The DHTMLX layout

The methods and events

Initialization

Methods

Cell sizing

setHeight

setWidth

fixSize

Cell header

showHeader and hideHeader

setText

progressOn and progressOff

Overview of methods

Layout events

attachEvent and detachEvent

dhtmlxEvent

The application code

Create the layout

Summary

5. The DHTMLX Toolbar

The DHTMLX toolbar

The methods and events

Initialization choices

Initialization on a DOM element

Initialization on a layout object

Initialization on a cell object

Toolbar items

addButton

addButtonTwoState

getItemState

addSeparator

addText

addButtonSelect

getListOptionSelected

addSpacer

removeSpacer

addSlider

addInput

getValue

hideItem and showItem

removeItem

Toolbar events

onClick

onValueChange

onStateChange

onEnter

The application code

Creating the toolbar

Summary

6. The DHTMLX Grid

The DHTMLX grid

The grid methods and events

Initialization choices

Initialization on a DOM element

Initialization on a cell object

Grid methods

attachGrid

setImagePath

setHeader

setInitWidths

setColAlign

init

addRow

setColTypes

getSelectedRowId

clearSelection

clearAll

parse

Grid events

onRowDblClicked

onRowSelect

The application code

Create the grid

callbacks.setToolbarItemStates

callbacks.removeClick

callbacks.refreshGrid

callbacks.dataChanged

Testing the grid

Creating a user

Removing a user

Summary

7. The DHTMLX Window

The DHTMLX window

The methods and events

Initialization

Creating the base object

Create windows through methods

Methods

createWindow (base object method)

setDimension

denyResize

centerOnScreen

setModal

hide

show

setText

hideHeader

showHeader

Events

onClose

The application code

Creating the pop-up window

callbacks

showPopup

hidePopup

addClick

Test our popup

Summary

8. The DHTMLX Form and Calendar

The DHTMLX form

Initialization of the DHTMLX form

attachForm

Form items and attributes

settings

input

hidden

checkbox

calendar

select

button

block

newcolumn

Form methods

setItemFocus()

validate()

clear()

enableLiveValidation()

setFormData()

getFormData()

The application code

app.js

callbacks

showPopup()

hidePopup()

editClick()

Edit the CSS form

index.html

Test the application form

Summary

9. The DHTMLX Chart

The methods and events

Initialization of the DHTMLX chart

dhtmlXChart()

addChart()

Methods

refresh()

add()

define()

Define a series

Define chart type

addSeries()

idByIndex()

get()

Events

onItemClick

The application code

Creating the chart

callbacks.refreshChart()

callbacks.dataChanged()

Test the application

Summary

10. The Finish Line

Testing

Troubleshooting

More features

Server side

Adding icons

Event tweaks

Chart ideas

Summary

Index

Learning DHTMLX Suite UI

Copyright © 2013 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or impli...

Table of contents

• Learning DHTMLX Suite UI