Agile UI

https://github.com/atk4/ui
Admin
Agile UI is a robust PHP framework for building web applications with server-side rendering and over...
Tokens:81,417
Snippets:1,112
Trust Score:9.3
License:MIT
Update:5 months ago
Show doc for...
Tokens:
Raw
### Setup Database with Example Data

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

This command sets up a SQLite file database with example data for the demo. Ensure you have PHP installed and have navigated to the correct directory.

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

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

### Admin Application Setup with Crud

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

A complete example for setting up a basic admin application. It initializes the app, sets up an Admin layout, connects to a MySQL database, defines a User model, and adds a Crud component for managing users.

```php
<?php

$app = new \Atk4\Ui\App(['title' => '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));
```

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

### Basic Sticky GET Example

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

Demonstrates how to use 'sticky GET' arguments to preserve URL parameters across requests, allowing components to react to them. This example shows a Message component appearing based on a 'message' GET parameter.

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

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

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

### Basic Crud Setup with ATK Data

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

Initialize an ATK UI application, set up a database connection, and add a Crud component linked to a User model. This is a foundational example for displaying and managing data.

```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));
```

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

### Install JS Package

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

Install the Agile Toolkit JS package using npm. Navigate to the js directory and run 'npm install'.

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

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

### User Action Confirmation Example

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

This example demonstrates how to set up a user action with a confirmation step using ConfirmationExecutor. It shows how to define a confirmation message that can dynamically include record information.

```php
$country->addUserAction('delete_country', [
    'caption' => 'Delete',
    'description' => 'Delete Country',
    'ui' => ['executor' => [\Atk4\Ui\UserAction\ConfirmationExecutor::class]],
    'confirmation' => function (Model\UserAction $action) {
        return 'Are you sure you want to delete this country: $action->getModel()->getTitle();
    },
    'callback' => 'delete',
]);
```

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

### Install Agile UI with Composer

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

Installs the Agile UI package and its dependencies using Composer. Ensure you have Composer installed and then run this command in your project directory.

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

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

### Nested Callback with Loader and Console

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

This code demonstrates how to create nested callbacks using Loader and Console views. It shows the initial setup before introducing Sticky GET.

```php
Loader::addTo($app)->set(function (Loader $p) {
    Console::addTo($p)->set(function (Console $console) {
        $console->output('success!');
    });
});
```

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

### Instantiate Custom App and Add Crud

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

Example of including the autoloader, creating an instance of the custom 'Warehouse' App, and adding a Crud component to it.

```php
include'vendor/autoload.php';
$app = new Warehouse();
Crud::addTo($app)
    ->setModel($app->system->ref('Order'));
```

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

### Basic 'Hello World' Application

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

Create a minimal PHP file to initialize the Atk4/Ui application and display a 'Hello World' component. This demonstrates the core setup.

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

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

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

```

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

### Basic Model Instantiation and Saving

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

A simple example showing how to instantiate a Model and save data to it, illustrating the fundamental interaction with the persistence layer.

```php
$m = new Project($db);

$m['date'] = '2018-01-03';
$m->save();
```

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

### Template File Content Example

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

Example content for a template file named 'mytemplate.html'. Tags like {name} are placeholders for dynamic content.

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

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

### Basic Lister Setup with Model

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

This snippet demonstrates how to add a Lister to a view, set a model, and limit the number of results. It assumes a 'Country' model and a database connection are available.

```php
Lister::addTo($view, [], ['Countries'])
    ->setModel(new Country($db))
    ->setLimit(20);
```

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

### Add HelloWorld Component

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

Use this snippet to add a basic 'Hello, World' message to your application. No additional setup is required beyond having the component available.

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

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

### Install Webpack Bundle Analyzer Globally

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

Install the webpack-bundle-analyzer package globally if you intend to use the 'analyze-profile' script.

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

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

### Get URL for Next Step

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

Retrieve the URL that navigates to the next step in the wizard.

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

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

### Sticky GET with Callback Preservation

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

Illustrates a more advanced use of 'sticky GET' where parameters are preserved even during callbacks, ensuring state is maintained. This is useful for interactive components.

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

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

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

### Usage Examples for SocialAdd Component

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

Demonstrates various ways to use the SocialAdd component. Includes basic initialization with a social network name, specifying a custom label and social network, and adding a custom icon with a link.

```php
// start with the most basic usage
SocialAdd::addTo($app, ['instagram']);

