introduction to building joomla! components using fof

Introduction to building Joomla! components using FOF

Presented at J and Beyond 2014Tim Plummer

FOF = Framework on Framework

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.

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

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

You can read about why this happened at:https://groups.google.com/forum/#!topic/frameworkonframework/VxxIKvTooXU

How FOF became F0F (F zero F)

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

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

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

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)

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

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

F0F System Requirements• Joomla 2.5.6 or greater• PHP 5.3.3

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

NOW LET’S LOOK AT AN EXAMPLE

What are we going to make?• Simple timesheet application com_timesheet

will be used to demonstrate some F0F features

Source codeYou can access all source code shown today viahttps://github.com/tuum/com_timesheet

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

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

// Load FOFinclude_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

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

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

Installation XML• Aka XML Manifest• Just like a normal Joomla component

/administrator/components/com_timesheet/com_timesheet.xml

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

Access

• Just like a normal Joomla component

/administrator/components/com_timesheet/access.xml

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

List view

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

List view• Want to make a column sortable? Just add

sortable="true“ to header

Form

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

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

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

Version specific view• For example, you may wish to

move location of ordering column in Joomla 2.5 vs Joomla 3

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

Mix and match PHP with XML

For example, you may wish to style the select

Mix and match PHP with XML<?phpdefined('_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

Add toolbar buttons

public function onCategoriesBrowse(){

$this->onBrowse();

JToolBarHelper::divider();JToolbarHelper::back('JTOOLBAR_BACK','index.php?

option=com_timesheet&view=cpanels');}

/administrator/components/com_timesheet/toolbar.php

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

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

Front end

<?phpdefined('_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

Front end

<?phpdefined('_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

Front end toolbarpublic function onItemsAdd(){ //show toolbar on front end $this->renderFrontendButtons = true;

parent::onAdd();}

/administrator/components/com_timesheet/toolbar.php

Automatic language loading• FOF automatically loads component language

files (frontend and backend)• English loads first, then site/user language

loads next and overrides English

Media file overrides• /templates/yourtemplate/media/ (not the

HTML folder)• Can effectively create template overrides for

CSS and Javascript files.

Installation script

• F0FUtilsInstallscript makes it much easier to install F0F and Akeeba Strapper

/administrator/components/com_timesheet/file.script.php

Installation Package

Backend

Front end

Language

Media

Demo time…

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

Resources• https://github.com/akeeba/fof• Or download F0F from

https://www.akeebabackup.com/download.html

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/frameworkonframework

Questions?

Tim Plummerwww.timplummer.com.au

@bfsurvey