95
Joomladay UK 2014 Joomladay UK 2014 by Peter Martin www.db8.nl / @pe7er Developing a Joomla Component using RAD/FOF

Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

Embed Size (px)

DESCRIPTION

One of the new feature since Joomla 3.2 is Rapid Application Development (RAD) framework. A Joomla component is a PHP/MySQL web application that uses Joomla's framework. You can build your components on Joomla's framework and Joomla will take care of the database connection, the design (using templates), access levels, forms (JForms), etc. Using Joomla's framework saves you a lot of work and development time. However, it can be even faster! Most Joomla components include the same functionality: In the front-end a list of records from the database hyperlinked to pages with details of each record individually. In the back-end the component list records from the database, with a link to a form where you can change the data and save. Using the Rapid Application Development Framework (also known as FOF (Framework On Framework)) allows you to develop a component with common functionality with far fewer lines of code. In this presentation, Peter shows how you can use Joomla's RAD to build a simple Joomla component to manage locations and categories and present those on the front-end to visitors on a Google Map.

Citation preview

Page 1: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

Joomladay UK 2014Joomladay UK 2014

by Peter Martin www.db8.nl / @pe7er

Developing a Joomla Component using RAD/FOF

Page 2: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

2

Joomladay UK 2014Joomladay UK 2014

>>> Sheets available: www.db8.nl <<<

>>> Component: https://github.com/pe7er/db8locate <<<

Overviewa)Introduction

b)Rapid Application Development (RAD) / FOF

c)Developing a Joomla component, back-end

d)Developing a Joomla component, front-end

Page 3: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

3

Joomladay UK 2014Joomladay UK 2014

a) Introduction: Web Application● From scratch

– PHP/MySQL/HTML/CSS/JavaScript

● Joomla component: Joomla = Framework

– Database object

– Layout Template

– Access Control List (ACL)

– MVC → template overrides

– Plugins

Page 4: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

4

Joomladay UK 2014Joomladay UK 2014

a) Functionality component back-end● Items - List

– Display list of items

– New / Edit an item

– Delete item(s)

– Publish/unpublish item(s)

● Category - List

– Display list of categories

– New / Edit a category

– Delete categories

– Publish/unpublish categories

● Category - Form

– Display form of a category

– Save a category

● Item - Form

– Display form of an item– Save an item

Page 5: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

5

Joomladay UK 2014Joomladay UK 2014

a) Functionality component front-end● Items

– Display list of items

● Category

– Display list of categories

● Category

– Display category details

● Item

– Display item details

Page 6: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

6

Joomladay UK 2014Joomladay UK 2014

b) Rapid Application Development (RAD)

Page 7: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

7

Joomladay UK 2014Joomladay UK 2014

● Abstracting common code functionality● Conventions● Don’t Repeat Yourself (DRY)

● Nooku Framework ('Koowa') – Johan Janssens– Joomlatools extensies (DOCman), Anahita

● Framework on Framework – Nicholas Dionysopoulos– Basis of Akeeba Backup, Admin Tools etc

b) Software Development Framework

Page 8: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

8

Joomladay UK 2014Joomladay UK 2014

Rapid Application Development (RAD)● RAD = Framework on Framework (since J 3.2)

– Extension of Joomla! Platform

– Backwards compatible

– Less code → faster development & less bugs

– Bootstrap

– Jquery

– JSON

Page 9: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

9

Joomladay UK 2014Joomladay UK 2014

Rapid Application Development (RAD)● Convention over configuration ->

FOF convention:

● naming of functions● database field names

-> automatic (“automagic”) functionality

● How to use?

– XML → “configure” component using FOF

– PHP → more control over output

– Anything different? → Override / extend FOF code like models, controllers

Page 10: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

10

Joomladay UK 2014Joomladay UK 2014

RAD/ FOF/ F0F ?● FOF (F O F)

– Akeeba etc

● RAD – FOF implementation– In Joomla core since 3.2

● F0F (F zero F) – Fork of FOF– Akeeba etc

Page 11: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

11

Joomladay UK 2014Joomladay UK 2014

c) Joomla Component with FOF – back-end

Page 12: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

12