```

```php
// next specify label and separately name of social network
SocialAdd::addTo($app, ['Follow on Twitter', 'social' => 'twitter']);

```

```php
// finally provide custom icon and make the button clickable
SocialAdd::addTo($app, ['facebook', 'icon' => 'facebook f'])
    ->link('https://facebook.com', '_blank');

```

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

### Adding Lister with Model and Template

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

Example of adding a Lister view, setting its model, and utilizing a custom template for its region.

```php
$profile = View::addTo($app, ['template' => 'myview.html']);
$profile->setEntity($user);
Lister::addTo($profile, [], ['Tags'])->setModel($user->ref('Tags'));
```

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

### Add Tabs Container

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

Initialize a Tabs view. This is the basic setup for using the Tabs component.

```php
$tabs = Tabs::addTo($app);
```

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

### Multiformat Decorator Return Example

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

Illustrates the expected return format for the callback function used in the Multiformat decorator, which is an array of decorator seeds.

```php
[["\Atk4\Ui\Table\Column\Link::class"], ["\Atk4\Ui\Table\Column\Money::class"]]
```

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

### Local Sticky GET within a Render Tree Branch

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

Demonstrates setting a local Sticky GET argument within a specific branch of the render tree. This ensures the argument is passed only to views within that branch.

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

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

### Get JavaScript Action for Next Step

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

Generate a JavaScript action that will navigate the user to the next step in the wizard.

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

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

### Implement Cascading Dropdowns

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

Set up chained dropdowns where the options of one depend on the selection of another. This example shows category, sub-category, and product selection.

```php
$form = \Atk4\Ui\Form::addTo($app);
$form->addControl('category_id', [Dropdown::class, 'model' => new Category($db)]);
$form->addControl('sub_category_id', [DropdownCascade::class, 'cascadeFrom' => 'category_id', 'reference' => Category::hinting()->fieldName()->subCategories]);
$form->addControl('product_id', [DropdownCascade::class, 'cascadeFrom' => 'sub_category_id', 'reference' => SubCategory::hinting()->fieldName()->products]);
```

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

### Get URL for a Specific Step

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

Obtain the URL for a specific step in the wizard using its step number.

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

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

### Model Method with Debug Output

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

An example of a model method that uses DebugTrait to output information during its execution, which will be visible in the console.

```php
use \Atk4\Core\DebugTrait();

public function generateReport($pages)
{
    $this->info('converting report to PDF');

    // slow stuff
    $this->info('almost done, be patient..');

    // more slow stuff
    return true;
}
```

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

### Analyze Bundle with Webpack Analyzer

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

Analyze the bundle using the webpack-bundle-analyzer tool with the 'analyze-profile' script. Ensure the package is installed globally.

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

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

### Initialize and Set Total Pages for Paginator

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

Initialize a Paginator instance and set the total number of pages it should manage. This is a basic setup for displaying pagination controls.

```php
$paginator = Paginator::addTo($app);
$paginator->total = 20;
```

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

### Add LoremIpsum to Application

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

Instantiates and adds the LoremIpsum class to the application. This is the basic setup for using the filler text functionality.

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

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

### Conditional Redirect with GET Parameter

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

The redirect method can be used to send the user to a different page or URL. This example redirects if the 'age' GET parameter is not present.

```php
if (!$app->hasRequestQueryParam('age')) {
    $app->redirect(['age' => 18]);
}
```

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

### JavaScript Redirect with Incrementing GET Parameter

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

The jsRedirect method creates a JavaScript action to redirect the user, useful for dynamic updates. This example increments the 'age' GET parameter on button click.

```php
Button::addTo($app, ['Increase age'])
    ->on('click', $app->jsRedirect(['age' => $app->getRequestQueryParam('age') + 1]));
```

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

### Initialize Grid Component and Add Elements

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

Demonstrates initializing a Grid component, setting its model, and adding paginator and toolbar elements. All components share the same 'App' object via 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();
```

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

### Add Form Control with Hint (Values and Name)

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

Shows how to add form controls with hints. The first example uses a 'values' array for a select-like control, and the second adds a hint to a name field.

```php
$form->addControl('title', [], ['values' => ['Mr', 'Mrs', 'Miss'], 'hint' => 'select one']);

$form->addControl('name', ['hint' => 'Full Name Only']);
```

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

### Registration Form with Model and Custom Controls

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

A complete example of a registration form using a User model, adding custom controls for password verification and terms acceptance, and handling submission logic.

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

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

        $this->addField('email');
        $this->addFiled('password');
    }
}

