Joomla! Documentation™

Joomla! 

3.x

Tutorial

Developing an MVC Component

Articles in This Series

1. Introduction
2. Developing a Basic Component
3. Adding a View to the Site Part
4. Adding a Menu Type to the Site Part
5. Adding a Model to the Site Part
6. Adding a Variable Request in the Menu Type
7. Using the Database
8. Basic Backend
9. Adding Language Management
10. Adding Backend Actions
11. Adding Decorations to the Backend
12. Adding Verifications
13. Adding Categories
14. Adding Configuration
15. Adding ACL
16. Adding an Install/Uninstall/Update Script File
17. Adding a Frontend Form
18. Adding an Image
19. Adding a Map
20. Adding AJAX
21. Adding an Alias
22. Using the Language Filter Facility
23. Adding a Modal
24. Adding Associations
25. Adding Checkout
26. Adding Ordering
27. Adding Levels
28. Adding Versioning
29. Adding Tags
30. Adding Access
31. Adding a Batch Process
32. Adding Cache
33. Adding a Feed
34. Adding an Update Server
35. Adding Custom Fields
36. Upgrading to Joomla4

This is a multiple-article series of tutorials on how to develop a Model-View-Controller Component for Joomla! Version.

Begin with the Introduction, and navigate the articles in this series by using the navigation button at the bottom or the box to the right (the Articles in this series).

This tutorial is part of the Developing an MVC Component for Joomla! 3.2 tutorial. You are encouraged to read the previous parts of the tutorial before reading this.

In this step we add a modal.

Introduction

Modals, or modal windows, are the pop-up-like windows which appear in several places within Joomla. Examples are:

• When as an administrator you create a new menu item, and select a Menu Item Type of Articles / Single Article, then when you click to select the article, a pop-up appears displaying the details of the articles available and allowing you to select one.
• If you enabled the Administrator Multilanguage Status module as part of making your site multilingual in the previous step, when when you click on the "Multilingual Status" button at the bottom left of each admin page, a pop-up appears which shows the status of the multilingual functionality on your site.

Of course, these modals aren't really browser pop-up windows - users often disable browser pop-up windows - but rather use CSS and Javascript to give the appearance of pop-ups, and Joomla currently uses the Bootstrap Modal framework. The HTML elements which comprise the modal are already within the HTML of the page, but hidden. When you click on an appropriate button (such as the Select button to select and article in the first example above), then the javascript code behind the button click does the following:

• the HTML hidden elements of the modal are made visible
• a new div element covering the whole of the browser window is created; this backdrop is coloured black, and has partial opacity, so this gives the appearance of greying out what's behind the modal
• in the CSS the z-index is defined so that the modal appears above the backdrop.

When you close the modal by selecting eg an article, or clicking the close button, then the HTML elements of the modal are made hidden, the backdrop div is removed and any item you selected is passed by javascript to the appropriate field on the main form.

Each modal consists of 3 parts:

• a modal header at the top, with the title and an X button to close the modal,
• a modal body, where the main information appears, and,
• a modal footer, with buttons such as Close, Save, etc, depending upon the context.

In general within Joomla the modal body is an iframe element, and hence is an embedded HTML page with the overall page, and HTTP requests can be made to obtain the data to display in the iframe, filter and sort it, and so on.

Functionality

Currently within our helloworld component we have the ability to create a new menu item with a menu item type of "hello world" which will display a single helloworld message on our site. However, in choosing the message to display we have only a simple list field, and we have to scroll down the list of greetings to select the appropriate one.

In this step we change the user interface so that when selecting the helloworld message for a new menu item, the administrator is presented with a modal with all the details of the records, similar to what is shown when the administrator clicks on Components / Hello World. In this way the administrator is presented with a much nicer interface, with ordering, search and filter functionality.

Contributors

• Robbie Jackson

Prev: Using the language filter facility

Next: Adding an update server