joomla/Component-Builder
40
26
Fork 12
Code Issues 80 Pull Requests 2 Projects 4 Wiki Activity

Updated 4a. JCB Demo Component Directory, Folders and Files (markdown)

Joseph Geller
2018-09-26 06:14:14 -05:00
parent 9bf2e03061
commit 3b0b1b5c62
1 changed files with 71 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
4a.-JCB-Demo-Component-Directory,-Folders-and-Files.md

@@ -6,7 +6,7 @@ The directories, folders and files of the JCB Demo component, found in the JCB D
* JCB functionalities and features used while building the Demo component
* JCB interaction with the Joomla! API
The last bullet above is extremely important to understand as we stated earlier in this manual. There will be directories, files and code in the JCB Demo component package you may ponder over; you will wonder how they got there. JCB leverages the Joomla! API to accomplish this. To see how this is done, go the extra mile and cross reference everything as was done here. The process is tedious, but will reinforce your understanding of the many areas of JCB where the component's directories and files were created automatically by JCB. This includes the code snippets you have written and placed in various areas of the JCB component during the build process while using JCB's standard features and functionality to enhance your code snippet, but did not write any code for. This process also allows one to understand that JCB reuses and extends Joommla!'s core code classes, methods and properties supplied by the Joomla! API as much as possible.
Take notice of the last bullet above. There will be directories, files and code in the JCB Demo component package you may ponder over; you will wonder how they got there. JCB leverages the Joomla! API to accomplish this. To see how this is done, go the extra mile and cross reference everything as was done here. The process is tedious, but will reinforce your understanding of the many areas of JCB where the component's directories and files were created automatically by JCB. This includes the code snippets you have written and placed in various areas of the JCB component during the build process while using JCB's standard features and functionality to enhance your code snippet, but did not write any code for. This process also allows one to understand that JCB reuses and extends Joommla!'s core code classes, methods and properties supplied by the Joomla! API as much as possible.
The JCB Demo component analysis presented in this chapter will introduce you to a typical MVC directory structure and the files it contains, for a component that should be easy to understand. However, the MVC paradigm applies to all components, regardless of complexity, so the analysis can be applied to any component. As the complexity increases, developing with the following greatly reduces the time required to build a component:
@@ -19,7 +19,7 @@ The JCB Demo component analysis presented in this chapter will introduce you to
* Developer Tools in Chrome is a very good source for debugging JavaScript in real time with features similar to NetBeans debugger.
* Developer Tools in Chrome has many other features to assist you with debugging and tweaking your site on-the fly.
There are [many other possibilities](https://docs.joomla.org/Setting_up_your_workstation_for_web_development), especially with the IDE, but this combination integrates well, and much of its features are native to the applications comprising it. This also applies to any other components used as examples in the videos and chapters accompanying them in this manual. Keep in mind as you progress through them the complexity of the components being shown as examples will increase. The directory tree will look more complex, and contain many additional files. However, they all share one thing in common which is the [MVC Paradigm](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller); all follow its basic directory structure and naming conventions, including the files contained in it. This also includes the locations of the files. The code and necessary constructs specific to a Model, View or Controller for each to function and interconnect with each other and the Joomla! API at the most basic level are common to all, if developed using the MVC paradigm in its strictest sense.
There are [many other possibilities](https://docs.joomla.org/Setting_up_your_workstation_for_web_development), especially with the IDE, but this combination integrates well, and much of its features are native to the applications comprising it. This also applies to any other components used as examples in the videos and chapters accompanying them in this manual. The directory tree will also look more complex as you progress, and contain many additional files. However, they all share one thing in common which is the [MVC Paradigm](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller); all follow its basic directory structure and naming conventions, including the files contained in the dorectories. This also includes the locations of the files. The code and necessary constructs specific to a Model, View or Controller for each to function and interconnect with each other and the Joomla! API at the most basic level are common to all, if developed using the MVC paradigm in its strictest sense.
Unzip com_demo_v2_0_0__J3.zip and using the shell or command line, list its directories, sub-directories and all the files contained in them, by changing to the root of the directory and typing for example dir > demoDirectory.txt /s if using the Microsoft Windows command line. Other operating systems have a similar command in their shell. Then, browse through the directories and files using the file manager for your operating system like Windows Explorer or better yet, an Integrated Development Environment (IDE) like [NetBeans](https://netbeans.org/) or a similar Integrated Development Environment (IDE) with native XDEBUG and GitHub functionality. An IDE is recommended since it has many features facilitating this analysis. Some of these include:
@@ -271,28 +271,89 @@ Beneath the directory structure and files presented next you will find a short e
\router.php
***
Always keep in mind, JCB is doing most of the tasks related to items below referring to Joomla directories, files, classes, methods and properties. You do not have to, for example, put an index.html file in the root of every directory; you are not required to add the check for direct access to the file; you do not have to write code for the admin or site views unless you extend JCB with your own custom code.
Some of the links below and seen previously in this document may be outdated and many Joomla! classes in use have early origins and are stated as such in the documentation. Locations of class files vary by release, and finding them and reviewing the code within each is made a bit more elusive with Joomla! 4 namespace changes but the standardization is worth it. There is current backwards compatibility and hence, lists of aliases do exist as we shall see next.
There is a class map of aliases for classes that do not conform to Joomla 4! namespace naming convention. The file at \libraries\classmap.php should be consulted when writing your own components. The path on the right has the current locations along with the new standard naming convention aliased to it on the left. There are a few more areas where this occurs that is included below the list. Be aware that if for example, if the class method is indicated as JLoader::registerAlias('JControllerLegacy', '\\Joomla\\CMS\\MVC\\Controller\\BaseController', '5.0'), the physical path in Joomal! version 3.8.12 is \libraries\src\Application\BaseController.php. The Joomla! class in the file in this example is named BaseController which extends JObject.
***
**index.html** - File containing one line of HTML that blocks directory view. Must be in root of each folder.
Note, the following applies in general for any component:
**index.html**
File containing one line of HTML that blocks directory view. Must be in root of each folder.
**All Joomla class files must begin with this code:**
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
***
## \demo.php
### Let's look at JCB, Editing the Site View; it's where the site view entry point for the JCB Demo component is defined. This code has been inserted in JCB for you. You will need to supply code for your own components and this code provides the basic elements required. You can:
### Let's look at the JCB Demo component using the admin area of Joomla!, signed in as a Super Administrator. JCB's Editing the Site View in the admin area of the site is where you add the code for the site view entry point for the JCB Demo component, /demo.php. This code has been inserted for you. You will need to supply code for your own components and the code in the JCB Demo component provides the basic elements for any component allowing CRUD (Create, Read, Update Delete) on database table records, in this case, look.
Super Administrator can:
* Login to admin as super administrator and create a look.
* Add a registered user.
* Create a Joomla! menu item for the demo component looks, access should be registered.
* Update the look table with the registered user is in created by and modified by columns if the table.
* Login as the registered user, select the looks option from the main menu
Registered Users can:
* Edit the look record in the demo_look table, reusing the adminForm form to do so
- The registered user id of the logged in user must match the created_by value for it to display.
* First, login as the registered user and select the looks option from the main menu
* The site view looks displays with the Name and Description of the registered user's look and an edit toolbar underneath.
* Clicking the edit toolbar displays the admin view look, displaying only the actions defined for that user group.
* Click the edit toolbar and display the admin view look, displaying only the form actions defined for that user group.
- Save
- Save and Close
- Close
* The More button is also enabled allowing entry of the additional fields on the form.
* The More button was enabled in the JCB demo
- This allowing entry of the additional fields on the form.
\ and the admin view look so one can edit their own look record in the looks_demo table. By default, access control is only allowed for the super administrator. If access is given in Joomla!'s ACL to the JCB Demo component for let's say the registered group of Joomla! users, the edit button will display below the name and description. This brings up the matter of access control levels or ACL in Joomla! See the text after the view for information or you will not be able to edit a look despite owning it.
Let's look at the code behind all of this.admin view look so one can edit their own look record in the looks_demo table. By default, access control is only allowed for the super administrator. If access is given in Joomla!'s ACL to the JCB Demo component for let's say the registered group of Joomla! users, the edit button will display below the name and description. This brings up the matter of access control levels or ACL in Joomla! See the text after the view for information or you will not be able to edit a look despite owning it.
If you use Chrome's More Tools - Developer Tools, use the element pointer to find this on the page:
<form action="/comdemo/index.php?option=com_demo&amp;view=looks&amp;Itemid=104" method="post" name="adminForm" id="adminForm">
<table class="uk-table uk-table-hover">
<caption>List of all looks</caption>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="index.php?option=com_demo&amp;view=looking&amp;id=1:registered&amp;Itemid=104">Registered</a>
</td>
<td>
Registered<br><br>
<a class="uk-button uk-button-text uk-width-1-1" href="/comdemo/index.php?option=com_demo&amp;view=look&amp;task=look.edit&amp;id=1&amp;Itemid=104">
<i class="uk-icon-pencil">
</i>
<span class="uk-hidden-small">
Edit Look
</span>
</a>
</td>
</tr>
</tbody>
</table>
Revisiting the previous list of actions a registered user may perform:
* Edit the look record in the demo_look table, reusing the adminForm form to do so
<form action="/comdemo/index.php?option=com_demo&amp;view=looks&amp;Itemid=104" method="post" name="adminForm" id="adminForm">
This line is inserted by JCB during compilation and loads the same looks view used in the admin area to add looks into the demo_look table.
- The registered user id of the logged in user must match the created_by value for it to display.
By default, the JCB demo allows all user types except public and guest user groups to view all looks, ehether they created them or not. To restrict the looks to the specific user, besides the changes to the Joomla! ACL one must filter the look records in the demo_looks table by owner id. Allowing the following actions in JCB admin, EDThe following accomplishes this. Note, these will take effect without compiling the JCB Demo and other components built using it since it is the Joomla! ACL or the global options permissions of the demo component being changed for Joomla!'s the Registered User Group and not individual permissions within the JCB component which allows for granularity using the Joomla! ACL once again on children of the parent.
Looks Edit Own
Looks Access
* First, login as the registered user and select the looks option from the main menu
* The site view looks displays with the Name and Description of the registered user's look and an edit toolbar underneath.
* Click the edit toolbar and display the admin view look, displaying only the form actions defined for that user group.
- Save
- Save and Close
- Close
* The More button was enabled in the JCB demo
- This allowing entry of the additional fields on the form.
It's source in JCB is:
Custom Script
Add PHP (after getting the items)*
@@ -323,11 +384,6 @@ Target (array) $items values *
## [JCB - Editing the Site View](/administrator/index.php?option=com_componentbuilder&view=dynamic_get&layout=edit&id=36)
Some of the links below and seen previously in this document may be outdated. For example, the Joomla! Platform documentation is no longer maintained; and Platform 14 is outdated besides being obsolete. The Joomla! 2.5 API Index may also appear in some of the links. They have not been removed from current Joomla! documentation; many classes in use have early origins and stated as such in the documentation. Joomla! has extensive changes involving namespaces with Joomla! 4 which relies on it heavily. Locations of class files vary by release, and finding them and reviewing the code within each is made a bit more elusive with Joomla! 4 name space changes. But there is current backwards compatibility and hence, lists of aliases do exist as we shall see next.
Since deprecated classes in Joomla 3.8.x will be removed in Joomla! 5 it is wise to use the new ones, aliased starting with Joomla! 3.8. Be sure you note and observe any changes in the current or future versions of Joomla! as code may break if the Joomla! team removes it. If a class for example or design pattern is deprecated and will be obsolete by the next major release, it is indicated very clearly. These and [other changes](https://developer.joomla.org/news/703-joomla-3-8-beta-released-for-testing.html) should be reviewed in preparation for Joomla! 4. For now, class names that eventually will raise exceptions and error messages in your component code are facilitated; backwards compatibility exists until Joomla! 5.
There is a class file that is very important to facilitate this and is currently being used. It is the class map of aliases for classes that do not conform to the namespace naming convention. The file at \libraries\classmap.php should be consulted when writing your own components. The path on the right has the locations and new standard naming for class files. There are a few more areas where this occurs that is included below the list. Be aware that if for eaxmple the path is indicated as JLoader::registerAlias('JControllerLegacy', '\\Joomla\\CMS\\MVC\\Controller\\BaseController', '5.0'); the physical path in Joomal! version 3.8.12 is \libraries\src\Application\BaseController.php and the class is named BaseController which extends JObject. Remember, the old ones will eventually be obsolete starting with Joomla! 5. The general namespace naming convention is Joomla! classes begin with the letter J in the namespace. Those that are not are now deprecated and will log warnings in server log files. These are useful to allow cleaning them up eventually. Each line in the class map file has the path to the left that is aliased to the path on the right which is the deprecated one. Joomla! developers are using the namespace extensively and this map conforms the classes in use with the deprecated naming convention to the new ones. The latter should be used in your components sooner rather than later. There are some other areas where aliases exist that should be adhered to eventually for class names and their locations:
Next, we look at demo.php in the root of the JCB Demo component directory and step through its contents, summarizing the actions that lines of code within each perform including the locations of class files behind each.
- [Add unobtrusive JavaScript support to keep a tab state.](https://api.joomla.org/cms-3/classes/JHtmlBehavior.html#method_tabstate)