$form = Form::addTo($app);
$form->setEntity(new User($db));

// add password verification field
$form->addControl('password_verify', [\Atk4\Ui\Form\Control\Password::class], 'Type password again');
$form->addControl('accept_terms', [], ['type' => 'boolean']);

// submit event
$form->onSubmit(function (Form $form) {
    if ($form->entity->get('password') != $form->entity->get('password_verify')) {
        return $form->jsError('password_verify', 'Passwords do not match');
    }

    if (!$form->entity->get('accept_terms')) {
        return $form->jsError('accept_terms', 'Read and accept terms');
    }

    $form->entity->save(); // will only store email / password

    return $form->jsSuccess('Thank you. Check your email now');
});
```

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

### Initialize App and Layout

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

Basic initialization of the App class and setting up a centered layout. LoremIpsum is added to the app.

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

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

### Initialize App and Layout

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

Standard way to initialize an Agile UI application and set its layout. Requires the App class and optionally a layout class.

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

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

### Button Click Callback

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

Example of attaching a simple callback function to a button's click event. The callback returns a string that can be processed by the framework.

```php
$button->on('click', function () {
    return 'clicked button';
});
```

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

### Late Initialization Example

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

Demonstrates a scenario where a Button added to a View might not be immediately initialized if the View is not yet part of the application's render tree. Accessing the button's name property will show it's not set.

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

echo $b2->name;
```

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

### Execute Action Instantly on Page Load

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

This example shows how to trigger a JavaScript action, like an alert, immediately when the page loads by using 'true' as the first argument to the js() method.

```php
$view->js(true, new JsExpression('alert([])', ['Hello world']));
```

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

### Initialize Wizard

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

Create a new Wizard instance within your application's render tree.

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

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

### Vue.js Scoped Slots Guide

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

Links to the Vue.js guide on Scoped Slots, relevant for component design.

```html
https://vuejs.org/v2/guide/components.html#Scoped-Slots
```

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

### Dynamic Tab Loading with Callbacks

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

Utilize ATK UI's Tabs component to load content dynamically. This example shows how to create tabs that fetch their content via callbacks, including a Crud component and an AJAX form.

```php
$tabs = \Atk4\Ui\Tabs::addTo($app);
\Atk4\Ui\Message::addTo($tabs->addTab('Intro'), ['Other tabs are loaded dynamically!']);

$tabs->addTab('Users', function (\Atk4\Ui\VirtualPage $p) use ($app) {
    // this tab is loaded dynamically, but also contains dynamic component

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

$tabs->addTab('Settings', function (\Atk4\Ui\VirtualPage $p) use ($app) {
    // second tab contains an AJAX form that stores itself back to DB

    $m = new Settings($app->db);
    $entity = $m->load(2);
    \Atk4\Ui\Form::addTo($p)
        ->setEntity($entity);
});
```

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

### Basic init.php for ATK4 App

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

Sets up the initial environment for an ATK4 application. It includes loading the database configuration and Composer's autoloader.

```php
<?php
$rootdir = "../"; // the public_html directory
require_once $rootdir . "../config/db.php"; // contains database configuration outside the public_html directory

```

```php
require_once $rootdir . "vendor/autoload.php"; // loads up atk4 and our project files from Composer

```

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

```

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

### URL Generation with Local Sticky GET

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

Shows how a URL generated within a scope where a local Sticky GET is set will include that argument.

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

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

### Initialize Agile Data Model

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

Demonstrates how to initialize a database connection and create a domain model using Agile Data.

```php
$db = new \Atk4\Data\Persistence\Sql($dsn);

$client = new Client($db); // extends \Atk4\Data\Model
```

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

### Example of a Combined Cell Template with Decorators

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

Illustrates the resulting HTML structure of a table cell after applying multiple decorators, showing how the Money decorator's output is embedded within the Link decorator's anchor tag.

```html
<td class="{$f_name_money}"><a href="{$c_name_link}">£ {$salary}</a></td>
```

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

### Custom Modal Executor Example

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

Example of a custom executor that extends ModalExecutor and overrides the addFormTo method to add a custom view before the form.

```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);
    }
}

