1. Introduction to building Joomla!
components using FOF
Presented at J and Beyond 2014
Tim Plummer

6. FOF = Framework on Framework

7. What is FOF?
• Rapid application development
framework for Joomla
• Not standalone – it extends
Joomla
• Aim to not break backwards
compatibility without a clear
deprecation and migration
path.

8. Who made FOF?
• Created by Nicholas Dionysopoulos
• Now over 31 contributors

9. Why FOF?
• Learn how to create components quickly and
easily with very little code
• Since Joomla 3.2, FOF has been included in
the core

10. You can read about why this happened at:
https://groups.google.com/forum/#!topic/frameworkonframework/VxxIKvTooXU
How FOF became F0F (F zero F)

11. FOF vs F0F
• All class prefixes changed from FOF to F0F (the
letter O was changed to number 0) to avoid
naming conflicts with Joomla!'s outdated copy
of FOF

12. FOF vs F0F
• Joomla v3.3.0 includes FOF v2.2.1. This is the
last version included in Joomla v3 series until a
future Joomla v4
• New F0F v2.3.0, all extensions must have an
installer with the new library

13. What’s happening with FOF?
• The version shipped with Joomla is no longer
maintained
• It will not be removed until Joomla 4.0. We
are not going to break existing extensions.
• Recommended to use F0F instead (you must
include logic to install it with your extension)
https://groups.google.com/forum/#!topic/joomla-dev-cms/_HaeK8-33dk

14. Future of F0F?
• F0F isn’t dying, it’s actively maintained.
• The bigger goal for [Nicholas] is having F0F as a
RAD framework for Joomla! and AWF as the more
powerful framework that goes beyond just
Joomla!
• AWF is a framework designed to create single-
source applications that can run standalone, as a
native Joomla! component and as a native
WordPress plugin (conceivably also as a native
Drupal module)

15. Key Dates
• May 2012 – First public release
• June 2012 – Bootstrap & jQuery
• March 2013 – XML view templates
• September 2013 – Added to Joomla 3.2 core
• May 2014 - F0F fork

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

17. F0F System Requirements
• Joomla 2.5.6 or greater
• PHP 5.3.3

18. Convention over
configuration
• Use the FOF naming conventions and you get
functionality for free

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

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

21. NOW LET’S LOOK AT AN
EXAMPLE

22. What are we going to make?
• Simple timesheet application com_timesheet
will be used to demonstrate some F0F features

23. Source code
You can access all source code shown today via
https://github.com/tuum/com_timesheet

