Documentation

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

Getting Started


Using jqComponents in your own web apps requires the following steps:

  1. Include jQuery in your web app.
  2. Include jComponents in your web app.
  3. Add components and modules to your web app.

Each of these steps will be explained in more detail below.

To give you a feeling for what it requires to use jqComponents in your web apps, here is a full HTML page example:

<!DOCTYPE html>
<html>
<head>
    <script  src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script  src="/js/jqc/1.7.0/jqc-all.js"></script>
    <link   href="/js/jqc/1.7.0/jqc-all.css" rel="stylesheet" type="text/css">
</head>

<body>

</body>
</html>

Each part of this HTML page example will be explained in the sections below.

Include jQuery In Your Web App

jqComponents uses jQuery internally. Therefore you need to include jQuery in your web app for jqComponents to work. jqComponents is tested to work with jQuery 1.10.2 and forward. If you are new to jQuery, here is my jQuery tutorial .

Including jQuery in your web app can be done in several ways. One way is to download jQuery into a directory in your web app, and include a <script> element in the <head> section of your HTML file, pointing to the jQuery JavaScript file. Here is an example <script> element:

<script src="/js/jquery/1.11.1/jquery-1.11.1.min.js"></script>

Another way is to reference jQuery via a CDN, like this:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

Using a CDN is better explained on jQuery's download page.

Remember to use the right version of jQuery - the version you plan to use in your web app.

Include jqComponents In Your Web App

In order to use jqComponents in your web app you must first download it. jqComponents can be downloaded in many different versions. Choose a stable version (see release comments next to the downloads in the download list). You can download jqComponents from the jqComponents download section.

As mentioned it is recommended that you download a stable version of jqComponents, but you can download any version you like. If your app need the latest features it may make sense to download a development version. However, it is strongly recommended to use the stable releases in production, and not the development versions.

Once you have downloaded a version of jqComponents, unzip it into its own folder in your web app. For instance, into /js/jqc/version where version is the version number of jqComponents that you have downloaded. For instance:

/js/jqc/1.7.0/

In order to use jqComponents you must reference it inside your web app in the HTML page(s). In order to do that, put the following in the <head> section of your HTML page:

<script  src="/js/jqc/1.7.0/jqc-all.js"></script>
<link   href="/js/jqc/1.7.0/jqc-all.css" rel="stylesheet" type="text/css">

Remember to replace the version numbers in the above directory paths with the version number you created when you unzipped jqComponents into your web app.

jqComponents need the jqc-all.js JavaScript file in order to work. Some of the components also need some CSS to work properly. This is included in the jqc-all.css file. It is not a lot of CSS though. jqComponents leaves styling up to you, so only the CSS that affects behaviour (e.g. for layout) is included in this CSS file.

Add Components And Modules to Your Web App

In order to get jqComponents to do anything interesting you must add components and / or modules to the page controller.

Components are JavaScript objects which are reusable across multiple applications. Examples are GUI components.

Modules are application specific JavaScript objects. Modules are where you bootstrap your application, and where you put your application specific functionality.

Adding a Component

The easiest way to add a component to your page is via an HTML element and the jqc-type attribute. Here is an example:

<span id="myLabel" jqc-type="jqcLabel"></span>

This example turns a span element into a jqcLabel component. Actually, the page controller instantiates a jqcLabel component and attaches the span element to it. The page controller does that as part of its boot process. The span element could be located anywhere in the HTML page where jQuery can find it (this typically means somewhere inside the body element).

Adding a Module

The easiest way to add a module to your application is via an HTML element. An empty span element is preferable because it doesn't affect the look of your page. Here is an example:

<span id="myModule" jqc-module="bootModule"></span>

This span element makes the jqcPageController look for a module factory function with the name bootModule. This module factory function creates a JavaScript object with a set of module boot phase functions on, plus any other functions the module needs to do its job.

Here is an example module factory function:

<script>

function bootModule() {
    var module = {};

    module.postRender = function() {
        module.jqc.pageController.components.myLabel.setHtml("It's alive!");
    }

    return module;
}
</script>

The module JavaScript object can contain one or more page boot phase functions. Each page boot phase function is executed a different points in the page controller's boot process. The example above contains a postRender() function which is executed after all components are done rendering themselves initially.

The postRender() function accesses the myLabel component via the page controller and sets its HTML to It's alive!.

The HTML Page Including Component And Module

Here is how the HTML page from earlier looks including the component and module added above:

<!DOCTYPE html>
<html>
<head>
    <script  src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script  src="/js/jqc/1.7.0/jqc-all.js"></script>
    <link   href="/js/jqc/1.7.0/jqc-all.css" rel="stylesheet" type="text/css">
</head>

<body>

<span id="myLabel"  jqc-type="jqcLabel"></span>
<span id="myModule" jqc-module="bootModule"></span>

<script>

function bootModule() {
    var module = {};

    module.postRender = function() {
        module.jqc.pageController.components.myLabel.setHtml("It's alive!");
    }

    return module;
}
</script>

</body>
</html>

Now that you have seen what it takes to use jqComponents in your web apps, it is time to learn how jqComponents works internally in more detail.