// ...
ExecutorFactory::registerExecutor($action, [MySpecialFormExecutor::class]);
```

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

### Concise Render Tree Initialization

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

A concise syntax for initializing the render tree using class names as strings within the initLayout() and addTo() methods, leveraging Agile UI's factory pattern.

```php
$app = new \Atk4\Ui\App(['title' => '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]);
```

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

### Basic Console Usage

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

Demonstrates how to add a Console to the application and set a callback to output messages and execute JavaScript.

```php
$console = Console::addTo($app);
$console->set(function (Console $console) {
    // this will be executed through SSE request
    $console->output('hello');
    echo 'world'; // also will be redirected to console
    sleep(2);
    $console->send(new \Atk4\Ui\Js\JsExpression('alert([])', ['The wait is over']));
});
```

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

### Sticky GET for Passing Variables

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

This snippet illustrates how to use Sticky GET to pass a 'client_id' variable to console output. It ensures the variable is available even with nested callbacks.

```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'));
    });
});
```

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

### Region with Nested Tags Example

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

An example of a template region containing nested tags. Regions can hold complex HTML structures with multiple levels of dynamic content placeholders.

```html
some text before
{ElephantBlock}
    Hello, {$name}.

    by {sender}John Smith
{/ElephantBlock}
some text after
```

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

### Open Dynamic Modal using JsModal and VirtualPage

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

This example shows how to trigger a modal dialog using JsModal, which is an Action, not a component. It requires a VirtualPage to provide the URL for the modal's content. This is suitable when the need for a modal is not known beforehand.

```php
$vp = \Atk4\Ui\VirtualPage::addTo($app);
\Atk4\Ui\LoremIpsum::addTo($vp, ['size' => 2]);

\Atk4\Ui\Button::addTo($app, ['Dynamic Modal'])
    ->on('click', new \Atk4\Ui\Js\JsModal('My Popup Title', $vp->getUrl('cut')));
```

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

### Executing Static Methods with Console

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

Demonstrates how to run a static method from a library using the console.

```php
$console->runMethod('StaticLib', 'myStaticMethod');
```

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

### Dropping Global Sticky GET Argument

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

Illustrates how to remove a global Sticky GET argument. This can be done using either the url method with the argument set to false or by using the stickyForget method.

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

```php
stickyForget('client_id')
```

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

### Initialize ToDo Application with Session Persistence

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

Sets up the basic Atk4/Ui application structure for a ToDo list, initializing the layout and preparing for session-based data storage.

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

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

```

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

### Create View with UI Role and Name

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

Shows how to initialize a View with both a UI role and a specific name property.

```php
$view = View::addTo($app, ['ui' => 'segment', 'name' => 'test-id']);
```

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

### Handling Sticky GET Arguments

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

Use stickyGet to retrieve GET parameters that should persist across requests, ensuring model scope completeness for interactive components like Crud. The Crud component uses this to maintain context.

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

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

### Basic Agile UI Application with CRUD

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

This snippet demonstrates how to set up a basic Agile UI application, define a data model, and integrate a CRUD interface for managing records. It requires the Atk4/Data and Atk4/Ui packages.

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

// define your data structure
class Offer extends \Atk4\Data\Model
{
    public $table = 'offer';

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

        $this->addField('domain_name');
        $this->addField('contact_email');
        $this->addField('contact_phone');
        $this->addField('date', ['type' => 'date']);
        $this->addField('offer', ['type' => 'atk4_money']);
        $this->addField('is_accepted', ['type' => 'boolean']);
    }
}

// create Application object and initialize Admin Layout
$app = new \Atk4\Ui\App(['title' => 'Offer tracking system']);
$app->initLayout([\Atk4\Ui\Layout\Admin::class]);

// connect to database and place a fully-interactive Crud
$db = new \Atk4\Data\Persistence\Sql($dsn);
\Atk4\Ui\Crud::addTo($app)
    ->setModel(new Offer($db));

```

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

### Column formatting using factory and addClass

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

Shows how to use the factory method to create a column and then chain addClass for formatting.

```php
$table->addColumn('name', [\Atk4\Ui\Table\Column::class])
    ->addClass('right aligned', 'all');
```

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

### Enable Resizable Columns

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

Enables column resizing for a table. No setup is required beyond calling the method.

```php
$table->resizableColumn();
```

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

### JsModal with VirtualPage using set() callback

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

This example shows an alternative way to structure the code by using the set() method of VirtualPage. This ensures the form and its submission logic are correctly encapsulated within the virtual page, maintaining the correct rendering order.

```php
$table = \Atk4\Ui\Table::addTo($app);
$table->setModel($model);

