Agile UI - Hackathon #1 Welcome to the first 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 first 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 difficulties, 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. 1 <?php 2 3 echo "PHP WORKS!!"; If you have difficulties 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 <?php 2 3 require 'vendor/autoload.php'; 4 5 $app = new \atk4\ui\App('My First App'); 6 $app->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 different 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 effect is the same. Finally if you are using IDE, you may find 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 files 'test.php', 'demo.php', you can create navigation between those files 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 find 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 file, 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 find 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 affect the "segment" decoration. 4. finally set() will set the text that appears in a box. To find 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 stuff 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 find 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 find 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://stackoverflow.com/questions/6817551/sequel- pro-alternative-for-windows) or even phpmyadmin that comes with MAMP (http://stackoverflow.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 file, 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 first 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!.