Remove View::id prop in favor of NameTrait::name

demos/_unit-test/scope-builder.php

@@ -40,7 +40,7 @@
 
 $form->onSubmit(function (Form $form) use ($model) {
     $message = $form->model->get('qb')->toWords($model);
-    $view = (new \Atk4\Ui\View(['id' => false]))->addClass('atk-scope-builder-response');
+    $view = (new \Atk4\Ui\View(['name' => false]))->addClass('atk-scope-builder-response');
     $view->invokeInit();
 
     $view->set($message);

demos/basic/columns.php

@@ -23,7 +23,7 @@
 }
 ');
 
-$page = \Atk4\Ui\View::addTo($app, ['id' => 'example']);
+$page = \Atk4\Ui\View::addTo($app, ['name' => 'example']);
 
 \Atk4\Ui\Header::addTo($page, ['Basic Usage']);
 

demos/data-action/jsactionsgrid.php

@@ -21,7 +21,7 @@
 
 // creating special menu item for multi_step action.
 $multiAction = $country->getUserAction('multi_step');
-$specialItem = Factory::factory([View::class], ['id' => false, 'class' => ['item'], 'content' => 'Multi Step']);
+$specialItem = Factory::factory([View::class], ['name' => false, 'class' => ['item'], 'content' => 'Multi Step']);
 Icon::addTo($specialItem, ['content' => 'window maximize outline']);
 // register this menu item in factory.
 $app->getExecutorFactory()->registerTrigger(ExecutorFactory::TABLE_MENU_ITEM, $specialItem, $multiAction);
@@ -31,12 +31,12 @@
 $grid = \Atk4\Ui\Grid::addTo($app, ['menu' => false]);
 $grid->setModel($country);
 
-$divider = Factory::factory([View::class], ['id' => false, 'class' => ['divider'], 'content' => '']);
+$divider = Factory::factory([View::class], ['name' => false, 'class' => ['divider'], 'content' => '']);
 
-$modelHeader = Factory::factory([View::class], ['id' => false, 'class' => ['header'], 'content' => 'Model Actions']);
+$modelHeader = Factory::factory([View::class], ['name' => false, 'class' => ['header'], 'content' => 'Model Actions']);
 Icon::addTo($modelHeader, ['content' => 'database']);
 
-$jsHeader = Factory::factory([View::class], ['id' => false, 'class' => ['header'], 'content' => 'Js Actions']);
+$jsHeader = Factory::factory([View::class], ['name' => false, 'class' => ['header'], 'content' => 'Js Actions']);
 Icon::addTo($jsHeader, ['content' => 'file code']);
 
 $grid->addActionMenuItem($jsHeader);

demos/javascript/js.php

@@ -19,7 +19,7 @@
 $b->js(true)->hide();
 
 // This button hides when clicked
-$b = Button::addTo($app, ['id' => 'b2'])->set('Hide on click Button');
+$b = Button::addTo($app, ['name' => 'b2'])->set('Hide on click Button');
 $b->js('click')->hide();
 
 Button::addTo($app, ['Redirect'])->on('click', null, $app->jsRedirect(['foo' => 'bar']));

docs/render.rst

@@ -91,7 +91,7 @@ will create its own tree independent from the main one.
 Agile UI sometimes uses the following approach to render element on the outside:
 
 1. Create new instance of $sub_view.
-2. Set $sub_view->id = false;
+2. Set $sub_view->name = false;
 3. Calls $view->add($sub_view);
 4. executes $sub_view->renderHtml()
 

docs/view.rst

@@ -203,12 +203,12 @@ If you happen to pass more key/values to the constructor or as second argument
 to add() they will be treated as default values for the properties of that
 specific view::
 
-    $view = View::addTo($app, ['ui' => 'segment', 'id' => 'test-id']);
+    $view = View::addTo($app, ['ui' => 'segment', 'name' => 'test-id']);
 
 For a more IDE-friendly format, however, I recommend to use the following syntax::
 
     $view = View::addTo($app, ['ui' => 'segment']);
-    $view->id = 'test-id';
+    $view->name = 'test-id';
 
 You must be aware of a difference here - passing array to constructor will
 override default property before call to `init()`. Most of the components
@@ -222,7 +222,7 @@ If you are don't specify key for the properties, they will be considered an
 extra class for a view::
 
     $view = View::addTo($app, ['inverted', 'orange', 'ui' => 'segment']);
-    $view->id = 'test-id';
+    $view->name = 'test-id';
 
 You can either specify multiple classes one-by-one or as a single string
 "inverted orange".
@@ -407,9 +407,9 @@ Unique ID tag
 
     ID to be used with the top-most element.
 
-Agile UI will maintain unique ID for all the elements. The tag is set through 'id' property::
+Agile UI will maintain unique ID for all the elements. The tag is set through 'name' property::
 
-    $b = new \Atk4\Ui\Button(['id' => 'my-button3']);
+    $b = new \Atk4\Ui\Button(['name' => 'my-button3']);
     echo $b->render();
 
 Outputs:

src/Form/Control.php

@@ -157,7 +157,7 @@ public function onChange($expr, $default = [])
             $default['stopPropagation'] = $default;
         }
 