24. Database
CREATE TABLE IF NOT EXISTS `#__timesheet_items` (
`timesheet_item_id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
`title` varchar(255) NOT NULL,
`slug` varchar(50) NOT NULL,
PRIMARY KEY (`timesheet_item_id`)
) DEFAULT CHARSET=utf8;
/administrator/components/com_timesheet/sql/install/mysql/install.sql
component name view name (plural)
view name (singular)
id field as per above
*Note, final table has more fields, this is just demonstrating naming standards

25. Entry Point
<?php
defined('_JEXEC') or die();
// Load FOF
include_once JPATH_LIBRARIES.'/f0f/include.php';
if(!defined('F0F_INCLUDED')) {
JError::raiseError ('500', 'FOF is not installed');
return;
}
F0FDispatcher::getTmpInstance('com_timesheet')->dispatch();
/administrator/components/com_timesheet/timesheet.php
component name

26. Dispatcher
<?xml version="1.0" encoding="UTF-8"?>
<fof>
<!-- Component back-end options -->
<backend>
<!-- Dispatcher options -->
<dispatcher>
<option name="default_view">cpanels</option>
</dispatcher>
</backend>
</fof>
/administrator/components/com_timesheet/fof.xml
default view

27. Dispatcher
• Also using PHP dispatcher to load Akeeba
Strapper
• Could use this to define default view if you
wanted
/administrator/components/com_timesheet/dispatcher.php

28. Installation XML
• Aka XML Manifest
• Just like a normal Joomla component
/administrator/components/com_timesheet/com_timesheet.xml

29. Config
• Just like a normal Joomla component
/administrator/components/com_timesheet/config.xml

30. Access
• Just like a normal Joomla component
/administrator/components/com_timesheet/access.xml

31. View files
• browse – list page
default.php or form.default.xml
• edit – edit page
form.php or form.form.xml
• read – show single record without being able to
edit
item.php or form.item.xml

32. List view

33. List view
• Each column has a header
<header name="title" type="fieldsearchable" sortable="true"
buttons="no" buttonclass="btn"
/>
<field name="title" type="text"
show_link="true"
url="index.php?option=com_timesheet&amp;view=category&amp;id=[ITEM:ID]"
/>
and a field

34. List view
• Want to make a column sortable? Just add
sortable="true“ to header

35. Form

36. Form
<?xml version="1.0" encoding="utf-8"?>
<form validate="true">
<fieldset name="basic_configuration"
label="COM_TIMESHEET_CATEGORIES_GROUP_BASIC"
>
<field name="title" type="text"
label="COM_TIMESHEET_CATEGORIES_FIELD_CATEGORY_TITLE_LABEL"
description="COM_TIMESHEET_CATEGORIES_FIELD_CATEGORY_TITLE_DESC"
class="input-xlarge hasTooltip"
required="true"
/>
</fieldset>
</form>
*Note, final XML file has more fields

37. Cpanel view icons
<div class=icon>
<a href="index.php?option=com_timesheet&view=categories">
<div class="timesheet-icon-category"> </div>
<span><?php echo JText::_('COM_TIMESHEET_TITLE_CATEGORIES');
?></span>
</a>
</div>
/administrator/components/com_timesheet/views/cpanels/tmpl/default.php

38. Cpanel view icons
.timesheet-icon-item {
background:
url("../../../media/com_timesheet/images/timesheet_icon.png") no-
repeat scroll left top transparent;
display: block;
height: 32px;
margin: 4px auto 6px;
overflow: hidden;
text-indent: -99999px;
width: 32px;
}
/media/com_timesheet/css/backend.css

39. Version specific view
• For example, you may wish to
move location of ordering column
in Joomla 2.5 vs Joomla 3

40. Version specific view
• 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

41. Mix and match PHP with
XML
For example, you may wish to style the select

42. Mix and match PHP with
XML
<?php
defined('_JEXEC') or die();
if (version_compare(JVERSION, '3.0.0', 'gt'))
{
JHtml::_('formbehavior.chosen', 'select');
}
$viewTemplate = $this->getRenderedForm();
echo $viewTemplate;
This bit loads the XML file

43. Add toolbar buttons
public function onCategoriesBrowse()
{
$this->onBrowse();
JToolBarHelper::divider();
JToolbarHelper::back('JTOOLBAR_BACK','index.php?option=co
m_timesheet&view=cpanels');
}
/administrator/components/com_timesheet/toolbar.php

44. CSV format
• Append &format=csv to any view
index.php?option=com_timesheet&view=categories&format=csv

45. JSON format
• Append &format=json to any view
index.php?option=com_timesheet&view=categories&format=json

46. Front end
<?php
defined('_JEXEC') or die();
echo $this->loadAnyTemplate('admin:com_timesheet/item/form');
Note loadAnyTemplate() is better than include() or require() as it respects template
overrides
Could be site to load front end view
Can load one of the backend views using
loadAnyTemplate

47. Front end
<?php
defined('_JEXEC') or die();
echo $this->getRenderedForm();
F0F is smart enough to figure out that if you don’t
have XML file in front end, look for view with same
name in backend

48. Front end toolbar
public function onItemsAdd()
{
//show toolbar on front end
$this->renderFrontendButtons = true;
parent::onAdd();
}
/administrator/components/com_timesheet/toolbar.php

49. Automatic language loading
• FOF automatically loads component language
files (frontend and backend)
• English loads first, then site/user language
loads next and overrides English

50. Media file overrides
• /templates/yourtemplate/media/ (not the
HTML folder)
• Can effectively create template overrides for
CSS and Javascript files.

51. Installation script
• F0FUtilsInstallscript makes it much easier to
install F0F and Akeeba Strapper
/administrator/components/com_timesheet/file.script.php

52. Installation Package

53. Backend

54. Front end

55. Language

56. Media

57. Demo time…

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

59. Resources
• https://github.com/akeeba/fof
• Or download F0F from
https://www.akeebabackup.com/download.ht
ml

60. More Resources
• The documentation (developer guide) for FoF
is found here:
https://www.akeebabackup.com/documentation/fof
• There is also a Google Group:
https://groups.google.com/forum/#!forum/framewo
rkonframework

61. Questions?

62. Tim Plummer
www.timplummer.com.au
@bfsurvey