Rapid Application Development using Akeeba FOF

Presented by Tim Plummerwww.timplummer.com.au

WHAT IS RAD?

• RAD = Rapid Application Development• Create apps quickly with very little code

WHAT IS FOF?

• FOF = Framework on Framework• Rapid application development framework for

Joomla• Not standalone – it extends Joomla• Aim to not break backwards compatibility

without a clear deprecation and migration path.

FOF NOW IN JOOMLA 3.2

WHAT IS FOF?

• D.R.Y. – Don’t Repeat Yourself• Uses Bootstrap & jQuery• Web services. Integrated JSON support• Almost RESTful, not entirely• Hierarchical MVC (HMCV)– Include the results of component views anywhere

(other views, other component, modules etc)

WHO MADE FOF?

• Created by Nicholas Dionysopoulos• Now over 23 contributors

KEY DATES

• May 2012 – First public release• June 2012 – Bootstrap & jQuery• March 2013 – XML view templates• September 2013 – Added to Joomla 3.2 alpha

BENEFITS

• Less code = less bugs• Less code = quicker to develop• Automagic stuff to make your life easier

WHERE IS FOF USED?

• By Akeeba products– Akeeba Backup– Admin Tools– Akeeba Subscriptions– Akeeba Ticket System– Akeeba DocImports

• Now in Joomla 3.2– Post Installation Messages

SYSTEM REQUIREMENTS

• Joomla 2.5 or greater• PHP 5.3.1

CONVENTION OVER CONFIGURATION

• Use the FOF naming conventions and you get functionality for free

KEY FEATURES

• Reuse views while respecting template overrides – loadAnyTemplate() allows you to load any view

• Media files overrides – effectively create template overrides for css and js files

• Automatic JSON and CSV in views– Just add format=json or format=csv

• XML-based views– You can mix PHP-based and XML-based templates

MAGIC FIELDS

• Just add to your database table and all these just magically work and implement required functionality– enabled (like state or published)– created_by– created_on (like created)– modified_by– modified_on (like modified)– locked_by (like checked_out)– locked_on (like checked_out_time)– hits

WHY FOF?

• Less than half the files*• Less than half the code*• More functionality• Much lower barrier of entry for new

developer

*based on the example coming up

LET’S LOOK AT HELLO WORLD

com_helloworld part 9http://docs.joomla.org/J2.5:Developing_a_MVC_Component/Adding_backend_actions

NOW WHAT IF WE DID THIS USING FOF?

YELLOW

Bad joke warning

com_yellow (using FOF)

com_helloworld part 9Language Files Lines of code

PHP 19 285

XML 3 89

SQL 2 10

HTML 2 2

Total 26 386

Language Files Lines of codePHP 2 15

XML 6 130

SQL 3 18

HTML 1 1

Total 12 164

com_yellow (using FOF)

TIP 1

• Don’t use Joomla 3.2 beta 1 (it has bugs)

• At this stage, Joomla 3.2 alpha 1 is better for FOF dev

TIP 2

• Clear the cache whenever you change table structure

NOW LET’S MAKE SOMETHING

/administrator/components/com_yellow/sql/install/mysql/install.sqlDATABASE

CREATE TABLE IF NOT EXISTS `#__yellow_items` ( `yellow_item_id` bigint(20) unsigned NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL, `ordering` int(10) NOT NULL DEFAULT '0', `created_by` bigint(20) NOT NULL DEFAULT '0', `created_on` datetime NOT NULL DEFAULT '0000-00-00 00:00:00', `modified_by` bigint(20) NOT NULL DEFAULT '0', `modified_on` datetime NOT NULL DEFAULT '0000-00-00 00:00:00', `locked_by` bigint(20) NOT NULL DEFAULT '0', `locked_on` datetime NOT NULL DEFAULT '0000-00-00 00:00:00', PRIMARY KEY (`yellow_item_id`)) DEFAULT CHARSET=utf8;

