Presented at JoomlaDay Sydney 2013, Tim Plummer introduces you to Akeeba FOF which is now included in Joomla 3.2

1. Rapid Application Development
using Akeeba FOF
Presented by Tim Plummer
www.timplummer.com.au

2. WHAT IS RAD?
• RAD = Rapid Application Development
• Create apps quickly with very little code

3. 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.

4. FOF NOW IN JOOMLA 3.2

5. 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)

6. WHO MADE FOF?
• Created by Nicholas Dionysopoulos
• Now over 23 contributors

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

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

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

10. SYSTEM REQUIREMENTS
• Joomla 2.5 or greater
• PHP 5.3.1

11. CONVENTION OVER
CONFIGURATION
• Use the FOF naming conventions and you get
functionality for free

12. 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

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

14. 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

15. LET’S LOOK AT HELLO WORLD

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

17. NOW WHAT IF WE DID THIS
USING FOF?
Bad joke warning
YELLOW

18. com_yellow (using FOF)

19. com_helloworld part 9
Language
Files
Lines of code
PHP
19
285
XML
3
89
SQL
2
10
HTML
2
2
Total
26
386
com_yellow (using FOF)
Language
Files
Lines of code
PHP
2
15
XML
6
130
SQL
3
18
HTML
1
1
Total
12
164

20. 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

21. TIP 2
• Clear the cache whenever you change table
structure

22. NOW LET’S MAKE SOMETHING

23. DATABASE
/administrator/components/com_yellow/sql/install/mysql/install.sql
component name
view name (plural)
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',
magic `modified_by` bigint(20) NOT NULL DEFAULT '0',
fields `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;
id field as per above
view name (singular)

24. ENTRY POINT
/administrator/components/com_yellow/yellow.php
<?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

25. DISPATCHER
/administrator/components/com_yellow/fof.xml
<?xml version="1.0" encoding="UTF-8"?>
<fof>
<backend>
<dispatcher>
<option name="default_view">items</option>
</dispatcher>
</backend>
default view
</fof>

26. INSTALLATION XML
• Aka XML Manifest
• Just like normal Joomla component

27. CONFIG
/administrator/components/com_yellow/config.xml
<?xml version="1.0" encoding="UTF-8"?>
<config>
<fieldset
name="permissions"
label="JCONFIG_PERMISSIONS_LABEL"
description="JCONFIG_PERMISSIONS_DESC"
>
<field
name="rules"
type="rules"
label="JCONFIG_PERMISSIONS_LABEL"
class="inputbox"
filter="rules"
component="com_yellow"
section="component" />
</fieldset>
</config>
component name

28. ACCESS
/administrator/components/com_yellow/access.xml
<?xml version="1.0" encoding="utf-8"?>
component name
<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>

29. LIST VIEW
/administrator/components/com_yellow/views/items/tmpl/form.default.xml
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)"
/>

30. FORM
/administrator/components/com_yellow/views/item/tmpl/form.form.xml
<?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>

31. 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"/>

32. ADD ENABLED
• Notice the filter has been automatically added

33. 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>

34. ADD ENABLED

35. ADD FIELD TO FORM
• ALTER TABLE jos_yellow_items ADD `country`
varchar(255) NOT NULL;
• /administrator/components/com_yellow/views/it
em/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"
/>

36. ADD FIELD TO FORM
• /administrator/language/en-GB/enGB.com_yellow.ini
• COM_YELLOW_FIELD_COUNTRY_DESC="What country is this
greeting for? "
• COM_YELLOW_FIELD_COUNTRY_LABEL="Country"

37. NOW FOR SOME COOL STUFF

38. CSV FORMAT
• Append &format=csv to any view

39. JSON FORMAT
• Append &format=json to any view
• /administrator/index.php?option=com_yellow&format
=json
• [{"yellow_item_id":"1","title":"Hello World!","slug":"helloworld","ordering":"0","created_by":"857","created_on":"2013-1013 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-byeworld","ordering":"0","created_by":"857","created_on":"2013-1013 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":""}]

40. MIX AND MATCH PHP WITH XML
• /administrator/components/com_yellow/views/it
ems/tmpl/default.php
<?php
defined('_JEXEC') or die();
This bit loads the XML file
$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>';

41. MIX AND MATCH PHP WITH XML

42. MEDIA FILES OVERRIDES
/administrator/components/com_yellow/views/items/tmpl/form.defa
ult.xml
<?xml version="1.0" encoding="utf-8"?>
<form
lessfiles="media://com_yellow/css/backend.less||media://com_y
ellow/css/backend.css"
type="browse"
show_header="1"
show_filters="1"
show_pagination="1"
norows_placeholder="COM_YELLOW_COMMON_NORECORDS"
>

43. MEDIA FILES OVERRIDES
/media/com_yellow/css/backend.css
.span12{
color: #CCCCCC;
}
Not the HTML folder
/administrator/templates/isis/media/com_yellow/c
ss/backend.css
.span12{
color: #FF00FF;
}

44. 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>

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

46. 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

47. Demo time…

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

49. QUESTIONS

50. RESOURCES
• https://groups.google.com/forum/#!forum/fra
meworkonframework