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

Joseph Geller
2018-09-20 00:07:28 -05:00
parent 981d1df5e9
commit 2e57c315eb

@@ -10,13 +10,13 @@ The last bullet above is extremely important to understand as we stated earlier
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:
* A local development environment like [WAMP](http://wampserver.aviatechno.net/?lang=en&prerequis=afficher) with native [XDEBUG](https://xdebug.org/) capabilities
* Joomla! Component Builder
* [NetBeans](https://netbeans.org/) or a similar Integrated Development Environment (IDE) with native XDEBUG and GitHub functionality
* [Chrome](https://www.google.com/chrome/) plus its [Developer Tools](https://developers.google.com/web/tools/chrome-devtools/) and [developer extensions](https://chrome.google.com/webstore/category/ext/11-web-development) or, others like [Firefox](https://www.mozilla.org/en-US/firefox/new/) with similar features and add-ons
* A local development environment like [WAMP](http://wampserver.aviatechno.net/?lang=en&prerequis=afficher) with native [XDEBUG](https://xdebug.org/) capabilities.
* Joomla! Component Builder.
* [NetBeans](https://netbeans.org/) or a similar Integrated Development Environment (IDE) with native XDEBUG and GitHub functionality.
* [Chrome](https://www.google.com/chrome/) plus its [Developer Tools](https://developers.google.com/web/tools/chrome-devtools/) and [developer extensions](https://chrome.google.com/webstore/category/ext/11-web-development) or, others like [Firefox](https://www.mozilla.org/en-US/firefox/new/) with similar features and add-ons.
* Joomla! Debug, especially its Stack Trace, and XDEBUG compatibly including links to the source in each trace
* [Joomla J!Dump](https://extensions.joomla.org/extension/j-dump/) which works well for dumping within Joomla! components instead of using PHP echo and var_dump.
* Lest we forget JavaScript as it will become more prominent as the videos and accompanying chapters progress. Excellent debugging is built into the Developer Tools in Chrome mentioned above plus many other on-the-fly functions. Features like real time changes to CSS, locating resources on the page and elements plus many other features can be found in this invaluable tool.
* JavaScript becomes more prominent as the videos and accompanying chapters progress. Developer Tools in Chrome is again a very good source for debugging in real time with features similar to NetBeans debugger, not to mention its many other HTML, CSS, and a host of other areas it can assist you with.
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.