6.0.0-git
2024-10-06
Last Modified 2018-05-23 by Ralf Lang

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:

  1. cd skeleton/lib/Ajax
  2. 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:


<?php

class Skeleton_Ajax_Application_Handler extends Horde_Core_Ajax_Application_Handler {

    public function helloAjax() {
        $data = $this->vars->name;
        $answer = 'Hello ' . $data;
        return $answer;
    }
}
------

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:

  1. cd skeleton
  2. 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');":


$page_output->addScriptFile('skeleton.js');


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

Pre-requisite
We have a working git checkout of a 5.2 or master installation of horde with some authentication and prefs backend working and the migrations inplace.
If your setup did not involve editing install_dev.conf, you probably have something else and I cannot guarantee this walkthrough will work for you without adopting some parts.

Let's generate a fresh application called boneyard

maintaina:/srv/git/horde5-webmail/horde # php framework/bin/horde-generate-module boneyard "Ralf Lang <lang@b1-systems.de>"
Started new Module in /srv/git/horde5-webmail/horde/boneyard!

Register the new Module with a file in the config/registry.d directory:

<?php
$this->applications['boneyard'] = array('name' => _("Boneyard"));

We put a file with this oneliner into the directory as advised

maintaina:/srv/git/horde5-webmail/horde # vim horde/config/registry.d/boneyard.php

Now let's re-run the script generating the links for the git checkout installation

maintaina:/srv/git/horde5-webmail/horde # php framework/bin/install_dev
EMPTYING old web directory /srv/www/vhosts.d/horde.ralf-lang.de

LINKING horde
Setting static directory permissions...
LINKING applications to web directory /srv/www/vhosts.d/horde.ralf-lang.de
LINKING sam
LINKING luxor
[.. snip ..]
LINKING pastie
LINKING ingo
LINKING boneyard
LINKING hvview
LINKING sesha
LINKING passwd
LINKING operator
LINKING nag
LINKING gollem
LINKING jonah
LINKING sueporter
LINKING ulaform

LINKING framework
[ INFO ] Source directory: /srv/git/horde5-webmail/horde/framework
[ INFO ] Framework destination directory:
/srv/www/vhosts.d/horde.ralf-lang.de/libs
[ INFO ] Horde directory: /srv/www/vhosts.d/horde.ralf-lang.de
[ INFO ] Create symbolic links: Yes

[ INFO ] Package(s) to install: ALL (129 packages)
[ INFO ] Installing package ActiveSync
[.. snip ..]
[ INFO ] Installing package xxhash

Now boneyard is set up in your web-accessible dir.
Let's make the config dir web-writeable

chown wwwrun:www /srv/www/vhosts.d/horde.ralf-lang.de/boneyard/config

This is for SUSE - debian or redhat may have different user/group for the web server.

Next go to $yourdomain/admin/config/ the admin panel and generate the conf.php file by clicking on the "boneyard" entry and then the "create boneyard config" button.
At this point, we do not care about the actual contents of this config - the defaults are just fine.

If you only see "horde" and some library names, you most probably have not edited registry.local.php to contain something like:

<?php
// By default, applications are assumed to live within the base Horde
// directory (e.g. their fileroot/webroot will be automatically determined
// by appending the application name to Horde's 'fileroot'/'webroot' setting.
// If your applications live in a different base directory, defining these
// variables will change the default directory without the need to change
// every application's 'fileroot'/'webroot' settings.
$app_fileroot = '/srv/www/vhosts.d/horde.ralf-lang.de/';

Now "Boneyard" should appear in your horde topbar with some bogus buttons and content

Let's create the structure of a "dynamic" application

  • lib/Ajax.php - The Boneyard Ajax base class to load locale- and setting-dependent content into the browser's javascript
  • lib/Ajax/Application/Handler/Example.php - A handler for Ajax requests to load data from the server -- we skip that for now
  • lib/View/Sidebar.php - Boneyard_View_Sidebar - a sidebar for the dynamic view
  • template/dynamic/sidebar.html.php - The template used by the sidebar view
  • template/dynamic/index.inc - The main template of the dynamic view
  • template/dynamic/example1.inc - One of our two example views in this demo
  • template/dynamic/example2.inc - One of our two example views in this demo
  • js/boneyard.js - The BoneyardCore object which contains the main click handler etc

We also need to touch the index.php file to enable the dynamic view and the lib/Application.php file to advertise that dynamic view exists.

See https://github.com/ralflang/horde-boneyard to view the code in detail.