Use ::addTo() method in View::add()

demos/accordion-nested.php

@@ -5,7 +5,7 @@
 /*
 $app->add(['Button', 'View Form input split in Accordion section', 'small right floated basic blue', 'iconRight' => 'right arrow'])
     ->link(['accordion-in-form']);
-$app->add(['ui' => 'clearing divider']);
+$app->add(['View', 'ui' => 'clearing divider']);
 */
 
 $app->add(['Header', 'Nested accordions']);

demos/accordion.php

@@ -4,12 +4,12 @@
 
 $app->add(['Button', 'Nested accordions', 'small right floated basic blue', 'iconRight' => 'right arrow'])
     ->link(['accordion-nested']);
-$app->add(['ui' => 'clearing divider']);
+$app->add(['View', 'ui' => 'clearing divider']);
 
 $app->add(['Header', 'Accordion\'s section can be control programmatically.']);
 
 // toggle menu
-$bar = $app->add(['ui' => 'buttons']);
+$bar = $app->add(['View', 'ui' => 'buttons']);
 $b1 = $bar->add(['Button', 'Toggle Section #1']);
 $b2 = $bar->add(['Button', 'Toggle Section #2']);
 $b3 = $bar->add(['Button', 'Toggle Section #3']);

demos/breadcrumb.php

@@ -9,7 +9,7 @@
 $crumb->addCrumb('UI Demo', ['index']);
 $crumb->addCrumb('BreadCrumb Demo', ['breadcrumb']);
 
-$app->add(['ui'=>'divider']);
+$app->add(['View', 'ui'=>'divider']);
 
 $crumb->addCrumb('Countries', []);
 

demos/button.php

@@ -34,13 +34,13 @@
 
 $app->add(['Header', 'Combining Buttons', 'size' => 2]);
 
-$bar = $app->add(['ui' => 'vertical buttons']);
+$bar = $app->add(['View', 'ui' => 'vertical buttons']);
 $bar->add(['Button', 'Play', 'icon' => 'play']);
 $bar->add(['Button', 'Pause', 'icon' => 'pause']);
 $bar->add(['Button', 'Shuffle', 'icon' => 'shuffle']);
 
 $app->add(['Header', 'Icon Bar', 'size' => 2]);
-$bar = $app->add(['ui' => 'big blue buttons']);
+$bar = $app->add(['View', 'ui' => 'big blue buttons']);
 $bar->add(['Button', 'icon'=>'file']);
 $bar->add(['Button', 'icon'=>'yellow save']);
 $bar->add(['Button', 'icon'=>'upload', 'disabled'=>true]);
@@ -62,7 +62,7 @@ public function __construct($n)
 
 $app->add(['Header', 'Custom Template', 'size' => 2]);
 
-$view = $app->add(['template' => new Template('Hello, {$tag1}, my name is {$tag2}')]);
+$view = $app->add(['View', 'template' => new Template('Hello, {$tag1}, my name is {$tag2}')]);
 
 $view->add(new Button('World'), 'tag1');
 $view->add(new Button(['Agile UI', 'blue']), 'tag2');

demos/card.php

@@ -40,7 +40,7 @@
 
 $app->add(['Header', 'Card can display model label in a table or in line.', 'size' => 3]);
 
-$deck = $app->add(['ui' => 'cards']);
+$deck = $app->add(['View', 'ui' => 'cards']);
 
 $card_s = $deck->add(['Card', 'useTable' => true]);
 $card_s->addContent(new \atk4\ui\Header(['Project Info']));

demos/crud.php

@@ -32,7 +32,7 @@
 
 $g->addDecorator($m->title_field, ['Link', ['test' => false, 'path' => 'interfaces/page'], ['_id'=>'id']]);
 
-$app->add(['ui'=>'divider']);
+$app->add(['View', 'ui'=>'divider']);
 
 $c = $app->add('Columns');
 $cc = $c->addColumn(0, 'ui blue segment');

demos/field2.php