Joomladay UK 2014Joomladay UK 2014

c) Joomla Component with FOF● Development Environment

– Local web environment (LAMP/XAMP/MAMP)

– phpMyAdmin

– Joomla 3.3.x installation

– Git (software version control) + github.com

– IDE for PHP:● Netbeans / PHPStorm / Eclipse / ”weapon of choice”

Page 13: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

13

Joomladay UK 2014Joomladay UK 2014

“db8 locate” componentManage & display locations on a Google Map – Name: “db8 Locate”

– Component name: com_db8locate

– Database tabel name: #__db8locate_items

>>> Show example of back-end in browser

Page 14: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

14

Joomladay UK 2014Joomladay UK 2014

1. basic component (back-end)

Page 15: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

15

Joomladay UK 2014Joomladay UK 2014

1. basic component (back-end)1.Entry point

/administrator/components/com_db8locate/db8locate.php

2.Dispatcher configuration/administrator/components/com_db8locate/fof.xml

3.SQL definition of database table(s)/administrator/components/com_db8locate/sql/install/mysql/install.sql

4.XML installation manifest/administrator/components/com_db8locate/db8locate.xml

5.View: list/administrator/components/com_db8locate/views/items/tmpl/form.default.xml

6.View: form/administrator/components/com_db8locate/views/item/tmpl/form.form.xml

7.Language files/administrator/components/com_db8locate/language/en-GB/en-GB.com_db8locate.sys.ini + en-GB.com_db8locate.ini

Page 16: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

16

Joomladay UK 2014Joomladay UK 2014

1.1 basic component – entry point/administrator/components/com_db8locate/db8locate.php

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

// Load FOFinclude_once JPATH_LIBRARIES.'/fof/include.php';

// Quit if FOF is not installedif(!defined('FOF_INCLUDED')) { JError::raiseError ('500', 'FOF is not installed');}

FOFDispatcher::getTmpInstance('com_db8locate')->dispatch();

Page 17: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

17

Joomladay UK 2014Joomladay UK 2014

1.2 basic comp. – dispatcher config/administrator/components/com_db8locate/fof.xml

● <?xml version="1.0" encoding="UTF-8"?>● <fof>

● <backend>● <dispatcher>

● <option name="default_view">items</option></dispatcher>

● </backend>● </fof>

Page 18: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

18

Joomladay UK 2014Joomladay UK 2014

1.3 basic component – SQL definition● Create SQL installation file:

/administrator/components/com_db8locate/sql/install/mysql/install.sql

install.sql contains:– CREATE TABLE, table name (plural):

#__db8locate_items

– ID field contains component- & fieldname (singular)db8locate_item_id (in Joomla: “id”)

– PRIMARY KEY (`db8locate_item_id`) = ID field

Page 19: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

19

Joomladay UK 2014Joomladay UK 2014

1.3 basic component – SQL definition/administrator/components/com_db8locate/sql/install/mysql/install.sql

