### Basic ToDo Application Setup

Source: https://github.com/atk4/ui/blob/develop/docs/quickstart.md

Sets up the initial structure for a ToDo application, including application initialization and layout configuration. This example uses $_SESSION for data persistence.

```php
<?php
require_once __DIR__ . '/vendor/autoload.php';

$app = new \Atk4\Ui\App('ToDo List');
$app->initLayout([\Atk4\Ui\Layout\Centered::class]);
```

--------------------------------

### Install Agile Toolkit UI

Source: https://github.com/atk4/ui/blob/develop/docs/quickstart.md

Installs the Agile Toolkit UI package using Composer. This command should be run in your project's root directory.

```bash
composer require atk4/ui
```

--------------------------------

### Setup Database with Example Data (PHP)

Source: https://github.com/atk4/ui/blob/develop/docs/overview.md

This snippet demonstrates how to set up a SQLite database with example data for the Agile Toolkit demos. It involves running a PHP script provided within the demo data subdirectory.

```bash
php atk4/ui/demos/_demo-data/create-db.php
```

--------------------------------

### Agile Toolkit Reusable ToDoManager Component

Source: https://github.com/atk4/ui/blob/develop/docs/quickstart.md

A concise example of how to instantiate and use a custom ToDoManager component, demonstrating the reusability of Agile Toolkit UI components.

```php
ToDoManager::addTo($app)->setModel(new ToDoItem());
```

--------------------------------

### Agile Toolkit Crud Component Setup

Source: https://github.com/atk4/ui/blob/develop/docs/quickstart.md

Configures the Crud component, disabling creation and deletion, setting a model, and adding a custom menu item for completing selected tasks. It also includes logic to handle the 'delete' request parameter for task completion.

```php
$grid = \Atk4\Ui\Crud::addTo($col->addColumn(), [
    'paginator' => false,
    'canCreate' => false,
    'canDelete' => false,
]);
$grid->setModel(new ToDoItem($s));

$grid->menu->addItem('Complete Selected',
    new \Atk4\Ui\Js\JsReload($grid->table, [
        'delete' => $grid->addSelection()->jsChecked(),
    ])
);

if ($app->hasRequestQueryParam('delete')) {
    foreach (explode(',', $app->getRequestQueryParam('delete')) as $id) {
        $grid->model->delete($id);
    }
}
```

--------------------------------

### View Initialization Example

Source: https://github.com/atk4/ui/blob/develop/docs/view.md

Illustrates the delayed initialization of Views and how they are added to the render tree. It shows both a verbose and a concise way to add views.

```php
$app = new \Atk4\Ui\App('My App');
$top = $app->initLayout(new \Atk4\Ui\View(['ui' => 'segments']));

$middle = View::addTo($top, ['ui' => 'segment', 'class.red' => true]);

$bottom = Button::addTo($middle, ['Hello World', 'class.orange' => true]);
```

```php
$app = new \Atk4\Ui\App('My App');
$top = $app->initLayout([\Atk4\Ui\View::class, 'ui' => 'segments']);

$middle = View::addTo($top, ['ui' => 'segment', 'class.red' => true]);

$bottom = Button::addTo($middle, ['Hello World', 'class.orange' => true]);
```

--------------------------------

### Install Agile UI with Composer

Source: https://github.com/atk4/ui/wiki/School

This snippet shows how to install the Agile UI framework using Composer, a dependency manager for PHP. It specifies the required version and includes autoloading configuration.

```JSON
{
    "require": {
        "atk4/ui": "^1.1"
    },
    "autoload":{
        "psr-0":{
            "": ["lib/"]
        }
    }
}
```

--------------------------------

### Connecting to a Database

Source: https://github.com/atk4/ui/blob/develop/docs/quickstart.md

Demonstrates how to connect to a database using connection details and configure the application with the database connection. This is for applications requiring persistent storage.

```php
<?php
use Atk4\Data\Persistence;
use Atk4\Ui\App;

$db = Persistence::connect(DB_URI, DB_USR, DB_PWD);

$app = new App([
    "title" => "Erp v." . ERP_VER,
    "db" => $db,
    "callExit" => false,
]);
```

--------------------------------

### Instantiate App with Dependency Injection

Source: https://github.com/atk4/ui/blob/develop/docs/quickstart.md

Demonstrates how to instantiate the Agile UI App using dependency injection. It includes setting up a Monolog logger and connecting to a database persistence.

