After some time, finally here's a brief tutorial on how to use the framework, updated to the latest version. 1.3.0

In this example, we will be creating a page for registering users, to keep things simple, let's suppose there's an Username input field, a Password input field, and a textarea for user Signature.

Where's AJAX suppose to be? as there are only three fields on our example, it would be really nice to check out first that username not exists on our database prior to allowing the user to submit the form, so let's do that!. fist we create the fields of our example in a cool table, then we insert after the username field, a button to check out if username exists, and a Div to store results.

Code: Select all


    <tr>
            <td style="width: 300px; height: 200px;">
            Signature:
        </td>
        <td style="width: 400px; height: 200px;">
            <textarea rows="5" style="width: 200px"></textarea>
        </td>
    </tr>
    <tr>
        <td colspan="2"  align="center">
            <input type="button" id="registerButton" name="registerButton" value="Register" disabled="disabled"/>
        </td>
    </tr>


At this point, the basic structure on the page is created, now lets create the AJAX stuff.

First, we have to create a class that extends from AjaxCore and we store that on a new file, we may use any name we want, so we'll try with "AjaxFunctions" name for the class.

Code: Select all


class AjaxFunctions extends AjaxCore
{
function AjaxFunctions()
{
    parent::AjaxCore();
}
}

Code: Select all


<?php

// first we include the AjaxCore class
require_once("AjaxCore.class.php"); 

class AjaxFunctions extends AjaxCore
{
function AjaxFunctions()
{
    $this->setup();
    parent::AjaxCore();
}
function setup()
{
    $this->setCurrentFile("AjaxFunctions.class.php");
    $this->setCache(false);
    $this->setDebug(false);
    $this->setUpdating("Updating");
    $this->setPlaceHolder("resultsDiv");
}
function checkUsername()
{
}
}

new AjaxFunctions(); // do not forget this!
?>



this is the basic structure of the class that extends from AjaxCore, but before we run it, it needs some extra configurations, to keep config values on the same place, we create a function called "setup" and we setup all values there.

Code: Select all


function setup()
{
    $this->setCurrentFile("AjaxFunctions.class.php");
    $this->setCache(false);
    $this->setDebug(false);
    $this->setUpdating("Updating");
    $this->setPlaceHolder("resultsDiv");
}


This sentence, sets the current class name, (where is stored on the disk), this is important because this is where the AJAX request will be made when an event is triggered,
Here's a list of the config values that AjaxCore's class accept.

setCurrentFile
setCache
setDebug setUpdating
setPlaceHolder;
setMethod

The next step, is to create a PHP function that handles when the user press the button "checkButton", so here it is.

Code: Select all


function checkUsername()
{
}

Later we'll create the code to check if the username exists in this function, one important thing, is that always your functions remains takes no parameters, no matter if you need like in this case "an username value" from the webpage, that will be done outputting stuff with echo or print. At this point is important to mention that you can output either way JavaScript code or HTML, actually AjaxCore will try to interpret the output as JavaScript and if anything fails will handle the output as HTML.

Now, let's put all this stuff together.

Code: Select all


<?php

require_once("AjaxCore.class.php");  // first we include the AjaxCore class

class AjaxFunctions extends AjaxCore
{
     function AjaxFunctions()
     {
        $this->setup();
        parent::AjaxCore();
     }

     function setup()
     {
        $this->setCurrentFile("AjaxFunctions.class.php");
        $this->setCache(false);
        $this->setDebug(false);
        $this->setUpdating("Updating");
        $this->setPlaceHolder("resultsDiv");
     }

     function checkUsername()
     {
     }
}

new AjaxFunctions(); // do not forget this!
?>


notice the sentences below

Code: Select all


    $this->setup();
    parent::AjaxCore();


This just calls the function "setup" that we defined before prior to calling the constructor of AjaxCore class.

Also look at this at the bottom of the page (probably the most well known cause of mistakes using AjaxCore)

Code: Select all


new AjaxFunctions(); // do not forget this!

This is very important and you'll usually forget to add this, so please re-check this line is at the bottom of the page, after the closing brace of the class. This is the sentence used to let AjaxCore handle the request.

