mip’s blog

Hi everyone!

This is the second introductory post to Xtirer 0.2 Beta. After you have installed Xtirer, now let’s move on to the first steps of using it.

Let’s read some data from a database and return the resulting XML.

But first some notes on how Xtirer is working and why:
Xtirer was born due to the need of having various XML output from a database to be read by Flash or Openlaszlo.

Usually the XML you need looks like this:

<rootnode>
  <parentnode attribute1="abcd" attribute2="1234">
    <childnode attribute="14.5.98">Some longer textnode </childnode>
  </parentnode>
  <parentnode attribute1="efgh" attribute2="5678">
    <childnode attribute="178.3812">Some other longer textnode </childnode>
  </parentnode>
  ...
</rootnode>

So the idea was why not have a Prototype file describing one XML object and indicating where in the database to get the data from and replicating this object as many times as there are entries in the database. So that’s the basic idea behind Xtirer.

Ok, let’s have a basic mysql table called “animals” containing the following columns (taken from mysql.org tutorial):

+---------+-------------+------+-----+---------+-------+
| Field   | Type        | Null | Key | Default | Extra |
+---------+-------------+------+-----+---------+-------+
| name    | varchar(20) | YES  |     | NULL    |       |
| owner   | varchar(20) | YES  |     | NULL    |       |
| species | varchar(20) | YES  |     | NULL    |       |
| sex     | char(1)     | YES  |     | NULL    |       |
| birth   | date        | YES  |     | NULL    |       |
| death   | date        | YES  |     | NULL    |       |
+---------+-------------+------+-----+---------+-------+

And we want to have a list of all animals indicating name, owner, etc. as a XML-Output. The wrapping xml-object is called “animallist”. So the XML-Prototype file should then look like this:

<animallist>
 <xml_object name="pat" source="TABLE.animals">
   <xml_object name="name" valueof="COLUMN.name"/>
   <xml_object name="owner" valueof="COLUMN.owner"/>
   <xml_attribute name="species" valueof="COLUMN.species"/>
   <xml_attribute name="sex" valueof="COLUMN.sex"/>
   <xml_attribute name="birth" valueof="COLUMN.birth"/>
   <xml_attribute name="death" valueof="COLUMN.death"/>
  </xml_object>
</animallist>

Save the file into your prototypes directory and if you now call xtirer.php?menuname=animals you should get the following output (click right and select show source or something equivalent):
 

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<animallist>
 <pat species="dog" sex="0" birth="2008-07-11" death="2016-07-22">
  <name><![CDATA[chaco]]></name>
  <owner><![CDATA[mip]]></owner>
 </pat>
 <pat species="cat" sex="1" birth="2007-07-20" death="2016-07-07">
  <name><![CDATA[lurch]]></name>
  <owner><![CDATA[ronzo]]></owner>
 </pat>
 <pat species="ape" sex="0" birth="1997-07-04" death="2007-07-17">
  <name><![CDATA[chimpike]]></name>
  <owner><![CDATA[lornand]]></owner>
 </pat>
</animallist>

I hope it’s somehow visible what has happened:

Xtirer takes the prototype file and scans it for xml-objects / tags it knows. In this case they are the xml_object and xml_attribute tags. The xml_object defines a tag and xml_attribute as the name already says, defines an attribute. In this example i’ve only used three attributes controlling the behaviour of the elements – source, valueof and name.

@ source: If an xml_object or xml_attribute contains such, a new query is build referencing the TABLE indicates – here TABLE = animals

@ valueof: defines the table COLUMN to insert into this object / attribute

@ name: the name / tagname of the xml-object or attributename.

Ok, i stop here for now, but there is much more to come. So check back and have fun with Xtirer.

Hey folks!

After releasing xtirer 0.2 beta here are some hints how to use it. First i start with explaining how to install xtirer. It’s quite easy as with every PHP-based tool:

0. Xtirer should be working on any webserver having PHP 4.1 or higher and MYSQL 3.3 or better (and some webspace you can access – obviously )

1. Download your copy at http://sourceforge.net/projects/xtirer

2. unzip the package

3. and copy it to your website / web dev folder

