You are previewing Learning DHTMLX Suite UI.
O'Reilly logo
Learning DHTMLX Suite UI

Book Description

Create your first single-page JavaScript application using multiple DHTMLX components and a touch of HTML5

  • Learn how to install and use DHTMLX methods and events

  • Store data in HTML5 local storage

  • Learn how to develop a client-side application using DHTMLX and browser tools

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 employer’s/ client’s 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.

Table of Contents

  1. Learning DHTMLX Suite UI
    1. Table of Contents
    2. Learning DHTMLX Suite UI
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. User Management Web App
      1. About DHTMLX
        1. DHTMLX and other component libraries
        2. The components
      2. What will we be building?
      3. Summary
    9. 2. Download, Setup, and Test
      1. Installing a web server
      2. Creating the application directory structure
      3. Downloading the DHTMLX library
      4. Creating the application file app.js
      5. The data storage file
      6. Creating the index.html file
      7. Testing the DHTMLX installation
      8. Summary
    10. 3. Data Structures, Storage, and Callbacks
      1. localStorage
      2. Creating the storage object
        1. The storage methods and properties
          1. lastStoredId
          2. setDateFormat
        2. The user methods
          1. The user model
          2. createUser
            1. The user parameter
          3. getUser
          4. updateUser
          5. removeUser
        3. The grid methods
          1. The grid JSON data structure
          2. gridRow
          3. getUserGrid
        4. The chart methods
          1. barChartItem
          2. createUserBarChart
        5. The storage object
      3. The callbacks object
      4. Summary
    11. 4. The DHTMLX Layout
      1. The DHTMLX layout
      2. The methods and events
        1. Initialization
        2. Methods
          1. Cell sizing
          2. setHeight
          3. setWidth
          4. fixSize
          5. Cell header
            1. showHeader and hideHeader
            2. setText
          6. progressOn and progressOff
        3. Overview of methods
      3. Layout events
        1. attachEvent and detachEvent
      4. dhtmlxEvent
      5. The application code
        1. Create the layout
      6. Summary
    12. 5. The DHTMLX Toolbar
      1. The DHTMLX toolbar
      2. The methods and events
        1. Initialization choices
        2. Initialization on a DOM element
        3. Initialization on a layout object
        4. Initialization on a cell object
        5. Toolbar items
          1. addButton
          2. addButtonTwoState
          3. getItemState
          4. addSeparator
          5. addText
          6. addButtonSelect
          7. getListOptionSelected
          8. addSpacer
          9. removeSpacer
          10. addSlider
          11. addInput
          12. getValue
          13. hideItem and showItem
          14. removeItem
        6. Toolbar events
          1. onClick
          2. onValueChange
          3. onStateChange
          4. onEnter
      3. The application code
        1. Creating the toolbar
      4. Summary
    13. 6. The DHTMLX Grid
      1. The DHTMLX grid
      2. The grid methods and events
        1. Initialization choices
          1. Initialization on a DOM element
          2. Initialization on a cell object
        2. Grid methods
          1. attachGrid
          2. setImagePath
          3. setHeader
          4. setInitWidths
          5. setColAlign
          6. init
          7. addRow
          8. setColTypes
          9. getSelectedRowId
          10. clearSelection
          11. clearAll
          12. parse
        3. Grid events
          1. onRowDblClicked
          2. onRowSelect
      3. The application code
        1. Create the grid
        2. callbacks.setToolbarItemStates
        3. callbacks.removeClick
        4. callbacks.refreshGrid
        5. callbacks.dataChanged
      4. Testing the grid
        1. Creating a user
        2. Removing a user
      5. Summary
    14. 7. The DHTMLX Window
      1. The DHTMLX window
      2. The methods and events
        1. Initialization
          1. Creating the base object
          2. Create windows through methods
        2. Methods
          1. createWindow (base object method)
          2. setDimension
          3. denyResize
          4. centerOnScreen
          5. setModal
          6. hide
          7. show
          8. setText
          9. hideHeader
          10. showHeader
        3. Events
          1. onClose
      3. The application code
        1. Creating the pop-up window
        2. callbacks
          1. showPopup
          2. hidePopup
          3. addClick
      4. Test our popup
      5. Summary
    15. 8. The DHTMLX Form and Calendar
      1. The DHTMLX form
      2. Initialization of the DHTMLX form
        1. attachForm
          1. Form items and attributes
            1. settings
            2. input
            3. hidden
            4. checkbox
            5. calendar
            6. select
            7. button
            8. block
            9. newcolumn
        2. Form methods
          1. setItemFocus()
          2. validate()
          3. clear()
          4. enableLiveValidation()
          5. setFormData()
          6. getFormData()
      3. The application code
        1. app.js
          1. callbacks
          2. showPopup()
          3. hidePopup()
          4. editClick()
          5. Edit the CSS form
          6. index.html
      4. Test the application form
      5. Summary
    16. 9. The DHTMLX Chart
      1. The methods and events
        1. Initialization of the DHTMLX chart
        2. dhtmlXChart()
        3. addChart()
        4. Methods
          1. refresh()
          2. add()
          3. define()
            1. Define a series
            2. Define chart type
          4. addSeries()
          5. idByIndex()
          6. get()
        5. Events
          1. onItemClick
      2. The application code
        1. Creating the chart
        2. callbacks.refreshChart()
        3. callbacks.dataChanged()
      3. Test the application
      4. Summary
    17. 10. The Finish Line
      1. Testing
        1. Troubleshooting
      2. More features
        1. Server side
        2. Adding icons
        3. Event tweaks
        4. Chart ideas
      3. Summary
    18. Index