Code: Select all


<?php
require_once("AjaxFunctions.class.php"); // include our class
$ajax=new AjaxFunctions();
?>
<html>
<head>
    <title>Register page</title>

    <!-- include stantard prototype library -->
    <script type="text/javascript" src="prototype.js"></script>

    <!-- include AjaxCore library -->
    <script type="text/javascript" src="AjaxCore.js"></script>

    <?php
    /* print some header content to handle the results from the request */
    echo $ajax->getJSCode();
     ?>
</head>


Notice the first php block code

Code: Select all


<?php
    require_once("AjaxFunctions.class.php"); // include our class
    $ajax=new AjaxFunctions();
?>


Here, we include prototype class and AjaxCore JavaScript, and then we call getJSCode() function later to print some JavaScript header stuff that handles the request.

Code: Select all


    <!-- include stantard prototype library -->
    <script type="text/javascript" src="prototype.js"></script>

    <!-- include AjaxCore library -->
    <script type="text/javascript" src="AjaxCore.js"></script>

    <?php
    /* print some header content to handle the results from the request */
    echo $ajax->getJSCode();
     ?>


The next step, is to add some "binding" code for the button we defined before, there are several ways to bind objects described in the documentation. In this case, we need a simple bind between the checkButton and the checkUsername PHP function, so, if you see the documentation you'll get the signature of the method is

bind: is the easiest way to bind an HTML object to a PHP function, the Ajax request will be made when the JavaScript event is triggered.
Live example: http://www.ajaxcore.org/helpdocs/bind.php

Parameter list

id: is the HTML element ID
event: is the event that will cause the Ajax Request, supports all JavaScript standards events.
bindto: is the name of the PHP function what will be called.
params: optional - ID of the HTML elements that needs to be send within the request, static values (not html elements ) should be sent as _XXX=YYY , whether XXX represents variable name, and YYY value

And of course, this method returns the JavaScript code that does the AJAX request, so we only need to fill this function and all dirty stuff is generated. Now we place the bind, after the button.

Code: Select all


<?
    echo $ajax->bind("button", "onclick","checkUsername","username");
    /* Bind an HTML object to a JavaScript event to call a PHP function  */
?>   


Where

