[dev] [commits] [Wiki] changed: Doc/Dev/HordeAjaxApplications/Example

[Ralf Lang]

It depends on how we perceive skeleton.
I mostly use it as a startup boilerplate, to be mass-renamed by the
app-generation command in git-tools. For this very reason I created a
more comprehensive SPA example, boneyard, to show how the bits work
together. It's mostly distilled from hermes and kronolith dynamic view.

It's a matter of "management decision" if we should have the ajaxy stuff
in our default application template. I understand traditional view is
being deprecated in H6 so this might make sense.

Am 27.05.2018 um 15:02 schrieb Jan Schneider:
> Shouldn't we put this as an example right into Skeleton?
>
> Zitat von Ralf Lang (B1 Systems GmbH) <lang at b1-systems.de>:
>
>> rlang  Wed, 23 May 2018 06:24:59 +0000
>>
>> Modified page:
>> https://wiki.horde.org/Doc/Dev/HordeAjaxApplications/Example
>> New Revision:  5
>> Change log:  Marc Unger's new howto
>>
>> @@ -1,4 +1,97 @@
>> +++ Ajax Example using the skeleton App:
>> +
>> +This example uses the skeleton app to create an ajax function
>> "helloAjax". This function takes a string as argument and returns a
>> new string saying "Hello $string".
>> +
>> +1. Create the Ajax Handler Class:
>> +- Create the Application folder:
>> +# cd skeleton/lib/Ajax
>> +# mkdir Application
>> +
>> +- Create a new file named "Handler.php" inside the
>> skeleton/lib/Ajax/Application folder.
>> +The Handler.php will contain the Skeleton_Ajax_Application_Handler
>> Class.
>> +Add the following content to this file:
>> +------
>> +<code>
>> +<?php
>> +
>> +class Skeleton_Ajax_Application_Handler extends
>> Horde_Core_Ajax_Application_Handler {
>> +
>> +    public function helloAjax() {
>> +        $data = $this->vars->name;
>> +        $answer = 'Hello ' . $data;
>> +        return $answer;
>> +    }
>> +}
>> +------
>> +</code>
>> +The argument of the helloAjax function is called "name".
>> +To access the arguments you have to call
>> "$this->vars->NAME_OF_THE_ARGUMENT".
>> +In this example we store the value of "name" in a variable $data:
>> +$data = $this->vars->name;
>> +Then we create a new string saying "Hello $data" and return this new
>> string.
>> +
>> +2. Load the Skeleton_Ajax_Application_Handler Class:
>> +Open the skeleton/lib/Ajax/Application.php file and add the
>> following line to the _init() function:
>> +------
>> +$this->addHandler('Skeleton_Ajax_Application_Handler');
>> +------
>> +
>> +
>> +3. Call the helloAjax function via javascript:
>> +- Create the skeleton/js folder:
>> +# cd skeleton
>> +# mkdir js
>> +
>> +- Create the skeleton/js/skeleton.js file with the following content:
>> +------
>> +SkeletonCore = {
>> +
>> +    onDomLoad: function()
>> +    {
>> +        var myName = 'Foobar';
>> +        HordeCore.doAction('helloAjax', {name:
>> Object.toJSON(myName)}, {callback: function(result) {
>> +            console.log('Ajax answer: ' + result);
>> +        }});
>> +    }
>> +
>> +}
>> +document.observe('dom:loaded',
>> SkeletonCore.onDomLoad.bind(SkeletonCore));
>> +------
>> +
>> +The "myName" variable holds the string we want to send to the
>> helloAjax funtion.
>> +The helloAjax function is called by "HordeCore.doAction".
>> +HordeCore.doAction takes three arguments:
>> +1). Name of the Ajax function:
>> +the helloAjax function we created in step 1.
>> +
>> +2). Argument list (in json format) of the Ajax function:
>> +the "name" argument we accessed in step 1 via "$this->vars->name".
>> +
>> +3). A callback function to access the returned data of the Ajax
>> function:
>> +the "result" variable holds the "Hello $data" string we returned in
>> step 1.
>> +
>> +Inside the callback we print the content of the "result" variable
>> (Hello foobar) to the browser console.
>> +
>> +
>> +4. Load the skeleton.js file.
>> +Open the skeleton/list.php file and add the following line after
>> "$page_output->addScriptFile('tables.js', 'horde');":
>> +------
>> +<code>
>> +$page_output->addScriptFile('skeleton.js');
>> +</code>
>> +------
>> +
>> +5. Test if everything works:
>> +Access the skeleton app in your browser and open the console. If
>> everything worked you'll see the following message: Ajax answer:
>> Hello Foobar
>> +
>> +
>> +
>> +++ Pre git split
>> +
>> +*This below is outdated information. Use the horde git-tool command
>> to create a new module*
>> +
>> +
>>  Boneyard - an example of a dynamic "skeleton".
>>
>>  In this article, I will show you some minimal setup for a "horde5
>> dynamic view" application as demonstrated by hermes time tracking and
>> kronolith calendar
>
>
>

-- 
Ralf Lang
Linux Consultant / Developer
Tel.: +49-170-6381563
Mail: lang at b1-systems.de
B1 Systems GmbH
Osterfeldstraße 7 / 85088 Vohburg / http://www.b1-systems.de
GF: Ralph Dehner / Unternehmenssitz: Vohburg / AG: Ingolstadt,HRB 3537