xlab-6 experiments

Prado PHP5 VMWare Image

Wei — Tue, 02 Oct 2007 02:32:22 +0000

A virtual appliance (VWMare image ) with an installation of Prado 3.1 and the following components is now available.

PHP 5.2.3 (in fast-cgi mode)
Lighttpd 1.4.7 (mod_rewrite and fast-cgi enable)
Prado 3.1 (including demos)
PostgreSQL 8.2.4
phpPgAdmin 4.1.3
Linux kernel 2.6.17.7

The appliance also contains networking tools such as ssh, dhcp, scp, etc. The appliance contains 2 disk images, the server disk is mounted as read-only while the data disk can grow to 4Gb.

This virtual appliance is a great way to demonstrate Prado 3.1, or functional testing, or even as an development platform.

Download Prado PHP5 Virtual Appliance (9.45 Mb).

The virtual appliance image is compressed using 7-Zip, and a VMWare player or server is required to load the image.

The login credentials are admin:admin for all areas that requires authentication (e.g. server login, database, cache).

Redo of Prado Blog Tutorial Videos

Wei — Tue, 02 Oct 2007 01:42:42 +0000

The complete Prado blog tutorial is now updated. Split over 6 videos to a sum of about 60 mins in total. Flash plugin is required.

Day 1 - Creating a Contact Page [8:02 (4.6 Mb)]
Day 2 - Setup Database [4:36 (3.9 Mb)]
Day 3 (a) - Authentication and Authorization [10:42 (4.5 Mb)]
Day 3 (b) - Create and Edit Users [9:09 (6.1 Mb)]
Day 4 - Create, Edit and Read Posts [23:10 (9.9 Mb)]
Day 5 - Refactoring and Deployment [6:45 (4.2 Mb)]

Days 3 (b) and Day 4 diverts from the original tutorial to use the Active Record Scaffold to speed up the development.

You can also download the videos (24 Mb) to view at your own time.

There is currently no narration at the moment, but transcripts are available if you would volunteer your voice.

PS. The text editor used in the screen case is Intype which is currently free (may be not so later when the complete it). The Prado bundle for Intype and the theme used in the screen cast are also available.

Prado video tutorials

Wei — Sat, 12 May 2007 02:21:40 +0000

Here are some screen casts following the blog tutorial demos included in the Prado 3.1 Release Candiate (the demo that is, not the videos).

Blog tutorial day 1 [10 mins (4.8 Mb)]
Blog tutorial day 2 [4.5 mins (2.4 Mb)]
Blog tutorial day 3 part 1 [8 mins (3.8 Mb)]

In addition, the following is a demonstration of Prado’s Active Record and Scaffold components.

Address book scaffold [4.5 mins (2.4 Mb)]

Vertical Image Alignment Using CSS (Firefox and IE)

Wei — Thu, 02 Nov 2006 04:19:07 +0000

Here is a quick way to centre an image within a

box using only CSS (and using css expression for Internet Explorer).



    </span></a></span>Vertical Image Alignment<span class="sc2"><span class="kw2">
     type="text/css">
.content
{
    width: 100px;
    height: 100px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid red;
}
 
.content img
{
    margin-top: expression((100 - this.height)/2);
}
    

 

 class="content">
     src="images/thumb3.jpg" />

The .content class creates a box of width 100×100 pixels. We set the display property to table-cell and take advantage of the vertical-align property available for table cell (this works in browsers such as Firefox) to center the image vertical in the box. Unfortunately, Internet Explorer versions up to 7 does not support display: table-cell. However, we can use dynamic CSS attributes to set the margin-top property of the image.

margin-top: expression((100 - this.height)/2);

The above code calculates the margin-top property to center vertically the image inside the box. The context of the this within the expression is the HTML element of the CSS selector.

Screencast: Using PDO with data grid.

Wei — Fri, 08 Sep 2006 00:16:08 +0000

Here is a very basic introduction to retreiving some data from a MySQL database using PDO and displaying the results in a data grid. The tutorial starts assuming that you have downloaded and unpacked the Prado distribution.

The tutorial is meant for the quickest introduction in retreiving data. Generally, you will need to refactor the code such that the logic of retrieving data is moved away from the TPage classses.

Screencast details:

length: approx ~ 3.5 mins (1.5 Mb)
format: flash 7 or later
download swf (1.5Mb)

Comments and suggestions most welcome.

Prado Time Tracker Demo

Wei — Sat, 29 Jul 2006 00:28:03 +0000

A new demo that utilises many of Prado’s features has been added to the trunk. The Time Tracker is a business web application for keeping track of hours spent on a project, with ability to handle multiple resources as well as multiple projects.

The time tracker sample application have the following key features:

Define project information like due dates, hours to complete, project resources, and more.
Track time spent each day by category and project.
Generate progress and team resource reports across multiple projects.

The Time Tracker is based on the ASP.NET's Time Tracker Starter Kit

See the Prado demo http://xlab6.com/p3/demos/time-tracker/

Technologies and Design Approached Demonstrated

Prado event-driven component framework
Separation of concerns: persistent storage, business logic, presentation
Object-Relational mapping using SQLMap
Unit testing and functional testing
Promote code reuse

The demo is available in the daily snapshots from Prado's download page, or via SVN (see instructions from the download page).