```php
use Monolog\Logger;
use Monolog\Handler\StreamHandler;

// create a log channel
$logger = new Logger('name');
$logger->pushHandler(new StreamHandler('path/to/your.log', Logger::WARNING));

use Atk4\Data\Persistence;
use Atk4\Ui\App;
$db = Persistence::connect("mysql://localhost:3306/database_name", "user", "password");

$app = new App([
    "title" => "Your application title",
    "db" => $db,
    "logger" => $logger,
]);
```

--------------------------------

### Line Input Control Examples

Source: https://github.com/atk4/ui/blob/develop/docs/form-control.md

Provides examples of how to add and configure the Agile UI Line Input control, including setting icons, using class factories, and passing arguments for icon customization.

```php
// compact
Line::addTo($page, ['icon' => 'search']);

// type-hinting friendly
$line = new \Atk4\Ui\Form\Control\Line();
$line->icon = 'search';
$page->add($line);

// using class factory
Line::addTo($page, ['icon' => 'search']);
```

```php
// compact
$line->icon = ['search', 'class.big' => true];

// type-hinting friendly
$line->icon = new Icon('search');
$line->icon->addClass('big');
```

--------------------------------

### Install Package

Source: https://github.com/atk4/ui/blob/develop/js/README.md

Command to install the Agile Toolkit JS package dependencies using npm. This should be run from the 'atk4/ui/js' directory.

```bash
cd atk4/ui/js
npm install
```

--------------------------------

### Install Webpack Bundle Analyzer

Source: https://github.com/atk4/ui/blob/develop/js/README.md

Command to install the webpack-bundle-analyzer tool globally, which is required for the 'analyze-profile' script.

```bash
npm install -g webpack-bundle-analyzer
```

--------------------------------

### Hello, World! Application

Source: https://github.com/atk4/ui/blob/develop/docs/quickstart.md

Creates a basic 'Hello, World!' web application using Agile Toolkit UI. It initializes the application, sets a centered layout, and adds a HelloWorld component.

```php
<?php
require_once __DIR__ . '/vendor/autoload.php';

$app = new \Atk4\Ui\App('My First App');
$app->initLayout([\Atk4\Ui\Layout\Centered::class]);

\Atk4\Ui\HelloWorld::addTo($app);
```

--------------------------------

### Loading Template from File Example

Source: https://github.com/atk4/ui/blob/develop/docs/template.md

Illustrates loading a template from a file named 'mytemplate' and the expected content of the template file.

```php
$template->loadFromFile('mytemplate');
```

```html
Hello, {name}world{/}
```

--------------------------------

### Sticky GET Argument Handling

Source: https://github.com/atk4/ui/blob/develop/docs/core.md

Illustrates how to check for and display a GET parameter using sticky GET arguments.

```php
if ($app->hasRequestQueryParam('message')) {
    Message::addTo($app)->set($app->getRequestQueryParam('message'));
}

Button::addTo($app, ['Trigger message'])->link(['message' => 'Hello World']);
```

--------------------------------

### Data Persistence with $_SESSION

Source: https://github.com/atk4/ui/blob/develop/docs/quickstart.md

Initializes data persistence using PHP's $_SESSION array. This is useful for simple applications or when a full database is not required.

```php
<?php
session_start();
$s = new \Atk4\Data\Persistence\Array_($_SESSION);
```

--------------------------------

### Basic App Initialization

Source: https://github.com/atk4/ui/blob/develop/docs/app.md

Demonstrates the fundamental way to create an instance of the App class and initialize its layout. This is the starting point for most Agile UI applications.

```php
$app = new \Atk4\Ui\App('My App');
$app->initLayout([Atk4\Ui\Layout\Centered::class]);
LoremIpsum::addTo($app);
```

--------------------------------

### Frontend Entry Point (index.php)

Source: https://github.com/atk4/ui/blob/develop/docs/filestructure.md

Sets up the frontend entry point for the ATK4 application, initializing the layout with a centered view. It requires the `init.php` file for application setup.

```php
<?php
$rootdir = "../";
require_once __DIR__ . "init.php";
$app->initLayout([\Atk4\Ui\Layout\Centered::class]);

```

--------------------------------

### Tabs with Dynamic Content Example

Source: https://github.com/atk4/ui/blob/develop/docs/virtualpage.md

Provides an example of how the Tabs component uses VirtualPage to add dynamic content to a tab.

```php
$tabs = \Atk4\Ui\Tabs::addTo($layout);

\Atk4\Ui\LoremIpsum::addTo($tabs->addTab('Tab1')); // regular tab
$tabs->addTab('Tab2', function (VirtualPage $p) {
    \Atk4\Ui\LoremIpsum::addTo($p);
});
```

