function init()
{
parent::init();
$this->sidebar->destroy();
$this->add('P')->set(htmlspecialchars($_GET['text']));
$this->add('HtmlElement')->setElement('a')->setAttr('href', $this->api->getDestinationURL('../javascript'))->set('Back');
}
function init()
{
parent::init();
$p = $this->add('Doc_View');
$this->api->showExecutionTime();
$p->add('H1')->set('How fast is Agile Toolkit?');
$p->add('HtmlElement')->set('
<h4 style="margin-top: 0px">200 x</h4>
<ol>
<li>Frame</li>
<li>Form</li>
<li>Field line</li>
<li>Field Button</li>
<li>Form jQuery Chain</li>
<li>URL object</li>
<li>12 templates</li>
</ol>
')->addStyle('float', 'right')->addStyle('padding-left', '2em');
$p->add('P')->set('
Agile Toolkit adds minimum overhead to your software. UI layer is highly optimized and shows amazing
performance. Lets demonstrate by putting 200 forms on a page. Each form is an individual object which also
consists of sub-elements such as fields, buttons and a template.
');
// with smlite 3692
// without 1243
// templates = 2449 49 outer, 6 er per form
$p->add('P')->set('
This page rendering required 43 objects and 49 templates. Forms in a test required 6 objects per form and 12
templates per form including the frame. In total it took 3692 objects and on average takes 0.8 seconds to
execute on Amazon AWS instance, around 0.0002 per object. This benchmark should demonstrate both how
efficienc PHP is with objects and how efficiently each object is developed. ');
$p = $this;
$p->add('P')->set('
It must be noted that each form is fully functional, includes validation, uses AJAX for submission and
validation.
');
$this->api->add('Controller_Compat');
$p->add('Doc_Example')->setCode($code = <<<'EOD'
for($i=0;$i<200;$i++){
$f=$p->add('Frame')->setTitle('Form '.$i)->add('Form');
$f->addField('line','name')->validateNotNull();
$f->addSubmit('Greeting');
if($f->isSubmitted()){
$result='Hello, '.$f->get('name');
$f->js()->univ()->alert($result)->execute();
}
}
EOD
);
/*
$this->add('Button')
->set('Next Page')
->js('click')
->univ()->redirect($this->api->getDestinationURL('../javascript'));
*/
}
function init()
{
parent::init();
$this->api->dbConnect();
$p = $this->add('Doc_View');
$p->add('H1')->set('Worth giving a try!');
$p->add('P')->set('
Take a glance at the screencasts next: <a href="/doc/sc">Screencast Section</a>. Go to the <a href="/">main
page</a> and download.
');
$p->add('P')->set('
We are still adding more documentation and help sections, so please give us feedback. If you consider using
Agile Toolkit commercially — you are eligible for a 1-year fully supported free license.
');
$p->add('P')->set('
If you are not a develeoper, but would like to use Agile Toolkit in your project, talk with your team or
choose the team who already familiar with the toolkit.
');
}
function init()
{
parent::init();
$this->api->dbConnect();
$p = $this->add('Doc_View');
$p->add('H1')->set('How does Agile Toolkit Work?');
$p->add('P')->set('
A life of a common web developer requires a deep knowledge of many different libraries, protocols,
frameworks, concepts and paradigms. But what if development platform would be capable of managing all that.
Developers then would be able to focus on UI logic and business logic and get things done much quicker.
');
$p->add('P')->set('
Agile Toolkit is in control of things. While it remains flexible, it introduces a structure for both —
business logic and user interface. Developing with Agile Toolkit is much faster. Are you wondering why?
');
$p = $this;
$p->add('H2')->set('Agile Toolkit is built to be effective!');
$p->add('P')->set('
Without further delay, I\'d like to bring in the first example.
');
$p->add('Doc_Example')->setCode(<<<'EOD'
$f=$p->add('Form');
$f->addField('line','name');
$f->addField('line','surname');
$f->addButton('Button Does nothing');
EOD
);
$p->add('P')->set('
You don\'t even need the know programming to understand what this code does. That\'s the first
major principle of Agile Toolkit — all the code is simple and very intuitive, yet it uses native PHP5
language.
');
$p->add('P')->set('
Did you notice how good form looks? Everything in Agile Toolkit looks great by default. Generic look of all
elements are described in "design theme" through HTML/CSS. One theme comes bundled with Agile Toolkit. Get
started with development and change theme anytime later.
');
$p->add('Quote')->set('
Simple and sufficient. Things just work out of the box. This applies to everything in Agile Toolkit: Views,
Models, Addons. Focus on your goals and Agile Toolkit will take care of the rest.
');
$p->add('H2')->set('Agile Toolkit controls the universe. You control Agile Toolkit');
$p->add('P')->set('
Forms, Lists, Menus, Grids and other Views you will encounter while developing already know how to work
with the database. That is also true for more advanced Views and Add-ons — they all are capable of
interacting with the database.
');
$p->add('P')->set('
Agile Toolkit connects everything. Instead of keeping things separate, it integrates things. Components
rely on each-other to work in the most efficient way.
');
$p->add('P')->set('
Next is an example of a Grid which reads it\'s row contents from the database:
');
$p->add('Doc_Example')->setCode(<<<'EOD'
$f=$p->add('Grid');
$f->addColumn('text','name');
$f->addColumn('text','surname');
$f->setSource('user');
$f->dq->limit(5);
EOD
);
$p->add('P')->set('
Just this small piece of code was sufficient to produce a nice looking table with the data from your
database. What\'s also very important is that components have a built-in security. Data is properly encoded
and validated as it is being exchanged.
');
$p->add('Quote')->set('
Agile Toolkit connects everything. Your UI, database, Models, Cloud services. You tweak the details, but
all the tough work is done in an efficient and secure way without a chance for developer to do introduce a
mistake.
');
$p->add('H2')->set('There are 10 ways to be flexible with Agile Toolkit. Here are three:');
$p->add('P')->set('
Countless products have tried to tie User Interface with the Database at the expense of flexibility. Driven
by a real Web Projects concepts, Agile Toolkit have been <a href="/about/history">refined since 1999</a>.
One of the biggest challenges for the toolkit is the flexibility. Form. How to change its look? How to
rearrange fields? How to put text after the field? How to add new field type? How to add JavaScript or AJAX
or make form without JavaScript at all? Agile Toolkit holds answer for all those questions. (<a
href="/doc/form">The Perfect Form</a>)
');
$p->add('P')->set('
By this point you might think — database tie-in is very in-flexible. Not in Agile Toolkit. All the database
operations are handled through <a href="/doc/dsql">Dynamic Queries</a>. You can change any query in the
system at any time by adding joins, clauses, limits, additional fields or sub-selects.
');
$p->add('P')->set('
Flexibility (or agility) is extremely important and as you become more familiar you will be able to master
new ways.
');
$p->add('Quote')->set('
1. Templates — All Views come with default one. However you can specify different template to any View.
Skin can hold many template variations same view and you can add your own too.
');
$p->add('Quote')->set('
2. Spot — When you use
<span style="color: #0000BB">$f</span><span style="color: #007700">=</span><span style="color: #0000BB">$p</span><span style="color: #007700">-></span><span style="color: #0000BB">add</span><span style="color: #007700">(</span><span style="color: #DD0000">\'Form\'</span><span style="color: #007700">, </span><span style="color: #0000BB">null</span><span style="color: #007700">, </span><span style="color: #DD0000">\'destination_spot\'</span><span style="color: #007700">);</span>
the "destination_spot" defines the placement of your new object. This is placement within the template of
parent View. Typically Views would have many spots to choose.
');
$p->add('Quote')->set('
3. Configure — After you call
<span style="color: #0000BB">add</span><span style="color: #007700">(</span><span style="color: #007700">);</span>
you can still configure your object. There are many things you can change about each copy of the View after
it was created.
');
$t = $p->add('Tabs');
$tab = $t->addTab('Changing Default Template');
$tab->add('P')->set('
In this example, we are still adding the Form, but different form template is used. This can produce a
significantly different HTML. This method is ideal when CSS change is not sufficient.
');
$cols = $tab->add('View_Columns');
$col = $cols->addColumn();
$col->add('H3')->set('Result');
$g = $col->add('Grid', null, null, array('grid_striped'));
$g->addColumn('text', 'gender');
$g->addColumn('text', 'name');
$g->addColumn('text', 'surname');
$g->setSource('user');
$g->dq->limit(5);
$col = $cols->addColumn();
$col->add('H3')->set('Code');
$col->add('Doc_Code')->setDescr(<<<'EOD'
$g=$p->add('Grid',null,null,array('grid_striped'));
$g->addColumn('text','gender');
$g->addColumn('text','name');
$g->addColumn('text','surname');
$g->setSource('user');
$g->dq->limit(5);
EOD
);
$tab = $t->addTab('Choosing the Spot');
$tab->add('P')->set('
This example demonstrates how developer can decide where things appear. Every View can have many useful spots
in it\'s template. Field have "before_field" and "after_field" spots. Example below uses them to put Icon and
Button there.
');
$tab->add('P')->set('
Adding new spots is really easy. Define your own template, and put <?$myspot?> inside. You are done.
');
$tab->add('Doc_Example')->setCode(<<<'EOD'
$f=$p->add('Form');
$f->addField('line','name')
->add('Icon',null,'before_field')
->set('basic-check');
$f->addField('DatePicker','surname')
->add('Button',null,'after_field')
->set('Try me');
EOD
);
$tab = $t->addTab('Chaining');
$tab->add('P')->set('
Adding objects is quick and fast. It merely creates a new copy. By interacting with that object further
you can "configure" it to behave like you want. Like everything else chaining is optional but it allow you to
affect behaviour, appearance of the individual object.
');
$tab->add('Doc_Example')->setCode(<<<'EOD'
$g=$p->add('Grid');
$g->addColumn('text','gender');
$g->addColumn('text','name');
$g->addColumn('text','surname');
$g->setSource('user');
$g->dq->field('length(name)*300.20 - 1000 salary');
$g->addColumn('money','salary');
$g->addTotals();
$g->addPaginator(5);
EOD
);
$this->add('P')->set('
As a bonus — it really matters WHERE you add your View. You can add them into
<span style="color: #0000BB">$api</span>,
<span style="color: #0000BB">$page</span>
or ever another View. You never have to worry about conflicts. Each View is designed to be completely
self-sufficient and work anywhere. Even if you have 2 identical forms on your page, they will know, which one
was submitted.
');
$this->add('H2')->set('AJAX, jQuery w/plugins and a better way to write JavaScript');
$this->add('P')->set('
Are you getting excited? The best part is about to begin. Learn how Agile Toolkit finally binds JavaScript
with your Views
');
$this->add('Button')->set('Next Page')->js('click')->univ()->redirect($this->api->getDestinationURL('../javascript'));
}
function init(){
parent::init();
$this->api->dbConnect();
$p=$this->add('Doc_View');
$p->add('H1')->set('Next Steps');
$p->add('Quote')->set('
The more I\'m seeing about agiletoolkit the more I\'m liking what I see! Will be spending some time with it -
looks quite promising for future developments!
');
$p->add('P')->set('
Agile Toolkit is set out to change the web development. Think about it — it\'s simpler, affordable, promotes
open-source and supports commercial projects. It combines best practices of back-end and front-end
development. It uses second most popular programming language in the world.
');
$p->add('P')->set('
Contribute by spreading the word about Agile Toolkit. Watch out for new releases and documentation updates.
');
$p=$this->add('HtmlElement')->addClass('box metallic');
$p->add('H2')->set('Sample Feedback Form');
$f=$p->add('Form');
$rfr=$f->add('HtmlElement',null,'hint')
->addStyle('float','right')->addStyle('width','300px');
$this->hint=$rfr->add('Hint')
->set('Field-related information will appear here');
//$this->hint->js(true)->css(array('float'=>'right','width'=>'300px'));
$rfr->add('P')->set('What do you think about Agile Toolkit so far?');
$f->addField('line','email','email')
->setFieldHint('optional')
->js('focus',$this->showHint('Newsletter Subscription',
'We would like to ocassionally send you newsletter
containing Agile Toolkit security
updates, new feature highlights and other important information.'));
$f->addField('line','name','Full Name')
->setFieldHint('optional')
->js('focus',$this->showHint('Your Full Name',
'Knowing your name will help us to properly address you in the
newsletters.
'));
$ff=$f->addField('text','feedback')
->set('Your feedback, good or bad, is extremely important to us. Please '.
'type your impressions here, or suggest us how we can improve our site');
$ff->js(true)->closest('dl')->hide();
$ff->js(true)->appendTo($rfr)->css(array('height'=>'200px'));
$ff->js('click')->select();
$f->addField('dropdown','interest','Your Interest')
->setValueList(array(
'dev'=>'Developer',
'busines'=>'Business Owner',
'journalist'=>'Journalist',
'other'=>'Other',
))
->js('focus',$this->showHint('What is your interest in Agile Toolkit?','
Knowing your interest will help us to choose the right lingo and update type
'));
$f->addField('Slider','impact','Impact')
->setLabels('Lifechanging','Minor')
->js('change',$this->showHint('Is Agile Toolkit a big deal?','
Do you think that approach used in Agile Toolkit could become big?
'));
$f->addField('checkbox','proj','try Agile Toolkit in your next project?')
->js('change',$this->showHint('Learning Agile Toolkit is exciting!',
'It takes 1-3 weeks to master Agile Toolkit. '.
'Would you like to give Agile Toolkit a try in your next project?'));
$f->addField('radio','decide','Decision maker')
->setValueList(array(
'me'=>'myself',
'boss'=>'someone else',
))
->js('change',$this->showHint('Who is the decision maker?',
'Are you free to decide which framework to use or will '.
'you need to convince someone else to try Agile Toolkit?'));
$f->addField('checkbox','subscribe','subscribe to Agile Toolkit newsletter')
->set(true);
$f->setSource('intimate');
$f->addSubmit('Proceed');
if($f->isSubmitted()){
if($f->get('subscribe') && $f->get('email')){
// yay subscribe
$c=$this->add('Controller_crm_CampaignMonitor');
$result=$c->addRequest('AddSubscriber')
->set('ListID',$this->api->getConfig('crm/cm/list/atk'))
->set('Email',$f->get('email'))
->set('Name',$f->get('name'))
->process()->result;
}
$f->update();
$f->js()->univ()->location($this->api->getDestinationURL('../tweet'))->execute();
}
$this->add('H3')->set('Source Code');
$this->add('Doc_Code')
->setDescr(<<<'EOT'
$p=$this->add('HtmlElement')->addClass('box metallic');
$p->add('H2')->set('Sample Feedback Form');
$f=$p->add('Form');
$rfr=$f->add('HtmlElement',null,'hint')
->addStyle('float','right')->addStyle('width','300px');
$this->hint=$rfr->add('Hint')
->set('Field-related information will appear here');
//$this->hint->js(true)->css(array('float'=>'right','width'=>'300px'));
$rfr->add('P')->set('What do you think about Agile Toolkit so far?');
$f->addField('line','email','email')
->setFieldHint('optional')
->js('focus',$this->showHint('Newsletter Subscription',
'We would like to ocassionally send you newsletter
containing Agile Toolkit security
updates, new feature highlights and other important information.'));
$f->addField('line','name','Full Name')
->setFieldHint('optional')
->js('focus',$this->showHint('Your Full Name',
'Knowing your name will help us to properly address you in the
newsletters.
'));
$ff=$f->addField('text','feedback')
->set('Your feedback, good or bad, is extremely important to us. Please '.
'type your impressions here, or suggest us how we can improve our site');
$ff->js(true)->closest('dl')->hide();
$ff->js(true)->appendTo($rfr)->css(array('height'=>'200px'));
$ff->js('click')->select();
$f->addField('dropdown','interest','Your Interest')
->setValueList(array(
'dev'=>'Developer',
'busines'=>'Business Owner',
'journalist'=>'Journalist',
'other'=>'Other',
))
->js('focus',$this->showHint('What is your interest in Agile Toolkit?','
Knowing your interest will help us to choose the right lingo and update type
'));
$f->addField('Slider','impact','Impact')
->setLabels('Lifechanging','Minor')
->js('change',$this->showHint('Is Agile Toolkit a big deal?','
Do you think that approach used in Agile Toolkit could become big?
'));
$f->addField('checkbox','proj','try Agile Toolkit in your next project?')
->js('change',$this->showHint('Learning Agile Toolkit is exciting!',
'It takes 1-3 weeks to master Agile Toolkit. '.
'Would you like to give Agile Toolkit a try in your next project?'));
$f->addField('radio','decide','Decision maker')
->setValueList(array(
'me'=>'myself',
'boss'=>'someone else',
))
->js('change',$this->showHint('Who is the decision maker?',
'Are you free to decide which framework to use or will '.
'you need to convince someone else to try Agile Toolkit?'));
$f->addField('checkbox','subscribe','subscribe to Agile Toolkit newsletter')
->set(true);
$f->setSource('intimate');
$f->addSubmit('Proceed');
if($f->isSubmitted()){
if($f->get('subscribe') && $f->get('email')){
// yay subscribe
$c=$this->add('Controller_crm_CampaignMonitor');
$result=$c->addRequest('AddSubscriber')
->set('ListID',$this->api->getConfig('crm/cm/list/atk'))
->set('Email',$f->get('email'))
->set('Name',$f->get('name'))
->process()->result;
}
$f->update();
$f->js()->univ()->location($this->api->getDestinationURL('../tweet'))->execute();
}
EOT
);
}
function init()
{
parent::init();
$p = $this->add('Doc_View');
$p->add('H1')->set('Agile Toolkit and JavaScript');
$p->add('P')->set('
The definition of Web 2.0 requires a site to be interactive and dynamic. jQuery, MooTools and some other
JavaScript libraries transformed the internet and is now a standard. Unfortunately Frameworks and Toolkits
either decide to ignore JavaScript and leave it to advanced developers or bundle their own proprietary JavaScript
libraries.
');
$p->add('P')->set('
Agile Toolkit contains a powerful integration with jQuery — library both popular and pursuing same ideals.
However even through jQuery is controlled by Agile Toolkit — you guessed it! — it is insanely flexible and
simple to use it and extend it.
');
$p = $this;
$this->add('H2')->set('Progressive Enhancement with JavaScript');
$p->add('P')->set('
True to ideals of "Progressive Enhancement" paradygm, all Views in Agile Toolkit will produce
JavaScript-agnostic code. Through the power of jQuery UI and widget factory, default views are enhanced to do
things more dynamically.
');
$e2 = $p->add('Doc_Example');
$p->add('Doc_Example')->setCode($code = <<<'EOD'
$f=$p->add('Form');
$f->addField('line','name')->validateNotNull();
$f->addSubmit('Greeting');
if($f->isSubmitted()){
$result='Hello, '.$f->get('name');
$f->js()->univ()->alert($result)->execute();
$this->api
->redirect('../greeted',
array('text'=>$result));
}
EOD
)->template->trySet('title1', 'Example with JavaScript');
$e2->setCode($code . <<<'EOD'
$f->js_widget=false; // turn JS off
EOD
)->template->trySet('title1', 'Example WITHOUT JavaScript');
$this->add('H2')->set('Transparent jQuery Chains');
$alex = $this->add('Alex')->setAttr('width', 50)->align('left')->js('click')->animate(array('width' => '100'));
$this->add('P')->set('
To breach the gap between Server-side language and Browser-side language Agile Toolkit is using dynamic
catch-all class methods. Calling js() method on any view will return an initialized jQuery_Chain class.
Any subsequent calls to that class are converted into jQuery calls and is included with the page.
');
$this->add('P')->set('
To demonstrate use of this technique, we will need a simple View object. Alex is a View which is
displayed as an image of a pink elephant. Alex has no specific code to support JavaScript or jQuery. Code
below could be used on any View. To see this code in action, click on the elephant located at the start
of this section.
');
$this->add('Doc_Code')->setDescr(<<<'EOT'
$this->add('Alex')->setAttr('width',50)->align('left')
->js('click')->animate(array('width'=>'100'));
EOT
);
// TODO: show source code of Alex
$this->add('H2')->set('Multi-object interaction');
$left = $this->add('Alex')->align('left');
$right = $this->add('Alex');
$left->js('click', $right->js()->animate(array('padding-right' => '+=20px')));
$right->js('click', $left->js()->animate(array('padding-left' => '+=20px')));
$this->add('P')->set('
jQuery_Chain looks carefully at arguments which are passed to it. While strings are properly escaped and
boolean and arrays are properly converted into JavaScript datatypes, Objects receive a special treatment.
Including any other jQuery_Chain will also be reflected as a JavaScript chain. (This principle can be
used to copy value from one field to another).
');
$this->add('P')->set('
If you pass any other view into jQuery Chain it will be transformed into appropriate jQuery selector.
<a href="/doc/jquery">More about jQuery Chains</a>.
');
$this->add('Doc_Code')->setDescr(<<<'EOT'
$left=$this->add('Alex')->align('left'); $right=$this->add('Alex');
$left->js('click',$right->js()->animate(array('padding-right'=>'+=20px')));
$right->js('click',$left->js()->animate(array('padding-left'=>'+=20px')));
EOT
);
$this->add('H2')->set('Avoiding page reloads');
$p->add('Doc_Example')->setCode($code = <<<'EOD'
$b=$p->add('Button')->set('Re-Generate');
$l=$p->add('LoremIpsum')->setLength(1,20);
$b->js('click',$l->js()->reload());
EOD
);
$this->add('P')->set('
Code above couldn\'t be simpler. It\'s beautiful. In case you are wondering, here is how the same effect
is done without Agile Toolkit
<ul>
<li>Regular page is created calling a back-end function for LoremIpsum generation on load</li>
<li>A custom JS code is written and placed into page\'s template.</li>
<li>This custom JS will execute AJAX request to the backend page</li>
<li>Additional backend page is needed to return dynamic requests for more of LoremIpsum</li>
<li>New text for LoremIpsum is encoded with JSON, frontend function handles the decoding</li>
</ul>
General approach is much more complex on many levels, can introduce errors easily, very difficult to
extend and will not work with more complex objects. Seeing how the same is done in Agile Toolkit within 3
lines of code is life-changing
');
$this->add('P')->set('
Reloading in Agile Toolkit is also very extensible and universal. Next example will perform loading of
dynamic elements containing some JS stuff on their own. Open FireBug or Inspector, look under
Net/Resources tab on what kind of data is being sent by server every time you click a button.
');
if ($_GET['t']) {
$this->api->dbConnect();
}
$ex = $p->add('Doc_Example')->setCode($code = <<<'EOD'
$bf=$p->add('Button')->set('Show AJAX Form');
$bg=$p->add('Button')->set('Show AJAX Grid');
$p->add('HR');
$v=$p->add('View');
$bf->js('click',$v->js()
->reload(array('t'=>'form')));
$bg->js('click',$v->js()
->reload(array('t'=>'grid')));
$this->api->stickyGET('t');
switch($_GET['t']){
case 'form':
$f=$v->add('Form');
$f->addField('line','name');
$f->addField('line','surname');
$f->addSubmit();
if($f->isSubmitted()){
$f->js()->univ()
->alert('Thank you, '.$f->get('name').
' '.$f->get('surname'))->execute();
}
break;
case 'grid':
$g=$v->add('Grid');
$g->addColumn('text','name');
$g->addColumn('text','surname');
$g->setSource('user');
$g->addPaginator(5);
break;
default:
$v->add('P')->set('Click the button..');
}
EOD
);
$ex->add('P', null, 'after_example')->set('
<b>Note:</b> This is example with longest code so far. Someone might have told you that using short variable
names is bad. In some cases it is. However the UI logic is exception. Here is why.
');
$ex->add('P', null, 'after_example')->set('
Those short variables are called short-lived variables. Their purpose is to exist for 3-5 lines. General rule is
not to keep definition and use of those variables too spread apart. In this example variable <span style="color:
#0000BB">$f</span> is used for a short period of time. If there is another form being generated after, <span style="color:
#0000BB">$f</span> variable can be re-used again. If you intend to keep variables alive for a longer, then use object properties
instead such as <span style="color: #0000BB">$this->greeting_form</span>.
');
$ex->add('P', null, 'after_example')->set('
Additionally short variables have their own meaning:
<span style="color: #0000BB">$f</span> is for form.
<span style="color: #0000BB">$g</span> is for grid.
<span style="color: #0000BB">$p</span> is for page.
<span style="color: #0000BB">$c</span> is for controller.
You can introduce additional ones as long as they make sense and are very short-lived.
');
$this->add('P')->set('
If you have been following this introduction carefully, then you would understand all of the code in the last
example. Possibly with the exception of <span style="color: #0000BB">$this</span><span style="color: #007700">-></span><span style="color:
#0000BB">api</span><span style="color: #007700">-></span><span style="color: #0000BB">stickyGET</span><span style="color: #007700">(</span><span style="color: #DD0000">\'t\'</span><span style="color: #007700">);</span>. This function affects URL generation by automatically including current value of a GET argument. This way Form and Grid will include value of t= when they communicate over AJAX.
');
$this->add('H2')->set('Consistent Validation for AJAX data');
$this->add('P')->set('
By using generic JSON approach (as described in previous paragraph) you have 2 pages generating the content.
Should you need to perform security checks, you have to add them to both locations. If developer forgets to have
same check in JSON page, it create potential security problem. Agile Toolkit direct AJAX requests to same code,
therefore checks cannot be avoided.
');
$ex = $p->add('Doc_Example')->setCode($code = <<<'EOD'
// Perform security check here, such as
// whecher user have access to this form
$f=$p->add('Form',null,null,array('form_empty'));
$f->addField('line','a','')
->set(2)->setProperty('size',4)
->template->trySet('after_field','+');
$f->addField('line','b','')
->set(3)->setProperty('size',4)
->add('Button',null,'after_field')
->setLabel('=')
->js('click',$f->js()->submit());
$sum=$f->addField('line','sum','')
->setProperty('size',6);
if($f->isSubmitted()){
// If security check above fails, this
// code can't be reached no matter what
$sum->js()
->val($f->get('a')+$f->get('b'))
->execute();
}
EOD
);
$ex->add('P', null, 'after_example')->set('
In Agile Toolkit there are 2 types of AJAX requests. First request returns a chunk of HTML. For simplicity Agile
Toolkit does not bother with XML, JSON or any other formats, a fragment of HTML properly rendered to be placed on
the page is powerful enough.
');
$ex->add('P', null, 'after_example')->set('
Other type of request sends JavaScript instructions which are evaluated by the browser. This is handy when you
don\'t need to reload any part of the page but would rather perform an action of some sort. Forms are using this
approach. This approach is also used by Grid buttons through function univ().ajaxec()
');
$ex->add('P', null, 'after_example')->set('
In this example, when form is submitted, the instructions are being sent back which instruct browser to put a
value inside a field.
');
$this->add('H2')->set('Use of Native JavaScript Functions');
$this->add('P')->set('
No matter how powerful jQuery Chairs are in Agile Toolkit, many things can\'t be done efficiently. Eventually you
will have a need to add jQuery plugins or write your own functions. Agile Toolkit comes with many useful
functions which are all stored in JavaScript library called "univ". This library can be extended with your own
functions or you can create your own library in a similar way. Here is an example which implements simple field
value validation for numeric fields.
');
$ex = $p->add('Doc_Example')->setCode($code = <<<'EOD'
$f=$p->add('Form');
$f->addField('line','numeric')
->js(true)->univ()
->numericField()->disableEnter();
EOD
);
// $j - chain executed on button click
$this->add('H2')->set('Such a sophisticated front-end logic. Is there back-end to match it?');
$this->add('P')->set('
Agile Toolkit is not only about User Interface. It contains Model structure which is on the level with other
frameworks. Of course it is more felxible and more simple to use.
');
$this->add('Button')->set('Next Page')->js('click')->univ()->redirect($this->api->getDestinationURL('../models'));
}
function init()
{
parent::init();
$this->api->dbConnect();
$p = $this->add('Doc_View');
$p->add('H1')->set('Addons which actually help');
$p->add('P')->set('
Not often PHP developers are experienced a true cross-compatibility in software. Because of low requriements
by the base PHP language, many libraries and add-ons are distributed as self-sufficient archives without.
');
$p->add('P')->set('
In other words, each library you use does things in a different way. They don\'t talk or communicate.
They consume huge amount of memory / cpu and often implementing from scratch is a better alternative.
');
$p->add('P')->set('
Another problem which plagues PHP libraries is that they lack support for built-in PHP functions and
technologies such as libxml, libxslt and so on. Agile Toolkit always tries to use built-in features even if
it requires to install additional PHP module.
');
$p = $this;
$this->add('H2')->set('In Agile Toolkit — anything is an addon');
$p->add('P')->set('
Agile Toolkit looks for number of different resources as it is being executed. Those are PHP files, JS files,
images, templates and so on. The job of locating those resources is handled by a component called PathFinder.
');
$this->add('P')->set('
PathFinder contains list of directories containing each type of resource. As developer you can easily extend
Agile Toolkit by adding new directories. This can be done to share some resources between multiple projects
you develop or to attach additional add-ons. For example, in most cases you would want to include support for
Models. This support is optional and is added through addons like this:
');
$p->add('Doc_Code')->setDescr(<<<'EOD'
$this->api->addLocation('atk4-addons',array(
'template'=>'misc/templates',
'php'=>array('mvc',
'billing/lib',
'misc/lib',
)
))
->setParent($this->api->pathfinder->base_location);
EOD
);
$this->add('P')->set('
This code includes "atk4-addons", to find out more about this compliation of addons, <a
href="/develop/addons">visit our addon page</a>. Our current colleciton is quite smoll so we might need YOUR
help to add lots of new cool addons.
');
$this->add('H2')->set('Add-on examples');
$this->add('P')->set('
When add-on is distributed, it includes the actual code, necessary templates, necessary pages or views and
sometimes even documentation pages.
');
$p->add('Doc_Example')->setCode(<<<'EOD'
$this->api->addLocation(
'atk4-addons/misc/templates/js','js')
->setParent($this->api->pathfinder->base_location);
$p->js()->_load('univ.google.map');
$map=$p->add('View_Google_Map');
$map->renderMap(53.35,-6.26);
$map->width=390; $map->height=300;
EOD
);
$this->add('H2')->set('CRUD (Create, Read, Update and Delete)');
$this->add('P')->set('
A built-in CRUD implementation is a must nowdays. Fortunatelly in Agile Toolkit building your own CRUD is
really easy. Still if you don\'t have time to do so, you can use a built-in CRUD view
');
$p->add('Doc_Example')->setCode(<<<'EOD'
$crud=$p->add('CRUD');
$crud->setModel('Employee',
array('name','days_worked','salary'));
if($crud->grid)
$crud->grid->addPaginator(5);
EOD
);
// TODO: add demo of 3rd party auth here as one of the addons
// TODO: show how to integrate with jQuery addons
$this->add('H2')->set('What\'s next ?');
$this->add('P')->set('
Agile Toolkit is a young and very effective framework. Development of any web software is so much simpler.
However Agile Toolkit 4 relies on stable code-base of AModules3 (not publicly released) and is already
powering hundreds of commercial web products.
');
$this->add('Button')->set('Next Page')->js('click')->univ()->redirect($this->api->getDestinationURL('../engage'));
}
function init(){
parent::init();
$this->api->redirect('./start');
}
function init(){
parent::init();
$this->api->dbConnect();
$p=$this->add('Doc_View');
$p->add('H1')->set('Business Logic in Agile Toolkit');
$p->add('P')->set('
Which of the following two is your approach?
');
$c=$p->add('View_Columns');
$col=$c->addColumn(350);
$col->add('H3')->set('Mixed Logic');
$col->add('P')->set('
Website is created as many .php files containing HTML code. Developer puts some PHP snippets inside this
design where he executes SQL queries for fetching data and output dynamic database content using echo.
');
$col=$c->addColumn();
$col->add('H3')->set('Separated Logic');
$col->add('P')->set('
Separate classes is created for Entities (or models) which represent real-world objects. UI logic operates
with those entities instead of accessing database directly.
');
$p->add('P')->set('
Agile Toolkit supports both approaches. However up till now we demonstrated only the "Mixed" approach. Let\'s
look at the benefits of separating business logic from UI.
');
$p=$this;
$this->add('H2')->set('Creation of Models in Agile Toolkit');
$p->add('P')->set('
Model is a representation of a real-world object. "Employee" would be a good example of a model — it
represents a person in real-life which have some properties, such as name, annual salary, as well as methods,
such as
gotoWork(). To make things more interesting let\'s describe another model — Salary. This model represents an
event. It would relate to a single Employee, property of salary would be "amount".
');
$p->add('P')->set('
Like anything else, models in Agile Toolkit are defined as class. For that reason, the beauty of
object-oriented programming grants some nice abilities which can be used inside models. Firstly, models can
inherit each-other. Employee may inherit Person class. Secondly models can contain model-specific methods.
');
$p->add('P')->set('
For further demonstration consider the following model setup:
');
$c=$p->add('View_Columns');
$col=$c->addColumn();
$col->add('H3')->set('Model/Employee.php');
$col->add('Doc_Code')
->setDescr(<<<'EOT'
class Model_Employee extends Model_Person {
function defineFields(){
parent::defineFields();
$this->addField('name')
->mandatory(true);
$this->addField('days_worked')
->system(true)
->datatype('int');
$this->addField('salary')
->mandatory(true)
->datatype('money');
$this->addField('money_owed')
->calculated(true);
}
function gotoWork(){
$this->set('days_worked',
$this->get('days_worked')+1);
return $this;
}
function paySalary(){
$c= $this->add('Model_Salary')
->set('amount',
$this->get('money_owed'))
->set('employee_id',
$this->get('id'))
;
$c->update();
$this->set('days_worked',0)
->update();
return $c;
}
function calculate_money_owed(){
return 'days_worked * salary';
}
}
EOT
);
$col=$c->addColumn();
$col->add('H3')->set('Model/Person.php');
$col->add('Doc_Code')
->setDescr(<<<'EOT'
class Model_Person extends Model_Table {
public $entity_code='person';
public $table_alias='p';
function defineFields(){
parent::defineFields();
$this->addField('name');
}
}
EOT
);
$col->add('H3')->set('Model/Salary.php');
$col->add('Doc_Code')
->setDescr(<<<'EOT'
class Model_Salary extends Model_Table {
public $entity_code='salary';
public $table_alias='s';
function defineFields(){
parent::defineFields();
$this->addField('employee_id')
->refModel('Model_Employee');
$this->addField('pay_date')
->datatype('date')
->defaultValue(date('Y-m-d'));
$this->addField('amount')
->datatype('money');
}
}
EOT
);
$p->add('P')->set('
Implementation of SQL-based models is a very practical approach used in Agile Toolkit. Model_Table implements
functionality to work on per-record basis (active record) but can also be used in multi-record operations
allowing to combine speed and ease of use.
');
$this->add('H2')->set('Interacting with Models Directly');
$p->add('Doc_Code')
->setDescr(<<<'EOT'
$emp=$this->add('Model_Employee');
$emp->set('name','John');
$emp->set('salary',500);
$emp->update();
$emp->gotoWork();
$emp->gotoWork();
$emp->update();
echo $emp->paySalary()
->get('amount');
EOT
)->js(true)->css(array('float'=>'right','width'=>'350px'));
$p->add('P')->set('
Similar how fields are added to Form or columns are added to Grid, Model is populated with fields. Each field
is described by an object capable to store a lot of important information such as caption, type, relation,
reference, default value, validation rules and much more.');
$p->add('P')->set('
Fields can be manipulated with through a number of basic functions present in any model. In this example a
model is created and new record is saved into database through first update().
');
$p->add('P')->set('
Methods of the model can be used to group business logic. Our function gotoWork() contains a logic of what
happens when a person goes to work. Finally after model is updated it needs to be saved into database by
calling update() again.
');
$p->add('P')->set('
The last line illustrate the use of calculated fields. Calculated fields are defined as SQL expressions.
Their value will be calculated every time you load record into model but also after update(). Calculated
fields are often used to incorporate sub-selects or calculations amongst real columns.
');
$p->add('P')->set('
Finally, by calling paySalary() the function will create a new Salary record, link it with the employee and
return Salary model. We are using this to display total amount paid for 2 days of work.
');
$this->add('H2')->set('Using Models with Views');
$p->add('P')->set('
Agile Toolkit is about connectivity, therefore views can interact with models directly. Let\'s create a
form which adds new employee into the database
');
$p->add('Doc_Example')
->setCode($code=<<<'EOD'
$f=$p->add('MVCForm');
$f->setModel('Employee',array('name','salary'));
if($f->isSubmitted()){
$f->update();
$f->js()->univ()
->successMessage('Employee added')
->execute();
}
EOD
);
$p->add('P')->set('
By using setModel() you can specify the model to use as well as which fields you want to appear on the form.
Actually model will initialize intermediate controller which will populate form with fields of proper type.
The benefit of having models is that once you define a model, you can use it in all sorts of controls. Below
is an example of a Grid which is similarly used with the same model
');
$p->add('Doc_Example')
->setCode($code=<<<'EOD'
$g=$p->add('MVCGrid');
$emp=$g->setModel('Employee',
array('name','salary','money_owed'));
$g->addButton('Refresh')
->js('click',$g->js()->reload());
$g->addColumn('delete','delete');
$g->addColumn('button','goto_work');
$g->addPaginator(5);
$g->dq->order('id desc');
if($_GET['goto_work']){
$emp->loadData($_GET['goto_work']);
$emp->gotoWork()->update();
$g->js()->reload()->execute();
}
EOD
);
$p->add('P')->set('
Models can be used with form columns of type "reference". This would show model names in the drop-down
allowing user to pick one. This is yet another way to integrate models with the UI.
');
$p->add('Doc_Example')
->setCode($code=<<<'EOD'
$f=$p->add('Form');
$c=$p->add('Model_Employee');
$f->addField('reference','employee')
->setValueList($c)
->validateNotNull()
->add('Icon',null,'after_field')
->set('arrows-left3')
->addStyle('cursor','pointer')
->js('click',$f->js()
->atk4_form('reloadField','employee'));
$f->addSubmit('Pay Salary');
if($f->isSubmitted()){
$c->loadData($f->get('employee'));
if($c->get('money_owed')<0.01)
$f->showAjaxError('employee',
'Nothing to pay');
$amount=$c->paySalary()
->get('amount');
$f->js()->univ()->successMessage(
'Paid: '.$amount)->execute();
}
EOD
);
$p->add('P')->set('
Finally, lets list all the salaries which have been paid so far.
');
$p->add('Doc_Example')
->setCode($code=<<<'EOD'
$g=$p->add('MVCGrid');
$emp=$g->setModel('Salary',
array('amount','pay_date','employee_id'));
$g->addButton('Refresh')
->js('click',$g->js()->reload());
$g->addColumn('delete','delete');
$g->addPaginator(5);
$g->dq->order('id desc');
EOD
);
$p->add('Quote')->set('
Use Models. Separate business logic from the UI logic. It is always worth it.
<br/><br/>
');
$this->add('H2')->set('Agile Toolkit gets more advanced as you dig in. Too advanced?');
$this->add('P')->set('
Certainly, some of us simply wish to get things done in a simple way. And what can be more simple than
re-using existing solution? Agile Toolkit features a completely new outlook on compatibility between addons.
Continue reading to find out.
');
$this->add('Button')
->set('Next Page')
->js('click')
->univ()->redirect($this->api->getDestinationURL('../addons'));
}