Agile UI - Hackathon #1

Welcome to the ﬁrst Agile UI hackathon to be held in Latvia. On behalf of the creators of Agile UI, we invite you to emerse yourself into our product and have fun.

Our team have been working hard to bring you the ﬁrst version of our Component Framework. We are very passionate about component-based web development and we are pleased to present to you our latest creation which is an open-source product and is available to you for both personal and commercial projects.

We would like to tell you more about other events, components and share useful articles with you that can help you improve as a Web Developer. You can get updates through our twitter (@atk4) or on Facebook. Getting Started

We have prepared instructions for you so that you can get your hands on our brand new Agile UI library. The current version is 1.0 but we have planned more releases soon. To get the most up-to-date release:

1. Set up PHP and MySQL if you don't have (We recommend (https://www.mamp.info/en/) 2. Install Composer (https://getcomposer.org). If you have diﬃculties, read https://tommcfarlin.com/setting-php-and-composer-in-mamp/. 3. Install MySQL manager 4. Create a very basic "test.php" and open it through the browser.

If you have diﬃculties setting up PHP, MySQL or Composer, just Google! Answers are there.

Installing Agile UI

Through terminal go inside folder where "test.php" is located and run:

1 composer require atk4/ui

This will install most recent version of "Agile UI" and "Agile Data". To update, you can always use composer update command.

"Hello World" in Agile UI

Edit your "test.php" to contain the following: 1 initLayout('Centered'); 7 8 // Place your code below: 9 $app->layout->add('HelloWorld');

Keep the "test.php" open in your browser, you'll be editing it again. If you already familiar with some full-stack PHP framework (Laravel, Symfony, Yii, FuelPHP, CakePHP etc), then you should try to integrate Agile UI into it. We do not have integration guides yet, but if you you are the right person to help us with that - let us know! Making things more interesting

With the basics working, now you can try using diﬀerent components in ATK.

Buttons

1 $button = $app-layout->add(['Button', 'Hello there']);

