The Files

• table_form.html  ::  This is our main HTML file.  It contains a HTML Table and a simple Form.
• table_form.php :: This is the php file which will process the form and return results back to our HTML page
• table_form.js :: This is the Javascript file which will handle submitting data to php and handle the response
• table_form.css :: basic css file to add styling

View a Demo

Download the full Source

I’ve tried to add detailed comments to the source code but if you have any questions just post them in the comments.

The Bare Bones : Row Injection

For those who are only interested in the table row injection here is a function which will get the job done and is crossbrowser. If you find otherwise let me know. The key here is instead of creating individual elements for tr and td and injecting them into the table, you create a full table element with a single row and inject that into your table.

var inject_row = function( table, data )
{
    var str = '';
    data.each(function(item, index){
        str += '<td>'+item+'</td>';
    });
    var tr = new Element('div', {
        html: '<table><tbody><tr>' + str + '</tr></tbody></table>'
    }).getElement('tr');
    tr.inject( table );
}

Example

Show Alert then Fade

Show Alert

To use Hot Flash Alert in your web site you’ll need to complete a few simple steps.

Step 1 : Include the required Javascript and CSS files in your web site header.

The Hot Flash Alert requires Mootools.js, hot_flash.js, and hot_flash.css .

Step 2 : Add the Alert Box DIV to your theme

The Hot Flash Alert is actually a div which sits in your web page until it is called.  It’s probably best to stick the div at the bottom of your web page so that it displays on top of any other absolutely positioned elements.

<div id="alert_box">
   <div id="alert_head">
      <a id="alert_box_x" href="#">close</a>
   </div>
   <div id="alert_box_message"></div>
</div>

You can customize the DIV anyway you want but it will require all four elements ‘alert_box’, ‘alert_head’, ‘alert_box_x’ and ‘alert_box_message’. The styling of these elements is handled by the hot_flash.css file.

Step 3 :  Call the hot_flash() javascript method

Once all the pieces are in place you can pop open the Hot Flash Alert by calling the hot_flash() javacript method.

 // text = the message that will be displayed
 // duration (optional) milliseconds to fade out the alert
 hot_flash( text, duration );

Here are some examples.

  // simple alert that fades out on it's own
  // over 2000 milliseconds ( or 2 seconds )
  hot_flash('hello world', 2000 );

  // simple alert with close button
  hot_flash('goodbye world');

It’s as simple as that.

Click here to view the demo application

Click here to view the demo source

The demo application starts out by displaying a form which has 2 input fields.  When submitted the value of the form is submitted to the PHP service which validates the submission and returns a response.  If there are no errors the results are displayed.

ClaireKerkness.mxml

The main application MXML file contains the ViewController and a ViewStack with both our FormView and ResultView as children. When the view controller dispatches the mainViewChange event a handler function changes the displayed view.

model/Views.as

This is a very simple Actionscript class which defines a couple of static constants to use as the names for our two views.

model/NameModel.as

A simple Actionscript class which we use as a data model.  When a response is returned we update this model.

NOTE: In this example our NameModel is a Singleton Class because we only want one instance.  This doesn’t have to be the case. You might want to create many instances of a data model if you expect many records of similar data.

views/FormView.mxml

FormView is an MXML component that contains a couple of form elements and a ClaireService component which is used to send a HTTPService request to the Kerkness backend. If an error is returned the error message is displayed.  If a response is returned we update the NameModel and change the currentView to our ResultView.

views/ResultView.mxml

ResultView is a simple MXML component which displays content from the NameModel.

kerk/module/demo/submitform.php

This is the PHP file which accepts our form submission. Check out the kerkness tutorials for details on how the kerkness framework handles requests.

PHP Source Code

if( ! $_POST['firstname'] || ! $_POST['lastname'] )
{
 	$kerk->throwError('Incomplete Submission...', true );
}

$fullName = $_POST['firstname']. ' ' .$_POST['lastname'];

$kerk->addContent('fullName', $fullName); 

• AlertTimer
  Based on the main Alert controller for Flex.  AlertTimer will display a countdown and automatically close after the desired number of seconds.
• AutoComplete
  My take on creating an AutoComplete text input component.
• ButtonPanel
  Button Panel puts a button in your panel.
• DateInput
  A simple TextInput which allows the selction of a date using a calendar pop-up.  Perhaps a redundant class but I didn’t like the look/feel of the default Flex component which provides the same functionality.