--------------------------------

### Late Initialization Example

Source: https://github.com/atk4/ui/blob/develop/docs/render.md

Demonstrates a scenario of late initialization where a Button is added to a View that is not yet part of the render tree, resulting in an uninitialized Button.

```php
$v = new Buttons();
$b2 = \Atk4\Ui\Button::addTo($v, ['Test2']);

echo $b2->name; // not set!!
```

--------------------------------

### Sticky GET Arguments

Source: https://github.com/atk4/ui/blob/develop/docs/app.md

Illustrates the use of `stickyGet` and `stickyForget` to maintain GET arguments across requests, ensuring context is preserved for interactive components like Crud.

```php
$orderId = $app->stickyGet('order_id');
$crud->setModel($order->load($orderId)->ref('Payment'));
```

--------------------------------

### Loading Template from String Example

Source: https://github.com/atk4/ui/blob/develop/docs/template.md

Demonstrates how to initialize an HtmlTemplate object from a string and set a tag's value.

```php
$template = HtmlTemplate::addTo($this);
$template->loadFromString('Hello, {name}world{/}');
$template->set('name', 'John');
echo $template->renderToHtml();
```

--------------------------------

### Backend Entry Point (admin.php)

Source: https://github.com/atk4/ui/blob/develop/docs/filestructure.md

Sets up the backend entry point for the ATK4 application, initializing the layout with an admin theme. It requires the `init.php` file for application setup.

```php
<?php
$rootdir = "../";
require_once __DIR__ . "init.php";
$app->initLayout([\Atk4\Ui\Layout\Admin::class]);

```

--------------------------------

### Wizard Navigation - jsNext

Source: https://github.com/atk4/ui/blob/develop/docs/wizard.md

Provides an example of using the `jsNext()` method of the Wizard component to generate a JavaScript action for navigating to the next step.

```php
$wizard->jsNext();
```

--------------------------------

### Using Factory Syntax for Button Creation

Source: https://github.com/atk4/ui/blob/develop/docs/overview.md

Illustrates the factory pattern for creating UI components with a shorter syntax. This example shows how to add a 'Cancel' button with an icon and link it to a 'dashboard.php' page.

```php
\Atk4\Ui\Button::addTo($form, ['Cancel', 'icon' => 'pencil'])
    ->link('dashboard.php');
```

--------------------------------

### Application Initialization (init.php)

Source: https://github.com/atk4/ui/blob/develop/docs/filestructure.md

Initializes the ATK4 application, loads the database configuration, and includes the Composer autoloader. This file serves as the central setup point for the application.

```php
<?php
$rootdir = "../"; // the public_html directory
require_once $rootdir . "../config/db.php"; // contains database configuration outside the public_html directory
require_once $rootdir . "vendor/autoload.php"; // loads up atk4 and our project files from Composer

$app = new \Atk4\Ui\App('Welcome to my first app'); // initialization of our app
$app->db = $db; // defines our database for reuse in other classes

```

--------------------------------

### Table Column Seed Initialization Examples

Source: https://github.com/atk4/ui/blob/develop/docs/seed.md

Illustrates various ways to add columns to a Table using Seeds, including direct class seeding, object seeding, and property assignment.

```php
$table->addColumn('salary', [Atk4UiTableColumnMoney::class]);
```

```php
$table->addColumn('salary', new Atk4UiTableColumnMoney());
```

```php
$table->addColumn('salary', [new Atk4UiTableColumnMoney()]);
```

--------------------------------

### JsCallback with View::on()

Source: https://github.com/atk4/ui/blob/develop/docs/callbacks.md

Demonstrates a more concise way to use JsCallback by directly passing it to the View::on() method, simplifying the setup for click events.

```php
$label = \Atk4\Ui\Label::addTo($app, ['Callback URL:']);
$cb = \Atk4\Ui\JsCallback::addTo($label);

$cb->set(function () {
    return 'ok';
});

$label->detail = $cb->getUrl();
$label->on('click', $cb);
```

--------------------------------

### ATK4 UI Accordion Section Entity Setup

Source: https://github.com/atk4/ui/blob/develop/docs/form.md

Provides an example of setting entities for accordion sections within a form.

```php
$a1->setEntity($model, ['iso', 'iso3']);
$a2->setEntity($model, ['numcode', 'phonecode']);
```

--------------------------------

### Automatic ID Generation Example

