From 306a94de8c72e9e5926f1205cec31f5cd641ce32 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Thu, 8 Dec 2016 13:00:42 +0000 Subject: [PATCH 001/100] updated dependency, which fixes bug --- composer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/composer.json b/composer.json index 648f03ec9a..fac014bdaf 100644 --- a/composer.json +++ b/composer.json @@ -22,7 +22,7 @@ "facebook/webdriver": "^1.1", "phpunit/phpunit-selenium": ">=1.2", "fzaninotto/faker": "*", - "atk4/core": "~1.1.6", + "atk4/core": "~1.1.8", "semantic/ui": "*", "codeclimate/php-test-reporter": "*" }, From e6b40eb7a023f2f62f590d6badb59599d826f30b Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Thu, 8 Dec 2016 13:16:14 +0000 Subject: [PATCH 002/100] enhanced demo for buttons --- demos/button.php | 75 ++++++++++++++++++++++++++----- demos/index.php | 38 ---------------- demos/templates/layout1.html | 46 +++---------------- demos/templates/layout1.jade | 87 +++--------------------------------- src/H2.php | 11 +++++ 5 files changed, 87 insertions(+), 170 deletions(-) delete mode 100644 demos/index.php create mode 100644 src/H2.php diff --git a/demos/button.php b/demos/button.php index 7a73c44405..964d098282 100644 --- a/demos/button.php +++ b/demos/button.php @@ -4,12 +4,13 @@ */ require'../vendor/autoload.php'; - use \atk4\ui\Button; - use \atk4\ui\Buttons; - use \atk4\ui\Label; - use \atk4\ui\Icon; - use \atk4\ui\View; - use \atk4\ui\Template; +use \atk4\ui\Button; +use \atk4\ui\Buttons; +use \atk4\ui\Label; +use \atk4\ui\Icon; +use \atk4\ui\View; +use \atk4\ui\Template; +use \atk4\ui\H2; @@ -19,16 +20,70 @@ $layout = new \atk4\ui\Layout\App(['template'=>'./templates/layout2.html']); -$view = new View(['template'=>new Template('Hello, {$tag1}, my name is {$tag2}')]); + $layout->add(new H2('Basic Button')); + $layout->add(new Button())->set('Click me'); -$view->add(new Button('World'), 'tag1'); -$view->add(new Button(['Agile UI', 'blue']), 'tag2'); + $layout->add(new H2('Properties')); + $b1 = new Button(); + $b2 = new Button(); + $b3 = new Button(); + $b1->set(['Load', 'primary']); + $b2->set(['Load', 'labeled', 'icon'=>'pause']); + $b3->set(['Next', 'right labeled', 'icon'=>'right arrow']); + $layout->add($b1); + $layout->add($b2); + $layout->add($b3); -$layout->add($view); + $button = new Button(); + $button->set('Click me'); + $button->set(['primary' => true]); + $button->set(['icon'=>'check']); + $button->set(['size big'=>true]); + $layout->add(new H2('Big Button')); + + $layout->add($button); + + $layout->add(new H2('Button Intent')); + + $b_yes = new Button(['Yes', 'positive basic']); + $b_no = new Button(['No', 'negative basic']); + $layout->add($b_yes); + $layout->add($b_no); + + $layout->add(new H2('Combining Buttons')); + $bar = new Buttons('vertical'); // NOTE: class called Buttons, not Button + $bar->add(new Button(['Play', 'icon'=>'play'])); + $bar->add(new Button(['Pause', 'icon'=>'pause'])); + $bar->add(new Button(['Shuffle', 'icon'=>'shuffle'])); + + $layout->add($bar); + + $layout->add(new H2('Icon Bar')); + $bar = new Buttons('blue big'); + $bar->add(new Button(['icon'=>'file'])); + $bar->add(new Button(['icon'=>['save','yellow']])); + $bar->add(new Button(['icon'=>'upload', 'disabled'=>true])); + $layout->add($bar); + + $layout->add(new H2('Forks')); + $forks = new Button(['labeled'=> true]); // Button, not Buttons! + $forks->add(new Button(['Forks', 'blue']))->add(new Icon('fork')); + $forks->add(new Label(['1,048', 'basic blue left pointing'])); + $layout->add($forks); + + + + $layout->add(new H2('Custom Template')); + $view = new View(['template'=>new Template('Hello, {$tag1}, my name is {$tag2}')]); + + $view->add(new Button('World'), 'tag1'); + $view->add(new Button(['Agile UI', 'blue']), 'tag2'); + + $layout->add($view); echo $layout->render(); diff --git a/demos/index.php b/demos/index.php deleted file mode 100644 index e2d323d550..0000000000 --- a/demos/index.php +++ /dev/null @@ -1,38 +0,0 @@ -'Hello'], - ['name'=>'World'] -]; - -$db = new \atk4\data\Persistence_Array($data); -$examples = new \atk4\ui\Lister('templates/index1.html'); - -$m = new \atk4\data\Model($db); -$m->addField('name'); - -$examples->setModel($m); -$examples->render(); - -$html = $examples->getHTML(); -$js = $examples->getJS(); - -?> - - - - - - - - - - - diff --git a/demos/templates/layout1.html b/demos/templates/layout1.html index f63efcf716..edb4da9743 100644 --- a/demos/templates/layout1.html +++ b/demos/templates/layout1.html @@ -17,52 +17,16 @@ bottom: 0; width: 100%; } - .main.segment { - margin-top: 3em; + body { + padding-top: 3em; } } -
SMBO Reports -
Sales -
Profit & Loss -
Clients -
CollectorDebtors
-
-
Till -
Cash-up list
-
-
Analysis -
Sales AnalysisSales Breakdown
-
-
-
Accountant Reports
Aged DebtorsDebtor Control ReportLodgement Analysis -
-
-
Purchases -
Profit & LossStock -
Suppliers -
Creditors
-
-
Analysis -
Purchase AnalysisPurchase Breakdown
-
-
-
Accountant Reports
Aged Debtors ReportLodgement Analysis -
-
-
Ledger -
At a glanceProfit & LossBalance SheetGeneral LedgerNominal ActivitySimple Trial Balance -
Other Reports -
Trial Balance D/DSales Breakdown
-
-
-
Accountant Reports
Opening BalancesYTD Report -
-
-
VAT -
VAT ReconciliationIntrastatARTDVAT3VAT ControlVAT Errors
+
UI Test Layout 2 +
Basic Examples +
Layout testButton test
diff --git a/demos/templates/layout1.jade b/demos/templates/layout1.jade index 4564068a54..0dcaa8c737 100644 --- a/demos/templates/layout1.jade +++ b/demos/templates/layout1.jade @@ -17,95 +17,20 @@ html bottom: 0; width: 100%; } - .main.segment { - margin-top: 3em; + body { + padding-top: 3em; } } body .ui.inverted.fixed.horizontal.menu a.header.item(href='#') - | SMBO Reports + | UI Test Layout 2 .ui.simple.dropdown.item - | Sales + | Basic Examples i.dropdown.icon .menu - a.item(href='#') Profit & Loss - .item - i.dropdown.icon - | Clients - .menu - a.item(href='#') Collector - a.item(href='#') Debtors - .item - i.dropdown.icon - | Till - .menu - a.item(href='#') Cash-up list - .item - i.dropdown.icon - | Analysis - .menu - a.item(href='#') Sales Analysis - a.item(href='#') Sales Breakdown - .divider - .header Accountant Reports - a.item(href='#') Aged Debtors - a.item(href='#') Debtor Control Report - a.item(href='#') Lodgement Analysis - - .ui.simple.dropdown.item - | Purchases - i.dropdown.icon - .menu - a.item(href='#') Profit & Loss - a.item(href='#') Stock - .item - i.dropdown.icon - | Suppliers - .menu - a.item(href='#') Creditors - .item - i.dropdown.icon - | Analysis - .menu - a.item(href='#') Purchase Analysis - a.item(href='#') Purchase Breakdown - .divider - .header Accountant Reports - a.item(href='#') Aged Debtors Report - a.item(href='#') Lodgement Analysis - - .ui.simple.dropdown.item - | Ledger - i.dropdown.icon - .menu - a.item(href='#') At a glance - a.item(href='#') Profit & Loss - a.item(href='#') Balance Sheet - a.item(href='#') General Ledger - a.item(href='#').active Nominal Activity - a.item(href='#') Simple Trial Balance - .item - i.dropdown.icon - | Other Reports - .menu - a.item(href='#') Trial Balance D/D - a.item(href='#') Sales Breakdown - .divider - .header Accountant Reports - a.item(href='#') Opening Balances - a.item(href='#') YTD Report - - .ui.simple.dropdown.item - | VAT - i.dropdown.icon - .menu - a.item(href='#') VAT Reconciliation - a.item(href='#') Intrastat - a.item(href='#') ARTD - a.item(href='#') VAT3 - a.item(href='#') VAT Control - a.item(href='#') VAT Errors + a.item(href='layout.php') Layout test + a.item(href='button.php') Button test .ui.main.basic.segment h3 Nominal Acitivity Report diff --git a/src/H2.php b/src/H2.php new file mode 100644 index 0000000000..d04f27243f --- /dev/null +++ b/src/H2.php @@ -0,0 +1,11 @@ +template->set('_element', 'h4'); + + } +} From d93a534583b539daeb1eda433a3eedb36fa87f3e Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Fri, 9 Dec 2016 23:30:51 +0000 Subject: [PATCH 003/100] slightly cleaned up README file --- README.md | 170 ++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 120 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index f107ab21df..cb68480814 100644 --- a/README.md +++ b/README.md @@ -1,58 +1,121 @@ # Agile UI -**PHP library for building consistent Web User Interfaces.** +**Web UI Component library.** -*"As a full-stack PHP developer I love writing code. But when dealing with Web Apps I am forced to also work with HTML and CSS. I wish there would be an easy-to-use UI that could just work out of the box."* -- Anonymous Coder. +All developers understand and agree with DRY (Don't Repeat Yourself) principle, yet web developers continue to do that over and over again. Every time you create that new Twig template with the snippets of the bootstrap code you keep copying it over and over. -Developers rejoice!! If you use Bootstrap or Sematnic UI - why bother copy-pasting those HTML snippets from template to template? +Component libraries are designed to create Views (aka widgets) that can render themselves into HTML. However it's not a simple tasks as there are 3 major challenges for authors of component frameworks: -Agile UI brings all the core UI components to life though a simple object oriented interface that can work easily and natively inside any PHP application or framework. +- Data access mechanics. + - View need reliable way to access data in your database. + - Use of SQL queries or ORM would require developer to provide "glue". + - Data Source should be abstracted. +- Logic-less HTML template engine. + - PHP developers are mostly familiar with "smart" template engines like Smarty, Twig. + - View contains presentation logic, so it synergise better with logic-less template engines. + - Template engine must be designed to work with component framework +- Developers must have no desire to tweak HTML code structure. + - You must be comfortable with CSS framework such as Symantic UI. + - CSS framework needs to support theeming and variables + - Component-driven design encourages consistent UI. + +Agile UI solves call the requirements while remaining beautiful to web developer (code) and the user (ui). + +## Show me the code + +There are dozens of various UI elements in Agile UI. Most views are quite extensive and configurable, but they all work very well out of the box. The following code will place 2 CRUD tables on your page, that are fully interractive and integrate with your database fields, types and rules: + +``` php +$v = new \atk4\ui\View(); + +$cr = $v->add(new \atk4\ui\CRUD())->setModel(new Order($db)); +$cl = $v->add(new \atk4\ui\CRUD())->setModel(new Payment($db)); + +echo $cr->render(); +``` + +![crud](docs/crud.png) ## Features of Agile UI -- Extensive library of UI elements - Grid, Form, Card, CRUD, Menu and many more. -- Uses Semantic UI or Bootstrap CSS frameworks and fully responsive. -- Works with any database schema, SQL or NoSQL. -- Integration with JavaScript frameworks such as jQuery. -- No page reloads. AJAX and Dynamic Dialogs. -- Use your own tempalte, or create composite UI views. +We try to stay ahead from other UI libraries and bring innovation to PHP apps, so Agile UI offers a lot of unique features: + +- Works anywhere. Place inside any framework or application and it will be fully funcitonal. +- Client-side event mapping from PHP to jQuery. +- Fully interractive. Any view can execute server-side PHP code through AJAX callbacks. +- Fully context-aware. Support selective rendering. Fast performance. +- Very lightweight and has minimum dependencies. +- Reliable standard for designing portable UI widgets. +- Extensible through 3rd party widgets, themes and data sources. -## How to use Agile UI +## Challenges solved by Agile UI -Agile UI lets you to build apps with only the basic PHP knowledge. If you are already using a framework or an application, you can incorporate Agile UI on some of your pages. You have several choices: +Creating a robust UI library is not a simple feat. Many have tried and failed. We have spent over a decade trying to get it right. The first public releases of AModules2 date back to 2004 followed by AModules3 and finally Agile Toolkit 4, which was released in 2011 as a full-stack framework. -- Full page render - Agile UI will produce all of the HTML on your page -- Layout render - Best for composite UI that would fit into your existing HTML. -- View render - Render individual UI component (Form, Button or Menu) +Agile UI takes the best parts from Agile Toolkit to bring it to your favourite framework and it does that under MIT license. -The code below consists of 3 parts: Building the UI objects. Rendering. Outputting. +- No custom JavaScript libraries. Uses only jQuery and Semantic UI API. +- No conflicts between multiple View on the same page. All Views have unique "id". +- 2-pass execution. View objects are established first, then rendering convers objects to HTML. +- Support for JavaScript and Debug streams. Support for custom includes. +- Implements "Virtual" pages that allow any View to create nested pages for pop-ups. +- Automatic escaping and formatting of user data. +- Support for connecting independent View tree branches. +- Fully responsive HTML output that can also work without JavaScript. + +## How can you use Agile UI + +Well, start with a form: ``` php -$cr = new \atk4\ui\CRUD(); -$cr->setModel(new Client($db)); +require'vendor/loader.php'; + +$form = new \atk4\UI\Form(); -$cr->render(); +$form->addField('name', ['required'=>true]); +$form->addField('surname'); -// Anywhere in your code: -$html = $m->getHTML(); -$js = $m->getJS(); +$form->onSubmit(function($form){ + return "Hello, ".$form['name']; +}); + +$app = new \atk4\ui\App(); +$app->add($form); +$app->run(); ``` - The above code will place the following interactive element on one of your pages:![crud](docs/crud.png) +This will display a nicely looking form on a neatly looking page. Try submitting empty form. You will see validation in action and if you do submit form successfully, you will see a UI response, all without single page reload. So how does this work: + +- Form is a view, so it renders itself and its fields as HTML. +- Default layout uses clean centered Layout and boilerplate HTML. +- Form uses Semantic UI API to submit data dynamically. +- Submission response carries JavaScript events. In our case it may display error or success message. -The above CRUD view will be fully interractive, respond to button-clicks, reload itself, use pagination and dialogs without any additional code or mark-up. +## What kind of interface can be created with Agile UI + +Actually any interface can be done with Agile UI. If you ever feel a need to have your own HTML code anywhere, simply use a View with your own template. It will play nice with the rest of the objects. ### Data Access -Agile UI uses database access abstraction framework [Agile Data](http://git.io/ad), which is compatible with SQL and NoSQL data-sources. For the above code to work you would have to define a "Client" class and initialize database connection. +Through [Agile Data](http://git.io/ad), you can use any SQL and NoSQL to load and store data. If you wish to list the files inside your S3 bucket, use this code: + +``` php +$config = ['key'=>'..your key', 'secret'=>'..your secret']; + +$bucket = new \atk4\s3\Persistence\Bucket('my-bucket', $config); +$file = new \atk4\s3\Model\File($bucket); + +$file->setPath('/'); -### Output +$tree = new \atk4\ui\View\Tree(); +$tree->setModel($file); -Agile Data objects produces 3 types of output: +$app = new \atk4\ui\App(); +$app->add($tree); +$app->run(); +``` -- HTML output - place it where you would like your UI objects to appear. -- JavaScript output - ` + ``` -Should be placed inside a `` of a page that has Semantic UI included. For full page output, see next example. +So Form class technically is a HTML Generator similar to "Laravel Form", "Yii Form", "Zend Form", make your pick. -![crud](docs/crud.png) - -## Features of Agile UI +Agile UI however, comes with many unique features, such as: -We try to stay ahead from other UI libraries and bring innovation to PHP apps, so Agile UI offers a lot of unique features: +- JS Events - bind events on view with an interface to jQuery and its various plugins. +- Interactivity - views can submit data back, execute server-side PHP code. +- Recursion - views can contain other views forming a rather complex UI patterns. +- Flexibility - support 90% of CSS framework features trpansparently: size, color, effects, icons, etc. +- Custom Templates - for the remaining 10%, use views. +- Data integration - when generic CRUD View reads field names, types, lables and captions from Domain Model. -- Works anywhere. Place inside any framework or application and it will be fully funcitonal. -- Client-side event mapping from PHP to jQuery. -- Fully interractive. Any view can execute server-side PHP code through AJAX callbacks. -- Fully context-aware. Support selective rendering. Fast performance. -- Very lightweight and has minimum dependencies. -- Reliable standard for designing portable UI widgets. -- Extensible through 3rd party widgets, themes and data sources. +## Component Architectural Design -## Challenges solved by Agile UI +Many frameworks rely on "views" that consist of logic-infused HTML templates (or even use PHP as template). Agile UI takes logic out of the template entirely and moves it into View - PHP classes extending from `\atk4\UI\View`. Templates become view-specific and not page-specific of action-specific: -Creating a robust UI library is not a simple feat. Many have tried and failed. We have spent over a decade trying to get it right. The first public releases of AModules2 date back to 2004 followed by AModules3 and finally Agile Toolkit 4, which was released in 2011 as a full-stack framework. +``` php +$ui = new \atk4\UI\Columns(); +$ui->addColumn()->add(new View\LogInForm()); +$ui->addColumn()->add(new View\RegisterForm()); +``` -Agile UI takes the best parts from Agile Toolkit to bring it to your favourite framework and it does that under MIT license. +Here you can define `View\LogInForm` in a separate class that implement that specific component UI logic. Once defined, View can be used anywhere in your application. View class may choose to replace default template with a custom one, but since it's an implementation detail, that wouldn't impact rest of the UI. -- No custom JavaScript libraries. Uses only jQuery and Semantic UI API. -- No conflicts between multiple View on the same page. All Views have unique "id". -- 2-pass execution. View objects are established first, then rendering convers objects to HTML. -- Support for JavaScript and Debug streams. Support for custom includes. -- Implements "Virtual" pages that allow any View to create nested pages for pop-ups. -- Automatic escaping and formatting of user data. -- Support for connecting independent View tree branches. -- Fully responsive HTML output that can also work without JavaScript. +Combination of Views create a **Render Tree** - concept very familiar to Desktop/Mobile developers. -## How can you use Agile UI +### Models and Views -Well, start with a form: +Most of the Views integrate with a [Domain Models](https://github.com/atk4/data) objects. In this instance, using `setModel` will automatically populate all form fields, types, labels and hints: ``` php -require'vendor/loader.php'; +$db = new \atk4\data\Persistence::connect($dsn); +$model = new User($db); -$form = new \atk4\UI\Form(); +$form = new \atk4\ui\Form(); +$form->setModel($db); -$form->addField('name', ['required'=>true]); -$form->addField('surname'); +echo $form->render(); // populated +``` -$form->onSubmit(function($form){ - return "Hello, ".$form['name']; -}); +It's very important that your View classes only implement UI logic, while Domain logic will still reside inside the Model class: -$app = new \atk4\ui\App(); -$app->add($form); -$app->run(); +``` php +class User extends \atk4\data\Model { + public $table = 'user'; + function init() { + parent::init(); + $this->addField('name', ['mandatory'=>true, 'caption'=>'Full Name']); + $this->addField('joined', ['type'=>'date']); + } + function sendWelcomeEmail() { + ... + } +} ``` -This will display a nicely looking form on a neatly looking page. Try submitting empty form. You will see validation in action and if you do submit form successfully, you will see a UI response, all without single page reload. So how does this work: - -- Form is a view, so it renders itself and its fields as HTML. -- Default layout uses clean centered Layout and boilerplate HTML. -- Form uses Semantic UI API to submit data dynamically. -- Submission response carries JavaScript events. In our case it may display error or success message. +For more information of Agile Data, see https://github.com/atk4/data. -## What kind of interface can be created with Agile UI +### Semantic UI customization -Actually any interface can be done with Agile UI. If you ever feel a need to have your own HTML code anywhere, simply use a View with your own template. It will play nice with the rest of the objects. +Semantic UI offers wide range of customization through classes. Agile UI does not attempt to mimic every feature, but instead offer transparency. If you want to have black bar with orange button and the markup like this: -### Data Access +``` html +
+ +
+``` -Through [Agile Data](http://git.io/ad), you can use any SQL and NoSQL to load and store data. If you wish to list the files inside your S3 bucket, use this code: +you can use the following code in Agile UI: ``` php -$config = ['key'=>'..your key', 'secret'=>'..your secret']; +$v = new \atk4\ui\View(['ui'=>'segment', 'inverted']); +$v->add(new \atk4\ui\Button(['Orange', 'inverted orange'])); +``` -$bucket = new \atk4\s3\Persistence\Bucket('my-bucket', $config); -$file = new \atk4\s3\Model\File($bucket); +### Custom Templates + +Agile UI does not try to eliminate your ability to write HTML and in many cases having a template is better and more efficient way. Let's implement a "User Card" View using our own custom markup. Create file `card.html`: + +``` html +
+
+ +
+
+ {name}Kristy{/} +
+ {date}Joined in 2013{/} +
+
+ {description}Kristy is an art director living in New York.{/} +
+
+
+ {Extra} + + 22 Friends + {/} +
+
+``` -$file->setPath('/'); +Then use it as a template for a View: -$tree = new \atk4\ui\View\Tree(); -$tree->setModel($file); +``` php +$card = new \atk4\ui\View(['template'=>'card.html']); +``` -$app = new \atk4\ui\App(); -$app->add($tree); -$app->run(); +The "id" tag will be supplied by Agile UI automatically, but the rest of the tags can be set through a model: + +``` php +$user = new User($db); +$user->load(123); // ID of the person +$card->setModel($user); ``` -This should automatically fetch the objects from your S3 drive and display them as a folder structure. There are many 3rd party persistence drivers and you can create more of your own. +Templates can also be used for a form. In fact we can use that same "card.html" as a form layout: -### Layouts +```php +$form = new \atk4\UI\Form(); +$form->setLayout('card.html'); +$form->setModel($user); +``` -You can use a professional app layout, that comes with some pre-initialized objects such as Menus, Panels and toolbars: +Finally - templates are extremely useful with Lister class for producting non-tabular repeating HTML markup. -![layouts](docs/layouts.png) +## Full Page Render -Please note that in my next example I'm initializing application view first. It's not important how exactly you initialize views, as long as you don't forget to add them, you should be OK: +Agile UI can be used as a layout engine for your entire page: ``` php -$app = new \atk4\ui\App(); -$ui = $app->add(new \atk4\ui\Layout\TopMenu()); +$app = new \atk4\ui\App('Hello World'); +$app->setLayout(new \atk4\ui\Layout\Centered()); -$m_file = $ui->menu->addMenu('File'); -$m_file->addItems(['New..', 'Save', 'Save As..']); -$ui->menu->addItem(['Logout', 'icon'=>'exit', 'link'=>'logout.php']); +$app->layout->add($card); +$app->layout->add(new \atk4\ui\View(['ui'=>'divider'])); +$app->layout->add($form); -// Add some interractive elements -$button = new \atk4\ui\Button(['Register', 'green']); -$lorem = new \atk4\ui\LoremIpsum(); +$app->run(); +``` -$button->js('click', $lorem->reload()); +This will take care of the HTML boilerplate JS/CSS includes and everything else. -$ui->add($lorem); -$ui->add($button, 'TopBar_Right'); +## Factory -$app->run(); +Sometimes you want to override, which class should be used for certain widget on an application level. Application can map into a more consise syntax for `add()` and allow you to re-route components into appropriate namespace. + +``` php +$app = new \atk4\ui\App('Hello World'); +$app->map('BigButton', 'View\MyBigButton'); + +$view = $app->add('View'); + +$b1 = $view->add('Button', 'Button 1'); +$b2 = $view->add('Button', 'Button 2'); +$bb = $view->add('BigButton'); ``` -When you execute "run()" method, Agile UI will automatically output standard-compliant HTML, load JavaScript / CSS dependencies and bind events. +Re-routing can be used to replaced standard UI elements with a different classes. If you rather prefer to rely on "use" and hinting in your IDE, then use this syntax instead: -## Standart UI Components and Extensions +``` php +use \atk4\ui\View; +use \atk4\ui\Button; +use \View\MyBigButton as BigButton; -Agile UI comes integrates with "3rd party extension" library where other developers can share "Views" that they have created. The extension library is designed to help you sit down with your client and browse through available widgets and re-use some of the code rather than re-writing those every time. +$view = new View(); +$b1 = new Button('Button 1'); +$b2 = new Button('Button 2'); +$bb = new BigButton(); -Here is an example View for a "Login Form", sample 3rd party extension: +$app->add($view); +$view->add([$b1, $b2, $bb]); +``` - ![login](docs/login.png) +It does not matter matter in which order you add the elements, as long as all of the views become part of the same Render Tree. -All the Views (including 3rd party ones) follow these patterns: +## Events -- Produce correct HTML code that fits into the style of your app. -- Fully interractive out of the box. -- Always re-use basic elements elements (Button, Forms) -- Will work with your database (SQL or NoSQL) -- You tweak or replace any template, or insert more views such as extra buttons etc. +Agile UI supports events on any view: -## Security and Performance +``` php +$b1 = $view->add('Button', 'Button 1'); +$b2 = $view->add('Button', 'Butotn 2'); -When using 3rd party code, product owners have two major concerns: performance and security. +$b1->on('click')->toggle('active'); +$b2->on('hover', $b1->js()->hide('slow')); +``` -Agile Data addresses both through the use of "[Agile Data](http://git.io/ad)" - data access framework. To further improve security, there is a special extension that will enable ACL on per-object level for your domain model data. +Method calls to "toggle" and "hide" translate into jQuery chain systax: -## Based on Agile Toolkit Concepts +``` javascript +$('b1').on('click', function(){ $('b1').toggle('active'); }); +$('b2').on('click', function(){ $('b1').hide('slow'); }); +``` -Tens of thousands of developers have already used Agile Toolkit 4.3 or earlier, which today is one of the [most popular PHP UI Frameworks](https://www.google.co.uk/search?q=php+ui+framework&ie=UTF-8&oe=UTF-8&gfe_rd=cr&ei=Na7iV8mbN8GBaK7Ju7AD). Unfortunatelly the current verison of Agile Toolkit does not play well with other frameworks or applications. +## Server-Side Events -Agile UI is a refactor of the core functionality of Agile Toolkit, designed to address the following problems: +All the Views you initialize have a unique identifier in the render tree. This makes it possible for events to communicate with the PHP logic: -- Can be used in any framework. -- Has minimum dependencies. -- Full documentation and test-code coverage. -- Makes extensive use of Semantic UI and jQuery. -- Improved performance, memory management and security. +``` php +$b1 = $view->add('Button', 'Rand: '.rand(1,100)); +$b2 = $view->add('Button', 'Button 2'); -Once Aglie UI is finished, it will be available in "Agile Toolkit 4.4", but also as a plugin into other popular PHP platforms - Wordpress, Drupal, Magento, Laravel, Yii. +$b1->on('click')->reload(); // reload view dynamically +$b2->on('click', function($b){ + return $b->js()->text(rand(101, 200)); +}); +``` -As a developer you will get the benefit of accessing unified UI library regardless of which PHP framework you are using. +Eeach button now implements a call-back handler that works reliably, transparently and does not confilct with multiple Button instances on te same page. -## Render Tree Concept +## Virtual Pages -Agile Toolkit pioneered Render View Tree concept in 2011 and it's a fundamental principle of Agile UI framework today. It allows composing one view from another creating infinite posibilities. Here is a snippet demonstrating how to add a interactive Button inside a standard CRUD View: +You have your own routing preferences, however sometimes a component needs to open a pop-up or dialog box with additional UI inside. Agile UI offers concept of "Virtual Pages". Those pages have unique URL which will be accessible as long as the original element is accessible. ``` php -$b = new Button(['Hello', 'icon' => 'bell']); -$b->on('click', $b->dialog('Hello', function($page){ - $page->add(new View('hello.jade')); - $page->add(new Button('Close')) - ->js()->univ()->closeDialog(); -})); +$b1 = $view->add('Button', 'Click to Open Dialog'); -$cr->add($b, ['spot' => 'toolbar']); +$b1->add('VirtualPage')->bindEvent()->set(function($page) { + $page->add('LoremIpsum'); +});; ``` - ![crud2](docs/crud2.png) +## Advanced Component Features -We strive to create an extensive set of UI Views as well as educate 3rd party component developers to keep their components flexible and configurable. +With all of the advanced features available for the components, they can implement a higher level of view logic abstraction. Form submit handler is used for dynamic form submissions: -## Installation +``` php +$form->onSubmit(function($js){ + return $js->hide('slow'); +}); +``` -To start using Agile UI in your project: +Similarly a 'CRUD' view relies on 'Form' and 'Grid' views to create a fully-interractive CRUD experience: +``` php +$view->add('CRUD')->setModel('User'); ``` -composer require atk4/ui -``` -Depending on the framework/application platform that you are using, there might be an easier way to install Agile UI. +Producing the following: + +![crud](docs/crud.png) + +## More Features + +There are many other features, which I wanted to mentioned briefly: + +- Integration with RequireJS for dynamic JS includes +- Debug support +- Hooks / Callbacks +- Support for hierarchical trees +- Extensions + - Real-time terminal + - Access control ## Current Status From cb396e75cc4f2ef8c10d7902397d98d46b03e6a7 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Sat, 10 Dec 2016 16:17:50 +0000 Subject: [PATCH 006/100] updated test-code --- .gitignore | 1 + src/App.php | 27 +++++++ src/Button.php | 2 +- src/Layout/Centered.php | 7 ++ src/View.php | 12 ++- template/semantic-ui/html.html | 17 ++++ template/semantic-ui/html.jade | 19 +++++ template/semantic-ui/layout/centered.html | 6 ++ template/semantic-ui/layout/centered.jade | 5 ++ tests/ButtonTest.php | 98 +++++++++++++++++++++++ 10 files changed, 189 insertions(+), 5 deletions(-) create mode 100644 src/Layout/Centered.php create mode 100644 template/semantic-ui/html.html create mode 100644 template/semantic-ui/html.jade create mode 100644 template/semantic-ui/layout/centered.html create mode 100644 template/semantic-ui/layout/centered.jade create mode 100644 tests/ButtonTest.php diff --git a/.gitignore b/.gitignore index 19e473adb7..e66f5ea0c6 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ docs/build /composer.lock /build .DS_Store +*.codekit3 diff --git a/src/App.php b/src/App.php index e1b2a10bc2..364767eceb 100644 --- a/src/App.php +++ b/src/App.php @@ -7,12 +7,21 @@ class App { init as _init; } + public $title = 'Agile UI - Untitled Application'; + + public $layout = null; // the top-most view object + public $template_dir = null; public $skin = 'semantic-ui'; public function __construct($defaults = []) { + if (is_string($defaults)) { + $defaults = ['title'=>$defaults]; + + } + if (!is_array($defaults)) { throw new Exception(['Constructor requires array argument', 'arg' => $defaults]); } @@ -25,6 +34,24 @@ public function __construct($defaults = []) } } + function setLayout(\atk4\ui\Layout $layout) + { + $this->html = new View(['template'=>'html.html']); + $this->layout = $this->html->add($layout); + return $this; + } + + function add() + { + return call_user_func_array([$this->layout, 'add'], func_get_args()); + } + + function run() + { + $this->html->set('title', $this->title); + echo $this->html->render(); + } + function init() { $this->_init(); $this->template_dir = dirname(dirname(__FILE__)).'/template/'.$this->skin; diff --git a/src/Button.php b/src/Button.php index 3259f1f008..38f7e02cfa 100644 --- a/src/Button.php +++ b/src/Button.php @@ -2,7 +2,7 @@ namespace atk4\ui; class Button extends View { - public $_class = 'button'; + public $ui = 'button'; public $icon = null; diff --git a/src/Layout/Centered.php b/src/Layout/Centered.php new file mode 100644 index 0000000000..707fd79f2c --- /dev/null +++ b/src/Layout/Centered.php @@ -0,0 +1,7 @@ +template->append('class', join(' ', $this->class)); } - if ($this->_class) { - $this->template->set('_class', $this->_class); + if ($this->ui) { + if (is_string($this->ui)) { + $this->template->set('_class', $this->ui); + } } else { $this->template->tryDel('_ui'); } diff --git a/template/semantic-ui/html.html b/template/semantic-ui/html.html new file mode 100644 index 0000000000..58a7cff48a --- /dev/null +++ b/template/semantic-ui/html.html @@ -0,0 +1,17 @@ + + + + {title}Agile UI - Untitled Project{/}{$meta} + + + + + + + + {$Content} + \ No newline at end of file diff --git a/template/semantic-ui/html.jade b/template/semantic-ui/html.jade new file mode 100644 index 0000000000..69bd7dd13c --- /dev/null +++ b/template/semantic-ui/html.jade @@ -0,0 +1,19 @@ +doctype html +html(lang="{lang}en{/}") + head + title {title}Agile UI - Untitled Project{/} + | {$meta} + meta(charset='utf-8') + link(rel='stylesheet', type='text/css', href='http://semantic-ui.com/dist/semantic.css') + script(src='https://code.jquery.com/jquery-3.1.1.js') + script(src='http://semantic-ui.com/dist/semantic.js') + script. + $(function(){ + {$domready} + }); + style(type='text/css'). + | {$style} + body(class="{$class}") + | {$Content} + + diff --git a/template/semantic-ui/layout/centered.html b/template/semantic-ui/layout/centered.html new file mode 100644 index 0000000000..5618277c83 --- /dev/null +++ b/template/semantic-ui/layout/centered.html @@ -0,0 +1,6 @@ + +
+
+
{$Content}
+
+
\ No newline at end of file diff --git a/template/semantic-ui/layout/centered.jade b/template/semantic-ui/layout/centered.jade new file mode 100644 index 0000000000..a55a28d098 --- /dev/null +++ b/template/semantic-ui/layout/centered.jade @@ -0,0 +1,5 @@ +//- vim:ts=2:sw=2:et +.ui.middle.aligned.grid.container(style="height: 100%") + .column + .ui.piled.segment + | {$Content} diff --git a/tests/ButtonTest.php b/tests/ButtonTest.php new file mode 100644 index 0000000000..a761f94848 --- /dev/null +++ b/tests/ButtonTest.php @@ -0,0 +1,98 @@ +'./demos/templates/layout2.html']); + + + $layout->add(new H2('Basic Button')); + $layout->add(new Button())->set('Click me'); + + + $layout->add(new H2('Properties')); + + $b1 = new Button(); + $b2 = new Button(); + $b3 = new Button(); + + $b1->set(['Load', 'primary']); + $b2->set(['Load', 'labeled', 'icon'=>'pause']); + $b3->set(['Next', 'right labeled', 'icon'=>'right arrow']); + $layout->add($b1); + $layout->add($b2); + $layout->add($b3); + + $button = new Button(); + $button->set('Click me'); + $button->set(['primary' => true]); + $button->set(['icon'=>'check']); + $button->set(['size big'=>true]); + + $layout->add(new H2('Big Button')); + + $layout->add($button); + + $layout->add(new H2('Button Intent')); + + $b_yes = new Button(['Yes', 'positive basic']); + $b_no = new Button(['No', 'negative basic']); + $layout->add($b_yes); + $layout->add($b_no); + + $layout->add(new H2('Combining Buttons')); + $bar = new Buttons('vertical'); // NOTE: class called Buttons, not Button + $bar->add(new Button(['Play', 'icon'=>'play'])); + $bar->add(new Button(['Pause', 'icon'=>'pause'])); + $bar->add(new Button(['Shuffle', 'icon'=>'shuffle'])); + + $layout->add($bar); + + $layout->add(new H2('Icon Bar')); + $bar = new Buttons('blue big'); + $bar->add(new Button(['icon'=>'file'])); + $bar->add(new Button(['icon'=>['save','yellow']])); + $bar->add(new Button(['icon'=>'upload', 'disabled'=>true])); + $layout->add($bar); + + $layout->add(new H2('Forks')); + $forks = new Button(['labeled'=> true]); // Button, not Buttons! + $forks->add(new Button(['Forks', 'blue']))->add(new Icon('fork')); + $forks->add(new Label(['1,048', 'basic blue left pointing'])); + $layout->add($forks); + + + + $layout->add(new H2('Custom Template')); + $view = new View(['template'=>new Template('Hello, {$tag1}, my name is {$tag2}')]); + + $view->add(new Button('World'), 'tag1'); + $view->add(new Button(['Agile UI', 'blue']), 'tag2'); + + $layout->add($view); + + $result = $layout->render(); + + $this->assertEquals('string', gettype($result)); + } + +} + From 1ecd95e14f266e6c4a6e940d4cdd5b62fc189057 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Mon, 12 Dec 2016 16:57:42 +0000 Subject: [PATCH 007/100] fixed some typos --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index dc3a2a7e85..4448c6312e 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ PHP object-oriented implementation for an interractive Web User Interface, that will work out-of-the-box in your app. -Install with `composer require atk4/ui`, running this code: +Install with `composer require atk4/ui`. Next, run this code: ``` php require'vendor/loader.php'; @@ -18,7 +18,7 @@ $form->addSubmit(); echo $form->render(); ``` -This will provide you with a "Form View" object, capable of rendering HTML markup for Semantic UI CSS framework. The only other thing you need to do is to include Semantic UI: +This will provide you with a "Form View" object, capable of rendering HTML markup for Semantic UI CSS framework. To use in your app, you need to include jQuery and Semantic UI: ```html @@ -39,7 +39,7 @@ Agile UI however, comes with many unique features, such as: ## Component Architectural Design -Many frameworks rely on "views" that consist of logic-infused HTML templates (or even use PHP as template). Agile UI takes logic out of the template entirely and moves it into View - PHP classes extending from `\atk4\UI\View`. Templates become view-specific and not page-specific of action-specific: +Many frameworks rely on "views" that consist of logic-infused HTML templates (or even use PHP as template). Agile UI takes logic out of the template entirely and moves it into View - PHP classes extending from `\atk4\UI\View`. Templates become view-specific and not page-specific or action-specific: ``` php $ui = new \atk4\UI\Columns(); @@ -133,7 +133,7 @@ Then use it as a template for a View: $card = new \atk4\ui\View(['template'=>'card.html']); ``` -The "id" tag will be supplied by Agile UI automatically, but the rest of the tags can be set through a model: +The "{$_id}" tag will be supplied by Agile UI automatically, but the rest of the tags can be set through a model: ``` php $user = new User($db); From cb8d62acc13e5175a7944142352c42b9b2d6ec23 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 14 Dec 2016 20:51:54 +0000 Subject: [PATCH 008/100] Enhanced docs --- docs/conf.py | 2 +- docs/index.rst | 13 +- docs/overview.rst | 204 +++++++++++++++++++ docs/view.rst | 484 ++++++++++++++++++++++++++++++++++++++++++++++ src/View.php | 10 +- 5 files changed, 707 insertions(+), 6 deletions(-) create mode 100644 docs/overview.rst create mode 100644 docs/view.rst diff --git a/docs/conf.py b/docs/conf.py index eec3e2b73c..9519198318 100644 --- a/docs/conf.py +++ b/docs/conf.py @@ -54,7 +54,7 @@ # built documents. # # The short X.Y version. -version = '0.2' +version = '0.3' # The full version, including alpha/beta/rc tags. #release = '0.2.1' diff --git a/docs/index.rst b/docs/index.rst index e5aca804d1..9e4095e196 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -9,10 +9,19 @@ Contents: overview quickstart + core template view - - + base-components + layouts + building-components + lister + tree + grid + form + crud + virtual-page + console Indices and tables ================== diff --git a/docs/overview.rst b/docs/overview.rst new file mode 100644 index 0000000000..05656d568a --- /dev/null +++ b/docs/overview.rst @@ -0,0 +1,204 @@ + +.. _overview: + +==================== +Overview of Agile UI +==================== + +Agile UI is a component framework that makes you type less HTML in your +PHP project. Integrating with a most popular PHP CSS frameworks, with +Agile UI you can generate a cutting-edge responsive HTML layout that is +lightweight, look beautiful and is fully interractive. + +Agile UI Design Goals +===================== + +If you are just starting with Agile UI, you need to know the following 5 things: + +1. Agile UI Works anywhere +-------------------------- + +Agile UI is not tied specifically to any full-stack framework or application. +You are welcome to use it anywhere and it should just work out of the box. + +2. Agile UI saves you time +-------------------------- + +Agile UI exists for applications where you need to provide user UI in HTML. +Most typical usage would be Admin Interfaces, User Preferences page and +SaaS applications. + +Design of Agile UI allows you to avoid duplicating HTML blocks and lets you +focus on getting your project done. + +3. Agile UI is simpler than raw PHP +----------------------------------- + +If you use Raw PHP then you are expected to know HTML/CSS/JS. With Agile UI +you can start if you have no web development experience at all. You will +have plenty of components, layouts and add-ons to start your application. + +As you progress you will learn how to write JavaScript routines to enhance +your user experience. + + +4. Agile UI can render all your UI +---------------------------------- + +It's not only about the `Form` or `CRUD`. All of your HTML rendering can +be done through Agile UI. + +Agile UI is inspired by Desktop toolkits but has been designed entirely +for the Web. + +5. Agile UI is lightweight +-------------------------- + +There are no unnecessary JavaScript, hidden HTML or excessive traffic +between browser and the website. Agile UI is very transparent, lightweight +and should be used by anyone in any situation. + + +Structure of this documentation +=============================== + +You should start by looking into QuickStart section, that will introduce +you to some of the code examples. Using a quick-start sections you will +see how powerful UI can be built in a shortest time possible. + +If you are ready to start learning Agile UI, the next seciton will talk +about the View class, a core concept behind entire framework. You will +learn how rendering works and various techniques used in the core +of Agile UI. + +Next section "Components" will walk you through the basic set of built-in +components. All of the basic components are very similar and they directly +extend 'View', so there are a lot of things you can do with them. + +Continue with the "Creating Components" where you will learn how you can +create your own components and layouts. + +Next few sections will focus on some of the important advanced techniques +explaining how Virtual Pages work, how to build advanced JavaScript +interractions between your elements. + +Agile UI bundles some advanced components, such as Form, Grid, CRUD and +Console. Those all are highly interractive and are built using set of +basic components. + +The final sections of documentation will tell you how to install 3rd party +components and how to use them securily in your project. You will also +earn how to create components for yourself and share them with others. + +Agile Data +========== + +Agile Data is a business logic and data persistance framework. It's a +separate library that has been specifically designed and developed +for use in Agile UI. + +With Agile Data you can easily connect your UI with your data and make +UI components store your data in SQL, NoSQL or RestAPI. On top of the +existing persistences, Agile UI introduces a new persistence class: "UI". + +This UI persistence will be extensively used when data needs to be +displayed to the user through UI elements or when input must be +received from the UI layer. + +If you do not intend to store data anywhere or are using your own +ORM, the Agile Data will still be used to some extent and therefore +it appears as requirement. + +Most of the ORMs lack several important features that are necessary +for UI framework design: + + - ability to load/store data safely with conditions. + - built-in support for column meta-information + - field, type and table mapping + - "onlyFields" support for efficient querying + - domain-level model references. + +Agile Data is distributed under same open-source license as Agile UI +and the rest of this documentation will assume you are using Agile +Data for the purpose of overal clarity. + +Interface Stability +=================== + +Agile UI is based on Agile Toolkit 4.3 which has been a maintained +UI framework that can trace it's roots back to 2003. As a result, the +object interface is highly stable and all of the documented methods, +models and properties will not change even in the major releases. + +If we do have to change something we will keep things backwards +compatible for a period of a few years. + +We expect you to extend base classes to build your UI as it is a +best practice to use Agile UI. + +Testing and Enterprise Use +========================== + +Agile UI is designed with corporate use in mind. The main aim of +the framework is to make your application consistent, modern and +fast. + +We understand the importante of testing and all of the Agile UI +components come fully tested across multiple browsers. In most cases +browser compatibilty is defined by the underlying CSS framework. + +With Agile UI we will provide you with a guide how to test your +own components. + +Unit Tests +---------- + +You only need to unit-test you own classes and controllers. For +example if your application creates a separate class that deals +with APR calculation, you need to include unit-test for that +specific class. + +Business Logic Unit Tests +------------------------- + +Those tests are most suitable for testing your business logic, +that is included in Agile Data. Use "array" persistences to +pre-set model with the necessary data, execute your business +logic with mock objects. + +1. set up mock database arrays +2. instatiate model(s) +3. execute business operation +4. assert new content of array. + +In most cases the Integration tests are easier to make, and +give you equal testability. + +Integration Database Tests +-------------------------- + +This test-suite will operate with SQL database by executing +various database operations in Agile Data and then asserting +business logic changes. + +1. load "safe" database schema +2. each test starts transaction and is finished with a roll-back. +3. perform changes such as adding new invocie +4. assert through other models e.g. by running client report model. + +Component Tests +--------------- + +All of the basic components are tested for you using UI tests, +but you should test your own components. This test will place +your component under various configurations and will make sure +that it continues to work. + +If your component relies on a model, this can also attempt +various model combinations for an extensive test. + +User Testing +------------ + +Once you place your components on your pages and associate +them with your actual data you can perform user tests. diff --git a/docs/view.rst b/docs/view.rst new file mode 100644 index 0000000000..ddd19f833c --- /dev/null +++ b/docs/view.rst @@ -0,0 +1,484 @@ + + +.. _view: + +===== +Views +===== + +Agile UI is a component framework, which follows a software patterns known as +`Render Tree` and `Two pass HTML rendering`. + +.. php:namespace: atk4\\ui +.. php:class:: View + + A View is a most fundamental object that can take part in the Render tree. All + of the other components descend from the `View` class. + + +View object is recursive. You can take one view and add another View inside of it:: + + $v = new \atk4\ui\View(['ui'=>'segment', 'inverted']); + $v->add(new \atk4\ui\Button(['Orange', 'inverted orange'])); + +The above code will produce the following HTML block: + +.. code-block:: html + +
+ +
+ +All of the views combined form a ``Render Tree``. In order to get the HTML output +from all the `Views` in `Render Tree` you need to execute ``render()`` for the top-most +leaf:: + + echo $v->render(); + +Each of the views will automatically render all of the child views. + + + +Initializing Tree +================= + +Views use a principle of ``delayed init``, which allow you to manipulate View objects +in any way you wish, before they will actuallized:. + +.. php:method:: add($object, $region = 'Content') + + Add child view as a parent of the this view. + + In addition to adding a child object, sets up it's template + and associate it's output with the region in our template. + + Will copy $this->app into $object->app. + + If this object is initialized, will also initialize $object + + :param $object: + :param $region: + + +.. php:method:: init() + + View will automatically execute an init() method. This will happen as soon as + values for properties properties `app`, `id` and `path` can be determined. + + You should override `init` method for composite views, so that you can `add()` + additional sub-views into it. + +In the next example I'll be creating 3 views, but it at the time their __constructor +is executed it will be impossible to determine each view's position inside render tree:: + + $middle = new \atk4\ui\View(['ui'=>'segment', 'red']); + $top = new \atk4\ui\View(['ui'=>'segments']); + $bottom = new \atk4\ui\Button(['Hello World', 'orange']); + + // not arranged into render-tree yet + + $middle->add($bottom); + $top->add($middle); + + + // Still not sure if finished adding + + $app = new \atk4\ui\App('My App'); + $app->setLayout($top); + + // Calls init() for all elements recursively. + +Each View's `init()` method will be executed first before calling the same method for +child elements. To make your execution more straightforward we recommend you to create +App class first and then continue with Layout initialization:: + + $app = new \atk4\ui\App('My App'); + $top = $app->setLayout(new \atk4\ui\View(['ui'=>'segments'])); + + $middle = $top->add(new \atk4\ui\View(['ui'=>'segment', 'red']); + + $bottom = $middle->add(new \atk4\ui\Button(['Hello World', 'orange']); + +Finally, if you prefer a more consise code, you can also use the following format:: + + $app = new \atk4\ui\App('My App'); + $top = $app->setLayout('View', ['ui'=>'segments']); + + $middle = $top->add('View', ['ui'=>'segment', 'red']); + + $bottom = $middle->add('Button', ['Hello World', 'orange']); + +The rest of documentaiton will use thi sconsise code to keep things readable, however if +you value type-hinting of your IDE, you can keep using "new" keyword. I must also +mention that if you specify first argument to add() as a string it will be passed +to `$app->factory()`, which will be responsible of instantiating the actual object. + +(TODO: link to App:Factory) + +Use of $app property and Dependency Injeciton +============================================= + +.. php:attr:: app + + Each View has a property $app that is defined through \atk4\core\AppScopeTrait. + View elements rely on persistence of the app class in order to perform Dependency + Injection. + +Consider the following example:: + + $app->debug = new Logger('log'); // Monolog + + // next, somewhere in a render tree + $view->app->debug->log('Foo Bar'); + +Agile UI will automatically pass your $app class to all the views. + +Integration with Agile Data +=========================== + +.. php:method:: setModel($m) + + Associate current view with a domain model. + +.. php:attr:: model + + Stores currently associated model until time of rendering. + + +If you have used Agile Data, you should be familiar with a concept of creating +Models:: + + $db = new \atk4\data\Persistence_SQL::connect($dsn); + + $client = new Client($db); // extends \atk4\data\Model(); + +Once you have a model, you can associate it with a View such as Form or Grid +so that those Views would be able to interact with your persistence directly:: + + $form->setModel($client); + +In most environments, however, your application will rely on a primary Database, which +can be set through your $app class:: + + $app->db = new \atk4\data\Persistence_SQL::connect($dsn); + + // next, anywhere in a view + $client = new Client($this->app->db); + $form->setModel($client); + +Or if you prefer a more consise code:: + + $app->db = new \atk4\data\Persistence_SQL::connect($dsn); + + // next, anywhere in a view + $form->setModel('Client'); + +Again, this will use `Factory` feature of your application to let you determine how +to properly initialize the class corresponding to string 'Client'. + +UI Role and Classes +=================== + + +.. php:method:: __construct($defaults = []) + + :param $defaults: set of default properties and classes. + +.. php:attr:: ui + + Indicates a role of a view for CSS framework. + + + +A constructor of a view often maps into a ``
`` tag that has a specific role +in a CSS framework. According to the principles of Agile UI, we support a +wide varietty of roles. In some cases, a dedicated object will exist, for +example a Button. In other cases, you can use a View and specify a UI role +explicitly:: + + $view = $layout->add('View', ['ui'=>'segment']); + +If you happen to pass more key/values to the constructor or as second argument +to add() they will be treated as default values for the properties of that +specific view:: + + $view = $layout->add('View', ['ui'=>'segment', 'id'=>'test-id']); + +For a more IDE-friendly format, however, I recommend to use the following syntax:: + + $view = $layout->add('View', ['ui'=>'segment']); + $view->id = 'test-id'; + +You must be aware of a difference here - passing array to constructor will +override default property before call to `init()`. Most of the components +have been designed to work consistently either way and delay all the +property processing until the render stage, so it should be no difference +which syntax you are using. + + + +If you are don't specify key for the properties, they will be considered an +extra class for a view:: + + $view = $layout->add('View', ['inverted', 'orange', 'ui'=>'segment']); + $view->id = 'test-id'; + +You can either specify multiple classes one-by-one or as a single string +"inverted orange". + +.. php:attr:: class + + List of classes that will be added to the top-most element during render. + +.. php:method:: addClass($class) + + Add CSS class to element. Previously added classes are not affected. + Multiple CSS classes can also be added if passed as space separated + string or array of class names. + + :type $class: string|array + :param $class: CSS class name or array of class names + :returns: $this + +.. php:method:: removeClass($remove_class) + + :param $remove_class: string|array one or multiple clases to be removed. + +In addition to the UI / Role classes during the render, element will +receive extra classes from the $class property. To add extra class to +existing object:: + + $button->addClass('blue large'); + +Classes on a view will appear in the following order: "ui blue large button" + +Special-purpose properties +========================== + +A view may define a special-purpose properties, that may modify how the +view is rendered. For example, Button has a property 'icon', that is implemented +by creating instance of \atk4\ui\Icon() inside the button. + +The same pattern can be used for other scenarios:: + + $button = $layout->add('Button', ['icon'=>'book']); + +This code will have same effect as:: + + $button = $layout->add('Button'); + $button->icon = 'book'; + +During the Render of a button, the following code will be executed:: + + $button->add('Icon', ['book']); + +If you wish to use a different icon-set, you can change Factory's route for 'Icon' +to your own implementation OR you can pass icon as a view:: + + $button = $layout->add('Button', ['icon'=>new MyAwesomeIcon('book')); + + +Rendering of a Tree +=================== + +.. php:method:: render() + + Perform render of this View and all the child Views recursively returning a valid HTML string. + +Any view has the ability to render itself. Once executed, render will perform the following: + + - call renderView() of a current object. + - call recursiveRender() to recursively render sub-elements. + - returns ``"; } // }}} diff --git a/src/jsFunction.php b/src/jsFunction.php index 38aeece7bd..1e31ede45f 100644 --- a/src/jsFunction.php +++ b/src/jsFunction.php @@ -9,33 +9,75 @@ class jsFunction implements jsExpressionable { public $fx_args; - public $fx_statements; + public $fx_statements = []; + public $preventDefault = false; - function __construct($args = [], $statements = []) - { - $this->fx_args = $args; - $this->fx_statements = $statements; - } + public $stopPropagation = false; + + public $indent = ' '; - private function _renderArgs($args = []) + function __construct($args = [], $statements = null) { - if ($args === null) { - return []; + if ($statements === null) { + $statements = $args; + $args = []; + } + + $this->fx_args = $args ?: []; + + if (!is_array($statements)) { + throw new Exception(['$statements is not array', 'statements'=>$statements]); + } + + foreach($statements as $key=>$value) { + if (is_numeric($key)) { + $this->fx_statements[] = $value; + } else { + $this->$key = $value; + } } - return - array_map(function($arg){ - if($arg instanceof jsExpressionable) { - return $arg->jsRender(); - } - - return json_encode($arg); - }, $args); } function jsRender() { - return 'function('.join(',',$this->_renderArgs($this->fx_args)).") {\n". - join(";\n", $this->_renderArgs($this->fx_statements)).";\n". - "}"; + + $pre = ""; + + if ($this->preventDefault) { + $this->fx_args = ['event']; + $pre .= "\n".$this->indent." event.preventDefault();"; + } + + if ($this->stopPropagation) { + $this->fx_args = ['event']; + $pre .= "\n".$this->indent." event.stopPropagation();"; + } + + $output = 'function('.join(',',$this->fx_args).') {'; + $output .= $pre; + foreach($this->fx_statements as $statement) { + + if (!$statement) { + // null passed + continue; + } + + if ($statement instanceof jsChain && !$statement->_chain) { + // chain contains no statements, so probably is useless + continue; + } + + if ($statement instanceof jsExpressionable) { + $statement = $statement->jsRender(); + } else { + throw new Exception(["Incorrect statement for jsFunction.", 'statement'=>$statement]); + } + + $output .= "\n".$this->indent." ".$statement.";"; + } + + $output .= "\n".$this->indent."}"; + + return $output; } } diff --git a/template/semantic-ui/icon.html b/template/semantic-ui/icon.html index c58b31e09f..c360458cae 100644 --- a/template/semantic-ui/icon.html +++ b/template/semantic-ui/icon.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/template/semantic-ui/icon.jade b/template/semantic-ui/icon.jade index ee9f1d3c71..e0765e1982 100644 --- a/template/semantic-ui/icon.jade +++ b/template/semantic-ui/icon.jade @@ -1 +1 @@ - + diff --git a/tests/jsIntegrationTest.php b/tests/jsIntegrationTest.php new file mode 100644 index 0000000000..ced7ed10b1 --- /dev/null +++ b/tests/jsIntegrationTest.php @@ -0,0 +1,97 @@ +'pencil']); + $html = $v->render(); + $this->assertNotNull($v->icon->id); + + $this->assertNotEquals($v->id, $v->icon->id); + } + + public function testIDIntegrity2() + { + $v = new Buttons(); + $b1 = $v->add(new Button()); + $b2 = $v->add(new Button()); + $html = $v->render(); + + $this->assertNotEquals($b1->id, $b2->id); + } + + /** + * make sure that chain is crated correctly + */ + public function testBasicChain1() + { + $v = new Button(['id'=>'b']); + $j = $v->js()->hide(); + $v->render(); + + $this->assertEquals('$("#b").hide()', $j->jsRender()); + } + + /** + * make sure that onReady chains are included in output + */ + public function testBasicChain2() + { + $v = new Button(['id'=>'b']); + $j = $v->js(true)->hide(); + $v->getHTML(); + + $this->assertEquals('', $v->getJS()); + } + + /** + * make sure that js('event') chains are included in output with appropriate callback + */ + public function testBasicChain3() + { + $v = new Button(['id'=>'b']); + $v->js('click')->hide(); + $v->getHTML(); + + $this->assertEquals('', $v->getJS()); + } + + /** + * make sure that on('event', js) chains are included in output + */ + public function testBasicChain4() + { + $bb = new Buttons(); + $b1 = $bb->add(new Button(['id'=>'b1'])); + $b2 = $bb->add(new Button(['id'=>'b2'])); + + $b1->on('click', $b2->js()->hide()); + $bb->getHTML(); + + $this->assertEquals('', $bb->getJS()); + } +} diff --git a/tests/jsTest.php b/tests/jsTest.php index 7f6e99e118..011c10b793 100644 --- a/tests/jsTest.php +++ b/tests/jsTest.php @@ -80,8 +80,8 @@ public function testComplex1() ])); $this->assertEquals('$(document).ready(function() { -$(".box1").height($(".box2").height()); -})', $fx->jsRender()); + $(".box1").height($(".box2").height()); + })', $fx->jsRender()); } } From 572dabd783ce20eb136e578ef7d90a881222fa75 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Mon, 26 Dec 2016 23:33:48 +0000 Subject: [PATCH 019/100] fix urls --- .travis.yml | 3 +-- tests/SeleniumTest.php | 40 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 2 deletions(-) create mode 100644 tests/SeleniumTest.php diff --git a/.travis.yml b/.travis.yml index 83095c0fcb..5d1b6d3703 100644 --- a/.travis.yml +++ b/.travis.yml @@ -19,8 +19,7 @@ after_script: script: - if [[ ${TRAVIS_PHP_VERSION:0:3} != "7.0" ]]; then NC="--no-coverage"; fi - - wait_for_port 8888 - - wget -O - http://localhost:8888/demos/buttons2.php + - wget -O - http://localhost:8888/demos/button2.php - ./vendor/phpunit/phpunit/phpunit $NC diff --git a/tests/SeleniumTest.php b/tests/SeleniumTest.php new file mode 100644 index 0000000000..c57e947358 --- /dev/null +++ b/tests/SeleniumTest.php @@ -0,0 +1,40 @@ +user_id = $_ENV['BROWSERSTACK_USER']; + $this->security_key = $_ENV['BROWSERSTACK_ACCESSKEY']; + $this->url = "https://" . $this->user_id . ":" . $this->security_key . "@hub-cloud.browserstack.com/wd/hub"; + } + + public function testJS() { + $caps = array( + "browser" => "IE", + "browser_version" => "9.0", + "os" => "Windows", + "os_version" => "7", + "browserstack.debug" => "true" + ); + $caps['browserstack.local'] = "true"; + $web_driver = RemoteWebDriver::create( + $this->url, + $caps + ); + $web_driver->get("http://localhost:8888/demos/button2.php"); + + $this->assertFalse($web_driver->executeScript("return $('#b1').is(':visible')")); + + $web_driver->findElement(WebDriverBy::cssSelector('#b2'))->click(); + $this->assertFalse($web_driver->executeScript("return $('#b2').is(':visible')")); + + $web_driver->quit(); + } +} From f1ad578b6da155d311e177e90c558d889c65ba12 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Mon, 26 Dec 2016 23:37:31 +0000 Subject: [PATCH 020/100] rename phpunit so that we can store sensitive info locally --- phpunit.xml => phpunit.xml.dist | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename phpunit.xml => phpunit.xml.dist (100%) diff --git a/phpunit.xml b/phpunit.xml.dist similarity index 100% rename from phpunit.xml rename to phpunit.xml.dist From 6136144c400ba49de8e31b0e0ed754a4a5c24664 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 27 Dec 2016 00:08:41 +0000 Subject: [PATCH 021/100] fix bug and cleanups --- .gitignore | 1 + src/Text.php | 4 ++++ src/View.php | 1 - tests/ButtonTest.php | 7 +++++++ tests/SeleniumTest.php | 13 ++++++++++--- 5 files changed, 22 insertions(+), 4 deletions(-) diff --git a/.gitignore b/.gitignore index e66f5ea0c6..d0e8d97747 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ /config.codekit +/phpunit.xml /public/semantic /public/jquery /vendor diff --git a/src/Text.php b/src/Text.php index 20056020b1..d257e0a514 100644 --- a/src/Text.php +++ b/src/Text.php @@ -7,4 +7,8 @@ class Text extends View { function render() { return $this->content; } + + function getHTML() { + return $this->content; + } } diff --git a/src/View.php b/src/View.php index 1b442698e6..468e69f86e 100644 --- a/src/View.php +++ b/src/View.php @@ -341,7 +341,6 @@ function recursiveRender() { if ($this->content) { $this->template->append('Content', $this->content); } - } /** diff --git a/tests/ButtonTest.php b/tests/ButtonTest.php index a761f94848..1d1ae9aee5 100644 --- a/tests/ButtonTest.php +++ b/tests/ButtonTest.php @@ -16,6 +16,13 @@ class ButtonTest extends \atk4\core\PHPUnit_AgileTestCase /** * Test constructor. */ + + public function testButtonIcon() + { + $b = new Button(['Load', 'icon'=>'pause']); + $b->render(); + } + public function testBasicInit() { diff --git a/tests/SeleniumTest.php b/tests/SeleniumTest.php index c57e947358..f511583a15 100644 --- a/tests/SeleniumTest.php +++ b/tests/SeleniumTest.php @@ -9,13 +9,20 @@ class SeleniumTest extends \PHPUnit_Framework_TestCase { protected $security_key; public function setUp() { - var_dump($_ENV); + + if(!$this->user_id) { + $this->markTestIncomplete('BROWSERSTACK_USER is not set'); + } + $this->user_id = $_ENV['BROWSERSTACK_USER']; + + $this->security_key = $_ENV['BROWSERSTACK_ACCESSKEY']; $this->url = "https://" . $this->user_id . ":" . $this->security_key . "@hub-cloud.browserstack.com/wd/hub"; + $this->demos = $_ENV['URL']; } - public function testJS() { + $caps = array( "browser" => "IE", "browser_version" => "9.0", @@ -28,7 +35,7 @@ public function testJS() { $this->url, $caps ); - $web_driver->get("http://localhost:8888/demos/button2.php"); + $web_driver->get($this->demos.'/button2.php'); $this->assertFalse($web_driver->executeScript("return $('#b1').is(':visible')")); From a509be0687e69f23e3e30f704950e4300769b07e Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 27 Dec 2016 00:16:05 +0000 Subject: [PATCH 022/100] Apply fixes from StyleCI --- demos/button.php | 29 +++------- demos/layout.php | 48 ++++++++-------- src/App.php | 24 ++++---- src/Button.php | 15 +++-- src/Buttons.php | 9 ++- src/Exception.php | 4 +- src/H2.php | 8 ++- src/Icon.php | 4 +- src/Label.php | 5 +- src/Layout.php | 3 +- src/Layout/App.php | 3 +- src/Layout/Centered.php | 3 +- src/Lister.php | 9 ++- src/MiniApp.php | 6 +- src/Template.php | 80 ++++++++++++++------------- src/Text.php | 7 ++- src/Tree.php | 21 ++++--- src/View.php | 116 +++++++++++++++++++++------------------ tests/ButtonTest.php | 118 ++++++++++++++++++---------------------- tests/TemplateTest.php | 1 - 20 files changed, 263 insertions(+), 250 deletions(-) diff --git a/demos/button.php b/demos/button.php index 964d098282..28b2b8297d 100644 --- a/demos/button.php +++ b/demos/button.php @@ -1,29 +1,22 @@ './templates/layout2.html']); - $layout->add(new H2('Basic Button')); $layout->add(new Button())->set('Click me'); - $layout->add(new H2('Properties')); $b1 = new Button(); @@ -65,7 +58,7 @@ $layout->add(new H2('Icon Bar')); $bar = new Buttons('blue big'); $bar->add(new Button(['icon'=>'file'])); - $bar->add(new Button(['icon'=>['save','yellow']])); + $bar->add(new Button(['icon'=>['save', 'yellow']])); $bar->add(new Button(['icon'=>'upload', 'disabled'=>true])); $layout->add($bar); @@ -75,8 +68,6 @@ $forks->add(new Label(['1,048', 'basic blue left pointing'])); $layout->add($forks); - - $layout->add(new H2('Custom Template')); $view = new View(['template'=>new Template('Hello, {$tag1}, my name is {$tag2}')]); @@ -86,11 +77,9 @@ $layout->add($view); echo $layout->render(); +} catch (\atk4\core\Exception $e) { + var_dump($e->getMessage()); -}catch(\atk4\core\Exception $e){ - var_Dump($e->getMessage()); - - var_Dump($e->getParams()); + var_dump($e->getParams()); throw $e; } - diff --git a/demos/layout.php b/demos/layout.php index ae8087a4fb..7be1fd36b6 100644 --- a/demos/layout.php +++ b/demos/layout.php @@ -1,58 +1,59 @@ './templates/layout1.html']); - -class Persistence_Faker extends \atk4\data\Persistence { +class Persistence_Faker extends \atk4\data\Persistence +{ public $faker = null; public $count = 50; - function __construct($opts = []) { + public function __construct($opts = []) + { //parent::__construct($opts); - if(!$this->faker) { + if (!$this->faker) { $this->faker = Faker\Factory::create(); } } - function prepareIterator($m) { - foreach($this->export($m) as $row) { + public function prepareIterator($m) + { + foreach ($this->export($m) as $row) { yield $row; } } - function export($m, $fields = []) { - if(!$fields) { - foreach($m->elements as $name=>$e) { - if($e instanceof \atk4\data\Field) { + public function export($m, $fields = []) + { + if (!$fields) { + foreach ($m->elements as $name=>$e) { + if ($e instanceof \atk4\data\Field) { $fields[] = $name; } } } $data = []; - for ($i = 0; $i<$this->count; $i++) { + for ($i = 0; $i < $this->count; $i++) { $row = []; - foreach($fields as $field) { + foreach ($fields as $field) { $type = $field; - if($field == $m->id_field) { - $row[$field] = $i+1; + if ($field == $m->id_field) { + $row[$field] = $i + 1; continue; } $actual = $m->getElement($field)->actual; - if($actual){ + if ($actual) { $type = $actual; } - $row[$field] = $this->faker->$type; } $data[] = $row; @@ -75,13 +76,10 @@ function export($m, $fields = []) { $layout->add(new \atk4\ui\Lister(), 'Report') ->setModel($m); - echo $layout->render(); +} catch (\atk4\core\Exception $e) { + var_dump($e->getMessage()); -}catch(\atk4\core\Exception $e){ - var_Dump($e->getMessage()); - - var_Dump($e->getParams()); + var_dump($e->getParams()); throw $e; } - diff --git a/src/App.php b/src/App.php index 364767eceb..4044a63156 100644 --- a/src/App.php +++ b/src/App.php @@ -2,7 +2,8 @@ namespace atk4\ui; -class App { +class App +{ use \atk4\core\InitializerTrait { init as _init; } @@ -19,7 +20,6 @@ public function __construct($defaults = []) { if (is_string($defaults)) { $defaults = ['title'=>$defaults]; - } if (!is_array($defaults)) { @@ -28,42 +28,46 @@ public function __construct($defaults = []) foreach ($defaults as $key => $val) { if (is_array($val)) { $this->$key = array_merge(isset($this->$key) && is_array($this->$key) ? $this->$key : [], $val); - } elseif(!is_null($val)) { + } elseif (!is_null($val)) { $this->$key = $val; } } } - function setLayout(\atk4\ui\Layout $layout) + public function setLayout(\atk4\ui\Layout $layout) { $this->html = new View(['template'=>'html.html']); $this->layout = $this->html->add($layout); + return $this; } - function add() + public function add() { return call_user_func_array([$this->layout, 'add'], func_get_args()); } - function run() + public function run() { $this->html->set('title', $this->title); echo $this->html->render(); } - function init() { + public function init() + { $this->_init(); $this->template_dir = dirname(dirname(__FILE__)).'/template/'.$this->skin; } - function loadTemplate($name) { + public function loadTemplate($name) + { $template = new Template(); - if(in_array($name[0], ['.','/','\\'])) { + if (in_array($name[0], ['.', '/', '\\'])) { $template->load($name); - }else { + } else { $template->load($this->template_dir.'/'.$name); } + return $template; } } diff --git a/src/Button.php b/src/Button.php index ab4d995b55..4ef0c59824 100644 --- a/src/Button.php +++ b/src/Button.php @@ -1,7 +1,9 @@ icon) { - $this->add(new Icon($this->icon), 'Content'); if ($this->content) { @@ -28,11 +30,12 @@ function renderView() { } /** - * By Default buttons should have something written on them, e.g. "Button" + * By Default buttons should have something written on them, e.g. "Button". */ - function recursiveRender() { + public function recursiveRender() + { parent::recursiveRender(); - if(!$this->template->get('Content')) { + if (!$this->template->get('Content')) { $this->template->set('Content', 'Button'); } } diff --git a/src/Buttons.php b/src/Buttons.php index d2c5ff5b06..304e6b7491 100644 --- a/src/Buttons.php +++ b/src/Buttons.php @@ -1,11 +1,14 @@ content) { + public function renderView() + { + if ($this->content) { $this->addClass($this->content); $this->content = false; } diff --git a/src/Exception.php b/src/Exception.php index 78f13f5ff0..eebaa49b3c 100644 --- a/src/Exception.php +++ b/src/Exception.php @@ -2,4 +2,6 @@ namespace atk4\ui; -class Exception extends \atk4\core\Exception {} +class Exception extends \atk4\core\Exception +{ +} diff --git a/src/H2.php b/src/H2.php index d04f27243f..1fc877fcb8 100644 --- a/src/H2.php +++ b/src/H2.php @@ -1,11 +1,13 @@ template->set('_element', 'h4'); - } } diff --git a/src/Icon.php b/src/Icon.php index e91cacdf8b..d26ded90c1 100644 --- a/src/Icon.php +++ b/src/Icon.php @@ -1,7 +1,9 @@ t_row = $this->template->cloneRegion('row'); + $this->t_row = $this->template->cloneRegion('row'); //$this->t_totals = isset($this->template['totals']) ? $this->template->cloneRegion('totals') : null; $this->template->del('rows'); @@ -23,5 +23,4 @@ public function render() return $this->template->render(); } - } diff --git a/src/MiniApp.php b/src/MiniApp.php index 1b9d7d83a3..33be53cc82 100644 --- a/src/MiniApp.php +++ b/src/MiniApp.php @@ -1,7 +1,7 @@ $defaults + '$defaults must be specified as an array', + 'arg' => $defaults, ]); } diff --git a/src/Template.php b/src/Template.php index fa7d88cb20..36d17bbb05 100644 --- a/src/Template.php +++ b/src/Template.php @@ -1,8 +1,9 @@ loadTemplateFromString($template); } } - public function __clone() { parent::__clone(); @@ -80,6 +81,7 @@ public function __clone() unset($this->tags); $this->rebuildTags(); } + /** * Returns relevant exception class. Use this method with "throw". * @@ -91,9 +93,9 @@ public function __clone() */ public function exception($message = 'Undefined Exception', $type = null, $code = null) { - return new \atk4\core\Exception([$message, - 'template'=>$this->template_source, - 'type'=>$type + return new \atk4\core\Exception([$message, + 'template'=> $this->template_source, + 'type' => $type, ], $code); } @@ -143,8 +145,7 @@ public function getTagRef($tag, &$template) if (!isset($this->tags[$tag])) { throw $this->exception('Tag not found in Template') ->addMoreInfo('tag', $tag) - ->addMoreInfo('tags', implode(', ', array_keys($this->tags))) - ; + ->addMoreInfo('tags', implode(', ', array_keys($this->tags))); } $template = reset($this->tags[$tag]); @@ -168,9 +169,9 @@ public function getTagRefList($tag, &$template) { if (is_array($tag)) { // TODO: test - $res = array(); + $res = []; foreach ($tag as $t) { - $template = array(); + $template = []; $this->getTagRefList($t, $te); foreach ($template as &$tpl) { @@ -201,7 +202,7 @@ public function getTagRefList($tag, &$template) throw $this->exception('Tag not found in Template') ->setTag($tag); } - $template = array(&$this->tags[$tag][$ref - 1]); + $template = [&$this->tags[$tag][$ref - 1]]; return true; } @@ -221,7 +222,7 @@ public function hasTag($tag) } /** - * Re-create tag indexes from scratch for the whole template + * Re-create tag indexes from scratch for the whole template. */ public function rebuildTags() { @@ -231,7 +232,7 @@ public function rebuildTags() } /** - * Add tags from a specified region + * Add tags from a specified region. */ protected function rebuildTagsRegion(&$template) { @@ -248,7 +249,7 @@ protected function rebuildTagsRegion(&$template) } } } - + // }}} // {{{ Manipulating contents of tags @@ -273,7 +274,7 @@ public function set($tag, $value = null, $encode = true) return $this; } - if(is_object($tag)) { + if (is_object($tag)) { $tag = $tag->get(); } @@ -360,14 +361,13 @@ public function appendHTML($tag, $value) return $this->append($tag, $value, false); } - /** * Get value of the tag. Note that this may contain an array * if tag contains a structure. */ public function get($tag) { - $template = array(); + $template = []; $this->getTagRef($tag, $template); return $template; @@ -416,24 +416,28 @@ public function offsetExists($name) { return $this->hasTag($name); } + public function offsetGet($name) { return $this->get($name); } + public function offsetSet($name, $val) { $this->set($name, $val); } + public function offsetUnset($name) { $this->del($name, null); } + // }}} // {{{ Template Manipulations - + /** - * Executes call-back for each matching tag in the template + * Executes call-back for each matching tag in the template. */ public function eachTag($tag, $callable) { @@ -444,10 +448,10 @@ public function eachTag($tag, $callable) if ($this->getTagRefList($tag, $template)) { foreach ($template as $key => $templ) { $ref = $tag.'#'.($key + 1); - $this->tags[$tag][$key] = array(call_user_func($callable, $this->recursiveRender($templ), $ref)); + $this->tags[$tag][$key] = [call_user_func($callable, $this->recursiveRender($templ), $ref)]; } } else { - $this->tags[$tag][0] = array(call_user_func($callable, $this->recursiveRender($template), $tag)); + $this->tags[$tag][0] = [call_user_func($callable, $this->recursiveRender($template), $tag)]; } return $this; @@ -462,10 +466,9 @@ public function cloneRegion($tag) return clone $this; } - $cl = get_class($this); $n = new $cl(); - $n->template = unserialize(serialize(array('_top#1' => $this->get($tag)))); + $n->template = unserialize(serialize(['_top#1' => $this->get($tag)])); $n->rebuildTags(); $n->source = 'Clone ('.$tag.') of '.$this->source; @@ -477,15 +480,15 @@ public function cloneRegion($tag) // {{{ Template Loading /** - * Loads template from a specified file + * Loads template from a specified file. */ public function load($template_file) { $this->template_file = $template_file; - if(!is_readable($template_file)) { + if (!is_readable($template_file)) { throw new Exception([ 'Unable to read template from file', - 'file'=>$template_file + 'file'=> $template_file, ]); } $this->loadTemplateFromString(file_get_contents($template_file)); @@ -505,11 +508,11 @@ public function loadTemplateFromString($str) { $this->template_source = $str; $this->source = 'string'; - $this->template = $this->tags = array(); + $this->template = $this->tags = []; if (!$str) { return; } - $this->tag_cnt = array(); + $this->tag_cnt = []; /* First expand self-closing tags {$tag} -> {tag}{/tag} */ $str = preg_replace('/{\$([\w]+)}/', '{\1}{/\1}', $str); @@ -523,17 +526,19 @@ public function loadTemplateFromString($str) // {{{ Template Parsing Engine - private $tag_cnt = array(); + private $tag_cnt = []; + protected function regTag($tag) { if (!isset($this->tag_cnt[$tag])) { $this->tag_cnt[$tag] = 0; } + return $tag.'#'.(++$this->tag_cnt[$tag]); } /** - * Recursively find nested tags inside a string, converting them to array + * Recursively find nested tags inside a string, converting them to array. */ protected function parseTemplateRecursive(&$input, &$template) { @@ -577,7 +582,7 @@ protected function parseTemplateRecursive(&$input, &$template) } /** - * Deploys parse recursion + * Deploys parse recursion. */ protected function parseTemplate($str) { @@ -586,7 +591,7 @@ protected function parseTemplate($str) $input = preg_split($tag, $str, -1, PREG_SPLIT_DELIM_CAPTURE); list(, $prefix) = each($input); - $this->template = array($prefix); + $this->template = [$prefix]; $this->parseTemplateRecursive($input, $this->template); } @@ -610,7 +615,7 @@ public function render($region = null) /** * Walk through the template array collecting the values - * and returning them as a string + * and returning them as a string. */ protected function recursiveRender(&$template) { @@ -625,11 +630,12 @@ protected function recursiveRender(&$template) return $output; } + // }}} // {{{ Debugging functions - /** + /* * Returns HTML-formatted code with all tags * public function _getDumpTags(&$template) @@ -648,7 +654,7 @@ public function _getDumpTags(&$template) } /*** TO BE REFACTORED ***/ - /** + /* * Output all tags * public function dumpTags() diff --git a/src/Text.php b/src/Text.php index 20056020b1..6dfcb14093 100644 --- a/src/Text.php +++ b/src/Text.php @@ -1,10 +1,13 @@ content; } } diff --git a/src/Tree.php b/src/Tree.php index 990e96fb16..48b809caa8 100644 --- a/src/Tree.php +++ b/src/Tree.php @@ -2,14 +2,14 @@ namespace atk4\ui; -class Tree extends View { - +class Tree extends View +{ public $item_template = null; public $children_ref = 'Children'; public $is_folder = null; public $template_file = 'tree.html'; - function init() + public function init() { parent::init(); @@ -20,27 +20,25 @@ function init() $this->template->tryDel('Item'); } - - function renderSubTree(\atk4\data\Model $model) + public function renderSubTree(\atk4\data\Model $model) { $output = ''; $item = clone $this->item_template; - foreach($this->model as $row) { - + foreach ($this->model as $row) { $item->set($row); // true, false or null if unsure - $folder = $this->is_folder === false ? false : + $folder = $this->is_folder === false ? false : ($this->is_folder ? $this->model[$this->is_folder] : null); $sub_output = null; - if ($folder===true || $folder ===null) { + if ($folder === true || $folder === null) { $sub_output = $this->renderSubTree($this->model->ref($this->children_ref)); // Not sure if this was a sub-folder, so would have to check if ($folder === null) { - $folder = (boolean)$sub_output; + $folder = (bool) $sub_output; } } @@ -49,10 +47,11 @@ function renderSubTree(\atk4\data\Model $model) $output .= $item->render(); } + return $output; } - function render() + public function render() { $this->output = $this->renderSubTree($this->model); } diff --git a/src/View.php b/src/View.php index dea2a448bb..6b0d66a324 100644 --- a/src/View.php +++ b/src/View.php @@ -6,10 +6,10 @@ /** * Implements a most core view, which all of the other components descend - * form. + * form. */ -class View { - +class View +{ use \atk4\core\ContainerTrait { add as _add; } @@ -21,7 +21,6 @@ class View { // {{{ Properties of the class - /** * When you call render() this will be populated with JavaScript * chains. @@ -35,11 +34,10 @@ class View { /** * Name of the region in the parent's template where this object - * will output itself + * will output itself. */ public $region; - /** * Enables UI keyword for Semantic UI indicating that this is a * UI element. If you set this variable value to string, it will @@ -48,12 +46,12 @@ class View { public $ui = false; /** - * List of classes that needs to be added + * List of classes that needs to be added. */ public $class = []; /** - * Just here temporarily, until App picks it up + * Just here temporarily, until App picks it up. */ protected $skin; @@ -75,12 +73,13 @@ class View { /** * May accept properties of a class, but if property is not defined, it will - * be used as a HTML class instead + * be used as a HTML class instead. */ - function __construct($defaults = []) { - + public function __construct($defaults = []) + { if (is_string($defaults)) { $this->content = $defaults; + return; } @@ -91,35 +90,36 @@ function __construct($defaults = []) { $this->setProperties($defaults); } - /** * Associate this view with a model. Do not place any logic in this class, instead take it - * to renderView() + * to renderView(). * * Do not try to create your own "Model" implementation, instead you must be looking for * your own "Persistence" implementation. */ - function setModel(\atk4\data\Model $m) { + public function setModel(\atk4\data\Model $m) + { $this->model = $m; + return $m; } - /** * Called from __consruct() and set() to initialize teh properties. * * TODO: move into trait, because this is used often */ - function setProperties($properties) { - if(isset($properties[0])) { + public function setProperties($properties) + { + if (isset($properties[0])) { $this->content = $properties[0]; unset($properties[0]); } foreach ($properties as $key => $val) { - if(property_exists($this, $key)) { + if (property_exists($this, $key)) { if (is_array($val)) { $this->$key = array_merge(isset($this->$key) && is_array($this->$key) ? $this->$key : [], $val); - } elseif(!is_null($val)) { + } elseif (!is_null($val)) { $this->$key = $val; } } else { @@ -129,27 +129,29 @@ function setProperties($properties) { } /** - * TODO: move into trait because it's used so often + * TODO: move into trait because it's used so often. */ - function setProperty($key, $val) { - - if(is_numeric($key)) { + public function setProperty($key, $val) + { + if (is_numeric($key)) { $key = $val; $val = true; } if ($val === true) { $this->addClass($key); + return; } elseif ($val === false) { $this->removeClass($key); + return; } throw new Exception([ 'Not sure what to do', - 'key'=>$key, - 'val'=>$val + 'key'=> $key, + 'val'=> $val, ]); } @@ -161,9 +163,10 @@ function setProperty($key, $val) { * Called when view becomes part of render tree. You can override it but avoid * placing any "heavy processing" here. */ - function init() { + public function init() + { $this->_init(); - if(!$this->app) { + if (!$this->app) { $this->initDefaultApp(); } @@ -174,9 +177,10 @@ function init() { /** * For the absence of the application, we would add a very - * simple one + * simple one. */ - function initDefaultApp() { + public function initDefaultApp() + { $this->app = new \atk4\ui\App(['skin'=>$this->skin]); $this->app->init(); } @@ -185,8 +189,9 @@ function initDefaultApp() { * In addition to adding a child object, set up it's template * and associate it's output with the region in our template. */ - function add($object, $region = 'Content') { - if(!$this->app) { + public function add($object, $region = 'Content') + { + if (!$this->app) { $this->init(); //$this->initDefaultApp(); } @@ -194,52 +199,56 @@ function add($object, $region = 'Content') { $object->region = $region; - if(!$object->template) { + if (!$object->template) { $object->template = $this->template->cloneRegion($region); $this->template->del($region); } + return $object; } // }}} - // {{{ Manipulating classes and view properties /** * Override this method without compatibility with parrent, if you wish * to set your own things your own way for your view. */ - function set($arg1 = [], $arg2 = null) { + public function set($arg1 = [], $arg2 = null) + { if (is_string($arg1) && !is_null($arg2)) { // must be initialized $this->template->set($arg1, $arg2); + return $this; } if (!is_null($arg2)) { throw new Exception([ 'Second argument to set() can be only passed if the first one is a string', - 'arg1'=>$arg1, - 'arg2'=>$arg2, + 'arg1'=> $arg1, + 'arg2'=> $arg2, ]); } if (is_string($arg1)) { $this->content = $arg1; + return $this; } if (is_array($arg1)) { $this->setProperties($arg1); + return $this; } throw new Exception([ 'Not sure what to do with argument', - 'arg1'=>$arg1 + 'arg1'=> $arg1, ]); return $this; @@ -262,7 +271,6 @@ public function addClass($class) $this->class = array_merge($this->class, explode(' ', $class)); - return $this; } @@ -273,7 +281,8 @@ public function addClass($class) * * @return $this */ - public function removeClass($remove_class) { + public function removeClass($remove_class) + { $remove_class = explode(' ', $remove_class); $this->class = array_diff($this->class, $remove_class); } @@ -290,9 +299,10 @@ public function removeClass($remove_class) { * NOTE: maybe in the future, SemanticUI-related stuff needs to go into * a separate class. */ - function renderView() { + public function renderView() + { if ($this->class) { - $this->template->append('class', join(' ', $this->class)); + $this->template->append('class', implode(' ', $this->class)); } if ($this->ui) { @@ -308,9 +318,10 @@ function renderView() { * Recursively render all children, placing their * output in our template. */ - function recursiveRender() { - foreach($this->elements as $view) { - if (!$view instanceof View) { + public function recursiveRender() + { + foreach ($this->elements as $view) { + if (!$view instanceof self) { continue; } @@ -320,36 +331,35 @@ function recursiveRender() { if ($this->content) { $this->template->append('Content', $this->content); } - } /** * This method is for those cases when developer want to simply render his * view and grab HTML himself. */ - function render() { - + public function render() + { $this->renderView(); $this->recursiveRender(); - - return + + return $this->getJS(). $this->template->render(); } /** - * TODO: refactor + * TODO: refactor. */ - function getHTML() + public function getHTML() { return $this->template->render(); } /** - * TODO: refactor + * TODO: refactor. */ - function getJS() + public function getJS() { return ''; } diff --git a/tests/ButtonTest.php b/tests/ButtonTest.php index a761f94848..f5845005fc 100644 --- a/tests/ButtonTest.php +++ b/tests/ButtonTest.php @@ -2,14 +2,13 @@ namespace atk4\ui\tests; -use \atk4\ui\Button; -use \atk4\ui\Buttons; -use \atk4\ui\Label; -use \atk4\ui\Icon; -use \atk4\ui\View; -use \atk4\ui\Template; -use \atk4\ui\H2; - +use atk4\ui\Button; +use atk4\ui\Buttons; +use atk4\ui\H2; +use atk4\ui\Icon; +use atk4\ui\Label; +use atk4\ui\Template; +use atk4\ui\View; class ButtonTest extends \atk4\core\PHPUnit_AgileTestCase { @@ -18,81 +17,72 @@ class ButtonTest extends \atk4\core\PHPUnit_AgileTestCase */ public function testBasicInit() { + $layout = new \atk4\ui\Layout\App(['template'=>'./demos/templates/layout2.html']); + $layout->add(new H2('Basic Button')); + $layout->add(new Button())->set('Click me'); + $layout->add(new H2('Properties')); - $layout = new \atk4\ui\Layout\App(['template'=>'./demos/templates/layout2.html']); - - - $layout->add(new H2('Basic Button')); - $layout->add(new Button())->set('Click me'); - - - $layout->add(new H2('Properties')); + $b1 = new Button(); + $b2 = new Button(); + $b3 = new Button(); - $b1 = new Button(); - $b2 = new Button(); - $b3 = new Button(); + $b1->set(['Load', 'primary']); + $b2->set(['Load', 'labeled', 'icon'=>'pause']); + $b3->set(['Next', 'right labeled', 'icon'=>'right arrow']); + $layout->add($b1); + $layout->add($b2); + $layout->add($b3); - $b1->set(['Load', 'primary']); - $b2->set(['Load', 'labeled', 'icon'=>'pause']); - $b3->set(['Next', 'right labeled', 'icon'=>'right arrow']); - $layout->add($b1); - $layout->add($b2); - $layout->add($b3); + $button = new Button(); + $button->set('Click me'); + $button->set(['primary' => true]); + $button->set(['icon'=>'check']); + $button->set(['size big'=>true]); - $button = new Button(); - $button->set('Click me'); - $button->set(['primary' => true]); - $button->set(['icon'=>'check']); - $button->set(['size big'=>true]); + $layout->add(new H2('Big Button')); - $layout->add(new H2('Big Button')); + $layout->add($button); - $layout->add($button); + $layout->add(new H2('Button Intent')); - $layout->add(new H2('Button Intent')); + $b_yes = new Button(['Yes', 'positive basic']); + $b_no = new Button(['No', 'negative basic']); + $layout->add($b_yes); + $layout->add($b_no); - $b_yes = new Button(['Yes', 'positive basic']); - $b_no = new Button(['No', 'negative basic']); - $layout->add($b_yes); - $layout->add($b_no); - - $layout->add(new H2('Combining Buttons')); - $bar = new Buttons('vertical'); // NOTE: class called Buttons, not Button + $layout->add(new H2('Combining Buttons')); + $bar = new Buttons('vertical'); // NOTE: class called Buttons, not Button $bar->add(new Button(['Play', 'icon'=>'play'])); - $bar->add(new Button(['Pause', 'icon'=>'pause'])); - $bar->add(new Button(['Shuffle', 'icon'=>'shuffle'])); + $bar->add(new Button(['Pause', 'icon'=>'pause'])); + $bar->add(new Button(['Shuffle', 'icon'=>'shuffle'])); - $layout->add($bar); + $layout->add($bar); - $layout->add(new H2('Icon Bar')); - $bar = new Buttons('blue big'); - $bar->add(new Button(['icon'=>'file'])); - $bar->add(new Button(['icon'=>['save','yellow']])); - $bar->add(new Button(['icon'=>'upload', 'disabled'=>true])); - $layout->add($bar); + $layout->add(new H2('Icon Bar')); + $bar = new Buttons('blue big'); + $bar->add(new Button(['icon'=>'file'])); + $bar->add(new Button(['icon'=>['save', 'yellow']])); + $bar->add(new Button(['icon'=>'upload', 'disabled'=>true])); + $layout->add($bar); - $layout->add(new H2('Forks')); - $forks = new Button(['labeled'=> true]); // Button, not Buttons! + $layout->add(new H2('Forks')); + $forks = new Button(['labeled'=> true]); // Button, not Buttons! $forks->add(new Button(['Forks', 'blue']))->add(new Icon('fork')); - $forks->add(new Label(['1,048', 'basic blue left pointing'])); - $layout->add($forks); - - + $forks->add(new Label(['1,048', 'basic blue left pointing'])); + $layout->add($forks); - $layout->add(new H2('Custom Template')); - $view = new View(['template'=>new Template('Hello, {$tag1}, my name is {$tag2}')]); + $layout->add(new H2('Custom Template')); + $view = new View(['template'=>new Template('Hello, {$tag1}, my name is {$tag2}')]); - $view->add(new Button('World'), 'tag1'); - $view->add(new Button(['Agile UI', 'blue']), 'tag2'); + $view->add(new Button('World'), 'tag1'); + $view->add(new Button(['Agile UI', 'blue']), 'tag2'); - $layout->add($view); + $layout->add($view); - $result = $layout->render(); + $result = $layout->render(); - $this->assertEquals('string', gettype($result)); + $this->assertEquals('string', gettype($result)); } - } - diff --git a/tests/TemplateTest.php b/tests/TemplateTest.php index bfbe93e45d..afc0aedc0c 100644 --- a/tests/TemplateTest.php +++ b/tests/TemplateTest.php @@ -14,5 +14,4 @@ public function testBasicInit() $this->assertEquals('hello, bar', $t->render()); } - } From 6e695f0de0bfac33753442e7bfc9d6aac6734d64 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 27 Dec 2016 00:18:49 +0000 Subject: [PATCH 023/100] added badges --- README.md | 8 +++++++- demos/templates/layout2.html | 4 ++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4448c6312e..907840b4da 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,11 @@ # Agile UI +[![Build Status](https://travis-ci.org/atk4/ui.png?branch=develop)](https://travis-ci.org/atk4/ui) +[![Code Climate](https://codeclimate.com/github/atk4/ui/badges/gpa.svg)](https://codeclimate.com/github/atk4/ui) +[![StyleCI](https://styleci.io/repos/68417565/shield)](https://styleci.io/repos/68417565) +[![Test Coverage](https://codeclimate.com/github/atk4/ui/badges/coverage.svg)](https://codeclimate.com/github/atk4/ui/coverage) +[![Version](https://badge.fury.io/gh/atk4%2Fui.svg)](https://packagist.org/packages/atk4/ui) + **Web UI Component library.** PHP object-oriented implementation for an interractive Web User Interface, that will work out-of-the-box in your app. @@ -300,4 +306,4 @@ Agile UI is currently in the **early development stage**. Our development proces | 0.6 | Implement Form | | 0.7 | Implement Grid | | 0.8 | Implement CRUD | -| 0.9 | Implement real-time code execution (for consoles, progress-bars, spinners) | \ No newline at end of file +| 0.9 | Implement real-time code execution (for consoles, progress-bars, spinners) | diff --git a/demos/templates/layout2.html b/demos/templates/layout2.html index 59ec12fc07..b1a2d33357 100644 --- a/demos/templates/layout2.html +++ b/demos/templates/layout2.html @@ -24,9 +24,9 @@ -
UI Test Layout 2 +
UI Test Layout 2
Basic Examples -
Layout testButton test
+
Layout testButton test
From 209af7ff0a89af0953751b5e2f585770c50cded8 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 27 Dec 2016 00:20:12 +0000 Subject: [PATCH 024/100] Apply fixes from StyleCI --- src/jQuery.php | 12 ++++++---- src/jUniv.php | 11 +++++---- src/jsChain.php | 51 +++++++++++++++++++--------------------- src/jsExpression.php | 17 +++++++------- src/jsExpressionable.php | 8 +++---- src/jsFunction.php | 25 ++++++++++---------- tests/jsTest.php | 24 +++++++++---------- 7 files changed, 75 insertions(+), 73 deletions(-) diff --git a/src/jQuery.php b/src/jQuery.php index 05b72071a5..ab0e22ccf7 100644 --- a/src/jQuery.php +++ b/src/jQuery.php @@ -3,7 +3,8 @@ namespace atk4\ui; /** - * Implements mapper for jQuery library + * Implements mapper for jQuery library. + * * @method jQuery append() * @method jQuery appendTo() * @method jQuery bind() @@ -40,7 +41,8 @@ * Extensions by Univ * @method jUniv univ() */ -class jQuery extends jsChain { +class jQuery extends jsChain +{ public $_include = 'jquery.min.js'; public $_version = '3.1.1'; public $_integrity = 'sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8='; @@ -50,15 +52,15 @@ class jQuery extends jsChain { * @argument $selector * @argument $context */ - function __construct(... $constructor_args) + public function __construct(...$constructor_args) { parent::__construct(); $this->_constructor_arguments = $constructor_args; } - - function univ() { + public function univ() + { return new jUniv($this); } } diff --git a/src/jUniv.php b/src/jUniv.php index bbb222be06..1eaa0a7f6c 100644 --- a/src/jUniv.php +++ b/src/jUniv.php @@ -3,7 +3,8 @@ namespace atk4\ui; /** - * Various helper functions for Agile UI + * Various helper functions for Agile UI. + * * @method jQuery_Chain ajaxec() * @method jQuery_Chain successMessage() * @method jQuery_Chain errorMessage() @@ -24,13 +25,15 @@ * @method jQuery_Chain spinner() * @method jQuery_Chain tabs() */ -class jUniv extends jsChain { +class jUniv extends jsChain +{ public $_include = 'univ.min.js'; public $_version = '2.0.0'; //public $_integrity = 'sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8='; public $_library = '$.univ()'; - function univ() { - return new jUniv($this); + public function univ() + { + return new self($this); } } diff --git a/src/jsChain.php b/src/jsChain.php index a64b11419e..3e4706f23f 100644 --- a/src/jsChain.php +++ b/src/jsChain.php @@ -12,31 +12,30 @@ * * IMPORTANT: all methods in this class are pre-pended with '_', to avoid clashes with js-mapping. */ -class jsChain implements jsExpressionable { - +class jsChain implements jsExpressionable +{ /** * Name of the include file where this library is implemented. */ public $_include = null; /** - * Default version to use + * Default version to use. */ public $_version = null; /** - * Integrity code of default version of this library + * Integrity code of default version of this library. */ public $_integrity = null; /** - * Set this to the object of your library. Most libraries prefer '$', although you might want to use 'jQuery' or 'new google.maps.Map'; + * Set this to the object of your library. Most libraries prefer '$', although you might want to use 'jQuery' or 'new google.maps.Map';. */ public $_library = '$'; - /** - * This will represent constructor argument. If no arguments are set, then the library will be executed like this: + * This will represent constructor argument. If no arguments are set, then the library will be executed like this:. * * $.hello(); * @@ -46,7 +45,6 @@ class jsChain implements jsExpressionable { */ public $_constructor_arguments = []; - /** * Call chain. All calls to this mapper will be recorded here. Property traversal * is also stored here. @@ -63,36 +61,37 @@ class jsChain implements jsExpressionable { */ public $_chain = []; - /** * Override a library when executing constructor. For instance if you wish to use jQuery3 instead of jQuery. */ - function __construct($library = null) { - if($library) { + public function __construct($library = null) + { + if ($library) { $this->_library = $library; } } - /** - * Records all calls to this chain returning itself every time + * Records all calls to this chain returning itself every time. * * @param string $name - * @param mixed $args + * @param mixed $args * * @return $this */ - public function __call($name, $args) { + public function __call($name, $args) + { $this->_chain[] = [$name, $args]; + return $this; } /** - * Allows you to use syntax like this + * Allows you to use syntax like this. * * $js->offset()->top * - * that maps into + * that maps into * * $.offset()->top * @@ -103,15 +102,15 @@ public function __call($name, $args) { public function __get($property) { $this->_chain[] = $property; + return $this; } - /** - * Convert reserved words or used methods into js calls, such as "_fn('class')" or "_fn('_fn')" + * Convert reserved words or used methods into js calls, such as "_fn('class')" or "_fn('_fn')". * * @param string $name - * @param array $args + * @param array $args * * @return $this */ @@ -124,8 +123,8 @@ public function _fn($name, $args = []) private function _renderArgs($args = []) { return '('. - join(',', array_map(function($arg){ - if($arg instanceof jsExpressionable) { + implode(',', array_map(function ($arg) { + if ($arg instanceof jsExpressionable) { return $arg->jsRender(); } @@ -134,22 +133,20 @@ private function _renderArgs($args = []) ')'; } - /** - * Produce String representing this JavaScript extension + * Produce String representing this JavaScript extension. */ - function jsRender() + public function jsRender() { $ret = ''; // start with constructor - $ret.= $this->_library; + $ret .= $this->_library; // next perhaps we have arguments if ($this->_constructor_arguments) { $ret .= $this->_renderArgs($this->_constructor_arguments); } - // next we do same with the calls foreach ($this->_chain as $chain) { diff --git a/src/jsExpression.php b/src/jsExpression.php index 1a5bc85e87..2f97f8f66f 100644 --- a/src/jsExpression.php +++ b/src/jsExpression.php @@ -5,22 +5,22 @@ /** * Implements a class that can be mapped into arbitrary JavaScript expression. */ -class jsExpression implements jsExpressionable { - +class jsExpression implements jsExpressionable +{ public $template = null; public $args = []; - function __construct($template = '', $args = []) + public function __construct($template = '', $args = []) { $this->template = $template; $this->args = $args; } /** - * Converts this arbitrary JavaScript expression into string + * Converts this arbitrary JavaScript expression into string. */ - function jsRender() + public function jsRender() { $nameless_count = 0; @@ -39,8 +39,8 @@ function ($matches) use (&$nameless_count) { if (!isset($this->args[$identifier])) { throw new Exception([ 'Tag not defined in template for jsExpression', - 'tag'=>$identifier, - 'template'=>$this->template + 'tag' => $identifier, + 'template'=> $this->template, ]); } @@ -53,11 +53,12 @@ function ($matches) use (&$nameless_count) { } else { $value = json_encode($value); } + return $value; }, $this->template ); + return trim($res); } - } diff --git a/src/jsExpressionable.php b/src/jsExpressionable.php index 5432550f81..cb82966d77 100644 --- a/src/jsExpressionable.php +++ b/src/jsExpressionable.php @@ -5,10 +5,10 @@ /** * Implements a class that can be mapped into arbitrary JavaScript expression. */ -interface jsExpressionable { - +interface jsExpressionable +{ /** - * Convert jsExpression into string + * Convert jsExpression into string. */ - function jsRender(); + public function jsRender(); } diff --git a/src/jsFunction.php b/src/jsFunction.php index 38aeece7bd..091ed3873f 100644 --- a/src/jsFunction.php +++ b/src/jsFunction.php @@ -3,16 +3,15 @@ namespace atk4\ui; /** - * Implements structure for js closure + * Implements structure for js closure. */ -class jsFunction implements jsExpressionable { - +class jsFunction implements jsExpressionable +{ public $fx_args; public $fx_statements; - - function __construct($args = [], $statements = []) + public function __construct($args = [], $statements = []) { $this->fx_args = $args; $this->fx_statements = $statements; @@ -23,9 +22,10 @@ private function _renderArgs($args = []) if ($args === null) { return []; } - return - array_map(function($arg){ - if($arg instanceof jsExpressionable) { + + return + array_map(function ($arg) { + if ($arg instanceof jsExpressionable) { return $arg->jsRender(); } @@ -33,9 +33,10 @@ private function _renderArgs($args = []) }, $args); } - function jsRender() { - return 'function('.join(',',$this->_renderArgs($this->fx_args)).") {\n". - join(";\n", $this->_renderArgs($this->fx_statements)).";\n". - "}"; + public function jsRender() + { + return 'function('.implode(',', $this->_renderArgs($this->fx_args)).") {\n". + implode(";\n", $this->_renderArgs($this->fx_statements)).";\n". + '}'; } } diff --git a/tests/jsTest.php b/tests/jsTest.php index 7f6e99e118..a2c76291c7 100644 --- a/tests/jsTest.php +++ b/tests/jsTest.php @@ -2,10 +2,10 @@ namespace atk4\ui\tests; -use \atk4\ui\jQuery; -use \atk4\ui\jsExpression; -use \atk4\ui\jsChain; -use \atk4\ui\jsFunction; +use atk4\ui\jQuery; +use atk4\ui\jsChain; +use atk4\ui\jsExpression; +use atk4\ui\jsFunction; class jsTest extends \atk4\core\PHPUnit_AgileTestCase { @@ -14,24 +14,23 @@ class jsTest extends \atk4\core\PHPUnit_AgileTestCase */ public function testBasicExpressions() { - $this->assertEquals('2+2', (new jsExpression('2+2'))->jsRender()); - $this->assertEquals('3+4', (new jsExpression('[]+[]', [3,4]))->jsRender()); + $this->assertEquals('3+4', (new jsExpression('[]+[]', [3, 4]))->jsRender()); } public function testNestedExpressions() { $this->assertEquals( - '10-(2+3)', + '10-(2+3)', ( new jsExpression( - '[]-[]', + '[]-[]', [ 10, new jsExpression( '[a]+[b]', - ['a'=>2, 'b'=>3] - ) + ['a'=> 2, 'b'=>3] + ), ] ) )->jsRender() @@ -70,13 +69,13 @@ public function testArgs() public function testComplex1() { - // binding that maintains same height on + // binding that maintains same height on $b1 = new jQuery('.box1'); $b2 = new jQuery('.box2'); $doc = new jQuery(new jsExpression('document')); $fx = $doc->ready(new jsFunction(null, [ - $b1->height($b2->height()) + $b1->height($b2->height()), ])); $this->assertEquals('$(document).ready(function() { @@ -84,4 +83,3 @@ public function testComplex1() })', $fx->jsRender()); } } - From a688cbd82bd4ddf26784135aec4bf0305a65c6f8 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 27 Dec 2016 00:22:26 +0000 Subject: [PATCH 025/100] Apply fixes from StyleCI --- demos/button2.php | 24 +++++------------ src/Button.php | 4 +-- src/Layout.php | 9 ++++--- src/Text.php | 3 ++- src/View.php | 51 ++++++++++++++++++------------------- src/jQuery.php | 12 +++++---- src/jUniv.php | 11 +++++--- src/jsChain.php | 51 +++++++++++++++++-------------------- src/jsExpression.php | 17 +++++++------ src/jsExpressionable.php | 8 +++--- src/jsFunction.php | 33 ++++++++++++------------ tests/ButtonTest.php | 1 - tests/SeleniumTest.php | 36 +++++++++++++------------- tests/jsIntegrationTest.php | 13 +++++----- tests/jsTest.php | 24 ++++++++--------- 15 files changed, 142 insertions(+), 155 deletions(-) diff --git a/demos/button2.php b/demos/button2.php index 8b554b700e..3cd62c324e 100644 --- a/demos/button2.php +++ b/demos/button2.php @@ -1,25 +1,16 @@ './templates/layout2.html']); - $layout->add(new H2('Basic Button')); $b = $layout->add(new Button(['id'=>'b1']))->set('Hidden Button'); @@ -28,13 +19,10 @@ $b = $layout->add(new Button(['id'=>'b2']))->set('Hide on click Button'); $b->js('click')->hide(); - echo $layout->render(); +} catch (\atk4\core\Exception $e) { + var_dump($e->getMessage()); -}catch(\atk4\core\Exception $e){ - var_Dump($e->getMessage()); - - var_Dump($e->getParams()); + var_dump($e->getParams()); throw $e; } - diff --git a/src/Button.php b/src/Button.php index a5b90f2eeb..bda729056e 100644 --- a/src/Button.php +++ b/src/Button.php @@ -11,9 +11,9 @@ class Button extends View /** * $icon property will end up a button icon. */ - function renderView() { + public function renderView() + { if ($this->icon && !is_object($this->icon)) { - $this->icon = $this->add(new Icon($this->icon), 'Content'); if ($this->content) { diff --git a/src/Layout.php b/src/Layout.php index e0266a0a8d..be287438aa 100644 --- a/src/Layout.php +++ b/src/Layout.php @@ -2,8 +2,10 @@ namespace atk4\ui; -class Layout extends View { - function render() { +class Layout extends View +{ + public function render() + { if (!$this->_initialized) { $this->init(); } @@ -14,13 +16,12 @@ function render() { // There might be a script output tag inside our template - if($this->template->hasTag('HEAD')) { + if ($this->template->hasTag('HEAD')) { $this->template->appendHTML('HEAD', $this->getJS()); return $this->template->render(); } else { return $this->getJS().$this->template->render(); } - } } diff --git a/src/Text.php b/src/Text.php index 84c65ae908..1b2fd90210 100644 --- a/src/Text.php +++ b/src/Text.php @@ -11,7 +11,8 @@ public function render() return $this->content; } - function getHTML() { + public function getHTML() + { return $this->content; } } diff --git a/src/View.php b/src/View.php index 8916986686..03d710fa4c 100644 --- a/src/View.php +++ b/src/View.php @@ -8,7 +8,8 @@ * Implements a most core view, which all of the other components descend * form. */ -class View implements jsExpressionable { +class View implements jsExpressionable +{ use \atk4\core\ContainerTrait { add as _add; } @@ -45,12 +46,12 @@ class View implements jsExpressionable { public $ui = false; /** - * ID of the element, that's unique and is used in JS operations + * ID of the element, that's unique and is used in JS operations. */ public $id = null; /** - * List of classes that needs to be added + * List of classes that needs to be added. */ public $class = []; @@ -79,7 +80,8 @@ class View implements jsExpressionable { * May accept properties of a class, but if property is not defined, it will * be used as a HTML class instead. */ - function __construct($defaults = []) { + public function __construct($defaults = []) + { if (is_string($defaults)) { $this->content = $defaults; @@ -166,7 +168,8 @@ public function setProperty($key, $val) * Called when view becomes part of render tree. You can override it but avoid * placing any "heavy processing" here. */ - function init() { + public function init() + { if (!$this->name) { if (!$this->id) { $this->id = $this->name = 'atk'; @@ -179,7 +182,7 @@ function init() { $this->_init(); - if(!$this->app) { + if (!$this->app) { $this->initDefaultApp(); } @@ -358,7 +361,8 @@ public function recursiveRender() * This method is for those cases when developer want to simply render his * view and grab HTML himself. */ - function render() { + public function render() + { if (!$this->_initialized) { $this->init(); } @@ -373,7 +377,7 @@ function render() { } /** - * Created for recursive rendering or when you want to only get HTML of this object (not javascript) + * Created for recursive rendering or when you want to only get HTML of this object (not javascript). */ public function getHTML() { @@ -384,7 +388,7 @@ public function getHTML() $this->renderView(); $this->recursiveRender(); - + return $this->template->render(); } @@ -392,7 +396,6 @@ public function getHTML() // {{{ JavaScript integration - /** * Views in Agile UI can assign javascript actions to themselves. This * is done by calling $view->js() method which returns instance of jsChain @@ -485,11 +488,11 @@ public function js($when = null) * * Finally, it's also possible to use PHP closure as an action: * - * $view->on('click', 'a', function($js, $data){ + * $view->on('click', 'a', function($js, $data){ * if (!$data['clickable']) { * return new jsExpression('alert([])', ['This record is not clickable']) * } - * return $js->parent()->hide(); + * return $js->parent()->hide(); * }); * * For more information on how this works, see documentation: @@ -513,7 +516,6 @@ public function on($event, $selector = null, $js = null) // if callable $js is passed, then execute ajaxec() // throw new Exception('VirtualPage is not yet implemented'); - $url = '.virtualpage->getURL..'; $actions[] = (new jsUniv(new jsExpression('this')))->ajaxec($url, true); @@ -536,21 +538,19 @@ public function on($event, $selector = null, $js = null) $js = $this->js()->_selectorThis()->univ()->ajaxec($p->getURL(), true); */ - } elseif($js) { + } elseif ($js) { // otherwise include $actions[] = $js; } - $actions['preventDefault']=true; - $actions['stopPropagation']=true; + $actions['preventDefault'] = true; + $actions['stopPropagation'] = true; $action = new jsFunction($actions); - - if ($selector) { $js = $this->js(true)->on($event, $selector, $action); - }else{ + } else { $js = $this->js(true)->on($event, $action); } @@ -587,10 +587,10 @@ public function jsRender() if (!$this->_initialized) { throw new Exception('Render tree must be initialized before materializing jsChains.'); } + return json_encode('#'.$this->id); } - /** * TODO: refactor. */ @@ -598,10 +598,10 @@ public function getJS() { $actions = []; - foreach($this->_js_actions as $event=>$event_actions){ - foreach($event_actions as $action) { + foreach ($this->_js_actions as $event=>$event_actions) { + foreach ($event_actions as $action) { // wrap into callback - if($event !== 'always') { + if ($event !== 'always') { $action = (new jQuery($action->_constructor_arguments[0]))->bind($event, new jsFunction([$action, 'preventDefault'=>true, 'stopPropagation'=>true])); } @@ -609,18 +609,17 @@ public function getJS() } } - if(!$actions) { + if (!$actions) { return ''; } $actions['indent'] = ''; - $ready = new jsFunction($actions); return ""; + ''; } // }}} diff --git a/src/jQuery.php b/src/jQuery.php index 05b72071a5..ab0e22ccf7 100644 --- a/src/jQuery.php +++ b/src/jQuery.php @@ -3,7 +3,8 @@ namespace atk4\ui; /** - * Implements mapper for jQuery library + * Implements mapper for jQuery library. + * * @method jQuery append() * @method jQuery appendTo() * @method jQuery bind() @@ -40,7 +41,8 @@ * Extensions by Univ * @method jUniv univ() */ -class jQuery extends jsChain { +class jQuery extends jsChain +{ public $_include = 'jquery.min.js'; public $_version = '3.1.1'; public $_integrity = 'sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8='; @@ -50,15 +52,15 @@ class jQuery extends jsChain { * @argument $selector * @argument $context */ - function __construct(... $constructor_args) + public function __construct(...$constructor_args) { parent::__construct(); $this->_constructor_arguments = $constructor_args; } - - function univ() { + public function univ() + { return new jUniv($this); } } diff --git a/src/jUniv.php b/src/jUniv.php index bbb222be06..1eaa0a7f6c 100644 --- a/src/jUniv.php +++ b/src/jUniv.php @@ -3,7 +3,8 @@ namespace atk4\ui; /** - * Various helper functions for Agile UI + * Various helper functions for Agile UI. + * * @method jQuery_Chain ajaxec() * @method jQuery_Chain successMessage() * @method jQuery_Chain errorMessage() @@ -24,13 +25,15 @@ * @method jQuery_Chain spinner() * @method jQuery_Chain tabs() */ -class jUniv extends jsChain { +class jUniv extends jsChain +{ public $_include = 'univ.min.js'; public $_version = '2.0.0'; //public $_integrity = 'sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8='; public $_library = '$.univ()'; - function univ() { - return new jUniv($this); + public function univ() + { + return new self($this); } } diff --git a/src/jsChain.php b/src/jsChain.php index a64b11419e..3e4706f23f 100644 --- a/src/jsChain.php +++ b/src/jsChain.php @@ -12,31 +12,30 @@ * * IMPORTANT: all methods in this class are pre-pended with '_', to avoid clashes with js-mapping. */ -class jsChain implements jsExpressionable { - +class jsChain implements jsExpressionable +{ /** * Name of the include file where this library is implemented. */ public $_include = null; /** - * Default version to use + * Default version to use. */ public $_version = null; /** - * Integrity code of default version of this library + * Integrity code of default version of this library. */ public $_integrity = null; /** - * Set this to the object of your library. Most libraries prefer '$', although you might want to use 'jQuery' or 'new google.maps.Map'; + * Set this to the object of your library. Most libraries prefer '$', although you might want to use 'jQuery' or 'new google.maps.Map';. */ public $_library = '$'; - /** - * This will represent constructor argument. If no arguments are set, then the library will be executed like this: + * This will represent constructor argument. If no arguments are set, then the library will be executed like this:. * * $.hello(); * @@ -46,7 +45,6 @@ class jsChain implements jsExpressionable { */ public $_constructor_arguments = []; - /** * Call chain. All calls to this mapper will be recorded here. Property traversal * is also stored here. @@ -63,36 +61,37 @@ class jsChain implements jsExpressionable { */ public $_chain = []; - /** * Override a library when executing constructor. For instance if you wish to use jQuery3 instead of jQuery. */ - function __construct($library = null) { - if($library) { + public function __construct($library = null) + { + if ($library) { $this->_library = $library; } } - /** - * Records all calls to this chain returning itself every time + * Records all calls to this chain returning itself every time. * * @param string $name - * @param mixed $args + * @param mixed $args * * @return $this */ - public function __call($name, $args) { + public function __call($name, $args) + { $this->_chain[] = [$name, $args]; + return $this; } /** - * Allows you to use syntax like this + * Allows you to use syntax like this. * * $js->offset()->top * - * that maps into + * that maps into * * $.offset()->top * @@ -103,15 +102,15 @@ public function __call($name, $args) { public function __get($property) { $this->_chain[] = $property; + return $this; } - /** - * Convert reserved words or used methods into js calls, such as "_fn('class')" or "_fn('_fn')" + * Convert reserved words or used methods into js calls, such as "_fn('class')" or "_fn('_fn')". * * @param string $name - * @param array $args + * @param array $args * * @return $this */ @@ -124,8 +123,8 @@ public function _fn($name, $args = []) private function _renderArgs($args = []) { return '('. - join(',', array_map(function($arg){ - if($arg instanceof jsExpressionable) { + implode(',', array_map(function ($arg) { + if ($arg instanceof jsExpressionable) { return $arg->jsRender(); } @@ -134,22 +133,20 @@ private function _renderArgs($args = []) ')'; } - /** - * Produce String representing this JavaScript extension + * Produce String representing this JavaScript extension. */ - function jsRender() + public function jsRender() { $ret = ''; // start with constructor - $ret.= $this->_library; + $ret .= $this->_library; // next perhaps we have arguments if ($this->_constructor_arguments) { $ret .= $this->_renderArgs($this->_constructor_arguments); } - // next we do same with the calls foreach ($this->_chain as $chain) { diff --git a/src/jsExpression.php b/src/jsExpression.php index 1a5bc85e87..2f97f8f66f 100644 --- a/src/jsExpression.php +++ b/src/jsExpression.php @@ -5,22 +5,22 @@ /** * Implements a class that can be mapped into arbitrary JavaScript expression. */ -class jsExpression implements jsExpressionable { - +class jsExpression implements jsExpressionable +{ public $template = null; public $args = []; - function __construct($template = '', $args = []) + public function __construct($template = '', $args = []) { $this->template = $template; $this->args = $args; } /** - * Converts this arbitrary JavaScript expression into string + * Converts this arbitrary JavaScript expression into string. */ - function jsRender() + public function jsRender() { $nameless_count = 0; @@ -39,8 +39,8 @@ function ($matches) use (&$nameless_count) { if (!isset($this->args[$identifier])) { throw new Exception([ 'Tag not defined in template for jsExpression', - 'tag'=>$identifier, - 'template'=>$this->template + 'tag' => $identifier, + 'template'=> $this->template, ]); } @@ -53,11 +53,12 @@ function ($matches) use (&$nameless_count) { } else { $value = json_encode($value); } + return $value; }, $this->template ); + return trim($res); } - } diff --git a/src/jsExpressionable.php b/src/jsExpressionable.php index 5432550f81..cb82966d77 100644 --- a/src/jsExpressionable.php +++ b/src/jsExpressionable.php @@ -5,10 +5,10 @@ /** * Implements a class that can be mapped into arbitrary JavaScript expression. */ -interface jsExpressionable { - +interface jsExpressionable +{ /** - * Convert jsExpression into string + * Convert jsExpression into string. */ - function jsRender(); + public function jsRender(); } diff --git a/src/jsFunction.php b/src/jsFunction.php index 1e31ede45f..cf459fdadd 100644 --- a/src/jsFunction.php +++ b/src/jsFunction.php @@ -3,10 +3,10 @@ namespace atk4\ui; /** - * Implements structure for js closure + * Implements structure for js closure. */ -class jsFunction implements jsExpressionable { - +class jsFunction implements jsExpressionable +{ public $fx_args; public $fx_statements = []; @@ -17,7 +17,7 @@ class jsFunction implements jsExpressionable { public $indent = ' '; - function __construct($args = [], $statements = null) + public function __construct($args = [], $statements = null) { if ($statements === null) { $statements = $args; @@ -30,7 +30,7 @@ function __construct($args = [], $statements = null) throw new Exception(['$statements is not array', 'statements'=>$statements]); } - foreach($statements as $key=>$value) { + foreach ($statements as $key=>$value) { if (is_numeric($key)) { $this->fx_statements[] = $value; } else { @@ -39,24 +39,23 @@ function __construct($args = [], $statements = null) } } - function jsRender() { - - $pre = ""; + public function jsRender() + { + $pre = ''; if ($this->preventDefault) { $this->fx_args = ['event']; - $pre .= "\n".$this->indent." event.preventDefault();"; + $pre .= "\n".$this->indent.' event.preventDefault();'; } if ($this->stopPropagation) { $this->fx_args = ['event']; - $pre .= "\n".$this->indent." event.stopPropagation();"; + $pre .= "\n".$this->indent.' event.stopPropagation();'; } - $output = 'function('.join(',',$this->fx_args).') {'; + $output = 'function('.implode(',', $this->fx_args).') {'; $output .= $pre; - foreach($this->fx_statements as $statement) { - + foreach ($this->fx_statements as $statement) { if (!$statement) { // null passed continue; @@ -70,13 +69,13 @@ function jsRender() { if ($statement instanceof jsExpressionable) { $statement = $statement->jsRender(); } else { - throw new Exception(["Incorrect statement for jsFunction.", 'statement'=>$statement]); + throw new Exception(['Incorrect statement for jsFunction.', 'statement'=>$statement]); } - $output .= "\n".$this->indent." ".$statement.";"; + $output .= "\n".$this->indent.' '.$statement.';'; } - - $output .= "\n".$this->indent."}"; + + $output .= "\n".$this->indent.'}'; return $output; } diff --git a/tests/ButtonTest.php b/tests/ButtonTest.php index 191fc7f4f6..93ae96a8ef 100644 --- a/tests/ButtonTest.php +++ b/tests/ButtonTest.php @@ -15,7 +15,6 @@ class ButtonTest extends \atk4\core\PHPUnit_AgileTestCase /** * Test constructor. */ - public function testButtonIcon() { $b = new Button(['Load', 'icon'=>'pause']); diff --git a/tests/SeleniumTest.php b/tests/SeleniumTest.php index f511583a15..f20e7eb42b 100644 --- a/tests/SeleniumTest.php +++ b/tests/SeleniumTest.php @@ -1,36 +1,36 @@ user_id) { + public function setUp() + { + if (!$this->user_id) { $this->markTestIncomplete('BROWSERSTACK_USER is not set'); } $this->user_id = $_ENV['BROWSERSTACK_USER']; - $this->security_key = $_ENV['BROWSERSTACK_ACCESSKEY']; - $this->url = "https://" . $this->user_id . ":" . $this->security_key . "@hub-cloud.browserstack.com/wd/hub"; + $this->url = 'https://'.$this->user_id.':'.$this->security_key.'@hub-cloud.browserstack.com/wd/hub'; $this->demos = $_ENV['URL']; } - public function testJS() { - - $caps = array( - "browser" => "IE", - "browser_version" => "9.0", - "os" => "Windows", - "os_version" => "7", - "browserstack.debug" => "true" - ); - $caps['browserstack.local'] = "true"; + + public function testJS() + { + $caps = [ + 'browser' => 'IE', + 'browser_version' => '9.0', + 'os' => 'Windows', + 'os_version' => '7', + 'browserstack.debug' => 'true', + ]; + $caps['browserstack.local'] = 'true'; $web_driver = RemoteWebDriver::create( $this->url, $caps diff --git a/tests/jsIntegrationTest.php b/tests/jsIntegrationTest.php index ced7ed10b1..45b304d148 100644 --- a/tests/jsIntegrationTest.php +++ b/tests/jsIntegrationTest.php @@ -2,9 +2,8 @@ namespace atk4\ui\tests; -use \atk4\ui\View; -use \atk4\ui\Button; -use \atk4\ui\Buttons; +use atk4\ui\Button; +use atk4\ui\Buttons; class jsIntegrationTest extends \atk4\core\PHPUnit_AgileTestCase { @@ -28,7 +27,7 @@ public function testIDIntegrity2() } /** - * make sure that chain is crated correctly + * make sure that chain is crated correctly. */ public function testBasicChain1() { @@ -40,7 +39,7 @@ public function testBasicChain1() } /** - * make sure that onReady chains are included in output + * make sure that onReady chains are included in output. */ public function testBasicChain2() { @@ -55,7 +54,7 @@ public function testBasicChain2() } /** - * make sure that js('event') chains are included in output with appropriate callback + * make sure that js('event') chains are included in output with appropriate callback. */ public function testBasicChain3() { @@ -74,7 +73,7 @@ public function testBasicChain3() } /** - * make sure that on('event', js) chains are included in output + * make sure that on('event', js) chains are included in output. */ public function testBasicChain4() { diff --git a/tests/jsTest.php b/tests/jsTest.php index 011c10b793..a382b14e30 100644 --- a/tests/jsTest.php +++ b/tests/jsTest.php @@ -2,10 +2,10 @@ namespace atk4\ui\tests; -use \atk4\ui\jQuery; -use \atk4\ui\jsExpression; -use \atk4\ui\jsChain; -use \atk4\ui\jsFunction; +use atk4\ui\jQuery; +use atk4\ui\jsChain; +use atk4\ui\jsExpression; +use atk4\ui\jsFunction; class jsTest extends \atk4\core\PHPUnit_AgileTestCase { @@ -14,24 +14,23 @@ class jsTest extends \atk4\core\PHPUnit_AgileTestCase */ public function testBasicExpressions() { - $this->assertEquals('2+2', (new jsExpression('2+2'))->jsRender()); - $this->assertEquals('3+4', (new jsExpression('[]+[]', [3,4]))->jsRender()); + $this->assertEquals('3+4', (new jsExpression('[]+[]', [3, 4]))->jsRender()); } public function testNestedExpressions() { $this->assertEquals( - '10-(2+3)', + '10-(2+3)', ( new jsExpression( - '[]-[]', + '[]-[]', [ 10, new jsExpression( '[a]+[b]', - ['a'=>2, 'b'=>3] - ) + ['a'=> 2, 'b'=>3] + ), ] ) )->jsRender() @@ -70,13 +69,13 @@ public function testArgs() public function testComplex1() { - // binding that maintains same height on + // binding that maintains same height on $b1 = new jQuery('.box1'); $b2 = new jQuery('.box2'); $doc = new jQuery(new jsExpression('document')); $fx = $doc->ready(new jsFunction(null, [ - $b1->height($b2->height()) + $b1->height($b2->height()), ])); $this->assertEquals('$(document).ready(function() { @@ -84,4 +83,3 @@ public function testComplex1() })', $fx->jsRender()); } } - From 45caa879dd6ab18b8a253b707dc09e8af85999d3 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 27 Dec 2016 13:23:49 +0000 Subject: [PATCH 026/100] add implementation for jsChains (#18) * add implementation for jsChains * drop support for 5.5 (we want to use variable arguments!) * Added JavaScript documentation * fix bug * rename jsMapper into jsChain * fix readme typos * Apply fixes from StyleCI * disable some naming patterns which we are not going to follow * Style fixes * ignore check * ignore bad check * fix docs * add comments * Apply fixes from StyleCI * add comments * add comments --- .codeclimate.yml | 32 ++++++ .travis.yml | 1 - README.md | 52 +++++----- composer.json | 2 +- docs/index.rst | 1 + docs/js.rst | 218 +++++++++++++++++++++++++++++++++++++++ src/jQuery.php | 66 ++++++++++++ src/jUniv.php | 39 +++++++ src/jsChain.php | 187 +++++++++++++++++++++++++++++++++ src/jsExpression.php | 78 ++++++++++++++ src/jsExpressionable.php | 14 +++ src/jsFunction.php | 62 +++++++++++ tests/jsTest.php | 85 +++++++++++++++ 13 files changed, 811 insertions(+), 26 deletions(-) create mode 100644 .codeclimate.yml create mode 100644 docs/js.rst create mode 100644 src/jQuery.php create mode 100644 src/jUniv.php create mode 100644 src/jsChain.php create mode 100644 src/jsExpression.php create mode 100644 src/jsExpressionable.php create mode 100644 src/jsFunction.php create mode 100644 tests/jsTest.php diff --git a/.codeclimate.yml b/.codeclimate.yml new file mode 100644 index 0000000000..7aa2e0a7e0 --- /dev/null +++ b/.codeclimate.yml @@ -0,0 +1,32 @@ +engines: + duplication: + enabled: true + config: + languages: + php: + mass_threshold: 50 + fixme: + enabled: true + phpmd: + enabled: true + exclude_fingerprints: + + - a4c08f53519e5bb95ea18cf329d5e0cd # because code will look much less readable + - 430e46e0b4d075838c908c874b1f0060 + - c8934a72264251fe4b37ab76af3644f5 + checks: + Controversial/CamelCaseClassName: + enabled: false # because jQuery.php and similar class names + Controversial/CamelCasePropertyName: + enabled: false # becasue we use _xx for private properties (that must remain public) + Controversial/CamelCaseMethodName: + enabled: false # methods start with _xx for private methods (that must remain public) + radon: + enabled: true +ratings: + paths: + - "src/**" +exclude_paths: +- "docs/**" +- "tests/**" +- "vendor/**" diff --git a/.travis.yml b/.travis.yml index 7225eec65e..fed5a8a5b0 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,7 +1,6 @@ language: php php: - - '5.5' - '5.6' - '7.0' - '7.1' diff --git a/README.md b/README.md index 907840b4da..09d6369177 100644 --- a/README.md +++ b/README.md @@ -66,7 +66,7 @@ $db = new \atk4\data\Persistence::connect($dsn); $model = new User($db); $form = new \atk4\ui\Form(); -$form->setModel($db); +$form->setModel($model); echo $form->render(); // populated ``` @@ -74,14 +74,17 @@ echo $form->render(); // populated It's very important that your View classes only implement UI logic, while Domain logic will still reside inside the Model class: ``` php -class User extends \atk4\data\Model { +class User extends \atk4\data\Model +{ public $table = 'user'; - function init() { + public function init() + { parent::init(); - $this->addField('name', ['mandatory'=>true, 'caption'=>'Full Name']); - $this->addField('joined', ['type'=>'date']); + $this->addField('name', ['mandatory' => true, 'caption' => 'Full Name']); + $this->addField('joined', ['type' => 'date']); } - function sendWelcomeEmail() { + public function sendWelcomeEmail() + { ... } } @@ -102,13 +105,14 @@ Semantic UI offers wide range of customization through classes. Agile UI does no you can use the following code in Agile UI: ``` php -$v = new \atk4\ui\View(['ui'=>'segment', 'inverted']); +// @todo Something is wrong with parameters here! +$v = new \atk4\ui\View(['ui' => 'segment', 'inverted']); $v->add(new \atk4\ui\Button(['Orange', 'inverted orange'])); ``` ### Custom Templates -Agile UI does not try to eliminate your ability to write HTML and in many cases having a template is better and more efficient way. Let's implement a "User Card" View using our own custom markup. Create file `card.html`: +Agile UI does not try to eliminate your ability to write HTML and in many cases having a HTML template is better and more efficient way than using default ones. Let's implement a "User Card" View using our own custom markup. Create file `card.html`: ``` html
@@ -136,7 +140,7 @@ Agile UI does not try to eliminate your ability to write HTML and in many cases Then use it as a template for a View: ``` php -$card = new \atk4\ui\View(['template'=>'card.html']); +$card = new \atk4\ui\View(['template' => 'card.html']); ``` The "{$_id}" tag will be supplied by Agile UI automatically, but the rest of the tags can be set through a model: @@ -147,7 +151,7 @@ $user->load(123); // ID of the person $card->setModel($user); ``` -Templates can also be used for a form. In fact we can use that same "card.html" as a form layout: +Templates can also be used for a form. In fact we can use that same `card.html` template as a form layout: ```php $form = new \atk4\UI\Form(); @@ -155,7 +159,7 @@ $form->setLayout('card.html'); $form->setModel($user); ``` -Finally - templates are extremely useful with Lister class for producting non-tabular repeating HTML markup. +Finally - templates are extremely useful with `Lister` class for producing non-tabular repeating HTML markup. ## Full Page Render @@ -166,13 +170,13 @@ $app = new \atk4\ui\App('Hello World'); $app->setLayout(new \atk4\ui\Layout\Centered()); $app->layout->add($card); -$app->layout->add(new \atk4\ui\View(['ui'=>'divider'])); +$app->layout->add(new \atk4\ui\View(['ui' => 'divider'])); $app->layout->add($form); $app->run(); ``` -This will take care of the HTML boilerplate JS/CSS includes and everything else. +This will take care of the HTML boilerplate, JS/CSS includes and everything else. ## Factory @@ -189,7 +193,7 @@ $b2 = $view->add('Button', 'Button 2'); $bb = $view->add('BigButton'); ``` -Re-routing can be used to replaced standard UI elements with a different classes. If you rather prefer to rely on "use" and hinting in your IDE, then use this syntax instead: +Re-routing can be used to replace standard UI elements with a different classes. If you rather prefer to rely on "use" and hinting in your IDE, then use this syntax instead: ``` php use \atk4\ui\View; @@ -205,7 +209,7 @@ $app->add($view); $view->add([$b1, $b2, $bb]); ``` -It does not matter matter in which order you add the elements, as long as all of the views become part of the same Render Tree. +It does not matter in which order you add the elements, as long as all of the views become part of the same Render Tree. ## Events @@ -223,7 +227,7 @@ Method calls to "toggle" and "hide" translate into jQuery chain systax: ``` javascript $('b1').on('click', function(){ $('b1').toggle('active'); }); -$('b2').on('click', function(){ $('b1').hide('slow'); }); +$('b2').on('hover', function(){ $('b1').hide('slow'); }); ``` ## Server-Side Events @@ -231,16 +235,16 @@ $('b2').on('click', function(){ $('b1').hide('slow'); }); All the Views you initialize have a unique identifier in the render tree. This makes it possible for events to communicate with the PHP logic: ``` php -$b1 = $view->add('Button', 'Rand: '.rand(1,100)); +$b1 = $view->add('Button', 'Rand: '.rand(1, 100)); $b2 = $view->add('Button', 'Button 2'); $b1->on('click')->reload(); // reload view dynamically -$b2->on('click', function($b){ +$b2->on('click', function($b) { return $b->js()->text(rand(101, 200)); }); ``` -Eeach button now implements a call-back handler that works reliably, transparently and does not confilct with multiple Button instances on te same page. +Each button now implements a call-back handler that works reliably, transparently and does not conflict with multiple Button instances on the same page. ## Virtual Pages @@ -251,7 +255,7 @@ $b1 = $view->add('Button', 'Click to Open Dialog'); $b1->add('VirtualPage')->bindEvent()->set(function($page) { $page->add('LoremIpsum'); -});; +}); ``` ## Advanced Component Features @@ -259,12 +263,12 @@ $b1->add('VirtualPage')->bindEvent()->set(function($page) { With all of the advanced features available for the components, they can implement a higher level of view logic abstraction. Form submit handler is used for dynamic form submissions: ``` php -$form->onSubmit(function($js){ +$form->onSubmit(function($js) { return $js->hide('slow'); }); ``` -Similarly a 'CRUD' view relies on 'Form' and 'Grid' views to create a fully-interractive CRUD experience: +Similarly a 'CRUD' view relies on 'Form' and 'Grid' views to create a fully-interactive CRUD experience: ``` php $view->add('CRUD')->setModel('User'); @@ -276,7 +280,7 @@ Producing the following: ## More Features -There are many other features, which I wanted to mentioned briefly: +There are many other features, which I wanted to mention briefly: - Integration with RequireJS for dynamic JS includes - Debug support @@ -300,7 +304,7 @@ Agile UI is currently in the **early development stage**. Our development proces | ---------- | ---------------------------------------- | | 0.1 [done] | Bootstrap the test-suite, continious integration and UI-testing. | | 0.2 [done] | Implement template engine and a static "View". | -| 0.3 | Implement JavaScript mechanics, integrate RequireJS, jQuery and Semantic UI | +| 0.3 [done] | Implement JavaScript mechanics, integrate RequireJS, jQuery and Semantic UI | | 0.4 | Implement URL mechanics and reloading | | 0.5 | Implement standard set of UI elements - Button, Menu, Label, etc. | | 0.6 | Implement Form | diff --git a/composer.json b/composer.json index fac014bdaf..0fdaa8f338 100644 --- a/composer.json +++ b/composer.json @@ -13,7 +13,7 @@ } ], "require": { - "php": ">=5.5.0", + "php": ">=5.6.0", "atk4/data": "*", "facebook/webdriver": "^1.1" }, diff --git a/docs/index.rst b/docs/index.rst index 9e4095e196..eadd4b5f84 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -12,6 +12,7 @@ Contents: core template view + js base-components layouts building-components diff --git a/docs/js.rst b/docs/js.rst new file mode 100644 index 0000000000..d36dbf65dc --- /dev/null +++ b/docs/js.rst @@ -0,0 +1,218 @@ + + + +.. _js: + +================== +JavaScript Mapping +================== + +A modern user interface cannot exist without JavaScript. For Agile UI to work, certain views +must be able to bind with JavaScript frameworks. + +.. important:: + + We never encourage writing JavaScript logic in PHP. The purpose of JS layer is for binding + events and actions. + +One of the most popular JavaScript library - jQuery - uses chaining extensively. Syntax is easy +to understand and write: + +.. code-block:: js + + $('.mybox').find('button').click(function() { + $('.otherbox').hide(); + }); + +In most cases you will be using 3rd party plug-ins to simply initialize stuff or bind events. +If you are looking to build a DropDown view that needs to initialize itself on the JavaScript end +with: + +.. code-block:: js + + $('#the-box-id').dropdown(); + +the initialization should somehow be embedded inside your own DropDown view. Of course you can hide +piece of JavaScript inside your custom HTML template, but that is a anti-pattern with Agile UI that +tries to streamline all the UI. + + +Agile UI relies on two important mechanics that makes JavaScript interaction simple. + +JavaScript Chain Building +------------------------- + +.. php:namespace: atk4\\ui +.. php:class:: jsChain + + Base class jsChain can be extended by other classes such as jQuery to provide transparent + mappers for any JavaScript framework. + +Chain is a PHP object that represents one or several actions that are to be executed on the +client side:: + + $chain = new jQuery('#the-box-id'); + + $chain->dropdown(); + +The calls to the chain are stored in the object and can be converted into JavaScript by calling :php:meth:`jsChain::jsRender()` + +.. php:method:: jsRender() + + Converts actions recorded in jsChain into string of JavaScript code. + + +Executing:: + + echo $chain->jsRender(); + +will output: + +.. code-block:: js + + $('#the-box-id').dropdown(); + +View to JS integration +---------------------- + +We are not building JavaScript code just for the excercise. Our whole point is ability to link that code +between actual views. All views support JavaScript binding through two methods: :php:meth:`View::js()` and :php:meth:`View::on()`. + +.. php:class:: View +.. php:method:: js([$event]) + + Return chain corresponding to the view. + +.. php:method:: on(String $event, [String selector], $callback = null) + + Returns chain that will be automatically executed if $event occurs. If $callback is specified, it + will also be executed on event. + +Calling $button->js() you will get a new jQuery chain object that you can interact with:: + + $chain = $form->js()->hide('slow'); + +Just on it's own chain will not do anything, so you can use "on" method to bind the action:: + + $button->on('click', $chain); + +Mechanics of Chains and Binding form a powerful concept, but to make it as powerful as possible, we +have implemented a lot of ways for you to be expressive in the PHP. + +Finally I must mention that js() have an argument for event: + +- omitted, false or null - chain will be returned only. +- true - executes chain onDocumentReady +- string (like "click") - specify specific event + +So if you want button to hide itself when clicked, this simple syntax can be used:: + + $button->js('click')->hide(); + +More commonly you will want to execute chains onDocumentReady:: + + $dropdown_field->js(true)->dropdown(); + + +jsExpressionable and jsExpression +================================= + +.. php:interface:: jsExpressionable + + Some of the clases that implement jsExpressionable are: + + - jsExpression + - jsChain + - View + + +.. php:class:: jsExpression +.. php:method:: __construct(template, args) + + Returns object that renders into template by substituting args into it. + +This interface can be implemented by the object and would mean that this object can be mapped into +a safe JavaScript code. Any other variables will be passed to `json_encode` when they are parts of +expression. + +Compare next two examples:: + + echo (new jQuery('document'))->find('h1')->hide()->jsRender(); + + // produces $('document').find('h1').hide(); + // does not hide anything because document is streated as string selector! + + $expr = new jsExpression('document'); + echo (new jQuery($expr))->find('h1')->hide()->jsRender(); + + // produces $(document).find('h1').hide(); + // works correctly!! + +Template of jsExpression +------------------------ + +The jsExpression class provides the most simple implementation that can be useful for providing +any JavaScript expressions. My next example will set height of right container to the sum of 2 +boxes on the left:: + + $h1 = $left_box1->js()->height(); + $h2 = $left_box2->js()->height(); + + $sum = new jsExpression('[]+[]', [$h1, $h2]); + + $right_box_container->js(true)->height( $sum ); + +It is important that you remember that height of an element is a browser-side property and you +must operate with it in your browser by passing expressions into chain. + + +The template language for jsExpression is super-simple: + + - [] will be mapped to next argument in the argument array + - ['foo'] will be mapped to named argument in argument array + +So the following three lines are identical:: + + $sum = new jsExpression('[]+[]', [$h1, $h2]); + $sum = new jsExpression('[0]+[1]', [0=>$h1, 1=>$h2]); + $sum = new jsExpression('[a]+[b]', ['a'=>$h1, 'b'=>$h2]); + +.. important:: + + We have specifically selected a very simple tag format as a reminder to you not to write + any code as part of jsExpression. You must not use jsExpression() for anything complex. + + +Writing JavaScript code +----------------------- + +Open a new file `test.js` and type: + +.. code-block:: js + + function mySum(arr) { + return arr.reduce(function(a, b) { + return a+b; + }, 0); + } + +When load this js dependency on your page, then you can use the following chain:: + + $heights = []; + + foreach ($left_container->elements as $left_box) { + $heights[] = $left_box->js()->height(); + } + + $right_container->js(true)->height(new jsExpression('mySum([])', [$heights])); + +This will map into the following JavaScript code: + +.. code-block:: js + + $('#right_container_id').height(mySum([ + $('#left_box1').height(), $('#left_box2').height(), $('#left_box3').height() // etc + ])); + +You can further simplify JavaScript code yourself, but keep the JavaScript logic inside the `.js` files +and leave PHP only for binding. diff --git a/src/jQuery.php b/src/jQuery.php new file mode 100644 index 0000000000..8d36d4deec --- /dev/null +++ b/src/jQuery.php @@ -0,0 +1,66 @@ +_constructor_arguments = $constructorArgs; + } + + public function univ() + { + return new jUniv($this); + } +} diff --git a/src/jUniv.php b/src/jUniv.php new file mode 100644 index 0000000000..1eaa0a7f6c --- /dev/null +++ b/src/jUniv.php @@ -0,0 +1,39 @@ +foo()->bar(1)->baz->test(['abc'=>123]); + * + * will be stored in $chain as + * + * [ ['foo'], ['bar', [1]], 'baz', ['test', ['abc=>123]] ] + * + * will map into: + * + * $.foo().bar(1).baz.test({abc: 123]); + * + * @var array + */ + public $_chain = []; + + /** + * Override a library when executing constructor. For instance if you wish to use jQuery3 instead of jQuery. + * + * @param string $library + */ + public function __construct($library = null) + { + if ($library) { + $this->_library = $library; + } + } + + /** + * Records all calls to this chain returning itself every time. + * + * @param string $name + * @param mixed $args + * + * @return $this + */ + public function __call($name, $args) + { + $this->_chain[] = [$name, $args]; + + return $this; + } + + /** + * Allows you to use syntax like this. + * + * $js->offset()->top + * + * that maps into + * + * $.offset()->top + * + * @param string $property + * + * @return $this + */ + public function __get($property) + { + $this->_chain[] = $property; + + return $this; + } + + /** + * Convert reserved words or used methods into js calls, such as "_fn('class')" or "_fn('_fn')". + * + * @param string $name + * @param array $args + * + * @return $this + */ + public function _fn($name, $args = []) + { + // Wrapper for functions which use reserved words + return $this->__call($name, $args); + } + + /** + * Renders JS chain arguments. + * + * @param array $args + * + * @return string + */ + private function _renderArgs($args = []) + { + return '('. + implode(',', array_map(function ($arg) { + if ($arg instanceof jsExpressionable) { + return $arg->jsRender(); + } + + return json_encode($arg); + }, $args)). + ')'; + } + + /** + * Produce String representing this JavaScript extension. + * + * @return string + */ + public function jsRender() + { + $ret = ''; + + // start with constructor + $ret .= $this->_library; + + // next perhaps we have arguments + if ($this->_constructor_arguments) { + $ret .= $this->_renderArgs($this->_constructor_arguments); + } + + // next we do same with the calls + foreach ($this->_chain as $chain) { + if (is_array($chain)) { + $ret .= '.'.$chain[0].$this->_renderArgs($chain[1]); + } elseif (is_numeric($chain)) { + $ret .= '['.$chain.']'; + } else { + $ret .= '.'.$chain; + } + } + + return $ret; + } +} diff --git a/src/jsExpression.php b/src/jsExpression.php new file mode 100644 index 0000000000..ac29c9d38d --- /dev/null +++ b/src/jsExpression.php @@ -0,0 +1,78 @@ +template = $template; + $this->args = $args; + } + + /** + * Converts this arbitrary JavaScript expression into string. + * + * @return string + */ + public function jsRender() + { + $namelessCount = 0; + + $res = preg_replace_callback( + '/\[[a-z0-9_]*\]|{[a-z0-9_]*}/', + function ($matches) use (&$namelessCount) { + $identifier = substr($matches[0], 1, -1); + + // Allow template to contain [] + if ($identifier === '') { + $identifier = $namelessCount++; + + // use rendering only with named tags + } + + if (!isset($this->args[$identifier])) { + throw new Exception([ + 'Tag not defined in template for jsExpression', + 'tag' => $identifier, + 'template'=> $this->template, + ]); + } + + $value = $this->args[$identifier]; + + if (is_object($value) && $value instanceof jsExpressionable) { + $value = '('.$value->jsRender().')'; + } elseif (is_object($value)) { + $value = json_encode($value->toString()); + } else { + $value = json_encode($value); + } + + return $value; + }, + $this->template + ); + + return trim($res); + } +} diff --git a/src/jsExpressionable.php b/src/jsExpressionable.php new file mode 100644 index 0000000000..cb82966d77 --- /dev/null +++ b/src/jsExpressionable.php @@ -0,0 +1,14 @@ +fx_args = $args; + $this->fx_statements = $statements; + } + + /** + * Render arguments. + * + * @param array $args + * + * @return string + */ + private function _renderArgs($args = []) + { + if ($args === null) { + return []; + } + + return + array_map(function ($arg) { + if ($arg instanceof jsExpressionable) { + return $arg->jsRender(); + } + + return json_encode($arg); + }, $args); + } + + /** + * Render function/expression. + * + * @return string + */ + public function jsRender() + { + return 'function('.implode(',', $this->_renderArgs($this->fx_args)).") {\n". + implode(";\n", $this->_renderArgs($this->fx_statements)).";\n". + '}'; + } +} diff --git a/tests/jsTest.php b/tests/jsTest.php new file mode 100644 index 0000000000..a2c76291c7 --- /dev/null +++ b/tests/jsTest.php @@ -0,0 +1,85 @@ +assertEquals('2+2', (new jsExpression('2+2'))->jsRender()); + $this->assertEquals('3+4', (new jsExpression('[]+[]', [3, 4]))->jsRender()); + } + + public function testNestedExpressions() + { + $this->assertEquals( + '10-(2+3)', + ( + new jsExpression( + '[]-[]', + [ + 10, + new jsExpression( + '[a]+[b]', + ['a'=> 2, 'b'=>3] + ), + ] + ) + )->jsRender() + ); + } + + public function testChain1() + { + $c = new jsChain('$myInput'); + $c->getTextInRange('start', 'end'); + $this->assertEquals('$myInput.getTextInRange("start","end")', $c->jsRender()); + } + + public function testChain2() + { + $c = new jsChain('$myInput'); + $c->getTextInRange(new jsExpression('getStart()'), 'end'); + $this->assertEquals('$myInput.getTextInRange(getStart(),"end")', $c->jsRender()); + } + + public function testjQuery() + { + $c = new jQuery('.mytag'); + $c->find('li')->first()->hide(); + + $this->assertEquals('$(".mytag").find("li").first().hide()', $c->jsRender()); + } + + public function testArgs() + { + $c = new jQuery('.mytag'); + $c->val((new jQuery('.othertag'))->val()); + + $this->assertEquals('$(".mytag").val($(".othertag").val())', $c->jsRender()); + } + + public function testComplex1() + { + // binding that maintains same height on + $b1 = new jQuery('.box1'); + $b2 = new jQuery('.box2'); + + $doc = new jQuery(new jsExpression('document')); + $fx = $doc->ready(new jsFunction(null, [ + $b1->height($b2->height()), + ])); + + $this->assertEquals('$(document).ready(function() { +$(".box1").height($(".box2").height()); +})', $fx->jsRender()); + } +} From 65f491adb60d644a1c0ffcb42c67ecc11a5489ee Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 27 Dec 2016 14:14:40 +0000 Subject: [PATCH 027/100] Apply fixes from StyleCI --- src/jsFunction.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/jsFunction.php b/src/jsFunction.php index e3bfecfcd4..1df08ebd33 100644 --- a/src/jsFunction.php +++ b/src/jsFunction.php @@ -13,10 +13,10 @@ class jsFunction implements jsExpressionable /** @var array Array of statements */ public $fx_statements = []; - /** @var boolean add preventDefault(event) */ + /** @var bool add preventDefault(event) */ public $preventDefault = false; - /** @var boolean add stopPropagation(event) */ + /** @var bool add stopPropagation(event) */ public $stopPropagation = false; /** @var string Array of statements */ From 40764d0993fa92c465df399a6ddfb6f0f5476123 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 27 Dec 2016 14:17:47 +0000 Subject: [PATCH 028/100] improve codeclimate --- .codeclimate.yml | 6 ++---- src/View.php | 6 +++--- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/.codeclimate.yml b/.codeclimate.yml index 7aa2e0a7e0..62ef0f968c 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -10,11 +10,9 @@ engines: phpmd: enabled: true exclude_fingerprints: - - - a4c08f53519e5bb95ea18cf329d5e0cd # because code will look much less readable - - 430e46e0b4d075838c908c874b1f0060 - - c8934a72264251fe4b37ab76af3644f5 checks: + CleanCode/ElseExpression: + enabled: false # gives many incorrect suggestions Controversial/CamelCaseClassName: enabled: false # because jQuery.php and similar class names Controversial/CamelCasePropertyName: diff --git a/src/View.php b/src/View.php index 03d710fa4c..ac4cf88ef5 100644 --- a/src/View.php +++ b/src/View.php @@ -114,7 +114,7 @@ public function setModel(\atk4\data\Model $m) * * TODO: move into trait, because this is used often */ - public function setProperties($properties) + protected function setProperties($properties) { if (isset($properties[0])) { $this->content = $properties[0]; @@ -136,7 +136,7 @@ public function setProperties($properties) /** * TODO: move into trait because it's used so often. */ - public function setProperty($key, $val) + protected function setProperty($key, $val) { if (is_numeric($key)) { $key = $val; @@ -195,7 +195,7 @@ public function init() * For the absence of the application, we would add a very * simple one. */ - public function initDefaultApp() + protected function initDefaultApp() { $this->app = new \atk4\ui\App(['skin'=>$this->skin]); $this->app->init(); From b055b4e6d75d8d8cede1787f835ff174d62de71c Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 27 Dec 2016 14:23:23 +0000 Subject: [PATCH 029/100] improve code climate --- .codeclimate.yml | 6 ++++++ src/View.php | 34 +++++++++++++++++----------------- 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/.codeclimate.yml b/.codeclimate.yml index 62ef0f968c..4272ec61e4 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -10,6 +10,10 @@ engines: phpmd: enabled: true exclude_fingerprints: + - 6f1741a30df682d3e9df65fac222b482 # allow js() method to be 2-character long + - 8eca4c1426fc1508652d90a30744e7fd # allow on() method to be 2-character long + - 8eca4c1426fc1508652d90a30744e7fd # allow $id property to be 2-character long + - checks: CleanCode/ElseExpression: enabled: false # gives many incorrect suggestions @@ -19,6 +23,8 @@ engines: enabled: false # becasue we use _xx for private properties (that must remain public) Controversial/CamelCaseMethodName: enabled: false # methods start with _xx for private methods (that must remain public) + Design/WeightedMethodCount: + enabled: false # because we solve complex task, our classes may be complex radon: enabled: true ratings: diff --git a/src/View.php b/src/View.php index ac4cf88ef5..e0ef3fdd80 100644 --- a/src/View.php +++ b/src/View.php @@ -499,21 +499,21 @@ public function js($when = null) * * @link http://agile-ui.readthedocs.io/en/latest/js.html */ - public function on($event, $selector = null, $js = null) + public function on($event, $selector = null, $action = null) { // second argument may be omitted - if (!is_string($selector) && is_null($js)) { - $js = $selector; + if (!is_string($selector) && is_null($action)) { + $action = $selector; $selector = null; } $actions = []; // will be returned from this method, so you can chain more stuff on it - $actions[] = $this_js = new jQuery(new jsExpression('this')); + $actions[] = $thisAction = new jQuery(new jsExpression('this')); - if (is_callable($js)) { - // if callable $js is passed, then execute ajaxec() + if (is_callable($action)) { + // if callable $action is passed, then execute ajaxec() // throw new Exception('VirtualPage is not yet implemented'); $url = '.virtualpage->getURL..'; @@ -522,11 +522,11 @@ public function on($event, $selector = null, $js = null) /* $p = $this->add('VirtualPage'); - $p->set(function ($p) use ($js) { - // $js is an actual callable + $p->set(function ($p) use ($action) { + // $action is an actual callable $js2 = $p->js()->_selectorRegion(); - $js3 = call_user_func($js, $js2, $_POST); + $js3 = call_user_func($action, $js2, $_POST); // If method returns something, execute that instead if ($js3) { @@ -536,11 +536,11 @@ public function on($event, $selector = null, $js = null) } }); - $js = $this->js()->_selectorThis()->univ()->ajaxec($p->getURL(), true); + $action = $this->js()->_selectorThis()->univ()->ajaxec($p->getURL(), true); */ - } elseif ($js) { + } elseif ($action) { // otherwise include - $actions[] = $js; + $actions[] = $action; } $actions['preventDefault'] = true; @@ -549,12 +549,12 @@ public function on($event, $selector = null, $js = null) $action = new jsFunction($actions); if ($selector) { - $js = $this->js(true)->on($event, $selector, $action); + $this->js(true)->on($event, $selector, $action); } else { - $js = $this->js(true)->on($event, $action); + $this->js(true)->on($event, $action); } - return $this_js; + return $thisAction; /* if ($js) { @@ -598,8 +598,8 @@ public function getJS() { $actions = []; - foreach ($this->_js_actions as $event=>$event_actions) { - foreach ($event_actions as $action) { + foreach ($this->_js_actions as $event=>$eventActions) { + foreach ($eventActions as $action) { // wrap into callback if ($event !== 'always') { $action = (new jQuery($action->_constructor_arguments[0]))->bind($event, new jsFunction([$action, 'preventDefault'=>true, 'stopPropagation'=>true])); From 80e063bbb65756e99cd17ef5d41496a666c95b30 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 27 Dec 2016 14:25:15 +0000 Subject: [PATCH 030/100] code climate improvements --- src/View.php | 2 +- src/jQuery.php | 2 +- src/jsChain.php | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/View.php b/src/View.php index e0ef3fdd80..6404d94c97 100644 --- a/src/View.php +++ b/src/View.php @@ -602,7 +602,7 @@ public function getJS() foreach ($eventActions as $action) { // wrap into callback if ($event !== 'always') { - $action = (new jQuery($action->_constructor_arguments[0]))->bind($event, new jsFunction([$action, 'preventDefault'=>true, 'stopPropagation'=>true])); + $action = (new jQuery($action->_constructorArguments[0]))->bind($event, new jsFunction([$action, 'preventDefault'=>true, 'stopPropagation'=>true])); } $actions[] = $action; diff --git a/src/jQuery.php b/src/jQuery.php index 8d36d4deec..c9330ad655 100644 --- a/src/jQuery.php +++ b/src/jQuery.php @@ -56,7 +56,7 @@ public function __construct(...$constructorArgs) { parent::__construct(); - $this->_constructor_arguments = $constructorArgs; + $this->_constructorArguments = $constructorArgs; } public function univ() diff --git a/src/jsChain.php b/src/jsChain.php index 6528bc73b8..9f6a3606f9 100644 --- a/src/jsChain.php +++ b/src/jsChain.php @@ -53,7 +53,7 @@ class jsChain implements jsExpressionable * * @var array */ - public $_constructor_arguments = []; + public $_constructorArguments = []; /** * Call chain. All calls to this mapper will be recorded here. Property traversal @@ -167,8 +167,8 @@ public function jsRender() $ret .= $this->_library; // next perhaps we have arguments - if ($this->_constructor_arguments) { - $ret .= $this->_renderArgs($this->_constructor_arguments); + if ($this->_constructorArguments) { + $ret .= $this->_renderArgs($this->_constructorArguments); } // next we do same with the calls From eed6fb72877451c0e8554139c2d418254340d0d3 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 27 Dec 2016 14:27:22 +0000 Subject: [PATCH 031/100] improve code climate --- src/View.php | 2 +- src/jQuery.php | 2 +- src/jsChain.php | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/View.php b/src/View.php index 6404d94c97..2848b64940 100644 --- a/src/View.php +++ b/src/View.php @@ -602,7 +602,7 @@ public function getJS() foreach ($eventActions as $action) { // wrap into callback if ($event !== 'always') { - $action = (new jQuery($action->_constructorArguments[0]))->bind($event, new jsFunction([$action, 'preventDefault'=>true, 'stopPropagation'=>true])); + $action = (new jQuery($action->_constructorArgs[0]))->bind($event, new jsFunction([$action, 'preventDefault'=>true, 'stopPropagation'=>true])); } $actions[] = $action; diff --git a/src/jQuery.php b/src/jQuery.php index c9330ad655..66f7b83460 100644 --- a/src/jQuery.php +++ b/src/jQuery.php @@ -56,7 +56,7 @@ public function __construct(...$constructorArgs) { parent::__construct(); - $this->_constructorArguments = $constructorArgs; + $this->_constructorArgs = $constructorArgs; } public function univ() diff --git a/src/jsChain.php b/src/jsChain.php index 9f6a3606f9..178ae0cbf7 100644 --- a/src/jsChain.php +++ b/src/jsChain.php @@ -53,7 +53,7 @@ class jsChain implements jsExpressionable * * @var array */ - public $_constructorArguments = []; + public $_constructorArgs = []; /** * Call chain. All calls to this mapper will be recorded here. Property traversal @@ -167,8 +167,8 @@ public function jsRender() $ret .= $this->_library; // next perhaps we have arguments - if ($this->_constructorArguments) { - $ret .= $this->_renderArgs($this->_constructorArguments); + if ($this->_constructorArgs) { + $ret .= $this->_renderArgs($this->_constructorArgs); } // next we do same with the calls From ccafa7e493ee9c3c4df339da6242c415518c9c02 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 27 Dec 2016 14:29:18 +0000 Subject: [PATCH 032/100] remaining climate changes --- .codeclimate.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.codeclimate.yml b/.codeclimate.yml index 4272ec61e4..313d378165 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -13,7 +13,8 @@ engines: - 6f1741a30df682d3e9df65fac222b482 # allow js() method to be 2-character long - 8eca4c1426fc1508652d90a30744e7fd # allow on() method to be 2-character long - 8eca4c1426fc1508652d90a30744e7fd # allow $id property to be 2-character long - - + - 5ea59add5ab787828057bd726957dc99 # allow $id property to be 2-character lond + - 908ad3f93985ff14c44615cee6966c72 # View have a lot of public methods. Deal with it. checks: CleanCode/ElseExpression: enabled: false # gives many incorrect suggestions From 4570ecd12091291dd3dbc730b1ffe2c7c522b5f9 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 28 Dec 2016 04:49:01 +0000 Subject: [PATCH 033/100] Putting PHPStorm to work :) cleaned minor issues --- src/View.php | 26 ++++++++++++++++++-------- src/jQuery.php | 3 --- src/jsFunction.php | 2 ++ 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/View.php b/src/View.php index 2848b64940..a516797cdb 100644 --- a/src/View.php +++ b/src/View.php @@ -64,6 +64,8 @@ class View implements jsExpressionable * Path to template. If you don't specify full path * by starting with '/' then will be prepended by * default template path. + * + * @var Template */ public $template = 'element.html'; @@ -79,6 +81,9 @@ class View implements jsExpressionable /** * May accept properties of a class, but if property is not defined, it will * be used as a HTML class instead. + * + * @param array $defaults + * @throws Exception */ public function __construct($defaults = []) { @@ -101,6 +106,9 @@ public function __construct($defaults = []) * * Do not try to create your own "Model" implementation, instead you must be looking for * your own "Persistence" implementation. + * + * @param \atk4\data\Model $m + * @return \atk4\data\Model */ public function setModel(\atk4\data\Model $m) { @@ -197,13 +205,17 @@ public function init() */ protected function initDefaultApp() { - $this->app = new \atk4\ui\App(['skin'=>$this->skin]); + $this->app = new App(['skin'=>$this->skin]); $this->app->init(); } /** * In addition to adding a child object, set up it's template * and associate it's output with the region in our template. + * + * @param $object View New object to add + * @param string $region + * @return View */ public function add($object, $region = 'Content') { @@ -211,6 +223,8 @@ public function add($object, $region = 'Content') $this->init(); //$this->initDefaultApp(); } + + /** @var View $object */ $object = $this->_add($object); $object->region = $region; @@ -266,8 +280,6 @@ public function set($arg1 = [], $arg2 = null) 'Not sure what to do with argument', 'arg1'=> $arg1, ]); - - return $this; } /** @@ -294,8 +306,6 @@ public function addClass($class) * Remove one or several CSS classes from the element. * * @param string|array $class CSS class name or array of class names - * - * @return $this */ public function removeClass($remove_class) { @@ -440,10 +450,10 @@ public function getHTML() * @link http://agile-ui.readthedocs.io/en/latest/js.html * * @param string|bool|null $when Event when chain will be executed - * @param array|jQuery_Chain|string $code JavaScript chain(s) or code + * @param array|jQuery|string $code JavaScript chain(s) or code * @param string $instance Obsolete * - * @return jQuery_Chain + * @return jQuery */ public function js($when = null) { @@ -516,7 +526,7 @@ public function on($event, $selector = null, $action = null) // if callable $action is passed, then execute ajaxec() // throw new Exception('VirtualPage is not yet implemented'); - $url = '.virtualpage->getURL..'; + /*$url = '.virtualpage->getURL..'; $actions[] = (new jsUniv(new jsExpression('this')))->ajaxec($url, true); /* diff --git a/src/jQuery.php b/src/jQuery.php index 66f7b83460..480a8d87f9 100644 --- a/src/jQuery.php +++ b/src/jQuery.php @@ -37,9 +37,6 @@ * @method jQuery form() * @method jQuery api() * @method jQuery visibility() - * - * Extensions by Univ - * @method jUniv univ() */ class jQuery extends jsChain { diff --git a/src/jsFunction.php b/src/jsFunction.php index 1df08ebd33..e98a318d80 100644 --- a/src/jsFunction.php +++ b/src/jsFunction.php @@ -25,6 +25,7 @@ class jsFunction implements jsExpressionable /** * Constructor. * + * @throws Exception * @param array $args * @param array $statements */ @@ -53,6 +54,7 @@ public function __construct($args = [], $statements = null) /** * Render function/expression. * + * @throws Exception * @return string */ public function jsRender() From a02a8e095762aee7b06ccdb0b9d8a55700826f24 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 28 Dec 2016 04:49:25 +0000 Subject: [PATCH 034/100] Apply fixes from StyleCI --- src/View.php | 7 +++++-- src/jsFunction.php | 4 +++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/View.php b/src/View.php index a516797cdb..ffa60f7201 100644 --- a/src/View.php +++ b/src/View.php @@ -83,6 +83,7 @@ class View implements jsExpressionable * be used as a HTML class instead. * * @param array $defaults + * * @throws Exception */ public function __construct($defaults = []) @@ -108,6 +109,7 @@ public function __construct($defaults = []) * your own "Persistence" implementation. * * @param \atk4\data\Model $m + * * @return \atk4\data\Model */ public function setModel(\atk4\data\Model $m) @@ -215,6 +217,7 @@ protected function initDefaultApp() * * @param $object View New object to add * @param string $region + * * @return View */ public function add($object, $region = 'Content') @@ -449,9 +452,9 @@ public function getHTML() * * @link http://agile-ui.readthedocs.io/en/latest/js.html * - * @param string|bool|null $when Event when chain will be executed + * @param string|bool|null $when Event when chain will be executed * @param array|jQuery|string $code JavaScript chain(s) or code - * @param string $instance Obsolete + * @param string $instance Obsolete * * @return jQuery */ diff --git a/src/jsFunction.php b/src/jsFunction.php index e98a318d80..1afaab68e4 100644 --- a/src/jsFunction.php +++ b/src/jsFunction.php @@ -25,9 +25,10 @@ class jsFunction implements jsExpressionable /** * Constructor. * - * @throws Exception * @param array $args * @param array $statements + * + * @throws Exception */ public function __construct($args = [], $statements = null) { @@ -55,6 +56,7 @@ public function __construct($args = [], $statements = null) * Render function/expression. * * @throws Exception + * * @return string */ public function jsRender() From 9be6f12c71f86f153981e343a2833598e7185c0d Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 28 Dec 2016 05:00:14 +0000 Subject: [PATCH 035/100] cleanup with phpstorm --- src/View.php | 48 +++++++++++++++++++++++++++++++++++------------- 1 file changed, 35 insertions(+), 13 deletions(-) diff --git a/src/View.php b/src/View.php index ffa60f7201..23ea76b78c 100644 --- a/src/View.php +++ b/src/View.php @@ -4,20 +4,26 @@ namespace atk4\ui; +use atk4\core\AppScopeTrait; +use atk4\core\ContainerTrait; +use atk4\core\InitializerTrait; +use atk4\core\TrackableTrait; +use atk4\data\Model; + /** * Implements a most core view, which all of the other components descend * form. */ class View implements jsExpressionable { - use \atk4\core\ContainerTrait { + use ContainerTrait { add as _add; } - use \atk4\core\InitializerTrait { + use InitializerTrait { init as _init; } - use \atk4\core\TrackableTrait; - use \atk4\core\AppScopeTrait; + use TrackableTrait; + use AppScopeTrait; // {{{ Properties of the class @@ -108,11 +114,10 @@ public function __construct($defaults = []) * Do not try to create your own "Model" implementation, instead you must be looking for * your own "Persistence" implementation. * - * @param \atk4\data\Model $m - * - * @return \atk4\data\Model + * @param Model $m + * @return Model */ - public function setModel(\atk4\data\Model $m) + public function setModel(Model $m) { $this->model = $m; @@ -123,6 +128,7 @@ public function setModel(\atk4\data\Model $m) * Called from __consruct() and set() to initialize teh properties. * * TODO: move into trait, because this is used often + * @param $properties */ protected function setProperties($properties) { @@ -145,6 +151,9 @@ protected function setProperties($properties) /** * TODO: move into trait because it's used so often. + * @param $key + * @param $val + * @throws Exception */ protected function setProperty($key, $val) { @@ -247,6 +256,12 @@ public function add($object, $region = 'Content') /** * Override this method without compatibility with parrent, if you wish * to set your own things your own way for your view. + * + * @param array $arg1 + * @param string|null $arg2 + * + * @return $this + * @throws Exception */ public function set($arg1 = [], $arg2 = null) { @@ -308,7 +323,8 @@ public function addClass($class) /** * Remove one or several CSS classes from the element. * - * @param string|array $class CSS class name or array of class names + * @param $remove_class + * @internal param array|string $class CSS class name or array of class names */ public function removeClass($remove_class) { @@ -452,9 +468,7 @@ public function getHTML() * * @link http://agile-ui.readthedocs.io/en/latest/js.html * - * @param string|bool|null $when Event when chain will be executed - * @param array|jQuery|string $code JavaScript chain(s) or code - * @param string $instance Obsolete + * @param string|bool|null $when Event when chain will be executed * * @return jQuery */ @@ -511,6 +525,13 @@ public function js($when = null) * For more information on how this works, see documentation: * * @link http://agile-ui.readthedocs.io/en/latest/js.html + * + * @param string $event JavaScript event + * @param string $selector Optional jQuery-style selector + * @param jsChain|callable $action code to execute + * + * @return jQuery + * @throws Exception */ public function on($event, $selector = null, $action = null) { @@ -615,7 +636,8 @@ public function getJS() foreach ($eventActions as $action) { // wrap into callback if ($event !== 'always') { - $action = (new jQuery($action->_constructorArgs[0]))->bind($event, new jsFunction([$action, 'preventDefault'=>true, 'stopPropagation'=>true])); + $action = (new jQuery($action->_constructorArgs[0])) + ->bind($event, new jsFunction([$action, 'preventDefault'=>true, 'stopPropagation'=>true])); } $actions[] = $action; From f5347546fdb65dd2bd2101fbfabef3161dc1c3de Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 28 Dec 2016 05:00:28 +0000 Subject: [PATCH 036/100] Apply fixes from StyleCI --- src/View.php | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/View.php b/src/View.php index 23ea76b78c..a886a9850a 100644 --- a/src/View.php +++ b/src/View.php @@ -115,6 +115,7 @@ public function __construct($defaults = []) * your own "Persistence" implementation. * * @param Model $m + * * @return Model */ public function setModel(Model $m) @@ -128,6 +129,7 @@ public function setModel(Model $m) * Called from __consruct() and set() to initialize teh properties. * * TODO: move into trait, because this is used often + * * @param $properties */ protected function setProperties($properties) @@ -151,8 +153,10 @@ protected function setProperties($properties) /** * TODO: move into trait because it's used so often. + * * @param $key * @param $val + * * @throws Exception */ protected function setProperty($key, $val) @@ -257,11 +261,12 @@ public function add($object, $region = 'Content') * Override this method without compatibility with parrent, if you wish * to set your own things your own way for your view. * - * @param array $arg1 + * @param array $arg1 * @param string|null $arg2 * - * @return $this * @throws Exception + * + * @return $this */ public function set($arg1 = [], $arg2 = null) { @@ -324,6 +329,7 @@ public function addClass($class) * Remove one or several CSS classes from the element. * * @param $remove_class + * * @internal param array|string $class CSS class name or array of class names */ public function removeClass($remove_class) @@ -468,7 +474,7 @@ public function getHTML() * * @link http://agile-ui.readthedocs.io/en/latest/js.html * - * @param string|bool|null $when Event when chain will be executed + * @param string|bool|null $when Event when chain will be executed * * @return jQuery */ @@ -526,12 +532,13 @@ public function js($when = null) * * @link http://agile-ui.readthedocs.io/en/latest/js.html * - * @param string $event JavaScript event - * @param string $selector Optional jQuery-style selector - * @param jsChain|callable $action code to execute + * @param string $event JavaScript event + * @param string $selector Optional jQuery-style selector + * @param jsChain|callable $action code to execute * - * @return jQuery * @throws Exception + * + * @return jQuery */ public function on($event, $selector = null, $action = null) { From 95c5c401de0f6ad7dd4982c69074cb1fa2bacafa Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 28 Dec 2016 05:03:56 +0000 Subject: [PATCH 037/100] fixes --- src/Template.php | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Template.php b/src/Template.php index 36d17bbb05..89c2cc54ba 100644 --- a/src/Template.php +++ b/src/Template.php @@ -75,7 +75,6 @@ public function __construct($template = null) public function __clone() { - parent::__clone(); $this->template = unserialize(serialize($this->template)); unset($this->tags); @@ -89,11 +88,11 @@ public function __clone() * @param string $type Exception class or class postfix * @param string $code Optional error code * - * @return Exception_Template + * @return Exception */ public function exception($message = 'Undefined Exception', $type = null, $code = null) { - return new \atk4\core\Exception([$message, + return new Exception([$message, 'template'=> $this->template_source, 'type' => $type, ], $code); From 595a067dfb8c21ffd769b9b9d93ba21cfdb5523b Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 28 Dec 2016 05:06:58 +0000 Subject: [PATCH 038/100] cleanup things for review --- docs/js.rst | 8 -------- src/View.php | 2 +- src/jsFunction.php | 4 ++-- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/docs/js.rst b/docs/js.rst index bad9fcd70f..5d9336056c 100644 --- a/docs/js.rst +++ b/docs/js.rst @@ -30,19 +30,11 @@ with: .. code-block:: js -<<<<<<< HEAD - $('#the-box-id).dropdown(); - -the initialization should somehow embedded inside your own DropDown view. Of course you can hide -piece of JavaScript inside your custom HTML template, but that's a anti-pattern with Agile UI that -tries to steamline all the UI. -======= $('#the-box-id').dropdown(); the initialization should somehow be embedded inside your own DropDown view. Of course you can hide piece of JavaScript inside your custom HTML template, but that is a anti-pattern with Agile UI that tries to streamline all the UI. ->>>>>>> develop Agile UI relies on two important mechanics that makes JavaScript interaction simple. diff --git a/src/View.php b/src/View.php index a886a9850a..5c8b1bec3c 100644 --- a/src/View.php +++ b/src/View.php @@ -459,7 +459,7 @@ public function getHTML() * // event of $img. * * Produced code: $('#img_id').on('mouseenter', function(ev){ ev.preventDefault(); - * $('view1').hide(); }); + * $('#view1').hide(); }); * * 3. $button->on('click',$form->js()->submit()); * // clicking button will result in form submit diff --git a/src/jsFunction.php b/src/jsFunction.php index 1afaab68e4..3d8142c48c 100644 --- a/src/jsFunction.php +++ b/src/jsFunction.php @@ -13,10 +13,10 @@ class jsFunction implements jsExpressionable /** @var array Array of statements */ public $fx_statements = []; - /** @var bool add preventDefault(event) */ + /** @var bool add preventDefault(event) to generated method */ public $preventDefault = false; - /** @var bool add stopPropagation(event) */ + /** @var bool add stopPropagation(event) to generated method */ public $stopPropagation = false; /** @var string Array of statements */ From a04841fa74bf0aa4d2f902fea7071efd2e9cbded Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 28 Dec 2016 13:13:56 +0000 Subject: [PATCH 039/100] First successful implementation of a call-back --- .gitignore | 1 + demos/button2.php | 13 +++++++ docs/callbacks.rst | 67 +++++++++++++++++++++++++++++++++++ docs/index.rst | 1 + src/App.php | 23 ++++++++++++ src/Callback.php | 39 ++++++++++++++++++++ src/View.php | 52 +++++++++++++++++++++++++-- src/jQuery.php | 12 ++++--- src/jsAPI.php | 21 +++++++++++ src/jsChain.php | 4 +-- src/jsExpression.php | 84 ++++++++++++++++++++++++++++++++++++++++++-- 11 files changed, 305 insertions(+), 12 deletions(-) create mode 100644 docs/callbacks.rst create mode 100644 src/Callback.php create mode 100644 src/jsAPI.php diff --git a/.gitignore b/.gitignore index d0e8d97747..005e299656 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ /config.codekit /phpunit.xml +/.idea /public/semantic /public/jquery /vendor diff --git a/demos/button2.php b/demos/button2.php index 3cd62c324e..3366a6e3dc 100644 --- a/demos/button2.php +++ b/demos/button2.php @@ -11,6 +11,13 @@ try { $layout = new \atk4\ui\Layout\App(['template'=>'./templates/layout2.html']); + $layout->js(true, new \atk4\ui\jsExpression("$.fn.api.settings.successTest = function(response) { + if(response && response.eval) { + var result = function(){ eval(response.eval); }.call(this.obj); + } + return false; +}")); + $layout->add(new H2('Basic Button')); $b = $layout->add(new Button(['id'=>'b1']))->set('Hidden Button'); @@ -19,6 +26,12 @@ $b = $layout->add(new Button(['id'=>'b2']))->set('Hide on click Button'); $b->js('click')->hide(); + $layout->add(new H2('Callbacks')); + + $b = $layout->add(new Button(['id'=>'b3']))->set('Callback Test'); + $b->on('click', function($b){ return $b->text(rand(1,20));}); + + echo $layout->render(); } catch (\atk4\core\Exception $e) { var_dump($e->getMessage()); diff --git a/docs/callbacks.rst b/docs/callbacks.rst new file mode 100644 index 0000000000..4826c5ade1 --- /dev/null +++ b/docs/callbacks.rst @@ -0,0 +1,67 @@ + + + +.. _callback: + +========= +Callbacks +========= + +Agile UI pursues a goal of creating full-featured, interractive user interface. Part of that relies +on abstraction of Browser/Server communication. Here is a simple syntax in Agile UI:: + + $button = new Buttion(); + + // clicking button generates random number every time + $button->on('click', function($action){ + return $action->text(rand(1,100)); + }); + +For comparison, the code without PHP callback would look like this:: + + $button = new Button(); + + // clicking button will change text only once, because + // random is generated during render and stored statically. + $button->on('click')->text(rand(1,100)); + + +Lets spend a moment to discuss how this actually works and why. Agile UI works under the following +assumptions: + + - Sending same GET request will execute the Button creation code (as displayed above) once again. + - Adding additional GET parameters will not affect results of GET request, assuming that those arguments don't conflict. + - URL is in format <...>?param=1¶m2=2 + - Executing "echo" followed by "exit" will not be punished by the environment. + +If any of the above are false inside your environment (e.g. you use custom output buffering), you will have to +fine-tune Agile Data Application class to work with your environment requirement. + +From the above assumptions, Agile UI derrives at conclusion, that by executing AJAX request from the +browser with a special GET argument a certain code can be triggered inside the on() method that short-circuts +output producing response specifically for button. + +Callback Logic Explained +------------------------ + +1. When your code include a call-back format, an instance of '\atk4\ui\Callback' is created and added into +the render-tree. + +2. As any other object in Render-tree, Callback receives a unique name. + +3. Callback asks Application class to build a new URL based on the current arguments plus a new GET argument that it +will be able to recognize, typically &my_full_name=callback + +4. Callback will verify $_GET to see if the current request contains the said GET argument. + +5. If yes - Callback will execute PHP method supplied, then "echo" response and "exit". + +6. The client-side will contain JavaScript event to request callback URL and handle it's response. + +Typicall call-back will respond with JavaScript code that will be evaluated by the Client. This allows the PHP +call-back to decide on-the-spot the correct response action for supplied data. This approach is used to allow +PHP developer to invoke actions without writing custom handlers in the JavaScript. + + +.. php::class Callback + diff --git a/docs/index.rst b/docs/index.rst index eadd4b5f84..53b34de072 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -13,6 +13,7 @@ Contents: template view js + callbacks base-components layouts building-components diff --git a/src/App.php b/src/App.php index 4044a63156..f46d0dffe2 100644 --- a/src/App.php +++ b/src/App.php @@ -70,4 +70,27 @@ public function loadTemplate($name) return $template; } + + /** + * Build a URL that application can use for call-backs + * + * @param array $args List of new GET arguments + * + * @return string + */ + public function url($args = []) + { + $url = $_SERVER["REQUEST_URI"]; + $query = parse_url($url, PHP_URL_QUERY); + + $args = http_build_query($args); + + if ($query) { + $url .= '&'.$args; + } else { + $url .= '?'.$args; + } + + return $url; + } } diff --git a/src/Callback.php b/src/Callback.php new file mode 100644 index 0000000000..212903310d --- /dev/null +++ b/src/Callback.php @@ -0,0 +1,39 @@ +name])) { + return call_user_func_array($callback, $args); + } + return null; + } + + /** + * Return URL that will trigger action on this call-back + * + * @return string + */ + public function getURL() + { + return $this->app->url([$this->name=>'callback']); + } + +} \ No newline at end of file diff --git a/src/View.php b/src/View.php index 5c8b1bec3c..cb78eb6b03 100644 --- a/src/View.php +++ b/src/View.php @@ -478,7 +478,7 @@ public function getHTML() * * @return jQuery */ - public function js($when = null) + public function js($when = null, $extra = null) { $chain = new jQuery($this); @@ -497,6 +497,10 @@ public function js($when = null) $this->_js_actions[$when][] = $chain; + if ($extra) { + $this->_js_actions[$when][] = $extra; + } + return $chain; } @@ -555,8 +559,50 @@ public function on($event, $selector = null, $action = null) if (is_callable($action)) { // if callable $action is passed, then execute ajaxec() - // - throw new Exception('VirtualPage is not yet implemented'); + + // create callback, that will include event as part of the full name + $this->_add($cb = new Callback(), ['desired_name'=>$event]); + + $cb->set(function() use($action) { + $chain = new jQuery(new jsExpression('this')); + $response = $result = call_user_func($action, $chain); + + if($response === $chain) { + $response = null; + } + + $actions = []; + + if ($chain->_chain){ + $actions[] = $chain; + } + + if (!is_array($response)) { + $response = [$response]; + } + + foreach ($response as $r) { + if (is_string($r)) { + $actions[] = new jsExpression("alert([])", [r]); + } elseif ($r instanceof jsExpressionable) { + $actions[] = $r; + } elseif ($r === null) { + continue; + } else { + throw new Exception(['Incorrect callback. Must be string or action.', 'r'=>$r]); + } + } + + + $ajaxec = join(";\n", array_map(function(jQuery $r){ return $r->jsRender(); }, $actions)); + + echo json_encode(['success'=>true, 'message'=>'Hello World', 'eval'=>$ajaxec]); + exit; + }); + + $thisAction->api(['on'=>'now', 'url'=>$cb->getURL(), 'obj'=>new jsExpression('this')]); + + //throw new Exception('VirtualPage is not yet implemented'); /*$url = '.virtualpage->getURL..'; $actions[] = (new jsUniv(new jsExpression('this')))->ajaxec($url, true); diff --git a/src/jQuery.php b/src/jQuery.php index 480a8d87f9..fa690714a9 100644 --- a/src/jQuery.php +++ b/src/jQuery.php @@ -3,17 +3,17 @@ namespace atk4\ui; /** - * Implements mapper for jQuery library. + * Implements mapper for jQuery library. Following mappings are just to keep PhpStorm happy. * * @method jQuery append() * @method jQuery appendTo() * @method jQuery bind() * @method jQuery click() - * @method jQuery on() + * @method jQuery on($a=null,$b=null,$c=null) * @method jQuery attr() * @method jQuery val() * @method jQuery prop() - * @method jQuery data() + * @method jQuery data($a=null,$b=null) * @method jQuery confirm() * @method jQuery submit() * @method jQuery find() @@ -32,10 +32,12 @@ * @method jQuery removeClass() * @method jQuery toggleClass() * @method jQuery position() + * @method jQuery text($t=null) + * @method jQuery html($t=null) * * Extensions by SemanticUI - * @method jQuery form() - * @method jQuery api() + * @method jQuery form($a=null) + * @method jQuery api($a=null) * @method jQuery visibility() */ class jQuery extends jsChain diff --git a/src/jsAPI.php b/src/jsAPI.php new file mode 100644 index 0000000000..03b6fb7f98 --- /dev/null +++ b/src/jsAPI.php @@ -0,0 +1,21 @@ +jsRender(); } - return json_encode($arg); + return $this->_json_encode($arg); }, $args)). ')'; } diff --git a/src/jsExpression.php b/src/jsExpression.php index f7f2797772..8cb505ec49 100644 --- a/src/jsExpression.php +++ b/src/jsExpression.php @@ -61,9 +61,9 @@ function ($matches) use (&$namelessCount) { if (is_object($value) && $value instanceof jsExpressionable) { $value = '('.$value->jsRender().')'; } elseif (is_object($value)) { - $value = json_encode($value->toString()); + $value = $this->_json_encode($value->toString()); } else { - $value = json_encode($value); + $value = $this->_json_encode($value); } return $value; @@ -73,4 +73,84 @@ function ($matches) use (&$namelessCount) { return trim($res); } + + protected function _json_encode($arg) + { + /* + * This function is very similar to json_encode, however it will traverse array + * before encoding in search of jsExpressionable objects. Those would + * be replaced with their jsRendering. + */ + if (is_object($arg)) { + if ($arg instanceof jsExpressionable) { + $r = $arg->jsRender(); + return $r; + } else { + throw new Exception(['Not sure how to represent this object in JSON', 'obj'=>$arg]); + } + } elseif (is_array($arg)) { + $a2 = array(); + // is array associative? (hash) + $assoc = $arg != array_values($arg); + + foreach ($arg as $key => $value) { + $value = $this->_json_encode($value); + $key = $this->_json_encode($key); + if (!$assoc) { + $a2[] = $value; + } else { + $a2[] = $key.':'.$value; + } + } + + if ($assoc) { + $s = '{'.implode(',', $a2).'}'; + } else { + $s = '['.implode(',', $a2).']'; + } + } elseif (is_string($arg)) { + $s = "'".$this->_safe_js_string($arg)."'"; + } elseif (is_bool($arg)) { + $s = json_encode($arg); + } elseif (is_numeric($arg)) { + $s = json_encode($arg); + } elseif (is_null($arg)) { + $s = json_encode($arg); + } else { + throw new Exception(['Unable to json_encode value - unknown type','arg'=>var_export($arg, true)]); + } + + return $s; + } + + public function _safe_js_string($str) + { + $l = strlen($str); + $ret = ''; + for ($i = 0; $i < $l; ++$i) { + switch ($str[$i]) { + case "\r": + $ret .= '\\r'; + break; + case "\n": + $ret .= '\\n'; + break; + case '"': + case "'": + case '<': + case '>': + case '&': + case '\\': + $ret .= '\x'.dechex(ord($str[$i])); + break; + default: + $ret .= $str[$i]; + break; + } + } + + return $ret; + } + + } From 5d950b197af29319dd1a61c6f6356b72c3e48ed9 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 28 Dec 2016 13:14:23 +0000 Subject: [PATCH 040/100] Apply fixes from StyleCI --- demos/button2.php | 9 +++++---- src/App.php | 4 ++-- src/Callback.php | 9 +++------ src/View.php | 13 +++++++------ src/jsAPI.php | 6 ++---- src/jsExpression.php | 7 +++---- 6 files changed, 22 insertions(+), 26 deletions(-) diff --git a/demos/button2.php b/demos/button2.php index 3366a6e3dc..333b50dd05 100644 --- a/demos/button2.php +++ b/demos/button2.php @@ -11,12 +11,12 @@ try { $layout = new \atk4\ui\Layout\App(['template'=>'./templates/layout2.html']); - $layout->js(true, new \atk4\ui\jsExpression("$.fn.api.settings.successTest = function(response) { + $layout->js(true, new \atk4\ui\jsExpression('$.fn.api.settings.successTest = function(response) { if(response && response.eval) { var result = function(){ eval(response.eval); }.call(this.obj); } return false; -}")); +}')); $layout->add(new H2('Basic Button')); @@ -29,8 +29,9 @@ $layout->add(new H2('Callbacks')); $b = $layout->add(new Button(['id'=>'b3']))->set('Callback Test'); - $b->on('click', function($b){ return $b->text(rand(1,20));}); - + $b->on('click', function ($b) { + return $b->text(rand(1, 20)); + }); echo $layout->render(); } catch (\atk4\core\Exception $e) { diff --git a/src/App.php b/src/App.php index f46d0dffe2..4913ebf3cd 100644 --- a/src/App.php +++ b/src/App.php @@ -72,7 +72,7 @@ public function loadTemplate($name) } /** - * Build a URL that application can use for call-backs + * Build a URL that application can use for call-backs. * * @param array $args List of new GET arguments * @@ -80,7 +80,7 @@ public function loadTemplate($name) */ public function url($args = []) { - $url = $_SERVER["REQUEST_URI"]; + $url = $_SERVER['REQUEST_URI']; $query = parse_url($url, PHP_URL_QUERY); $args = http_build_query($args); diff --git a/src/Callback.php b/src/Callback.php index 212903310d..83be968d39 100644 --- a/src/Callback.php +++ b/src/Callback.php @@ -2,7 +2,6 @@ namespace atk4\ui; - use atk4\core\AppScopeTrait; use atk4\core\TrackableTrait; @@ -12,7 +11,7 @@ class Callback use AppScopeTrait; /** - * Executes user-specified action when call-back is triggerde + * Executes user-specified action when call-back is triggerde. * * @param callback $callback * @@ -23,11 +22,10 @@ public function set($callback, $args = []) if (isset($_GET[$this->name])) { return call_user_func_array($callback, $args); } - return null; } /** - * Return URL that will trigger action on this call-back + * Return URL that will trigger action on this call-back. * * @return string */ @@ -35,5 +33,4 @@ public function getURL() { return $this->app->url([$this->name=>'callback']); } - -} \ No newline at end of file +} diff --git a/src/View.php b/src/View.php index cb78eb6b03..37305815b3 100644 --- a/src/View.php +++ b/src/View.php @@ -563,17 +563,17 @@ public function on($event, $selector = null, $action = null) // create callback, that will include event as part of the full name $this->_add($cb = new Callback(), ['desired_name'=>$event]); - $cb->set(function() use($action) { + $cb->set(function () use ($action) { $chain = new jQuery(new jsExpression('this')); $response = $result = call_user_func($action, $chain); - if($response === $chain) { + if ($response === $chain) { $response = null; } $actions = []; - if ($chain->_chain){ + if ($chain->_chain) { $actions[] = $chain; } @@ -583,7 +583,7 @@ public function on($event, $selector = null, $action = null) foreach ($response as $r) { if (is_string($r)) { - $actions[] = new jsExpression("alert([])", [r]); + $actions[] = new jsExpression('alert([])', [r]); } elseif ($r instanceof jsExpressionable) { $actions[] = $r; } elseif ($r === null) { @@ -593,8 +593,9 @@ public function on($event, $selector = null, $action = null) } } - - $ajaxec = join(";\n", array_map(function(jQuery $r){ return $r->jsRender(); }, $actions)); + $ajaxec = implode(";\n", array_map(function (jQuery $r) { + return $r->jsRender(); + }, $actions)); echo json_encode(['success'=>true, 'message'=>'Hello World', 'eval'=>$ajaxec]); exit; diff --git a/src/jsAPI.php b/src/jsAPI.php index 03b6fb7f98..bc579159e8 100644 --- a/src/jsAPI.php +++ b/src/jsAPI.php @@ -3,12 +3,11 @@ * Created by PhpStorm. * User: rw * Date: 28/12/2016 - * Time: 11:31 + * Time: 11:31. */ namespace atk4\ui; - class jsAPI extends jsExpression { public $prefix = ''; @@ -17,5 +16,4 @@ public function __construct($template = '', array $args = []) { parent::__construct($template, $args); } - -} \ No newline at end of file +} diff --git a/src/jsExpression.php b/src/jsExpression.php index 8cb505ec49..9fe7f3bf05 100644 --- a/src/jsExpression.php +++ b/src/jsExpression.php @@ -84,12 +84,13 @@ protected function _json_encode($arg) if (is_object($arg)) { if ($arg instanceof jsExpressionable) { $r = $arg->jsRender(); + return $r; } else { throw new Exception(['Not sure how to represent this object in JSON', 'obj'=>$arg]); } } elseif (is_array($arg)) { - $a2 = array(); + $a2 = []; // is array associative? (hash) $assoc = $arg != array_values($arg); @@ -117,7 +118,7 @@ protected function _json_encode($arg) } elseif (is_null($arg)) { $s = json_encode($arg); } else { - throw new Exception(['Unable to json_encode value - unknown type','arg'=>var_export($arg, true)]); + throw new Exception(['Unable to json_encode value - unknown type', 'arg'=>var_export($arg, true)]); } return $s; @@ -151,6 +152,4 @@ public function _safe_js_string($str) return $ret; } - - } From ebef26dc87cfdfd81e0b661a3bd090fbbdd62b92 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 28 Dec 2016 13:17:21 +0000 Subject: [PATCH 041/100] make _json_encode more compatible with json_encode --- src/jsExpression.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/jsExpression.php b/src/jsExpression.php index 8cb505ec49..ed1e469db6 100644 --- a/src/jsExpression.php +++ b/src/jsExpression.php @@ -109,7 +109,7 @@ protected function _json_encode($arg) $s = '['.implode(',', $a2).']'; } } elseif (is_string($arg)) { - $s = "'".$this->_safe_js_string($arg)."'"; + $s = '"'.$this->_safe_js_string($arg).'"'; } elseif (is_bool($arg)) { $s = json_encode($arg); } elseif (is_numeric($arg)) { From 4d2f1c6416c7545488817f286242b099c4bbe40b Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 3 Jan 2017 10:22:05 +0000 Subject: [PATCH 042/100] I have significantly extended documentation on JavaScript --- docs/index.rst | 9 +- docs/js.rst | 302 +++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 260 insertions(+), 51 deletions(-) diff --git a/docs/index.rst b/docs/index.rst index 53b34de072..77d8c138f7 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -9,12 +9,17 @@ Contents: overview quickstart - core template view js callbacks + + + +.. + base-components + core layouts building-components lister @@ -25,6 +30,8 @@ Contents: virtual-page console + + Indices and tables ================== diff --git a/docs/js.rst b/docs/js.rst index 5d9336056c..d22fe317ff 100644 --- a/docs/js.rst +++ b/docs/js.rst @@ -3,53 +3,174 @@ .. _js: +.. php:namespace: atk4\\ui + ================== JavaScript Mapping ================== -A modern user interface cannot exist without JavaScript. For Agile UI to work, certain views -must be able to bind with JavaScript frameworks. +A modern user interface cannot exist without JavaScript. Agile UI provides you assistance with +generating and executing events directly from PHP and the context of your Views. The most basic +example of such integration would be a button, that hides itself whes clicked:: + + $b = new Button(); + $b->js('click')->hide(); + +Introduction +============ + +Agile UI does not replace JavaScript. It encourages you to keep JavaScript routines as generic +as possible, then associate them with your UI through actions and events. + +A great example would be `jQuery` library. It is designed to be usable with any HTML mark-up and +by specifying selector, you can perform certain actions: + +.. code-block:: js + + $('#my-long-id').hide(); + +Agile UI provides a built-in integration for jQuery. To use jQuery and any other JavaScript library +in Agile UI you need to understand how Action sand Events work. + +Actions +------- + +Action is represented through a PHP object that can map itself into a JavaScript code. For instance +the code for hiding a view can be generated by calling:: + + $action = $view->js()->hide(); + +We used this `hide` method to previously hide the button. There are other ways to generate action, +such as using jsExpression():: + + $action = new jsExpression('alert([])', ['Hello world']); + +Finally, actions can be used inside other actions:: + + + $action = new jsExpression('alert([])', [ + $view->js()->text() + ]); + + // will produce alert($('#button-id').text()); + +or:: + + $action = $view->js()->text(new jsExpression('[] + []', [ + 5, + 10 + ])); + + +All of the mentioned 4 examples will produce a valid "action" object that can be used further. .. important:: We never encourage writing JavaScript logic in PHP. The purpose of JS layer is for binding - events and actions. + events and actions with your generic JavaScript routines. + +Events +------ -One of the most popular JavaScript library - jQuery - uses chaining extensively. Syntax is easy -to understand and write: +Agile UI also offers a great way to associate your actions with certain client-side events. Those +events can be triggered by the user or by other JavaScript code. There are several ways to bind +`$action`. -.. code-block:: js +To execute actions instantly on page load, use `true` as first argument to `js()`:: - $('.mybox').find('button').click(function() { - $('.otherbox').hide(); - }); + $view->js( + true, + new jsExpression('alert([])', ['Hello world'] + ); -In most cases you will be using 3rd party plug-ins to simply initialize stuff or bind events. -If you are looking to build a DropDown view that needs to initialize itself on the JavaScript end -with: +You can also combine both forms together:: -.. code-block:: js + $view->js(true)->hide(); - $('#the-box-id').dropdown(); -the initialization should somehow be embedded inside your own DropDown view. Of course you can hide -piece of JavaScript inside your custom HTML template, but that is a anti-pattern with Agile UI that -tries to streamline all the UI. +Finally, you can specify name of JavaScript event:: + + $view->js('click')->hide(); + +Agile UI also provides support for an `on` event binding. This allows you to apply events on +multiple elements:: + + $buttons = Buttons(); + + $buttons->add(new Button('One')); + $buttons->add(new Button('Two')); + $buttons->add(new Button('Three')); + + $buttons->on('click', '.button')->hide(); + +All the above examples will map themselves into a simple and readable JavaScript code. If you +wish to see what JavaScript code is produced by certain view or it's sub-elements, see :ref:`debugging` + + +Extending +--------- + +Agile UI builds upon the concepts of actions and events in the following ways: + + - Action can be any arbitraty JavaScript with parameters: + - parameters are always escaped with json_encode, + - action can have another nested actions, + - you can build your own integration patterns. + + - jsChain provide Action extension for JavaScript frameworks: + - jQuery is implementation of jQuery binding through jsChain, + - various 3rd party extensions can integrate other frameworks, + - any jQuery plugin will work out-of-the-box. + + - PHP closure can be used to wrap action-generation code: + - Agile UI event will map AJAX call to the event, + - closure can respond with additional actions, + - various UI elements (such as Form) extend this concept further. + +Including JS/CSS +---------------- + +Sometimes you need to include an additional .js or .css file for your code +to work. See :php:meth:`App::includeJS()` and :php:meth:`App::includeCSS()` +for details. + + +Building actions with jsExpressionable +====================================== + + +.. php:interface:: jsExpressionable + + Allow objects of the class implementing this interface to participate in + building JavaScript expressions. + +.. php:method:: jsRender + + Express object as a string containing valid JavaScript statement or expression. + + +:php:class:`View` class implements jsExpressionable and will present itself as a valid selector. Example:: + + $frame = new View(); + + $button->js(true)->appendTo($frame); + + // Resulting code: + // $('#button-id').appendTo('#frame-id'); -Agile UI relies on two important mechanics that makes JavaScript interaction simple. JavaScript Chain Building ------------------------- -.. php:namespace: atk4\\ui .. php:class:: jsChain Base class jsChain can be extended by other classes such as jQuery to provide transparent mappers for any JavaScript framework. Chain is a PHP object that represents one or several actions that are to be executed on the -client side:: +client side. The jsChain objects itself is generic, so in my examples I'll be using jQuery which +is a descendant of jsChain:: $chain = new jQuery('#the-box-id'); @@ -61,7 +182,6 @@ The calls to the chain are stored in the object and can be converted into JavaSc Converts actions recorded in jsChain into string of JavaScript code. - Executing:: echo $chain->jsRender(); @@ -72,6 +192,26 @@ will output: $('#the-box-id').dropdown(); +.. important:: + + It's considered a vary bad practice if you output perform jsRender and output the code manually. Agile UI takes care of + JavaScript binding and also decides which actions should be appearing for you as long as you create actions for your chain. + +.. php:method:: _json_encode + + jsChain will map all the other methods into JS counterparts while encoding all the arguments through _json_encode(). Although + similar to a standard json_encode function, this method recognizes :php:interface:`jsExpressionable` objects and will map + substitute them with the result of :php:meth:`jsExpressionable::jsRender`. The result will not be escaped and any object + implementing jsExpressionable are responsible for safe JavaScript generation. + +The following code is safe:: + + $b = new Button(); + $b->js(true)->text($_GET['button_text']); + +Any malicious input through the GET arguments will be wrapped through json_encode before being included as an +argument to `text()`. + View to JS integration ---------------------- @@ -79,63 +219,118 @@ We are not building JavaScript code just for the excercise. Our whole point is a between actual views. All views support JavaScript binding through two methods: :php:meth:`View::js()` and :php:meth:`View::on()`. .. php:class:: View -.. php:method:: js([$event]) +.. php:method:: js([$event, [$other_action]]) + + Return action chain that targets this view. As event you can specify `true` which will make chain automatically execute + on document ready event. You can specify a specific JavaScript event such as `"click"` or `"mousein"`. You can use your + custom event that you would trigger manually also. If `$event` is false or null, no event binding will be performed. + + If `$other_chain` is specified together with event, it will also be bound to said event. `$other_chain` can also be + a PHP closure. + + + +Several usage cases for plain `js()` method. The most basic scenario is to perform action on the view when event happens:: + + $b1 = new Button('One'); + $b1->js('click')->hide(); + + $b2 = new Button('Two'); + + $b1->js('click', $b2->js('hide')); - Return chain corresponding to the view. .. php:method:: on(String $event, [String selector], $callback = null) Returns chain that will be automatically executed if $event occurs. If $callback is specified, it will also be executed on event. -Calling $button->js() you will get a new jQuery chain object that you can interact with:: +The following code will show 3 buttons and clicking any button will hide itself. Only a single action is created:: - $chain = $form->js()->hide('slow'); + $buttons = Buttons(); -Just on it's own chain will not do anything, so you can use "on" method to bind the action:: + $buttons->add(new Button('One')); + $buttons->add(new Button('Two')); + $buttons->add(new Button('Three')); - $button->on('click', $chain); + $buttons->on('click', '.button')->hide(); -Mechanics of Chains and Binding form a powerful concept, but to make it as powerful as possible, we -have implemented a lot of ways for you to be expressive in the PHP. -Finally I must mention that js() have an argument for event: + // Generates: + // $('#top-element-id').on('click', '.button', function($event){ + // event.stopPropagation(); + // event.preventDefault(); + // $(this).hide(); + // }); -- omitted, false or null - chain will be returned only. -- true - executes chain onDocumentReady -- string (like "click") - specify specific event -So if you want button to hide itself when clicked, this simple syntax can be used:: +Method on() is handy when you have multiple elements inside your view that you want to trigger action individually. +The best example would be a :php:class:`Lister` with interractive elements:: - $button->js('click')->hide(); + $buttons = Buttons(); -More commonly you will want to execute chains onDocumentReady:: + $b1 = $buttons->add(new Button('One')); + $b2 = $buttons->add(new Button('Two')); + $b3 = $buttons->add(new Button('Three')); - $dropdown_field->js(true)->dropdown(); + $buttons->on('click', '.button', $b3->hide()); + // Generates: + // $('#top-element-id').on('click', '.button', function($event){ + // event.stopPropagation(); + // event.preventDefault(); + // $('#b3-element-id').hide(); + // }); -jsExpressionable and jsExpression -================================= +You can use both actions together. The next example will allow only one button to be active:: -.. php:interface:: jsExpressionable + $buttons = Buttons(); - Some of the clases that implement jsExpressionable are: - - - jsExpression - - jsChain - - View + $b1 = $buttons->add(new Button('One')); + $b2 = $buttons->add(new Button('Two')); + $b3 = $buttons->add(new Button('Three')); + $buttons->on('click', '.button', $b3->hide()); + + // Generates: + // $('#top-element-id').on('click', '.button', function($event){ + // event.stopPropagation(); + // event.preventDefault(); + // $('#b3-element-id').hide(); + // }); + + + +jsExpression +============ .. php:class:: jsExpression .. php:method:: __construct(template, args) Returns object that renders into template by substituting args into it. -This interface can be implemented by the object and would mean that this object can be mapped into -a safe JavaScript code. Any other variables will be passed to `json_encode` when they are parts of -expression. +Sometimes you want to execute action by calling a global JavaScript method. For this +and other cases you can use jsExpression:: + + $action = new jsExpression('alert([])', [ + $view->js()->text() + ]); -Compare next two examples:: +Because :php:class:`jsChain` will typically wrap all the arguments through +:php:meth:`jsChain::_json_encode()`, it prevents you from accidentally injecting +a JavaScript code:: + + $b = new Button(); + $b->js(true)->text('2+2'); + +This will result in a button having a label `2+2` instead of having a label `4`. To +get around this, you can use jsExpression:: + + $b = new Button(); + $b->js(true)->text(new jsExpression('2+2')); + +This time `2+2` is no longer escaped and will used as a JS code. Another example +show show you can use global variables:: echo (new jQuery('document'))->find('h1')->hide()->jsRender(); @@ -186,6 +381,10 @@ So the following three lines are identical:: Writing JavaScript code ----------------------- +If you know JavaScript you are likely to write more extensive methods to provide extended +functionality for your user browsers. Agile UI does not attempt to stop you from doing that +but you should follow a proper pattern. + Open a new file `test.js` and type: .. code-block:: js @@ -196,7 +395,10 @@ Open a new file `test.js` and type: }, 0); } -When load this js dependency on your page, then you can use the following chain:: +When load this js dependency on your page. Refer to :php:meth:`App::includeJS()` and +:php:meth:`App::includeCSS()`. Finally use UI code as a "glue" between your routine +and the actual View objects. In my example, I'll be trying to match the size of `$right_container` +with the size of `$left_container`:: $heights = []; From f0ae37d0fb06db6c3c6391e54c4cb4fe747b75a4 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 3 Jan 2017 10:29:39 +0000 Subject: [PATCH 043/100] Solves issue with type conflicts. use defaultTemplate propery to specify template name. --- src/Icon.php | 2 +- src/View.php | 23 +++++++++++++++++------ tests/ButtonTest.php | 2 +- 3 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/Icon.php b/src/Icon.php index d26ded90c1..dcf3c3b438 100644 --- a/src/Icon.php +++ b/src/Icon.php @@ -4,7 +4,7 @@ class Icon extends View { - public $template = 'icon.html'; + public $defaultTemplate = 'icon.html'; public $content = 'circle help'; } diff --git a/src/View.php b/src/View.php index 37305815b3..769e9eb10c 100644 --- a/src/View.php +++ b/src/View.php @@ -67,13 +67,24 @@ class View implements jsExpressionable protected $skin; /** - * Path to template. If you don't specify full path - * by starting with '/' then will be prepended by - * default template path. + * Template object, that, for most Views will be rendered to + * produce HTML output. If you leave this object as "null" then + * a new Template will be generated during init() based on the + * value of $defaultTemplate. * * @var Template */ - public $template = 'element.html'; + public $template = null; + + /** + * Specifies how to initialize $template. + * + * If you specify a string, then it will be considered a filename + * from which to load the $template. + * + * @var string + */ + public $defaultTemplate = 'element.html'; /** * Set static contents of this view. @@ -209,8 +220,8 @@ public function init() $this->initDefaultApp(); } - if (is_string($this->template)) { - $this->template = $this->app->loadTemplate($this->template); + if (is_string($this->defaultTemplate) && is_null($this->template)) { + $this->template = $this->app->loadTemplate($this->defaultTemplate); } } diff --git a/tests/ButtonTest.php b/tests/ButtonTest.php index 93ae96a8ef..e5213384d8 100644 --- a/tests/ButtonTest.php +++ b/tests/ButtonTest.php @@ -23,7 +23,7 @@ public function testButtonIcon() public function testBasicInit() { - $layout = new \atk4\ui\Layout\App(['template'=>'./demos/templates/layout2.html']); + $layout = new \atk4\ui\Layout\App(['defaultTemplate'=>'./demos/templates/layout2.html']); $layout->add(new H2('Basic Button')); $layout->add(new Button())->set('Click me'); From 250ee7994e4fcc767e06aad874ed70f7ed765880 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 3 Jan 2017 10:30:26 +0000 Subject: [PATCH 044/100] Apply fixes from StyleCI --- src/View.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/View.php b/src/View.php index 769e9eb10c..8523417d24 100644 --- a/src/View.php +++ b/src/View.php @@ -80,7 +80,7 @@ class View implements jsExpressionable * Specifies how to initialize $template. * * If you specify a string, then it will be considered a filename - * from which to load the $template. + * from which to load the $template. * * @var string */ From 096a36159de31b4bea28b062f4ae852af4007187 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 3 Jan 2017 10:33:19 +0000 Subject: [PATCH 045/100] Addressed issues mentioned in review: https://github.com/atk4/ui/pull/20 --- src/View.php | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/View.php b/src/View.php index 8523417d24..0d681fbea1 100644 --- a/src/View.php +++ b/src/View.php @@ -239,7 +239,7 @@ protected function initDefaultApp() * In addition to adding a child object, set up it's template * and associate it's output with the region in our template. * - * @param $object View New object to add + * @param View $object New object to add * @param string $region * * @return View @@ -345,6 +345,10 @@ public function addClass($class) */ public function removeClass($remove_class) { + if (is_array($class)) { + $class = implode(' ', $class); + } + $remove_class = explode(' ', $remove_class); $this->class = array_diff($this->class, $remove_class); } From aca5ac025ae2906a71542884624d433c197df6f7 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 3 Jan 2017 10:33:40 +0000 Subject: [PATCH 046/100] Apply fixes from StyleCI --- src/View.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/View.php b/src/View.php index 0d681fbea1..32fd5d4b7c 100644 --- a/src/View.php +++ b/src/View.php @@ -239,7 +239,7 @@ protected function initDefaultApp() * In addition to adding a child object, set up it's template * and associate it's output with the region in our template. * - * @param View $object New object to add + * @param View $object New object to add * @param string $region * * @return View From ccb669b4634c8e2d2e4fdc330eadddf37b7ae01e Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 3 Jan 2017 10:35:19 +0000 Subject: [PATCH 047/100] further cleanups --- src/View.php | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/View.php b/src/View.php index 32fd5d4b7c..d00fdeefad 100644 --- a/src/View.php +++ b/src/View.php @@ -339,18 +339,20 @@ public function addClass($class) /** * Remove one or several CSS classes from the element. * - * @param $remove_class + * @param array|string $class CSS class name or array of class names * - * @internal param array|string $class CSS class name or array of class names + * @return $this */ - public function removeClass($remove_class) + public function removeClass($class) { if (is_array($class)) { $class = implode(' ', $class); } - $remove_class = explode(' ', $remove_class); - $this->class = array_diff($this->class, $remove_class); + $class = explode(' ', $class); + $this->class = array_diff($this->class, $class); + + return $this; } // }}} From 236d65468c2fe6e56716e92f8f2c32673f6c8002 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 3 Jan 2017 10:43:04 +0000 Subject: [PATCH 048/100] Make CodeClimate more happy and ignore complexities --- .codeclimate.yml | 6 ++++++ src/View.php | 2 +- src/jsExpression.php | 24 ++++++++++++------------ 3 files changed, 19 insertions(+), 13 deletions(-) diff --git a/.codeclimate.yml b/.codeclimate.yml index 313d378165..86836596a1 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -26,6 +26,12 @@ engines: enabled: false # methods start with _xx for private methods (that must remain public) Design/WeightedMethodCount: enabled: false # because we solve complex task, our classes may be complex + Design/NpathComplexity: + enabled: false # our code is complex so that your code wouldn't be! + Design/LongMethod: + enabled: false # our code is long so that your code wouldn't be! + CyclomaticComplexity: + enabled: false # our code is complex so that your code wouldn't be! radon: enabled: true ratings: diff --git a/src/View.php b/src/View.php index d00fdeefad..40f7e5b31b 100644 --- a/src/View.php +++ b/src/View.php @@ -582,7 +582,7 @@ public function on($event, $selector = null, $action = null) $cb->set(function () use ($action) { $chain = new jQuery(new jsExpression('this')); - $response = $result = call_user_func($action, $chain); + $response = call_user_func($action, $chain); if ($response === $chain) { $response = null; diff --git a/src/jsExpression.php b/src/jsExpression.php index f8c7852a57..37a2de308b 100644 --- a/src/jsExpression.php +++ b/src/jsExpression.php @@ -83,14 +83,14 @@ protected function _json_encode($arg) */ if (is_object($arg)) { if ($arg instanceof jsExpressionable) { - $r = $arg->jsRender(); + $result = $arg->jsRender(); - return $r; + return $result; } else { throw new Exception(['Not sure how to represent this object in JSON', 'obj'=>$arg]); } } elseif (is_array($arg)) { - $a2 = []; + $array = []; // is array associative? (hash) $assoc = $arg != array_values($arg); @@ -98,30 +98,30 @@ protected function _json_encode($arg) $value = $this->_json_encode($value); $key = $this->_json_encode($key); if (!$assoc) { - $a2[] = $value; + $array[] = $value; } else { - $a2[] = $key.':'.$value; + $array[] = $key.':'.$value; } } if ($assoc) { - $s = '{'.implode(',', $a2).'}'; + $string = '{'.implode(',', $array).'}'; } else { - $s = '['.implode(',', $a2).']'; + $string = '['.implode(',', $array).']'; } } elseif (is_string($arg)) { - $s = '"'.$this->_safe_js_string($arg).'"'; + $string = '"'.$this->_safe_js_string($arg).'"'; } elseif (is_bool($arg)) { - $s = json_encode($arg); + $string = json_encode($arg); } elseif (is_numeric($arg)) { - $s = json_encode($arg); + $string = json_encode($arg); } elseif (is_null($arg)) { - $s = json_encode($arg); + $string = json_encode($arg); } else { throw new Exception(['Unable to json_encode value - unknown type', 'arg'=>var_export($arg, true)]); } - return $s; + return $string; } public function _safe_js_string($str) From 15a20c5cf0124b6feeac8a622548cf003cfc0daa Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 3 Jan 2017 10:48:17 +0000 Subject: [PATCH 049/100] make CodeClimate even happier --- src/jsExpression.php | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/jsExpression.php b/src/jsExpression.php index 37a2de308b..554cea21df 100644 --- a/src/jsExpression.php +++ b/src/jsExpression.php @@ -74,6 +74,14 @@ function ($matches) use (&$namelessCount) { return trim($res); } + /** + * Provides replacement for json_encode that will respect jsExpressionable objects + * and call jsRender() for them instead of escaping. + * + * @param mixed @arg anything + * + * @return string valid JSON expression + */ protected function _json_encode($arg) { /* @@ -124,11 +132,14 @@ protected function _json_encode($arg) return $string; } + /** + * TODO: Escapes the string, but needs a reference to where this code has been from. + */ public function _safe_js_string($str) { - $l = strlen($str); + $length = strlen($str); $ret = ''; - for ($i = 0; $i < $l; ++$i) { + for ($i = 0; $i < $length; ++$i) { switch ($str[$i]) { case "\r": $ret .= '\\r'; From 5bcd74ea7240dcd7ea20d69c1d6f8967c9d59d86 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 3 Jan 2017 10:55:47 +0000 Subject: [PATCH 050/100] Started implementation for forms --- src/Form.php | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/Form.php diff --git a/src/Form.php b/src/Form.php new file mode 100644 index 0000000000..f39db453b4 --- /dev/null +++ b/src/Form.php @@ -0,0 +1,34 @@ +model) { + $this->model = new \atk4\ui\misc\ProxyModel(); + + } + + $this->model->addField(...$args); + } + + + function setLayout($layout) { + $this->layout = $layout; + } + + + +} From c1430bc93d4ac34eb677c17730f6ac49eede956c Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Tue, 3 Jan 2017 11:03:12 +0000 Subject: [PATCH 051/100] Apply fixes from StyleCI --- src/Form.php | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/Form.php b/src/Form.php index f39db453b4..eebe52e78d 100644 --- a/src/Form.php +++ b/src/Form.php @@ -3,32 +3,27 @@ namespace atk4\ui; /** - * Implements a form + * Implements a form. */ - -class Form extends View { - +class Form extends View +{ public $ui = 'form'; public $template = 'form.html'; public $layout = null; - function addField(...$args) + public function addField(...$args) { if (!$this->model) { $this->model = new \atk4\ui\misc\ProxyModel(); - } $this->model->addField(...$args); } - - function setLayout($layout) { + public function setLayout($layout) + { $this->layout = $layout; } - - - } From b3905b42b0cd5321c63dee9a75833a4a40debbde Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 4 Jan 2017 06:33:42 +0000 Subject: [PATCH 052/100] Add implementation for Fields and Dropdowns --- demos/button.php | 2 +- demos/button2.php | 2 +- demos/field.php | 46 ++++++++++++++++ demos/layout.php | 2 +- demos/templates/layout2.html | 2 +- demos/templates/layout2.jade | 6 +- src/Dropdown.php | 17 ++++++ src/Form.php | 51 ++++++++++++++++- src/FormField/Generic.php | 20 +++++++ src/FormField/Input.php | 104 +++++++++++++++++++++++++++++++++++ src/FormField/Line.php | 14 +++++ src/Label.php | 2 +- src/Lister.php | 4 +- src/View.php | 31 +++++++++-- 14 files changed, 288 insertions(+), 15 deletions(-) create mode 100644 demos/field.php create mode 100644 src/Dropdown.php create mode 100644 src/FormField/Generic.php create mode 100644 src/FormField/Input.php create mode 100644 src/FormField/Line.php diff --git a/demos/button.php b/demos/button.php index 28b2b8297d..9af9ec9c57 100644 --- a/demos/button.php +++ b/demos/button.php @@ -12,7 +12,7 @@ use \atk4\ui\View; try { - $layout = new \atk4\ui\Layout\App(['template'=>'./templates/layout2.html']); + $layout = new \atk4\ui\Layout\App(['defaultTemplate'=>'./templates/layout2.html']); $layout->add(new H2('Basic Button')); $layout->add(new Button())->set('Click me'); diff --git a/demos/button2.php b/demos/button2.php index 333b50dd05..3618713784 100644 --- a/demos/button2.php +++ b/demos/button2.php @@ -9,7 +9,7 @@ use \atk4\ui\Template; try { - $layout = new \atk4\ui\Layout\App(['template'=>'./templates/layout2.html']); + $layout = new \atk4\ui\Layout\App(['defaultTemplate'=>'./templates/layout2.html']); $layout->js(true, new \atk4\ui\jsExpression('$.fn.api.settings.successTest = function(response) { if(response && response.eval) { diff --git a/demos/field.php b/demos/field.php new file mode 100644 index 0000000000..51a3933ea5 --- /dev/null +++ b/demos/field.php @@ -0,0 +1,46 @@ +'./templates/layout2.html']); + + $layout->add(new \atk4\ui\H2('Types')); + + $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search'])); + $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search', 'loading'=>true])); + $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search', 'loading'=>'left'])); + $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search', 'icon'=>'search', 'disabled'=>true])); + $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search', 'error'=>true])); + + $layout->add(new \atk4\UI\H2('Icon Variations')); + + $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search users', 'left'=>true, 'icon'=>'users'])); + $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search users', 'icon'=>'circular search link'])); + $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search users', 'icon'=>'inverted circular search link'])); + + $layout->add(new \atk4\UI\H2('Labels')); + + $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search users', 'label'=>'http://'])); + $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Weight', 'rightLabel'=>new \atk4\ui\Label(['kg', 'basic'])])); + + + $dd = new \atk4\ui\Dropdown('.com'); + $dd->setSource(['.com','.net','.org']); + + $layout->add(new \atk4\ui\FormField\Line([ + 'placeholder'=>'Find Domain', + 'rightLabel'=>$dd + ])); + + + echo $layout->render(); +} catch (\atk4\core\Exception $e) { + var_dump($e->getMessage()); + + var_dump($e->getParams()); + var_dump($e->getTrace()); + throw $e; +} diff --git a/demos/layout.php b/demos/layout.php index 7be1fd36b6..b5f83508bc 100644 --- a/demos/layout.php +++ b/demos/layout.php @@ -4,7 +4,7 @@ */ require '../vendor/autoload.php'; -$layout = new \atk4\ui\Layout\App(['template'=>'./templates/layout1.html']); +$layout = new \atk4\ui\Layout\App(['defaultTemplate'=>'./templates/layout1.html']); class Persistence_Faker extends \atk4\data\Persistence { diff --git a/demos/templates/layout2.html b/demos/templates/layout2.html index eeda851216..6e9523e1b0 100644 --- a/demos/templates/layout2.html +++ b/demos/templates/layout2.html @@ -26,7 +26,7 @@
UI Test Layout 2
Basic Examples -
Layout testButton test
+
User-defined LayoutsButton StylingInteractive ButtonsForm Fields
diff --git a/demos/templates/layout2.jade b/demos/templates/layout2.jade index 8fa62e5639..cb6d056601 100644 --- a/demos/templates/layout2.jade +++ b/demos/templates/layout2.jade @@ -30,8 +30,10 @@ html | Basic Examples i.dropdown.icon .menu - a.item(href='layout.php') Layout test - a.item(href='button.php') Button test + a.item(href='layout.php') User-defined Layouts + a.item(href='button.php') Button Styling + a.item(href='button2.php') Interactive Buttons + a.item(href='field.php') Form Fields .ui.main.basic.segment h3 Button Test diff --git a/src/Dropdown.php b/src/Dropdown.php new file mode 100644 index 0000000000..d73633ce8e --- /dev/null +++ b/src/Dropdown.php @@ -0,0 +1,17 @@ +js(true)->dropdown(); + return parent::renderView(); + } + +} diff --git a/src/Form.php b/src/Form.php index f39db453b4..1250bbfeb5 100644 --- a/src/Form.php +++ b/src/Form.php @@ -6,11 +6,11 @@ * Implements a form */ -class Form extends View { +class Form extends View implements ArrayAccess { public $ui = 'form'; - public $template = 'form.html'; + public $defaultTemplate = 'form.html'; public $layout = null; @@ -29,6 +29,53 @@ function setLayout($layout) { $this->layout = $layout; } + /** + * Provided with a Agile Data Model Field, this method have to decide + * and create instance of a View that will act as a form-field. + * + * @return Form\Field\Generic + */ + function fieldFactory(\atk4\data\Field $f) + { + return new FormField\Line($this, $f); + } + + /** + * Associates form with the model but also specifies which of Model + * fields should be added automatically. + * + * If $actualFields are not specified, then all "editable" fields + * will be added. + */ + function setModel(\atk4\data\Model $model, $fields = null) + { + $model = parent::setModel($model); + + // Will not try to populate any fields + if ($fields === false) { + return $model; + } + + if ($fields === null) { + // TODO: $fields = $model->getFields('editable'); + } elseif (is_array($fields)) { + foreach ($fields as $field) { + + $modelField = $model->getElement($field); + + $formField = $this->add($this->fieldFactory($modelField)); + + } + } else { + throw new Exception(['Incorrect value for $fields', 'fields'=>$fields]); + } + + } + + function init() + { + parent::init(); + } } diff --git a/src/FormField/Generic.php b/src/FormField/Generic.php new file mode 100644 index 0000000000..3f9304e9c9 --- /dev/null +++ b/src/FormField/Generic.php @@ -0,0 +1,20 @@ + tag + */ + function getInput() + { + return ''; + } + + /** + * Used only from renderView() + */ + private function prepareRenderLabel($label, $spot) + { + + if (!is_object($label)) { + $label = $this->add(new Label(), $spot) + ->set($label); + } else { + $this->add($label, $spot); + } + + if ($label->ui != 'label') { + $label->addClass('label'); + } + + return $label; + } + + function renderView() + { + + // TODO: I don't think we need the loading state at all. + if ($this->loading) { + if (!$this->icon) { + $this->icon = 'search'; // does not matter, but since + } + + $this->addClass('loading'); + + if($this->loading === 'left') { + $this->addClass('left'); + } + } + + if ($this->icon && !is_object($this->icon)) { + $this->icon = $this->add(new Icon($this->icon), 'AfterInput'); + $this->addClass('icon'); + } + + if ($this->label) { + $this->label = $this->prepareRenderLabel($this->label, 'BeforeInput'); + } + + if ($this->rightLabel) { + $this->rightLabel = $this->prepareRenderLabel($this->rightLabel, 'AfterInput'); + $this->addClass('right'); + } + + if ($this->label || $this->rightLabel) { + $this->addClass('labeled'); + } + + $this->template->setHTML('Input', $this->getInput()); + + parent::renderView(); + + } +} diff --git a/src/FormField/Line.php b/src/FormField/Line.php new file mode 100644 index 0000000000..e6017c2d67 --- /dev/null +++ b/src/FormField/Line.php @@ -0,0 +1,14 @@ +t_row = $this->template->cloneRegion('row'); //$this->t_totals = isset($this->template['totals']) ? $this->template->cloneRegion('totals') : null; @@ -21,6 +21,6 @@ public function render() $this->template->appendHTML('rows', $row_html); } - return $this->template->render(); + return parent::renderView(); //$this->template->render(); } } diff --git a/src/View.php b/src/View.php index 40f7e5b31b..899505196e 100644 --- a/src/View.php +++ b/src/View.php @@ -8,7 +8,6 @@ use atk4\core\ContainerTrait; use atk4\core\InitializerTrait; use atk4\core\TrackableTrait; -use atk4\data\Model; /** * Implements a most core view, which all of the other components descend @@ -125,17 +124,41 @@ public function __construct($defaults = []) * Do not try to create your own "Model" implementation, instead you must be looking for * your own "Persistence" implementation. * - * @param Model $m + * @param \atk4\data\Model $m * * @return Model */ - public function setModel(Model $m) + public function setModel(\atk4\data\Model $m) { $this->model = $m; return $m; } + public function setSource(array $data) + { + $good_data = []; + + foreach($data as $key=>$value) { + if (!is_array($value)) { + $value = ['name'=>$value]; + } + + if (!isset($value['id'])) { + $value['id'] = $key; + } + $good_data[] = $value; + } + $good_data = ['data'=>$good_data]; + + $model = new \atk4\data\Model( + new \atk4\data\Persistence_Array($good_data), 'data' + ); + $model->addField('name'); + + return $this->setModel($model); + } + /** * Called from __consruct() and set() to initialize teh properties. * @@ -244,7 +267,7 @@ protected function initDefaultApp() * * @return View */ - public function add($object, $region = 'Content') + public function add(View $object, $region = 'Content') { if (!$this->app) { $this->init(); From 8957650cb34e6a0ee711105fb163c9942e391999 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 4 Jan 2017 06:36:23 +0000 Subject: [PATCH 053/100] Apply fixes from StyleCI --- demos/button2.php | 1 - demos/field.php | 10 ++++------ src/Dropdown.php | 4 ++-- src/Form.php | 16 +++++----------- src/FormField/Generic.php | 11 ++++------- src/FormField/Input.php | 29 +++++++++++++---------------- src/FormField/Line.php | 10 ++++------ src/View.php | 2 +- 8 files changed, 33 insertions(+), 50 deletions(-) diff --git a/demos/button2.php b/demos/button2.php index 3618713784..2b67664473 100644 --- a/demos/button2.php +++ b/demos/button2.php @@ -6,7 +6,6 @@ use \atk4\ui\Button; use \atk4\ui\Buttons; use \atk4\ui\H2; -use \atk4\ui\Template; try { $layout = new \atk4\ui\Layout\App(['defaultTemplate'=>'./templates/layout2.html']); diff --git a/demos/field.php b/demos/field.php index 51a3933ea5..6f80a0b7d9 100644 --- a/demos/field.php +++ b/demos/field.php @@ -1,6 +1,6 @@ add(new \atk4\ui\FormField\Line(['placeholder'=>'Search users', 'label'=>'http://'])); $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Weight', 'rightLabel'=>new \atk4\ui\Label(['kg', 'basic'])])); - $dd = new \atk4\ui\Dropdown('.com'); - $dd->setSource(['.com','.net','.org']); + $dd->setSource(['.com', '.net', '.org']); $layout->add(new \atk4\ui\FormField\Line([ - 'placeholder'=>'Find Domain', - 'rightLabel'=>$dd + 'placeholder'=> 'Find Domain', + 'rightLabel' => $dd, ])); - echo $layout->render(); } catch (\atk4\core\Exception $e) { var_dump($e->getMessage()); diff --git a/src/Dropdown.php b/src/Dropdown.php index d73633ce8e..eb989d48a9 100644 --- a/src/Dropdown.php +++ b/src/Dropdown.php @@ -8,10 +8,10 @@ class Dropdown extends Lister public $defaultTemplate = 'dropdown.html'; - function renderView() + public function renderView() { $this->js(true)->dropdown(); + return parent::renderView(); } - } diff --git a/src/Form.php b/src/Form.php index 0a3865e617..a76ebc018a 100644 --- a/src/Form.php +++ b/src/Form.php @@ -5,9 +5,8 @@ /** * Implements a form. */ - -class Form extends View implements ArrayAccess { - +class Form extends View implements ArrayAccess +{ public $ui = 'form'; public $defaultTemplate = 'form.html'; @@ -34,7 +33,7 @@ public function setLayout($layout) * * @return Form\Field\Generic */ - function fieldFactory(\atk4\data\Field $f) + public function fieldFactory(\atk4\data\Field $f) { return new FormField\Line($this, $f); } @@ -46,7 +45,7 @@ function fieldFactory(\atk4\data\Field $f) * If $actualFields are not specified, then all "editable" fields * will be added. */ - function setModel(\atk4\data\Model $model, $fields = null) + public function setModel(\atk4\data\Model $model, $fields = null) { $model = parent::setModel($model); @@ -59,22 +58,17 @@ function setModel(\atk4\data\Model $model, $fields = null) // TODO: $fields = $model->getFields('editable'); } elseif (is_array($fields)) { foreach ($fields as $field) { - $modelField = $model->getElement($field); $formField = $this->add($this->fieldFactory($modelField)); - } } else { throw new Exception(['Incorrect value for $fields', 'fields'=>$fields]); } - } - function init() + public function init() { parent::init(); } - - } diff --git a/src/FormField/Generic.php b/src/FormField/Generic.php index 3f9304e9c9..da347710d5 100644 --- a/src/FormField/Generic.php +++ b/src/FormField/Generic.php @@ -2,19 +2,16 @@ namespace atk4\ui\FormField; -use \atk4\ui\Form; -use \atk4\ui\View; +use atk4\ui\Form; +use atk4\ui\View; /** * Provides generic functionality for a form field. */ -class Generic extends View { - - +class Generic extends View +{ /** * @var Form - to which this field belongs */ public $form; - - } diff --git a/src/FormField/Input.php b/src/FormField/Input.php index 6fd0c741bd..1e58ac9156 100644 --- a/src/FormField/Input.php +++ b/src/FormField/Input.php @@ -2,16 +2,15 @@ namespace atk4\ui\FormField; -use \atk4\ui\Form; -use \atk4\ui\View; -use \atk4\ui\Icon; -use \atk4\ui\Label; +use atk4\ui\Form; +use atk4\ui\Icon; +use atk4\ui\Label; /** - * Input element for a form field + * Input element for a form field. */ -class Input extends Generic { - +class Input extends Generic +{ public $ui = 'input'; public $inputType = 'text'; @@ -28,26 +27,25 @@ class Input extends Generic { public $loading = null; /** - * Set to a text + * Set to a text. */ public $label = null; public $rightLabel = null; /** - * returns tag + * returns tag. */ - function getInput() + public function getInput() { return ''; } /** - * Used only from renderView() + * Used only from renderView(). */ private function prepareRenderLabel($label, $spot) { - if (!is_object($label)) { $label = $this->add(new Label(), $spot) ->set($label); @@ -62,18 +60,18 @@ private function prepareRenderLabel($label, $spot) return $label; } - function renderView() + public function renderView() { // TODO: I don't think we need the loading state at all. if ($this->loading) { if (!$this->icon) { - $this->icon = 'search'; // does not matter, but since + $this->icon = 'search'; // does not matter, but since } $this->addClass('loading'); - if($this->loading === 'left') { + if ($this->loading === 'left') { $this->addClass('left'); } } @@ -99,6 +97,5 @@ function renderView() $this->template->setHTML('Input', $this->getInput()); parent::renderView(); - } } diff --git a/src/FormField/Line.php b/src/FormField/Line.php index e6017c2d67..a24d07c97e 100644 --- a/src/FormField/Line.php +++ b/src/FormField/Line.php @@ -2,13 +2,11 @@ namespace atk4\ui\FormField; -use \atk4\ui\Form; -use \atk4\ui\View; +use atk4\ui\Form; /** - * Input element for a form field + * Input element for a form field. */ -class Line extends Input { - - +class Line extends Input +{ } diff --git a/src/View.php b/src/View.php index 899505196e..df79af1554 100644 --- a/src/View.php +++ b/src/View.php @@ -139,7 +139,7 @@ public function setSource(array $data) { $good_data = []; - foreach($data as $key=>$value) { + foreach ($data as $key=>$value) { if (!is_array($value)) { $value = ['name'=>$value]; } From b1429d80340ec2ebb766f4deda7b24cc96946e6b Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 4 Jan 2017 06:40:59 +0000 Subject: [PATCH 054/100] fix bug in 7.0 --- src/Form.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Form.php b/src/Form.php index a76ebc018a..bfa660f30d 100644 --- a/src/Form.php +++ b/src/Form.php @@ -5,7 +5,7 @@ /** * Implements a form. */ -class Form extends View implements ArrayAccess +class Form extends View implements \ArrayAccess { public $ui = 'form'; From d1bc2e347bf7d7d9468e0fa56ce4a82aa17ad173 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 4 Jan 2017 14:59:49 +0000 Subject: [PATCH 055/100] Finished implementation of input field (added all examples from Semantic UI) --- demos/field.php | 67 ++++++++++++++++++++++- src/Button.php | 15 +++++ src/DropdownButton.php | 8 +++ src/FormField/Input.php | 29 ++++++++++ template/semantic-ui/dropdown.html | 9 +++ template/semantic-ui/dropdown.jade | 11 ++++ template/semantic-ui/formfield/input.html | 4 ++ template/semantic-ui/formfield/input.jade | 3 + 8 files changed, 144 insertions(+), 2 deletions(-) create mode 100644 src/DropdownButton.php create mode 100644 template/semantic-ui/dropdown.html create mode 100644 template/semantic-ui/dropdown.jade create mode 100644 template/semantic-ui/formfield/input.html create mode 100644 template/semantic-ui/formfield/input.jade diff --git a/demos/field.php b/demos/field.php index 6f80a0b7d9..5877aaddf3 100644 --- a/demos/field.php +++ b/demos/field.php @@ -24,16 +24,79 @@ $layout->add(new \atk4\UI\H2('Labels')); $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Search users', 'label'=>'http://'])); - $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Weight', 'rightLabel'=>new \atk4\ui\Label(['kg', 'basic'])])); + // dropdown example $dd = new \atk4\ui\Dropdown('.com'); $dd->setSource(['.com', '.net', '.org']); - $layout->add(new \atk4\ui\FormField\Line([ 'placeholder'=> 'Find Domain', 'rightLabel' => $dd, ])); + $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Weight', 'rightLabel'=>new \atk4\ui\Label(['kg', 'basic'])])); + $layout->add(new \atk4\ui\FormField\Line(['label'=>'$', 'rightLabel'=>new \atk4\ui\Label(['.00', 'basic'])])); + + $layout->add(new \atk4\ui\FormField\Line([ + 'leftIcon'=>'tags', + 'rightLabel'=>new \atk4\ui\Label(['Add Tag', 'tag']) + ])); + + + + // left/right corner is not supported, but here is work-around: + $label = new \atk4\ui\Label(); + $label->addClass('left corner'); + $label->add(new \atk4\ui\Icon('asterisk')); + + $layout->add(new \atk4\ui\FormField\Line([ + 'label'=>$label + ]))->addClass('left corner'); + + $label = new \atk4\ui\Label(); + $label->addClass('corner'); + $label->add(new \atk4\ui\Icon('asterisk')); + + $layout->add(new \atk4\ui\FormField\Line([ + 'label'=>$label + ]))->addClass('corner'); + + + $layout->add(new \atk4\ui\H2('Actions')); + + $layout->add(new \atk4\ui\FormField\Line(['action'=>'Search'])); + + $layout->add(new \atk4\ui\FormField\Line(['leftAction'=>new \atk4\ui\Button([ + 'Checkout', 'icon'=>'cart', 'teal' + ])])); + + $layout->add(new \atk4\ui\FormField\Line(['leftIcon'=>'search', 'action'=>'Search'])); + + $dd = new \atk4\ui\DropdownButton(['This Page', 'basic']); + $dd->setSource(['This Organisation', 'Entire Site']); + $layout->add(new \atk4\ui\FormField\Line(['leftIcon'=>'search', 'action'=>$dd])); + + // double actions are not supported but you can add them yoruself + $dd = new \atk4\ui\Dropdown(['Articles', 'compact selection']); + $dd->setSource(['All', ['name'=>'Articles', 'active'=>true], 'Products']); + $layout->add(new \atk4\ui\FormField\Line(['leftIcon'=>'search', 'action'=>$dd])) + ->add(new \atk4\ui\Button('Search'), 'AfterAfterInput'); + + $layout->add(new \atk4\ui\FormField\Line(['action'=>new \atk4\ui\Button([ + 'Copy', 'rightIcon'=>'copy', 'teal' + ])])); + + $layout->add(new \atk4\ui\FormField\Line(['action'=>new \atk4\ui\Button([ + 'icon'=>'search' + ])])); + + + $layout->add(new \atk4\ui\H2('Modifiers')); + + $layout->add(new \atk4\ui\FormField\Line(['icon'=>'search', 'transparent'=>true, 'placeholder'=>'transparent'])); + $layout->add(new \atk4\ui\FormField\Line(['icon'=>'search', 'fluid'=>true, 'placeholder'=>'fluid'])); + + $layout->add(new \atk4\ui\FormField\Line(['icon'=>'search', 'mini'=>true, 'placeholder'=>'mini'])); + echo $layout->render(); } catch (\atk4\core\Exception $e) { var_dump($e->getMessage()); diff --git a/src/Button.php b/src/Button.php index bda729056e..4539c36d5f 100644 --- a/src/Button.php +++ b/src/Button.php @@ -8,6 +8,8 @@ class Button extends View public $icon = null; + public $rightIcon = null; + /** * $icon property will end up a button icon. */ @@ -25,6 +27,19 @@ public function renderView() $this->addClass('icon'); } + if ($this->rightIcon && !is_object($this->rightIcon)) { + $this->rightIcon = $this->add(new Icon($this->rightIcon), 'Content'); + + if ($this->content) { + $this->addClass('right labeled'); + $this->add(new Text($this->content)); + $this->content = false; + } + + $this->addClass('icon'); + } + + parent::renderView(); } diff --git a/src/DropdownButton.php b/src/DropdownButton.php new file mode 100644 index 0000000000..a9ddfb8f39 --- /dev/null +++ b/src/DropdownButton.php @@ -0,0 +1,8 @@ + tag. */ @@ -81,6 +88,12 @@ public function renderView() $this->addClass('icon'); } + if ($this->leftIcon && !is_object($this->leftIcon)) { + $this->leftIcon = $this->add(new Icon($this->leftIcon), 'BeforeInput'); + $this->addClass('left icon'); + } + + if ($this->label) { $this->label = $this->prepareRenderLabel($this->label, 'BeforeInput'); } @@ -94,6 +107,22 @@ public function renderView() $this->addClass('labeled'); } + if ($this->action) { + if (!is_object($this->action)) { + $this->action = new Button($this->action); + } + $this->add($this->action, 'AfterInput'); + $this->addClass('action'); + } + + if ($this->leftAction) { + if (!is_object($this->leftAction)) { + $this->leftAction = new Button($this->leftAction); + } + $this->add($this->leftAction, 'BeforeInput'); + $this->addClass('left action'); + } + $this->template->setHTML('Input', $this->getInput()); parent::renderView(); diff --git a/template/semantic-ui/dropdown.html b/template/semantic-ui/dropdown.html new file mode 100644 index 0000000000..36bdab8c09 --- /dev/null +++ b/template/semantic-ui/dropdown.html @@ -0,0 +1,9 @@ +
+
{$Content}
+
+ {rows} + {row} +
{$name}
+ {/} + {/} +
\ No newline at end of file diff --git a/template/semantic-ui/dropdown.jade b/template/semantic-ui/dropdown.jade new file mode 100644 index 0000000000..b816c760a3 --- /dev/null +++ b/template/semantic-ui/dropdown.jade @@ -0,0 +1,11 @@ +
+ .text {$Content} + i.dropdown.icon + .menu + | {rows} + | {row} + .item + | {$name} + | {/} + | {/} +
diff --git a/template/semantic-ui/formfield/input.html b/template/semantic-ui/formfield/input.html new file mode 100644 index 0000000000..f752fefd36 --- /dev/null +++ b/template/semantic-ui/formfield/input.html @@ -0,0 +1,4 @@ + +
+{$BeforeInput}{$AfterBeforeInput}{Input}{/}{$AfterInput}{$AfterAfterInput} +
\ No newline at end of file diff --git a/template/semantic-ui/formfield/input.jade b/template/semantic-ui/formfield/input.jade new file mode 100644 index 0000000000..84d8f09b26 --- /dev/null +++ b/template/semantic-ui/formfield/input.jade @@ -0,0 +1,3 @@ +|
+| {$BeforeInput}{$AfterBeforeInput}{Input}{/}{$AfterInput}{$AfterAfterInput} +|
From 62f9a7408db7533d8fae8340be6a973f8f0b9507 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 4 Jan 2017 15:29:07 +0000 Subject: [PATCH 056/100] Added form integration --- demos/field.php | 18 ++++---- docs/field.rst | 100 ++++++++++++++++++++++++++++++++++++++++ docs/index.rst | 1 + src/FormField/Input.php | 24 +++++----- 4 files changed, 122 insertions(+), 21 deletions(-) create mode 100644 docs/field.rst diff --git a/demos/field.php b/demos/field.php index 5877aaddf3..a58cc32bb2 100644 --- a/demos/field.php +++ b/demos/field.php @@ -30,15 +30,15 @@ $dd->setSource(['.com', '.net', '.org']); $layout->add(new \atk4\ui\FormField\Line([ 'placeholder'=> 'Find Domain', - 'rightLabel' => $dd, + 'labelRight' => $dd, ])); - $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Weight', 'rightLabel'=>new \atk4\ui\Label(['kg', 'basic'])])); - $layout->add(new \atk4\ui\FormField\Line(['label'=>'$', 'rightLabel'=>new \atk4\ui\Label(['.00', 'basic'])])); + $layout->add(new \atk4\ui\FormField\Line(['placeholder'=>'Weight', 'labelRight'=>new \atk4\ui\Label(['kg', 'basic'])])); + $layout->add(new \atk4\ui\FormField\Line(['label'=>'$', 'labelRight'=>new \atk4\ui\Label(['.00', 'basic'])])); $layout->add(new \atk4\ui\FormField\Line([ - 'leftIcon'=>'tags', - 'rightLabel'=>new \atk4\ui\Label(['Add Tag', 'tag']) + 'iconLeft'=>'tags', + 'labelRight'=>new \atk4\ui\Label(['Add Tag', 'tag']) ])); @@ -65,20 +65,20 @@ $layout->add(new \atk4\ui\FormField\Line(['action'=>'Search'])); - $layout->add(new \atk4\ui\FormField\Line(['leftAction'=>new \atk4\ui\Button([ + $layout->add(new \atk4\ui\FormField\Line(['actionLeft'=>new \atk4\ui\Button([ 'Checkout', 'icon'=>'cart', 'teal' ])])); - $layout->add(new \atk4\ui\FormField\Line(['leftIcon'=>'search', 'action'=>'Search'])); + $layout->add(new \atk4\ui\FormField\Line(['iconLeft'=>'search', 'action'=>'Search'])); $dd = new \atk4\ui\DropdownButton(['This Page', 'basic']); $dd->setSource(['This Organisation', 'Entire Site']); - $layout->add(new \atk4\ui\FormField\Line(['leftIcon'=>'search', 'action'=>$dd])); + $layout->add(new \atk4\ui\FormField\Line(['iconLeft'=>'search', 'action'=>$dd])); // double actions are not supported but you can add them yoruself $dd = new \atk4\ui\Dropdown(['Articles', 'compact selection']); $dd->setSource(['All', ['name'=>'Articles', 'active'=>true], 'Products']); - $layout->add(new \atk4\ui\FormField\Line(['leftIcon'=>'search', 'action'=>$dd])) + $layout->add(new \atk4\ui\FormField\Line(['iconLeft'=>'search', 'action'=>$dd])) ->add(new \atk4\ui\Button('Search'), 'AfterAfterInput'); $layout->add(new \atk4\ui\FormField\Line(['action'=>new \atk4\ui\Button([ diff --git a/docs/field.rst b/docs/field.rst new file mode 100644 index 0000000000..ff0f681766 --- /dev/null +++ b/docs/field.rst @@ -0,0 +1,100 @@ + +.. _field: + +============ +Input Fields +============ + +.. php:namespace:: atk4\ui\FormField + +Agile UI dedicates a separate namespace for the Form Fields. What's common about +the Form Fields is that they have either 'input' or 'select' element inside them +making them perfect for using inside a :php:class:`Form`. + +Field can also be used on it's own like this:: + + $page->add(new \atk4\ui\FormField\Line()); + +There are 3 important classes in FormField namespace that you should be aware of: + + - Generic (abstract, extends View) - Bindings with Form and Models. + - Input (abstract, extends Generic) - HTML-generation capabilities. + - Line, Money, etc (extends Input) - Deal with specific Field Type. + +When you define your Model Fields, the 'type' will be mapped to appropriate FormField +object. Most of those will extend Input, so it makes sense to start by looking +at this class. + +Look and Feel +------------- + +.. php:class: Input + + Implement View for presenting Input fields. Based around http://semantic-ui.com/elements/input.html. + +Similar to other views, Input has various properties that you can specify directly +or inject through constructor. Those properties will affect the look of the input +element. For example, `icon` property: + +.. php:attr: icon +.. php:attr: iconLeft + + Adds icon into the input field. Default - `icon` will appear on the right, while `leftIcon` + will display icon on the left. + +Here are few ways to specify `icon` to an Input:: + + // compact + $page->add(new \atk4\ui\FormField\Line('icon'=>'search')); + + // Type-hinting friendly + $line = new \atk4\ui\FormField\Line(); + $line->icon='search'; + $page->add($line); + + // using class factory + $line->add('FormField/Line', ['icon'=>'search']); + +The 'icon' property can be either string or a View. The string is for convenience and will +be automatically substituted with `new Icon($icon)`. If you wish to be more specifc +and pass some arguments to the icon, there are two options:: + + // compact + $line->icon=['search', 'big']; + + // Type-hinting friendly + $line->icon = new Icon('search'); + $line->icon->addClass('big'); + +To see how Icon interprets `new Icon(['search', 'big'])`, refer to :php:class:`Icon`. + +.. note:: + + View's constructor will match aplpy array into object properties, if they are defined + or addClass() if not. See :php:meth:`View::setProperties` + + +.. php:attr:: placeholder + + Will set placeholder property. + +.. php:attr:: loading + + set to "left" or "right" to display spinning loading indicator + +.. php:attr:: label +.. php:attr:: labelRight + + Cornvert text into :php:class:`Label` and insert it into the field. + +.. php:attr:: action +.. php:attr:: actionLeft + + Cornvert text into :php:class:`Button` and insert it into the field. + +To see various examples of fields and their attributes see `demos/field.php`. + +Integration with Form +--------------------- + +This section explains how Field interracts with the form. diff --git a/docs/index.rst b/docs/index.rst index 77d8c138f7..cba2c8c91d 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -13,6 +13,7 @@ Contents: view js callbacks + field diff --git a/src/FormField/Input.php b/src/FormField/Input.php index 91d3b44a9d..addf9772c5 100644 --- a/src/FormField/Input.php +++ b/src/FormField/Input.php @@ -22,7 +22,7 @@ class Input extends Generic public $icon = null; - public $leftIcon = null; + public $iconLeft = null; /** * Specify left / right. If you use "true" will default to the right side. @@ -34,11 +34,11 @@ class Input extends Generic */ public $label = null; - public $rightLabel = null; + public $labelRight = null; public $action = null; - public $leftAction = null; + public $actionLeft = null; /** * returns tag. @@ -88,8 +88,8 @@ public function renderView() $this->addClass('icon'); } - if ($this->leftIcon && !is_object($this->leftIcon)) { - $this->leftIcon = $this->add(new Icon($this->leftIcon), 'BeforeInput'); + if ($this->iconLeft && !is_object($this->iconLeft)) { + $this->iconLeft = $this->add(new Icon($this->iconLeft), 'BeforeInput'); $this->addClass('left icon'); } @@ -98,12 +98,12 @@ public function renderView() $this->label = $this->prepareRenderLabel($this->label, 'BeforeInput'); } - if ($this->rightLabel) { - $this->rightLabel = $this->prepareRenderLabel($this->rightLabel, 'AfterInput'); + if ($this->labelRight) { + $this->labelRight = $this->prepareRenderLabel($this->labelRight, 'AfterInput'); $this->addClass('right'); } - if ($this->label || $this->rightLabel) { + if ($this->label || $this->labelRight) { $this->addClass('labeled'); } @@ -115,11 +115,11 @@ public function renderView() $this->addClass('action'); } - if ($this->leftAction) { - if (!is_object($this->leftAction)) { - $this->leftAction = new Button($this->leftAction); + if ($this->actionLeft) { + if (!is_object($this->actionLeft)) { + $this->actionLeft = new Button($this->actionLeft); } - $this->add($this->leftAction, 'BeforeInput'); + $this->add($this->actionLeft, 'BeforeInput'); $this->addClass('left action'); } From 0ef7208751c49287521da176ad1320592da8e1f8 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 4 Jan 2017 15:39:26 +0000 Subject: [PATCH 057/100] add demo testing (for coverage primarily) --- tests/ButtonTest.php | 70 -------------------------------------------- tests/DemoTest.php | 36 +++++++++++++++++++++++ 2 files changed, 36 insertions(+), 70 deletions(-) create mode 100644 tests/DemoTest.php diff --git a/tests/ButtonTest.php b/tests/ButtonTest.php index e5213384d8..0813d4ef1e 100644 --- a/tests/ButtonTest.php +++ b/tests/ButtonTest.php @@ -21,74 +21,4 @@ public function testButtonIcon() $b->render(); } - public function testBasicInit() - { - $layout = new \atk4\ui\Layout\App(['defaultTemplate'=>'./demos/templates/layout2.html']); - - $layout->add(new H2('Basic Button')); - $layout->add(new Button())->set('Click me'); - - $layout->add(new H2('Properties')); - - $b1 = new Button(); - $b2 = new Button(); - $b3 = new Button(); - - $b1->set(['Load', 'primary']); - $b2->set(['Load', 'labeled', 'icon'=>'pause']); - $b3->set(['Next', 'right labeled', 'icon'=>'right arrow']); - $layout->add($b1); - $layout->add($b2); - $layout->add($b3); - - $button = new Button(); - $button->set('Click me'); - $button->set(['primary' => true]); - $button->set(['icon'=>'check']); - $button->set(['size big'=>true]); - - $layout->add(new H2('Big Button')); - - $layout->add($button); - - $layout->add(new H2('Button Intent')); - - $b_yes = new Button(['Yes', 'positive basic']); - $b_no = new Button(['No', 'negative basic']); - $layout->add($b_yes); - $layout->add($b_no); - - $layout->add(new H2('Combining Buttons')); - $bar = new Buttons('vertical'); // NOTE: class called Buttons, not Button - $bar->add(new Button(['Play', 'icon'=>'play'])); - $bar->add(new Button(['Pause', 'icon'=>'pause'])); - $bar->add(new Button(['Shuffle', 'icon'=>'shuffle'])); - - $layout->add($bar); - - $layout->add(new H2('Icon Bar')); - $bar = new Buttons('blue big'); - $bar->add(new Button(['icon'=>'file'])); - $bar->add(new Button(['icon'=>['save', 'yellow']])); - $bar->add(new Button(['icon'=>'upload', 'disabled'=>true])); - $layout->add($bar); - - $layout->add(new H2('Forks')); - $forks = new Button(['labeled'=> true]); // Button, not Buttons! - $forks->add(new Button(['Forks', 'blue']))->add(new Icon('fork')); - $forks->add(new Label(['1,048', 'basic blue left pointing'])); - $layout->add($forks); - - $layout->add(new H2('Custom Template')); - $view = new View(['template'=>new Template('Hello, {$tag1}, my name is {$tag2}')]); - - $view->add(new Button('World'), 'tag1'); - $view->add(new Button(['Agile UI', 'blue']), 'tag2'); - - $layout->add($view); - - $result = $layout->render(); - - $this->assertEquals('string', gettype($result)); - } } diff --git a/tests/DemoTest.php b/tests/DemoTest.php new file mode 100644 index 0000000000..963cfc44bd --- /dev/null +++ b/tests/DemoTest.php @@ -0,0 +1,36 @@ +expectOutputRegex($this->regex); + include'button.php'; + } + + public function testFields() + { + $this->expectOutputRegex($this->regex); + include'field.php'; + } +} From 9bbbb1708d7de4a7b4ff7c10f9e2805c9463d8ad Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 4 Jan 2017 15:39:43 +0000 Subject: [PATCH 058/100] Apply fixes from StyleCI --- demos/field.php | 24 ++++++++++-------------- src/Button.php | 1 - src/FormField/Input.php | 3 +-- tests/ButtonTest.php | 6 ------ tests/DemoTest.php | 10 ++++------ 5 files changed, 15 insertions(+), 29 deletions(-) diff --git a/demos/field.php b/demos/field.php index a58cc32bb2..d39956a548 100644 --- a/demos/field.php +++ b/demos/field.php @@ -37,19 +37,17 @@ $layout->add(new \atk4\ui\FormField\Line(['label'=>'$', 'labelRight'=>new \atk4\ui\Label(['.00', 'basic'])])); $layout->add(new \atk4\ui\FormField\Line([ - 'iconLeft'=>'tags', - 'labelRight'=>new \atk4\ui\Label(['Add Tag', 'tag']) + 'iconLeft' => 'tags', + 'labelRight'=> new \atk4\ui\Label(['Add Tag', 'tag']), ])); - - // left/right corner is not supported, but here is work-around: $label = new \atk4\ui\Label(); $label->addClass('left corner'); $label->add(new \atk4\ui\Icon('asterisk')); $layout->add(new \atk4\ui\FormField\Line([ - 'label'=>$label + 'label'=> $label, ]))->addClass('left corner'); $label = new \atk4\ui\Label(); @@ -57,16 +55,15 @@ $label->add(new \atk4\ui\Icon('asterisk')); $layout->add(new \atk4\ui\FormField\Line([ - 'label'=>$label + 'label'=> $label, ]))->addClass('corner'); - $layout->add(new \atk4\ui\H2('Actions')); $layout->add(new \atk4\ui\FormField\Line(['action'=>'Search'])); - $layout->add(new \atk4\ui\FormField\Line(['actionLeft'=>new \atk4\ui\Button([ - 'Checkout', 'icon'=>'cart', 'teal' + $layout->add(new \atk4\ui\FormField\Line(['actionLeft'=> new \atk4\ui\Button([ + 'Checkout', 'icon'=>'cart', 'teal', ])])); $layout->add(new \atk4\ui\FormField\Line(['iconLeft'=>'search', 'action'=>'Search'])); @@ -81,15 +78,14 @@ $layout->add(new \atk4\ui\FormField\Line(['iconLeft'=>'search', 'action'=>$dd])) ->add(new \atk4\ui\Button('Search'), 'AfterAfterInput'); - $layout->add(new \atk4\ui\FormField\Line(['action'=>new \atk4\ui\Button([ - 'Copy', 'rightIcon'=>'copy', 'teal' + $layout->add(new \atk4\ui\FormField\Line(['action'=> new \atk4\ui\Button([ + 'Copy', 'rightIcon'=>'copy', 'teal', ])])); - $layout->add(new \atk4\ui\FormField\Line(['action'=>new \atk4\ui\Button([ - 'icon'=>'search' + $layout->add(new \atk4\ui\FormField\Line(['action'=> new \atk4\ui\Button([ + 'icon'=> 'search', ])])); - $layout->add(new \atk4\ui\H2('Modifiers')); $layout->add(new \atk4\ui\FormField\Line(['icon'=>'search', 'transparent'=>true, 'placeholder'=>'transparent'])); diff --git a/src/Button.php b/src/Button.php index 4539c36d5f..e02283e048 100644 --- a/src/Button.php +++ b/src/Button.php @@ -39,7 +39,6 @@ public function renderView() $this->addClass('icon'); } - parent::renderView(); } diff --git a/src/FormField/Input.php b/src/FormField/Input.php index addf9772c5..02b41d64f7 100644 --- a/src/FormField/Input.php +++ b/src/FormField/Input.php @@ -2,10 +2,10 @@ namespace atk4\ui\FormField; +use atk4\ui\Button; use atk4\ui\Form; use atk4\ui\Icon; use atk4\ui\Label; -use atk4\ui\Button; /** * Input element for a form field. @@ -93,7 +93,6 @@ public function renderView() $this->addClass('left icon'); } - if ($this->label) { $this->label = $this->prepareRenderLabel($this->label, 'BeforeInput'); } diff --git a/tests/ButtonTest.php b/tests/ButtonTest.php index 0813d4ef1e..0003eec5a0 100644 --- a/tests/ButtonTest.php +++ b/tests/ButtonTest.php @@ -3,12 +3,7 @@ namespace atk4\ui\tests; use atk4\ui\Button; -use atk4\ui\Buttons; -use atk4\ui\H2; use atk4\ui\Icon; -use atk4\ui\Label; -use atk4\ui\Template; -use atk4\ui\View; class ButtonTest extends \atk4\core\PHPUnit_AgileTestCase { @@ -20,5 +15,4 @@ public function testButtonIcon() $b = new Button(['Load', 'icon'=>'pause']); $b->render(); } - } diff --git a/tests/DemoTest.php b/tests/DemoTest.php index 963cfc44bd..93548ba7ea 100644 --- a/tests/DemoTest.php +++ b/tests/DemoTest.php @@ -2,10 +2,9 @@ namespace atk4\ui\tests; - /** * Making sure demo pages don't throw exceptions and coverage is - * handled + * handled. */ class DemoTest extends \atk4\core\PHPUnit_AgileTestCase { @@ -19,18 +18,17 @@ public function tearDown() chdir('..'); } - private $regex='/^..DOCTYPE/'; - + private $regex = '/^..DOCTYPE/'; public function testButtons() { $this->expectOutputRegex($this->regex); - include'button.php'; + include 'button.php'; } public function testFields() { $this->expectOutputRegex($this->regex); - include'field.php'; + include 'field.php'; } } From 681506a1def7a2d32b8988f472acff7218054375 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 4 Jan 2017 15:51:05 +0000 Subject: [PATCH 059/100] make codeclimate happier --- .codeclimate.yml | 8 ++++---- src/Lister.php | 4 ++-- src/View.php | 14 +++++++------- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/.codeclimate.yml b/.codeclimate.yml index 86836596a1..286c4a6928 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -10,14 +10,14 @@ engines: phpmd: enabled: true exclude_fingerprints: - - 6f1741a30df682d3e9df65fac222b482 # allow js() method to be 2-character long - - 8eca4c1426fc1508652d90a30744e7fd # allow on() method to be 2-character long - - 8eca4c1426fc1508652d90a30744e7fd # allow $id property to be 2-character long - - 5ea59add5ab787828057bd726957dc99 # allow $id property to be 2-character lond - 908ad3f93985ff14c44615cee6966c72 # View have a lot of public methods. Deal with it. checks: + Naming/ShortVariable: + enabled: false CleanCode/ElseExpression: enabled: false # gives many incorrect suggestions + Design/CouplingBetweenObjects: + enabled: false # because we always allow to inject overrides! Controversial/CamelCaseClassName: enabled: false # because jQuery.php and similar class names Controversial/CamelCasePropertyName: diff --git a/src/Lister.php b/src/Lister.php index 0581369ada..fcc5e456c7 100644 --- a/src/Lister.php +++ b/src/Lister.php @@ -17,8 +17,8 @@ public function renderView() $this->template->del('rows'); foreach ($this->model as $this->current_id => $this->current_row) { - $row_html = $this->t_row->set($this->current_row)->render(); - $this->template->appendHTML('rows', $row_html); + $rowHTML = $this->t_row->set($this->current_row)->render(); + $this->template->appendHTML('rows', $rowHTML); } return parent::renderView(); //$this->template->render(); diff --git a/src/View.php b/src/View.php index df79af1554..42fe75cf4f 100644 --- a/src/View.php +++ b/src/View.php @@ -128,16 +128,16 @@ public function __construct($defaults = []) * * @return Model */ - public function setModel(\atk4\data\Model $m) + public function setModel(\atk4\data\Model $model) { - $this->model = $m; + $this->model = $model; - return $m; + return $model; } public function setSource(array $data) { - $good_data = []; + $goodData = []; foreach ($data as $key=>$value) { if (!is_array($value)) { @@ -147,12 +147,12 @@ public function setSource(array $data) if (!isset($value['id'])) { $value['id'] = $key; } - $good_data[] = $value; + $goodData[] = $value; } - $good_data = ['data'=>$good_data]; + $goodData = ['data'=>$goodData]; $model = new \atk4\data\Model( - new \atk4\data\Persistence_Array($good_data), 'data' + new \atk4\data\Persistence_Array($goodData), 'data' ); $model->addField('name'); From 96ed3bc6892bb2171f660da41bc32dc972f7853c Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 4 Jan 2017 15:57:50 +0000 Subject: [PATCH 060/100] temporarily switched to data:feature/various-cleanups branch --- .codeclimate.yml | 4 +++- composer.json | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/.codeclimate.yml b/.codeclimate.yml index 286c4a6928..6f4cfcfc95 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -13,7 +13,9 @@ engines: - 908ad3f93985ff14c44615cee6966c72 # View have a lot of public methods. Deal with it. checks: Naming/ShortVariable: - enabled: false + enabled: false # because of on() and js() and $ui + Naming/ShortMethodName: + enabled: false # because of on() and js() and $ui CleanCode/ElseExpression: enabled: false # gives many incorrect suggestions Design/CouplingBetweenObjects: diff --git a/composer.json b/composer.json index 0fdaa8f338..97c49b04f5 100644 --- a/composer.json +++ b/composer.json @@ -14,7 +14,7 @@ ], "require": { "php": ">=5.6.0", - "atk4/data": "*", + "atk4/data": "dev-feature/various-cleanups", "facebook/webdriver": "^1.1" }, "require-dev": { From e64eee3800a9a73bc087c27993146122e0ddc319 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 4 Jan 2017 21:55:51 +0000 Subject: [PATCH 061/100] make build process happier --- src/Form.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Form.php b/src/Form.php index bfa660f30d..e2601ddb79 100644 --- a/src/Form.php +++ b/src/Form.php @@ -5,7 +5,7 @@ /** * Implements a form. */ -class Form extends View implements \ArrayAccess +class Form extends View //implements \ArrayAccess - temporarily so that our build script dont' complain { public $ui = 'form'; From 7cbd2b88969443afb6f0c413183b5c6ece3b47bd Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 4 Jan 2017 22:04:46 +0000 Subject: [PATCH 062/100] add more tests through demos --- src/Lister.php | 2 +- tests/DemoTest.php | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/Lister.php b/src/Lister.php index fcc5e456c7..20d743bdd2 100644 --- a/src/Lister.php +++ b/src/Lister.php @@ -7,7 +7,7 @@ class Lister extends View public $t_row = null; public $t_totals = null; - public $template = null; + public $defaultTemplate = null; public function renderView() { diff --git a/tests/DemoTest.php b/tests/DemoTest.php index 93548ba7ea..32df38f49f 100644 --- a/tests/DemoTest.php +++ b/tests/DemoTest.php @@ -31,4 +31,11 @@ public function testFields() $this->expectOutputRegex($this->regex); include 'field.php'; } + + public function testLayout() + { + $this->expectOutputRegex($this->regex); + include 'layout.php'; + } + } From 7ad9b2cb0faac8484a913a4474da9858687041f2 Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Wed, 4 Jan 2017 22:50:55 +0000 Subject: [PATCH 063/100] Resolve rendeering problem with Text --- demos/button.php | 1 + src/Text.php | 2 +- src/View.php | 28 ++++++++++++++++++---------- 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/demos/button.php b/demos/button.php index 9af9ec9c57..4758fc6845 100644 --- a/demos/button.php +++ b/demos/button.php @@ -81,5 +81,6 @@ var_dump($e->getMessage()); var_dump($e->getParams()); + var_dump($e->getTrace()); throw $e; } diff --git a/src/Text.php b/src/Text.php index 1b2fd90210..822acfaa00 100644 --- a/src/Text.php +++ b/src/Text.php @@ -4,7 +4,7 @@ class Text extends View { - public $template = false; + public $defaultTemplate = false; public function render() { diff --git a/src/View.php b/src/View.php index 42fe75cf4f..8731c33690 100644 --- a/src/View.php +++ b/src/View.php @@ -262,26 +262,34 @@ protected function initDefaultApp() * In addition to adding a child object, set up it's template * and associate it's output with the region in our template. * - * @param View $object New object to add - * @param string $region + * @param View $object New object to add + * @param string|array $region (or array for full set of defaults) * * @return View */ - public function add(View $object, $region = 'Content') + public function add(View $object, $region = null) { if (!$this->app) { $this->init(); - //$this->initDefaultApp(); } - /** @var View $object */ - $object = $this->_add($object); + if ($region === null) { + $defaults = ['region' => 'Content']; + } elseif (!is_array($region)) { + $defaults = ['region' => $region]; + } else { + $defaults = $region; + if (isset($defaults[0])) { + $defaults['region'] = $defaults[0]; + unset($defaults[0]); + } + } - $object->region = $region; + $object = $this->_add($object, $defaults); - if (!$object->template) { - $object->template = $this->template->cloneRegion($region); - $this->template->del($region); + if (!$object->template && $object->region) { + $object->template = $this->template->cloneRegion($object->region); + $this->template->del($object->region); } return $object; From 90b0fcecdcf527254563943eea7917ae958d79ca Mon Sep 17 00:00:00 2001 From: Romans Malinovskis Date: Thu, 5 Jan 2017 03:37:23 +0000 Subject: [PATCH 064/100] add first implementatino for form, submission and validation --- demos/form.php | 62 +++++++++++++++++++ demos/templates/layout2.html | 3 +- demos/templates/layout2.jade | 2 + src/Form.php | 54 +++++++++++++++- src/FormField/Generic.php | 2 + src/FormField/Input.php | 2 +- src/FormLayout/Vertical.php | 57 +++++++++++++++++ src/jsCallback.php | 48 ++++++++++++++ template/semantic-ui/form.html | 2 + template/semantic-ui/form.jade | 3 + template/semantic-ui/formlayout/vertical.html | 6 ++ template/semantic-ui/formlayout/vertical.jade | 6 ++ 12 files changed, 242 insertions(+), 5 deletions(-) create mode 100644 demos/form.php create mode 100644 src/FormLayout/Vertical.php create mode 100644 src/jsCallback.php create mode 100644 template/semantic-ui/form.html create mode 100644 template/semantic-ui/form.jade create mode 100644 template/semantic-ui/formlayout/vertical.html create mode 100644 template/semantic-ui/formlayout/vertical.jade diff --git a/demos/form.php b/demos/form.php new file mode 100644 index 0000000000..c36a46a987 --- /dev/null +++ b/demos/form.php @@ -0,0 +1,62 @@ +'./templates/layout2.html']); + + $layout->js(true, new \atk4\ui\jsExpression('$.fn.api.settings.successTest = function(response) { + if(response && response.eval) { + var result = function(){ eval(response.eval); }.call(this.obj); + } + return false; +}')); + + + + $layout->add(new \atk4\ui\H2('DefaultForm')); + + $a = []; + $m = new \atk4\data\Model(new \atk4\data\Persistence_Array($a)); + $m->addField('name'); + $m->addField('email'); + + $f = $layout->add(new \atk4\ui\Form(['segment'=>true])); + $f->setModel($m, ['name','email']); + + $f->onSubmit(function($f){ + return $f->error('name','what that?'); + }); + + $layout->add(new \atk4\ui\H2('Another Form')); + + $a = []; + $m = new \atk4\data\Model(new \atk4\data\Persistence_Array($a)); + $m->addField('name'); + $m->addField('email'); + + + $f = $layout->add(new \atk4\ui\Form(['segment'=>true])); + $f->setModel($m, ['name','email']); + + $f->onSubmit(function($f){ + return $f->error('name','what that?'); + }); + $f->onSubmit(function($f){ + return $f->error('email','what that?'); + }); + + + // + //$field = $f->add(new \atk4\ui\FormField\Line(['placeholder'=>'Enter your name', 'form'=>$f]), null, ['name'=>'test']); + + echo $layout->render(); +} catch (\atk4\core\Exception $e) { + var_dump($e->getMessage()); + + var_dump($e->getParams()); + var_dump($e->getTrace()); + throw $e; +} diff --git a/demos/templates/layout2.html b/demos/templates/layout2.html index 6e9523e1b0..a8bf0d3bdb 100644 --- a/demos/templates/layout2.html +++ b/demos/templates/layout2.html @@ -10,6 +10,7 @@ +