Feature/js reloading

demos/init.php

@@ -30,6 +30,7 @@
 
     $basic = $layout->leftMenu->addGroup(['Interactivity', 'icon'=>'talk']);
     $basic->addItem('JavaScript Events', ['button2']);
+    $basic->addItem('Element Reloading', ['reloading']);
 
     $f = basename($_SERVER['PHP_SELF']);
 

demos/reloading.php

@@ -0,0 +1,51 @@
+<?php
+
+require 'init.php';
+
+// Test 1 - Basic reloading
+$layout->add(['Header', 'Button reloading segment']);
+$v = $layout->add(['View', 'ui'=>'segment'])->set((string) rand(1, 100));
+$layout->add(['Button', 'Reload random number'])->js('click', new \atk4\ui\jsReload($v));
+
+// Test 2 - Reloading self
+$layout->add(['Header', 'JS-actions will be re-applied']);
+$b2 = $layout->add(['Button', 'Reload Myself']);
+$b2->js('click', new \atk4\ui\jsReload($b2));
+
+// Test 3 - avoid duplicate
+$layout->add(['Header', 'No duplicate JS bindings']);
+$b3 = $layout->add(['Button', 'Reload other button']);
+$b4 = $layout->add(['Button', 'Add one dot']);
+
+$b4->js('click', $b4->js()->text(new \atk4\ui\jsExpression('[]+"."', [$b4->js()->text()])));
+$b3->js('click', new \atk4\ui\jsReload($b4));
+
+// Test 3 - avoid duplicate
+$layout->add(['Header', 'Make sure nested JS bindings are applied too']);
+$seg = $layout->add(['View', 'ui'=>'segment']);
+
+// Re-usable component implementing counter
+class Counter extends \atk4\ui\FormField\Line
+{
+    public $content = 20; // default
+
+    public function init()
+    {
+        parent::init();
+
+        $this->actionLeft = new \atk4\ui\Button(['icon'=> 'minus']);
+        $this->action = new \atk4\ui\Button(['icon'=> 'plus']);
+
+        $this->actionLeft->js('click', $this->jsInput()->val(new \atk4\ui\jsExpression('parseInt([])-1', [$this->jsInput()->val()])));
+        $this->action->js('click', $this->jsInput()->val(new \atk4\ui\jsExpression('parseInt([])+1', [$this->jsInput()->val()])));
+    }
+}
+
+// Add 3 counters
+$seg->add(new Counter());
+$seg->add(new Counter('40'));
+$seg->add(new Counter('-20'));
+
+// Add button to reload all counters
+$bar = $layout->add('Buttons');
+$b = $bar->add(['Button', 'Reload counter'])->js('click', new \atk4\ui\jsReload($seg));

docs/app.rst

@@ -0,0 +1,31 @@
+
+
+.. _app:
+
+===
+App
+===
+
+.. php:class:: App
+
+App is the object that is a life-supply function for all of your views. App can
+either implement features on it's own or rely on a Full Stack PHP framework (or Application)
+that incapsulates Agile UI.
+
+    $app = new App();
+
+
+.. php:method:: terminate(output)
+
+Used when application flow needs to be terminated preemptievely. For example when
+call-back is triggered and need to respond with some JSON.
+
+Hooks
+=====
+
+Application implements HookTrait (http://agile-core.readthedocs.io/en/develop/hook.html)
+and the following hooks are available:
+
+ - beforeRender
+ - beforeOutput
+

docs/button.rst

@@ -5,7 +5,7 @@
 Button
 ======
 
-.. php:namespace:: atk4\ui\Button
+.. php:namespace:: atk4\ui
 
 .. php:class:: Button
 

docs/callbacks.rst

@@ -63,5 +63,34 @@ call-back to decide on-the-spot the correct response action for supplied data. T
 PHP developer to invoke actions without writing custom handlers in the JavaScript.
 
 
-.. php::class Callback
+.. php::class: Callback
+
+This class implements the actuall callback functionality. You can use it to perform arbitrary actions::
+
+    $button = $layout->add('Button');
+    $button->set('Click to do something')->link(
+         $button
+             ->add('Callback')
+             ->set(function(){  
+                 do_something(); 
+             })
+            ->getURL()
+     );
+
+In this example `do_something` will be executed, but the execution will continue.
+
+.. php::method: getURL()
+
+Returns a generated URL which will cause callback to be executed.
+
+.. php:method: set(callback, arguments)
+
+Will specify a callback to be executed if the URL is triggered.
+
+
+.. php::class: CallbackLater
+
+This class is very similar to Callback but it will not execute immediatelly. Instead it will be executed
+either at the end at beforeRender or beforeOutput hook from inside App, whichever comes first.
+
 

docs/field.rst

@@ -9,7 +9,7 @@ Input Fields
 
 Agile UI dedicates a separate namespace for the Form Fields. What's common about
 the Form Fields is that they have either 'input' or 'select' element inside them
-making them perfect for using inside a :php:class:`Form`.
+making them perfect for using inside a :php:class:`\atk4\ui\Form`.
 
 Field can also be used on it's own like this::
 
@@ -122,3 +122,15 @@ Integration with Form
 ---------------------
 
 This section explains how Field interracts with the form.
+
+JavaScript on Input
+-------------------
+
+.. php:method:: jsInput([$event, [$other_action]])
+
+Input class implements method jsInput which is identical to :php:meth:`View::js`, except
+that it would target the INPUT element rather then the whole field::
+
+    $field->jsInput(true)->val(123);
+
+

docs/index.rst

@@ -19,6 +19,7 @@ Contents:
     form
     grid
     misc
+    app
 
 
 

docs/js.rst

@@ -419,3 +419,32 @@ This will map into the following JavaScript code:
 
 You can further simplify JavaScript code yourself, but keep the JavaScript logic inside the `.js` files
 and leave PHP only for binding.
+
+
+Reloading
+=========
+
+.. php:class:: jsReload
+
+jsReload is a JavaScript action that performs reload of a certain object::
+
+    $js_reload_table = new jsReload($table);
+
+This action can be used similar to any other jsExpression. For intance completing the form can reload some
+other view::
+
+    $m_book = new Book($db);
+
+    $f = $app->layout->add('Form');
+    $t = $app->layout->add('Table');
+
+    $f->setModel($m_book);
+
+    $f->onSubmit(function($f) use($t) {
+        $f->model->save();
+        return new \atk4\ui\jsReload($t);
+    });
+
+    $t->setModel($m_book);
+
+In this example, filling out and submitting the form will result in table contents being refreshed using AJAX.

src/App.php

@@ -8,6 +8,8 @@ class App
         init as _init;
     }
 