$vp = \Atk4\Ui\VirtualPage::addTo($app);
$vp->set(function (\Atk4\Ui\VirtualPage $p) use ($table, $model) {
    $form = \Atk4\Ui\Form::addTo($p);
    $form->setEntity($model);
    $form->onSubmit(function (Form $form) use ($table) {
        $form->entity->save();

        return new \Atk4\Ui\Js\JsBlock([
            $table->jsReload(),
            $form->jsSuccess('ok'),
        ]);
    });
});

$button = \Atk4\Ui\Button::addTo($app, ['Add Item', 'icon' => 'plus']);
$button->on('click', new \Atk4\Ui\Js\JsModal('JSModal Title', $vp));
```

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

### Button Seed Syntax

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

Demonstrates the 'Seed' syntax for adding components, showing two equivalent ways to initialize a Button with text.

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

and

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

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

### Model Validation Example

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

Defines a Person model with required fields and custom validation logic. The 'surname' cannot be the same as the 'name'.

```php
class Person extends \Atk4\Data\Model
{
    public $table = 'person';

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

        $this->addField('name', ['required' => true]);
        $this->addField('surname');
        $this->addField('gender', ['enum' => ['M', 'F']]);
    }

    public function validate(): array
    {
        $errors = parent::validate();

        if ($this->get('name') === $this->get('surname')) {
            $errors['surname'] = 'Your surname cannot be same as the name';
        }

        return $errors;
    }
}
```

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

### Basic Menu Usage

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

Demonstrates the basic creation and addition of items to a Menu component.

```php
$menu = Menu::addTo($app);
$menu->addItem('foo');
$menu->addItem('bar');
```

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

### Database Configuration (db.php)

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

Initialize a reusable database connection using a MySQL persistence. Ensure the database, username, and password are correct for your environment.

```php
<?php
$db = \Atk4\Data\Persistence::connect("mysql://localhost/#myexampledatabase", "#username", "#password");

```

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

### Hide Button on Click

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

A basic example of a button that hides itself when clicked, demonstrating direct PHP to JavaScript event mapping.

```php
$b = new Button();
$b->js('click')->hide();
```

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

### Run Production Build

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

For production, use the 'build' script. This command outputs a minified version of the JS file.

```bash
npm run build
```

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

### Basic View and Button Rendering

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

Demonstrates creating a View and adding a Button to it, then rendering the View to HTML. The renderToHtml() method triggers the initialization and rendering of child components.

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

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

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

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

### Nested Actions with JsExpression

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

Demonstrates nesting actions, where a JsExpression action includes another action (getting text from a view) as a parameter.

```php
$jsAlert = new JsExpression('alert([])', [
    $view->js()->text(),
]);
```

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

### Create and Add Callback

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

Demonstrates how to instantiate a Callback object and add it to the application's render tree to establish a unique name for URL generation.

```php
$c = new \Atk4\Ui\Callback();
$app->add($c);
```

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

### Create View with UI Role

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

Demonstrates creating a generic View instance and assigning it a specific UI role like 'segment'.

```php
$view = View::addTo($app, ['ui' => 'segment']);
```

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

### Get URL for Current Step

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

Retrieve the URL for the wizard's current active step, inheriting from the View::url method.

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

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

### Using Namespaces for Shorter Class References

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

Demonstrates how to use the 'use' statement to import classes, allowing for shorter and cleaner code when referencing them later.

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

$app = new App(['title' => 'My First App']);

```

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

### JsExpression for Summing Heights

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

Example of using JsExpression with positional arguments to sum the heights of two elements, intended for client-side execution.

```php
$jsH1 = $leftBox1->js()->height();
$jsH2 = $leftBox2->js()->height();

$jsSum = new JsExpression('[] + []', [$jsH1, $jsH2]);

$rightBoxContainer->js(true)->height($jsSum);
```

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

### Add Columns with Custom Widths

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

Specify custom widths for columns using a fraction of 16. The second column is wider in this example.

```php
$c = Columns::addTo($page);
LoremIpsum::addTo($c->addColumn(6), [1]);
LoremIpsum::addTo($c->addColumn(10), [2]); // wider column, more filler
```

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

### Layout Initialization and Property Access

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

Shows how to initialize an App with a specific layout and access properties of the initialized layout. This confirms that the layout has been properly initialized.

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

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

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

### Add a Step with Seed and Callback

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

Add a step to the wizard using a seed array for configuration, including title, icon, and description, along with a PHP callback function.