CREATE TABLE IF NOT EXISTS `#__db8locate_items` (● `db8locate_item_id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT,● `title` varchar(255) NOT NULL,● PRIMARY KEY (`db8locate_item_id`)● ) DEFAULT CHARSET=utf8;

Page 20: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

20

Joomladay UK 2014Joomladay UK 2014

1.4 basic component – XML manifest 1/2/administrator/components/com_db8locate/db8locate.xml

<?xml version="1.0" encoding="utf-8"?><extension version="3.2" type="component" method="upgrade"> <name>db8 locate</name> <author>Peter Martin</author> <creationDate>12 September 2014</creationDate> <copyright>Copyright (C) 2014 Peter Martin / db8.nl</copyright> <license>GNU General Public License version 2</license> <authorEmail>[email protected]</authorEmail> <version>1.0.1</version> <description>Component to manage and display locations on a Google Map</description>

<!-- SQL query files to execute on installation --> <install>

● <sql>● <file driver="mysql" charset="utf8">sql/install/mysql/install.sql</file>● <file driver="mysql">sql/install/mysql/install.sql</file>●

● <file driver="mysqli" charset="utf8">sql/install/mysql/install.sql</file>● <file driver="mysqli">sql/install/mysql/install.sql</file>● </sql>● </install>

Page 21: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

21

Joomladay UK 2014Joomladay UK 2014

1.4 basic component – XML manifest 2/2/administrator/components/com_db8locate/db8locate.xml

<!-- Administrator back-end section --> <administration> <!-- Administration menu --> <menu view="cpanel">COM_DB8LOCATE</menu>

<!-- Back-end files --> <files folder="backend"> <folder>sql</folder>

<filename>db8locate.php</filename> <filename>fof.xml</filename> </files>

</administration>

</extension>

Page 22: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

22

Joomladay UK 2014Joomladay UK 2014

1.5 basic component – view list/administrator/components/com_db8locate/views/items/tmpl/form.default.xml

<?xml version="1.0" encoding="UTF-8"?>●

● <form type="browse"● show_header="1"● show_filters="1"● show_pagination="1"● norows_placeholder="COM_DB8LOCATE_COMMON_NORECORDS">● ● <headerset>● <header name="db8locate_item_id" type="rowselect" tdwidth="20" />● <header name="title" type="fieldsearchable" sortable="true"

buttons="yes" buttonclass="btn" />● </headerset>●

● <fieldset name="items">● <field name="db8locate_item_id" show_id="true" type="selectrow"/>● <field name="title" type="text" show_link="true" url="index.php?option=com_db8locate

&amp;view=item&amp;id=[ITEM:ID]" empty_replacement="(no title)" />● </fieldset>●

● </form>

Page 23: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

23

Joomladay UK 2014Joomladay UK 2014

1.6 basic component – view form/administrator/components/com_db8locate/views/item/tmpl/form.form.xml

<?xml version="1.0" encoding="UTF-8"?>●

● <form validate="true" serverside_validate="true">●

● <fieldset name="basic_configuration"● label="COM_DB8LOCATE_LOCATION_ITEM_EDIT"●

description="COM_DB8LOCATE_LOCATION_ITEM_EDIT_BASIC_DESC"● class="span4">● ● <field name="title" type="text"● class="inputbox"● label="JGLOBAL_TITLE"● required="true"● Size="50" />

● </fieldset>● </form>

Page 24: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

24

Joomladay UK 2014Joomladay UK 2014

1. basic component – installation

Via Extensions > Extension Manager > Discover

Page 25: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

25

Joomladay UK 2014Joomladay UK 2014

1. basic component (back-end)● List view

Page 26: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

26

Joomladay UK 2014Joomladay UK 2014

1. basic component (back-end)● Form view

Page 27: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

27

Joomladay UK 2014Joomladay UK 2014

1. basic component (back-end)● List view after couple of new & save

Page 28: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

28

Joomladay UK 2014Joomladay UK 2014

2. language file

Page 29: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

29

Joomladay UK 2014Joomladay UK 2014

2. language filesys.ini → For menu items etc.Put in /language/ map of db8locate component!

/administrator/components/com_db8locate/language/en-GB/en-GB.com_db8locate.sys.ini

COM_DB8LOCATE="db8 Locate"COM_DB8LOCATE_XML_DESCRIPTION="Component to manage and display locations on a Google Map"

Page 30: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

30

Joomladay UK 2014Joomladay UK 2014

2. language file.ini → large file for all language lables com_db8locate

/administrator/components/com_db8locate/language/en-GB/en-GB.com_db8locate.ini

TIP: “Debug Language” & collect all “lables to translate”

COM_DB8LOCATE="db8 Locate"COM_DB8LOCATE_TITLE_ITEMS="Location Items"COM_DB8LOCATE_COMMON_NORECORDS="No Location Items"COM_DB8LOCATE_TITLE_ITEMS_EDIT="Edit Location Items"COM_DB8LOCATE_LOCATION_ITEM_EDIT="Location Items"COM_DB8LOCATE_LBL_ITEM_SAVED="Location Item saved"COM_DB8LOCATE_CONFIRM_DELETE="Delete Location Item?"

Page 31: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

31

Joomladay UK 2014Joomladay UK 2014

2. language file

Page 32: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

32

Joomladay UK 2014Joomladay UK 2014

3. switch on/off

Page 33: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

33

Joomladay UK 2014Joomladay UK 2014

3. switch on/off – database fieldNew field “enabled” to store publication status

ALTER TABLE `#__db8locate_items` ADD `enabled` TINYINT( 3 ) NOT NULL DEFAULT '1';

Page 34: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

34

Joomladay UK 2014Joomladay UK 2014

3. switch on/off – database field/administrator/components/com_db8locate/views/items/tmpl/form.default.xml

Add to <headerset>●

<header name="enabled" type="published" sortable="true" tdwidth="8%" />

● Add to <fieldset name="items">

● <field name="enabled" type="published"/>●

Page 35: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

35

Joomladay UK 2014Joomladay UK 2014

3. switch on/off

Page 36: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

36

Joomladay UK 2014Joomladay UK 2014

3. switch on/off – form/administrator/components/com_db8locate/views/item/tmpl/form.form.xml

Add to <fieldset>●

<field name="enabled" type="list" label="JSTATUS"

● labelclass="todo-label"● class="inputbox"● filter="intval" size="1" default="1" >● <option value="1">JPUBLISHED</option>● <option value="0">JUNPUBLISHED</option>● </field>●

Page 37: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

37

Joomladay UK 2014Joomladay UK 2014

3. switch on/off – form

Page 38: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

38

Joomladay UK 2014Joomladay UK 2014

4. order

Page 39: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

39

Joomladay UK 2014Joomladay UK 2014

4. order – database fieldNew database field “ordering”

ALTER TABLE `#__db8locate_items` ADD `ordering` INT( 11 ) NOT NULL DEFAULT '0';

Page 40: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

40

Joomladay UK 2014Joomladay UK 2014

4. order – list/administrator/components/com_db8locate/views/items/tmpl/form.default.xml

Add to <headerset>●

<header name="ordering" type="ordering" sortable="true" tdwidth="10%" />

● Add to <fieldset name="items">

<field name="ordering" type="ordering" labelclass="order"/>●

Page 41: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

41

Joomladay UK 2014Joomladay UK 2014

4. order

Page 42: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

42

Joomladay UK 2014Joomladay UK 2014

5. categories

Page 43: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

43

Joomladay UK 2014Joomladay UK 2014

5. categories – database fieldAdd new database field “catid” to store category_id

ALTER TABLE `#__db8locate_items` ADD `catid` INT( 10 ) UNSIGNED NOT NULL DEFAULT '0';

Page 44: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

44

Joomladay UK 2014Joomladay UK 2014

5. categories – list/administrator/components/com_db8locate/views/items/tmpl/form.default.xml

Note: xml has hardcoded SQL for MySQL → should be model instead

Add to <headerset>●

<header name="category" type="category" sortable="true" tdwidth="10%" />

● Add to <fieldset name="items">

<field name="catid" type="sql" translate="false"query="SELECT * FROM #__categories" key_field="id" value_field="title" />

Page 45: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

45

Joomladay UK 2014Joomladay UK 2014

5. categories – list

Page 46: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

46

Joomladay UK 2014Joomladay UK 2014

5. categories – form/administrator/components/com_db8locate/views/item/tmpl/form.form.xml

Add to <fieldset>●

<field name="catid" type="category"

● extension="com_db8locate"● class="inputbox"● label="JCATEGORY"● required="true"● size="1" /> ●

Page 47: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

47

Joomladay UK 2014Joomladay UK 2014

5. categories – form

Page 48: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

48

Joomladay UK 2014Joomladay UK 2014

5. categories – toolbar/administrator/components/com_db8locate/toolbar.php

● <?phpdefined('_JEXEC') or die();

class Db8locateToolbar extends FOFToolbar {

public function Db8locateHelperRenderSubmenu($vName) { return $this->renderSubmenu($vName); }

public function renderSubmenu($vName = null) { if (is_null($vName)) { $vName = $this->input->getCmd('view', 'cpanel'); } $this->input->set('view', $vName);

parent::renderSubmenu(); $toolbar = FOFToolbar::getAnInstance($this->input->getCmd('option',

'com_db8locate'), $this->config); $toolbar->appendLink(Jtext::_('COM_DB8LOCATE_SUBMENU_CATEGORIES'),

'index.php?option=com_categories&extension=com_db8locate', $vName == 'categories');

}}

Page 49: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

49

Joomladay UK 2014Joomladay UK 2014

5. categories – toolbar

Page 50: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

50

Joomladay UK 2014Joomladay UK 2014

5. categories – toolbar in Category ManagerCreate button in Category Manager to navigate back to “Items”:/administrator/components/com_db8locate/helpers/db8locate.php

● <?php● defined('_JEXEC') or die();●

● /**● * Helper to display db8 locate component submenus in com_categories● */● abstract class Db8locateHelper {●

● public static function addSubmenu($submenu) {JsubMenuHelper::addEntry(JText::_(

'COM_DB8LOCATE_TITLE_ITEMS'), 'index.php?option=com_db8locate', $submenu == 'locations');

JsubMenuHelper::addEntry(JText::_('COM_DB8LOCATE_SUBMENU_CATEGORIES'), 'index.php?option=com_categories&view=categories&extension=com_db8locate', $submenu == 'categories');

● }● }

Page 51: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

51

Joomladay UK 2014Joomladay UK 2014

5. categories – Category Manager

Click on “Location Categories”, Result:

Warning: Invalid argument supplied for foreach() in /var/www/rad/libraries/cms/helper/content.php on line 121

Page 52: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

52

Joomladay UK 2014Joomladay UK 2014

6. access levels

1. Access to application

Page 53: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

53

Joomladay UK 2014Joomladay UK 2014

6. access levels application 1/2/administrator/components/com_db8locate/access.xml

● <?xml version="1.0" encoding="utf-8"?>● <access component="com_db8locate">● ● <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>

Page 54: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

54

Joomladay UK 2014Joomladay UK 2014

6. access levels application 2/2/administrator/components/com_db8locate/access.xml

● <section name="category">● <action name="core.manage" title="JACTION_MANAGE"

description="JACTION_MANAGE_COMPONENT_DESC" />● <action name="core.create" title="JACTION_CREATE"

description="COM_CATEGORIES_ACCESS_CREATE_DESC" />● <action name="core.delete" title="JACTION_DELETE"

description="COM_CATEGORIES_ACCESS_DELETE_DESC" />● <action name="core.edit" title="JACTION_EDIT"

description="COM_CATEGORIES_ACCESS_EDIT_DESC" />● <action name="core.edit.state" title="JACTION_EDITSTATE"

description="COM_CATEGORIES_ ACCESS_EDITSTATE_DESC" />

● </section>●

● </access>

Page 55: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

55

Joomladay UK 2014Joomladay UK 2014

6. access levels

2. (Front-end) access to database items

Page 56: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

56

Joomladay UK 2014Joomladay UK 2014

6. access levels – list

Page 57: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

57

Joomladay UK 2014Joomladay UK 2014

7. parameters

Page 58: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

58

Joomladay UK 2014Joomladay UK 2014

7. parameters/administrator/components/com_db8locate/config.xmlvia Components > db8 locate > categories > [options]

● <?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_db8locate"● section="component" />●

● </fieldset>●

● </config>

Page 59: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

59

Joomladay UK 2014Joomladay UK 2014

8. multilingual

Page 60: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

60

Joomladay UK 2014Joomladay UK 2014

8. multilingual – database fieldAdd new field “language” to store language code

ALTER TABLE `#__db8locate_items` ADD `language` CHAR( 7 ) NOT NULL DEFAULT '*';

Page 61: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

61

Joomladay UK 2014Joomladay UK 2014

8. multilingual – list/administrator/components/com_db8locate/views/items/tmpl/form.default.xml

Add to <headerset>●

<header name="language" type="language" sortable="true" tdwidth="10%" />

● Add to <fieldset name="items">

<field name="language" type="text" tdwidth="10%" />●

Page 62: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

62

Joomladay UK 2014Joomladay UK 2014

8. multilingual – form/administrator/components/com_db8locate/views/item/tmpl/form.form.xml

Add to <fieldset>●

<field name="language" type="contentlanguage"

label="JFIELD_LANGUAGE_LABEL" >● <option value="*">JALL</option>● </field> ● ●

Page 63: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

63

Joomladay UK 2014Joomladay UK 2014

8. multilingual – form/administrator/components/com_db8locate/views/item/tmpl/form.form.xml

Add to <fieldset>●

<field name="language" type="contentlanguage"

label="JFIELD_LANGUAGE_LABEL" >● <option value="*">JALL</option>● </field> ● ●

Page 64: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

64

Joomladay UK 2014Joomladay UK 2014

8. multilingual – list

Page 65: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

65

Joomladay UK 2014Joomladay UK 2014

9. “magic fields”

Page 66: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

66

Joomladay UK 2014Joomladay UK 2014

9. “magic fields”● Present in component:

enabled (“state”), ordering,

● Also add to database table: created_by, created_on(“created”), modified_by, modified_on(“modified”), locked_by(“checked_out”), locked_on(“checked_out_time”), hits

● In list view: created_by & created_on● In form view: all fields

Page 67: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

67

Joomladay UK 2014Joomladay UK 2014

10. tags

Page 68: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

68

Joomladay UK 2014Joomladay UK 2014

10. tags

#__tags tabel stores tags:

id title4 Joomla5 Linux

#__contentitem_tag_map links content items and tags:

type_alias core_content_id content_item_id tag_id type_idcom_content.article 1 1 2 1com_content.article 1 1 3 1com_content.article 3 2 4 1com_content.article 3 2 5 1com_weblinks.weblink 2 1 4 2com_weblinks.weblink 2 1 5 2

Page 69: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

69

Joomladay UK 2014Joomladay UK 2014

10. tags – form/administrator/components/com_db8locate/views/item/tmpl/form.form.xml

Add to <fieldset>●

<field name="tags" type="tag" label="JTAG" description="JTAG_DESC" class="inputbox span12" multiple="true" >

</field>

Page 70: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

70

Joomladay UK 2014Joomladay UK 2014

10. tags

Unfortunately ... not working... bug in Joomla to versie 3.2.3: Use of com_tags only possible if JTable is used in component.

Page 71: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

71

Joomladay UK 2014Joomladay UK 2014

11. my own fields...

Page 72: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

72

Joomladay UK 2014Joomladay UK 2014

11. db8locate – database fieldAdd your own fields to database

ALTER TABLE `jos_db8locate_items` ● ADD `location` VARCHAR( 60 ) NOT NULL ,● ADD `address` VARCHAR( 50 ) NOT NULL ,● ADD `postcode` VARCHAR( 12 ) NOT NULL ,● ADD `city` VARCHAR( 50 ) NOT NULL ,● ADD `region` VARCHAR( 50 ) NOT NULL ,● ADD `country` VARCHAR( 50 ) NOT NULL ,● ADD `latitude` VARCHAR( 10 ) NOT NULL ,● ADD `longitude` VARCHAR( 10 ) NOT NULL ,● ADD `website` VARCHAR( 100 ) NOT NULL

Page 73: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

73

Joomladay UK 2014Joomladay UK 2014

11. db8locate – list

Page 74: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

74

Joomladay UK 2014Joomladay UK 2014

11. db8locate – further improvements● Update your SQL installation script:

/administrator/components/com_db8locate/sql/install/mysql/install.sql

● If "required fields" are not completed, then "save" results in emptying the fields...

/administrator/components/com_db8locate/models/items.php●

class Db8directoryModelItems extends F0Fmodel {● protected $_savestate = 1;● protected function loadFormData() {● Jfactory::getApplication()->● setUserState('com_db8locate.add.item.data', '');●

● if (empty($this->_formData)) {● return array();● } else {● return $this->_formData;● }● }● }

Page 75: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

75

Joomladay UK 2014Joomladay UK 2014

11. db8locate – further improvements● Edit form too long → divide into columns

/administrator/components/com_db8locate/views/item/tmpl/form.form.xml

/administrator/components/com_db8locate/views/item/tmpl/form.form.xml●

<fieldset name="basic_configuration" label="COM_DB8LOCATE_ITEM_LOCATION" class="span4"> fields in column 1 </fieldset>

● <fieldset name="address" label="COM_DB8LOCATE_ITEM_ADDRESS" class="span4"> fields in column 2 </fieldset>

Page 76: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

76

Joomladay UK 2014Joomladay UK 2014

11. db8locate – further improvements● Lookup Coordinates of each Address at Google Maps API

– Add lookup code for Google Map API in Model

– Add button in Toolbar

– Add handling in Controller

Page 77: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

77

Joomladay UK 2014Joomladay UK 2014

d) Joomla Component with FOF – front-end