Source: https://github.com/atk4/ui/blob/develop/docs/view.md

Illustrates Agile UI's automatic ID allocation strategy. The top-level element gets 'atk', and child elements derive IDs based on their role, ensuring consistency across requests. The example shows a hierarchical ID structure.

```yaml
atk:
    atk-button:
    atk-button2:
    atk-form:
        atk-form-name:
        atk-form-surname:
        atk-form-button:
```

--------------------------------

### Basic View and Button Rendering

Source: https://github.com/atk4/ui/blob/develop/docs/render.md

Demonstrates creating a View instance, adding a Button to it, and rendering the View to HTML. This illustrates the basic render tree creation and component incorporation.

```php
$view = new \Atk4\Ui\View();

\Atk4\Ui\Button::addTo($view, ['test']);

echo $view->renderToHtml();
```

--------------------------------

### Sticky GET Argument Preservation

Source: https://github.com/atk4/ui/blob/develop/docs/core.md

Shows how to preserve GET parameters across callbacks using sticky GET arguments.

```php
if ($this->getApp()->stickyGet('message')) {
    Message::addTo($app)->set($app->getRequestQueryParam('message'));
}

Button::addTo($app, ['Trigger message'])->link(['message' => 'Hello World']);
```

--------------------------------

### Sticky GET for Passing Parameters

Source: https://github.com/atk4/ui/blob/develop/docs/sticky.md

Illustrates how to use global Sticky GET to pass a 'client_id' parameter through multiple nested callbacks, making it accessible in the console output.

```php
$app->stickyGet('client_id');

Loader::addTo($app)->set(function (Loader $p) {
    Console::addTo($p)->set(function (Console $console) {
        $console->output('client_id = !' . $console->getApp()->getRequestQueryParam('client_id'));
    });
});
```

--------------------------------

### Dropping Sticky Arguments

Source: https://github.com/atk4/ui/blob/develop/docs/sticky.md

Explains methods for removing sticky arguments, including using parent's URL or $app->url() for local sticky GETs, and url(['key' => false]) or stickyForget() for global sticky GETs.

```php
url(['client_id' => false])
stickyForget('client_id')
```

--------------------------------

### Using Namespaces for Cleaner Code

Source: https://github.com/atk4/ui/blob/develop/docs/quickstart.md

Demonstrates how to use PHP namespaces to shorten class references, making code more readable and concise. It shows the difference between using fully qualified names and aliased names.

```php
<?php
use \Atk4\Ui\App; // just declared once at the top of your file

$app = new App('My First App');
```

```php
<?php
$app = new \Atk4\Ui\App('My First App');
```

--------------------------------

### Local Sticky GET within a Render Tree Branch

Source: https://github.com/atk4/ui/blob/develop/docs/sticky.md

Shows how to set a local Sticky GET within a specific branch of the render tree using a Loader widget to pass a 'trigger_name' argument to nested views.

```php
$p->stickyGet('trigger_name');

$p->url(); // includes "trigger_name=callback"
```

--------------------------------

### PHP App Initialization and Layout Setup

Source: https://github.com/atk4/ui/blob/develop/docs/app.md

Shows how to create an App object, add components to it, and initialize a layout like Layout\Centered. The App object acts as a 'Property Bag' for configuration and managing shared objects.

```php
$app = new App('My App');
$app->add($grid);

// Initialize a layout
$app->initLayout([Atk4\Ui\Layout\Centered::class]);

// The app object creates $app->html and $app->layout views.
```

--------------------------------

### Basic Crud Component Setup

Source: https://github.com/atk4/ui/blob/develop/README.md

Demonstrates how to initialize an ATK UI application, set up an admin layout, connect to a MySQL database, and add a Crud component for the User model.

```php
$app = new \Atk4\Ui\App(['title' => 'hello world']);
$app->initLayout([Atk4\Ui\Layout\Admin::class]);
$app->db = \Atk4\Data\Persistence::connect('mysql://user:pass@localhost/atk');

\Atk4\Ui\Crud::addTo($app)
    ->setModel(new User($app->db));
```

--------------------------------

### Basic App Initialization

Source: https://github.com/atk4/ui/blob/develop/docs/core.md

Demonstrates the standard way to initialize an Agile UI application, set a layout, and add a component.

```php
$app = new \Atk4\Ui\App('My App');
$app->initLayout([Atk4\Ui\Layout\Centered::class]);
LoremIpsum::addTo($app);
```

--------------------------------

### Complex Button Example

Source: https://github.com/atk4/ui/blob/develop/docs/button.md