@@ -109,7 +109,7 @@
 $field->set('value in a form');
 
 $field = $form->addField('surname', new \atk4\ui\FormField\Line([
-    'hint'=> ['template'=> new \atk4\ui\Template(
+    'hint'=> ['View', 'template'=> new \atk4\ui\Template(
         'Click <a href="http://example.com/" target="_blank">here</a>'
     )],
 ]));
@@ -122,7 +122,7 @@
 
 $form = $app->add('Form');
 $tabs = $form->add('Tabs', 'AboveFields');
-$form->add(['ui' => 'divider'], 'AboveFields');
+$form->add(['View', 'ui' => 'divider'], 'AboveFields');
 
 $form_page = $tabs->addTab('Basic Info')->add(['FormLayout/Generic', 'form' => $form]);
 $form_page->addField('name', new \atk4\ui\FormField\Line());

demos/form-section.php

@@ -42,7 +42,7 @@
 
 $f->onSubmit($noSave);
 
-$app->add(['ui' => 'divider']);
+$app->add(['View', 'ui' => 'divider']);
 
 ////////////////////////////////
 
@@ -64,7 +64,7 @@
 
 $f->onSubmit($noSave);
 
-$app->add(['ui' => 'divider']);
+$app->add(['View', 'ui' => 'divider']);
 
 ////////////////////////////////
 
@@ -86,7 +86,7 @@
 
 $f->onSubmit($noSave);
 
-$app->add(['ui' => 'divider']);
+$app->add(['View', 'ui' => 'divider']);
 
 /////////////////////////////////////////
 
@@ -111,4 +111,4 @@
 
 $f->onSubmit($noSave);
 
-$app->add(['ui' => 'divider']);
+$app->add(['View', 'ui' => 'divider']);

demos/index.php

@@ -74,7 +74,7 @@
     /** @var \atk4\ui\Text $t */
     $t = $page->add('Text');
     $t->addParagraph(<<< 'EOF'
-PHP is a server-side language. That prompted us to implement server-side UI actions. They are very easy to define - 
+PHP is a server-side language. That prompted us to implement server-side UI actions. They are very easy to define -
 no need to create any routes or custom routines, simply define a PHP closure like this:
 EOF
     );
@@ -96,19 +96,19 @@
     );
 
     $page->add(new Demo())->setCode(<<<'CODE'
-    
-$seg = $app->add(['ui'=>'segment']);
+
+$seg = $app->add(['View', 'ui'=>'segment']);
 
 $seg->add('Text')->set('Number of buttons: ');
 
 $paginator = $seg->add([
-    'Paginator', 
-    'total'=>5, 
+    'Paginator',
+    'total'=>5,
     'reload'=>$seg,
     'urlTrigger'=>'count'
 ]);
 
-$seg->add(['ui'=>'divider']);
+$seg->add(['View', 'ui'=>'divider']);
 
 for($i=1; $i <= ($_GET['count'] ?? 1); $i++) {
     $seg->add(['Button', $i]);
@@ -141,7 +141,7 @@ class Invoice extends \atk4\data\Model {
     public $title_field = 'reference';
     function init() {
         parent::init();
-        
+
         $this->addField('reference');
         $this->addField('date', ['type'=>'date']);
     }
@@ -154,7 +154,7 @@ function init() {
 $form->setModel(new Invoice($session))
     ->tryLoad(1);
 
-$app->add(['ui'=>'divider']);
+$app->add(['View', 'ui'=>'divider']);
 $app->add(['Button', 'Refresh', 'icon'=>'refresh'])
     ->on('click', $app->jsReload());
 
@@ -163,7 +163,7 @@ function init() {
 
     $t = $page->add('Text');
     $t->addParagraph(<<< 'EOF'
-This code shows you a combination of 3 objects: 
+This code shows you a combination of 3 objects:
 EOF
     );
     $t->addHTML(<<< 'HTML'
@@ -253,7 +253,7 @@ public function init()
     $wizard->add(['Button', 'Exit demo', 'primary', 'icon'=>'left arrow'], 'Left')
         ->link(['begin'=>false, 'layout'=>false]);
 
-    $page->add(['ui'=>'divider']);
+    $page->add(['View', 'ui'=>'divider']);
 
     $page->add(['Message', 'Cool fact!', 'info', 'icon'=>'book'])->text
         ->addParagraph('This entire demo is coded in Agile Toolkit and takes up less than 300 lines of very simple code code!');

demos/init.php

@@ -28,7 +28,7 @@ public function init()
     public function setCode($code, $lang = 'php')
     {
         $this->highLightCode();
-        $this->left->add(['element'=>'pre'])->add(['element' => 'code'])->addClass($lang)->set($code);
+        $this->left->add(['View', 'element'=>'pre'])->add(['View', 'element' => 'code'])->addClass($lang)->set($code);
         $app = $this->right;
         $app->db = $this->app->db;
         eval($code);

demos/jsactions2.php

@@ -20,7 +20,7 @@
 $c->addContent(new \atk4\ui\Header(['Using country: ']));
 $c->setModel($country, ['iso', 'iso3', 'phonecode']);
 
-$buttons = $gl->add(['ui'=>'vertical basic buttons'], 'r1c2');
+$buttons = $gl->add(['View', 'ui'=>'vertical basic buttons'], 'r1c2');
 
 $country->unload();
 

demos/lister.php

@@ -11,7 +11,7 @@
     ['icon'=> 'map marker', 'title'=>'Xian Famous Foods', 'descr'=>'A taste of Shaanxi\'s delicious culinary traditions, with delights like spicy cold noodles and lamb burgers.'],
     ['icon'=> 'check', 'title'=>'Sapporo Haru', 'descr'=>'Greenpoint\'s best choice for quick and delicious sushi'],
 ]);
-$app->add(['ui' => 'clearing divider']);
+$app->add(['View', 'ui' => 'clearing divider']);
 
 // lister with custom template
 $view = $app->add(['View', 'template' => new \atk4\ui\Template('<div>
@@ -26,12 +26,12 @@
     ->setModel(new Country($db))
     ->setLimit(20);
 
-$app->add(['ui' => 'clearing divider']);
+$app->add(['View', 'ui' => 'clearing divider']);
 
 // empty lister with default template
 $app->add('Header')->set('Empty default lister');
 $app->add(['Lister', 'defaultTemplate'=>'lister.html'])->setSource([]);
-$app->add(['ui' => 'clearing divider']);
+$app->add(['View', 'ui' => 'clearing divider']);
 
 // empty lister with custom template
 $view = $app->add(['View', 'template' => new \atk4\ui\Template('<div>

demos/loader.php

@@ -28,7 +28,7 @@
         // You may pass arguments to the loader, in this case it's "color"
         sleep(3);
         $p->add(['Header', 'Loader #1b - '.$_GET['color']]);
-        $p->add(['ui' => $_GET['color'].' segment'])->add(new \atk4\ui\LoremIpsum(['size' => 1]));
+        $p->add(['View', 'ui' => $_GET['color'].' segment'])->add(new \atk4\ui\LoremIpsum(['size' => 1]));
 
         // don't forget to make your own argument sticky so that Components can communicate with themselves:
         $p->app->stickyGet('color');

demos/message.php

@@ -6,9 +6,9 @@
 
 $app->add(['Header', 'Message Types']);
 
-$seg = $app->add(['ui' => 'raised segment']);
+$seg = $app->add(['View', 'ui' => 'raised segment']);
 
-$bar_type = $seg->add(['ui' => ' basic buttons']);
+$bar_type = $seg->add(['View', 'ui' => ' basic buttons']);
 
 $msg = $seg->add([
     'Message',

demos/paginator.php

@@ -24,9 +24,9 @@
 
 // we intentionally left 31 days here and do not calculate number of days in particular month to keep example simple
 $month_paginator = $seg->add(['Paginator', 'total' => 12, 'range' => 3, 'urlTrigger' => 'month']);
-$seg->add(['ui'=>'hidden divider']);
+$seg->add(['View', 'ui'=>'hidden divider']);
 $day_paginator = $seg->add(['Paginator', 'total' => 31, 'range' => 3, 'urlTrigger' => 'day']);
-$seg->add(['ui'=>'hidden divider']);
+$seg->add(['View', 'ui'=>'hidden divider']);
 
 $label = $seg->add(['Label']);
 $label->addClass('orange');

demos/recursive.php

@@ -10,7 +10,7 @@ public function init()
 
         $this->add(['Header', 'My name is '.$this->name, 'red']);
 
-        $buttons = $this->add(['ui' => 'basic buttons']);
+        $buttons = $this->add(['View', 'ui' => 'basic buttons']);
         $buttons->add(['Button', 'Yellow'])->setAttr('data-id', 'yellow');
         $buttons->add(['Button', 'Blue'])->setAttr('data-id', 'blue');
         $buttons->add(['Button', 'Button'])->setAttr('data-id', 'button');
@@ -19,16 +19,16 @@ public function init()
 
         switch ($this->app->stickyGet($this->name)) {
         case 'yellow':
-            $this->add(['ui' => 'yellow segment'])->add(new self());
+            $this->add(['View', 'ui' => 'yellow segment'])->add(new self());
             break;
         case 'blue':
-            $this->add(['ui' => 'blue segment'])->add(new self());
+            $this->add(['View', 'ui' => 'blue segment'])->add(new self());
             break;
         case 'button':
-            $this->add(['ui' => 'green segment'])->add(['Button', 'Refresh page'])->link([]);
+            $this->add(['View', 'ui' => 'green segment'])->add(['Button', 'Refresh page'])->link([]);
             break;
         }
     }
 }
 
-$app->add(['ui' => 'segment'])->add(new MySwitcher());
+$app->add(['View', 'ui' => 'segment'])->add(new MySwitcher());

demos/sse.php

@@ -31,7 +31,7 @@
     ];
 }));
 
-$app->add(['ui' => 'divider']);
+$app->add(['View', 'ui' => 'divider']);
 $app->add(['Header', 'SSE operation with user confirmation']);
 
 $sse = $app->add(['jsSSE']);

demos/sticky2.php

@@ -8,15 +8,15 @@
 
     // IMPORTANT: because this is an optional frame, I have to specify it's unique short_name explicitly, othrewise
     // the name for a second frame will be affected by presence of GET['name'] parameter
-    $frame = $app->add(['ui'=>'red segment', 'short_name'=>'fr1']);
+    $frame = $app->add(['View', 'ui'=>'red segment', 'short_name'=>'fr1']);
     $frame->stickyGet('name');
 
     // frame will generate URL with sticky parameter
     $frame->add(['Label', 'Name:', 'detail'=>$_GET['name'], 'black'])->link($frame->url());
 
     // app still generates URL without localized sticky
     $frame->add(['Label', 'Reset', 'iconRight'=>'close', 'black'])->link($app->url());
-    $frame->add(['ui'=>'hidden divider']);
+    $frame->add(['View', 'ui'=>'hidden divider']);
 
     // nested interractive elemetns will respect lockal sticky get
     $frame->add(['Button', 'Triggering callback here will inherit color'])->on('click', function () {
@@ -35,7 +35,7 @@
 $t->setSource(['Red', 'Green', 'Blue']);
 $t->addDecorator('name', ['Link', [], ['name']]);
 
-$frame = $app->add(['ui'=>'green segment']);
+$frame = $app->add(['View', 'ui'=>'green segment']);
 $frame->add(['Button', 'does not inherit sticky get'])->on('click', function () {
     return new \atk4\ui\jsNotify('$_GET = '.json_encode($_GET));
 });

demos/tablecolumnmenu.php

@@ -7,7 +7,7 @@
 $app->add(['Header', 'Table column may contains popup or dropdown menu.']);
 
 // Better Popup positionning when Popup are inside a container.
-$container = $app->add(['ui' => 'vertical segment']);
+$container = $app->add(['View', 'ui' => 'vertical segment']);
 $table = $container->add(['Table', 'celled' => true]);
 $table->setModel(new SomeData(), false);
 

demos/tutorial_actions.php

@@ -21,7 +21,7 @@
 
 $country->addAction('send_message');
 
-$app->add(['element'=>'pre'])
+$app->add(['View', 'element'=>'pre'])
     // todo: add dumping!
     ->set(get_class($country->getAction('send_message')));
 CODE
@@ -53,16 +53,16 @@
 $model->addAction('soft_delete', [
     'scope' => \atk4\data\UserAction\Generic::SINGLE_RECORD,
     'ui'    => [
-        'icon'=>'trash', 
-        'button'=>[null, 'icon'=>'red trash'], 
+        'icon'=>'trash',
+        'button'=>[null, 'icon'=>'red trash'],
         'confirm'=>'Are you sure?'
     ],
     'callback' => function ($m) {
         $m['deleted'] = true;
         $m->saveAndUnload();
     },
 ]);
-$app->add(['element'=>'pre'])
+$app->add(['View', 'element'=>'pre'])
     ->set(json_encode(array_keys($model->getActions())));
 CODE
     );
@@ -114,10 +114,10 @@
 $model->addAction('greet', [
     'args'=> [
         'age'=>[
-            'type'=>'integer', 
+            'type'=>'integer',
             'required' => true
         ]
-    ], 
+    ],
     'callback'=>function ($m, $age) {
         return 'Age is '.$age;
     }
@@ -127,7 +127,7 @@
     'action' => $model->getAction('greet'),
 ]));
 
-$app->add(['ui'=>'divider']);
+$app->add(['View', 'ui'=>'divider']);
 
 $app->add(['Button', 'Greet without Age argument'])
     ->on('click', $model->getAction('greet'));