Page 78: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

78

Joomladay UK 2014Joomladay UK 2014

12. basic component (front-end)1.Entry point

/components/com_db8locate/db8locate.php

2.View: list/components/com_db8locate/views/items/tmpl/form.default.xml/components/com_db8locate/views/items/metadata.xml –> for menu

3.View: single item/components/com_db8locate/views/item/tmpl/form.item.xml/components/com_db8locate/views/item/metadata.xml –> for menu

4.Language files/components/com_db8locate/language/en-GB/en-GB.com_db8locate.ini

Page 79: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

79

Joomladay UK 2014Joomladay UK 2014

12.1 front-end – entry point/administrator/components/com_db8locate/db8locate.php

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

// Load FOFinclude_once JPATH_LIBRARIES.'/fof/include.php';

// Quit if FOF is not installedif(!defined('FOF_INCLUDED')) { JError::raiseError ('500', 'FOF is not installed');}

FOFDispatcher::getTmpInstance('com_db8locate')->dispatch();

Page 80: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

80

Joomladay UK 2014Joomladay UK 2014

12.2 front-end – view list/components/com_db8locate/views/items/tmpl/form.default.xml

<?xml version="1.0" encoding="UTF-8"?><form type="browse" show_header="1" show_filters="0" show_pagination="1" show_enabled="1" norows_placeholder="COM_DB8LOCATE_COMMON_NORECORDS" > <headerset> <header name="title" type="fieldsearchable" sortable="true"buttons="true" /> <header name="city" type="fieldsearchable" sortable="true"buttons="false" /> <header name="region" sortable="true"buttons="false" /> <header name="country" sortable="true"buttons="false" tdwidth="20%" /> <header name="category" sortable="false"buttons="false" /> </headerset>

