Joomla! Documentation - User contributions [en]

Unit Tests For The Platform

2011-12-15T20:05:07Z

Radiant tech:

This is a very early stage document about running unit tests on the platform.

To run tests on the platform you will need to install PHPUnit 3.5. You may also need to update your version of PEAR to the current version. If you are using Ubuntu as your OS you will need to be at minimum on version 10.10 to update to PEAR's current package using the standard packages in the software center.
You will also need to have xdebug with the current version installed.

PHP must be at least version 5.2.7 but 5.3.3 is recommended.

To install, go to the command line and type:

pear channel-discover pear.phpunit.de
pear channel-discover components.ez.no
pear channel-discover pear.symfony-project.com

pear install -f --alldeps phpunit/PHPUnit
pear install -f --alldeps phpunit/PHPUnit_MockObject
pear install -f --alldeps phpunit/DBUnit
pear install -f --alldeps PHP_CodeSniffer

At this point you should be able to navigate to the platform root folder and type phpunit at the prompt to start the tests.

Before running you will need to install a database for the test and enter the information. Copy config.php-dist to config.php.

You will need to create a database and import /tests/ddl.sql.

If you want to keep it simple and are sure you computer is secure, you can use the names from the file otherwise edit the file.

Names from file:
public $user = 'utuser';
public $password = 'ut1234';
public $db = 'joomla_ut';

phpunit --help

will give you a list of options.
[[Category:Platform]] [[Category:Development]] [[Category:Testing]] [[Category:Bug Squad]]

Running Unit Tests

2011-12-14T23:53:14Z

Radiant tech: added Testing and Bug Squad categories

== Running the Entire Test Suite ==

The entire test suite can be run by simply entering the test directory and typing phpunit:

<pre>
cd /path/to/joomla/tests/unit
phpunit
</pre>

== Specifying a Directory of Tests to Run ==

You can run a subset of tests by specifying the directory path of the tests that you want to run.

<pre>phpunit suite/libraries/joomla/utilities</pre>

Will run all of the tests in the specified directory and any subdirectory.

== Using the --filter Parameter to Run Certain Tests ==

The --filter parameter allows you to run a specific subset of the entire test suite. The --filter parameter takes a regular expression that can be used to filter out tests.

<pre>phpunit --filter JForm</pre>

Will scan through the suite directory and run tests that contain JForm in the class name or in the method name.

[[Category:Testing]][[Category:Bug Squad]]

Unit Testing

2011-12-14T23:25:42Z

Radiant tech: replaced ref to SVN with GitHub platform/link

{{cookiejar}}
Note that this article is badly out of date.
== News and Updates ==
2011 10 26 Use version 3.5.15 of PHPUnit. Please see reference material on github.

2009 10 06: Tests now depend on the SVN version of PHPUnit 3.4.1.

2008 06 24: Update to reflect move of PHPUnit code from branch to trunk (former trunk now in /branches/old_simpletest).

2008 06 22: Add information on limiting tests by version.

2008 06 21: Added --class-exclude, --sequence-exclude, and --test-exclude options.

2008 06 21: PHPUnit has been updated to version 3.2.21 with SVN rev 10436. Please update.