"checkButton" is the ID of the button.
"onclick" is the event that triggers the action.
"checkUsername", is the PHP function that will be called.
"username", is the field that we need to send along with the AJAX request ( if you need to send various fields, with this syntax "field1,field2,field3" , if you need an static value, i.e. send something is not an element on the page, you'll have to attach a prefix _ on the var name, as "field1, field2, _static1=whatever"

Optionally,you may use this other binding methods

Bind
BindInline
BindTimer
BindTimerInline
BindPeriodicalTimer
BindPeriodicalTimerInline
onLoad bind
onLoad bindTimer
onLoad bindPeriodicalTimer

Now, the last thing to do is Add some code to the PHP functions that handles the request, as this function needs the "username" sended along with the binding, you'll have to retrive it with $this->request['variablename'];

Code: Select all


function checkUsername()
{
    $user=$this->request['username']; // retrieve username sended with the bind;
    $code=array(); // define an array to store our JavaScript code;
    if($user=="test")
        {
        // username exists
       
        // disable register button
        $code[]=$this->htmlDisable("registerButton");

        // sets some text on the on div "resultsDiv"
        $code[]=$this->htmlInner("resultsDiv","<font color='red'>Username already exists</font");
        }
    else
        {
        // username not exists

        // enables register button
        $code[]=$this->htmlEnable("registerButton");
       
        // sets some text on the on div "resultsDiv"
        $code[]=$this->htmlInner("resultsDiv","<font color='green'>Username Ok</font"); 
        }
   
    echo $this->arrayToString($code); // converts our array into a printable JavaScript string
}


now, we've created our first AJAX application. Below the files

Demo

Index Source

AjaxFunctions Source

Hi, I made a very quick example on how to pass static data to Ajax Functions

you can see a live example right here
http://www.ajaxcore.org/tutorials/static_data/

the Idea is to send some static vars to an Ajax Function, as I didn't wanted to type something I just captured the output of php credits and just send that to an Ajax Function.

So the estrange functions do the trick are

ob_start capturates any output
ob_get_clean gets the ouput capturated

Then, as the output may contain some really weird characters ( remember it's a complete webpage ), I need to encode them to a safe string, I do that with

base64_encode

then on the Ajax side, just decode it with

base64_decode

Here's the zip with all the files
http://www.ajaxcore.org/tutorials/stati ... c_data.zip

and below the code of the two important files.

Index.php file

Code: Select all


<?php
require_once("AjaxStatic.class.php"); // We include the class that inherits from AjaxCore
$ajax=new AjaxStatic();               // create an instance of the inherited class

?>
<html>
   <head>
      <title>AjaxCore Static Example</title>   
      <script type = "text/javascript" src = "prototype.js" /></script> <!-- include standard prototype library -->
      <script type = "text/javascript" src = "AjaxCore.js" /></script><!-- include AjaxCore library -->
      <?php echo $ajax->getJSCode(); /* print some header content to handle the results from the request */ ?>
   </head>
   <body>
<?php
ob_start(); // capturates any outout
phpcredits();
$output=ob_get_clean();
   
$encoded=base64_encode($output); // let's send the credits encoded so we don't run into trouble with special chars
?>
<input type="button" value="static test" name="staticButton" id="staticButton" onclick="<?php echo $ajax->bindInline("printStatic","_staticValue=$encoded"); ?>" />   
        <div id = "results" name = "results">
                <!-- div where results will be placed -->
        </div>
</html>


AjaxStatic.class.php file

Code: Select all


<?php
require_once("AjaxCore.class.php");
class AjaxStatic extends AjaxCore
{
   function AjaxStatic()
   {   
      $this->setup();
      parent::AjaxCore();
   }
   
   function setup()
   {
      $this->setCurrentFile("AjaxStatic.class.php");
      $this->setPlaceHolder("results");
      $this->setUpdating("Updating ...");
      $this->setMethod("POST");
      $this->setCache(false);
   }
      
   function printStatic()
   {
            $encoded=$this->getValue('_staticValue'); // we retrieve the contents of staticValue, notice the undescore [_] of any static value
            $decoded=base64_decode($encoded); // we decode the data
            echo $decoded;
   }      
}

new AjaxStatic();

?>


Hope this very quick example enlightens on how to send static values.

From the main page

Is it template safe?
As your application gets complex, typically, the application code is separated from the the presentation using templating frameworks that encapsulates presentation into tpl files. This functionality does not interfere with AjaxCore, as the headers needed for the framework can be easily placed into tags on the tpl file, and then replaced with the templating engine.

Here is a little tutorial on how to use templates on AjaxCore, we will be using a template engine borrowed from phpBB under GPL license, taken from a sibling project of me under http://www.phpbbresources.com site, which I had already stripped all the dependencies so it can run flawlessly without including other files.

Because appearance I renamed the class to look like "AjaxCore" standard naming conventions ( without following phpBB's ones), as you may have noticed, all classes start with an uppercase letter, and doesn't have any underscore or something. So template.php, has been renamed to Template.php

For clarity, I'm using the same example as for static values, so if you have been reading the whole thing, you'll find it quite easy to understand it as it the same thing but using templates.

The first thing to take in mind is to create the template object, that is made with the

Code: Select all


$template=new Template();     // create a class to handle the templates


Then we have to set up which files will be used as source for the template, and under which names. This is done with the following code, notice by default the class will look up for the files under the "template" subfolder.

Code: Select all


$template->set_filenames(array('main' => "index.tpl")); // sets the tpl file


As you may have noticed, it's an array, suggesting than you can use several files, for example one for the header, another for the footer and so.

When you're ready to to output the page, you'll just have to use.

Code: Select all


$template->pparse_array(array('main'));


Again here, this is an array, showing you can parse or output several files at once. Now we have a basic page using templates, but as you may have noticed it's pointless unless you can send 'somehow' variables to the templating engine.

If you need to send global vars to the template, that is that will be accessible from any part of the template, you just use assign_vars with the vars you want to tell, you may call this method several times if you need to do it so.

Code: Select all


$template->assign_vars(array(   // here we assign the vars to the template
        'JSCODE' => $ajax->getJSCode(),
        'BIND' => $ajax->bindInline("printStatic","_staticValue=$encoded"),
    ));


This quick tutorial on templating, is enough for explaining how to implement static values tutorial on templates. But if you wanna look further and learn more about this great templating engine, there's a very complete resource at official phpBB KnowledgeBase
http://www.phpbb.com/kb/article/phpbb2- ... -tutorial/

Now or rewrited index.php, will look like

Code: Select all


<?php
require_once("AjaxStatic.class.php"); // We include the class that inherits from AjaxCore
require_once("Template.class.php");  // class to handle templates

$ajax=new AjaxStatic();               // create an instance of the inherited class
$template=new Template();     // create a class to handle the templates
$template->set_filenames(array('main' => "index.tpl")); // sets the tpl file

ob_start(); // capturates any outout
phpcredits();
$output=ob_get_clean();

$encoded=base64_encode($output); // let's send the credits encoded so we don't run into trouble with special chars   
   
$template->assign_vars(array(   // here we assign the vars to the template
        'JSCODE' => $ajax->getJSCode(),
        'BIND' => $ajax->bindInline("printStatic","_staticValue=$encoded"),
    ));

$template->pparse_array(array('main'));
?>


index.tpl will look like

Code: Select all


<html>
   <head>
      <title>AjaxCore Static Example</title>   
      <script type = "text/javascript" src = "prototype.js" /></script> <!-- include standard prototype library -->
      <script type = "text/javascript" src = "AjaxCore.js" /></script><!-- include AjaxCore library -->
      {JSCODE}
   </head>
   <body>
            <input type="button" value="static test" name="staticButton" id="staticButton" onclick="{BIND}" />   
                <div id = "results" name = "results">
                        <!-- div where results will be placed -->
                </div> 
</html>


and, AjaxStatic.class.php remains with no change

Code: Select all


<?php
require_once("AjaxCore.class.php");
class AjaxStatic extends AjaxCore
{
   function AjaxStatic()
   {   
      $this->setup();
      parent::AjaxCore();
   }
   
   function setup()
   {
      $this->setCurrentFile("AjaxStatic.class.php");
      $this->setPlaceHolder("results");
      $this->setUpdating("Updating ...");
      $this->setMethod("POST");
      $this->setCache(false);
   }
      
   function printStatic()
   {
            $encoded=$this->getValue('_staticValue'); // we retrive the contents of staticValue, notice the undescore [_] of any static value
            $decoded=base64_decode($encoded); // we decode the data
            echo $decoded;
   }      
}

new AjaxStatic();

?>


Live example
http://www.ajaxcore.org/tutorials/stati ... templates/

Here's the zip with all the files
http://www.ajaxcore.org/tutorials/stati ... plates.zip

This example covers how to use AjaxCore's features to query and display YouTube's videos with Ajax.

There's a live example at
http://www.ajaxcore.org/tutorials/youtube/

We will be using a template engine borrowed from phpBB under GPL license, taken from a sibling project of me under http://www.phpbbresources.com site, which I had already stripped all the dependencies so it can run flawlessly without including other files.

I assume you have read previous tutorials, so you know how to create a basic Ajax application using the framework. The first thing we will cover is "what should be done"

Here the main things are, when you press a key on the search field, a timer should start and after some time make an Ajax request, this is done by using the AjaxCore's timers objects, as we don't need a periodical timer, we will simply use a Timer object to bind the onkeypress event.
So if we look at the index.tpl we will see

Code: Select all


<input  type="textfield" name="searchTextField" id="searchTextField" onkeypress="{BIND}" value="Search YouTube!" size="25" onclick="if(this.value=='Search YouTube!')this.value='';">


Don't pay attention at the onclick event, that's just a cosmetic issue to clean the textfield, so the main event is the content of the var {BIND} defined on our index.php file, let's look at it

Code: Select all


'BIND' => $ajax->bindTimerInline("searchVideos","searchTimer","3000","searchTextField","request"),


If we look at the signature of the method bindTimerInline ( on Review of Binding optionspost ) , we will come to

bindTimerInline: Does the bind between an Html object and PHP function, request will be made when JavaScript event occurs and timer expires.
Live example: http://www.ajaxcore.org/helpdocs/bindTimerInline.php

Parameter list

bindto: is the name of the PHP function what will be called.
timername: is the name of the timer, multiple binds may share the same timer.
tiemerms: is the milliseconds the timer must waits until it expires.
params: optional - ID of the HTML elements that needs to be send within the request, static values (not html elements ) should be sent as _XXX=YYY , whether XXX represents variable name, and YYY value
id: optional - is the Javascript reference ID for specific behavior defined in setJSCode.

So the bind is calling "searchVideos" function, the name of the timer is "searchTimer" and timer time is "3000" ms, making the request with the contents of the field "searchTextField" and adding some custom behaviour with the ID "request".

This behavior is defined as

Code: Select all


$ajax->setJSCode("request", "var search=\$('searchTextField').onclick; $('searchTextField').onclick=new function(){  };","\$('searchTextField').onclick=search"); 


Which does nothing more than "disabling" the onkeypress event while the request is being made, and re-enabling it later when the request is done.

Now we are ready to look at the SearchVideos method on the class that extends from AjaxCore's main class.

Code: Select all


        public function searchVideos()
        {         
            $this->template->set_filenames(array('main' => "search.tpl")); // sets the tpl file
           
            $query=$this->getValue("searchTextField"); // first we need to get the value of the textfield, in order to query YouTube
            $xml_data=file_get_contents("http://gdata.youtube.com/feeds/api/videos?vq=".urlencode($query));
            $mediagroup=$this->arrayFromHaystack($xml_data, "<entry>", "</entry>");
            foreach($mediagroup as $videos)
            {
                // from each video we strip the information below
                $title=$this->arrayFromHaystack($videos, "<title type='text'>", "</title>",true);
                $desc=$this->arrayFromHaystack($videos, "<media:description type='plain'>", "</media:description>",true);
                $thumb=$this->arrayFromHaystack($videos, "<media:thumbnail url='", "'",true);
                $id=$this->arrayFromHaystack($videos, "http://gdata.youtube.com/feeds/api/videos/", "</id>",true);
                $this->template->assign_block_vars('videosrow',array( // parse results into template
                        'TITLE' => $title,
                        'DESC' => (strlen($desc)>125?substr($desc, 0, 125)."...":$desc), // to avoid having a desc too long :)
                        'THUMBNAIL' => $thumb,
                       'BIND'=> $this->bindInline("viewVideo", "_videoID=".base64_encode($id).",_title=".base64_encode($title)),
                    ));
            }
            $output=$this->template->pparse_onfly('main'); // return html data
            echo $this->htmlInner("results",$output );
           
        }


This function initializes the templating file, and pulls out the data from the url
http://gdata.youtube.com/feeds/api/videos , then uses a custom function arrayFromHaystack that I created to avoid dealing with the hassle of the XML code returned by the query, and just returning the tags I need . Then assigns the values to the template and adds some binding to the onclick event of the "song title" as follows

Code: Select all


'BIND'=> $this->bindInline("viewVideo", "_videoID=".base64_encode($id).",_title=".base64_encode($title)),


Making a call to the viewVideo function, passing the static values of _videoID and _title, is important to explain why this field are static, that's because they don't exist as IDs on the DOM of the page, therefore the only way to sending a value of a non-existant element, is sending it as static.

Then on the ViewVideo function we will have

Code: Select all


            $this->template->set_filenames(array('main' => "video.tpl")); // sets the tpl file
           
            $video_id=$this->getValue("_videoID"); // we get the static value we placed on the request
            $title=$this->getValue("_title"); // we get the static value we placed on the re
            $this->template->assign_vars(array(
                    'VIDEO_ID' => $video_id,
                    'TITLE' => $title,
                ));
           
            $output=$this->template->pparse_onfly('main');
            echo $this->htmlInner("videos",$output ); 


That just gets the value of the static field, and assign them to the video.tpl, which has the embed player.

Below the contents of each file
index.php

Code: Select all


<?php

require_once("AjaxYouTube.class.php"); // We include the class that inherits from AjaxCore
require_once("Template.class.php");  // class to handle templates

$ajax=new AjaxYouTube();  // create an instance of the inherited class
$template=new Template(); // create a class to handle the templates
$template->set_filenames(array('main' => "index.tpl")); // sets the tpl file

// little trick to disable the binding while being updated
$ajax->setJSCode("request", "var search=\$('searchTextField').onclick; $('searchTextField').onclick=new function(){  };","\$('searchTextField').onclick=search");   
   
$template->assign_vars(array(   // here we assign the vars to the template
        'JSCODE' => $ajax->getJSCode(),
        'BIND' => $ajax->bindTimerInline("searchVideos","searchTimer","3000","searchTextField","request"),
    ));

$template->pparse_array(array('main'));
?>


AjaxYouTube.class.php

Code: Select all


<?php

require_once("AjaxCore.class.php");

class AjaxYouTube extends AjaxCore
{
    private $template;
   
   public function AjaxYouTube()
   {   
      $this->setup();
      parent::AjaxCore();
   }
   
   private function setup()
   {
      $this->setCurrentFile("AjaxYouTube.class.php");
      $this->setPlaceHolder("updating");
      $this->setUpdating("<img src='templates/loading.gif'>");
      $this->setMethod("POST");
      $this->setCache(false);
                $this->setDebug(true);
   }
       
        protected function initialize()
        {
            // Method that is called just before any PHP function, useful to initialize databases and so on.
            require_once("Template.class.php");
            $this->template=new Template();
        }
       
        /**
        * arrayFromHaystack
        *
        * I got tired trying to understand the XML code returned by YouTube, so why
        * waste time, I created my own function that return the thing I want from the
        * XML code, this works just returning an array from the contents between the
        * starting and ending strings
        * @access protected
        * @param string $kaystack self explanatory.
        * @param string $str_begin string to search.
        * @param string $str_end string to limit the substring.
        * @param string $single return a var instead of array.
        */
        private function arrayFromHaystack($haystack,$str_begin,$str_end,$single=false)
        {
            $code=array();
            $position=0;
            while($position=strpos($haystack, $str_begin, $position))
            {
                // we found the needle in the haystack, now let's grab the text inside the delimiters
                $position+=strlen($str_begin);
                $length=strpos($haystack, $str_end, $position)-$position;
                $code[]=substr($haystack, $position, $length);
                $position+=$length+strlen($str_end);

                if($single)
                { // to avoid retyping a function that return just a var and not an array
                  return $code[0];
                }
            }

            return $code;
        }   
       
        public function searchVideos()
        {         
            $this->template->set_filenames(array('main' => "search.tpl")); // sets the tpl file
           
            $query=$this->getValue("searchTextField"); // first we need to get the value of the textfield, in order to query YouTube
            $xml_data=file_get_contents("http://gdata.youtube.com/feeds/api/videos?vq=".urlencode($query));
            $mediagroup=$this->arrayFromHaystack($xml_data, "<entry>", "</entry>");
            foreach($mediagroup as $videos)
            {
                // from each video we strip the information below
                $title=$this->arrayFromHaystack($videos, "<title type='text'>", "</title>",true);
                $desc=$this->arrayFromHaystack($videos, "<media:description type='plain'>", "</media:description>",true);
                $thumb=$this->arrayFromHaystack($videos, "<media:thumbnail url='", "'",true);
                $id=$this->arrayFromHaystack($videos, "http://gdata.youtube.com/feeds/api/videos/", "</id>",true);
                $this->template->assign_block_vars('videosrow',array( // parse results into template
                        'TITLE' => $title,
                        'DESC' => (strlen($desc)>125?substr($desc, 0, 125)."...":$desc), // to avoid having a desc too long :)
                        'THUMBNAIL' => $thumb,
                       'BIND'=> $this->bindInline("viewVideo", "_videoID=".base64_encode($id).",_title=".base64_encode($title)),
                    ));
            }
            $output=$this->template->pparse_onfly('main'); // return html data
            echo $this->htmlInner("results",$output );
           
        }
       
        public function viewVideo()
        {
            $this->template->set_filenames(array('main' => "video.tpl")); // sets the tpl file
           
            $video_id=$this->getValue("_videoID"); // we get the static value we placed on the request
            $title=$this->getValue("_title"); // we get the static value we placed on the re
            $this->template->assign_vars(array(
                    'VIDEO_ID' => $video_id,
                    'TITLE' => $title,
                ));
           
            $output=$this->template->pparse_onfly('main');
            echo $this->htmlInner("videos",$output );         
        }
}


new AjaxYouTube();

?>


index.tpl

Code: Select all


<html>
   <head>
      <title>AjaxCore YouTube Example</title>   
      <script type = "text/javascript" src = "prototype.js" /></script> <!-- include standard prototype library -->
      <script type = "text/javascript" src = "AjaxCore.js" /></script><!-- include AjaxCore library -->
                <script type="text/javascript" src="swfobject.js"></script>  <!-- include YouTube library -->
      {JSCODE}
            <style type="text/css">

            body {
                padding-left: 11em;
               font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
                color: #000;
                background-color: #ffffff;
            }

            a:link   { color: #105289;; text-decoration: none; }
            a:visited   { color: #105289; text-decoration: none; }
            a:hover   { color: #D31141; text-decoration: underline; }
            a:active   { color: #368AD2;; text-decoration: none; }

            h3 {
                font-family: Helvetica, Geneva, Arial, sans-serif;
            }

            #searchTextField
            {
                background: url("./templates/search.gif") no-repeat;

                padding-left: 18px;

            }

            </style>
   </head>
   <body>

        This is just a quick example of what could be done using <a href="http://www.ajaxcore.org">AjaxCore</a>'s framework for creating painless Ajax applications. <br />
        For more information please visit <a href="http://www.ajaxcore.org/tutorials.html">AjaxCore tutorials</a>.<br />
        <br />
        As you type,an Ajax request will be made to query YouTube's videos, and they will appear below, you may click in any video to see it.<br />
        <br />

        <img src="templates/youtubelogo.gif" border="0"> <br />

        <input  type="textfield" name="searchTextField" id="searchTextField" onkeypress="{BIND}" value="Search YouTube!" size="25" onclick="if(this.value=='Search YouTube!')this.value='';">

        <div class="display:inline;" id = "updating" name = "updating" >
            <!-- div where results will be placed -->
        </div>
        <br />
        <div id = "videos" name = "videos">
            <!-- div where videos will be placed -->
        </div>   

        <div id = "results" name = "results" >
            <!-- div where results will be placed -->
        </div>

       </body>
</html>


search.tpl

Code: Select all


<table>
<!-- BEGIN videosrow -->
    <tr>
        <td>
            <img src="{videosrow.THUMBNAIL}" border="0">
        </td>
        <td>
                <h3><a href="" onclick="{videosrow.BIND} return false;">{videosrow.TITLE}</a> </h3>
                </i>{videosrow.DESC}</i>
        </td>
    </td>
<!-- END videosrow -->
</table>


video.tpl

Code: Select all


<h3>{TITLE}</h3>
<embed src="http://www.youtube.com/v/{VIDEO_ID}&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>


That's all folks

If you prefer to have bookmarks activated for the video, just check out this one

http://www.ajaxcore.org/tutorials/youtube_bookmark/

the only changes that has been made is to activate trails on viewVideo function

Code: Select all


$this->addTrail("viewVideo");


and the bind adds an ID so the trail can track it

Code: Select all


'BIND'=> $this->bindInline("viewVideo", "_videoID=".base64_encode($id).",_title=".base64_encode($title),"viewVideo"),


Here's the zip with all the files
http://www.ajaxcore.org/tutorials/youtube/youtube.zip

Screenshot

I'm glad to see people using the framework, this is a really nice review I've found with a complete working example and source available, thanks to chazzuka

Here's the blog review
http://www.chazzuka.com/blog/?p=166

below you may see the live working example with three flavours, write number, greet me and login

http://www.chazzuka.com/experiments/AjaxCore/