<fieldset name="items"> <field name="title" type="text" show_link="true" url="index.php?option=com_db8locate&amp;view=item&amp;id=[ITEM:ID]" class="todoitem" empty_replacement="(no title)" />

<field name="city" type="text" /> <field name="region" type="text" /> <field name="country" type="text" /> <field name="catid" type="sql" translate="false" query="SELECT * FROM #__categories" key_field="id" value_field="title"/> </fieldset></form>

Page 81: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

81

Joomladay UK 2014Joomladay UK 2014

12.2 front-end – view list

Page 82: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

82

Joomladay UK 2014Joomladay UK 2014

12.3 front-end – view details/components/com_db8locate/views/item/tmpl/form.item.xml

<?xml version="1.0" encoding="utf-8"?>● <form● type="read">● ● <fieldset name="a_single_item" class="item-container form-horizontal">● <field name="title" type="text"● label="COM_DB8LOCATE_TITLE"● class="db8locate-title-field"● size="50"/>●

● <field name="city" type="text"● label="COM_DB8LOCATE_CITY"● labelclass="db8locate-field"● size="20" />●

● <field name="website" type="text"● label="COM_DB8LOCATE_WEBSITE"● labelclass="db8locate-field"● size="40" />● ● </fieldset>● </form>

Page 83: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