-        $this->on('change', '#' . $this->id . '_input', $expr, $default);
+        $this->on('change', '#' . $this->name . '_input', $expr, $default);
     }
 
     /**
@@ -170,7 +170,7 @@ public function onChange($expr, $default = [])
      */
     public function jsInput($when = null, $action = null)
     {
-        return $this->js($when, $action, '#' . $this->id . '_input');
+        return $this->js($when, $action, '#' . $this->name . '_input');
     }
 
     /**

src/Form/Control/Calendar.php

@@ -105,7 +105,7 @@ public function onChange($expr, $default = [])
      */
     public function getJsInstance(): JsExpression
     {
-        return (new Jquery('#' . $this->id . '_input'))->get(0)->_flatpickr;
+        return (new Jquery('#' . $this->name . '_input'))->get(0)->_flatpickr;
     }
 
     private function expandPhpDtFormat(string $phpFormat): string

src/Form/Control/Dropdown.php

@@ -134,7 +134,7 @@ public function getInput()
         return $this->getApp()->getTag('input', array_merge([
             'name' => $this->short_name,
             'type' => $this->inputType,
-            'id' => $this->id . '_input',
+            'id' => $this->name . '_input',
             'value' => $this->getValue(),
             'readonly' => $this->readonly ? 'readonly' : false,
             'disabled' => $this->disabled ? 'disabled' : false,

src/Form/Control/Input.php

@@ -110,7 +110,7 @@ public function getInput()
             'name' => $this->short_name,
             'type' => $this->inputType,
             'placeholder' => $this->placeholder,
-            'id' => $this->id . '_input',
+            'id' => $this->name . '_input',
             'value' => $this->getValue(),
             'readonly' => $this->readonly ? 'readonly' : false,
             'disabled' => $this->disabled ? 'disabled' : false,

src/Form/Control/Lookup.php

@@ -344,7 +344,7 @@ public function getInput()
         return $this->getApp()->getTag('input', array_merge([
             'name' => $this->short_name,
             'type' => 'hidden',
-            'id' => $this->id . '_input',
+            'id' => $this->name . '_input',
             'value' => $this->getValue(),
             'readonly' => $this->readonly ? 'readonly' : false,
             'disabled' => $this->disabled ? 'disabled' : false,

src/Form/Control/Textarea.php

@@ -26,7 +26,7 @@ public function getInput()
                 'type' => $this->inputType,
                 'rows' => $this->rows,
                 'placeholder' => $this->placeholder,
-                'id' => $this->id . '_input',
+                'id' => $this->name . '_input',
                 'readonly' => $this->readonly ? 'readonly' : false,
                 'disabled' => $this->disabled ? 'disabled' : false,
             ], $this->inputAttr),

src/Form/Control/TreeItemSelector.php

@@ -46,9 +46,16 @@ class TreeItemSelector extends Form\Control
      *
      * Each item may have it's own children by adding nodes children to it.
      *   $items = [
-     *       ['name' => 'Electronics', 'id' => 'P100', 'nodes' => [['name' => 'Phone', 'id' => 'P100', 'nodes' => [['name' => 'iPhone', 'id' => 502], ['name' => 'Google Pixels', 'id' => 503]]], ['name' => 'Tv' , 'id' => 501], ['name' => 'Radio' , 'id' => 601]]],
+     *       ['name' => 'Electronics', 'id' => 'P100', 'nodes' => [
+     *           ['name' => 'Phone', 'id' => 'P100', 'nodes' => [
+     *               ['name' => 'iPhone', 'id' => 502],
+     *               ['name' => 'Google Pixels', 'id' => 503],
+     *           ]],
+     *           ['name' => 'Tv' , 'id' => 501],
+     *           ['name' => 'Radio' , 'id' => 601],
+     *       ]],
      *       ['name' => 'Cleaner' , 'id' => 201],
-     *       ['name' => 'Appliances' , 'id' => 301]
+     *       ['name' => 'Appliances' , 'id' => 301],
      *   ];
      *
      * When adding nodes array into an item, it will automatically be treated as a group unless empty.

src/Form/Layout.php

@@ -198,7 +198,7 @@ protected function recursiveRender(): void
             // Controls get extra pampering
             $template->dangerouslySetHtml('Input', $element->getHtml());
             $template->trySet('label', $label);
-            $template->trySet('label_for', $element->id . '_input');
+            $template->trySet('label_for', $element->name . '_input');
             $template->set('control_class', $element->getControlClass());
 
             if ($element->entityField->getField()->required) {
@@ -211,7 +211,7 @@ protected function recursiveRender(): void
 
             if ($element->hint && $template->hasTag('Hint')) {
                 $hint = Factory::factory($this->defaultHint);
-                $hint->id = $element->id . '_hint';
+                $hint->name = $element->name . '_hint';
                 if (is_object($element->hint) || is_array($element->hint)) {
                     $hint->add($element->hint);
                 } else {

src/JsCallback.php

@@ -186,7 +186,7 @@ private function _jsRenderIntoModal(View $response): JsExpressionable
         if ($response instanceof Modal) {
             $html = $response->getHtml();
         } else {
-            $modal = new Modal(['id' => false]);
+            $modal = new Modal(['name' => false]);
             $modal->add($response);
             $html = $modal->getHtml();
         }

src/Table/Column/ActionButtons.php

@@ -48,7 +48,7 @@ public function addButton($button, $action = null, string $confirmMsg = '', $isD
                 $button = [1 => $button];
             }
 
-            $button = Factory::factory([Button::class], Factory::mergeSeeds($button, ['id' => false]));
+            $button = Factory::factory([Button::class], Factory::mergeSeeds($button, ['name' => false]));
         }
 
         if ($isDisabled === true) {

src/Table/Column/ActionMenu.php

@@ -68,7 +68,7 @@ public function addActionMenuItem($item, $action = null, string $confirmMsg = ''
         $name = $this->name . '_action_' . (count($this->items) + 1);
 
         if (!is_object($item)) {
-            $item = Factory::factory([\Atk4\Ui\View::class], ['id' => false, 'ui' => 'item', 'content' => $item]);
+            $item = Factory::factory([\Atk4\Ui\View::class], ['name' => false, 'ui' => 'item', 'content' => $item]);
         }
 
         $this->items[] = $item;

src/View.php

@@ -45,9 +45,6 @@ class View extends AbstractView implements JsExpressionable
      */
     public $ui = false;
 
-    /** @var string ID of the element, that's unique and is used in JS operations. */
-    public $id;
-
     /** @var array List of classes that needs to be added. */
     public $class = [];
 
@@ -237,10 +234,6 @@ protected function init(): void
         $this->_add_later = [];
         parent::init();
 
-        if ($this->id === null) {
-            $this->id = $this->name;
-        }
-
         if ($this->region && !$this->template && !$this->defaultTemplate && $this->issetOwner() && $this->getOwner()->template) {
             $this->template = $this->getOwner()->template->cloneRegion($this->region);
 
@@ -641,8 +634,8 @@ function (&$item, $key) {
             $this->template->tryDel('_ui');
         }
 
-        if ($this->id) {
-            $this->template->trySet('_id', $this->id);
+        if ($this->name) {
+            $this->template->trySet('_id', $this->name);
         }
 
         if ($this->element) {
@@ -1139,7 +1132,7 @@ public function jsRender(): string
     {
         $this->assertIsInitialized();
 
-        return json_encode('#' . $this->id, \JSON_UNESCAPED_UNICODE | \JSON_THROW_ON_ERROR);
+        return json_encode('#' . $this->name, \JSON_UNESCAPED_UNICODE | \JSON_THROW_ON_ERROR);
     }
 
     /**

tests/JsIntegrationTest.php

@@ -14,9 +14,9 @@ public function testIdIntegrity1(): void
     {
         $v = new Button(['icon' => 'pencil']);
         $html = $v->render();
-        $this->assertNotNull($v->icon->id);
+        $this->assertNotNull($v->icon->name);
 
-        $this->assertNotSame($v->id, $v->icon->id);
+        $this->assertNotSame($v->name, $v->icon->name);
     }
 
     public function testIdIntegrity2(): void
@@ -26,15 +26,15 @@ public function testIdIntegrity2(): void
         $b2 = Button::addTo($v);
         $html = $v->render();
 
-        $this->assertNotSame($b1->id, $b2->id);
+        $this->assertNotSame($b1->name, $b2->name);
     }
 
     /**
      * make sure that chain is crated correctly.
      */
     public function testBasicChain1(): void
     {
-        $v = new Button(['id' => 'b']);
+        $v = new Button(['name' => 'b']);
         $j = $v->js()->hide();
         $v->render();
 
@@ -46,7 +46,7 @@ public function testBasicChain1(): void
      */
     public function testBasicChain2(): void
     {
-        $v = new Button(['id' => 'b']);
+        $v = new Button(['name' => 'b']);
         $j = $v->js(true)->hide();
         $v->getHtml();
 
@@ -60,7 +60,7 @@ public function testBasicChain2(): void
      */
     public function testBasicChain3(): void
     {
-        $v = new Button(['id' => 'b']);
+        $v = new Button(['name' => 'b']);
         $v->js('click')->hide();
         $v->getHtml();
 
@@ -77,8 +77,8 @@ public function testBasicChain3(): void
     public function testBasicChain4(): void
     {
         $bb = new View(['ui' => 'buttons']);
-        $b1 = Button::addTo($bb, ['id' => 'b1']);
-        $b2 = Button::addTo($bb, ['id' => 'b2']);
+        $b1 = Button::addTo($bb, ['name' => 'b1']);
+        $b2 = Button::addTo($bb, ['name' => 'b2']);
 
         $b1->on('click', $b2->js()->hide());
         $bb->getHtml();

tests/TableColumnColorRatingTest.php

@@ -22,10 +22,7 @@ protected function setUp(): void
         $arr = [
             'table' => [
                 1 => [
-                    'id' => 1,
-                    'name' => 'bar',
-                    'ref' => 'ref123',
-                    'rating' => 3,
+                    'id' => 1, 'name' => 'bar', 'ref' => 'ref123', 'rating' => 3,
                 ],
             ],
         ];

tests/TableColumnLinkTest.php

@@ -18,7 +18,11 @@ class TableColumnLinkTest extends TestCase
 
     protected function setUp(): void
     {
-        $arr = ['table' => [1 => ['id' => 1, 'name' => 'bar', 'ref' => 'ref123', 'salary' => -123]]];
+        $arr = [
+            'table' => [
+                1 => ['id' => 1, 'name' => 'bar', 'ref' => 'ref123', 'salary' => -123],
+            ],
+        ];
         $db = new Persistence\Array_($arr);
         $m = new \Atk4\Data\Model($db, ['table' => 'table']);
         $m->addField('name');
@@ -259,7 +263,11 @@ public function testLink9(): void
     public function testLink10(): void
     {
         // need to reset all to set a nulled value in field name model
-        $arr = ['table' => [1 => ['id' => 1, 'name' => '', 'ref' => 'ref123', 'salary' => -123]]];
+        $arr = [
+            'table' => [
+                1 => ['id' => 1, 'name' => '', 'ref' => 'ref123', 'salary' => -123],
+            ],
+        ];
         $db = new Persistence\Array_($arr);
         $m = new \Atk4\Data\Model($db, ['table' => 'table']);
         $m->addField('name');