```php
$wizard->addStep([
    'Set DSN',
    'icon' => 'configure',
    'description' => 'Database Connection String',
], function (Wizard $p) {
    // some code here
});
```

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

### Custom Dropdown Item Rendering Function

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

A renderRowFunction example for a custom Dropdown class, providing title, icon, and other fields for item display.

```php
function (Model $entity) {
    return [
        'title' => $entity->getTitle(),
        'icon' => $entity->value > 100 ? 'money' : 'coins',
        'someOtherField' => $entity->get('SomeOtherField'),
        'someOtherField2' => $entity->get('SomeOtherField2'),
    ];
}
```

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

### Initializing Render Tree with App and Layout

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

A more structured approach to initializing the render tree by first creating the App and then using initLayout() to add the top-level view. Child views are then added using the View::addTo() static method.

```php
$app = new \Atk4\Ui\App(['title' => '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]);
```

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

### Basic Grid Initialization

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

Initialize a basic Grid component and associate it with a model.

```php
Grid::addTo($app)->setModel(new Country($db));
```

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

### Basic Text Initialization

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

Initialize the Text component with a string of text as the first argument.

```php
$text = Text::addTo($app, ['here goes some text']);
```

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

### Render Template to HTML

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

Converts a template into a single HTML string by removing tag markers. Use this to get the raw HTML content of a template.

```php
$html = $template->renderToHtml();

\Atk4\Ui\Text::addTo($this)->dangerouslyAddHtml($html);
// will output "Hello, World"
```

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

### Apply Event to Multiple Elements

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

This example demonstrates using the 'on' event binding to apply an action (hide) to multiple elements matching a selector.

```php
$buttons = View::addTo($app, ['ui' => 'basic buttons']);

\Atk4\Ui\Button::addTo($buttons, ['One']);
\Atk4\Ui\Button::addTo($buttons, ['Two']);
\Atk4\Ui\Button::addTo($buttons, ['Three']);

$buttons->on('click', '.button')->hide();
```

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

### Create a Basic Button

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

Instantiate a Button component and add it to the application. The text provided will be displayed on the button.

```php
$button = Button::addTo($app, ['Click me']);
```

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

### Register Custom jQuery Plugin

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

Register a new jQuery plugin under the 'atk' namespace. This example creates a 'greenify' plugin to change text color.

```javascript
atk.registerPlugin('greenify', function (el) {
    $(el).css("color", "green");
});
```

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

### Admin Layout Initialization

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

Initializes the ATK4 application with the Admin layout. This file should be placed in the public_html directory.

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

```

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

### Run Development Build

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

For development and debugging, use the 'dev' script. This recompiles the package automatically on changes and outputs source maps.

```bash
npm run dev
```

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

### Use Icons in Header, Button, Menu, and Label

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

Demonstrates using icons with various states and variations across different UI components.

```php
Header::addTo($app, ['Header', 'class.red' => true, 'icon' => 'flipped question']);
Button::addTo($app, ['Button', 'class.red' => true, 'icon' => 'flipped question']);

$menu = Menu::addTo($app);
$menu->addItem(['Menu Item', 'icon' => 'flipped question']);
$subMenu = $menu->addMenu(['Sub-menu', 'icon' => 'flipped question']);
$subMenu->addItem(['Sub Item', 'icon' => 'flipped question']);

Label::addTo($app, ['Label', 'class.right ribbon red' => true, 'icon' => 'flipped question']);
```

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

### Menu Items with Links and Actions

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

Illustrates how menu items can be configured to navigate to a URL or trigger a JavaScript action.

```php
$menu->addItem('foo', 'test.php');
$menu->addItem('bar', new JsModal('Test'));
```

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

### Running Model Methods with Console

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

Shows how to execute a model's method through the console, providing real-time feedback during execution.

```php
$console->runMethod($user, 'generateReport', [30]);
```

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

### Generate URL for a Page

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

Use the url() method to create links to other pages within your application. It automatically handles query parameters and sticky GET values.

```php
$url = $app->url(['contact', 'from' => 'John Smith']);
```

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

### Basic Table Usage with Agile Data Model

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

Instantiate a Table and set an Agile Data model to automatically populate columns and data.

```php
$table = Table::addTo($app);
$table->setModel(new Order($db));
```

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

### Reload Segment with Selected IDs

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

Use the jsChecked() method of the CheckBox column to get selected IDs and reload a segment component upon button click.

```php
$button->on('click', new JsReload($segment, ['ids' => $box->jsChecked()]));
```

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

### Inline Editing with Loader

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

An example demonstrating how to use a Loader to temporarily replace a DataTable with an editing form. The form submission reloads the loader with updated data.

```php
$box = \Atk4\Ui\View::addTo($app, ['ui' => 'segment']);