Provides an example of creating a more complex button layout, combining buttons, icons, and labels, leveraging Fomantic-UI classes for styling.

```php
$forks = new Button(['labeled' => true]);
Icon::addTo(Button::addTo($forks, ['Forks', 'class.blue' => true]), ['fork']);
Label::addTo($forks, ['1,048', 'class.basic blue left pointing' => true]);
$app->add($forks);
```

--------------------------------

### Custom Executor Example (MySpecialFormExecutor)

Source: https://github.com/atk4/ui/blob/develop/docs/dataexecutor.md

An example of a custom executor class that extends \Atk4\Ui\UserAction\ModalExecutor. It demonstrates how to override methods like addFormTo to customize the executor's behavior, such as adding a custom view.

```php
class MySpecialFormExecutor extends \Atk4\Ui\UserAction\ModalExecutor
{
    public function addFormTo(\Atk4\Ui\View $view): \Atk4\Ui\Form
    {
        $myView = MySpecialView::addTo($view);

        return parent::addFormTo($myView);
    }
}
```

--------------------------------

### HelloWorld Basic Usage

Source: https://github.com/atk4/ui/blob/develop/docs/helloworld.md

Demonstrates the basic usage of the HelloWorld component by adding it to an application instance. This is the simplest way to display a 'Hello, World' message.

```php
HelloWorld::addTo($app);
```

--------------------------------

### Agile Toolkit UI - Basic Layout and Styling

Source: https://github.com/atk4/ui/blob/develop/template/form/control/lookup.html

Demonstrates how to create a basic layout and apply styling using Agile Toolkit UI components. This snippet is useful for setting up the foundational structure of a web application.

```PHP
<?php

namespace App\Page; 

class Page extends \atk4\ui\Page {
    function init() {
        parent::init();

        // Add a header
        $this->add(new \atk4\ui\Header(['Agile Toolkit UI Example']));

        // Add a button
        $button = $this->add(new \atk4\ui\Button(['Click Me']));
        $button->on('click', function() {
            return 'Button clicked!';
        });

        // Add a card with some content
        $card = $this->add(new \atk4\ui\Card());
        $card->add(new \atk4\ui\Header(['Card Title']));
        $card->add(new \atk4\ui\Text(['This is some content inside the card.']));
    }
}
```

--------------------------------

### Layout Initialization

Source: https://github.com/atk4/ui/blob/develop/docs/render.md

Shows how to initialize an Agile UI application with a specific layout. It demonstrates that the layout is initialized automatically upon setting it.

```php
$app = new \Atk4\Ui\App();
$app->initLayout([Atk4\Ui\Layout\Centered::class]);

echo $app->layout->name;
```

--------------------------------

### Field Normalization Examples

Source: https://github.com/atk4/ui/wiki/FormData

Shows examples of how Field classes normalize data upon assignment, converting string representations to appropriate data types like DateTime objects or floats, and handling enum validation.

```php
$m['date'] = '2018-01-03';
// echo $m['date']; // will actually be DateTime object

$m['budget'] = '2,300.102';
// echo $m['budget']; // will be float 2300.10

$m->addField('gender', ['enum'=>['M', 'F']]);
// $m['gender'] = 'X';  // will cause exception, value not allowed
```

--------------------------------

### Get Unique Object Name

Source: https://github.com/atk4/ui/blob/develop/docs/render.md

Demonstrates how to retrieve the unique name assigned to an object within the ATK4 UI application.

```php
$b = \Atk4\Ui\Button::addTo($app);
echo $b->name;
```

--------------------------------

### Component Creation (Setting Properties)

Source: https://github.com/atk4/ui/wiki/Object-Constructors

Shows how to set properties like content and icons on a UI Component, both directly and concisely.

```php
use atk4\ui\Button;
use atk4\ui\Icon;

$button = new Button();
$button->content = 'Click Me';
$button->icon = new Icon();
$button->icon->content = 'book';
```

```php
$button = new Button('Click Me');
$button->icon = new Icon('book');
```

--------------------------------

### Custom CSS Styling

Source: https://github.com/atk4/ui/blob/develop/template/panel/content.html

Example of custom CSS to style Atk4/UI components. This allows for branding and unique visual appearances.

```css
.atk-button-primary {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
}

.atk-grid-row:hover {
    background-color: #f0f0f0;
}
```

--------------------------------

### Building an Admin Interface with Crud

Source: https://github.com/atk4/ui/blob/develop/README.md

