How JS layer works in ATK
Half year ago we have introduced jQuery / Chain into amodules3. It allows us to clean up a lot of older code and at the same time give developers a way to do many new things in a flexible way.
How things were before?
Library was called amodules3.js. To rely on those functions form got support for “onclick”, and so did buttons. That was very clumsy.
All the JS framework was redesigned. The new approach was meant to work only through IDs. Here is what we did:
- added <…id=> to all view elements such as grid, form etc.
- made jQuery mandatory for JS support
- all the interactions were done through binding $(…).click(). and so on.
So now when page or part of the page is being generated through render(), it also puts together list of js-actions to perform on those elements.
Basic approach and PHP integration.
We have added class jQuery_Chain which was implementing a layer of transparency between PHP and JS by using __call handler. In shorts user could write $this->js()->any()->method()->calls(); to jQuery chain and they would be translated into a valid jQuery chain: $(..).any().method().calls().
Additionally this gave us layer of security because all the arguments are properly encoded through json. You can’t sneak a piece of JS code through the argument.
We introduced a way how JS developers can add their own functions to univ() class thus giving a very easy way to add extra functions which can be easily called from within PHP. Some good examples of standard functions are
$button->js(‘click’)->univ()->dialogURL(‘Add new item’,$this->api->getDestinationURL(‘./add’));
but also a custom functions are quite useful:
Any view element can use js() method to produce new JS chain. First argument to the function is event when chain should be executed. js(true) would always be executed (but only!!) if element is visible. js() – default action will not execute chain automatically. Then you can use multitude of custom events such as js(‘click’), or js(‘hover’) or even js(‘my_own_event’), which you can execute for through jQuery trigger().
Resulting code will tell text to reload when button is clicked. You can also use chains to get values such as:
return $button->js(‘click’)->univ()->alert( $form->getElement(‘name’)->js()->val() );
Code above will display alert message containing current value of form field in it.
Two types of AJAX requests
ATK do not burden developers with complex protocols. There are only two ways how AJAX requests are been passed.
- regions – Request to load part of the page. Typically complimented by arguments such as cut_region, cut_object or cut_page. Region would contain valid piece of HTML code, but will also contain <script> tag which have to be properly executed by ajax function doing the request. atk4_load() and univ().page() would typically be sending this kind of request.
You have to be aware what type of request you will be receiving. If you are supposed to return js-code you should do so through the following construction:
The final function execute() will echo the chain and will stop execution of PHP script. This is typically done to produce decision quickly and do not waste too much time on generating reply.
To be continued…
4 Comments »
- You have missed few posts!
- ATK4 Blog moved to its own domain. Please update.
- Checking password strength with CrackLib
- Creating beautiful URLs with Agile Toolkit
- Security model
- New features of DB and dsql planned for ATK 4.0
- Lightweight CMS in ATK (video)
- Symfony 2.0 vs ATK3.8 – part 5 – Architecture and beyond
- Symfony 2.0 vs ATK3.8 – part 4 – Bundles, Users, DB
- Symfony 2.0 vs ATK3.8 – part 3 – The Controller
- Symfony 2.0 vs ATK3.8 – part 2 – The View