component name view name (plural)

view name (singular)id field as per above

magic fields

ENTRY POINT

<?phpdefined('_JEXEC') or die();

// Load FOFinclude_once JPATH_LIBRARIES.'/fof/include.php';if(!defined('FOF_INCLUDED')) {

JError::raiseError ('500', 'FOF is not installed');}

FOFDispatcher::getTmpInstance('com_yellow')->dispatch();

component name

/administrator/components/com_yellow/yellow.php

DISPATCHER

<?xml version="1.0" encoding="UTF-8"?><fof>

<backend><dispatcher>

<option name="default_view">items</option></dispatcher>

</backend></fof>

/administrator/components/com_yellow/fof.xml

default view

INSTALLATION XML

• Aka XML Manifest• Just like normal Joomla component

CONFIG

<?xml version="1.0" encoding="UTF-8"?><config>

<fieldsetname="permissions"label="JCONFIG_PERMISSIONS_LABEL"description="JCONFIG_PERMISSIONS_DESC">

<fieldname="rules"type="rules"label="JCONFIG_PERMISSIONS_LABEL"class="inputbox"filter="rules"component="com_yellow"section="component" />

</fieldset></config>

/administrator/components/com_yellow/config.xml

component name

ACCESS

<?xml version="1.0" encoding="utf-8"?><access component="com_yellow">

<section name="component"><action name="core.admin" title="JACTION_ADMIN"

description="JACTION_ADMIN_COMPONENT_DESC" /><action name="core.manage" title="JACTION_MANAGE"

description="JACTION_MANAGE_COMPONENT_DESC" /><action name="core.create" title="JACTION_CREATE"

description="JACTION_CREATE_COMPONENT_DESC" /><action name="core.delete" title="JACTION_DELETE"

description="JACTION_DELETE_COMPONENT_DESC" /><action name="core.edit" title="JACTION_EDIT"

description="JACTION_EDIT_COMPONENT_DESC" /><action name="core.edit.state" title="JACTION_EDITSTATE"

description="JACTION_EDITSTATE_COMPONENT_DESC" /></section>

</access>

/administrator/components/com_yellow/access.xml

component name

LIST VIEW

Refer to live demo, couldn’t fit all the code on this page

<header name="title" type="fieldsearchable" sortable="true"buttons="yes" buttonclass="btn"

/>

<field name="title" type="text"show_link="true"url="index.php?option=com_yellow&amp;view=item&amp;id=[ITEM:ID]"empty_replacement="(no title)"

/>

/administrator/components/com_yellow/views/items/tmpl/form.default.xml

FORM

<?xml version="1.0" encoding="utf-8"?><form

validate="true">

<fieldset name="basic_configuration"label="COM_YELLOW_ITEMS_GROUP_BASIC"description="COM_YELLOW_ITEMS_GROUP_BASIC_DESC"class="span6"

><field name="title" type="text"

class="inputbox"label="COM_YELLOW_ITEMS_FIELD_TITLE"labelclass="yellow-label yellow-label-main"required="true"size="50"

/></fieldset>

</form>

/administrator/components/com_yellow/views/item/tmpl/form.form.xml

ADD ENABLED

• enabled (aka state or published)• ALTER TABLE jos_yellow_items ADD `enabled`

tinyint(3) NOT NULL DEFAULT '1';/administrator/components/com_yellow/views/items/tmpl/form.default.xml• <header name="enabled" type="published" sortable="true"

tdwidth="8%" />• <field name="enabled" type="published"/>

ADD ENABLED

• Notice the filter has been automatically added

ADD ENABLED

/administrator/components/com_yellow/views/item/tmpl/form.form.xml<field name="enabled" type="list" label="JSTATUS"

labelclass="hello-label"description="JFIELD_PUBLISHED_DESC" class="inputbox"filter="intval" size="1" default="1"