Provides a complete example of setting up an ATK UI application with an Admin layout, database connection, and a Crud component for managing User data. This demonstrates the ease of creating admin systems.

```php
<?php

$app = new \Atk4\Ui\App('My App');
$app->initLayout([Atk4\Ui\Layout\Admin::class]);
$app->db = \Atk4\Data\Persistence::connect('mysql://user:pass@localhost/yourdb');

class User extends \Atk4\Data\Model
{
    public $table = 'user';

    protected function init(): void
    {
        parent::init();

        $this->addField('name');
        $this->addField('email', ['required' => true]);
        $this->addField('password');
    }
}

\Atk4\Ui\Crud::addTo($app)
    ->setModel(new User($app->db));
```

--------------------------------

### Form and Table Components for Data Manipulation

Source: https://github.com/atk4/ui/blob/develop/docs/quickstart.md

Shows how to add Form and Table components to an Agile UI application to manage ToDo items. It includes setting the form entity, handling form submission with data saving and UI reloading, and displaying data in a table.

```php
$col = \Atk4\Ui\Columns::addTo($app, ['divided']);
$jsColReload = new \Atk4\Ui\Js\JsReload($col);

$form = \Atk4\Ui\Form::addTo($col->addColumn());
$form->setEntity(new ToDoItem($s));
$form->onSubmit(function (Form $form) use ($jsColReload) {
    $form->entity->save();

    return $jsColReload;
});

\Atk4\Ui\Table::addTo($col->addColumn())
    ->setModel(new ToDoItem($s));
```

--------------------------------

### Modifying Template Content Example

Source: https://github.com/atk4/ui/blob/develop/docs/template.md

Shows how to set a tag, append HTML content to it, and render the final output.

```php
$template = HtmlTemplate::addTo($this);
$template->loadFromString('Hello, {name}world{/}');

$template->set('name', 'John');
$template->dangerouslyAppendHtml('name', '&nbsp;<i class="icon-heart"></i>');

echo $template->renderToHtml();
```

--------------------------------

### PHP Backend Integration with Atk4/UI

Source: https://github.com/atk4/ui/blob/develop/template/form/control/upload.html

Illustrates how a PHP backend might render or interact with Atk4/UI components. This is a conceptual example.

```php
<?php

require 'vendor/autoload.php';

use atk4\ui\App;

$app = new App(['is_real_request' => false]);
$app->initLayout('AdminLte');

$app->add(['Header', 'Welcome to Atk4/UI']);
$app->add(['Text', 'This is a PHP-generated view.']);

// Example of adding a button
$button = $app->add('Button');
$button->set('Click Me');
$button->on('click', function() {
    return 'Button was clicked!';
});

// To render this, you would typically have a controller or route
// echo $app->run(); // In a real web request context
?>
```

--------------------------------

### Basic Usage of LoremIpsum

Source: https://github.com/atk4/ui/blob/develop/docs/loremipsum.md

Demonstrates the fundamental way to instantiate and add the LoremIpsum class to an application instance.

```php
LoremIpsum::addTo($app);
```

--------------------------------

### HTML Escaping Example

Source: https://github.com/atk4/ui/blob/develop/docs/text.md

Illustrates that the Text component escapes HTML by default, preventing rendering of HTML tags.

```php
$text = Text::addTo($app, ['here goes <b>some bold text</b>']);
```

--------------------------------

### VirtualPage with Popup URL

Source: https://github.com/atk4/ui/blob/develop/docs/virtualpage.md

Demonstrates getting a URL for VirtualPage that wraps its content in a minimalistic HTML boilerplate, suitable for popups or iframes.

```php
$label->detail = $vp->cb->getUrl('popup');
$label->link($vp->cb->getUrl('popup'));
```

--------------------------------

### Crud with Specific Display Fields

Source: https://github.com/atk4/ui/blob/develop/docs/crud.md

Illustrates how to limit the columns displayed in the Crud grid. Only the 'name' column will be visible in this example.

```php
$crud->setModel($euCountries, ['name']);
```

--------------------------------

### Basic Template Usage

Source: https://github.com/atk4/ui/blob/develop/docs/template.md

Demonstrates initializing a template with a string, setting tag values, and rendering to HTML.

```php
$t = new Template('Hello, {mytag}world{/}');
$t->set('mytag', 'Agile UI');

echo $t->renderToHtml(); // "Hello, Agile UI"
```

--------------------------------

### VirtualPage Callback URL

Source: https://github.com/atk4/ui/blob/develop/docs/virtualpage.md