+    use \atk4\core\HookTrait;
+
     // @var string Name of application
     public $title = 'Agile UI - Untitled Application';
 
@@ -30,6 +32,8 @@ class App
 
     public $run_called = false;
 
+    public $is_rendering = false;
+
     public $ui_persistence = null;
 
     public function __construct($defaults = [])
@@ -108,6 +112,18 @@ public function outputDebug($str)
         echo 'DEBUG:'.$str.'<br/>';
     }
 
+    /**
+     * Will perform a preemptive output and terminate. Do not use this
+     * directly, instead call it form Callback, jsCallback or similar
+     * other classes.
+     */
+    public function terminate($output = null)
+    {
+        echo $output;
+        $this->run_called = true; // prevent shutdown function from triggering.
+        exit;
+    }
+
     public function initLayout($layout, $options = [])
     {
         if (is_string($layout)) {
@@ -154,16 +170,26 @@ public function add()
         } else {
             list($obj) = func_get_args();
 
+            if (!is_object($obj)) {
+                throw new Exception(['Incorrect use of App::add']);
+            }
+
             $obj->app = $this;
+
+            return $obj;
         }
     }
 
     public function run()
     {
         $this->run_called = true;
+        $this->hook('beforeRender');
+        $this->is_rendering = true;
         $this->html->template->set('title', $this->title);
         $this->html->renderAll();
         $this->html->template->appendHTML('HEAD', $this->html->getJS());
+        $this->is_rendering = false;
+        $this->hook('beforeOutput');
         echo $this->html->template->render();
     }
 

src/Callback.php

@@ -5,15 +5,57 @@
 use atk4\core\AppScopeTrait;
 use atk4\core\TrackableTrait;
 
+/**
+ * Add this object to your render tree and it will expose a unique URL which, when
+ * executed directly will perform a PHP callback that you set().
+ *
+ * $button = $layout->add('Button');
+ * $button->set('Click to do something')->link(
+ *      $button
+ *          ->add('Callback')
+ *          ->set(function(){
+ *              do_something();
+ *          })
+ *          ->getURL()
+ *  );
+ */
 class Callback
 {
     use TrackableTrait;
     use AppScopeTrait;
 
+    /**
+     * Will look for trigger in the POST data. Will re-use existing URL, but
+     * $_POST[$this->name] will have to be set.
+     */
     public $POST_trigger = false;
 
     public $triggered = false;
 
+    /**
+     * Initialize object and set default properties.
+     *
+     * @param array|string $defaults
+     *
+     * @throws Exception
+     */
+    public function __construct($defaults = [])
+    {
+        if (!is_array($defaults)) {
+            throw new Exception(['Constructor requires array argument', 'arg' => $defaults]);
+        }
+
+        foreach ($defaults as $key => $val) {
+            if (property_exists($this, $key)) {
+                if (is_array($val)) {
+                    $this->$key = array_merge(isset($this->$key) && is_array($this->$key) ? $this->$key : [], $val);
+                } elseif ($val !== null) {
+                    $this->$key = $val;
+                }
+            }
+        }
+    }
+
     /**
      * Executes user-specified action when call-back is triggered.
      *
@@ -24,6 +66,10 @@ class Callback
      */
     public function set($callback, $args = [])
     {
+        if (!$this->app) {
+            throw new Exception(['Call-back must be part of a RenderTree']);
+        }
+
         if ($this->POST_trigger) {
             if (isset($_POST[$this->name])) {
                 $this->triggered = true;

src/CallbackLater.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace atk4\ui;
+
+/**
+ * Works same as Callback but will be executed when the current
+ * pass completes. Agile UI uses two-pass system - first to
+ * initialize objects, second to render them. If you use this during
+ * Init, then it will be executed.
+ */
+class CallbackLater extends Callback
+{
+    public function set($callback, $args = [])
+    {
+        if (!$this->app) {
+            throw new Exception(['Call-back must be part of a RenderTree']);
+        }
+
+        if ($this->app->is_rendering) {
+            $hook = 'beforeOutput';
+        } else {
+            $hook = 'beforeRender';
+        }
+
+        $this->app->addHook($hook, function (...$args) use ($callback) {
+            array_shift($args); // Hook will have first argument pointing to the app. We don't need that.
+            return parent::set($callback, $args);
+        }, $args);
+    }
+}