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

Your First App

Once you know how jqComponents works internally (as explained in the design overview and page controller boot process), you are ready to implement your first app with jqComponents. This text will take you through that exercise.

The HTML page

The first thing you need is the HTML page which will contain the application. Here is the HTML code for that:

<!DOCTYPE html>
<html>

<head>
</head>

<body>
</body>

</html>

This is a completely empty HTML page to keep the app very simple.

Including jQuery and jqComponents

The second thing you need to do is to include jQuery and jqComponents in your HTML page. You will need to download jqComponents first. Once that is done, here is an example of how to include jQuery and jqComponents in the above HTML page:

<!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>

Once you have included jqComponents in your page, the JavaScript file jqc-all.js will wait for the document to be ready, and then create a jqcPageController and boot it. The jqcPageController then takes care of instantiating and configuring both components and modules.

The jqcPageController is accessible via the global variable pageController, but most often you will not need to access it via this variable. Components and modules have access to the page controller via a jqc property which is set on them by the page controller. You will see that later.

Adding a Component

Now that we have included jqComponents in the page, it is time to add a component to the app. We will add a simple label (jqcLabel). Here is how the HTML page looks with a label added:

<!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>    

</body>

</html>

The jqcPageConroller finds this component when it boots. It does so by scanning the HTML page for HTML elements with a jqc-type attribute. All such elements are considered to be components.

When the jqcPageController finds this components it checks its own factories object for a factory function registered with the same name as the value of the jqc-type attribute. All of jqComponents' own component factories are already registered internally in the page controller. If you want to use your own components, you need to register them. That is covered in the text about components.

Once the component is instantiated it is available via the components property on the jqcPageController instance. The property name the component gets inside the components object is the value of the component element's id attribute. You will see that later.

Adding a Module

Modules are where we keep our application specific code, so we will add a module to the app. Here is how the HTML page looks after that:

<!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="myModule"></span>



<script>
function myModule() {
    var module = {};

    module.postConfigure = function() {
        module.jqc.pageController.components.myLabel.setHtml("New label text");
    }

    return module;
}
</script>

</body>

</html>

The jqcPageController will find this module by scanning the web page for HTML elements with a jqc-module attribute. This is done when the page controller boots.

The page controller will look for a factory function with the same name as the value of the jqc-module attribute. This factory function returns a JavaScript object which represents the module. The module can contain any function you want, as well as some special boot phase functions which are called at different stages in the page controller's boot process.

The module in our app only contains a postConfigure() function because we don't need to hook into any other boot phases. Inside the postConfigure() function the module calls the setHtml() function on the jqcLabel component. Notice how the module access the label component via the module's jqc object which contains a reference to the page controller. Via the page controller the module can access all named components in the app.

Next: Page Controller