4. edit the config.example.inc.php and save it as config.inc.php
What to edit:
$DB_SERVER = "http://the.url.of.your.mysql.database";
$DB_FRAME = "The_Name_of_Your_Database_Frame";
$DB_USER = "database_username";
$DB_PSWD = "database_password";

// advanced settings:
$XTIRER_PROTO_EXT = "file_extention_of_your_prototype_files"; (default is ".proto")
$XTIRER_PROTO_DIR = "/directory_where_to_get_prototype_files_from"; (!! leading / !!)
$XTIRER_PROTO_HTTP_NAME = "The_http_variable_containing_the_prototype_file_name";


5. (if you haven’t) create that prototype directory

6. create your prototype files

7. and finally start using Xtirer by calling www.myserver.com/xtirer/install/path/xtirer.php?menuname=prototype_filename

Next, i’ll introduce you to reading data from the database. So check back soon!

Hups, yes, that was coming pretty late and soon for me. But nevertheless since yesterday evening xtirer 0.2 beta is available at sourceforge.

This release has been tested in 3 client projects and has a ton of feature enhancement over the first alpha.
You can not only read data, but also alter and delete entries in your favourite MYSQL Database. A standardised handler system gives you the possibility to add your own code to the query logic.

A primer introduction will soon follow – ’cause it’s the only thing missing from this release >:|.

So stay tuned and check it out at http://sourceforge.org/projects/xtirer

Ok, after introducing my OL Filebrowser class, here is part 2 to answer most of the possible questions about using this class:

Attributes

Despite the general attributes applible to an object of the OL window class the following attributes have been implemented:

• DirPath: The starting directory on the server – aka the root you like to show
• SrcPath: The URL to call for getting the directory listing
• callAttributes: If you require additional parameters added over the script providing the directory listing, define an object with attribute-value pairs like here:
  callAttributes="${{menuname:'read_mediadir'}}"
• autoclose: if a file is selected the window closes automatically. If this behaviour is not wishful, turn it of by setting it to false; Default: true.
• value: if a file was selected, this attribute contains the filename

Methods

These are just the major methods you’re going to use during normal usage:

• open: Opens the window and loads the current directory again. So selection is resetted
• takeSelection: Parameters: [func:Function], [target:Object]
  The closing function of the class. Sets the value of the Object to the selected document (if any) otherwise null. If [func] and [target] is set, the function [func] is called as a method of [target] and with the path of the selected document as parameter.
  If autoclose is true, the window is closed.
• getCurrentDir: returns the full current directory path starting with the directory specified in DirPath

XML input

The object uses the standard HTTP request of its “fileListSet” dataset. A parameter “dir” is set to the path of the directory to read and the callAttributes are added if there are any.

The Response of the serverside script then should look like this:
<list>
<file type="DS_Store" size="12292" date="2008-04-08 08:44:12">
<name><![CDATA[.DS_Store]]></name>
<full><![CDATA[/Users/myuser/path/to/file.jpg]]></full>
</file>
<file type="directory" size="476" date="2007-10-02 22:15:43">
<name><![CDATA[classes]]></name>
<full><![CDATA[/Users/myuser/path/to/dir]]></full>
</file>
</list>
The structure is quite straight forward. The filesize is in bytes and is converted into KB or MB by the object. The type attribute can have any value. Only “directory” is important to identify directories.

Ok, my last post was about 12 Month ago. Ay, hard times since then, but i’ve developed my openlaszlo skills and today i’m proud to introduce my first really useful openlaszlo class.

For a project i needed a decent file browser, showing the files on the webserver and letting the user to select a file. So, if you need something like that (see pictures below), go ahead and grab a copy of the filebrowser openlaszlo class files.

How to use:
1. Copy the filebrowser.class.lzx file and the filebrowser_buttons directory to your openlaszlo application directory

2. Include the class-file like every library:
<include href="filebrowser.class.lzx"/>
3. and put an instance on your canvas like here:
<filebrowserclass name="fileBrowser" x="20" y="20" width="600" height="400" DirPath="files/" SrcPath="http://localhost/path/to/xml/provider.php" callAttributes="${{menuname:'read_mediadir'}}">
<button text="Cancel" onclick="parent.close()"/>
<button text="Select" onclick="parent.takeSelected(Debug.write,Debug)"/>
</filebrowserclass>


