[commits] [Wiki] changed: Doc/Dev/HordeAjaxApplications/Example
Ralf Lang (B1 Systems GmbH)
lang at b1-systems.de
Wed May 23 06:24:59 UTC 2018
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
More information about the commits
mailing list