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