Your SlideShare is downloading. ×
Introduction to building joomla! components using FOF
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to building joomla! components using FOF

46,759
views

Published on

Published in: Software

1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
46,759
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
56
Comments
1
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×