This should add a basic button on your page. (Don't forget square brackets, they indicate an Array in PHP). You can inject property defaults to your button like this:

1 $button = $app->layout->add(['Button', 'Hello there', 'icon'=>'book']);

The other approach you can use is:

1 $button = $app->layout->add('Button'); 2 $button->set('Hello there'); 3 $button->icon = 'book';

The eﬀect is the same. Finally if you are using IDE, you may ﬁnd the following format more welcoming:

1 use \atk4\ui\Button; 2 3 $button = new Button('Hello there'); 4 $button->icon = 'book'; 5 $app->layout->add($button);

Find the syntax that's more comfortable for you. Button supports many variations, you can combine them any way you want. See https://github.com/atk4/ui/blob/develop/demos/button.php Working with Button

You can make button take you to another page if you click it. We have made it very simple:

1 $button->link('http://google.com/');

If you want to create several ﬁles 'test.php', 'demo.php', you can create navigation between those ﬁles too. You can also pass arguments between pages like this:

1 $button->link(['demo', 'id'=>2]);

User who now clicks on your button will invoke script on "demo.php" and the argument "id" can be accessible through $_GET['id'] .

To ﬁnd out what else you can do with button, read full documentation here:

http://agile-ui.readthedocs.io/en/latest/button.html

Fun with Segments

Agile UI is based on a CSS framework called "Semantic UI". Create a demo.php ﬁle, initialize Agile UI there and add the following into your app's layout:

1 $app->layout->add(['View', 'ui'=>'segment']) 2 ->addClass('red inverted') 3 ->set('ID passed: '.$_GET['id']);

This will create a destination page for the button that you have created previously and you will be able to observe the ID argument (2) inside a red segment. Next, lets ﬁnd out why it's red!

1. method add() creates a new basic component from class "View". 2. The parameter 'ui'=>'segment' will be passed to Semantic UI to decorate your component. 3. addClass('red inverted') will aﬀect the "segment" decoration. 4. ﬁnally set() will set the text that appears in a box.

To ﬁnd out more about Semantic UI segments, see this documentation:

http://agile-ui.readthedocs.io/en/latest/view.html http://semantic-ui.com/elements/segment.html

Agile UI does not require you to write HTML (not for the basic stuﬀ anyway), but you can still decorate your objects with some Semantic UI features. Try out this code:

1 $app->layout->add(['View', 'ui'=>'segment']) 2 ->addClass('inverted red circular') 3 ->add(['Header', 'Buy Now', 'inverted', 'subHeader'=>'$9.99']); The reason why I'm insisting on using PHP and not HTML is because you can use object-oriented qualities of PHP to encapsulate all this functionality into a new component for the red Buy button that can be used like this:

1 $app->layout->add(['RedBuyButton', 'price'=>9.99]);

If you just copy examples, this one won't work. That's because "RedBuyButton" component is not implemented yet. You can either implement it yourself, or ﬁnd someone who could implement it for you. Data Manipulation

So far we have only looked into the UI features. If you wanted a non-interactive, static UI you could have just made a HTML page, or even used Photoshop. Web apps work with DYNAMIC data, that can change any minute. Let's ﬁnd out which components can help you with accessing and changing data.

Grid (Table)

The most convenient way to display data is through a Grid:

1 $grid = $app->layout->add(['Grid']); 2 $grid->setSource(['John','Peter','Steven']);

While 'setSource' is a pretty good way to start, but we want our data to come from a MySQL database. Use MySQL management tool (http://stackoverﬂow.com/questions/6817551/sequel- pro-alternative-for-windows) or even phpmyadmin that comes with MAMP (http://stackoverﬂow.com/questions/14094534/getting-to-phpmyadmin-with-mamp) you can access your MySQL server.

Create table "client" with columns "name" and "address". Add several rows of data.

Our next task is to connect to the database from your PHP app and channel the data into the Grid. To connect use this code. Now $db will contain your database persistence object.

1 $db = new \atk4\data\Persistence_SQL('mysql:dbname=atkui;host=localhost','root','r oot');

Next you need to describe structure of your data to the rest of PHP application by using a "Model". 1 class Client extends \atk4\data\Model { 2 public $table = 'client'; 3 4 function init() { 5 parent::init(); 6 7 $this->addField('name'); 8 $this->addField('address'); 9 } 10 }

You can place this class declaration in your PHP ﬁle, or make use of Composer's autoloader functionality by adding this inside your composer.json and running composer update afterwards.

1 "autoload":{ 2 "psr-0":{ 3 "": "lib/" 4 } 5 },

Documentation: https://getcomposer.org/doc/04-schema.md#psr-0

In order to connect component to your database you'll need both the database persistance object and the model class:

1 // $grid->setSource() <----- remove this line 2 3 $grid->setModel(new Client($db));

You should now see your data inside a Grid component.

Form

My last example is about using Form component with the data you have just prepared. Because Form can only work with a single record at a time, i'll have to either load it by id load(5) or use loadAny() which will pick ﬁrst row of your table.

1 $form = $app->layout->add('Form'); 2 $form->setModel(new Client($db)); 3 4 $form->model->loadAny(); // will load SOME record from

Form is an interractive component which allows user to submit data back to your application. Lets create a save function: 1 $form->onSubmit(function($form) { 2 $form->model->save(); 3 return $form->success('Record updated'); 4 });

Try editing the record and you should have the data stored back inside the database. Next - Build Something Cool

Agile UI and Agile Data are just a tools to help you create something really cool. We made them so that you could use them even if you're very new to this "programming" thing. As you become more experience you will be able to do more things.

We are excited to see what can you build during this hackaton and if you want to continue using Agile UI come and tell us. For more information, links to community resources see: http://github.com/atk4/ui

Have a pleasant hacking!