Rapid Application Development using Akeeba FOF

Presented by Tim Plummer

www.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 9

http://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 code

PHP 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.sql

DATABASE

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

<?php

defined('_JEXEC') or die();

// Load FOF

include_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

<?php

defined('_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