83

Joomladay UK 2014Joomladay UK 2014

12.3 front-end – view details

Page 84: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

84

Joomladay UK 2014Joomladay UK 2014

12.4 language files

/components/com_db8locate/language/en-GB/en-GB.com_db8locate.ini

TIP: “Debug Language” & collect all “lables to translate”

Page 85: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

85

Joomladay UK 2014Joomladay UK 2014

13. more views

Page 86: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

86

Joomladay UK 2014Joomladay UK 2014

13. more viewsCombine XML & PHP/components/com_db8locate/views/items/tmpl/default.phpand load form.default.xml

E.g. mix with Google Maps

<?php$viewTemplate = $this->getRenderedForm();echo $viewTemplate;?>

Page 87: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

87

Joomladay UK 2014Joomladay UK 2014

13. more views – mixed php & xml

Page 88: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

88

Joomladay UK 2014Joomladay UK 2014

13. more viewsExtra (built-in) output options:

&format=csvadministrator/index.php?option=com_db8locate&format=csv

&format=jsonadministrator/index.php?option=com_db8locate&format=json

Page 89: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

89

Joomladay UK 2014Joomladay UK 2014

d) tools

Page 90: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

90

Joomladay UK 2014Joomladay UK 2014

Errors● IMHO Harder to detect than "regular" Joomla

