Introduction to building Joomla!
components using FOF
Presented at J and Beyond 2014
Tim Plummer
FOF = Framework on Framework
What is FOF?
• Rapid application development
framework for Joomla
• Not standalone – it extends
Joomla
• Aim to not break ...
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 includ...
You can read about why this happened at:
https://groups.google.com/forum/#!topic/frameworkonframework/VxxIKvTooXU
How FOF ...
FOF vs F0F
• All class prefixes changed from FOF to F0F (the
letter O was changed to number 0) to avoid
naming conflicts w...
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 Jooml...
What’s happening with FOF?
• The version shipped with Joomla is no longer
maintained
• It will not be removed until Joomla...
Future of F0F?
• F0F isn’t dying, it’s actively maintained.
• The bigger goal for [Nicholas] is having F0F as a
RAD framew...
Key Dates
• May 2012 – First public release
• June 2012 – Bootstrap & jQuery
• March 2013 – XML view templates
• September...
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 fil...
Magic Fields
• Just add to your database table and all these just
magically work and implement required
functionality
– en...
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 code
You can access all source code shown today via
https://github.com/tuum/com_timesheet
Database
CREATE TABLE IF NOT EXISTS `#__timesheet_items` (
`timesheet_item_id` bigint(20) unsigned NOT NULL AUTO_INCREMENT...
Entry Point
<?php
defined('_JEXEC') or die();
// Load FOF
include_once JPATH_LIBRARIES.'/f0f/include.php';
if(!defined('F0...
Dispatcher
<?xml version="1.0" encoding="UTF-8"?>
<fof>
<!-- Component back-end options -->
<backend>
<!-- Dispatcher opti...
Dispatcher
• Also using PHP dispatcher to load Akeeba
Strapper
• Could use this to define default view if you
wanted
/admi...
Installation XML
• Aka XML Manifest
• Just like a normal Joomla component
/administrator/components/com_timesheet/com_time...
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...
List view
List view
• Each column has a header
<header name="title" type="fieldsearchable" sortable="true"
buttons="no" buttonclass=...
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_TIMESHE...
Cpanel view icons
<div class=icon>
<a href="index.php?option=com_timesheet&view=categories">
<div class="timesheet-icon-ca...
Cpanel view icons
.timesheet-icon-item {
background:
url("../../../media/com_timesheet/images/timesheet_icon.png") no-
rep...
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!
ver...
Mix and match PHP with
XML
For example, you may wish to style the select
Mix and match PHP with
XML
<?php
defined('_JEXEC') or die();
if (version_compare(JVERSION, '3.0.0', 'gt'))
{
JHtml::_('for...
Add toolbar buttons
public function onCategoriesBrowse()
{
$this->onBrowse();
JToolBarHelper::divider();
JToolbarHelper::b...
CSV format
• Append &format=csv to any view
index.php?option=com_timesheet&view=categories&format=csv
JSON format
• Append &format=json to any view
index.php?option=com_timesheet&view=categories&format=json
Front end
<?php
defined('_JEXEC') or die();
echo $this->loadAnyTemplate('admin:com_timesheet/item/form');
Note loadAnyTemp...
Front end
<?php
defined('_JEXEC') or die();
echo $this->getRenderedForm();
F0F is smart enough to figure out that if you d...
Front end toolbar
public function onItemsAdd()
{
//show toolbar on front end
$this->renderFrontendButtons = true;
parent::...
Automatic language loading
• FOF automatically loads component language
files (frontend and backend)
• English loads first...
Media file overrides
• /templates/yourtemplate/media/ (not the
HTML folder)
• Can effectively create template overrides fo...
Installation script
• F0FUtilsInstallscript makes it much easier to
install F0F and Akeeba Strapper
/administrator/compone...
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.ht
ml
More Resources
• The documentation (developer guide) for FoF
is found here:
https://www.akeebabackup.com/documentation/fof...
Questions?
Tim Plummer
www.timplummer.com.au
@bfsurvey
Introduction to building joomla! components using FOF
Introduction to building joomla! components using FOF
Introduction to building joomla! components using FOF
Introduction to building joomla! components using FOF
Upcoming SlideShare
Loading in …5
×

Introduction to building joomla! components using FOF

48,894 views

Published on

Published in: Software
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total views
48,894
On SlideShare
0
From Embeds
0
Number of Embeds
538
Actions
Shares
0
Downloads
111
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Introduction to building joomla! components using FOF

  1. 1. Introduction to building Joomla! components using FOF Presented at J and Beyond 2014 Tim Plummer
  2. 2. FOF = Framework on Framework
  3. 3. 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.
  4. 4. Who made FOF? • Created by Nicholas Dionysopoulos • Now over 31 contributors
  5. 5. 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
  6. 6. You can read about why this happened at: https://groups.google.com/forum/#!topic/frameworkonframework/VxxIKvTooXU How FOF became F0F (F zero F)
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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)
  11. 11. 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
  12. 12. Benefits • Less code = less bugs • Less code = quicker to develop • Automagic stuff to make your life easier
  13. 13. F0F System Requirements • Joomla 2.5.6 or greater • PHP 5.3.3
  14. 14. Convention over configuration • Use the FOF naming conventions and you get functionality for free
  15. 15. 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
  16. 16. 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
  17. 17. NOW LET’S LOOK AT AN EXAMPLE
  18. 18. What are we going to make? • Simple timesheet application com_timesheet will be used to demonstrate some F0F features
  19. 19. Source code You can access all source code shown today via https://github.com/tuum/com_timesheet
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. Installation XML • Aka XML Manifest • Just like a normal Joomla component /administrator/components/com_timesheet/com_timesheet.xml
  25. 25. Config • Just like a normal Joomla component /administrator/components/com_timesheet/config.xml
  26. 26. Access • Just like a normal Joomla component /administrator/components/com_timesheet/access.xml
  27. 27. 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
  28. 28. List view
  29. 29. 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
  30. 30. List view • Want to make a column sortable? Just add sortable="true“ to header
  31. 31. Form
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. Version specific view • For example, you may wish to move location of ordering column in Joomla 2.5 vs Joomla 3
  36. 36. 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
  37. 37. Mix and match PHP with XML For example, you may wish to style the select
  38. 38. 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
  39. 39. 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
  40. 40. CSV format • Append &format=csv to any view index.php?option=com_timesheet&view=categories&format=csv
  41. 41. JSON format • Append &format=json to any view index.php?option=com_timesheet&view=categories&format=json
  42. 42. 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
  43. 43. 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
  44. 44. Front end toolbar public function onItemsAdd() { //show toolbar on front end $this->renderFrontendButtons = true; parent::onAdd(); } /administrator/components/com_timesheet/toolbar.php
  45. 45. Automatic language loading • FOF automatically loads component language files (frontend and backend) • English loads first, then site/user language loads next and overrides English
  46. 46. Media file overrides • /templates/yourtemplate/media/ (not the HTML folder) • Can effectively create template overrides for CSS and Javascript files.
  47. 47. Installation script • F0FUtilsInstallscript makes it much easier to install F0F and Akeeba Strapper /administrator/components/com_timesheet/file.script.php
  48. 48. Installation Package
  49. 49. Backend
  50. 50. Front end
  51. 51. Language
  52. 52. Media
  53. 53. Demo time…
  54. 54. Now you are ready to start creating your own components with FOF
  55. 55. Resources • https://github.com/akeeba/fof • Or download F0F from https://www.akeebabackup.com/download.ht ml
  56. 56. 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
  57. 57. Questions?
  58. 58. Tim Plummer www.timplummer.com.au @bfsurvey

×