$loader = \Atk4\Ui\Loader::addTo($box, ['loadEvent' => 'edit']);
\Atk4\Ui\Table::addTo($loader)
    ->setModel($data)
    ->addCondition('year', $app->stickyGet('year'));

\Atk4\Ui\Button::addTo($box, ['Edit Data Settings'])
    ->on('click', $loader->js()->trigger('edit'));

$loader->set(function (\Atk4\Ui\Loader $p) {
    $form = \Atk4\Ui\Form::addTo($p);
    $form->addControl('year');

    $form->onSubmit(function (Form $form) use ($p) {
        return new \Atk4\Ui\Js\JsReload($p, ['year' => $form->entity->get('year')]);
    });
});
```

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

### Basic Popup Implementation

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

Demonstrates how to add a basic popup to a button. The popup's content is defined statically.

```php
$button = Button::addTo($app, ['Click me']);
HelloWorld::addTo(Popup::addTo($app, [$button]));
```

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

### View Rendering and Spot Assignment

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

Understand how views render themselves and how the 3rd argument to add() (spot) determines where the output is placed in the parent's template.

```php
$envelope = \Atk4\Ui\View::addTo($this, [], [null], null, array('envelope'));

// 3rd argument is output region, 4th is template location
$sender = \Atk4\Ui\View::addTo($envelope, [], [null], 'Sender', 'Sender');
$receiver = \Atk4\Ui\View::addTo($envelope, [], [null], 'Receiver', 'Receiver');

$sender->template->trySet($senderData);
$receiver->template->trySet($receiverData);
```

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

### Image with Custom Classes

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

Add custom CSS classes to an image for advanced styling. The example shows how to disable the image using a Fomantic UI class.

```php
$img = $app->cdn['atk'] . '/logo.png';
$icon = Image::addTo($app, [$img, 'class.disabled' => true]);
```

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

### Combine Page Load and Action

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

Demonstrates combining the instant execution on page load with a common action like 'hide'.

```php
$view->js(true)->hide();
```

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

### CRUD with Data Filtering

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

Filter the data displayed and managed by the CRUD by adding conditions to the model before setting it. This example restricts operations to European Union countries.

```php
$euCountries = new Country($app->db);
$euCountries->addCondition('is_eu', true);

Crud::addTo($app)->setModel($euCountries);
```

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

### Basic Loader Usage

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

Use the set() method to define content that will be loaded dynamically. A spinner is shown to the user while content loads. This simulates a slow-loading component.

```php
$loader = \Atk4\Ui\Loader::addTo($app);
$loader->set(function (\Atk4\Ui\Loader $p) {
    // simulate slow-loading component
    sleep(2);
    \Atk4\Ui\LoremIpsum::addTo($p);
});
```

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

### Toggle Accordion Section via JavaScript

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

Control the state of an Accordion section using JavaScript. This example shows how to toggle a specific section when a button is clicked.

```php
$button = Button::addTo($bar, ['Toggle Section 1']);

$acc = Accordion::addTo($app, ['type' => ['styled', 'fluid']]);
$section1 = LoremIpsum::addTo($acc->addSection('Static Text'));
$section2 = LoremIpsum::addTo($acc->addSection('Static Text'));

$button->on('click', $acc->jsToggle($section1));
```

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

### Setting Component Properties with Seed

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

Illustrates using the 'Seed' format to set component properties after initialization.

```php
$button->icon = 'book';
```

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

### Setting a Static Source for Lister

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

Demonstrates how to provide a static array of data to a Lister, bypassing the need for a database model. Each element in the array represents a row with 'flag' and 'name' keys.

```php
$lister->setSource([
    ['flag' => 'ca', 'name' => 'Canada'],
    ['flag' => 'uk', 'name' => 'UK'],
]);
```

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

### Basic Conditional Display Rules for Form Controls

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

Use setControlsDisplayRules to show controls based on the state of other controls. This example shows how 'phone2' is displayed only if 'phone1' is not empty, and so on.

```php
$form = Form::addTo($app);
$form->addControl('phone1');
$form->addControl('phone2');
$form->addControl('phone3');
$form->addControl('phone4');