Illustrates how to get the URL for a VirtualPage's callback and link to it. Clicking the link will render the VirtualPage's content.

```php
$vp = \Atk4\Ui\VirtualPage::addTo($layout);
\Atk4\Ui\LoremIpsum::addTo($vp);

$label = \Atk4\Ui\Label::addTo($layout);

$label->detail = $vp->cb->getUrl();
$label->link($vp->cb->getUrl());
```

--------------------------------

### Component Initialization using Seed

Source: https://github.com/atk4/ui/blob/develop/docs/core.md

Illustrates the 'Seed' pattern for adding components to the application, showing both direct and indirect initialization.

```php
Button::addTo($app, ['Hello']);
```

--------------------------------

### Wizard Navigation - Get Current URL

Source: https://github.com/atk4/ui/blob/develop/docs/wizard.md

Illustrates how to retrieve the URL for the current step of the Wizard component using the `url()` method.

```php
$wizard->url();
```

--------------------------------

### Wizard Navigation - Get Step URL

Source: https://github.com/atk4/ui/blob/develop/docs/wizard.md

Shows how to obtain the URL for a specific step in the Wizard using the `stepCallback->getUrl()` method.

```php
$wizard->stepCallback->getUrl($step);
```

--------------------------------

### Component Creation (Basic)

Source: https://github.com/atk4/ui/wiki/Object-Constructors

Demonstrates the basic instantiation of a UI Component (Button) in Agile Toolkit.

```php
use atk4\ui\Button;

$button = new Button();
```

--------------------------------

### Sphinx PHP Domain from Git

Source: https://github.com/atk4/ui/blob/develop/docs/requirements.txt

Installs the sphinxcontrib-phpdomain package directly from a Git repository, specifying a particular commit hash for version control.

```python
sphinxcontrib-phpdomain @ git+https://github.com/markstory/sphinxcontrib-phpdomain@6e244a1ac2
```

--------------------------------

### PHP Grid Component Initialization

Source: https://github.com/atk4/ui/blob/develop/docs/app.md

Demonstrates initializing a Grid component and adding other components like Paginator and Button to it. All these components share the same 'App' object through AppScopeTrait.

```php
$grid = new \Atk4\Ui\Grid();
$grid->setModel($user);
$grid->addPaginator(); // initialize and populate paginator
$grid->addButton('Test'); // initialize and populate toolbar

echo $grid->renderToHtml();
```

--------------------------------

### Template Manipulation with ArrayAccess Example

Source: https://github.com/atk4/ui/blob/develop/docs/template.md

Demonstrates using ArrayAccess features with HtmlTemplate for setting and deleting tags, and checking for tag existence.

```php
$template->set('name', 'John');

if ($template->hasTag('has_title')) {
    $template->del('has_title');
}
```

--------------------------------

### Agile UI Documentation and Community Links

Source: https://github.com/atk4/ui/blob/develop/README.md

Provides links to official documentation for Agile UI, Agile Data, and Agile Core, as well as community resources like Discord.

```APIDOC
Documentation:

Agile UI Documentation: https://atk4-ui.readthedocs.io/
Agile Data Documentation: https://atk4-data.readthedocs.io/
Agile Core Documentation: https://atk4-core.readthedocs.io/

Community:

Discord Community: https://discord.gg/QVKSk2B
```

--------------------------------

### ATK4 UI Form Group Example

Source: https://github.com/atk4/ui/blob/develop/docs/form.md

Demonstrates how to use the Group feature to place form controls side-by-side on the same line with custom widths.

```php
$form->setEntity(new User($db), []);

$group = $form->addGroup('Customer');
$group->addControl('name');
$group->addControl('surname');

$group = $form->addGroup('Address');
$group->addControl('street');
$group->addControl('city');
$group->addControl('country');
```

--------------------------------

### CSS Styling for Atk4/UI Elements

Source: https://github.com/atk4/ui/blob/develop/template/form/control/upload.html

Provides examples of custom CSS to style Atk4/UI elements, overriding default themes or adding new styles.

```css
.atk-container {
    max-width: 960px;
    margin: 20px auto;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.atk-button.custom-style {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
```

--------------------------------

### Layout Construction Methods

Source: https://github.com/atk4/ui/wiki/Scenarios

Explains that layouts can be constructed using either a top-down or bottom-up approach, implemented through delayed initialization.

```php
Implemented through delayed init().
```

--------------------------------

### Grid Toolbar Configuration (PHP)

Source: https://github.com/atk4/ui/wiki/Features-for-1.1