component!● Cache!!● Debug

– E.g. back-end error: “An error has occurred. 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'ORDER BY node.lft' at line 4 SQL=SELECT node.id FROM jos_categories AS node, jos_categories AS parent WHERE node.lft BETWEEN parent.lft AND parent.rgt AND parent.id = ORDER BY node.lft”

can be caused by error in the front-end!Test: rename front-end com_db8locate temporary

– Front-end error:Notice: Undefined variable: form_class in /var/www/rad/libraries/fof/render/strapper.php on line 676

Test: rebuilt .xml files step-by-step

– print_r($object) / echo $query / die(“stop here!”)

Page 91: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

91

Joomladay UK 2014Joomladay UK 2014

Sources● Documentation

https://www.akeebabackup.com/documentation/fof.html

● FOF Mailinglist: https://groups.google.com/forum/#!forum/frameworkonframework

● Source code Github: https://github.com/akeeba/fof

● Examples:https://github.com/akeeba/todo-fof-example/ https://github.com/akeeba/contactus Akeeba Backup, Akeeba Ticket Systemhttps://github.com/tuum/com_timesheet

Page 92: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

Joomladay UK 2014Joomladay UK 2014

Page 93: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

93

Joomladay UK 2014Joomladay UK 2014

ContactPresentation available at:http://www.db8.nl