• LockImage
  A simple image component which displays a ‘Lock’ icon in either a locked or an unlocked state.
• TagInput
  Based on my own AutoComplete component, TagInput is good for editing a list of ‘tags’.
• Uploader
  Yet another file upload component.

ViewModel and ViewController

The main functionality behind the MVC approach in Claire is provided by the Singleton class claire.model.ViewModel and the component claire.controller.ViewController.  The ViewModel defines the

ViewController should be placed in your main application MXML file along with a ViewStack. The ViewController dispatches an event called ‘mainViewChange‘ every time the ‘currentView‘ property is updated in claire.model.ViewModel.

You’re main MXML file should contain a function which handles the event ‘mainViewChange‘ and changes the ‘selectedIndex‘ property of your ViewStack.

Because claire.model.ViewModel is a singleton class you can change the currentView at any time.

Demo Application

• Click here to view a demo application using Claire MVC approach
• Click here to view source code for demo application

In this example we are going to create a web service which returns a JSON formatted string. This request could be called from almost any type of AJAX or Javascrpt HTTP Request which expects a JSON formatted response.

Test the example: http://kerkness.ca/kerkdemo/hello.world

Example 1

Create the directory kerk/modules/hello/

Inside the ‘hello’ directory create the file ‘world.php’ and add the following to it.

<?php
    $kerk->addContent('myvar', 'Hello World');
?>

Now you can make a request for this service by calling http://kerkness.ca/kerkdemo/hello.world and see the following response

{"content":{"myvar":"Hello World"}}

Next

Creating your first HTML service request ]]> http://www.kerkness.ca/creating-your-first-json-service-request/feed/ 0 http://www.kerkness.ca/creating-a-web-page-from-multiple-requests-or-content-blocks/ http://www.kerkness.ca/creating-a-web-page-from-multiple-requests-or-content-blocks/#comments Tue, 16 Dec 2008 19:18:45 +0000 Kerk http://www.kerkness.ca/?p=248 In this example we are going to create a web page that uses a theme as well as several dynamic content blocks. The page theme will include a dynamic navigation menu and the main body of the page will include a random quote content block.

Test this example: http://kerkness.ca/kerkdemo/example.home

Example 4

If you haven’t done so already check out Example 1, Example 2 and Example 3.

Create folders and files

Create the following folders. kerk/modules/example and kerk/templates/example

Inside the kerk/modules/example folder create the files ‘home.php‘, ‘quote.php‘, ‘nav.php‘ and ‘theme.php‘. These will be the scripts that are executed to create the content for our page.

Inside the kerk/templates/example folder create a similar set of files. ‘home.php‘, ‘quote.php‘, ‘nav.php‘ and ‘theme.php‘. These files will be the templates used to format the content from our scripts.

kerk/modules/example/home.php

<?php
  $kerk->setResponseFormat('HTML');
  $kerk->setTheme('example.theme');
  $kerk->addRequest('example.quote');
?>

kerk/modules/example/theme.php

<?php
   $kerk->addRequest('example.nav');
?>

kerk/modules/example/nav.php

<?php
    $links[] = array('url'=>'http://www.google.ca', 'name'=>'Google');
    $links[] = array('url'=>'http://kerkness.blogspot.com', 'name'=>'Blog');
    $links[] = array('url'=>'http://kerkness.wikidot.com', 'name'=>'Wiki');

    $kerk->addContent('links', $links);
?>

kerk/modules/example/quote.php

<?php
  $quotes = array(
        'You are your shadow and your shadow is you.',
        'I am a banana!',
        'I would love a banana!',
        'How much is that banana!',
        'My banana is yellow!',
        'habba banana!',
        'Looks like a banana!',
        'Smells like a banana!',
        'Tastes like a banana!',
        'I am not a banana');
  $quote = $quotes[array_rand($quotes)];
  $kerk->addContent( 'quote', $quote );
?>

kerk/templates/example/home.php

<div align="left">
   This is my home page and here is some non-dynamic content.
</div>
<div style="background-color:#CCCCCC">
   [include:public.example.quote]
</div>

kerk/templates/example/theme.php

<html>
  <body>
     <h1>This is my web page</h1>
     [include:public.example.nav]
     <div bgcolor="blue">
    [include:main_request]
     </div>
     <h5>This is my page footer</h5>
  </body>
