Updated Develop a Joomla Component Guide to use the Component Builder (markdown)

JohnnyMcWeed 2017-06-01 20:48:52 +02:00
parent d2b571f503
commit d86a63ac1c

@ -4,70 +4,122 @@ This guide will continuously grow and try cover the complete building process of
## What are we going to build? ## What are we going to build?
We're going to build an archive component, so that f.e. a museum can manage their objects and know where everything is. The component will have the following features: We're going to build an archive component, so that f.e. a museum can manage their objects and know where everything is. The component will have the following features:
- Object: Add, manage, delete * Object: Add, manage, delete
## Prerequisites ## Prerequisites
First of all, you will need the Component Builder installed and ready to use. First of all, you will need the Component Builder installed and ready to use.
## Tips and tricks ## Tips and tricks
Here some important things to think about when using the _Component Builder_: Here some important things to think about when using the _Component Builder_:
- If there are numbers used, start with 1 and not with 0. You can have functionality problems, if you don't think about that point. And they can become some kind of annoying to resolve. * If there are numbers used, start with 1 and not with 0. You can have functionality problems, if you don't think about that point. And they can become some kind of annoying to resolve.
# Our first component # Our first component
## A new component ## A new component
To start off, we begin by making a new component. To start off, we begin by making a new component.
- Go to `Component Builder --> Joomla Components --> New` * Go to `Component Builder --> Joomla Components --> New`
- Tab Details * Tab Details
- System name `Archiver` (This is the system name, used by the component builder * System name `Archiver` (This is the system name, used by the component builder
- Name `Archiver` (This is the component name) * Name `Archiver` (This is the component name)
- Name in code `Archiver` (This is the component name used in the code) * Name in code `Archiver` (This is the component name used in the code)
- Version `0.0.1` (This is the component's version. This will be used for the update process) * Version `0.0.1` (This is the component's version. This will be used for the update process)
- Debug (line numbers) `No` * Debug (line numbers) `No`
- Custom Code Placeholders `No` * Custom Code Placeholders `No`
- Use View Version & Date `No` * Use View Version & Date `No`
- Short description `Archiver helps to get away with all archive objects.` * Short description `Archiver helps to get away with all archive objects.`
- Copyright `Copyright (C) 2017. All Rights Reserved` * Copyright `Copyright (C) 2017. All Rights Reserved`
- Company name `Component Builder Beginner` * Company name `Component Builder Beginner`
- Author `My Name` * Author `My Name`
- Email `iForgotMyEmail@oh-no.com` * Email `iForgotMyEmail@oh-no.com`
- Website `https://www.find-me-here-or-not.ch` * Website `https://www.find-me-here-or-not.ch`
- Add License (whmcs) `No` * Add License (whmcs) `No`
- License `GNU/GPL Version 2 or later - http://www.gnu.org/licenses/gpl-2.0.html` * License `GNU/GPL Version 2 or later - http://www.gnu.org/licenses/gpl-2.0.html`
[img] [img]
- Tab `Libs & Helpers` * Tab `Libs & Helpers`
- Set everything to `No` * Set everything to `No`
[img] [img]
- Save and close * Save and close
## Compiler ## Compiler
To check what we did and how our component works and looks, we want to compile our component and install it. To check what we did and how our component works and looks, we want to compile our component and install it.
- Go to `Component Builder --> Compiler` * Go to `Component Builder --> Compiler`
- Add to Git Folder `No` * Add to Git Folder `No`
- Select Component `Archiver` * Select Component `Archiver`
- Click on `Compile Component` * Click on `Compile Component`
- Click on `Install` * Click on `Install`
## The first admin view ## The first admin view
As you can see, until now, we're not able to install the component. The problem is that until now, we don't have any views connected to our component. So let's start to resolve this issue and build our first admin view. As you can see, until now, we're not able to install the component. The problem is that until now, we don't have any views connected to our component. So let's start to resolve this issue and build our first admin view.
- Go to `Component Builder --> Admin Views --> New` * Go to `Component Builder --> Admin Views --> New`
- System name `Archiver - Object` ( I like to name my views with their component name in front. Like that, I can easily distinguish between my admin views I'd like to use and at the same time, I am forced to have individual views for each component. So each component has it's own adaption to a certain situation.) * System name `Archiver - Object` ( I like to name my views with their component name in front. Like that, I can easily distinguish between my admin views I'd like to use and at the same time, I am forced to have individual views for each component. So each component has it's own adaption to a certain situation.)
- Name (single record) `Object` * Name (single record) `Object`
- Name (list of records) `Objects` * Name (list of records) `Objects`
- Short Description `The object view collects all object data` * Short Description `The object view collects all object data`
- Click on `Fields --> Add`, add the title and alias field like shown in this picture, and click on `Save`. * Click on `Fields --> Add`, add the title and alias field like shown in this picture, and click on `Save`.
[img] [img]
- Save the admin view * Save the admin view
## Add an admin view to our component ## Add an admin view to our component
- Go to `Component Builder --> Joomla Components` and select `Archiver` * Go to `Component Builder --> Joomla Components` and select `Archiver`
- Tab `Settings` * Tab `Settings`
- `Admin Views --> Add` (_Important: If it doesn't load with all options chosen, close it and open it again._) * `Admin Views --> Add` (_Important: If it doesn't load with all options chosen, close it and open it again._)
- Select `Archiver - Object` * Select `Archiver - Object`
- Enter it like shown on this picture, `Save` * Enter it like shown on this picture, `Save`
[img] [img]
## Check our first component (V. 0.0.1) ## Check our first component (V. 0.0.1)
- Compile and install (See [Chapter Compiler](#compiler)) * Compile and install (See [Chapter Compiler](#compiler))
As you can see, the installation process now worked as we connected our first admin view to our component. You're able to use your first component. As you can see, the installation process now worked as we connected our first admin view to our component. You're able to use your first component.
## References ## References
# Our first update
As we continue our component, we will often have to adapt our tables to new fields, remove old unused fields and so on. To easily do that, and for the reason that we can update our components instead of always re-installing it with the problem of losing or always remembering to backup our data, we have to add that information to component builder.
## Preparation
To continue with the next step, we repeat everything mentioned to make a new admin view (Starts here: [The first admin view](#the-first-admin-view) ). This time we call the view `Place` instead of `Object`. **Don't compile yet!**
## Adjust the component settings for the update
Now as we added a new view, we have to adjust our component.
* Go to `Component Builder --> Joomla Components` and select `Archiver`
* Add the new view if you haven't done it yet. Pay attention for the load of all fields. If they're not set, reopen the fields modal.
* Change the current version to `0.0.2`
* Click on `Add Update SQL`
* Make a new entry for version 0.0.1 with the following content:
CREATE TABLE IF NOT EXISTS `#__archiver_place` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`asset_id` INT(10) unsigned NOT NULL DEFAULT 0 COMMENT 'FK to the #__assets table.',
`alias` CHAR(64) NOT NULL DEFAULT '',
`title` CHAR(64) NOT NULL DEFAULT '',
`params` text NOT NULL DEFAULT '',
`published` TINYINT(3) NOT NULL DEFAULT 1,
`created_by` INT(10) unsigned NOT NULL DEFAULT 0,
`modified_by` INT(10) unsigned NOT NULL DEFAULT 0,
`created` DATETIME NOT NULL DEFAULT '0000-00-00 00:00:00',
`modified` DATETIME NOT NULL DEFAULT '0000-00-00 00:00:00',
`checked_out` int(11) unsigned NOT NULL DEFAULT 0,
`checked_out_time` DATETIME NOT NULL DEFAULT '0000-00-00 00:00:00',
`version` INT(10) unsigned NOT NULL DEFAULT 1,
`hits` INT(10) unsigned NOT NULL DEFAULT 0,
`access` INT(10) unsigned NOT NULL DEFAULT 0,
`ordering` INT(11) NOT NULL DEFAULT 0,
`metakey` TEXT NOT NULL DEFAULT '',
`metadesc` TEXT NOT NULL DEFAULT '',
`metadata` TEXT NOT NULL DEFAULT '',
PRIMARY KEY (`id`),
KEY `idx_access` (`access`),
KEY `idx_checkout` (`checked_out`),
KEY `idx_createdby` (`created_by`),
KEY `idx_modifiedby` (`modified_by`),
KEY `idx_state` (`published`),
KEY `idx_title` (`title`),
KEY `idx_alias` (`alias`)
) ENGINE=MyISAM AUTO_INCREMENT=0 DEFAULT CHARSET=utf8;
* Save the component
## Check our first component update (V. 0.0.2)
* Compile and install (See [Chapter Compiler](#compiler))
As you can see, the installation process now worked as we expected, as we added the update for our database. Without that part, you wouldn't be able to use the place's view, as there weren't any table.
## References