Rapid application development using Akeeba FOF and Joomla 3.2

14,437 views

Published on

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

Published in: Technology
4 Comments
6 Likes
Statistics
Notes
  • Hi Tim,

    Where can I download a copy of the com_yellow component you showed in the presentation? I tried downloading a copy of the ToDo component from Github, but I'm not good enough to be able to build an installable version of it with phing. com_yellow would be great for what i want to see right now.

    Michael
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Amit you can find it here. https://www.akeebabackup.com/documentation/fof/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Amit,
    I recommend you join the Google Group Framework on Framework shown on the last slide, as the top of the group has links to various resources such as documentation, videos etc.
    regards
    Tim
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Tim:
    Awesome presentation, where can i find more details and documentation about FOF?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
14,437
On SlideShare
0
From Embeds
0
Number of Embeds
2,064
Actions
Shares
0
Downloads
82
Comments
4
Likes
6
Embeds 0
No embeds

No notes for slide

Rapid application development using Akeeba FOF and Joomla 3.2

  1. 1. Rapid Application Development using Akeeba FOF Presented by Tim Plummer www.timplummer.com.au
  2. 2. WHAT IS RAD? • RAD = Rapid Application Development • Create apps quickly with very little code
  3. 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. 4. FOF NOW IN JOOMLA 3.2
  5. 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. 6. WHO MADE FOF? • Created by Nicholas Dionysopoulos • Now over 23 contributors
  7. 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. 8. BENEFITS • Less code = less bugs • Less code = quicker to develop • Automagic stuff to make your life easier
  9. 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. 10. SYSTEM REQUIREMENTS • Joomla 2.5 or greater • PHP 5.3.1
  11. 11. CONVENTION OVER CONFIGURATION • Use the FOF naming conventions and you get functionality for free
  12. 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. 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. 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. 15. LET’S LOOK AT HELLO WORLD
  16. 16. com_helloworld part 9 http://docs.joomla.org/J2.5:Developing_a_MVC_Component/Adding_backend_actions
  17. 17. NOW WHAT IF WE DID THIS USING FOF? Bad joke warning YELLOW
  18. 18. com_yellow (using FOF)
  19. 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. 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. 21. TIP 2 • Clear the cache whenever you change table structure
  22. 22. NOW LET’S MAKE SOMETHING
  23. 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. 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. 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. 26. INSTALLATION XML • Aka XML Manifest • Just like normal Joomla component
  27. 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. 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. 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. 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. 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. 32. ADD ENABLED • Notice the filter has been automatically added
  33. 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. 34. ADD ENABLED
  35. 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. 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. 37. NOW FOR SOME COOL STUFF
  38. 38. CSV FORMAT • Append &format=csv to any view
  39. 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. 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. 41. MIX AND MATCH PHP WITH XML
  42. 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. 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. 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. 45. SIDEBAR MENU • Hide view by adding blank file skip.xml /administrator/components/com_yellow/views/ blah/skip.xml
  46. 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. 47. Demo time…
  48. 48. Now you are ready to start creating your own components with FOF
  49. 49. QUESTIONS
  50. 50. RESOURCES • https://groups.google.com/forum/#!forum/fra meworkonframework

×