</html>

kerk/templates/example/nav.php

<div style="width: 530px; background-color:#EEEEEE;">
 Navigation
<?php foreach( $links as $i=>$link ) { ?>
    <a href="<?php print $link['url'] ?>"><?php print $link['name'] ?></a>&nbsp;&nbsp;
<?php } // end foreach $links ?>
</div>

kerk/templates/example/quote.php

<b>Random Quote</b><br/>
<i><?php print $quote ?></i>

In this example we set an additional request to act as a theme. Using themes are useful when you want several web pages or requests to be displayed in a consistent look. A theme is only relevant when sending an HTML formatted response.

Test the example: http://kerkness.ca/kerkdemo/hello.galaxy

Example 3

Inside the folder kerk/modules/hello create a file called galaxy.php and add the following to it. This file is exactly the same as the universe.php file created in the first HTML example except we have added a line which sets the theme for our request. (note: We can still use the tempalte hello.universe even tho our request is hello.galaxy)

<?php

  // Tell kerkness that this request should return an HTML response
  $kerk->setResponseFormat('HTML');

  // Set the template for this request
  $kerk->setTemplate( 'hello.universe' );

  // Set the theme for this request
  $kerk->setTheme( 'hello.theme' );

  // Add some content to the request object
  $kerk->addContent('myVar', 'Hello Galaxy');

?>

Inside the directory kerk/modules/hello create the file ‘theme.php’ and add the following

<?php

 $kerk->setTemplate('hello.theme');
 $kerk->addContent('page_title', "This is my theme title");

?>

Inside the directory kerk/templates/hello create the file ‘theme.php’ and add the following

<html>
 <body>
    <h1><?php print $page_title ?></h1>
    <!-- Place include tag where results from our main request will be placed -->
    [include:main_request]
    <h2>This is a footer</h2>
 </body>
</html>

Now when you call http://kerkness.ca/kerkdemo/hello.galaxy the request hello.galaxy will now be displayed inside the hello.theme.

Next

Creating a full dynamic web page with several content blocks ]]> http://www.kerkness.ca/creating-an-html-request-with-a-theme/feed/ 0 http://www.kerkness.ca/creating-your-first-html-service-request/ http://www.kerkness.ca/creating-your-first-html-service-request/#comments Tue, 16 Dec 2008 19:14:19 +0000 Kerk http://www.kerkness.ca/?p=243

This example shows a request which returns a HTML formatted response using an HTML/PHP template. This request could be called by when a partial or full web page is expected in response. It could be used to load an entire web page or be used as a content block in another web page.

Test the example: http://kerkness.ca/kerkdemo/hello.universe

Example 2

If you haven’t already create the directory kerk/modules/hello

Inside the ‘hello’ directory create the file ‘universe.php’ and add the following to it.

<?php

 // Tell kerkness that this request should return an HTML response
  $kerk->setResponseFormat('HTML');

  // Set the template for this request
  $kerk->setTemplate( 'hello.universe' );

  // Add some content to the request object
  $kerk->addContent('myVar', 'Hello Universe');

?>

Create the director kerk/templates/hello

Inside the ‘kerk/templates/hello’ directory create the file ‘universe.php’ and add the following to it

<b>This is the template for hello.universe</b><br/>
<?php print $myVar ?>

Now you can make a request for this service by calling http://kerkness.ca/kerkdemo/hello.universe and see the following response:

Next

Your first HTML request with Theme ]]> http://www.kerkness.ca/creating-your-first-html-service-request/feed/ 0 http://www.kerkness.ca/installing-kerkness/ http://www.kerkness.ca/installing-kerkness/#comments Tue, 16 Dec 2008 19:10:59 +0000 Kerk http://www.kerkness.ca/?p=238 Installing Kerkness ( overview )

Kerkness requires a web server running php5 with php-json enabled. It has been primarily test on Ubuntu servers running Apache2 but should be suitable for any server environment running php5.

If you plan on using clean request URLs you will need to have the Apache ReWrite module enabled for your apache server and requires the use of a .htaccess file.

Basic install steps:

1. Download current version of kerkness
2. Copy the contents of the folders ‘kerk’ and ‘www’ to your web server where ‘www’ is the root directory for your website or domain.
3. Modify the values in the config file ‘www/kc.php’;