== Unit Testing ==
Unit testing is not only an essential part of a good Quality Control program, it is an aid to development as well. Writing new tests before writing code helps focus the developer on the problem at hand. The practice also encourages writing smaller, more loosely coupled, more reusable, and more maintainable code units and these benefits often outweigh the benefits gained by treating unit tests solely as a QC tool. When used in this manner correctness becomes more a by-product of the process than the goal.
For a good general discussion of unit testing, visit the [http://en.wikipedia.org/wiki/Unit_test Wikipedia article].

=== Unit Testing in Open Source ===
Open source projects, with multiple developers working in parallel around the world, can greatly benefit from unit testing. The main benefits are:
* Unit tests help highlight cases where seemingly minor changes cause unexpected breakage.
* Unit tests help clearly specify how a class should behave.
* Unit tests can expose design flaws very early in development.
* Unit tests make great examples. They are a great place for developers to learn how to use the code.

=== The Testing Hierarchy: Unit, Subsystem, Integrated ===
Software testing systems usually run through a spectrum from "pure" unit tests through to fully integrated systems tests. We've described low level unit tests above. Integrated testing typically involves some sort of script that simulates user actions and then verifies that the result matches what's expected. This sort of "end to end" test verifies that all parts of the system are working correctly.

It's unfortunate that there is no clear nomenclature to describe all the intermediate stages of testing. The next stage beyond testing a single unit of code is subsystem testing. A subsystem test verifies that two or more units of code are interacting correctly to produce the desired result. In the simplest case, a subsystem test can be created simply by replacing mock objects with real objects and running unit tests on the top level module. In practise, this tends to not work as well as expected, because the original unit test data wasn't designed for a subsystem test, or because the nature of the test cases needs to be changed in order to fully test the subsystem. After all there is little point in simply repeating the unit test cases; the objective of a subsystem test should be to test boundary conditions and special cases that would be difficult to duplicate in unit tests.

Once a subsystem has been tested, it can be integrated into a larger system, which is still a subset of the whole product. Tests can be written for larger and larger subsystems, but at each stage the complexity of the tests increases. At some point, the effort required to hand craft tests exceeds the benefits of running them. This is where integrated testing comes in.

Integrated testing involves recording a user's interaction with the system into a script that can be replayed. The testing framework then compares the system's response with the expected response and passes or fails the test. The PHPUnit testing framework that we use has the ability to work with [http://seleniumhq.org/ Selenium], a browser based test automation tool. Writing a functional test using Selenium is documented [http://docs.joomla.org/Functional_Testing#Writing_Functional_Tests here].

==== Test Objects ====
The purpose of unit tests is to isolate a module of code. A test that tests only one thing provides better information than a test that involves several object interactions. But how do we isolate an object from its dependencies? By writing stub classes. [http://xunitpatterns.com/Mocks,%20Fakes,%20Stubs%20and%20Dummies.html xUnit Patterns] defines a the hierarchy of dummy classes, ranging from simple to complex:
* Dummy - Defines attributes and methods of a dummy class (not particularly useful in PHP).
* Fake - Provides canned responses to method calls and fixed attribute values. Good for speed.
* Stub - Allows the test to define responses to method calls (return values, exceptions) to simulate the dependent object.
* Spy - A Fake or Stub that records method calls and parameters for later analysis.
* Mock - A Fake or Stub with a set of expectations -- method calls and parameters -- that are automatically verified for correctness.

=== Unit Testing in Joomla! ===
Unit testing capabilities in Joomla are steadily developing. [Add note re amount of coverage for platform by unit tests.]

The [https://github.com/joomla/joomla-platform Joomla Platform GitHub repository] contains PHPUnit tests within the /tests subdirectory. See [http://docs.joomla.org/Running_Automated_Tests_for_Version_1.6 Running Automated Tests for Version 1.6] for instructions on setting up unit testing in your IDE.

==== The Unit Test Team ====
If you can commit to the Joomla code base, then you should consider yourself part of the unit test team!

Writing tests concurrently with code (or even before) is a good way to not only save development time, but a great tool for defending against regressions. Writing tests early in the development cycle also helps identify and resolve design issues sooner, which reduces refactoring.

If you want to get started on unit testing, get in touch with Alan Langford (instance) or Ray Tsai (mihu). Either of us will be happy to help out.

==== Current Work ====
* There is no longer any need to patch the main code to enable unit tests.
* Basic techniques for mock objects are defined.
* Strategies for dealing with local configuration is not yet complete, but there is a plan.
* Files of the form class-sequence-type-Test.php, for example JObject-0000-class-Test.php use PHPUnit.
* The JDate tests present a good example of a data-driven test, but they won't run on the current 1.5 code base (there are some proposed API changes as a result of unit test development).
* Previously functional tests, such as JFTP, haven't been moved to the PHPUnit environment yet.
* The custom test runner is no longer needed. The current tests will run with the latest SVN version of PHPUnit 3.4. This code will eventually become PHPUnit 3.4.1. Thanks to Sebastian Bergmann for his excellent work on an excellent project!

==== Writing Unit Tests ====
At risk of stating the obvious, in the "purest" case the purpose of a unit test is to ''isolate a unit of code from its environment and to test the operation of that code''.

This isolation is usually achieved by writing dummy classes that emulate the code unit's environment. These dummy objects can be passive, by simply simulating the environment, or they can be more active, keeping track of how they are being used by the test unit and reporting any variations from the expected behaviour. See [[Unit_Testing_Mock_Objects|Mock Objects in Joomla]] for a detailed example.

An interesting aspect of writing tests is that they become ''de facto'' detailed technical specifications of the interfaces between units of code. The fact that these specifications can be verified in an automated way makes them a superb resource when refactoring code.

The test code has a few templates designed to kick-start a test. They are:

/unittest/sample-datatest-php.txt
/unittest/sample-simpletest.php.txt

Here are some example tests: [[Unit_Testing_--_a_Simple_Example|Simple Example]], [[Unit_Testing_--_Data_Driven_Example|Data Driven Example]], [[Unit_Testing_--_Plugin_Example|Plugin Example]], [[Unit_Testing_--_UI_Example|UI Example]].

==== Running Unit Tests ====
Test files follow the form classnameTest.php, for example JObjectTest.php. For tests that are not class based, use the name of the file being tested.

Joomla unit tests use the standard PHPUnit test runner. See http://www.phpunit.de for documentation.

== How to Get it Running ==

Before you start make sure you have installed PHPUnit and of course PHP (5!) properly...

To get the unit tests to run on your Joomla! installation, perform the following steps:
* Create an instance of your Joomla! installation. Since you will be using SVN to check out the testing project, you don't want to check out the Joomla! with SVN. Instead, simply unpack a normal Joomla! archive. If you are using Eclipse, you can create a folder in your Eclipse workspace for the Joomla! installation, but don't create an Eclipse project yet.
* In the root checkout (or export) the latest version of the unit test code from SVN ''"/testing/trunk/1.5/unittest"'' or ''"/testing/trunk/1.6/unittest"'' to your installation base. This will create a ''"/unittest"'' sub-folder under your joomla installation. If you are using Eclipse, Import the project from the SVN and use the same folder in your Eclipse workspace you used above.
* From the command line, change to the unittest directory.
* Run the unit test from the command prompt using the following command: <code>phpunit tests</code>

The unit test will the run, and the results are rendered. You will see a series of dots for each passed test and other letters for failed tests.

See http://www.phpunit.de/manual/current/en/textui.html for help using the --filter switch to run only certain tests. There are also many other command line switches you can use to get results in various formats.

== Troubleshooting ==

The provided configurations should work out of the box. We have seen problems with it (currently the cause is unknown). If you get an error like below, the solution is pretty easy.

file=/var/www/unittest/runtests.php
posn=17
base=runtests.php
/var/www
JPATH_BASE does not point to a valid Joomla! installation:
JPATH_BASE = /var/www
Please modify your copy of "TestConfiguration.php"

Modify the ''"TestConfiguration.php"'' file and change the definition of the JPATH_BASE so it points to the path of you Joomla! installation, in the example below the Joomla! installation is installed at "''/var/www/update''".

define('JPATH_BASE', '/var/www/update');

== Frequently Asked Questions ==
'''Why can't I use "phpunit ''testname.php''" to run my tests?'''

The test facility has to do some work to be able to load the "Joomla!" framework and to be able to inject mock classes. It's difficult to do this from the PHPUnit test runner, so we built our own. Also, the Joomla test runner has specific options designed to make it easy to select specific tests. Over time we will add more functionality to the test runner so it has many of the capabilities of the phpunit command.

==See also==
[http://www.phpunit.de/manual/current/en/ PHPUnit Manual]

[[Category:Bug Squad]]
[[Category:Development]]
[[Category:Testing]]
[[Category:Automated Testing]]

Unit Tests For The Platform

2011-12-13T21:12:09Z

Radiant tech: added Testing and Bug Squad categories

This is a very early stage document about running unit tests on the platform.

To run tests on the platform you will need to install PHPUnit 3.5. You may also need to update your version of PEAR to the current version. If you are using Ubuntu as your OS you will need to be at minimum on version 10.10 to update to PEAR's current package using the standard packages in the software center.
You will also need to have xdebug with the current version installed.

PHP must be at least version 5.2.7 but 5.3.3 is recommended.

To install, go to the command line and type:

pear channel-discover pear.phpunit.de
pear channel-discover components.ez.no
pear channel-discover pear.symfony-project.com

pear install -f --alldeps phpunit/PHPUnit
pear install -f --alldeps phpunit/PHPUnit_MockObject
pear install -f --alldeps phpunit/DBUnit
pear install -f --alldeps PHP_CodeSniffer

At this point you should be able to navigate to the platform root folder and type phpunit at the prompt to start the tests.

Before running you will need to install a database for the test and enter the information. Copy config.php-dist to config.php.

You will need to create a database and import /tests/ddl.sql.

If you want to keep it simple and are sure you computer is secure, you can use the names from the file otherwise edit the file.

Names from file:
public $user = 'utuser';
public $password = 'ut1234';
public $db = 'joomla_ut';

phpunit --help

will give you a list of options.
[[Category:Platform]][[Category:Development]][[Category:Testing]][[Category:Bug Squad]]

Joomla CodeSniffer

2011-12-13T13:18:36Z

Radiant tech:

(This page needs expanded installation instructions, especially for Windows-based systems.)

== A Nose For Joomla ==

This is a custom coding standard for the PHP CodeSniffer that attempts to codify and enforce the Joomla coding standards.

==Why?==

- Coherent and consisting coding practice makes the files look more professional. Conflicting styles in the same project (or worse, the same file) not only look sloppy, they encourage further sloppiness.

- When all code complies with the same standard, bad code is easier for everyone to spot.

- It makes it easier for someone new to a particular file in the project to find and fix errors, or extend functionality.

- If there is no consistent standard maintained, the sometimes developers will reformat the code to suit themselves. This causes a wide range of changes in the code repository, and if there is a later problem, a significant change could be lost in the chaff produced by a diff.

==Installation==

First you'll need to install phpcs (http://pear.php.net/package/PHP_CodeSniffer/download/). This set of files is intended to work with phpcs version 1.3, so behavior with any other version is undefined.

Then download and unzip the [http://joomlacode.org/gf/project/jcodesniffer/ Joomla CodeSniffer], and copy the contents of it into /path/to/PHP_CodeSniffer/Standards/Joomla. (The path on some systems is /usr/lib/php/PHP/PHP_CodeSniffer but this varies from system to system. Use

<code>pear config-get php_dir</code>

to find out where the PEAR directory is on your system, then add "/PHP/PHP_CodeSniffer" to it.)

== Usage ==

You invoke the custom standard by

<code>phpcs --standard=Joomla --tab-width=4 file/to/sniff</code>

'''NOTE''': When you are developing for the Joomla platform project, the updated coding style guidelines can be found in the build folder of the github project [https://github.com/joomla/joomla-platform/tree/master/build/phpcs here]. The standard from Joomlacode is not up-to-date. In that case, you also have to ommit the --tab-width=4 parameter.

To test a platform file using the provided platform coding standards use

<code>phpcs --standard=build/phpcs/Joomla path/to/file/or/folder</code>

Further documentation on the use of phpcs can be found at: [http://pear.php.net/package/PHP_CodeSniffer/docs]

==IDE integration==

[[Image:eclipse_pti.png|left|thumb|200px|1) Eclipse PTI]]
While everybody loves the console as it is with no doubt the most effective way to do whatever you need to do.. sometimes even linux gurus need a little bit of comfort.

Fortunately there is a plugin available for eclipse (tested) and netbeans (not tested) that integrates the CodeSniffer in our favorite IDE, so any coding standard violations are shown like "normal" errors (see screen shot 1).

<div style="clear: both"></div>
Installation is a breeze and follows the usual pattern:
# <tt>Help => Install new Software...</tt>
# <tt>Work with:</tt> Fill in one of the update site URLs found here: http://www.phpsrc.org/
# Select the desired tools
# Restart Eclipse.

[[Image:eclipse_pti_settings.png|right|thumb|150px|2) Eclipse PTI settings]]
You are now able to sniff for code violations against common standards like PEAR or Zend etc.

<del>Notice that the PTI project currently is not working right on the Eclipse Indigo releases. If you want to use the Eclipse integration for the PHP_CodeSniffer, use an Eclipse Helios release and install it in there.</del> '''update''' The PTI project has updated it's sources and runs fine in Eclipse Indigo.

To sniff against your own standards, all you have to do is specify their location and activate them (see screen shot 2)

# <tt>Window => Preferences</tt>
# <tt>PHP Tools => PHP CodeSniffer</tt>

Happy sniffing

* http://www.phpsrc.org/ PTI - PHP tools integration for Eclipse
* http://github.com/beberlei/netbeans-php-enhancements/ Netbeans enhancements
* http://hakre.wordpress.com/2010/03/06/php-code-sniffer-eclipse-and-wordpress/ - Excellent article. Just change "Wordpress" for "Joomla!" ;)

[[Category:Development]][[Category:Bug Squad]]

Bug Tracking Process

2011-10-28T18:58:08Z

Radiant tech: edited url for bug tracker to location for 1.6+

=Overview=
The [http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemBrowse&tracker_id=8103 Joomla! Bug Tracker] is the place where all Joomla! bugs are tracked. This article documents the current Joomla! bug tracking process from the time a new bug is reported to the time it is closed. ([http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemBrowse&tracker_id=32 Joomla! 1.5 Bug Tracker])

=Reporting Issues=

[[Image:ReportingIssues.jpg|1024 px]]

The process is normally started in one of two ways: the bug is added to the tracker, or a user reports the bug in the [http://forum.joomla.org/viewforum.php?f=199 Joomla! Bug Forum] for the given maintenance release.

== Issues reported on the forum ==

JBS members scan the forums to determine when issues need to be put into the tracker. If the issue can be reproduced, is clearly a bug, and there are step-by-step instructions for how to reproduce it, it can be entered into the tracker with a status of Confirmed. If it is not as clear-cut, it can be entered with a status of Open, so that other JBS members will know it needs further investigation.

== Issues directly reported to the tracker ==

When an issue is added to the tracker, the status will be either
1. Open
2. Confirmed
3. or Pending
depending on the situation. If the issue needs more investigation, then it should be set to Open. If the issue (1) is a bug and (2) can be reproduced and (3) has good test instructions, it should be set to Confirmed. If it meets the three Confirmed criteria and also has a good patch attached, it should be set to Pending. See below for more information about the status codes.

== Issue Priorities ==

Most issues are priority 3, or Normal. The artifacts are prioritized according to the following characteristics:

'''Critical (1):'''
The trunk is not working at all. Significant parts of the source are broken preventing key operations. Examples would be login, installation, extension installers, javascript errors that prevent you from moving a save or similar action, etc. Also includes the generation of Fatal PHP errors and major security issues in a prerelease (Security issues for a stable release should NOT be reported in the tracker but instead reported to the security team security@joomla.org).

'''Major (2):'''
Parts of the source are obstructing operation in a serious way or causing a major loss in advertised function. Examples would includes PHP notices and warnings and reported javascript errors. Major issues will also typically prevent the release cycle from moving from Beta to Release Candidate (RC), or Release Candidate to General Availability (GA).

'''Normal: (3)'''
Issues that are hindering advertised behavior but the application is still workable. Examples would include parameters not working as advertised, language files not loading as expected, etc.

'''Minor (4):'''
Minor loss of function and generally annoying behavior. May include less common platform or browser specific problems that while they may be technically major in those environments, they represent a minority. Also include missing translation strings.

'''Trivial (5):'''
Cosmetic problems, misspelled words, graphically misaligned object, less common issues with parameters, etc.

= Resolving Issues =

The bug squad takes care of the 1.5 release which is now in maintenance mode. That means getting the 1.5.1, 1.5.2, 1.5.3, 1.5.4 etc releases ready by fixing problems that come up. The idea is to make the release increasingly stable and take care of issues that come up. At the same time, it is vitally important not to break anything that is working. That's called software regression and it's not something you want at this stage.

In the 1.5 tracker there are several common statuses, mainly: open, confirmed, pending, ready to commit.

* '''Open''' means it's reported, but it hasn't been determined for sure whether it is a real bug or not. Many Open issues are not actually bugs. If the issue fits into one of the categories below, then the status is changed as indicated and the bug is closed:
** Cannot be reproduced. We have tried the same thing the reported did but the software appears to work correctly. (In many cases, more information is needed to be able to reproduce a bug. See "Information Required" below.) Change status to '''Unable to confirm'''.
** Has already been reported in a different issue number. Change status to '''Duplicate report''' and add the number on the duplicates tab.
** Is a known limitation of the software. Change status to '''Known issue'''.
** Is a feature request, a mistake made by a user, or is the way the software is intended to work. Change status to '''Not a bug'''.
** Is a bug with an extension or some other external program or a server issue that will not be addressed. Change status to '''Not Joomla! core'''.
* '''Information Required''' is used if we need more information ''from the person who reported the issue'' to decide about the issue. For example, there are questions about how to reproduce the problem or other questions about the issue. If we get the information we need, then we can continue processing the issue. If we don't get the information within two weeks, then we can change the status to Unable to confirm (or another of the closed status codes if that is more applicable).
* '''Needs Review''' is used if we need a JBS Coordinator, Development Coordinator, or other experienced developer to review the issue. This is different from Information Required, which means that we need more information from the person who reported the issue.
* '''Confirmed''' means that JBS has confirmed that this issue is a bug in Joomla! that should be fixed. That's when the JBS tries to solve it or consults with the development team about a solution. ''At this point there should be clear step-by-step test instructions that indicate how to reproduce the problem. For version 1.6, use the Test Instructions field for this information.''
* '''Pending''' means that a patch has been submitted that a JBS member or development coordinator or appropriate leadership team member believes fixes the bug. If needed, additional test instructions are entered for the issue. Every Pending issue should have instructions that tell the tester how to reproduce the problem and make sure the patch fixes the problem.
* '''In Progress''' means that an issue is being worked on. This will most likely be a situation where the issue was set to Pending but there were problems with the patch that require additional work. It also may be a case where the issue is complex and will take some time to solve. JBS members can participate in In Progress issues but generally should not start coding before discussing with others working on the issue already.
* '''Ready to commit''' means that (in general) two separate people have successfully tested the same patch file, and it works correctly with the patch. Note that, for some issues that are more complex or higher impact, we may need more than two people to test or may need to test on multiple platforms. For simple issues, such as fixing typos in language strings or comments, one tester is enough.
* '''Fixed in SVN''' means that, after reviewing the code, the JBS commit coordinators have determined that the patch is good and the change has been committed to the Joomla! codebase. At this point, it will be part of the next Joomla! maintenance release.

The flowchart below provides a visual guide to how the process for resolving bugs works.

[[Image:ResolvingIssues.jpg|1024 px]]

You do ''not'' need to be a member of the JBS to help fix bugs in Joomla. Anyone can report bugs, test patches, or submit patches. If you want to help with resolving bugs, go to the [http://joomlacode.org/gf/project/joomla/tracker/?action=TrackerItemBrowse&tracker_id=32 Tracker]. You can help resolve Open issues as outlined above. You can create and submit patches for Confirmed issues. Or you can help test Pending issues. To report about what you have done, login to joomlacode and add a comment. You'll be amazed at how much impact you can have and how good it feels to contribute to the Joomla! project.

If you have any questions, or are interested in joining the JBS, please contact the [http://community.joomla.org/magazine/author/75-mark-dexter.html JBS Coordinator].

<noinclude>[[Category:Development Working Group]][[Category:Bug Squad]]</noinclude>
[[Category:Working Groups]]

Standard form field and parameter types

2011-10-21T12:09:31Z

Radiant tech: added Form fields category

There are many different standard [[parameter]] and [[form field]] types supported in the Joomla Framework for all extension types (templates, components, modules and plugins). This section gives a brief description of each form field type, in alphabetical order. Full details of each form field type are given on the following pages.

Form fields and the [[JForm]] class were introduced in Joomla 1.6. Prior to that these standard types were referred to as parameter types and were handled by the, now deprecated, [[JParameter]] class.

{| class="wikitable" style="vertical-align:top; border:1px solid Sienna; background-color:Cornsilk;"
|- style="background-color:Wheat; font-weight:bold; text-align: left;"
!width=15%|[[Parameter]]
!width=15%|[[Form field]]
!width=70%|Description
|-
|
|{{JVer|1.6}} [[Accesslevel form field type|accesslevel]]
|provides a drop down list of viewing access levels.
|-
|
|{{JVer|1.6}} [[Cachehandler form field type|cachehandler]]
|provides a list of available cache handling options.
|-
|{{JVer|1.5}} [[Calendar parameter type|calendar]]
|{{JVer|1.6}} [[Calendar form field type|calendar]]
|provides a text box for entry of a date. An icon next to the text box provides a link to a pop-up calendar, which can also be used to enter the date value.
|-
|{{JVer|1.5}} [[Category parameter type|category]]
|
|provides a drop down list of categories from a given section.
|-
|
|{{JVer|1.6}} [[Category form field type|category]]
|provides a drop down list of categories from a given extension.
|-
|
|{{JVer|1.6}} [[Checkbox form field type|checkbox]]
|provides a single checkbox to be checked or unchecked.
|-
|
|{{JVer|1.6}} [[Checkboxes form field type|checkboxes]]
|provides unlimited checkboxes that can be used for multi-select.
|-
|
|{{JVer|1.6}} [[Combo form field type|combo]]
|provides a combo box field.
|-
|
|{{JVer|1.6}} [[Componentlayout form field type|componentlayout]]
|provides a grouped list of core and template alternate layouts for a component item.
|-
|
|{{JVer|1.6}} [[Contentlanguage form field type|contentlanguage]]
|provides a list of installed content languages for use in conjunction with the language switcher plugin.
|-
|
|{{JVer|1.6}} [[Editor form field type|editor]]
|provides an editor area field
|-
|{{JVer|1.5}} [[Editors parameter type|editors]]
|{{JVer|1.6}} [[Editors form field type|editors]]
|provides a drop down list of the available WYSIWYG editors.
|-
|
|{{JVer|1.6}} [[File form field type|file]]
|
|-
|{{JVer|1.5}} [[Filelist parameter type|filelist]]
|{{JVer|1.6}} [[Filelist form field type|filelist]]
|provides a drop down list of files from a specified directory.
|-
|{{JVer|1.5}} [[Folderlist parameter type|folderlist]]
|{{JVer|1.6}} [[Folderlist form field type|folderlist]]
|provides a drop down list of folders from a specified directory.
|-
|
|{{JVer|1.6}} [[Groupedlist form field type|groupedlist]]
|provides a drop down list of items organized into groups.
|-
|{{JVer|1.5}} [[Helpsites parameter type|helpsites]]
|{{JVer|1.6}} [[Helpsite form field type|helpsite]]
|provides a drop down list of the help sites for your Joomla installation.
|-
|{{JVer|1.5}} [[Hidden parameter type|hidden]]
|{{JVer|1.6}} [[Hidden form field type|hidden]]
|provides a hidden field for saving a parameter whose value cannot be altered directly by a user in the Administrator (it can be altered in code or by editing the ''params.ini'' file).
|-
|{{JVer|1.5}} [[Imagelist parameter type|imagelist]]
|{{JVer|1.6}} [[Imagelist form field type|imagelist]]
|provides a drop down list of image files in a specified directory.
|-
|
|{{JVer|1.6}} [[Integer form field type|integer]]
|provides a drop down list of integers between a minimum and maximum.
|-
|{{JVer|1.5}} [[Languages parameter type|languages]]
|{{JVer|1.6}} [[Language form field type|language]]
|provides a drop down list of the installed languages for the Front-end or Back-end.
|-
|{{JVer|1.5}} [[List parameter type|list]]
|{{JVer|1.6}} [[List form field type|list]]
|provides a drop down list of custom-defined entries.
|-
|
|{{JVer|1.6}} [[Media form field type|media]]
|provides modal access to the media manager for insertion of images with upload for users with appropriate permissions.
|-
|{{JVer|1.5}} [[Menu parameter type|menu]]
|{{JVer|1.6}} [[Menu form field type|menu]]
|provides a drop down list of the available menus from your Joomla site.
|-
|{{JVer|1.5}} [[Menuitem parameter type|menuitem]]
|{{JVer|1.6}} [[Menuitem form field type|menuitem]]
|provides a drop down list of the available menu items from your Joomla site.
|-
|
|{{JVer|1.6}} [[Modulelayout form field type|modulelayout]]
|provides a list of alternative layout for a module grouped by core and template.
|-
|{{JVer|1.5}} [[Password parameter type|password]]
|{{JVer|1.6}} [[Password form field type|password]]
|provides a text box for entry of a password. The password characters will be obscured as they are entered.
|-
|{{JVer|1.5}} [[Radio parameter type|radio]]
|{{JVer|1.6}} [[Radio form field type|radio]]
|provides radio buttons to select different options.
|-
|
|{{JVer|1.6}} [[Rules form field type|rules]]
|provides a matrix of group by action options for managing access control. Display depends on context.
|-
|
|{{JVer|1.6}} [[Sessionhandler form field type|sessionhandler]]
|provides a drop down list of session handler options.
|-
|{{JVer|1.5}} [[Section parameter type|section]]
|
|provides a drop down list of the sections from your Joomla site. Sections have been removed in favour of subcategories in Joomla 1.6 onwards.
|-
|{{JVer|1.5}} [[Spacer parameter type|spacer]]
|{{JVer|1.6}} [[Spacer form field type|spacer]]
|provides a visual separator between parameter field elements. It is purely a visual aid and no parameter value is stored.
|-
|{{JVer|1.5}} [[Sql parameter type|sql]]
|{{JVer|1.6}} [[SQL form field type|sql]]
|provides a drop down list of entries obtained by running a query on the Joomla Database. The first results column returned by the query provides the values for the drop down box.
|-
|
|{{JVer|1.6}} [[Templatestyle form field type|templatestyle]]
|provides a drop down list of template styles.
|-
|{{JVer|1.5}} [[Text parameter type|text]]
|{{JVer|1.6}} [[Text form field type|text]]
|provides a text box for data entry.
|-
|{{JVer|1.5}} [[Textarea parameter type|textarea]]
|{{JVer|1.6}} [[Textarea form field type|textarea]]
|provides a text area for entry of multi-line text.
|-
|{{JVer|1.5}} [[Timezones parameter type|timezone]]
|{{JVer|1.6}} [[Timezone form field type|timezone]]
|provides a drop down list of time zones.
|-
|
|{{JVer|1.6}} [[User form field type|user]]
|provides a modal list of users.
|-
|{{JVer|1.5}} [[Usergroup parameter type|usergroup]]
|
|provides a drop down list of user groups.
|-
|
|{{JVer|1.6}} [[Usergroup form field type|usergroup]]
|provides an array of check boxes allowing multi-select.
|}

<noinclude>[[Category:Components]][[Category:Modules]][[Category:Plugins]][[Category:Templates]][[Category:Development]][[Category:Parameters]][[Category:Form fields]]</noinclude>

Portal:Component Development

2011-10-19T15:10:15Z

Radiant tech: replaced modal form field how-to

__NOTOC__
== Recommended Reading ==
=== General ===
* [[Joomla Beginning Developer Course]]
* [[Setting up your workstation for Joomla! development]]
* [[Secure coding guidelines]]
=== Specific ===
<onlyinclude>
====Developing a Model-View-Controller (MVC) Component {{JVer|1.5}}====
* [[Developing a Model-View-Controller Component - Part 1]]
* [[Developing a Model-View-Controller Component - Part 2 - Adding a Model]]
* [[Developing a Model-View-Controller Component - Part 3 - Using the Database]]
* [[Developing a Model-View-Controller Component - Part 4 - Creating an Administrator Interface]]
* [[Developing a Model-View-Controller Component - Part 5 - Basic Backend Framework]]
* [[Developing a Model-View-Controller Component - Part 6 - Adding Backend Actions]]

====Developing a Model-View-Controller (MVC) Component {{JVer|1.6}}====
* [[Developing a Model-View-Controller (MVC) Component for Joomla!1.6|Introduction]]
{{Chunk:Developing a Model-View-Controller (MVC) Component for Joomla!1.6 - Contents}}

====Other component topics====
* [[File Structure and Naming Conventions]]
* [[Component Program Flow]]. UML sequence diagrams showing the control flow for a component. {{JVer|1.5}}
* [[Component parameters]]
* [[Components:xml installfile]]. An example component XML installation file. {{JVer|1.5}}
* [[Manifest files]] for the installation of extensions {{JVer|1.6}}
* [[Supporting SEF URLs in your component]]
* [[Supporting plugins in your component]]
* [[Using JPagination in your component]]
* [[Adding sortable columns to a table in a component]]
* [[How to use the JPane classes in a component]]
* [[How to use the editor in a component]]
* [[Adding AJAX to your component]]
* [[Ajax using MooTools]]
* [[How to add breadcrumbs]]
* [[How to send email from components]]
* [[How to use the JToolBar class in the frontend]]
* [[Creating a toolbar for your component]]
* [[Creating a file uploader in your component]]
* [[Adding Javascript moo.fx to your component]]
* [[Adding view layout configuration parameters]]
* [[Using a custom image in the menu bar title]]
* [[How to implement XML-RPC in a component]]
* [[Using multiple models in an MVC component]]
* [[How to create a modal form field in 1.6/1.7]] {{JVer|1.6}} {{JVer|1.7}}
* [[JController and its subclass usage overview]] {{JVer|1.6}} {{JVer|1.7}}
* [[Managing Component Updates with Joomla!1.6 - Part 1]] {{JVer|1.6}}
* [[Xml-rpc changes in Joomla! 1.6]] {{JVer|1.6}}
</onlyinclude>

== Tutorials ==
<small>List of all articles belonging to the categories "Tutorials" AND "Component Development"</small>
<DPL>
noresultsheader=\n
format = ,\n* [[%PAGE%|%TITLE%]],,
category=Tutorials
category=Component Development
</DPL>

==FAQ==
<small>List of all articles belonging to the categories "FAQ" AND "Component Development"</small>
<DPL>
noresultsheader=\n
format = ,\n* [[%PAGE%|%TITLE%]],,
category=FAQ
category=Component Development
</DPL>

Creating a modal form field

2011-10-19T12:43:06Z

Radiant tech: Created page with "This tutorial will demonstrate how to create a custom form field that will open a list view in a modal window for the selection of a single item (similar to the Select Article mo..."

This tutorial will demonstrate how to create a custom form field that will open a list view in a modal window for the selection of a single item (similar to the Select Article modal in com_content). In this case, the form field will be added to the default.xml of a view so that the field/value pair will be added to the menu item URL. For our example, assume we have a component named com_library, which includes views for "books" and "book".

{{JVer|1.6}} {{JVer|1.7}}

== Add modal form field to XML file ==
Edit '''''/components/com_library/views/book/default.xml''''' and add the new field and its attributes.

<source lang="php">
<fields name="request" addfieldpath="administrator/components/com_library/models/fields">
<fieldset name="request">
<field
name="id"
type="modal_book"
label="COM_LIBRARY_BOOK_FIELD_ID_LABEL"
description="COM_LIBRARY_BOOK_FIELD_ID_DESC"
required="true"
/>
</fieldset>
</fields>
</source>
Notice that in both the "fields" and "fieldset" declarations, we've included '''name="request"'''. This tells the menu item to add the field name and its value to the URL. The custom type as been identified as '''modal_book''' and we've given a path where the class definition for this type can be found with '''addfieldpath'''.

== Create custom form field class ==
Create the new file '''''administrator/components/com_library/models/fields/modal/book.php'''''. This file will define the JFormFieldModal_Book class which extends the [http://docs.joomla.org/JFormField/1.6 JFormField] class. More information on custom form fields can also be found at [http://docs.joomla.org/Creating_a_custom_form_field_type Creating a custom form field type].
<source lang="php">
// No direct access
defined('_JEXEC') or die('Restricted access');

jimport('joomla.form.formfield');

/**
* Book form field class
*/
class JFormFieldModal_Book extends JFormField
{
/**
* field type
* @var string
*/
protected $type = 'Modal_Book';

}
</source>

== Override getInput() method ==
Next, we'll override the [http://docs.joomla.org/JFormField::getInput/1.6 getInput method] of the parent class. This method builds the HTML for the input field.
<source lang="php">
/**
* Method to get the field input markup
*/
protected function getInput()
{
// Load modal behavior
JHtml::_('behavior.modal', 'a.modal');

// Build the script
$script = array();
$script[] = ' function jSelectBook_'.$this->id.'(id, title, object) {';
$script[] = ' document.id("'.$this->id.'_id").value = id;';
$script[] = ' document.id("'.$this->id.'_name").value = title;';
$script[] = ' SqueezeBox.close();';
$script[] = ' }';

// Add to document head
JFactory::getDocument()->addScriptDeclaration(implode("\n", $script));

// Setup variables for display
$html = array();
$link = 'index.php?option=com_library&view=books&layout=modal'.
'&tmpl=component&function=jSelectBook_'.$this->id;

$db = JFactory::getDbo();
$query = $db->getQuery(true);
$query->select('title');
$query->from('#__books');
$query->where('id='.(int)$this->value);
$db->setQuery($query);
if (!$title = $db->loadResult()) {
JError::raiseWarning(500, $db->getErrorMsg());
}
if (empty($title)) {
$title = JText::_('COM_LIBRARY_FIELD_SELECT_BOOK');
}
$title = htmlspecialchars($title, ENT_QUOTES, 'UTF-8');

// The current book input field
$html[] = '<div class="fltlft">';
$html[] = ' <input type="text" id="'.$this->id.'_name" value="'.$title.'" disabled="disabled" size="35" />';
$html[] = '</div>';

// The book select button
$html[] = '<div class="button2-left">';
$html[] = ' <div class="blank">';
$html[] = ' <a class="modal" title="'.JText::_('COM_LIBRARY_SELECT_BOOK_TITLE').'" href="'.$link.
'" rel="{handler: \'iframe\', size: {x:800, y:450}}">'.
JText::_('COM_LIBRARY_BUTTON_SELECT_BOOK').'</a>';
$html[] = ' </div>';
$html[] = '</div>';

// The active book id field
if (0 == (int)$this->value) {
$value = '';
} else {
$value = (int)$this->value;
}

// class='required' for client side validation
$class = '';
if ($this->required) {
$class = ' class="required modal-value"';
}

$html[] = '<input type="hidden" id="'.$this->id.'_id"'.$class.' name="'.$this->name.'" value="'.$value.'" />';

return implode("\n", $html);
}
</source>
Let's take a closer look at the method.
* The modal behavior is loaded.
* The javascript function SelectBook_jform_request_id is defined and will be inserted into the <head> of the document with addScriptDeclaration(). Notice that $this->id = jform_request_id. 'jform' is the form name given in the loadForm method in our model. 'request' reflects that this is a request field, and 'id' is the name of our field.
* There are several important points in the link that is created to open the modal window. We include '''layout=modal''', as this will be an alternate list view layout for 'books'. '''function=jSelectBook_.$this->id''' will be used in the modal layout to identify the function to be called when a book is selected.
* Next, we obtain the title of the currently selected book from the database or return a generic "Select Book" phrase to be shown in the input field.
* The HTML output is created. Note that this includes the hidden field that will have the id 'jform_request_id_id' and will accept the id value of the book selected in the modal window.

== Update the view ==
Since we won't need a toolbar in the modal layout, we'll revise the books view.
'''''/administrator/components/com_library/views/books/view.html.php'''''
<source lang="php">
public function display($tpl = null)
{
// Get data from the model
$items = $this->get('Items');
$pagination = $this->get('Pagination');
$state = $this->get('State');

// Check for errors
if (count($errors = $this->get('Errors'))) {
JError::raiseError(500, implode('<br />', $errors));
return false;
}

// Assign data to the view
$this->items = $items;
$this->pagination = $pagination;
$this->state = $state;

// Only set the toolbar if not modal
if ($this->getLayout() !== 'modal') {
$this->addToolBar();
}

// Display the template
parent::display($tpl);

// Set the document
$this->setDocument();
}
</source>

== Create the modal layout ==
When developers have had difficulty in implementing a modal form field, this is likely the step that is most commonly overlooked. Creating a separate modal layout is necessary in order to include links with an onclick action that will call the SelectBook_jform_request_id function. In many respects, this list view will mirror the default list view, but you may choose to leave out some columns such as the select checkboxes.

Create the new file '''''/administrator/components/com_library/views/books/tmpl/modal.php'''''.
<source lang="php">
// No direct access
defined('_JEXEC') or die('Restricted access');

// Load tooltip behavior
JHtml::_('behavior.tooltip');
$listOrder = $this->escape($this->state->get('list.ordering'));
$listDirn = $this->escape($this->state->get('list.direction'));

$function = JRequest::getCmd('function', 'jSelectBook');
?>
<form action="<?php echo $this->action; ?>" method="post" name="adminForm" id="adminForm">
<table class="adminlist">
<thead>
<tr>
<th>
<?php echo JHtml::_('grid.sort', 'COM_LIBRARY_BOOKS_HEADING_TITLE', 'title', $listDirn, $listOrder); ?>
</th>
<th>
<?php echo JHtml::_('grid.sort', 'COM_LIBRARY_BOOKS_HEADING_STATE', 'state', $listDirn, $listOrder); ?>
</th>
<th>
<?php echo JHtml::_('grid.sort', 'COM_LIBRARY_BOOKS_HEADING_HITS', 'hits', $listDirn, $listOrder); ?>
</th>
<th>
<?php echo JHtml::_('grid.sort', 'COM_LIBRARY_BOOKS_HEADING_CREATED', 'created', $listDirn, $listOrder); ?>
</th>
<th>
<?php echo JHtml::_('grid.sort', 'COM_LIBRARY_BOOKS_HEADING_MODIFIED', 'modified', $listDirn, $listOrder); ?>
</th>
<th width="5">
<?php echo JHtml::_('grid.sort', 'COM_LIBRARY_BOOKS_HEADING_ID', 'id', $listDirn, $listOrder); ?>
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="6"><?php echo $this->pagination->getListFooter(); ?></td>
</tr>
</tfoot>
<tbody>
<?php foreach ($this->items as $i => $item) : ?>
<tr class="row<?php echo $i % 2; ?>">
<td>
<a class="pointer" onclick="if (window.parent) window.parent.<?php echo $this->escape($function);?>('<?php echo $item->id; ?>', '<?php echo $this->escape(addslashes($item->title)); ?>');"><?php echo $this->escape($item->title); ?></a>
</td>
<td align="center"><?php echo JHtml::_('jgrid.published', $item->state, $i, 'books.'); ?></td>
<td align="right"><?php echo $item->hits; ?></td>
<td align="center"><?php echo $item->created; ?></td>
<td align="center"><?php echo $item->modified; ?></td>
<td><?php echo $item->id; ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div>
<input type="hidden" name="task" value="" />
<input type="hidden" name="boxchecked" value="0" />
<input type="hidden" name="filter_order" value="<?php echo $listOrder; ?>" />
<input type="hidden" name="filter_order_Dir" value="<?php echo $listDirn; ?>" />
<?php echo JHtml::_('form.token'); ?>
</div>
</form>
</source>

This layout has two important differences when compared to the default layout.
* We obtain the name of the javascript function using '''JRequest::getCmd('function', 'jSelectBook')'''.
* The value of $function is then used in the onclick event on the title links.

== Contributors ==
[[User:radiant_tech|Denise McLaurin]]

[[Category:Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Form fields]]
[[Category:Joomla! 1.6]]
[[Category:Joomla! 1.7]]

Archived:How to create DOCX views

2011-10-19T12:28:53Z

Radiant tech: revised categories

The following tutorial will demonstrate how to generate a view as a Microsoft Word document. This example is from a Recipe component and we will add the ability to save the recipe as a Word file. You may note this pattern of steps could also be used to create PDF views in a component with the use of a PDF library such as TCPDF.

{{JVer|1.6}} {{JVer|1.7}}

== Download PHPdocx ==
PHPdocx is a PHP library which can help you dynamically generate Word documents. Both a Free and a Pro version are available for download. Visit http://www.phpdocx.com to select the version you prefer and download the package.

We will add the new library within the 'libraries' directory on your website. This would allow you to easily access the library with other components if desired. Create a new subdirectory beneath 'libraries' on your site named ''phpdocx''. Extract the zip file on your computer and upload the contents to the new subdirectory.

== Create the DOCX view ==
In the frontend of the component structure, we will create a docx view for the recipe. Create the file ''<component>/views/<view>/view.docx.php''. Links that include "&tmpl=component&format=docx" will look for this file in the relevant view folder.

Assuming you are replicating the content of default.php to be shown instead in Word, the display() method of our View class will be the same as view.html.php with one important change. Be sure to set ''$tpl=docx'' rather than ''$tpl=null'' as an argument of the display() function.
<source lang="php">
class RecipesViewRecipe extends JView
{
function display($tpl='docx')
{
// Get data from model
$item = $this->get('Item');
$state = $this->get('State');

// Check for errors
if (count($errors = $this->get('Errors'))) {
JError::raiseError(500, implode('<br />', $errors));
return false;
}

// Add params
$this->params = $this->state->get('params');

// Assign to template
$this->item = $item;
$this->state = $state;

parent::display($tpl);
}
}
</source>

== Create Word document generator ==
Rather than naming our template file ''default.php'' as we would with an HTML view, we will include the format in the name. Create the file ''<component>/views/<view>/tmpl/default_docx.php''. A simple example which can be done with the Free version of PHPdocx is shown below.
<source lang="php">
// No direct access
defined('_JEXEC') or die('Restricted access');

// include the PHPdocx library
require_once JPATH_SITE.'/libraries/phpdocx/classes/CreateDocx.inc';

$docx = new CreateDocx();

// Add a Page Header
if ($this->item->params->get('word_header')) {
$paramsHeader = array('name'=>'images/logo.gif', 'jc'=>'center', 'i'=>'single');
$docx->addHeader('Document Heading', $paramsHeader);
}

// Add a Page Footer
if ($this->item->params->get('word_footer')) {
$paramsFooter = array('pager'=>'true', 'pagerAlignment'=>'right');
$docx->addFooter('Sitename', $paramsFooter);
}

// Add the Recipe title
$paramsText = array('font'=>'Arial', 'sz'=12);
$docx->addText($this->item->title, $paramsText);

// Generate the document
$docx->createDocx('tmp/filename');

// Force the document to the browser
$app = JFactory::getApplication();
$app->redirect('tmp/filename.docx');

</source>
Obviously, the above example is of little real value, but demonstrates some basic concepts in working with the PHPdocx library.

Notice that the location and filename of the Word document is determined by the argument you provide the createDocx() method. In this case the file is created in the tmp/ directory off our site root and saved as ''filename.docx''.

The Free version of the library does not include the CreateDocxAndDownload() method (which would send the created file to the browser), so I've included the step of using $app->redirect() to get the file.

The CreateDocx.inc file is well commented to help familiarize you with the possible attribute/value pairs of each method. The Pro version of the library allows much more flexibility in content generation, including translation of HTML and CSS styles to WordML and use of the MailMerge function. The image below will give you an idea of what is possible with the expanded library.

[[File:Phpdocx-example.jpg|300px]]

== Creating a Word icon button ==
Now that we have our DOCX view in place, we'll want to create an icon (similar to the print and email icons in Articles) with which to call it. Create the file ''<component>/helpers/icon.php''.
<source lang="php">
// No Direct Access
defined('_JEXEC') or die('Restricted access');

// Component HTML Helper
class JHtmlIcon
{
static function msword($item, $params, $attribs = array())
{
$url = 'index.php?option=<component>&view=<view>&id='.$item->id.'&tmpl=component&format=docx';
$text = JHtml::_('image', 'images/word_icon.gif', JText::_('<component>_ICON_MSWORD'), NULL, false);
$attribs['title'] = JText::_('<component>_ICON_MSWORD');

$output = JHtml::_('link', JRoute::_($url), $text, $attribs);
return $output;
}
}
</source>
The last argument in the JHtml image method above is important as an indicator of where the system will look for the word_icon.gif image. By setting the value to ''false'', we are telling it to look for the specific path and file name we've provided, directly from the site root. In this case, it will be in images/, the default directory for Media Manager.

== Add the Icon to the HTML view ==
To finish up, we open our ''default.php'' file and add something similar to the following:
<source lang="php">
<?php if ($params->get('show_word_icon')) : ?>
<ul class="actions">
<li class="word-icon">
<?php echo JHtml::_('icon.msword', $this->item, $params); ?>
</li>
</ul>
<?php endif; ?>
</source>

== Contributors ==
[[User:radiant_tech|Denise McLaurin]]

[[Category:Development]]
[[Category:Component Development]]
[[Category:Tutorials]]
[[Category:Joomla! 1.6]]
[[Category:Joomla! 1.7]]

Talk:Creating a modal form field using JFormFieldModal

2011-10-18T13:30:17Z

Radiant tech: Created page with "This page is very misleading as it is a proposal for a new feature and not an actual "how-to" for working with the current system."

This page is very misleading as it is a proposal for a new feature and not an actual "how-to" for working with the current system.

Archived:How to create DOCX views

2011-10-07T22:01:22Z

Radiant tech:

The following tutorial will demonstrate how to generate a view as a Microsoft Word document. This example is from a Recipe component and we will add the ability to save the recipe as a Word file. You may note this pattern of steps could also be used to create PDF views in a component with the use of a PDF library such as TCPDF.

{{JVer|1.6}} {{JVer|1.7}}

== Download PHPdocx ==
PHPdocx is a PHP library which can help you dynamically generate Word documents. Both a Free and a Pro version are available for download. Visit http://www.phpdocx.com to select the version you prefer and download the package.

We will add the new library within the 'libraries' directory on your website. This would allow you to easily access the library with other components if desired. Create a new subdirectory beneath 'libraries' on your site named ''phpdocx''. Extract the zip file on your computer and upload the contents to the new subdirectory.

== Create the DOCX view ==
In the frontend of the component structure, we will create a docx view for the recipe. Create the file ''<component>/views/<view>/view.docx.php''. Links that include "&tmpl=component&format=docx" will look for this file in the relevant view folder.

Assuming you are replicating the content of default.php to be shown instead in Word, the display() method of our View class will be the same as view.html.php with one important change. Be sure to set ''$tpl=docx'' rather than ''$tpl=null'' as an argument of the display() function.
<source lang="php">
class RecipesViewRecipe extends JView
{
function display($tpl='docx')
{
// Get data from model
$item = $this->get('Item');
$state = $this->get('State');

// Check for errors
if (count($errors = $this->get('Errors'))) {
JError::raiseError(500, implode('<br />', $errors));
return false;
}

// Add params
$this->params = $this->state->get('params');

// Assign to template
$this->item = $item;
$this->state = $state;

parent::display($tpl);
}
}
</source>

== Create Word document generator ==
Rather than naming our template file ''default.php'' as we would with an HTML view, we will include the format in the name. Create the file ''<component>/views/<view>/tmpl/default_docx.php''. A simple example which can be done with the Free version of PHPdocx is shown below.
<source lang="php">
// No direct access
defined('_JEXEC') or die('Restricted access');

// include the PHPdocx library
require_once JPATH_SITE.'/libraries/phpdocx/classes/CreateDocx.inc';

$docx = new CreateDocx();

// Add a Page Header
if ($this->item->params->get('word_header')) {
$paramsHeader = array('name'=>'images/logo.gif', 'jc'=>'center', 'i'=>'single');
$docx->addHeader('Document Heading', $paramsHeader);
}

// Add a Page Footer
if ($this->item->params->get('word_footer')) {
$paramsFooter = array('pager'=>'true', 'pagerAlignment'=>'right');
$docx->addFooter('Sitename', $paramsFooter);
}

// Add the Recipe title
$paramsText = array('font'=>'Arial', 'sz'=12);
$docx->addText($this->item->title, $paramsText);

// Generate the document
$docx->createDocx('tmp/filename');

// Force the document to the browser
$app = JFactory::getApplication();
$app->redirect('tmp/filename.docx');

</source>
Obviously, the above example is of little real value, but demonstrates some basic concepts in working with the PHPdocx library.

Notice that the location and filename of the Word document is determined by the argument you provide the createDocx() method. In this case the file is created in the tmp/ directory off our site root and saved as ''filename.docx''.

The Free version of the library does not include the CreateDocxAndDownload() method (which would send the created file to the browser), so I've included the step of using $app->redirect() to get the file.

The CreateDocx.inc file is well commented to help familiarize you with the possible attribute/value pairs of each method. The Pro version of the library allows much more flexibility in content generation, including translation of HTML and CSS styles to WordML and use of the MailMerge function. The image below will give you an idea of what is possible with the expanded library.

[[File:Phpdocx-example.jpg|300px]]

== Creating a Word icon button ==
Now that we have our DOCX view in place, we'll want to create an icon (similar to the print and email icons in Articles) with which to call it. Create the file ''<component>/helpers/icon.php''.
<source lang="php">
// No Direct Access
defined('_JEXEC') or die('Restricted access');

// Component HTML Helper
class JHtmlIcon
{
static function msword($item, $params, $attribs = array())
{
$url = 'index.php?option=<component>&view=<view>&id='.$item->id.'&tmpl=component&format=docx';
$text = JHtml::_('image', 'images/word_icon.gif', JText::_('<component>_ICON_MSWORD'), NULL, false);
$attribs['title'] = JText::_('<component>_ICON_MSWORD');

$output = JHtml::_('link', JRoute::_($url), $text, $attribs);
return $output;
}
}
</source>
The last argument in the JHtml image method above is important as an indicator of where the system will look for the word_icon.gif image. By setting the value to ''false'', we are telling it to look for the specific path and file name we've provided, directly from the site root. In this case, it will be in images/, the default directory for Media Manager.

== Add the Icon to the HTML view ==
To finish up, we open our ''default.php'' file and add something similar to the following:
<source lang="php">
<?php if ($params->get('show_word_icon')) : ?>
<ul class="actions">
<li class="word-icon">
<?php echo JHtml::_('icon.msword', $this->item, $params); ?>
</li>
</ul>
<?php endif; ?>
</source>

== Contributors ==
[[User:radiant_tech|Denise McLaurin]]

[[Category:Development]]
[[category:Joomla! 1.6]]
[[category:Joomla! 1.7]]
[[category:Articles that require a review]]

File:Phpdocx-example.jpg

2011-10-07T21:55:52Z

Radiant tech:

Archived:How to create DOCX views

2011-10-07T21:07:57Z

Radiant tech: Created page with "The following tutorial will demonstrate how to generate a view as a Microsoft Word document. This example is from a Recipe component and we will add the ability to save the reci..."

The following tutorial will demonstrate how to generate a view as a Microsoft Word document. This example is from a Recipe component and we will add the ability to save the recipe as a Word file. You may note this pattern of steps could also be used to create PDF views in a component with the use of a PDF library such as TCPDF.

{{JVer|1.6}} {{JVer|1.7}}

== Download PHPdocx ==
PHPdocx is a PHP library which can help you dynamically generate Word documents. Both a Free and a Pro version are available for download. Visit target: http://www.phpdocx.com to select the version you prefer and download the package.

We will add the new library within the 'libraries' directory on your website. This would allow you to easily access the library with other components if desired. Create a new subdirectory beneath 'libraries' on your site named 'phpdocx'. Extract the zip file on your computer and upload the contents to the new subdirectory.

== Create the DOCX view ==
In the frontend of the component structure, we will create a docx view for the recipe. Create the file ''<component>/views/<view>/view.docx.php''. Links that include "&tmpl=component&format=docx" will look for this file in the relevant view folder.

Assuming you are replicating the content of default.php to be shown instead in Word, the display() method of our View class will be the same as view.html.php with one important change. Be sure to set ''$tpl=docx'' rather than ''$tpl=null'' as an argument of the display() function.
<source lang="php">
class RecipesViewRecipe extends JView
{
function display($tpl='docx')
{
// Get data from model
$item = $this->get('Item');
$state = $this->get('State');

// Check for errors
if (count($errors = $this->get('Errors'))) {
JError::raiseError(500, implode('<br />', $errors));
return false;
}

// Add params
$this->params = $this->state->get('params');

// Assign to template
$this->item = $item;
$this->state = $state;

parent::display($tpl);
}
}
</source>

== Create Word document generator ==
Rather than naming our template file ''default.php'' as we would with an HTML view, we will include the format in the name. Create the file ''<component>/views/<view>/tmpl/default_docx.php''. A simple example which can be done with the Free version of PHPdocx is shown below.
<source lang="php">
// No direct access
defined('_JEXEC') or die('Restricted access');

// include the PHPdocx library
require_once JPATH_SITE.'/libraries/phpdocx/classes/CreateDocx.inc';

$docx = new CreateDocx();

// Add a Page Header
if ($this->item->params->get('word_header')) {
$paramsHeader = array('name'=>'images/logo.gif', 'jc'=>'center', 'i'=>'single');
$docx->addHeader('Document Heading', $paramsHeader);
}

// Add a Page Footer
if ($this->item->params->get('word_footer')) {
$paramsFooter = array('pager'=>'true', 'pagerAlignment'=>'right');
$docx->addFooter('Sitename', $paramsFooter);
}

// Add the Recipe title
$paramsText = array('font'=>'Arial', 'sz'=12);
$docx->addText($this->item->title, $paramsText);

// Generate the document
$docx->createDocx('tmp/filename');

// Force the document to the browser
$app = JFactory::getApplication();
$app->redirect('tmp/filename.docx');

</source>
Obviously, the above example is of little real value, but demonstrates some basic concepts in working with the PHPdocx library.

Notice that the location and filename of the Word document is determined by the argument you provide the createDocx() method. In this case the file is created in the tmp/ directory off our site root and saved as ''filename.docx''.

The Free version of the library does not include the CreateDocxAndDownload() method (which would send the created file to the browser), so I've included the step of using $app->redirect() to get the file.

The CreateDocx.inc file is well commented to help familiarize you with the possible attribute/value pairs of each method. The Pro version of the library allows much more flexibility in content generation, including translation of HTML and CSS styles to WordML and use of the MailMerge function.

== Creating a Word icon button ==
Now that we have our DOCX view in place, we'll want to create an icon (similar to the print and email icons in Articles) with which to call it. Create the file ''<component>/helpers/icon.php''.
<source lang="php">
// No Direct Access
defined('_JEXEC') or die('Restricted access');

// Component HTML Helper
class JHtmlIcon
{
static function msword($item, $params, $attribs = array())
{
$url = 'index.php?option=<component>&view=<view>&id='.$item->id.'&tmpl=component&format=docx';
$text = JHtml::_('image', 'images/word_icon.gif', JText::_('<component>_ICON_MSWORD'), NULL, false);
$attribs['title'] = JText::_('<component>_ICON_MSWORD');

$output = JHtml::_('link', JRoute::_($url), $text, $attribs);
return $output;
}
}
</source>
The last argument in the JHtml image method above is important as an indicator of where the system will look for the word_icon.gif image. By setting the value to ''false'', we are telling it to look for the specific path and file name we've provided, directly from the site root. In this case, it will be in images/, the default directory for Media Manager.

== Add the Icon to the HTML view ==
To finish up, we open our ''default.php'' file and add something similar to the following:
<source lang="php">
<?php if ($params->get('show_word_icon')) : ?>
<ul class="actions">
<li class="word-icon">
<?php echo JHtml::_('icon.msword', $this->item, $params); ?>
</li>
</ul>
<?php endif; ?>
</source>

== Contributors ==
[[User:radiant_tech|Denise McLaurin]]

[[Category:Development]]
[[category:Joomla! 1.6]]
[[category:Joomla! 1.7]]
[[category:Articles that require a review]]

Text form field type

2011-09-16T22:09:27Z

Radiant tech: added more optional params available to this method

[[Image:Params.text.jpg|right]]

{{Ambox|type=notice|text=In Joomla! 1.5, [[Form field|form fields]] were [[Parameter|parameters]]. For that version, you may want to use the corresponding [[Text parameter type]].}}

The '''text''' form field type provides a text box for data entry. If the field has a value saved, this value is displayed when the page is first loaded. If not, the default value (if any) is selected.

* '''type''' (mandatory) must be ''text''.
* '''name''' (mandatory) is the unique name of the field.
* '''label''' (mandatory) (translatable) is the descriptive title of the field.
* '''size''' (optional) is the width of the text box in characters. If omitted the width is determined by the browser. The value of size does not limit the number of characters that may be entered.
* '''maxlength''' (optional) limits the number of characters that may be entered.
* '''default''' (optional) (translatable) is the default value.
* '''description''' (optional) (translatable) is text that will be shown as a tooltip when the user moves the mouse over the drop-down box.
* '''class''' (optional) is a CSS class name for the HTML form field. If omitted this will default to 'text_area'.
* '''readonly''' (optional)
* '''disabled''' (optional)

Example XML field definition:
<source lang="xml"><field name="mytextvalue" type="text" default="Some text" label="Enter some text" description="" size="10" /></source>
<noinclude>
=== See also ===
* [[Textarea form field type]]
* [[Standard form field types|List of standard form field types]]
[[Category:Standard form field types]]</noinclude>

Editor form field type

2011-09-16T14:54:04Z

Radiant tech:

The '''Editor''' field type provides a WYSIWYG editor.

* '''type''' (mandatory) must be ''editor''.
* '''name''' (mandatory) is the unique name of the parameter.
* '''label''' (mandatory) (translatable) is the descriptive title of the field.
* '''width''' (optional) defines the width (in pixels) of the wysiwyg editor and defaults to 100%.
* '''height''' (optional) defines the height (in pixels) of the wysiwyg editor and defaults to 250px.
* '''cols''' (optional) defines the width of the editor (in columns).
* '''rows''' (optional) defines the height of the editor (in rows).
* '''buttons''' (optional) can be an array of plugin buttons to be included or set to false
* '''hide''' (optional) array of plugin buttons to be hidden
* '''editor''' specifies the editor to be used and can include two options (editor="desired|alternative")
* '''filter''' (optional) allow the system to save certain html tags or raw data.

Example XML Definition
<source lang="xml"><field name="test1" label ="Test Field" type="editor" width="300" filter="safehtml" /></source>
<noinclude>

=== See also ===
* [[Textarea parameter type]]
* [[Standard form field types|Table of all standard form field types]]
[[Category:Standard form field types]]
</noinclude>

Archived talk:Developing a MVC Component/Basic backend

2011-09-01T11:39:35Z

Radiant tech:

Items to be adding/changed on this page:

Note that if using core J! javascript in a form, id="adminForm" must also be included.

Shouldn't references to $db->getDBO() be changed to $db->getDbo() ?

And what is this comment referring to? "The _populateState method is, by default, automatically called when a state is read by the getState method."

[[User:Radiant tech|Radiant tech]] 06:37, 1 September 2011 (CDT)

Archived talk:Developing a MVC Component/Basic backend

2011-09-01T11:37:59Z

Radiant tech: Created page with "Items to be adding/changed on this page: Note that if using core J! javascript in a form, id="adminForm" must also be included. Shouldn't references to $db->getDBO() be changed t..."

Items to be adding/changed on this page:
Note that if using core J! javascript in a form, id="adminForm" must also be included.
Shouldn't references to $db->getDBO() be changed to $db->getDbo() ?

And what is this comment referring to? "The _populateState method is, by default, automatically called when a state is read by the getState method."
[[User:Radiant tech|Radiant tech]] 06:37, 1 September 2011 (CDT)

Archived:Upgrading a Joomla 1.5 template to Joomla 2.5

2011-08-19T12:01:13Z

Radiant tech:

{{RightTOC}}
This page provides feedback on the process of upgrading a Joomla 1.5 template for use with Joomla 1.6 from those who have already attempted it. This is intended to be a living document that can be added to as more experience is gained and is likely to be reorganised periodically. If you have encountered a problem when upgrading a template, or if you have any information that you think will help smooth the way for others who will follow then please add your comments initially on the Talk page. We will then collate the information and incorporate it into this page.

[[User:Chris Davenport|Chris Davenport]] prepared [http://www.slideshare.net/chrisdavenport/template-changes-for-joomla-16 slides for a presentation at the JoomlaDay UK 2010 event] which explain the changes in templates for Joomla! 1.6.

== Template parameters ==
In both Joomla! 1.5 and 1.6 template parameters are defined in templateDetails.xml.

Whereas in 1.5 parameters are defined as part of the <code><params></code> section, and each parameter is defined as a <code><param></code>, in 1.6 template parameters are contained in the <code><config></code> section and treated as a <code><field></code> nested within the <code><fieldset></code> and <code><fields></code> tags, as illustrated below.

<pre>
<config>
<fields name="params">
<fieldset name="basic">
<field name="" type=" default="" label="" description="">
<option value="1">On</option>
<option value="0">Off</option>
</field>
<field name="" type="" default="" label="e" description="" />
</fieldset>
</fields>
</config>
</pre>

<code><fieldset name="basic"></code> wraps the parameters in a slider and using name="basic" labels that slider as "Basic Options" and name="advanced" labels it as "Advanced Options".

The name="" type=" default="" label="" description="" attributes still apply.

== Template Manifest File ==
Two other important changes to the templateDetails.xml file include: 1) adding the new 1.6 Doctype
and 2) changing the <install> tag to <extension> as shown below.
<pre>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<extension version="1.7" type="template" client="site">
</pre>
Notice the additional new "client" attribute which is set to "site" for a front-facing template and "administrator" for an back-end template.

== Objects and Methods ==
=== Sitename ===

* <code><?php echo $mainframe->getCfg('sitename');?></code> is now <code>$app->getCfg('sitename');</code> Where <code>$app = JFactory::getApplication();</code>

=== Error Codes ===
* <code>$this->error->code</code> is replaced by <code>$this->error->getCode();</code>
* <code>$this->error->message</code> is replaced by <code>$this->error->getMessage();</code>

[[Category:Joomla! 1.6]]
[[Category:Template Development]]
[[Category:Tutorials]]

Talk:Custom error pages

2008-02-29T17:13:32Z

Radiant tech: New page: I don't believe the method described here is accurate. Please see a proposed fix in this forum thread: [http://forum.joomla.org/viewtopic.php?f=469&t=267189|Customizing Error Pages]. ~~~~

I don't believe the method described here is accurate. Please see a proposed fix in this forum thread: [http://forum.joomla.org/viewtopic.php?f=469&t=267189|Customizing Error Pages]. [[User:Radiant tech|Radiant tech]] 12:13, 29 February 2008 (EST)

Archived:Starting with Joomla! FAQs

2008-02-22T15:40:11Z

Radiant tech:

==What license is Joomla! released under?==

Joomla! is released under the GPL (Gnu General Public License 2).

Details of the GPL can be found here: http://www.gnu.org/licenses/gpl.html.

==What do the locks mean? How do I get rid of them?==

At any given time you may see a padlock next to a specific item in Joomla!'s administrative backend. These padlocks may be displayed next to any of the following (Content Items, Menu Items, Modules, etc).

The Joomla! system places these padlocks next to an item to indicate that a user is currently editing (or checked out) the item. The lock is removed by the system administratorvwhen the user clicks on the "Save" button for that item.
If the user never clicks "Save" and instead hits the "Back" button or navigates to another page, then the item stays locked. If another user needs to work with the item he or she must have the item checked back in before they can work on it.

There are two ways of checking items back in. One way is to contact the person that has the item checked out to see if they are done with the item.

The other option utilises the administrative back end;
Click on "System => Global check in"
This option should be used very carefully, especially in multi-user environments. This single action checks in all previously checked out items, whether they were checked out by you or not. Possible undesirable side effects may be that multiple editors end up working on the same document.
In this case whoever clicks the save button last has their version saved as the final copy.

==How do I eliminate the pathway or breadcrumbs?==

The pathway or breadcrumb is a hierarchical trail that shows your current location on the site. The breadcrumb follows the Section, Category, Content Item hierarchy and a site's home page is always listed as the root of the hierarchy as "Home".

An example is as follows; You are currently reading a content item "New Page". This content item is a member of the "Pages " category. In the turn the pages category is a member of the "Books" section. In this case the breadcrumb for that page would look like: "Home >> Books >> Pages >> New Page".

'''1.0'''

If you wish to eliminate the pathway entirely, edit your template html (index) file. Usually it will look like this:
<div id="pathway">
<?php mosPathWay(); ?>
</div>

If you wish to eliminate it on a specific page, such as just the home page, you can modify the template in this way:
New line:if($option != "" && $option != "com_frontpage")
New line:{
New line:?>
Existing:<div id="pathway">
Existing:<?php mosPathWay(); ?>
Existing:</div>
New line:}
New line:?>
Keep in mind: The first line says that if the option in the url does not equal com_frontpage (!="com_frontpage") display the pathway. In php ! means not.

'''1.5'''

Breadcrumbs have been added as a core module in Joomla! 1.5, and can be enabled or disabled for all pages directly through the Module Manager in the Back-end.

To prevent the breadcrumb pathway from displaying on the Frontpage only, revise the code of the index.php file of your template as follows:
: Replace
<source lang="php"><jdoc:include type="module" name="breadcrumbs" /></source>

: with
<source lang="php">
<?php if( JRequest::getVar( 'view' ) == 'frontpage' ) { ?>
<p> </p>
<?php } else { ?>
<p>You are here: <jdoc:include type="module" name="breadcrumbs" /></p>
<?php } ?>
</source>

==How do I exit the wrapper?==

(needs permission or rewrite)

==How do I get rid of the News Flash or other module?==

To disable the news flash (or any other) module from being displayed on the front end of the website, you first need to log into the administrative back end.

'''1.0'''

* Once in the back end, on the top menu click Modules => Site Modules.
* Locate the Newsflash module. You may need to navigate to another page as there are many modules and they are not all displayed on the first page.
* Click the "Next" or "Previous" links at the bottom of the page until the module is located.
* Once the module is located, click on the icon next for this module name in the "Published" column.

The icon should change to a red "X" which indicates that the module is now unpublished and invisible on the site’s front end.

'''1.5'''

*Once in the back end, go to Extensions, Module Manager
*Locate the newsflash or other module
*Once the module is located, click on the icon next for this module name in the "Enabled" column.

==How do I remove the page title from the front page of my site?==

(needs permission or rewrite)

==How do I find an extension to do [fill in the blank]?==

The official Joomla! extensions site: http://extensions.joomla.org/ is the main source for extensions.

If you cannot find what you need there, you should also search the Joomla! Extensions Directory Forum.

If you still cannot find the right component then you should post a request or question in the Extensions Directory forum.

1.5 forum: http://forum.joomla.org/index.php/board,470.0.html

1.0 forum: http://forum.joomla.org/index.php/board,465.0.html

==Can content items be assigned to multiple categories or sections?==

No, content items cannot be assigned to multiple categories or sections. In Joomla! 1.0.x content items are restricted to a single category in a single section.

To have the same content in several sections or categories you must make separate content items for each category.

Workarounds include using menus rather than dynamic lists of content items and using various third party extensions that simulate assignment to multiple categories.

==How do I control what items appear in my newsflashes?==

Newsflash is a module that displays content from specific sections and/or categories.

* In the administrative back end from the top menu select “Modules => Site Modules”.
* Click on “Newsflash” to edit the module.
* Go to the parameters section of the page.
* Next to the “Category” parameter click on the drop down menu to select which category of content items will be displayed by this module. (In older versions of Joomla! the section and/or category id numbers have to be manually entered).
* Click the "Save" button to make your changes permanent.

==How do I change the image(s) in my template?==

One common template change is to use your own graphic/image. Simple graphics (not banners) are usually linked in your template's html file. Simply change the reference to the image of your choice in the your template's html file.

'''1.0'''
In the adminstrative interface do this by going to Site =>Template manager and then selecting your template. Click the icon for html.

'''1.5'''

In the administrative interface do this by going to Extensions =>Templates.

Select the template you want to modify and click edit. Then click the icon for html.

Keep in mind that if it is a different size than the original image this may change the appearance of the site in unexpected ways.

Additional information:

The images for a given template are generally located in this folder:
/templates/templatename/images (Substitute the name of the template you are using in place of "templatename").

A trick for finding the name of the image is to put your cursor over it and click right. Select view image. This will display the image and give its full url. Sometimes the images are background images. This is viewable in Firefox or you can look for the background tag in your page source.

How to upload an image:

There are many ways to upload images. Which one you use will depend on your host and server.

1. You can use the media manager.
2. You can use an FTP client.
3. You can use a cPanel file manager.
4. You can use various extensions that allow uploading.

==How do I change the introductory text for weblinks?==

By default Joomla! 1.0.x uses the 'We are out on the web ..." introductory text. If you wish to change you have two options.
1. In your menu link to the weblinks component, add introductory text to the parameters. This replaces the default text. Note: to see all of the parameters you need to create the component link and then edit it.

2. Change your language file (e.g. english.php). It is found in _WEBLINKS_DESC.

==Why cannot I edit my content from the front end?==

The most common cause of this problem is the item is "checked out." Either the item is being edited by another user or (more commonly) that the last time someone opened (edited) the file it was not closed properly (or saved).

If you were the person that last edited the article, log into the back end of the site, go to the content manager and find the article in question. It will have a lock next to its name. Open the file and then save it (or cancel). When the content list is reloaded the lock should be gone.

Alternatively, someone with superadministrator privileges can use Global Checkin to checkin all checked out items. If using this option, make sure that no one is actively editing a file or their work may be lost.

It is possible to check in your own items that you may have accidentally locked if a link to checkin is available. This may be called something else. You can add this link to a menu by creating a URL link like this: index.php?option=com_user&task=CheckIn

Note: It is important that whenever you open an article for editing you should close it using either "save" (floppy icon) or "cancel" (red x icon) when finished with your edits. Failure to do so will cause this lock as described above.

==How do I link from inside content to another content item?==

The simple answer is that you get the page URL you want to link to and then make a link using whatever text editor you are using or (if you have no wysiwyg) with html.

The more complicated answer is that some text editors have fancier links managers. A number of these editors are available in the Joomla! Extensions Directory.

==How is access control set up in Joomla!?==

Joomla! has a limited access control system. By default there are the following groups:
Front End Only

* Public
* Registered
* Author
* Publisher

Back End

* Manager
* Administrator
* Super Administrator

There are two basic ways that access control is used:

* To control the ability of users to see modules, content and menu items;
* To control the actions that users can take.

Access to content, modules and menu links

All groups except Public and Registered are considered "Special."

When creating content or setting parameters for modules, you can set access to: Public, Registered or Special.

These groups are hierarchical. Groups further down the list have all the rights of those above them.

Control of privileges to create and edit content and modify administrative settings.

Group Front End Back End
Public Can view pubic pages None
Registered Same permissions as "Public" plus can view content and modules limited to registered. Can submit weblinks None
Author Same permissions as "Registered" plus can submit but not publish content. None
Editor Same permissions as "Author" plus edit any content. None
Publisher Same permissions as "Publisher" plus can publish and edit any content. None
Manager Same permissions as as "Publisher" Limited
Administrator Same permissions as "Publisher" Most privileges
Super Administrator Same permissions as "Publisher" All privileges
Each group can view the content and modules at the same level or above on this table.

There is no way to create additional access groups without modifying Joomla!'s core files.

There are some extensions available which provide additional access control capabilities.

You can learn more about access control here:

http://help.joomla.org/images/User_manual/joomal_users_manual_combined.pdf

==Where are the web pages?==

If you are coming from a traditional website made up of separate html pages, you may well wonder where the pages are.

In Joomla! almost everything that you would normally think of as a web page is actually stored in a MySQL database. When you create a new page, your content is stored in a database record, not in a separate file.

Then when your site is viewed, Joomla! calls up different items from your database and puts them together to make what is displayed to the user.

One exception is that your images are usually stored in the images directory and not the database.

Your MySQL database usually is created by you during the installation process (unless you use a Fantastico or a similar installer that will create the database automatically). If you have a control panel on a linux host, you can usually access MySQL through a program called phpAdmin. This will allow you to view your database.

==What determines what is shown on my frontpage?==

Frontpage is a component that is part of the core of Joomla!, like the front page of a newspaper, it shows (usually) multiple pieces of content arranged in some way.

When you install Joomla! the front page component is by default set as the homepage of your site (that is it is the first link on your Main Menu) but front page does not have to be your "home" page.

What exactly appears on the front page and how it is laid out is controlled in two ways. First, if you open the menu link in your menu manager in the back end there are numerous parameters that control the number of items shown, the number of columns etc.

To control which items are shown you must also indicate that an item should be placed on the front page by editing the parameters for the content item. In the back end this will be indicated by an icon in the front page column of the list of content items/articles.

In addition, you can use the front page manager (in the content menu of the backend) to control the publication dates and other variables for content items that are on the front page.

==What determines my home page?==

Your "homepage" in a traditional html site--the page that shows when you type mydomain.com for example-- would be the page displaying that is in the index.html file.

Joomla! is a database driven CMS so it does not have html pages, but rather pulls up the pieces of pages from a mysql database.

When you install Joomla! by default it has a menu link to the frontpage component as the home page. However, any content or component or other link can be used as the "home" page. The default page is controlled using the Main Menu.

Changing the default page.

'''1.0'''

The "page" that shows when a user navigates to mydomain.com is the page created by clicking on the first link on the Main Menu. The link can be called anything (Home, Bob it does not matter), that is the page that will show.

This menu can be displayed anywhere and can be displayed vertically or horizontally or not at all. The menu does not even need to be published.

'''1.5'''

The "page" that shows is determined by the Main Menu. Go to Menu ==>Main Menu. Select the item you would like as the homepage and click the default icon.

==What are section, categories, content items and articles?==

Joomla! is a content management system. Sections and categories allow you to organize your content.

The basic structure is:
Sections include Categories.
Categories include content items (1.0)/articles (1.5).

Section A
Category A1
content items/articles
Category A2
content items/articles
Category A3
content items/articles

Section B
Category B1
content items
Category B2
content items
Category B3
content items

Section C

Category C1
content items
Category C2
content items
Category C3
content items

The content items/articles are what you would think of as web pages in a traditional html site.

Both section and category "pages" can be created to serve (more or less) as the home pages for the categories and sections, respectively.

Although it makes sense to organize your work into categories and sections, you do not need to show these to your users. Using your menus, you can link directly to sections, categories and content items. You can also select numerous options for the display of content associated with each type of link.

==What are components, modules, mambots and plugins?==

'''Components'''

Content elements or applications that are usually displayed in the center of the main content area of a template. This depends on the design of the template in use. Components are core elements of Joomla!’s functionality. These core elements include Content, Banners, Contact, News Feeds, Polls and Web Links. Members of the Joomla! community produce third party Joomla! components on a continuous basis. They are freely available to download from http://extensions.joomla.org/ and a number of other web sites. See also Modules.

'''Plugins and Mambots'''

Plugins and mambots are the same thing. Plugin is the term used in 1.5 while mambot is used in 1.0.

A plugin or mambot is a small, task-oriented function that intercepts content before it is displayed and manipulates it in some way. Joomla! provides a number of Mambots in the core distribution, e.g. WYSIWYG editors, but there are many other mambots available for specific tasks. Some 3rd Party developer components have their own mambots which need to be installed in order to make the component work properly.
In Joomla! 1.5 mambots will be renamed plugins.

'''Modules'''

Modules extend the capabilities of Joomla! giving the software new functionality. Modules are small content items that can be displayed anywhere that your template allows it to be displayed by assigning them to positions and pages through the module manager in the administrative interface. Modules are installed in the Admin Section. Joomla! modules may include: Main Menu, Top menu, Template Chooser, Polls, Newsflash, Hit Counter, etc. Members of the Joomla! Community produce Joomla! modules on a continuous basis. Many are freely available at http://forge.joomla.org/ for download.

In addition, some 3rd party components, modules and mambots themselves have plugins.

==How do I change the favicon?==

Favicon is the favorites icon that is associated with your site and appears in the browser address bar. Both Joomla! 1.0.x and 1.5.x come with a default favicon that displays the Joomla! Logo. You may change that as long as your new favicon is in the ICO format and sized 16×16 pixels. Here's how to do it:

'''1.0'''

* Upload your new favicon into Joomla!'s /images/ folder.
* Delete Joomla!'s default /images/favicon.ico file and rename your file into favicon.ico OR
* Go to your site's back-end and change the name of the favicon file that's being loaded at Site > Global Configuration > Site > Favourites Site Icon (make sure configuration.php is writable before you commit your changes).

'''1.5'''

Unlike the 1.0.x series, the only name you are allowed to use for your favicon is favicon.ico but you are offered the flexibility to associate different favicons with different templates. You only need to upload your favicon.ico into the main folders of your front-end and back-end templates, which are found in the /templates/ and the /administrator/templates/ folders respectively, overwriting any favicon files that came with your templates.

However, if you'd rather use a single favicon.ico for all your templates, just upload it into Joomla!'s main folder (that's where your index.php resides) and into the /administrator/ folder. Make sure you delete all favicon.ico files found in the template folders mentioned above because Joomla! will check your template folder first for the favicon.ico file.

'''Note'''

To see the new favicon you will need to empty your browser cache.

==Why do the pop ups in my WYSIWYG editor not work or show gibberish?==

Depending on the editor, this problem may occur when trying to edit the html, insert tables or perform a similar function that requires javascript.

Most likely the problem with the livesite...

You look in your site configuration (General Configuration, select the Server tab) you will see that the livesite is given. Usually it is either www.mydomain.com or mydomain.com.

When you log into your site, you must log in from the exact livesite. if you don't the javascript in your editor will not work.

One way to deal with this is to put a redirect from, for example, mydomain.com to www.mydomain.com so that you and your users always login from the correct url. You can do this with .htaccess.

==What are positions?==

Site templates divides the "pages" displayed on a site into a series of positions, each with a different name.

'''1.0'''
You can view the location of positions in your default template from the administrator go to Site =>Preview=>Inline with Positions.

You can only preview the default template.

You can annotate your positions through the administrator (backend). Go to Site=>Template Manage=>Module Positions.

'''1.5'''

Extensions => Templates.
Select the template you wish to preview and click the edit icon.
Click the preview icon.

You can add or remove positions by modifying your template html.

You assign a module to a position using the module manager.

'''1.0'''
Modules=>Site Modules==>edit the module
On the left side of the page, on the third line, there is a drop down menu that lets you select the position.

'''1.5'''
In the module manager, edit the module. In the left column select all, none or the specific pages you would like it to appear on.

Notes:
Modules that are not pubished (1.0) or enabled (1.5) will not display.
Modules can be assigned to unused positions (positions not in the template) if you want to have them published but not displayed in a position (for example, if you want to display a module in content using {mosloadposition} (1.0) or {loadposition} (1.5)).
Multiple modules may be assigned to the same position. They will be displayed in the order shown for modules in that position in the module manager.
If you want to display a module in more than one position, use the module manager to create another copy.
1.0 copy the module and assign the copy to the second position.
1.5 use the new icon and create another instance of the module.

==Why are the backgrounds of my WYSIWYG editor fields colored?==

The simple answer as to why this happens is in the term 'WYSIWYG'. Content editors like TinyMCE attempt to allow users to see what the text they're entering will look like when it appears on the front-end of the website. To this end, they show the text against the color or image specified in the template_css.css file of whatever template the front-end of the website is using.

This often presents a problem for users when their website is designed to appear as a lighter content pane floating over a darker-colored background. The darker background is what appears in the editor windows, making the text almost impossible to see. In such cases, it may be necessary to tell the editor not to use the template_css.css file as a reference, but rather to use a different css file instead.

Note [added by mod]: Some editors (such as JCE and FCK) have configuration interfaces that allow you to override the template_css file or to ignore template classes. You may wish to explore this option before trying the solution below.

Step 1: Create a customized CSS file.
The first thing you'll need to do is to write a customized .css file for your editor. It doesn't have to be very complicated, and you can use the file below for reference (Many thanks to jxl, who wrote the sample file).

'''Note: Changes to the image urls would be need to use this file in 1.5'''

/* CSS Document */

/* Editor Assigned Styles */
/*make sure that any styles you put here also exist in your template_css.css file or they will have no effect in the front end */

p.rightalign {
text-align: right;
}

.red {
color: #c00;
}

.green {
color: #0c0;
}

.highlight {
background-color: Yellow;
color: Blue;
padding: 0;
}
p.code {
background-color: #ddd;
border: 1px solid #bbb;
}

.small {
color: #999999;
font-size: 10px;
}

/* Body Tag for Background Color and Font Specs. */

body {
font-family: Arial, Helvetica, Sans Serif;
font-size: 12px;
color: #333333;
background: #ffffff;
}

/* Optional Basic Stuff you can use to make everything look like it does on the site itself */
/* you can get this stuff right out of your template_css.css file, or you can just leave it out */

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 16px;
padding-left: 16px;
padding-top: 0px;
background-image: url(../images/arrow.png); /* use the real image path that you have on your site. An absolute path is OK */
background-repeat: no-repeat;
background-position: 0px 2px;
}

td {
text-align: left;
font-size: 12px;
}

a, a:link, a:visited {
color: #c64934; text-decoration: none;
font-weight: bold;
}

a:hover {
color: #900; text-decoration: none;
font-weight: bold;
}

Make careful note of the comments in the file above. The first section is comprised of text classes; you'll want to go into your template's template_css.css file and find the text classes (.highlight, .small, etc.) it specifies that you'll be likely to use in your content and make sure to copy them into the editor_content.css file as well. The same is true of the styles defined in the last section (a:hover, td, ul, etc.).

The key part that fixes the background issue is the 'body' style specified in the middle. You can change parts of this to match your template if you like, but leave the 'background' rule set to #FFFFFF. This will make the editor windows white, as opposed to the dark background color of your site template.

Incidentally, if your website uses a background IMAGE in addition to a color, the same thing applies.

Also, if this is too much work, you CAN just copy and paste your template's template_css.css file into a new CSS file and change the BODY style so that the background is set to #FFFFFF. This is less neat and orderly, but you'll be sure you have all of the classes and such defined properly this way.

When you've finished, save your new CSS file as editor_content.css

Step 2: Upload your CSS file to the correct directory.

You'll use an FTP client for this, which hopefully you're already doing. If Joomla! is in a separate folder, you'll navigate to:

joomla/templates/[the template you're using]/css/

If you don't have Joomla! in a separate folder, just go to whatever directory houses your Joomla! files. The key is to make sure you're in the correct front-end template folder for your website. Upload your editor_content.css file to the CSS folder under this template directory.

Note that in most cases, the only other file in this directory is a file called 'template_css.css'. If you see that file, you're probably in the right place. Also, note that there is a 'css' directory in joomla/templates/ as well, but this IS NOT the directory you're looking for. You want the css directory under the template you're using.

Step 3: Point your Editor to the new CSS.

Now go back to your site and into the administration area. Click on 'Mambots" and "Site Mambots" to see the list of Mambots currently in use in your website. Check TinyMCE WYSIWYG (or whatever WYSIWYG editor you're using) and then 'Edit' to open the editing pane for the editor.

Look to the right side under 'Parameters' and scroll down until you see the option entitled 'Template CSS Classes'. Click the radio button to 'no'. Right under this is a field entitled 'Custom CSS Classes'. In this field type:

templates/[template you're using]/css/editor_content.css

Then save and exit.

This should correct the background issue in your editor. If it doesn't, you've either set up your editor_content.css file incorrectly or you've uploaded the file to the wrong directory.

==How do you install an extension?==

Before starting it always is wise to read the documentation associated with an extension. Most extensions have homepages and forums, and it is a good idea to look at them first. If there is a README file included with the extension, you should read it.

For most extensions and most users, the procedure will be:

'''1.0'''

* Download the extension to your local machine
* From the backend of your joomla site (adminsitration) select Installers and then the type of extension (module, component, mambot/plugin, site template, administrative template, language
* Browse for the package file
* Click the install icon
* Follow any instructions

'''1.5'''

* Download the extension to your local machine
* From the backend of your joomla site (adminsitration) select Extensions.
* Browse for the package file
* Click the install icon
* Follow any instructions

There are some situations in which this procedure will not work.

Sometimes you need to unzip the file locally prior to installing. If you get an error saying that the file is not in the correct format, the need to unzip is a common cause of this. After unzipping try installing the individual items. Note that the files you upload using the installed still need to be zipped.

Sometimes you cannot use the automated installer. For example, very large extensions may exceed the maximum upload size allowed by your host.

In this case, unzip all of the files locally. Then transfer the files to a folder in the the install directory(for example administrator/components/com_installer/components) for the type of extension you are installing (using FTP). Then use the installer, but select "install from directory" indicating the correct folder name.

For modules and mambots/plugins to work, you must make sure that they are pubished (1.0) or enabled (1.5).

==Why doesn't the pdf of my page show the images?==

Images are not supported in Joomla! 1.0.x in the pdf creation script. Images are supported in Joomla! 1.5.

==How do I make a menu link that is not clickable?==

To make a menu link that does not connect to anything (is not clickable) use the link type Separator/Placeholder

==What does a simple Joomla! installation include?==

If you simply install Joomla! without any modifications or extensions, the following (incomplete) list of features will be included.

* Content component which allows creation and display of "content items" usually in the middle of the page.
* Front page component, which displays multiple recent content items designated as "front page" in the content manager. Configurable for layout and number of items.
* Weblinks component for entering and displaying a list of weblinks.
* Media manager for uploading and managing images and other media.
* User manager (administrative end) and user registration module (front end).
* Newsflash module for displaying specific content items as "newsflashes."
* Modules for latest items, most popular, and related items.
* A simple poll component
* A menu system
* A choice of several templates for your site[/li]
* Installers for third party extensions (templates, components, modules and plugins/mambots).
* The TinyMCE wysiwyg editor. 1.5 Also includes xStandard Lite
* Administrative interface for managing your site

<noinclude>[[Category:FAQ]]</noinclude>

J1.5:Core module-generated CSS

2008-02-22T13:26:22Z

Radiant tech: added links

The following information is gathered from the default output for Joomla! 1.5 core modules and assumes that no template overrides are in place.

Note also that core [[What_is_module_chrome%3F|module chrome]], as generated by the ''System'' template, will wrap a module in a defined manner and in some instances apply [[Core_module_chrome_CSS|additional CSS formatting]].

'''mod_archive'''
: None

'''mod_banners'''
* <code>.bannergroup</code> class applied to surrounding <tt><nowiki><div></nowiki></tt>
* <code>.bannerheader</code> class applied to <tt><nowiki><div></nowiki></tt> of header text if it exists
* <code>.banneritem</code> class applied to <tt><nowiki><div></nowiki></tt> for each item
* <code>.bannerfooter</code> class applied to <tt><nowiki><div></nowiki></tt> of footer text if it exists

'''mod_breadcrumb'''
* <code>.breadcrumbs</code> class applied to a <tt><nowiki><span></nowiki></tt> element that holds the path links
* <code>.pathway</code> class applied to a <tt><nowiki><span></nowiki></tt> element that holds the path links
* <code>.pathway</code> class is also applied to each link

'''mod_feed'''
* <code>.moduletable</code> class applied to <tt><nowiki><table></nowiki></tt> of no set width
* <code>.newsfeed</code> class applied to <tt><nowiki><ul></nowiki></tt>

'''mod_footer'''
: None

'''mod_latestnews'''
* <code>.latestnews</code> class applied to surrounding <tt><nowiki><ul></nowiki></tt>, to each <tt><nowiki><li></nowiki></tt> and to each link

'''mod_login'''
* <code>#form-login-username</code> id applied to <tt><nowiki><p></nowiki></tt>
* <code>#modlgn_username</code> id applied to <tt><nowiki><input type="text"></nowiki></tt>
* <code>#form-login-password</code> id applied to <tt><nowiki><p></nowiki></tt>
* <code>#modlgn_password</code> id applied to <tt><nowiki><input type="text"></nowiki></tt>
* <code>#form-login-remember</code> id applied to <tt><nowiki><p></nowiki></tt>
* <code>#modlgn_password</code> id applied to <tt><nowiki><input type="text"></nowiki></tt>
* <code>.button</code> class applied to <tt><nowiki><input type="submit"></nowiki></tt>
* <code>.input</code> class applied to <tt><nowiki><fieldset></nowiki></tt>
* <code>.inputbox</code> class applied to <tt><nowiki><input type="text"></nowiki></tt>

'''mod_mainmenu'''
* <code>#current</code> id applied to <tt><nowiki><li></nowiki></tt> for the current page
* <code>.active</code> class applied to <tt><nowiki><li></nowiki></tt> for the current page
* <code>.parent</code> class applied to <tt><nowiki><li></nowiki></tt> if child links exist
* <code>.item##</code> class applied to the <tt><nowiki><li></nowiki></tt>, where ## is the ItemId
* ''Menu-Type Parameters'':
** ''List''
:: <code>#menu</code> id is applied to the <tt><nowiki><ul></nowiki></tt>
:: becomes .menu if more than one menu is present on the page [CHECK]
:* ''Legacy-Vertical''
:: <code>.mainlevel</code> class is applied to each link in a <tt><nowiki><table></nowiki></tt> of 100% width
:* ''Legacy-Horizontal''
:: <code>.mainlevel</code> class is applied to each link in a <tt><nowiki><table></nowiki></tt> of 100% width
:* ''Legacy-Flat''
:: <code>#mainlevel</code> id is applied to the <tt><nowiki><ul></nowiki></tt>
:: becomes .menu if more than one menu is present on the page [CHECK]

'''mod_mostread'''
* <code>.mostread</code> class applied to surrounding <tt><nowiki><ul></nowiki></tt>, to each <tt><nowiki><li></nowiki></tt>, and to each link

'''mod_newsflash'''
* ''Layout-Type Parameters'':
** ''Default''
:: <code>.contentpaneopen</code> class applied to <tt><nowiki><table></nowiki></tt> of no set width
::: Two tables are created, one holds the article title, the second holds the abbreviated article text
:: <code>.contentheading</code> class applied to the <tt><nowiki><td></nowiki></tt> element holding the article titles
:: <code>.contentpagetitle</code> class applied to the article link
:* ''Horz''
:: <code>.moduletable</code> class applied to <tt><nowiki><table></nowiki></tt> of no set width
::: each item is placed in a new <tt><nowiki><td></nowiki></tt> element with default styles
:* ''Vert''
:: <code>.article_separator</code> class applied to <tt><nowiki><span></nowiki></tt> is added after each item if more than one exists

'''mod_poll'''
* <code>.poll</code> class applied to surrounding <tt><nowiki><table></nowiki></tt> of 95% width and centered text-alignment
* <code>.pollstableborder</code> applied to inner <tt><nowiki><table></nowiki></tt> of no set width, which holds the vote options
* <code>.sectiontableentry1</code> class applied to <tt><nowiki><td></nowiki></tt> with valign="top"
* <code>.sectiontableentry2</code> class applied to <tt><nowiki><td></nowiki></tt> with valign="top"
:: ''Note: sectiontableentry1 and sectiontableentry2 alternate each table row to provide for alternate row colors or other formatting''
* <code>#voteid##</code> id applied to <tt><nowiki><input></nowiki></tt>, where ## is the Id of the option
* <code>.button</code> applied to <tt><nowiki><input type="submit"></nowiki></tt> and <tt><nowiki><input type="button"></nowiki></tt>

'''mod_random_image'''
: None

'''mod_related_items'''
* <code>.relateditems</code> class applied to surrounding <tt><nowiki><ul></nowiki></tt>

'''mod_search'''
* <code>.search</code> class applied to surrounding <tt><nowiki><div></nowiki></tt>
* <code>.inputbox</code> class applied to <tt><nowiki><input type="text"></nowiki></tt>
* <code>.button</code> class applied to <tt><nowiki><input type="image"></nowiki></tt> and <tt><nowiki><input type="submit"></nowiki></tt>

'''mod_sections'''
* <code>.sections</code> class applied to surrounding <tt><nowiki><ul></nowiki></tt>

'''mod_stats'''
: None

'''mod_syndicate'''
: None

'''mod_whosonline'''
: None

'''mod_wrapper'''
* <code>#blockrandom</code> id applied to <tt><nowiki><iframe></nowiki></tt>
* <code>.wrapper</code> class applied to <tt><nowiki><iframe></nowiki></tt>

<noinclude>[[Category: Templates]][[Category: Modules]][[Category: Reference]][[Category:Definition lists]]</noinclude>

J1.5:Core module-generated CSS

2008-02-22T13:08:15Z

Radiant tech:

The following information is gathered from the default output for Joomla! 1.5 core modules and assumes that no template overrides are in place.

'''mod_archive'''
: None

'''mod_banners'''
* <code>.bannergroup</code> class applied to surrounding <tt><nowiki><div></nowiki></tt>
* <code>.bannerheader</code> class applied to <tt><nowiki><div></nowiki></tt> of header text if it exists
* <code>.banneritem</code> class applied to <tt><nowiki><div></nowiki></tt> for each item
* <code>.bannerfooter</code> class applied to <tt><nowiki><div></nowiki></tt> of footer text if it exists

'''mod_breadcrumb'''
* <code>.breadcrumbs</code> class applied to a <tt><nowiki><span></nowiki></tt> element that holds the path links
* <code>.pathway</code> class applied to a <tt><nowiki><span></nowiki></tt> element that holds the path links
* <code>.pathway</code> class is also applied to each link

'''mod_feed'''
* <code>.moduletable</code> class applied to <tt><nowiki><table></nowiki></tt> of no set width
* <code>.newsfeed</code> class applied to <tt><nowiki><ul></nowiki></tt>

'''mod_footer'''
: None

'''mod_latestnews'''
* <code>.latestnews</code> class applied to surrounding <tt><nowiki><ul></nowiki></tt>, to each <tt><nowiki><li></nowiki></tt> and to each link

'''mod_login'''
* <code>#form-login-username</code> id applied to <tt><nowiki><p></nowiki></tt>
* <code>#modlgn_username</code> id applied to <tt><nowiki><input type="text"></nowiki></tt>
* <code>#form-login-password</code> id applied to <tt><nowiki><p></nowiki></tt>
* <code>#modlgn_password</code> id applied to <tt><nowiki><input type="text"></nowiki></tt>
* <code>#form-login-remember</code> id applied to <tt><nowiki><p></nowiki></tt>
* <code>#modlgn_password</code> id applied to <tt><nowiki><input type="text"></nowiki></tt>
* <code>.button</code> class applied to <tt><nowiki><input type="submit"></nowiki></tt>
* <code>.input</code> class applied to <tt><nowiki><fieldset></nowiki></tt>
* <code>.inputbox</code> class applied to <tt><nowiki><input type="text"></nowiki></tt>

'''mod_mainmenu'''
* <code>#current</code> id applied to <tt><nowiki><li></nowiki></tt> for the current page
* <code>.active</code> class applied to <tt><nowiki><li></nowiki></tt> for the current page
* <code>.parent</code> class applied to <tt><nowiki><li></nowiki></tt> if child links exist
* <code>.item##</code> class applied to the <tt><nowiki><li></nowiki></tt>, where ## is the ItemId
* ''Menu-Type Parameters'':
** ''List''
:: <code>#menu</code> id is applied to the <tt><nowiki><ul></nowiki></tt>
:: becomes .menu if more than one menu is present on the page [CHECK]
:* ''Legacy-Vertical''
:: <code>.mainlevel</code> class is applied to each link in a <tt><nowiki><table></nowiki></tt> of 100% width
:* ''Legacy-Horizontal''
:: <code>.mainlevel</code> class is applied to each link in a <tt><nowiki><table></nowiki></tt> of 100% width
:* ''Legacy-Flat''
:: <code>#mainlevel</code> id is applied to the <tt><nowiki><ul></nowiki></tt>
:: becomes .menu if more than one menu is present on the page [CHECK]

'''mod_mostread'''
* <code>.mostread</code> class applied to surrounding <tt><nowiki><ul></nowiki></tt>, to each <tt><nowiki><li></nowiki></tt>, and to each link

'''mod_newsflash'''
* ''Layout-Type Parameters'':
** ''Default''
:: <code>.contentpaneopen</code> class applied to <tt><nowiki><table></nowiki></tt> of no set width
::: Two tables are created, one holds the article title, the second holds the abbreviated article text
:: <code>.contentheading</code> class applied to the <tt><nowiki><td></nowiki></tt> element holding the article titles
:: <code>.contentpagetitle</code> class applied to the article link
:* ''Horz''
:: <code>.moduletable</code> class applied to <tt><nowiki><table></nowiki></tt> of no set width
::: each item is placed in a new <tt><nowiki><td></nowiki></tt> element with default styles
:* ''Vert''
:: <code>.article_separator</code> class applied to <tt><nowiki><span></nowiki></tt> is added after each item if more than one exists

'''mod_poll'''
* <code>.poll</code> class applied to surrounding <tt><nowiki><table></nowiki></tt> of 95% width and centered text-alignment
* <code>.pollstableborder</code> applied to inner <tt><nowiki><table></nowiki></tt> of no set width, which holds the vote options
* <code>.sectiontableentry1</code> class applied to <tt><nowiki><td></nowiki></tt> with valign="top"
* <code>.sectiontableentry2</code> class applied to <tt><nowiki><td></nowiki></tt> with valign="top"
:: ''Note: sectiontableentry1 and sectiontableentry2 alternate each table row to provide for alternate row colors or other formatting''
* <code>#voteid##</code> id applied to <tt><nowiki><input></nowiki></tt>, where ## is the Id of the option
* <code>.button</code> applied to <tt><nowiki><input type="submit"></nowiki></tt> and <tt><nowiki><input type="button"></nowiki></tt>

'''mod_random_image'''
: None

'''mod_related_items'''
* <code>.relateditems</code> class applied to surrounding <tt><nowiki><ul></nowiki></tt>

'''mod_search'''
* <code>.search</code> class applied to surrounding <tt><nowiki><div></nowiki></tt>
* <code>.inputbox</code> class applied to <tt><nowiki><input type="text"></nowiki></tt>
* <code>.button</code> class applied to <tt><nowiki><input type="image"></nowiki></tt> and <tt><nowiki><input type="submit"></nowiki></tt>

'''mod_sections'''
* <code>.sections</code> class applied to surrounding <tt><nowiki><ul></nowiki></tt>

'''mod_stats'''
: None

'''mod_syndicate'''
: None

'''mod_whosonline'''
: None

'''mod_wrapper'''
* <code>#blockrandom</code> id applied to <tt><nowiki><iframe></nowiki></tt>
* <code>.wrapper</code> class applied to <tt><nowiki><iframe></nowiki></tt>

<noinclude>[[Category: Templates]][[Category: Modules]][[Category: Reference]][[Category:Definition lists]]</noinclude>

J1.5:Core module-generated CSS

2008-02-22T12:05:10Z

Radiant tech:

{{inuse}}
The following information is gathered from the default output for Joomla! 1.5 core modules and assumes that no template overrides are in place.

'''mod_banners'''
* <code>.bannergroup</code> class applied to surrounding <tt><nowiki><div></nowiki></tt>
* <code>.bannerheader</code> class applied to <tt><nowiki><div></nowiki></tt> of header text if it exists
* <code>.banneritem</code> class applied to <tt><nowiki><div></nowiki></tt> for each item
* <code>.bannerfooter</code> class applied to <tt><nowiki><div></nowiki></tt> of footer text if it exists

'''mod_breadcrumb'''
* <code>.breadcrumbs</code> class applied to a <tt><nowiki><span></nowiki></tt> element that holds the path links
* <code>.pathway</code> class applied to a <tt><nowiki><span></nowiki></tt> element that holds the path links
* <code>.pathway</code> class is also applied to each link

'''mod_feed'''
* <code>.moduletable</code> class applied to <tt><nowiki><table></nowiki></tt> of no set width
* <code>.newsfeed</code> class applied to <tt><nowiki><ul></nowiki></tt>

J1.5:Core module-generated CSS

2008-02-22T11:52:38Z

Radiant tech: New page: {{inuse}} The following information is gathered from the default output for Joomla! 1.5 core modules and assumes that no template overrides are in place. '''mod_banners''' * <code>.banner...

{{inuse}}
The following information is gathered from the default output for Joomla! 1.5 core modules and assumes that no template overrides are in place.

'''mod_banners'''
* <code>.bannergroup</code> class applied to surrounding <div>
* <code>.bannerheader</code> class aplied to <div> of header text if exists
* <code>.banneritem</code> class applied to <div> for each item
* <code>.bannerfooter</code> class applied to <div> of header footer text if exists

'''mod_breadcrumb'''
* <code>.breadcrumbs</code> class applied to a <span> element that holds the path links
* <code>.pathway</code> class applied to a <span> element that holds the path links
* <code>.pathway</code> class is also applied to each link

'''mod_feed'''
* <code>.moduletable</code> class applied to <table> of no set width
* <code>.newsfeed</code> class applied to <ul>

JDOC:Who is working on what

2008-02-20T15:39:23Z

Radiant tech:

If you want to work on one or more pages of the documentation then please update this page so we don't get duplication of effort. If you want to collaborate with someone on one or more pages, that's fine too of course; you can use this page to find out who to contact.

Simply list the page(s) you are working on and the name(s) of the people working on them. Thank you.

==== Upgrading a Joomla! 1.0.x template====

New features introduced in Joomla! 1.5 templates [Dex]

==== Fonts and topography ====

Text resizing - [epleste]
[[Category:Templates]]

==== Tutorials: Template Overrides ====

Tutorial: Template overrides - [madamep and ivanicus]
[[Category:Templates]]

How to override the output from the Joomla! core [Dex]

==== Cascading Style Sheets ====

List of Joomla! generated core CSS classes (with explanations) [radiant_tech]

Counting modules in multiple module positions

2008-02-20T01:19:56Z

Radiant tech: /* Counting Modules in multiple Module positions */ corrected <div class="greyline">

===== Counting Modules in multiple Module positions =====

The countModules function can be used to determine the number of Modules in more than one Module position. More advanced calculations can also be performed.

The argument to the countModules function is normally just the name of a single Module position. The function will return the number of Modules currently enabled for that Module position. But you can also do simple logical and arithmetic operations on two or more Module positions.

For example, to determine the total number of Modules enabled in the 'user1' and 'user2' positions together, you can use the function call

<source lang="php">
$this->countModules( 'user1 + user2' );
</source>

Although the usual arithmetic operators, +. -. *, / will work as expected, these are not as useful as the logical operators 'and' and 'or'.

For example, to determine if the 'user1' position and the 'user2' position both have at least one Module enabled, you can use the function call

<source lang="php">
$this->countModules( 'user1 and user2' );
</source>

Careful: A common mistake is to try something like this
<source lang="php">
$this->countModules( 'user1' and 'user2' );
</source>
<noinclude>
[[Category:Intermediate]]
[[Category:Templates]]
[[Category:Topics]]
</noinclude>

This is pretty much guaranteed to always return false regardless of the number of Modules enabled in either position, so check what you are passing to countModules carefully.

You must have exactly one space character separating each item in the string. For example, 'user1+user2' will not produce the desired result as there must be a space character either side of the '+' sign. Also, 'user1 + user2' will produce a PHP error message as there is more than one space separating each element.

Example: The user1 and user2 Module positions are to be displayed in the region, but you want the region to not appear at all if no Modules are enabled in either position.

<source lang="php">
<?php if ($this->countModules( 'user1 or user2' )) : ?>
<div class="rightcolumn">
<jdoc:include type="modules" name="user1" style="xhtml" />
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<?php endif; ?>
</source>

Example: The user1 and user2 Module positions are to be displayed side-by-side with a separator between them. However, if only one of the Module positions has any Modules enabled then the separator is not needed. Furthermore, if neither user1 or user2 has any Modules enabled then nothing is output.

<source lang="php">
<?php if ($this->countModules( 'user1 or user2' )) : ?>
<div class="user1user2">

<?php if ($this->countModules( 'user1' )) : ?>
<jdoc:include type="modules" name="user1" style="xhtml" />
<?php endif; ?>

<?php if ($this->countModules( 'user1 and user2' )) : ?>
<div class="greyline"></div>
<?php endif; ?>

<?php if ($this->countModules( 'user2' )) : ?>
<jdoc:include type="modules" name="user2" style="xhtml" />
<?php endif; ?>

</div>
<?php endif; ?>
</source>

Notice how the first countModules call determines if there any Modules to display at all. The second determines if there are any in the 'user1' position and if there are it displays them. The third call determines if both user1 and user2 positions have any Modules enabled and if they do then if provides a separator between them. Finally, the fourth call determines if there are any enabled Modules in the 'user2' position and displays them if there are any.

What is the typical template directory structure?

2008-02-19T23:33:49Z

Radiant tech:

===Typical Template Directory Structure===
It is most common for a template to have at least four files:
* index.php
: Provides the logic for the display and positioning of modules and components.
* template.css
: Handles the presentational aspects of the template including specifications for margins, fonts, headings, image borders, list formatting, etc.
* templateDetails.xml
: Holds meta-information related to the template and used by the Installer and the Template Manager.
* template_thumbnail.ext - replace .ext with the extension format of the image (.jpg, .png, .gif)
: Generally a 200x150 pixel image that is shown when the cursor is held over the template name in the Template Manager. This gives the Administrator a snapshot view of the template before applying it to the Site.

{{:Typical template directory structure}}

<noinclude>[[Category:Templates]][[Category:Definition lists]][[Category:Beginners]]</noinclude>

Typical template directory structure

2008-02-19T22:34:09Z

Radiant tech:

A typical template for Joomla! 1.5 will include the following directories:
* css - contains all the .css files
* html - contains template override files for core output and module chrome
* images - contains all images used by the template

<noinclude>[[Category:Itemised lists]][[Category:Reference]][[Category:Templates]]</noinclude>

JDOC:Who is working on what

2008-02-19T19:50:00Z

Radiant tech:

If you want to work on one or more pages of the documentation then please update this page so we don't get duplication of effort. If you want to collaborate with someone on one or more pages, that's fine too of course; you can use this page to find out who to contact.

Simply list the page(s) you are working on and the name(s) of the people working on them. Thank you.

New features introduced in Joomla! 1.5 templates [Dex]

How to override the output from the Joomla! core [Dex]

==== Fonts and topography ====

Text resizing - [epleste]
[[Category:Templates]]

==== Tutorials: Template Overrides ====

Tutorial: Template overrides - [madamep and ivanicus]
[[Category:Templates]]

What is the purpose of the templateDetails.xml file?

2008-02-19T19:48:33Z

Radiant tech: /* Parameters */

{{RightTOC}}
The templateDetails.xml file holds a variety of meta-data used by the [[Screen.templates.15|Template Manager]] in installation and maintenance. It is helpful to recognize the different sections of the file. Typically, each section of data is indented to make the file more readable, but this indentation is not necessary.

===Basic Details===
The initial display of the Template Manager shows a list of available templates and basic details relating to the template. Each of these bits of information is gathered from the templateDetails.xml file.

[[Image:template_details_basic.png]]

<pre>
<install version="1.5" type="template">
<name>rhuk_milkyway</name>
<creationDate>11/20/06</creationDate>
<author>Andy Miller</author>
<authorEmail>rhuk@rockettheme.com.com</authorEmail>
<authorUrl>http://www.rockettheme.com</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>TPL_RHUK_MILKYWAY</description>
</pre>

===File Structure===
All files related to the template are listed. Each filename contains full path information starting at the template root. The Administrator's Installer uses this information when storing the files during installation.

A small portion of the files listed in the rhuk_milkyway template is given below.

<pre>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>params.ini</filename>
<filename>images/arrow.png</filename>
<filename>images/indent1.png</filename>
<files>
</pre>

===Languages===
Some templates may include language files to allow translation of static text in the template. Notice that two language files are shown below. The first holds the language file for text that will be viewed by the User. The second, placed within <administration> tags, is for text that will be viewed by the Administrator.

<pre>
<languages>
<language tag="en-GB">en-GB.tpl_beez.ini</language>
</languages>
<administration>
<languages folder="admin">
<language tag="en-GB">en-GB.tpl_beez.ini</language>
</languages>
</administration>
</pre>

===Module Positions===
The available [[module_positions|Module Positions]] that can be used in the template are defined.

<pre>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
<position>debug</position>
<position>syndicate</position>
</positions>
</pre>

===Parameters===
A template may offer display options that can be chosen by the Administrator in the Template Manager. For instance, the rhuk_milkyway template allows the Administrator to change the border colors, change the background color, and define the display width.

[[Image:template_details_params.png]]

An example of adding a parameter and its values is shown below.

<pre>
<params>
<param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
<option value="white">White</option>
</param>
</params>
</pre>

For more information about working with Parameters, see:

: [[Defining_a_parameter_in_templateDetails.xml|Defining a parameter in templateDetails.xml]]
: [[Retrieving_parameter_data_in_a_template_file|Retrieving parameter data in a template file]]

<noinclude>[[Category:Templates]][[Category:Topics]][[Category:Beginners]]</noinclude>

What is the purpose of the templateDetails.xml file?

2008-02-19T19:46:09Z

Radiant tech: added links

{{RightTOC}}
The templateDetails.xml file holds a variety of meta-data used by the [[Screen.templates.15|Template Manager]] in installation and maintenance. It is helpful to recognize the different sections of the file. Typically, each section of data is indented to make the file more readable, but this indentation is not necessary.

===Basic Details===
The initial display of the Template Manager shows a list of available templates and basic details relating to the template. Each of these bits of information is gathered from the templateDetails.xml file.

[[Image:template_details_basic.png]]

<pre>
<install version="1.5" type="template">
<name>rhuk_milkyway</name>
<creationDate>11/20/06</creationDate>
<author>Andy Miller</author>
<authorEmail>rhuk@rockettheme.com.com</authorEmail>
<authorUrl>http://www.rockettheme.com</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>TPL_RHUK_MILKYWAY</description>
</pre>

===File Structure===
All files related to the template are listed. Each filename contains full path information starting at the template root. The Administrator's Installer uses this information when storing the files during installation.

A small portion of the files listed in the rhuk_milkyway template is given below.

<pre>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>params.ini</filename>
<filename>images/arrow.png</filename>
<filename>images/indent1.png</filename>
<files>
</pre>

===Languages===
Some templates may include language files to allow translation of static text in the template. Notice that two language files are shown below. The first holds the language file for text that will be viewed by the User. The second, placed within <administration> tags, is for text that will be viewed by the Administrator.

<pre>
<languages>
<language tag="en-GB">en-GB.tpl_beez.ini</language>
</languages>
<administration>
<languages folder="admin">
<language tag="en-GB">en-GB.tpl_beez.ini</language>
</languages>
</administration>
</pre>

===Module Positions===
The available [[module_positions|Module Positions]] that can be used in the template are defined.

<pre>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
<position>debug</position>
<position>syndicate</position>
</positions>
</pre>

===Parameters===
A template may offer display options that can be chosen by the Administrator in the Template Manager. For instance, the rhuk_milkyway template allows the Administrator to change the border colors, change the background color, and define the display width.

[[Image:template_details_params.png]]

An example of adding a parameter and its values is shown below.

<pre>
<params>
<param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
<option value="white">White</option>
</param>
</params>
</pre>

For more information about working with Parameters, see:
[[Defining_a_parameter_in_templateDetails.xml|Defining a parameter in templateDetails.xml]]
[[Retrieving_parameter_data_in_a_template_file|Retrieving parameter data in a template file]]

<noinclude>[[Category:Templates]][[Category:Topics]][[Category:Beginners]]</noinclude>

What is the purpose of the templateDetails.xml file?

2008-02-19T19:21:13Z

Radiant tech: New page: {{RightTOC}} The templateDetails.xml file holds a variety of meta-data used by the Template Manager in installation and maintenance. It is helpful to recognize the different sections of th...

{{RightTOC}}
The templateDetails.xml file holds a variety of meta-data used by the Template Manager in installation and maintenance. It is helpful to recognize the different sections of the file. Typically, each section of data is indented to make the file more readable, but this indentation is not necessary.

===Basic Details===
The initial display of the Template Manager shows a list of available templates and basic details relating to the template. Each of these bits of information is gathered from the templateDetails.xml file.

[[Image:template_details_basic.png]]

<pre>
<install version="1.5" type="template">
<name>rhuk_milkyway</name>
<creationDate>11/20/06</creationDate>
<author>Andy Miller</author>
<authorEmail>rhuk@rockettheme.com.com</authorEmail>
<authorUrl>http://www.rockettheme.com</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0.2</version>
<description>TPL_RHUK_MILKYWAY</description>
</pre>

===File Structure===
All files related to the template are listed. Each filename contains full path information starting at the
site root. The Administrator's Installer uses this information when storing the files during installation.

A small portion of the files listed in the rhuk_milkyway template is given below.

<pre>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>params.ini</filename>
<filename>images/arrow.png</filename>
<filename>images/indent1.png</filename>
<files>
</pre>

===Languages===
Some templates may include language files to allow translation of static text in the template. Notice that two language files are shown below. The first holds the language file for text that will be viewed by the User. The second, placed within <administration> tags, is for text that will be viewed by the Administrator.

<pre>
<languages>
<language tag="en-GB">en-GB.tpl_beez.ini</language>
</languages>
<administration>
<languages folder="admin">
<language tag="en-GB">en-GB.tpl_beez.ini</language>
</languages>
</administration>
</pre>

===Positions===
The possible positions that can be used in the template are defined.

<pre>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
<position>debug</position>
<position>syndicate</position>
</positions>
</pre>

===Parameters===
A template may offer display options that can be chosen by the Administrator in the Template Manager. For instance, the rhuk_milkyway template allows the Administrator to change the border colors, change the background color, and define the display width.

[[Image:template_details_params.png]]

An example of adding a parameter and its values is shown below.

<pre>
<params>
<param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
<option value="white">White</option>
</param>
</params>
</pre>

J1.5:New features introduced in templates

2008-02-19T15:55:09Z

Radiant tech: added template directory structure transclusion; corrected initial cap

A summary of new features introduced in Joomla! 1.5 templates:

; '''Model View Controller (MVC)'''
: This structure has been implemented in Joomla! 1.5, separating out logic, data and view of data. This means that the HTML, CSS and other code used to display Joomla! (to the browser or other device) is now completely separate from the Joomla! logic and is contained entirely within the templating system. This gives you greater control over how you wish to display the data, without having to access (hack!) core Joomla! code.

; '''Template positions'''
: The positions used in a template are now declared in ''templateDetails.xml''. For example,
<source lang="xml">
<positions>
<position>top</position>
<position>left</position>
</positions>
</source>
; '''Joomla version'''
: The version number is now declared in the template. For example, ''<install version="1.5" type="template">'' replaces 1.0.x ''<mosinstall type="template">''.

; '''Template parameters'''
: Parameters may be defined in your template. These are declared in ''templateDetails.xml''. Parameter default values can be set in ''params.ini'', which is also referenced in ''templateDetails.XML'' as a template <file>. The parameters can be set in the Administrator Template Manager and also only the fly using the template's Javascript.

; '''Template overrides'''
: The default system chrome ('views') for any module or component can now be overridden by the template. Default system chrome for each module and component can now be found in directories ''modules/mod_modulename/tmpl'' and ''components/com_componentname/views/layout/tmpl''. The pagination chrome can also be overridden in ''pagination.php''.

; '''Objects and Methods'''
: The Joomla! 1.5 framework has been re-engineered and now includes the JApplication layer, which contains a number of objects and methods you can reference from the template ''index.php''. For example, ''<jdoc:include type="head" />'' replaces the 1.0.x ''<?php mosShowHead(); ?>;'', ''<?php echo $mainframe->getCfg('sitename');?>'' replaces the 1.0.x ''<?php echo $mosConfig_sitename; ?>'' [N.B. This new method works for all ''configuration.php'' parameters], ''<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>'' replaces the 1.0.x ''<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>'', ''<?php echo JURI::base();;?>'' replaces the 1.0.x ''<?php echo $mosConfig_live_site; ?>''.

; '''Module Positions'''
: There is a new way of checking which module positions have content to display on the current page. This logic can be used for collapsible columns (e.g. collapse the left or right column if no content is present). The 1.0.x ''mosCountModules'' function has been replaced by the ''$this->countModules'' and conditions have been added: you can now use '+', '-', 'or' or 'and', e.g. ''if ($this->countModules('left or right') == 1)''.

; '''Template file structure'''
: {{:What is the typical template directory structure?}}

; '''Accessibility and Standards'''
: Using template overrides, it is possible to create tableless Joomla! The new parameters and overrides encourage improvements in web standards, accessbility, search engine optimisation (SEO) (source ordering and markup), language (left to right support) and browser optimisation (browser-dependent CSS).

; '''Default system template'''
: The system template (in the ''/templates'' directory) has been expanded to include more CSS files and a standard ''modules.php'' (module chrome) and ''component.php'' (component chrome). You can include some of the default CSS files in your template. For example,
<source lang="html4strict">
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
</source>

; '''Additional Javascript'''
: There are some additional Javascript libraries available for use in your template. For example,
<source lang="html4strict">
<script type="text/javascript" src="media/system/js/mootools.js"></script>
<script type="text/javascript" src="media/system/js/caption.js"></script>
</source>
: These are included in ''<jdoc:include type="head" />''

; '''Error handling'''
: More default error pages are included in the system template (''403.php'' and ''500.php'') and a new error message call has been introduced, which must be referenced in your template by ''<jdoc:include type="message" />''
[[Category:Templates]]

What is the typical template directory structure?

2008-02-19T15:52:25Z

Radiant tech:

A typical template for Joomla! 1.5 will include the following directories:
: {{:Typical template directory structure}}<noinclude>[[Category:Templates]][[Category:Definition lists]][[Category:Beginners]]</noinclude>

What is the typical template directory structure?

2008-02-19T15:48:10Z

Radiant tech: New page: A typical template for Joomla! 1.5 will include the following directories: {{:Typical template directory structure}} <noinclude>Category:TemplatesCategory:Definition lists[[Catego...

A typical template for Joomla! 1.5 will include the following directories:
{{:Typical template directory structure}}

<noinclude>[[Category:Templates]][[Category:Definition lists]][[Category:Beginners]]</noinclude>

Typical template directory structure

2008-02-19T15:38:24Z

Radiant tech: New page: * css - contains all the .css files * html - contains template override files for core output and module chrome * images - contains all images used by the template <noinclude>[[Category:I...

* css - contains all the .css files
* html - contains template override files for core output and module chrome
* images - contains all images used by the template

<noinclude>[[Category:Itemised lists]][[Category:Reference]][[Category:Templates]]</noinclude>

JDOC:Who is working on what

2008-02-17T23:34:58Z

Radiant tech: /* Understanding Joomla! templates */

If you want to work on one or more pages of the documentation then please update this page so we don't get duplication of effort. If you want to collaborate with someone on one or more pages, that's fine too of course; you can use this page to find out who to contact.

Simply list the page(s) you are working on and the name(s) of the people working on them. Thank you.

New features introduced in Joomla! 1.5 templates [Dex]

How to override the output from the Joomla! core [Dex]

==== Fonts and topography ====

Text resizing - [epleste]
[[Category:Templates]]

==== Tutorials: Template Overrides ====

Tutorial: Template overrides - [madamep and ivanicus]
[[Category:Templates]]

==== Understanding Joomla! templates ====

What is the typical template directory structure? [radiant_tech]

What is the purpose of the templateDetails.xml file? [radiant_tech]

JDOC:Who is working on what

2008-02-17T23:34:10Z

Radiant tech:

If you want to work on one or more pages of the documentation then please update this page so we don't get duplication of effort. If you want to collaborate with someone on one or more pages, that's fine too of course; you can use this page to find out who to contact.

Simply list the page(s) you are working on and the name(s) of the people working on them. Thank you.

New features introduced in Joomla! 1.5 templates [Dex]

How to override the output from the Joomla! core [Dex]

==== Fonts and topography ====

Text resizing - [epleste]
[[Category:Templates]]

==== Tutorials: Template Overrides ====

Tutorial: Template overrides - [madamep and ivanicus]
[[Category:Templates]]

==== Understanding Joomla! templates ====

What is the typical template directory structure? [radiant_tech]
What is the purpose of the templateDetails.xml file? [radiant_tech]

J1.5:Using JPagination in your component

2008-02-17T20:55:14Z

Radiant tech:

{{Content-incomplete}}

{{RightTOC}}
==Class Overview==
The JPagination class, introduced in Joomla! 1.5, allows developers to reliably and consistently add pagination to the Front-end and Back-end display of their components. The file containing the class can be found at /libraries/joomla/html/pagination.php.

====Variables====
The construct function of the class requires three variables:
* $total - the total number of items in a list,
* $limitstart - the offset of the item at which to start, and
* $limit - the number of items to display per page.

====Static Class Methods====
=====getRowOffset($index)=====

=====getData()=====

=====getPagesCounter()=====
<pre>
/**
* Create and return the pagination pages counter string
*
* @access public
* @return string Pagination pages counter string
* @since 1.5
*/
function getPagesCounter()
</pre>

Returns a string containing the current page and total pages as [[image:pagescounter.png]]

=====getResultsCounter()=====
<pre>
/**
* Create and return the pagination result set counter string
*
* @access public
* @return string Pagination result set counter string
* @since 1.5
*/
function getResultsCounter()
</pre>

Returns a string containing the results currently being displayed as [[image:resultscounter.png]]

=====getPagesLinks()=====
<pre>
/**
* Create and return the pagination page list string, ie. Previous, Next, 1 2 3 ... x
*
* @access public
* @return string Pagination page list string
* @since 1.0
*/
function getPagesLinks()
</pre>

Returns an HTML string to display the Pages Links as [[image:pageslinks.png]]

=====getListFooter()=====
<pre>
/**
* Return the pagination footer
*
* @access public
* @return string Pagination footer
* @since 1.0
*/
function getListFooter()
</pre>

Returns a combination of the several page-related elements, including: the Display Limit dropdown, the Pages Links and the Pages Counter. Appearance differs in the Front-end and Back-end due to additional CSS formatting applied with the Khepri template.

Front-end: [[image:listfooter-front.png]]

Back-end: [[image:pagination.png]]

=====getLimitBox()=====
<pre>
/**
* Creates a dropdown box for selecting how many records to show per page
*
* @access public
* @return string The html for the limit # input box
* @since 1.0
*/
function getLimitBox()
</pre>

Returns an HTML string that will output the Display Limit dropdown as [[image:limitbox.png]]

=====orderUpIcon()=====

=====orderDownIcon()=====

==Implementation==
====Changes to the Model====
Declare $_total and $_pagination variables in the model; these will be returned by the functions getTotal() and getPagination(), respectively.
<pre>
/**
* Items total
* @var integer
*/
var $_total = null;

/**
* Pagination object
* @var object
*/
var $_pagination = null;
</pre>

Add to or create a __construct() function that will establish values for the $limitstart and $limit variables as these are needed by the JPagination class.
<pre>
function __construct()
{
parent::__construct();

global $mainframe, $option;

// Get pagination request variables
$limit = $mainframe->getUserStateFromRequest('global.list.limit', 'limit', $mainframe->getCfg('list_limit'), 'int');
$limitstart = $mainframe->getUserStateFromRequest($option.'.limitstart', 'limitstart', 0, 'int');

// In case limit has been changed, adjust it
$limitstart = ($limit != 0 ? (floor($limitstart / $limit) * $limit) : 0);

$this->setState('limit', $limit);
$this->setState('limitstart', $limitstart);
}
</pre>

Revise the getData() function, adding the $limitstart and $limit values to the _getList() query. This causes only the needed rows to be returned, rather than all rows.
<pre>
function getData()
{
// if data hasn't already been obtained, load it
if (empty($this->_data)) {
$query = $this->_buildQuery();
$this->_data = $this->_getList($query, $this->getState('limitstart'), $this->getState('limit'));
}
return $this->_data;
}
</pre>

Create a getTotal() function. This function uses the _getListCount() method from JModel to return the total number of rows in the query. The value returned will be used by the getPagination() function.
<pre>
function getTotal()
{
// Load the content if it doesn't already exist
if (empty($this->_total)) {
$query = $this->_buildQuery();
$this->_total = $this->_getListCount($query);
}
return $this->_total;
}
</pre>

Create a getPagination() function. The function will create and return a new Pagination object that can be accessed by the View.
<pre>
function getPagination()
{
// Load the content if it doesn't already exist
if (empty($this->_pagination)) {
jimport('joomla.html.pagination');
$this->_pagination = new JPagination($this->getTotal(), $this->getState('limitstart'), $this->getState('limit') );
}
return $this->_pagination;
}
</pre>

====Changes to the View====
Revise the View to obtain the pagination object created in the Model and assign it for use in the template.
<pre>
...
// Get data from the model
$items =& $this->get('Data');
$pagination =& $this->get('Pagination');

// push data into the template
$this->assignRef('items', $items);
$this->assignRef('pagination', $pagination);
...
</pre>

====Changes to the Template====
Add a footer area to the display table in the template which holds the pagination object. The method getListFooter() from the JPagination class generates the buttons and their next/previous functionality as shown in the image above. Edit colspan="9" to reflect the number of columns in the table.
<pre>
...
<tfoot>
<tr>
<td colspan="9"><?php echo $this->pagination->getListFooter(); ?></td>
</tr>
</tfoot>
...
</pre>

File:Listfooter-front.png

2008-02-17T20:50:26Z

Radiant tech: JPagination class output

JPagination class output

File:Resultscounter.png

2008-02-17T20:48:00Z

Radiant tech: JPagination class output

JPagination class output

J1.5:Using JPagination in your component

2008-02-17T20:38:16Z

Radiant tech:

{{inuse}}
{{Content-incomplete}}

{{RightTOC}}
==Class Overview==
The JPagination class, introduced in Joomla! 1.5, allows developers to reliably and consistently add pagination to the Front-end and Back-end display of their components. The file containing the class can be found at /libraries/joomla/html/pagination.php.

====Variables====
The construct function of the class requires three variables:
* $total - the total number of items in a list,
* $limitstart - the offset of the item at which to start, and
* $limit - the number of items to display per page.

====Static Class Methods====
=====getRowOffset($index)=====

=====getData()=====

=====getPagesCounter()=====
<pre>
/**
* Create and return the pagination pages counter string
*
* @access public
* @return string Pagination pages counter string
* @since 1.5
*/
function getPagesCounter()
</pre>

Returns a string containing the current page and total pages as [[image:pagescounter.png]]

=====getResultsCounter()=====
<pre>
/**
* Create and return the pagination result set counter string
*
* @access public
* @return string Pagination result set counter string
* @since 1.5
*/
function getResultsCounter()
</pre>

Returns a string containing the results currently being displayed as [[image:resultscounter.png]]

=====getPagesLinks()=====
<pre>
/**
* Create and return the pagination page list string, ie. Previous, Next, 1 2 3 ... x
*
* @access public
* @return string Pagination page list string
* @since 1.0
*/
function getPagesLinks()
</pre>

Returns an HTML string to display the Pages Links as [[image:pageslinks.png]]

=====getListFooter()=====
<pre>
/**
* Return the pagination footer
*
* @access public
* @return string Pagination footer
* @since 1.0
*/
function getListFooter()
</pre>

Returns a combination of the several page-related elements, including: the Display Limit dropdown, the Pages Links and the Pages Counter. Appearance differs in the Front-end and Back-end due to additional CSS formatting applied with the Khepri template.
Front-end: [[image:listfooter_front.png]]
Back-end: [[image:listfooter_back.png]]

=====getLimitBox()=====
<pre>
/**
* Creates a dropdown box for selecting how many records to show per page
*
* @access public
* @return string The html for the limit # input box
* @since 1.0
*/
function getLimitBox()
</pre>

Returns an HTML string that will output the Display Limit dropdown as [[image:limitbox.png]]

=====orderUpIcon()=====

=====orderDownIcon()=====

==Implementation==
====Changes to the Model====
Declare $_total and $_pagination variables in the model; these will be returned by the functions getTotal() and getPagination(), respectively.
<pre>
/**
* Items total
* @var integer
*/
var $_total = null;

/**
* Pagination object
* @var object
*/
var $_pagination = null;
</pre>

Add to or create a __construct() function that will establish values for the $limitstart and $limit variables as these are needed by the JPagination class.
<pre>
function __construct()
{
parent::__construct();

global $mainframe, $option;

// Get pagination request variables
$limit = $mainframe->getUserStateFromRequest('global.list.limit', 'limit', $mainframe->getCfg('list_limit'), 'int');
$limitstart = $mainframe->getUserStateFromRequest($option.'.limitstart', 'limitstart', 0, 'int');

// In case limit has been changed, adjust it
$limitstart = ($limit != 0 ? (floor($limitstart / $limit) * $limit) : 0);

$this->setState('limit', $limit);
$this->setState('limitstart', $limitstart);
}
</pre>

Revise the getData() function, adding the $limitstart and $limit values to the _getList() query. This causes only the needed rows to be returned, rather than all rows.
<pre>
function getData()
{
// if data hasn't already been obtained, load it
if (empty($this->_data)) {
$query = $this->_buildQuery();
$this->_data = $this->_getList($query, $this->getState('limitstart'), $this->getState('limit'));
}
return $this->_data;
}
</pre>

Create a getTotal() function. This function uses the _getListCount() method from JModel to return the total number of rows in the query. The value returned will be used by the getPagination() function.
<pre>
function getTotal()
{
// Load the content if it doesn't already exist
if (empty($this->_total)) {
$query = $this->_buildQuery();
$this->_total = $this->_getListCount($query); // _getListCount is from JModel class
}
return $this->_total;
}
</pre>

Create a getPagination() function. The function will create and return a new Pagination object that can be accessed by the View.
<pre>
function getPagination()
{
// Load the content if it doesn't already exist
if (empty($this->_pagination)) {
jimport('joomla.html.pagination');
$this->_pagination = new JPagination($this->getTotal(), $this->getState('limitstart'), $this->getState('limit') );
}
return $this->_pagination;
}
</pre>

====Changes to the View====
Revise the View to obtain the pagination object created in the Model and assign it for use in the template.
<pre>
...
// Get data from the model
$items =& $this->get('Data');
$pagination =& $this->get('Pagination');

// push data into the template
$this->assignRef('items', $items);
$this->assignRef('pagination', $pagination);
...
</pre>

====Changes to the Template====
Add a footer area to the display table in the template which holds the pagination object. The method getListFooter() from the JPagination class generates the buttons and their next/previous functionality as shown in the image above. Edit colspan="9" to reflect the number of columns in the table.
<pre>
...
<tfoot>
<tr>
<td colspan="9"><?php echo $this->pagination->getListFooter(); ?></td>
</tr>
</tfoot>
...
</pre>

File:Pagescounter.png

2008-02-17T20:34:48Z

Radiant tech: JPagination class output

JPagination class output

File:Pageslinks.png

2008-02-17T20:33:24Z

Radiant tech: JPagination class output

JPagination class output

File:Limitbox.png

2008-02-17T20:28:52Z

Radiant tech: JPagination class output

JPagination class output

J1.5:Using JPagination in your component

2008-02-17T15:18:40Z

Radiant tech:

{{inuse}}
<span style="color:red;">Please Note:</span> This page has not been completed and instructions below apply specifically to adding Pagination in the Back-end. Additional instructions for the Front-end will be added soon.

==Introduction==
The JPagination class, introduced in Joomla! 1.5, allows developers to reliably and consistently add pagination to the Front-end and Back-end display of their components. The file containing the class can be found at /libraries/joomla/html/pagination.php.

In the Back-end, the getListFooter() function is used to display the pagination object. This generates a limit dropdown listbox, start/end, previous/next, and current page buttons, and current page indicator (i.e., Page 1 of 5) as shown in the image below.
[[Image:Pagination.png]]

In the Front-end, several functions can be called in the template to produce each of these items separately.

==Changes to the Model==
Declare $_total and $_pagination variables in the model; these will be returned by the functions getTotal() and getPagination(), respectively.
<pre>
/**
* Items total
* @var integer
*/
var $_total = null;

/**
* Pagination object
* @var object
*/
var $_pagination = null;
</pre>

Add to or create a __construct() function that will establish values for the $limitstart and $limit variables as these are needed by the JPagination class.
<pre>
function __construct()
{
parent::__construct();

global $mainframe, $option;

// Get pagination request variables
$limit = $mainframe->getUserStateFromRequest('global.list.limit', 'limit', $mainframe->getCfg('list_limit'), 'int');
$limitstart = $mainframe->getUserStateFromRequest($option.'.limitstart', 'limitstart', 0, 'int');

// In case limit has been changed, adjust it
$limitstart = ($limit != 0 ? (floor($limitstart / $limit) * $limit) : 0);

$this->setState('limit', $limit);
$this->setState('limitstart', $limitstart);
}
</pre>

Revise the getData() function, adding the $limitstart and $limit values to the _getList() query. This causes only the needed rows to be returned, rather than all rows.
<pre>
function getData()
{
// if data hasn't already been obtained, load it
if (empty($this->_data)) {
$query = $this->_buildQuery();
$this->_data = $this->_getList($query, $this->getState('limitstart'), $this->getState('limit'));
}
return $this->_data;
}
</pre>

Create a getTotal() function. This function uses the _getListCount() method from JModel to return the total number of rows in the query. The value returned will be used by the getPagination() function.
<pre>
function getTotal()
{
// Load the content if it doesn't already exist
if (empty($this->_total)) {
$query = $this->_buildQuery();
$this->_total = $this->_getListCount($query); // _getListCount is from JModel class
}
return $this->_total;
}
</pre>

Create a getPagination() function. The function will create and return a new Pagination object that can be accessed by the View.
<pre>
function getPagination()
{
// Load the content if it doesn't already exist
if (empty($this->_pagination)) {
jimport('joomla.html.pagination');
$this->_pagination = new JPagination($this->getTotal(), $this->getState('limitstart'), $this->getState('limit') );
}
return $this->_pagination;
}
</pre>

==Changes to the View==
Revise the View to obtain the pagination object created in the Model and assign it for use in the template.
<pre>
...
// Get data from the model
$items =& $this->get('Data');
$pagination =& $this->get('Pagination');

// push data into the template
$this->assignRef('items', $items);
$this->assignRef('pagination', $pagination);
...
</pre>

==Changes to the Template==
Add a footer area to the display table in the template which holds the pagination object. The method getListFooter() from the JPagination class generates the buttons and their next/previous functionality as shown in the image above. Edit colspan="9" to reflect the number of columns in the table.
<pre>
...
<tfoot>
<tr>
<td colspan="9"><?php echo $this->pagination->getListFooter(); ?></td>
</tr>
</tfoot>
...
</pre>

J1.5:Using JPagination in your component

2008-02-17T14:46:42Z

Radiant tech:

{{inuse}}
<span style="color:red;">Please Note:</span> This page has not been completed and instructions below apply specifically to adding Pagination in the Back-end. Additional instructions for the Front-end will be added soon.

==Introduction==
The JPagination class, introduced in Joomla! 1.5, allows developers to reliably and consistently adding pagination to the Front-end and Back-end display of their components. The file containing the class can be found at /libraries/joomla/html/pagination.php. The pagination object generates start/end, previous/next, and current page buttons as shown in the image below.
[[Image:Pagination.png]]

==Changes to the Model==
Declare $_total and $_pagination variables in the model; these will be returned by the functions getTotal() and getPagination(), respectively.
<pre>
/**
* Items total
* @var integer
*/
var $_total = null;

/**
* Pagination object
* @var object
*/
var $_pagination = null;
</pre>

Add to or create a __construct() function that will establish values for the $limitstart and $limit variables as these are needed by the JPagination class.
<pre>
function __construct()
{
parent::__construct();

global $mainframe, $option;

// Get pagination request variables
$limit = $mainframe->getUserStateFromRequest('global.list.limit', 'limit', $mainframe->getCfg('list_limit'), 'int');
$limitstart = $mainframe->getUserStateFromRequest($option.'.limitstart', 'limitstart', 0, 'int');

// In case limit has been changed, adjust it
$limitstart = ($limit != 0 ? (floor($limitstart / $limit) * $limit) : 0);

$this->setState('limit', $limit);
$this->setState('limitstart', $limitstart);
}
</pre>

Revise the getData() function, adding the $limitstart and $limit values to the _getList() query. This causes only the needed rows to be returned, rather than all rows.
<pre>
function getData()
{
// if data hasn't already been obtained, load it
if (empty($this->_data)) {
$query = $this->_buildQuery();
$this->_data = $this->_getList($query, $this->getState('limitstart'), $this->getState('limit'));
}
return $this->_data;
}
</pre>

Create a getTotal() function. This function uses the _getListCount() method from JModel to return the total number of rows in the query. The value returned will be used by the getPagination() function.
<pre>
function getTotal()
{
// Load the content if it doesn't already exist
if (empty($this->_total)) {
$query = $this->_buildQuery();
$this->_total = $this->_getListCount($query); // _getListCount is from JModel class
}
return $this->_total;
}
</pre>

Create a getPagination() function. The function will create and return a new Pagination object that can be accessed by the View.
<pre>
function getPagination()
{
// Load the content if it doesn't already exist
if (empty($this->_pagination)) {
jimport('joomla.html.pagination');
$this->_pagination = new JPagination($this->getTotal(), $this->getState('limitstart'), $this->getState('limit') );
}
return $this->_pagination;
}
</pre>

==Changes to the View==
Revise the View to obtain the pagination object created in the Model and assign it for use in the template.
<pre>
...
// Get data from the model
$items =& $this->get('Data');
$pagination =& $this->get('Pagination');

// push data into the template
$this->assignRef('items', $items);
$this->assignRef('pagination', $pagination);
...
</pre>

==Changes to the Template==
Add a footer area to the display table in the template which holds the pagination object. The method getListFooter() from the JPagination class generates the buttons and their next/previous functionality as shown in the image above. Edit colspan="9" to reflect the number of columns in the table.
<pre>
...
<tfoot>
<tr>
<td colspan="9"><?php echo $this->pagination->getListFooter(); ?></td>
</tr>
</tfoot>
...
</pre>

J1.5:Using JPagination in your component

2008-02-13T16:54:21Z

Radiant tech:

<span style="color:red;">Please Note:</span> This page has not been completed and instructions below apply specifically to adding Pagination in the Back-end. Additional instructions for the Front-end will be added soon.

==Introduction==
The JPagination class, introduced in Joomla! 1.5, allows developers to reliably and consistently adding pagination to the Front-end and Back-end display of their components. The file containing the class can be found at /libraries/joomla/html/pagination.php. The pagination object generates start/end, previous/next, and current page buttons as shown in the image below.
[[Image:Pagination.png]]

==Changes to the Model==
Declare $_total and $_pagination variables in the model; these will be returned by the functions getTotal() and getPagination(), respectively.
<pre>
/**
* Items total
* @var integer
*/
var $_total = null;

/**
* Pagination object
* @var object
*/
var $_pagination = null;
</pre>

Add to or create a __construct() function that will establish values for the $limitstart and $limit variables as these are needed by the JPagination class.
<pre>
function __construct()
{
parent::__construct();

global $mainframe, $option;

// Get pagination request variables
$limit = $mainframe->getUserStateFromRequest('global.list.limit', 'limit', $mainframe->getCfg('list_limit'), 'int');
$limitstart = $mainframe->getUserStateFromRequest($option.'.limitstart', 'limitstart', 0, 'int');

// In case limit has been changed, adjust it
$limitstart = ($limit != 0 ? (floor($limitstart / $limit) * $limit) : 0);

$this->setState('limit', $limit);
$this->setState('limitstart', $limitstart);
}
</pre>

Revise the getData() function, adding the $limitstart and $limit values to the _getList() query. This causes only the needed rows to be returned, rather than all rows.
<pre>
function getData()
{
// if data hasn't already been obtained, load it
if (empty($this->_data)) {
$query = $this->_buildQuery();
$this->_data = $this->_getList($query, $this->getState('limitstart'), $this->getState('limit'));
}
return $this->_data;
}
</pre>

Create a getTotal() function. This function uses the _getListCount() method from JModel to return the total number of rows in the query. The value returned will be used by the getPagination() function.
<pre>
function getTotal()
{
// Load the content if it doesn't already exist
if (empty($this->_total)) {
$query = $this->_buildQuery();
$this->_total = $this->_getListCount($query); // _getListCount is from JModel class
}
return $this->_total;
}
</pre>

Create a getPagination() function. The function will create and return a new Pagination object that can be accessed by the View.
<pre>
function getPagination()
{
// Load the content if it doesn't already exist
if (empty($this->_pagination)) {
jimport('joomla.html.pagination');
$this->_pagination = new JPagination($this->getTotal(), $this->getState('limitstart'), $this->getState('limit') );
}
return $this->_pagination;
}
</pre>

==Changes to the View==
Revise the View to obtain the pagination object created in the Model and assign it for use in the template.
<pre>
...
// Get data from the model
$items =& $this->get('Data');
$pagination =& $this->get('Pagination');

// push data into the template
$this->assignRef('items', $items);
$this->assignRef('pagination', $pagination);
...
</pre>

==Changes to the Template==
Add a footer area to the display table in the template which holds the pagination object. The method getListFooter() from the JPagination class generates the buttons and their next/previous functionality as shown in the image above. Edit colspan="9" to reflect the number of columns in the table.
<pre>
...
<tfoot>
<tr>
<td colspan="9"><?php echo $this->pagination->getListFooter(); ?></td>
</tr>
</tfoot>
...
</pre>

J1.5:Using JPagination in your component

2008-02-13T16:10:48Z

Radiant tech: /* Introduction */

{{inuse}}
==Introduction==
The JPagination class, introduced in Joomla! 1.5, allows developers to reliably and consistently adding pagination to the Front-end and Back-end display of their components. The file containing the class can be found at /libraries/joomla/html/pagination.php. The pagination object generates start/end, previous/next, and current page buttons as shown in the image below.
[[Image:Pagination.png]]

==Changes to the Model==
Declare $_total and $_pagination variables in the model; these will be returned by the functions getTotal() and getPagination(), respectively.
<pre>
/**
* Items total
* @var integer
*/
var $_total = null;

/**
* Pagination object
* @var object
*/
var $_pagination = null;
</pre>

Add to or create a __construct() function that will establish values for the $limitstart and $limit variables as these are needed by the JPagination class.
<pre>
function __construct()
{
parent::__construct();

global $mainframe, $option;

// Get pagination request variables
$limit = $mainframe->getUserStateFromRequest('global.list.limit', 'limit', $mainframe->getCfg('list_limit'), 'int');
$limitstart = $mainframe->getUserStateFromRequest($option.'.limitstart', 'limitstart', 0, 'int');

// In case limit has been changed, adjust it
$limitstart = ($limit != 0 ? (floor($limitstart / $limit) * $limit) : 0);

$this->setState('limit', $limit);
$this->setState('limitstart', $limitstart);
}
</pre>

Revise the getData() function, adding the $limitstart and $limit values to the _getList() query. This causes only the needed rows to be returned, rather than all rows.
<pre>
function getData()
{
// if data hasn't already been obtained, load it
if (empty($this->_data)) {
$query = $this->_buildQuery();
$this->_data = $this->_getList($query, $this->getState('limitstart'), $this->getState('limit'));
}
return $this->_data;
}
</pre>

Create a getTotal() function. This function uses the _getListCount() method from JModel to return the total number of rows in the query. The value returned will be used by the getPagination() function.
<pre>
function getTotal()
{
// Load the content if it doesn't already exist
if (empty($this->_total)) {
$query = $this->_buildQuery();
$this->_total = $this->_getListCount($query); // _getListCount is from JModel class
}
return $this->_total;
}
</pre>

Create a getPagination() function. The function will create and return a new Pagination object that can be accessed by the View.
<pre>
function getPagination()
{
// Load the content if it doesn't already exist
if (empty($this->_pagination)) {
jimport('joomla.html.pagination');
$this->_pagination = new JPagination($this->getTotal(), $this->getState('limitstart'), $this->getState('limit') );
}
return $this->_pagination;
}
</pre>

==Changes to the View==
Revise the View to obtain the pagination object created in the Model and assign it for use in the template.
<pre>
...
// Get data from the model
$items =& $this->get('Data');
$pagination =& $this->get('Pagination');

// push data into the template
$this->assignRef('items', $items);
$this->assignRef('pagination', $pagination);
...
</pre>

==Changes to the Template==
Add a footer area to the display table in the template which holds the pagination object. The method getListFooter() from the JPagination class generates the buttons and their next/previous functionality as shown in the image above. Edit colspan="9" to reflect the number of columns in the table.
<pre>
...
<tfoot>
<tr>
<td colspan="9"><?php echo $this->pagination->getListFooter(); ?></td>
</tr>
</tfoot>
...
</pre>