Component db8locate available at:https://github.com/pe7er/db8locate

Peter Martin

e-mail: info at db8.nl

website: www.db8.nl

twitter: @pe7er

Review this presentation: https://joind.in/talk/view/11625

Page 94: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

94

Joomladay UK 2014Joomladay UK 2014

Used Photos 1/2● Speed Typing - Matthew Bowden http://www.sxc.hu/photo/275499

● Speedometer – Abdulhamid AlFadhly http://www.sxc.hu/photo/1390189

● LONDON SKYLINE CLIP ART http://www.clker.com/clipart-london-skyline-19.html

● Forjados 1 - Albert Lazcano http://www.sxc.hu/photo/626785

● Bengali Keyborad - Mohammad Jobaed Adnan http://www.sxc.hu/photo/676844

● Old Light Switches - Paul Cross http://www.sxc.hu/photo/1259922

● madera en pila 1 - jean froidevaux http://www.sxc.hu/photo/313864

● Books books books... - Brandon Blinkenberg http://www.sxc.hu/photo/424027

● Sign 3: forbidden access - Davide Guglielmo http://www.sxc.hu/photo/200982

Page 95: Developing a Joomla 3.x Component using RAD/FOF - Joomladay UK 2014

95

Joomladay UK 2014Joomladay UK 2014

Used Photos 2/2● Communications Receiver - John Munsch http://www.sxc.hu/photo/260775

● Flags of the Baltic Sea countries - Johannes Raitio http://www.sxc.hu/photo/471547

● Lock - Robert Linder http://www.sxc.hu/photo/1395379

● Basho Collage 5 - Billy Alexander http://www.sxc.hu/photo/1330749

● Earth: Night Edition - Europe - Sigurd Decroos http://www.sxc.hu/photo/140879

● Retro/Vintage TV set - "meltingdog" http://www.sxc.hu/photo/1440150

● san sebastian views 1 - ibon san martin http://www.sxc.hu/photo/94018

● Tools - J Boontje http://www.sxc.hu/photo/805571

● The End Book, EWikist, 2010 http://commons.wikimedia.org/wiki/File:The_End_Book.png