><option value="1">JPUBLISHED</option><option value="0">JUNPUBLISHED</option>

</field>

ADD ENABLED

ADD FIELD TO FORM

• ALTER TABLE jos_yellow_items ADD `country` varchar(255) NOT NULL;

• /administrator/components/com_yellow/views/item/tmpl/form.form.xml

<field name="country" type="text"description="COM_YELLOW_FIELD_COUNTRY_DESC"label="COM_YELLOW_FIELD_COUNTRY_LABEL"required="true"class="inputbox"size="60"/>

ADD FIELD TO FORM

• /administrator/language/en-GB/en-GB.com_yellow.ini

• COM_YELLOW_FIELD_COUNTRY_DESC="What country is this greeting for? "

• COM_YELLOW_FIELD_COUNTRY_LABEL="Country"

NOW FOR SOME COOL STUFF

CSV FORMAT

• Append &format=csv to any view

JSON FORMAT

• Append &format=json to any view• /administrator/index.php?

option=com_yellow&format=json• [{"yellow_item_id":"1","title":"Hello World!","slug":"hello-

world","ordering":"0","created_by":"857","created_on":"2013-10-13 07:04:35","modified_by":"857","modified_on":"2013-10-13 08:36:13","locked_by":"857","locked_on":"2013-10-13 08:44:12","enabled":"1","country":"Australia"},{"yellow_item_id":"2","title":"Good bye World!","slug":"good-bye-world","ordering":"0","created_by":"857","created_on":"2013-10-13 07:26:43","modified_by":"0","modified_on":"0000-00-00 00:00:00","locked_by":"0","locked_on":"0000-00-00 00:00:00","enabled":"1","country":""}]

MIX AND MATCH PHP WITH XML

• /administrator/components/com_yellow/views/items/tmpl/default.php

<?phpdefined('_JEXEC') or die();

$viewTemplate = $this->getRenderedForm();echo $viewTemplate;

echo '<div class="span12">If you like this extension, please leave a rating and review on the <a href="http://extensions.joomla.org/">JED</a>';

This bit loads the XML file

MIX AND MATCH PHP WITH XML

MEDIA FILES OVERRIDES

/administrator/components/com_yellow/views/items/tmpl/form.default.xml<?xml version="1.0" encoding="utf-8"?><form

lessfiles="media://com_yellow/css/backend.less||media://com_yellow/css/backend.css"

type="browse"show_header="1"show_filters="1"show_pagination="1"norows_placeholder="COM_YELLOW_COMMON_NORECORDS"

>

MEDIA FILES OVERRIDES

/media/com_yellow/css/backend.css.span12{

color: #CCCCCC;}

/administrator/templates/isis/media/com_yellow/css/backend.css.span12{

color: #FF00FF;}

Not the HTML folder

SIDEBAR MENU

• Built automatically based on views• In alphabetical order by default, or you can specify the order by

adding /administrator/components/com_yellow/views/blah/metadata.xml

<?xml version="1.0" encoding="utf-8"?><metadata><foflib><ordering>4</ordering></foflib><view title="COM_YELLOW_VIEW_BLAH_TITLE"><message><![CDATA[COM_YELLOW_VIEW_BLAH_DESC]]></message></view></metadata>

SIDEBAR MENU

• Hide view by adding blank file skip.xml/administrator/components/com_yellow/views/blah/skip.xml

VERSION SPECIFIC VIEW OVERRIDES

• FOF will automatically search for view template files (or XML forms) suffixed with the Joomla! version family or version number

• Joomla! 2.5– default.j25.php, default.j2.php and default.php

• Joomla! 3.2– default.j32.php, default.j3.php and default.php

• Also applies to XML forms– form.default.j25.xml, form.default.j2.xml

Demo time…

Now you are ready to start creating your own components with FOF

QUESTIONS

RESOURCES

• https://groups.google.com/forum/#!forum/frameworkonframework