Shows how to configure the Grid's toolbar by defining quick search fields and adding buttons. The toolbar appears if quick search fields are defined or buttons are added.

```php
$grid->quick_search = ['name', 'surname'];

$grid->addButton('Test');
```

--------------------------------

### Using Text within Message Component

Source: https://github.com/atk4/ui/blob/develop/docs/text.md

Shows an example of how the Text component can be used within the Message component to add multiple paragraphs.

```php
$message = Message::addTo($app, ['Message Title']);
$message->addClass('warning');

$message->text->addParagraph('First para');
$message->text->addParagraph('Second para');
```

--------------------------------

### Model Creation with Persistence

Source: https://github.com/atk4/ui/wiki/Object-Constructors

Shows how to create a Model instance, typically by associating it with a persistence object like a database connection.

```php
$user = new User($db);
```

--------------------------------

### Accordion Dynamic Section Example

Source: https://github.com/atk4/ui/blob/develop/docs/accordion.md

Illustrates the creation of a dynamic accordion section that loads content using a VirtualPage callback when the section is activated.

```php
$acc = Accordion::addTo($app);

// dynamic section
$acc->addSection('Dynamic Lorem Ipsum', function (VirtualPage $vp) {
    LoremIpsum::addTo($vp, ['size' => 2]);
});
```

--------------------------------

### Atk4/UI Core API - Input Widgets

Source: https://github.com/atk4/ui/blob/develop/template/panel/content.html

Documentation for common input widgets like `Input`, `Text`, `Checkbox`, and `Dropdown`. Covers their basic usage and configuration.

```APIDOC
atk4\ui\Input:
  __construct(string $caption = null, string $default_value = null, array $attr = [])
    Creates a text input field.
    Parameters:
      caption: Label for the input field.
      default_value: Default value of the input.
      attr: HTML attributes for the input element.

  setPlaceholder(string $text):
    Sets the placeholder text for the input.

atk4\ui\Text:
  __construct(string $caption = null, string $default_value = null, array $attr = [])
    Creates a textarea input field.

atk4\ui\Checkbox:
  __construct(string $caption = null, bool $checked = false, array $attr = [])
    Creates a checkbox input.

atk4\ui\Dropdown:
  __construct(string $caption = null, array $values = [], string $default_value = null, array $attr = [])
    Creates a dropdown (select) input.
    Parameters:
      values: An array of key-value pairs for the options.
```

--------------------------------

### Wizard Basic Usage - Add Step

Source: https://github.com/atk4/ui/blob/develop/docs/wizard.md

Demonstrates how to add a step to the Wizard component, specifying a title and a callback function for the step's content. The callback receives the Wizard instance as an argument.

```php
$wizard = Wizard::addTo($app);

$wizard->addStep('Welcome', function (Wizard $wizard) {
    Message::addTo($wizard, ['Welcome to wizard demonstration'])->text
        ->addParagraph('Use button "Next" to advance')
        ->addParagraph('You can specify your existing database connection string which will be used' . ' to create a table for model of your choice');
});
```

--------------------------------

### Analyze Bundle Profile (Analyzer Tool)

Source: https://github.com/atk4/ui/blob/develop/js/README.md

Command to analyze the bundle profile using the webpack-bundle-analyzer tool. Requires the tool to be installed globally.

```bash
npm run analyze-profile
```

--------------------------------

### Basic Layout with Header and Content

Source: https://github.com/atk4/ui/blob/develop/template/form/control/input.html

Demonstrates how to create a basic UI layout using Atk4/UI, including a header and a content area. This is a fundamental building block for most applications.

```php
use atk4\ui\App;
use atk4\ui\Layout\AdminLTE;

require __DIR__ . '/vendor/autoload.php';

$app = new App('atk4/ui');
$app->initLayout([
    AdminLTE::class,
    'frontend_builder' => [
        'auto_init' => true,
    ],
]);

$app->layout->add(['Header', 'Welcome to Atk4/UI']);
$app->layout->add('LoremIpsum');

```

--------------------------------

### Add Calculated Column

Source: https://github.com/atk4/ui/blob/develop/docs/table.md

Adds a column to the table that displays a calculated value based on other fields. This example calculates 'total' by multiplying 'price' and 'amount'.

```php
$table = Table::addTo($app);
$order = new Order($db);

$table->setModel($order, ['name', 'price', 'amount', 'status']);
$table->addColumn('total', new \Atk4\Data\Field\Calculated(function (Model $row) {
    return $row->get('price') * $row->get('amount');
}));
```