Yep, that’s it.

Ok, i know you’ll still have more questions, so i’ll post a short FAQ on the next post.

Ok, maybe i’m not the brightest person around, but some things were not clear for me and i couldn’t find it in the lzx manual. So I decided to write this additional faq, and maybe it helps somebody.

To evaluate the value for you, i just provide a short info about my programming background to compare: I got excellent skills in flash, actionscript and php, i’m a decent html and css editor, know lots about C, C++ and Objective C and i’m quite familiar with Java.

Now, let’s get it on!

#1 How do I address Objects below the hierachy line?
Yeah, i struggled with this a bit, ’cause most examples address objects in the parent.
Just use the subNodes array which every object inheriting the LzNode class has.

#2 I’m setting an Object Attribute, but nothing happens. What’s wrong?
There is i.e. the visible attribute and if you set it (like you are used to from flash or java) nothing happens. This is quite wired at first glance and it has to do something with a missing screen update. Because if you check the attribute after setting it via the debug window, everything seems fine, but it doesn’t look like it! Best and only solution is looking for a setter function (i.e. setVisible()) or using the more general setAttribute function. Read more on attributes and getting/setting them here.

# 3. formatted text displaying weird
Ok, maybe you’ve something like this in your source:
<text><font size="16">some text...</font></text>
and the whole thing is cut horizontally, then maybe you should try replacing it by this:
<text fontsize="16">some text...</text>
This may work better because the compiler does the correct text size calculation in the second case. In the first the size of the textnode is calculated on basis of the surrounding font definitions.

# 4. Richtexteditor or how to get text selection
For a client project i needed a richtexteditor and thought, cool, there is a component called "richinputtext", so let’s use that. You can set the textformat of all or parts of the text with a LzTextFormat object and its setTextFormat method. But for that you need to have the selection coordinates (starting index,length).

I first tried to use the onfocus and onblur events to get the selection attributes, but no success, because the selection gets lost before the onblur event fires and onblur only gets called when not using the mouse.
Secondly I tried using a mouseevent on the object for detecting mouseactions and storing the selection, but then you can’t select any text in the inputfield.
Finally, after wasting couple of hours this is my solution:

<richinputtext name="content" width="300" height="150">
<attribute name="sel_start" value="-1" type="number"/>
<attribute name="sel_length" value="-1" type="number"/>
<handler name="onblur">
this.sel_start = -1;
this.sel_length = -1;
</handler>
<method name="checkSelection">
if (this.getSelectionPosition() != -1) { this.sel_start = this.getSelectionPosition(); }
if (this.getSelectionSize() != -1) { this.sel_length = this.getSelectionSize(); }
</method>
<button text="bold" onmouseover="content.checkSelection()" onclick="content.setFormat('bold')"/>

Usually you have buttons or some other input objects to set the format of the text or process on. You will have to use the onmouseover of these objects to call a function storing the selection data. The onmouseover of the formatting button is preceeding the onblur of the inputfield and onclick (obviously) of the button. Since the user has to do these movements this is the simplest solution, i guess.

# 5. Selections and clearSelection madness
In my project i’ve a list with listitems that are extentions of the normal baselistitem class.
My listitem uses the onselected event to open a subpage and animate that page.
I can go back to another page and clean up i disselect the listitem and revert the animation.
I used the clearSelection function on the list object. When clearSelection is called the onselected event is fired allthough this is not what mankind usually expects. To have a workaround use the getSelection function of the parenting object and check whether it is an object or null. Try the code and see:


<canvas debug="true" layout="axis:y">
<class name="mylistitem" extends="listitem">
<text text="sometext" width="100"/>
<handler name="onselected" args="what">
Debug.write(what);
Debug.write(this.parent.getSelection());
</handler>
</class>
<list name="newslist">
<mylistitem/>
<mylistitem/>
<mylistitem/>
<mylistitem/>
</list>
<button onclick="newslist.clearSelection()" text="clear"/>
</canvas>


information wants to be free.

read more | digg story