1 Getting Started
2 Design Overview
3 Page Controller Boot Process
4 Your First App
5 Page Controller
6 Modules
7 Components
8 jqcEmpty
9 jqcLabel
10 jqcButton
11 jqcLayer
12 jqcPanelDeck
13 jqcAccordion
14 jqcProgressBar
15 Data Binding & Remote Data Synchronization
16 jqcDataService
17 jqcDataModel
18 jqcViewModel
19 jqcList
20 jqcTable
21 jqcForm
22 jqcResponsiveLayoutManager
23 jqcTreeList
24 Demos

Design Overview

This document matches version 1.6.0.

This text gives you an overview of jqComponents internal design and core concepts. When you understand the design and core concepts you will it is much easier to use jqComponents.

Core Concepts

jqComponents is centered around the following core concepts:

These concepts are illustrated in the following diagram:

jqComponents design overview

A page is just a standard HTML page. It can contain a full, single page application, or be part of a multi page application.

A page has a page controller. The page controller handles the components and modules used in the page. In principle the components and modules could exist by themselves, but your application code gets cleaner with a designated page controller.

Components are reusable pieces of code. For instance, GUI components like labels, lists, tables, buttons etc. are all components. You can also have non-visual components like remote data services and timers.

Modules are application specific pieces of code. Modules are typically used to contain application bootstrap code (e.g. initializing the app with data read from remote data services), application specific form validation, and application specific reactions to events fired from components.

Modules will typically reference components directly, but components typically do not reference modules directly. Components usually communicate with the rest of the page via callback functions (events).

Both components and modules can be added to the page controller programmatically, or via HTML elements. It is easiest to add them via HTML elements and let the page controller add and configure them at the right phases in the page boot process.