My first xQuiD App
From xQuidWiki
One of the greatest features of xQuiD is the ability to create new widgets from its original components. On this first application we will instantiate a new widget from a widget factory declared in the same web page. Although this is the easier way to get started with xQuiD, if you intend to reuse your code in several web pages or applications, we recommend to create a new widget type. If you want to learn how to define new reusable widget types, we recommend to take a look to " How to create a new widget from xQuiD default components".
Let's go to make our first widget, called "Hello". This widget will be formed by:
- A panel where to place the other components.
- A "Say Hello!" button.
- A text area, denominated as textboxmulti' in xQuiD.
This widget will throw an alert everytime we click on the "Say Hello!" button. The text displayed by the alert window will be the same as the present in the textboxmulti component.
Before starting to code our "Hello" widget factory, we need to import xQuiD Kernel library and all required components (or xQuiD modules).
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="kernel:baseURI" content="."/> <meta name="kernel:import" content="xquid.utils.parts"/> <meta name="kernel:import" content="xquid.chips.composite"/> <meta name="kernel:import" content="xquid.chips.button"/> <meta name="kernel:import" content="xquid.chips.textboxmulti"/> <title>Hello xQuiD!</title> <script language="JavaScript" type="text/javascript" src="xquid/kernel.js"></script> </head> </html>
Note that to get all required xQuiD components we use an special meta tag, understandable by xQuiD:
<meta name="kernel:import" content="xquid.chips.composite"/> <meta name="kernel:import" content="xquid.chips.button"/> <meta name="kernel:import" content="xquid.chips.textboxmulti"/>
Another meta tag is used to declare the base URI from wich resources will be loaded. In this case, all the application resources will be loaded from a path relative to the folder where our page is located:
<meta name="kernel:baseURI" content="."/>
In addition to our three required visual components, we have a fourth kernel:import declaration. This is to provide to xQuiD the ability to parse our new "Hello" widget.
<meta name="kernel:import" content="xquid.utils.parts"/>
Now we are prepared to start coding our new "Hello" widget. First of all we have to declare a new widget factory, wich we will use to create the widget and display it on the screen:
var factory={};
Since our widget will be based in a flat panel (xquid.chips.composite), will tell our factory to instantiate it:
var factory={
'$type$':'xquid.chips.composite'
};
Once our panel is declared, we can tell him to host the text area where messages will be writen:
var factory={
'$type$':'xquid.chips.composite',
'helloTextArea': {
'$type$':'xquid.chips.textboxmulti',
// Initialize value of this text area
'value':'Hello xQuiD'
}
};
Now add the button to the panel:
var factory={
'$type$':'xquid.chips.composite',
'helloTextArea': {
'$type$':'xquid.chips.textboxmulti',
// Initialize value of this text area
'value':'Hello xQuiD'
},
//Add a button inside the panel
'sayHelloButton':{
'$type$':'xquid.chips.button',
// Configure button's text
'text':'Say Hello!'
}
};
By now we have all widget components declared but like now it will look very ugly on the screen. To make it look nicer we have to resize and positionate all the components properly:
var factory={
'$type$':'xquid.chips.composite',
// Configure panel dimensions, 400x300 px
'width':400,
'height':300,
'helloTextArea': {
'$type$':'xquid.chips.textboxmulti',
// Initialize value of this text area
'value':'Hello xQuiD',
// Configure text area dimensions, 360x200 px
'width':360,
'height':200,
// Position text area relative to parent
'x':20,
'y':20
},
//Add a button inside the panel
'sayHelloButton':{
'$type$':'xquid.chips.button',
// Configure button's text
'text':'Say Hello!',
// Adjust width to 100px
'width':100,
// Position button relative to parent
'x':280,
'y':240
}
};
Our widget is taking shape but is not capable to say hello yet, so we have to add a method to display an alert window with our "hello" message:
var factory={
'$type$':'xquid.chips.composite',
// Configure panel dimensions, 400x300 px
'width':400,
'height':300,
'helloTextArea': {
'$type$':'xquid.chips.textboxmulti',
// Initialize value of this text area
'value':'Hello xQuiD',
// Configure text area dimensions, 360x200 px
'width':360,
'height':200,
// Position text area relative to parent
'x':20,
'y':20
},
//Add a button inside the panel
'sayHelloButton':{
'$type$':'xquid.chips.button',
// Configure button's text
'text':'Say Hello!',
// Adjust width to 100px
'width':100,
// Position button relative to parent
'x':280,
'y':240
},
// This method performs the hello
'doHello':function(onClickEv)
{
var helloMsg=this.helloTextArea.value;
alert(helloMsg);
}
};
Our widget factory is finished so now we can proceed to instantiate our widget and attach the button onClick event to the "doHello" button:
function initMyPage()
{
try{
var hello1=factory.newPart();
hello1.sayHelloButton.addOnClickListener(hello1.doHello, hello1);
hello1.render('parentDiv');
var hello2=factory.newPart();
hello2.sayHelloButton.addOnClickListener(hello2.doHello, hello2);
hello2.$set('x', 420);
hello2.helloTextArea.$set('value', 'Hello World !');
hello2.render('parentDiv');
}catch(err){
alert(err+":"+err.message);
}
}
What are we doing here? First of all we create a new "Hello" widget instance by calling the factory newPart method:
var hello1=factory.newPart();
xquid.utils.parts module has created an addXXXLister for each widget event (XXX is the name of the corresponding event). Calling the addXXXListener for the button's onClick event, we attach our doHello method to the onClick event:
hello1.sayHelloButton.addOnClickListener(hello1.doHello, hello1);
Finally, we render "Hello1" to display it on the screen, within de parentDiv node, at the desired position:
hello1.render('parentDiv');
Do the same with "Hello2" setting his value to "Hello World" instead its default value "Hello xQuiD" and positioning it 420px to the right. Those property settings are modified calling the $set function of each widget component (property "x" of the panel and property 'value' of the text area):
hello2.$set('x', 420);
hello2.helloTextArea.$set('value', 'Hello World !');
By now, we have coded all the JavaScript, but if we load our application in his current state, nothing will happen. Two more steps are necessary to make the application work:
- We need a parentDiv node in the body of our application's web page
- We have to tell xQuiD to initialize our application calling the "initMyPage" method
Creating a div node is as easy as shown in the following code snippet:
<body style="border: 0px solid;width:100%;height: 100%;margin:0px;padding:0px;position:absolute"> <div id="parentDiv" style="margin:0px;padding:0px;top:0px;left:0px;width:100%;height:100%;border-style:none;border-width:0px;position:absolute;"> </div> </body>
xQuiD needs to be aware of the existence of the "initMyPage" function. An special meta tag in the head node is used to tell xQuiD how to initialize your application:
<meta name="kernel:init" content="initMyPage();"/>
In this first application we have instantiated two "Hello" widgets from a factory. This has been useful to show how easy is to instantiate a new widget assembling some xQuiD basic components. Now, since you know some basics about widget assembling using a factory, we encourage you to start creating new reusable widgets, following the proper steps for wich xQuiD has been conceived.
Download
Download the full code of this tutorial from sourceforge, ready to run in your computer.