$form->setControlsDisplayRules([
    'phone2' => ['phone1' => 'notEmpty'],
    'phone3' => ['phone1' => 'notEmpty', 'phone2' => 'notEmpty'],
    'phone4' => ['phone1' => 'notEmpty', 'phone2' => 'notEmpty', 'phone3' => 'notEmpty'],
]);
```

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

### Create Button with Icon Property

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

Shows how to initialize a Button component and assign an icon using its 'icon' property.

```php
$button = Button::addTo($app, ['icon' => 'book']);
```

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

### Loader with Custom Shim

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

Configure a custom view for the loader's shim, which is displayed while content is loading. This example uses a red message to prompt the user to wait.

```php
$loader = \Atk4\Ui\Loader::addTo($app, ['shim' => [\Atk4\Ui\Message::class, 'Please wait until we load LoremIpsum...', 'class.red' => true]]);
$loader->set(function (\Atk4\Ui\Loader $p) {
    // simulate slow-loading component
    sleep(2);
    \Atk4\Ui\LoremIpsum::addTo($p);
});
```

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

### Create Icon Instance for Button

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

Manually create an Icon instance and pass it to the Button's 'icon' option.

```php
$icon = new \Atk4\Ui\Icon('book');
$b1 = new \Atk4\Ui\Button(['Click Me', 'icon' => $icon]);
```

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

### Customizing Popup UI for VirtualPage

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

Set the $ui property of VirtualPage to customize the container class when using 'popup' mode. This example uses 'red inverted segment'.

```php
$vp = \Atk4\Ui\VirtualPage::addTo($layout);
\Atk4\Ui\LoremIpsum::addTo($vp);
$vp->ui = 'red inverted segment';

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

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

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

### Add Basic Icon

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

Instantiate an Icon component with a name. This is the most basic way to add an icon.

```php
$icon = Icon::addTo($app, ['book']);
```

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

### Add Generic and Accordion Sub-layouts to a Form

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

Organize form fields using sub-layouts. This example demonstrates adding a generic sub-layout and an accordion sub-layout, populating them with model data.

```php
$form = Form::addTo($app);
$form->setEntity($model, []);

$subLayout = $form->layout->addSubLayout([qsen:Atk4UiFormLayoutSection::class]);

Header::addTo($subLayout, ['Accordion Section in Form']);
$subLayout->setEntity($model, ['name']);

$accordionLayout = $form->layout->addSubLayout([qsen:Atk4UiFormLayoutSectionAccordion::class]);

$a1 = $accordionLayout->addSection('Section 1');
$a1->setEntity($model, ['iso', 'iso3']);

$a2 = $accordionLayout->addSection('Section 2');
$a2->setEntity($model, ['numcode', 'phonecode']);
```

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

### Injecting Database Dependency

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

Demonstrates how to inject a database connection into the App class for use by models.

```php
$app->db = new \Atk4\Data\Persistence\Sql($dsn);

// later anywhere in the code:

$m = new MyModel($this->getApp()->db);
```

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

### Self-Closing Tag Example

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

Demonstrates the use of self-closing tags, which are equivalent to an opening tag immediately followed by its closing tag. This provides a concise way to represent empty tags.

```php
Hello, {$mytag}
```

```php
Hello, {mytag}{/}
```

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

### Set Primary Database for Application

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

Illustrates setting the primary database for the application, which can then be accessed by views.

```php
$app->db = new \Atk4\Data\Persistence\Sql($dsn);

// next, anywhere in a view
$client = new Client($this->getApp()->db);
$form->setEntity($client);
```

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

### Passing Browser Screen Width to JsCallback

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

Use the second argument of JsCallback::set() to pass dynamic values from the browser to your callback. This example sends the browser screen width.

```php
$label = \Atk4\Ui\Label::addTo($app);
$cb = \Atk4\Ui\JsCallback::addTo($label);

$cb->set(function (\Atk4\Ui\Js\Jquery $j, int $windowWidth) {
    return 'width is ' . $windowWidth;
}, [
    new \Atk4\Ui\Js\JsCallbackLoadableValue(new JsExpression('$(window).width()'), static fn ($v) => (int) $v),
]);

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

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

### Database Connection Configuration

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

Establishes a database connection using provided credentials and configures the Atk4/Ui application with this database connection. The 'callExit' option is set to false.

```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,
]);

```
Tokens:
Raw