Unit and Functional Test tools in Prado.

Wei — Mon, 10 Jul 2006 01:23:17 +0000

Many of Prado’s web controls are testing using a web functional test based on combination of Selenium and SimpleTest. Here is an screencast example of creating a unit test case and a functional web test case.

Screencast details:

length: approx ~ 4 mins (3 Mb)
format: flash 7 or later
download swf (3Mb)

ActiveControls: Callback Calculator example

Wei — Sat, 06 May 2006 10:29:26 +0000

An AJAX calculator example for Prado v2.1x was done a few months ago. The same can now be done in Prado v3 using the latests code from the SVN trunk.

To begin, we create the template with 3 textboxes and a button. Save the template file as, say, Calculator.page

<com:TForm>
<com:TActiveTextBox ID="a" />
+
<com:TActiveTextBox ID="b" />
=
<com:TActiveTextBox ID="c" />
 
<com:TActiveButton ID="sum"
                OnClick="calculate_sum" Text="Calculate!" />
com:TForm>

The corresponding Calculator.php file is very simple.


//include the active controls namespace
Prado::using('System.Web.UI.ActiveControls.*');
class Calculator extends TPage
{
    public function calculate_sum($sender, $param)
    {
         $a = floatval($this->a->Text);
         $b = floatval($this->b->Text);
         $this->c->Text = $a + $b;
    }
}
?>

That’s all there is to it, run the application from your browser. The calculator will function normally if javascript is disabled. We can also add some validators to ensure that both summand are entered before calcuating the sum. To do this, we simply add two validators and a summary to Calculator.page.

<com:TForm>
<com:TActiveTextBox ID="a" />
+
<com:TActiveTextBox ID="b" />
=
<com:TActiveTextBox ID="c" />
 
<com:TActiveButton ID="sum"
                OnClick="calculate_sum" Text="Calculate!" />
 
<com:TRequiredFieldValidator
                ControlToValidate="a"
                ErrorMessage="left summand is required."
                Display="None" />
<com:TRequiredFieldValidator
                ControlToValidate="b"
                ErrorMessage="right summand is requied."
                Display="None" />
 
<com:TValidationSummary
                ID="summary"
                HeaderText="Unable to calculate because" />
com:TForm>

The resulting calculator example will utilize javascript if available and remain functional if javascript is unavailable.

Creating new Prado components by template composition

Wei — Wed, 25 Jan 2006 11:33:32 +0000

Update (28/4/2006): You must extend TCompositeControl abstract class rather than TTemplateControl.

One of the easiest method of creating a new custom component is by template composition. For example, suppose we want to create a labelled textbox component, that is, a textbox component with a label attached. Let us call this new component LabeledTextBox.

First, create the template for the new proposed component and save the file as LabeledTextBox.tpl1).

<com:TLabel ID="label" ForControl="textbox" Text="label:" />
<com:TTextBox ID="textbox" />

Second, we eed a PHP class to expose the textbox and label properties. Component with templates must extend the TCompositeControl class. Save the PHP file as LabeledTextBox.php.


 
class LabeledTextBox extends TCompositeControl
{
    /**
     * @return TTextBox textbox instance
     */
    public function getTextBox()
    {
        return $this->textbox;
    }
 
    /**
     * @return TLabel textbox label
     */
    public function getLabel()
    {
        return $this->label;
    }
}
 
?>

That completes the custom component definition. If you have saved the about code to a certain directory, you must include them in the namespace before using them.

Finally, the usage of this new component is very simple, just use them like all other components.

<com:LabeledTextBox Label.Text="username:" />
/>
<com:LabeledTextBox Label.Text="password:" />

Notice that Label.Text is a sub-property, where the Label property belongs to LabeledTextBox and corresponds to the getLabel() function. The sub-property (or property of another property) Text is a property of TLabel component.

The addition of sub-properties in Prado v3 makes component template composition really simple and effective. So, try it and create some new custom component by grouping together your oftened used components through template composition.

1) Component templates have .tpl file extension by default.

New TDatePicker for Prado v3.0

Wei — Fri, 20 Jan 2006 07:20:08 +0000

Since Prado 1.0 the TDatePicker component used the feature rich javascript calendar from http://www.dynarch.com/projects/calendar/. There are a few problems with this calendar, namely, it was difficult to localized (i.e., a calendar in your own language).

Example: see the functional test for the date picker.

So for Prado v3.0 a new client-side calendar or date picker was written. It was written long before v3.0 began, during the v2.0 days. It was inspired from the Taperstry's date picker, and more recent Unobtrusive Date-Picker Widgit.

Here are the features for the new TDatePicker for Prado v3.0

Lite weight, well compared to more featured one ;)
No additional localization necessary, uses existing I18N data from ICU
Keyboard navigation, see below
Works in IE and Firefox, unsure about others

Keyboard access

Left, Right, Up, Down = day navigation (these are the arrow keys)
Ctrl or Shift + Up = next year
Ctrl or Shift + Down = previous year
Ctrl or Shift + Right = next month
Ctrl or Left = previous month
Esc = close date-picker (no date selected)
Return = select highlighted date and close date-picker

Usage in Prado v3.0 is similar to the v2.x, e.g.

   <com:TDatePicker />

Have fun!