Joomla! Documentation - User contributions [en]

Manifest files

2016-05-11T10:16:34Z

Isuckatthis:

<noinclude><languages /></noinclude>
<noinclude>{{page|needs updating|}}</noinclude>
<noinclude>
{{Joomla version|version=3.x}} {{Joomla version|version=2.5|status=eos}}
</noinclude>
<translate>
Within Joomla there are manifest files for all of the extensions. These files include the general installation information as well as parameters for the configuration of the [[S:MyLanguage/extension|extension]] itself. Since Joomla! 2.5, there are very few differences between the manifest file formats for the different [[S:MyLanguage/Extension types (technical definitions)|types of extensions]], allowing each type to access the full power of the Joomla! installer.</translate>

<translate>==Naming conventions== 
The file must be named <tt>manifest.xml</tt> or <tt><extension_name>.xml</tt> and located in the root directory of the installation package.</translate>

<translate>==Syntax== </translate>

<translate>=== Root element === 
The primary tag of the installation file is:</translate>
<source lang=xml><extension></extension></source>

<translate>
This starting and closing tags are now valid for all extensions. The new tag <code><extension></code> replaces the old <code><install></install></code> from Joomla {{JVer|1.5}}. The following attributes are allowed within the tag:</translate>

{|class="wikitable"
|-
! style="width: 150px" | <translate>
Attribute</translate> || style="width: 150px" | <translate>
Values</translate> || <translate>
Applicable to</translate> || <translate>
Description</translate>
|-
| type || <code>component</code><br /><code>file</code><br /><code>language</code><br /><code>library</code><br /><code>module</code><br /><code>package</code><br /><code>plugin</code><br /><code>template</code> || <translate>
All extensions</translate>
| <translate>
This attribute describes the type of the extension for the installer. Based on this type further requirements to sub-tags apply.</translate>
|-
| version
| <code>2.5</code><br /><code>3.0</code> || <translate>
All extensions</translate>
| <translate>
String that identifies the version of Joomla for which this extension is developed.</translate>
|-
| method
| <code>install</code><br /><code>upgrade</code> || <translate>
All extensions</translate>
| <translate>
The default value <code>install</code> will be also used if the method attribute is not used. The <code>install</code> value means the installer will gracefully stop if it finds any existing file/folder of the new extension.</translate>
|-
| client
| <code>site</code><br /><code>administrator</code> || <translate>
Modules</translate>
| <translate>
The client attribute allows you to specify for which application client the new module is available.</translate>
|-
| group
| ''string'' || <translate>
Plugins</translate>
| <translate>
The group name specifies for which group of plugins the new plugin is available. The existing groups are the folder names within the directory <tt>/plugins</tt>. The installer will create new folder names for group names that do not exist yet.</translate>
|}

<translate>=== Metadata === </translate>

<translate>
The following elements can be used to insert metadata. None of these elements are required; if they are present, they must be a child of the root element.</translate>

<pre>
<name> – raw component name (e.g. com_banners).
<author> – author's name (e.g. Joomla! Project)
<creationDate> – date of creation or release (e.g. April 2006)
<copyright> – a copyright statement (e.g. (C) 2005 - 2011 Open Source Matters. All rights reserved.)
<license> – a license statement (e.g. NU General Public License version 2 or later; see LICENSE.txt)
<authorEmail> – author's email address (e.g. admin@joomla.org)
<authorUrl> – URL to the author's website (e.g. www.joomla.org)
<version> – the version number of the extension (e.g. 1.6.0)
<description> – the description of the component. This is a translatable field. (e.g. COM_BANNERS_XML_DESCRIPTION)
</pre>

<translate>
Note: The <name> and <description> tags are also translatable fields so that the name and description of the extension can be shown to the user in their native language.</translate>

<translate>=== Front-end files === </translate>

<source lang="xml">
<files folder="from-folder">
<filename>example.php</filename>
<folder>examples</folder>
</files>
</source>

<translate>
Files to copy to the front-end directory should be placed in the <code><files></code> element. You can use the optional <code>folder</code> attribute to specify a directory '''in the ZIP package''' to copy '''from'''. Each file to copy must be represented by a <code><filename></code> element. If you want to copy an entire folder at once, you can define it as a <code><folder></code>.</translate>

<translate>

For '''plugins''', the raw name of the plugin should be placed in the <code>plugin</code> attribute on the <code><filename></code> element that points to the file containing the plugin's class. For example, in the case of a system plugin called "example" (full name <code>plg_system_example</code>), use <code><filename plugin="example">example.php</filename></code>.</translate>

<translate>=== Media files === </translate>

<source lang="xml>
<media folder="media" destination="com_example">
<filename>com_example_logo.png</filename>
<folder>css</folder>
<folder>js</folder>
</media>
</source>

<translate>
This example will copy the file(s) (<tt>/media/com_example_logo.png</tt>) and folders ( <tt>/media/css/</tt> and <tt>/media/js/</tt> ) listed to <tt>/media/com_example/</tt>, creating the <tt>com_example</tt> folder if required. You can use the optional <code>folder</code> attribute to specify a directory '''in the ZIP package''' to copy '''from''' (in this case, <tt>media</tt>).</translate>

<translate>
Extensions should be storing assets they need to be web accessible (JS, CSS, images etc) in <code>media</code>. Amongst other things this feature was added as step in the progression to multi-site support and the eventual move of code files (PHP) out of the web accessible areas of the server.<br />
Note: the media section is not parsed for 'package' type extensions.</translate>

Ref:
* [https://groups.google.com/forum/#!msg/joomla-dev-cms/4CAASJqFY-k/PvPj14gP29EJ Google Groups - joomla-dev-cms thread]
* [https://groups.google.com/forum/#!msg/joomla-dev-cms/uNmhX98sKbE/p8p68Jke680J Google Groups - joomla-dev-cms thread]

<translate>=== Administration section === </translate>

<source lang="xml">
<administration>

</administration>
</source>

<translate>
The administration section is defined in the <code><administration></code> element. Since only [[S:MyLanguage/Component|components]] apply to both the [[S:MyLanguage/Site (Application)|site]] and the [[S:MyLanguage/Administrator (Application)|administrator]], '''only component manifests can include this element'''.</translate>

<translate>==== Back-end files ==== </translate>

<translate>
Files to copy to the back-end directory should be placed in the <code><files></code> element under the <code><administration></code>. You can use the optional <code>folder</code> attribute to specify a directory '''in the ZIP package''' to copy '''from'''. See ''Front-end files'' for further rules.</translate>

<translate>==== Menu links and submenus ==== </translate>
{{dablink|<translate>
'''Version Note:''' Prior to Joomla 3.4, not having a <code><nowiki><menu></nowiki></code> tag in your manifest XML file still led to a menu item being created. This bug was fixed in Joomla 3.4, so if there is no <code><nowiki><menu></nowiki></code> tag in your manifest file, then no admin menu item is created for the component.</translate>}}

<source lang="xml">
<menu>COM_EXAMPLE</menu>
<submenu>

<menu link="anoption=avalue&anoption1=avalue1">COM_EXAMPLE_SUBMENU_ANOPTION</menu>
<menu view="viewname">COM_EXAMPLE_SUBMENU_VIEWNAME</menu>
</submenu>
</source>

<translate>
The text for the main menu item for the component is defined in the <code><menu></code> item, a child of <code><administration></code>. A <code><submenu></code> element may also be present (also a child of <code><administration></code>), which may contain more menu items defined by <code><menu></code>.</translate>

<translate>
Additionally, each <code><menu></code> item can define the following attributes:</translate>

{| class="wikitable"
! style="width: 150px" | <translate>
Attribute</translate> || <translate>
Description</translate>
|-
| link || <translate>
A link to send the user to when the menu item is clicked</translate>
|-
| img || <translate>
The (relative) path to an image (16x16 pixels) to appear beside the menu item.
<u>Must be an url compatible as a file too (e.g. no spaces) !</u></translate>
|-
| alt ||
|-
| ''string'' || <translate>
An URL parameter to add to the link. For example, <code><menu view="cpanel">COM_EXAMPLE</menu></code> in com_example's XML manifest would cause the URL of the menu item to be <tt>index.php?option=com_example&view=cpanel</tt>.</translate>
|-
|}

<translate>
The value inside the tag is the menu's label. Unlike Joomla! 1.5, you can not use a natural language string. For example, if you would enter "Example Component" instead of COM_EXAMPLE, it would result in your component name appearing as example-component in the menu and you would be unable to provide a translation. In order to provide a translation you need to create a file named en-GB.com_example.sys.ini in administrator/languages/en-GB (you can use the manifest's <code><languages></code> tag to copy it during installation) or in administrator/components/com_example/language/en-GB. In the latter case, you must not include the translation file in the <code><languages></code> tag. As long as you have placed the language directory in your <code><files></code> tag, it will be copied along when the component is being installed.</translate>

<translate>
The contents of that file should be:</translate>

<source>
COM_EXAMPLE="Example Component"
COM_EXAMPLE_SUBMENU_ANOPTION="Another Option"
COM_EXAMPLE_SUBMENU_VIEWNAME="Another View"
</source>

<translate>
Please note that the language string must be enclosed in double quotes, as per Joomla!'s translation standards. Important note: Joomla! 1.6 and later sorts the Component menu items based on the actual translation of the key you supply in your XML manifest. This means that the sorting order is correct no matter what you call your translation key and no matter which language the site is being displayed in. Essentially, Joomla! 1.6 fixed the wrong sorting of the Components menu experienced under Joomla! 1.5 for the majority (non-English speaking!) of Joomla! users.</translate>

<translate>=== Configuration === </translate>
{{warning|<translate>
Components '''do not support''' configuration definitions '''in the manifest'''. This is a way implemented in Joomla! 1.5. They can define configuration options for multiple levels using [[S:MyLanguage/Component configuration metadata|Component configuration metadata]].</translate>}}
<translate>
The <code><config></code> element, a child of the root, describes the configuration options for the extension. If applicable, the options will be shown by the appropriate Manager (Plugin Manager, Module Manager or Template Manager). '''Configuration options can also be defined in a separate file named <code>config.xml</code>. Its root element should be <code><config></code>.'''</translate>

<translate>
Each fieldset must contain one or more <code><field></code> elements, each representing a single [[S:MyLanguage/form field|form field]] with a label. See [[S:MyLanguage/Standard form field types|Standard form field types]] for a list of allowed form field types and example XML form field definitions.</translate>

<translate>=== SQL === </translate>

<source lang="xml">
<install>
<sql>
<file driver="mysql" charset="utf8">sql/example.install.sql</file>
</sql>
</install>
<uninstall>
<sql>
<file driver="mysql" charset="utf8">sql/example.uninstall.sql</file>
</sql>
</uninstall>
</source>

<translate>
In the above example, we put the SQL files in the <tt>admin/sql</tt> folder of the installation package. You have to include the <tt>sql</tt> folder in the administration files (as described in ''Back-end files'').</translate>

<translate>
You can execute SQL during the installation and/or uninstallation using the <code><install></code> and <code><uninstall></code> elements, respectively. A <code><sql></code> element should appear as a child of these elements. <code><sql></code> can contain any number of <code><file></code> elements, each defining a single SQL file to execute. Their database driver types are described by the <code>driver</code> attribute, their character sets by the <code>charset</code> attribute.</translate>

<translate>==== Update of the SQL schema ==== </translate>

<translate>
Since 1.6, there is also an <code><update></code> tag, which allows you to provide a series of SQL files to update the current schema.</translate>

<source lang="xml">
<update>
<schemas>
<schemapath type="mysql">sql/updates/mysql</schemapath>
<schemapath type="sqlsrv">sql/updates/sqlsrv</schemapath>
</schemas>
</update>
</source>

For example, in order to go from version <code>1.0.0</code> to version <code>1.0.1</code> in a '''MySQL''' database, a <code>1.0.1.sql</code> file must be created inside the <code>sql/updates/mysql</code> folder and the <code><version></code> tag of the manifest must be updated to
<source lang="xml">
<version>1.0.1</version></source>

The final structure of the sql folder will look like this (assuming a '''MySQL''' database)
<source lang="xml">
sql
|-->example.install.sql
|-->example.uninstall.sql
|-->updates
|-->mysql
|-->1.0.1.sql</source>

Similar files must be created for subsequent versions.

<translate>=== Language files === </translate>
<translate>
In Joomla! 1.5, extension developers had to put extension language files in the Joomla! main language folder, using the <languages>...</languages> tag as shown below. '''This method can still be used in Joomla!''' {{JVer|3.x}}.</translate>

<source lang="xml">

<languages folder="langfiles">
<language tag="en-GB">en-GB.com_example.ini</language>
</languages>
</source>

<translate>
Since Joomla! 1.6 it has been encouraged placing your extension's language files in your extension folder. Joomla! will then automatically load your extension's language files.</translate>

<translate>
By storing extension language files in the extension folder, you gain the benefit of isolating and protecting your extension's language files. For example, an administrator removes a language from their Joomla! installation. Your extension's language files will not be removed. They will remain in place and will be available if the language is installed again.</translate>

<translate>
The structure of the language folder for frontend and backend is the same. You put them in the language tag (e.g. '''en-GB''' ) of each language in your language folder i.e. '''language/en-GB/'''. You have to specify those folders in the front-end and back-end files too.</translate>

<translate>
In your manifest you simply include the ''''language'''' folder in your files section, the sub-directories for each language automatically be copied. Inside the <files> group you simply add a <folder> element alongside the items in the '''<files>''' group as shown in this example:</translate>

<source lang="xml">
<files>
<filename plugin="alpha">alpha.php</filename>
<folder>sql</folder>
<folder>language</folder>
</files>
</source>

<translate>
It is also notable that both ways can work together. Here is an example from core:</translate>

<source lang="xml">
<files>
<filename plugin="languagecode">languagecode.php</filename>
<filename>index.html</filename>
<folder>language</folder>
</files>
<languages>
<language tag="en-GB">language/en-GB/en-GB.plg_system_languagecode.ini</language>
<language tag="en-GB">language/en-GB/en-GB.plg_system_languagecode.sys.ini</language>
</languages>
</source>

<translate>
The advantages of this solution are the following:</translate>

<translate>
All ini files present in the core folder have precedence over the files in the extension language/ folder.
For example a sys.ini file will always be loaded from core folders in back-end if it exists, except when installing an extension which contains a sys.ini file in a language folder. In that case and only that case, the sys.ini file in the extension folder will display its translated content at install time. This is very handy as a developer can have 2 sys.ini files with different contents. A description of the successful install as well as a tutorial in back-end for example.</translate>

<translate>
Also, it is much easier for a user needing an ini file for an extension that does not provide it in the language desired, to add it in the main folders. No risk for it to be deleted in case of uninstalling the extension by mistake or any other reason.</translate>

<translate>
See also:
*[[S:MyLanguage/J2.5:Making non-core language packs|Making non-core language packs]]
*[[S:MyLanguage/Creating language packs for extensions in Joomla 2.5|Creating language packs for extensions in Joomla 2.5]]</translate>

<translate>
During development you can turn on language debugging in the Joomla! global configuration. So you can investigate if a problems arises. As of 3.2, this is necessary to help debug as en-GB is '''always''' loaded first when not in debug mode to prevent displaying Constants.</translate>

<translate>=== Script file === </translate>

<source lang="xml">
<scriptfile>example.script.php</scriptfile>
</source>

<translate>
An optional '''script file''' (PHP code that is run before, during and/or after installation, uninstallation and upgrading) can be defined using a <code><scriptfile></code> element. This file should contain a class named "<element_name>InstallerScript" where <element_name> is the name of your extension (e.g. com_componentname, mod_modulename, etc.). Plugins requires to state the group (e.g. plgsystempluginname). Library packages do not support scriptfiles. The structure of the class is as follows:</translate>

<source lang="php">

class com_componentnameInstallerScript
{
/**
* Constructor
*
* @param JAdapterInstance $adapter The object responsible for running this script
*/
public function __construct(JAdapterInstance $adapter);

/**
* Called before any type of action
*
* @param string $route Which action is happening (install|uninstall|discover_install|update)
* @param JAdapterInstance $adapter The object responsible for running this script
*
* @return boolean True on success
*/
public function preflight($route, JAdapterInstance $adapter);

/**
* Called after any type of action
*
* @param string $route Which action is happening (install|uninstall|discover_install|update)
* @param JAdapterInstance $adapter The object responsible for running this script
*
* @return boolean True on success
*/
public function postflight($route, JAdapterInstance $adapter);

/**
* Called on installation
*
* @param JAdapterInstance $adapter The object responsible for running this script
*
* @return boolean True on success
*/
public function install(JAdapterInstance $adapter);

/**
* Called on update
*
* @param JAdapterInstance $adapter The object responsible for running this script
*
* @return boolean True on success
*/
public function update(JAdapterInstance $adapter);

/**
* Called on uninstallation
*
* @param JAdapterInstance $adapter The object responsible for running this script
*/
public function uninstall(JAdapterInstance $adapter);
}

</source>

<translate>=== Update servers === </translate>

<source lang="xml">
<updateservers>
<server type="extension" priority="1" name="Extension Update Site">http://example.com/extension.xml</server>
<server type="collection" priority="2" name="Collection Update Site">http://example.com/collection.xml</server>
</updateservers>
</source>

<translate>
Update servers can be defined in the <code><updateservers></code> element, a child of the root. This element may contain one or more <code><server></code> element, each describing a location to fetch updates from. Each <code><server></code> item can define the following attributes:</translate>

{| class="wikitable"
! style="width: 150px" | <translate>
Attribute</translate> || style="width: 150px" | <translate>
Values</translate> || <translate>
Description</translate>
|-
| type || <code>extension</code><br /><code>collection</code> || <translate>
The update server type</translate>
|-
| priority || ''integer'' || <translate>
The priority of the update server</translate>
|-
| name || ''string'' || <translate>
The name of the update server</translate>
|}

<translate>
More info:
* [[S:MyLanguage/J2.5:Developing a MVC Component/Adding an update server|Building a Joomla! Extension - Adding an update server]]
* [[S:MyLanguage/J2.5:Managing Component Updates|Managing Component Updates in Joomla 2.5]]</translate>

<translate>== Examples == 
For a real-life example, see [https://github.com/joomla/joomla-cms/blob/2.5.x/administrator/components/com_banners/banners.xml the manifest of the Banner component in the latest version of Joomla! 2.5].</translate>

<translate>
The Joomla testing process uses several extensions to test whether the installer works correctly. The latest versions of the manifests of these extensions are:</translate>

* [http://svn.joomla.org/project/cms/development/trunk/tests/_data/installer_packages/com_alpha/alpha.xml com_alpha manifest]
* [http://svn.joomla.org/project/cms/development/trunk/tests/_data/installer_packages/mod_alpha/mod_alpha.xml mod_alpha manifest]
* [http://svn.joomla.org/project/cms/development/trunk/tests/_data/installer_packages/plg_system_alpha/alpha.xml plg_system_alpha manifest]
* [http://svn.joomla.org/project/cms/development/trunk/tests/_data/installer_packages/tpl_simple/templateDetails.xml tpl_simple manifest]
* [http://svn.joomla.org/project/cms/development/trunk/tests/_data/installer_packages/lng_xx-XX/xx-XX.xml lng_xx-XX manifest]

<translate>== Contributors == </translate>
*[[User:akede|Alex Kempkens]]
*[[User:dperaza|Daniel Peraza]]
*[[User:nikosdion|Nicholas K. Dionysopoulos]]
*[[User:mrs.siam|Prasit Gebsaap]]
*[[User:cppl|Craig Phillips]]

<noinclude>
<translate>

[[Category:Development]]
[[Category:Extension development]]
[[Category:Specifications]]
</translate>
</noinclude>

Meter form field type

2015-05-15T10:41:34Z

Isuckatthis:

Draws a progress bar. (see [http://getbootstrap.com/2.3.2/components.html#progress here] for more details)

* '''name''' (mandatory) is the unique name of the parameter.
* '''type''' (mandatory) must be ''meter''.
* '''label''' (mandatory) (translatable) is the descriptive title of the field.
* '''description''' (optional) (translatable) tooltip for the form field.
* '''class''' (optional) specify your own classes for additonal markup

* '''size''' (optional) sets the input size of the field
* '''default''' (optional) the initial value of the progress bar.
* '''min''' (optional) the minimum value of the progress bar.
* '''max''' (optional) the maximum value of the progress bar.
* '''step''' (optional) the step at which the progress changes on the bar.
* '''animated''' (optional)(default:true) sets whether the progress bar is animated or not.
* '''active''' (optional)(default:false) sets whether the progress bar animation is active. Works with '''animated''' .

Note that without setting the '''min''' and '''max''' values it will probably not work as expected
This is '''NOT''' an input type. It just creates a progress bar

<source lang="xml">
<field name="meter"
active="true"
type="meter"
label="Meter"
max="1000"
min="1"
step="10"
default="240"
/>
</source>

This will create the following HTML code
<source type="html">
<div class="control-group">
<div class="control-label">
<label id="jform_meter-lbl" for="jform_meter" class="">
Meter
</label>
</div>
<div class="controls">
<div class="progress progress-striped active" data-max="1000" data-min="1" data-step="10" data-value="240">
<div class="bar" style="width: 23.923923923924%;"></div>
</div>
</div>
</div>
</source>

[[Category:Standard form field types]]

Meter form field type

2015-05-15T10:36:12Z

Isuckatthis:

Draws a progress bar. (see [http://getbootstrap.com/2.3.2/components.html#progress here] for more details)

* '''name''' (mandatory) is the unique name of the parameter.
* '''type''' (mandatory) must be ''meter''.
* '''label''' (mandatory) (translatable) is the descriptive title of the field.
* '''description''' (optional) (translatable) tooltip for the form field.
* '''class''' (optional) specify your own classes for additonal markup, defaults to "combobox"
* '''readonly''' (optional) set to "true", defaults to false, meaning editable.
* '''disabled''' (optional) set to "true", defaults to false, meaning enabled.
* '''size''' (optional) sets the input size of the field
* '''required''' (optional) sets whether input is required, defaults to no input required.
* '''default''' (optional) the initial value of the progress bar.
* '''min''' (optional) the minimum value of the progress bar.
* '''max''' (optional) the maximum value of the progress bar.
* '''step''' (optional) the step at which the progress changes on the bar.
* '''animated''' (optional)(default:true) sets whether the progress bar is animated or not.
* '''active''' (optional)(default:false) sets whether the progress bar animation is active. Works with '''animated''' .

Note that without setting the '''min''' and '''max''' values it will probably not work as expected
This is '''NOT''' an input type. It just creates a progress bar

<source lang="xml">
<field name="meter"
active="true"
type="meter"
label="Meter"
max="1000"
min="1"
step="10"
default="240"
/>
</source>

This will create the following HTML code
<source type="html">
<div class="control-group">
<div class="control-label">
<label id="jform_meter-lbl" for="jform_meter" class="">
Meter
</label>
</div>
<div class="controls">
<div class="progress progress-striped active" data-max="1000" data-min="1" data-step="10" data-value="240">
<div class="bar" style="width: 23.923923923924%;"></div>
</div>
</div>
</div>
</source>

[[Category:Standard form field types]]

Meter form field type

2015-05-15T10:32:52Z

Isuckatthis:

Draws a progress bar. (see [http://getbootstrap.com/2.3.2/components.html#progress here] for more details)

* '''name''' (mandatory) is the unique name of the parameter.
* '''type''' (mandatory) must be ''meter''.
* '''label''' (mandatory) (translatable) is the descriptive title of the field.
* '''description''' (optional) (translatable) tooltip for the form field.
* '''class''' (optional) specify your own classes for additonal markup, defaults to "combobox"
* '''readonly''' (optional) set to "true", defaults to false, meaning editable.
* '''disabled''' (optional) set to "true", defaults to false, meaning enabled.
* '''size''' (optional) sets the input size of the field
* '''required''' (optional) sets whether input is required, defaults to no input required.
* '''default''' (optional) the initial value of the progress bar.
* '''min''' (optional) the minimum value of the progress bar.
* '''max''' (optional) the maximum value of the progress bar.
* '''step''' (optional) the step at which the progress changes on the bar.
* '''animated''' (optional)(default:true) sets whether the progress bar is animated or not.
* '''active''' (optional)(default:false) sets whether the progress bar animation is active. Works with '''animated''' .

Note that without setting the '''min''' and '''max''' values it will probably not work as expected
This is '''NOT''' an input type. It just create a progress bar

<source lang="xml">
<field name="meter"
active="true"
type="meter"
label="Meter"
max="1000"
min="1"
step="10"
default="240"
/>
</source>

This will create the following HTML code
<source type="html">
<div class="control-group">
<div class="control-label">
<label id="jform_meter-lbl" for="jform_meter" class="">
Meter
</label>
</div>
<div class="controls">
<div class="progress progress-striped" data-max="1000" data-min="1" data-step="1" data-value="233">
<div class="bar" style="width: 23.223223223223%;"></div>
</div>
</div>
</div>
</div>
</source>

[[Category:Standard form field types]]

Meter form field type

2015-05-15T10:31:31Z

Isuckatthis: Created page with "Draws a progress bar. (see [http://getbootstrap.com/2.3.2/components.html#progress here] for more details) * '''name''' (mandatory) is the unique name of the parameter. * '''..."

Draws a progress bar. (see [http://getbootstrap.com/2.3.2/components.html#progress here] for more details)

* '''name''' (mandatory) is the unique name of the parameter.
* '''type''' (mandatory) must be ''meter''.
* '''label''' (mandatory) (translatable) is the descriptive title of the field.
* '''description''' (optional) (translatable) tooltip for the form field.
* '''class''' (optional) specify your own classes for additonal markup, defaults to "combobox"
* '''readonly''' (optional) set to "true", defaults to false, meaning editable.
* '''disabled''' (optional) set to "true", defaults to false, meaning enabled.
* '''size''' (optional) sets the input size of the field
* '''required''' (optional) sets whether input is required, defaults to no input required.
* '''default''' (optional) the initial value of the progress bar.
* '''min''' (optional) the minimum value of the progress bar.
* '''max''' (optional) the maximum value of the progress bar.
* '''step''' (optional) the step at which the progress changes on the bar.
* '''animated''' (optional)(default:true) sets whether the progress bar is animated or not.
* '''active''' (optional)(default:false) sets whether the progress bar animation is active. Works with '''animated''' .

Note that without setting the '''min''' and '''max''' values it will probably not work as expected
This is '''NOT''' an input type. It just create a progress bar

<source type="php">
<field name="meter"
active="true"
type="meter"
label="Meter"
max="1000"
min="1"
step="10"
default="240"
/>
</source>

This will create the following HTML code
<source type="html">
<div class="control-group">
<div class="control-label">
<label id="jform_meter-lbl" for="jform_meter" class="">
Meter
</label>
</div>
<div class="controls">
<div class="progress progress-striped" data-max="1000" data-min="1" data-step="1" data-value="233">
<div class="bar" style="width: 23.223223223223%;"></div>
</div>
</div>
</div>
</div>
</source>

[[Category:Standard form field types]]

Archived talk:Creating a file uploader in your component

2015-04-21T07:33:05Z

Isuckatthis: /* Dead links */ new section

Hi

Implementing the SWFUpload Application demo for my component. The joomla document explains only the simple demo (http://docs.joomla.org/Creating_a_file_uploader_in_your_component )

what are the changes i have to do from the joomla doc. How i rewrite the thumbnail picture function for joomla 1.5

I tried so many time but not works out

<?php
// This script accepts an ID and looks in the user's session for stored thumbnail data.
// It then streams the data to the browser as an image

// Work around the Flash Player Cookie Bug
if (isset($_POST["PHPSESSID"])) {
session_id($_POST["PHPSESSID"]);
}

session_start();

$image_id = isset($_GET["id"]) ? $_GET["id"] : false;

if ($image_id === false) {
header("HTTP/1.1 500 Internal Server Error");
echo "No ID";
exit(0);
}

if (!is_array($_SESSION["file_info"]) || !isset($_SESSION["file_info"][$image_id])) {
header("HTTP/1.1 404 Not found");
exit(0);
}

header("Content-type: image/jpeg") ;
header("Content-Length: ".strlen($_SESSION["file_info"][$image_id]));
echo $_SESSION["file_info"][$image_id];
exit(0);
?>

Pls help

Regards
Gopi

== Deprecated function used in the example ==
The ereg_replace function used is deprecated in PHP 5.3 so the example doesn't work:

//lose any special characters in the filename
$fileName = ereg_replace("[^A-Za-z0-9.]", "-", $fileName);

Needs to be reviewed.

06/03/2012

Edit to take this into account - Hopefully resolved!!

== Changed PHP script in Part 5 ==

I made some changes to my own work, before using it. Some tests to use JFile versions and the code is shorter. Return value '''true''' on success or else '''false''' if there was an error.
<source lang="php">
jimport('joomla.filesystem.file');
jimport('joomla.filesystem.folder');

$fieldName = 'file_upload';
$fileTemp = $_FILES[$fieldName]['tmp_name'];
$fileName = JFile::makeSafe( $_FILES[$fieldName]['name'] );
$fileExt = strtolower( JFile::getExt( $fileName ) );
$imageinfo = getimagesize( $fileTemp );
$mimetypes = array( 'image/jpeg', 'image/pjpeg', 'image/png', 'image/x-png', 'image/gif' );
$uploadPath = JPATH_COMPONENT . DS . 'images' . DS . $fileName;

switch ( $_FILES[$fieldName]['error'] ) {
case 1:
echo JText::_( 'FILE LARGER THAN PHP INI ALLOW' );
return false;

case 2:
echo JText::_( 'FILE LARGER THAN HTML FORM ALLOW' );
return false;

case 3:
echo JText::_( 'ERROR PARTIAL UPLOAD' );
return false;

case 4:
echo JText::_( 'ERROR NO FILE' );
return false;

default:
}

if ( $_FILES[$fieldName]['size'] > 2000000 ) {
echo JText::_( 'FILE BIGGER THAN 2MB' );
}

if ( !in_array( $fileExt, explode(',', 'jpeg,jpg,png,gif') ) ) {
echo JText::_( 'INVALID EXTENSION' );
return false;
} else if ( !in_array( $imageinfo['mime'], $mimetypes ) ) {
echo JText::_( 'INVALID FILE TYPE' );
return false;
} else if ( !is_int( $imageinfo[0] ) || !is_int( $imageinfo[0] ) ) {
echo JText::_( 'INVALID FILE SIZE' );
return false;
}

if( !JFile::upload( $fileTemp, $uploadPath ) ) {
echo JText::_( 'ERROR MOVING FILE' );
return false;
}
return true;
</source>

Regards
hasse_bjork

Helpme Please!!

Part 3: Adding The Head Javascript

upload_url: "index.php ?????? ",
post_params:
{
"option" : "com_mycomponent",
"controller" : "?????",
"task" : "????",

Where the code is part 5?

== Suggestion for Part 6 ==

Instead of editing a core file like libraries\joomla\session\session.php I found an alternative. In your component, create a file that looks like this:

<?php

// Restore session that existed prior to flash uplosd

$sn = session_name();<br/>
if (isset($_COOKIE[$sn]) && isset($_POST[$sn])) {<br/>
$_COOKIE[$sn] = $_POST[$sn];<br/>
session_id($_POST[$sn]);<br/>
}<br/>

chdir('../..');<br/>
include('index.php');

Then in part 3, set upload_url equal to the path to the file you just created. It works for me, at least in localhost. What do you think?

regards,
John

== Dead links ==

The links to the files are dead. Either fix this or completely remove this tutorial since it's useless

--02:33, 21 April 2015 (CDT)

User talk:Tom Hutchison

2015-02-19T08:57:14Z

Isuckatthis: /* Edits stopped by spam filter */

<div class="large-12 columns panel">
<div class="large-9 columns">
===Leave a Message===
If you have any questions or problems on Joomla! Documentation, just use the add a topic, leave me a message and don't forget to sign it with 4 tildes(<nowiki>~~~~</nowiki>).</div>
<div class="large-3 columns panel radius"><center>'''Archived Talk Pages'''</center><small><splist/></small></div></div>
{{-}}__TOC__

== Merging "Setting up workstation..." discussion ==

Hello, I dunno if you will get it automatically, but here some thoughts on your merge proposal: http://docs.joomla.org/Talk:Setting_up_your_workstation_for_Joomla!_development#Merge_Warning

== Component development for 3.2 is somewhat unfinished ==

Hi,
I'm trying to follow the tutorial for developing a component for Joomla 3.2
But somehow it is not very friendly to a person like me, new to Joomla development.
What can I do, in order to make this tutorial more "newbie"-friendly ?
[[User:Cwurtz|Cwurtz]] ([[User talk:Cwurtz|talk]]) 22:29, 13 December 2013 (CST)
::Hi Cwurtz, thanks for asking! J3.2 MVC is really incomplete, partly because the J2.5 version still valid, and partly because J2.5 still needs to be copied over into the J3.2 namespace and then improved. You are free to help as you would like and it would be greatly appreciated! How can I help get you started? [[User:Tom Hutchison|Tom Hutchison]] ([[User talk:Tom Hutchison|talk]]) 10:28, 14 December 2013 (CST)

== It's Joomla! (!) ==

Hi Tom,<br />
I was wondering if we should enforce the use of the exclamation mark, which is part of the trade mark IMHO, in titles and throughout the text?

I noticed that in your recent addition [[Joomla_Credits_and_Thanks]] (starting from the title ;) )

--[[User:Elkuku|Elkuku]] ([[User talk:Elkuku|talk]]) 10:15, 17 May 2014 (CDT)

:Usually yes, but... we have to watch breaking the ability to link from the forum to doc pages. Using mod_security on the family of our sites with some strange rules which can and does cause issues. We have used titles like Installing Joomla! and the link was broken on the forum, then we had to change it. Latest quirk I heard was driver on the forum being wrapped as [driver] even in JDatabaseDriver to JDatabase[Driver]. ?'s are an issue too. Docs has a toned down mod_security, we couldn't even use 'source' in code tags at one point last fall.

:Joomla! vs Joomla in text. This is tricky, I have been told Joomla! as the first use in a page, then Joomla for every following use on the same page. Still not sure myself because OSM pages use !'s on the entire page. If 1st use is the rule, we need to document it on the use of Joomla! and Joomla! Logos page on OSM. I'll investigate the use some more and at least get it somewhere in writing for all.

:I went ahead and changed the title adding a ! and left the other as a redirect to the ! page if there is a problem using the Joomla! page as a url on the forum. They can always link without the ! and it will redirect to the correct usage one.

:Thanks for adding to JetBrains on the Credits and Thanks page. I just set the page up last night and had not gotten to what JetBrains does for the project. We were discussing all this on leadership mail list, etc... and I had not let everyone know I created the page. Doing that now.

:Thanks!! [[User:Tom Hutchison|Tom Hutchison]] ([[User talk:Tom Hutchison|talk]]) 12:42, 17 May 2014 (CDT)

Adding JavaScript

2015-02-19T08:56:32Z

Isuckatthis: /* Ask me why */

{{version/tutor|1.5,2.5,3.1}}

JavaScript (also known as ECMAScript) is a scripting language primarily used in client-side web site development to extend and enhance an end-user's experience. Joomla provides developers with easy-to-use mechanisms to include JavaScript in their extensions using existing API methods.

There are a number of methods for including JavaScript in your Joomla extensions; some of these are described below.

==Usage==

There are three methods for embedding JavaScript into your code using the Joomla API; [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration JDocument::addScriptDeclaration], [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript JDocument::addScript] and [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script]. These methods should be called either in your component's View class (<yourcomponent>/views/<yourview>/view.html.php) or template script (<yourcomponent>/views/<yourview>/tmpl/<yourtemplate>.php or in the case of a module, in its template script (<yourmodule>/tmpl/<yourtemplate>.php).

===Inline JavaScript===

Blocks of JavaScript code can be declared directly within a component or module's display template using the [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html JDocument] class' [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration addScriptDeclaration] method:

<source lang="php">
<?php
$document = JFactory::getDocument();
$document->addScriptDeclaration('
window.event("domready", function() {
alert("An inline JavaScript Declaration");
});
');
?>
</source>

===External JavaScript===

Alternatively, you may wish to separate your JavaScript into a separate file. Separating your JavaScript into an external file can make your template code easier to read especially if the JavaScript is lengthy or complex.

There are two ways to include a JavaScript file using the Joomla API. The first involves using the [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html JDocument] class' [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript addScript] method:

<source lang="php">
<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>
</source>

The second uses the [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html JHTML] class' [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] method:

<source lang="php">
<?php
// Add the path parameter if the path is different than 'media/system/js/'
JHTML::script('sample.js', 'templates/custom/js/');
?>
</source>

API has changed in 3.x, so the second parameter cannot be a string. If you really need to use this method, you must include the absolute link to your javacript file:

<source lang="php">
<?php
JHtml::script(Juri::base() . 'templates/custom/js/sample.js');
?>
</source>

==Description==
The Joomla API's [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration JDocument::addScriptDeclaration], [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript JDocument::addScript] and [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] methods embed JavaScript into Joomla's index.php via the jdoc head tag:

<source lang="html4strict">
<jdoc:include type="head"/>
</source>

Using the [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript JDocument::addScript] or [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] methods to embed JavaScript includes would result in the index.php rendering the following HTML:

<source lang="html4strict">
<head>
...
<script type="text/javaScript" src="/media/system/js/sample.js"></script>
...
</head>
</source>

Calling the class method [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration JDocument::addScriptDeclaration] would render the following HTML:

<source lang="html4strict">
<head>
...
<script type="text/javaScript">
window.addEvent("domready", function() {
alert("Embedded block of JS here");
});
</script>
...
</head>
</source>

Using these methods is highly recommended as it clearly differentiates another scripting language (JavaScript) from the main PHP code, ensures all JavaScript is correctly embedded between the <head></head> tags and, in the case of JDocument::addScript and JHTML::script ensures that a JavaScript file is included only once (I.e. there is no .js file duplication).

== Using a JavaScript Framework ==

A Javascript framework provides developers with generic functionality for handling various coding tasks in a familiar, consistent and platform-independent way. A framework enables the developer to forget about the intricacies of implementing a certain function in different web browsers and focus on the requirements of the software.

Two [[Javascript Frameworks]] are provided as part of Joomla 3.x; jQuery and Mootools. jQuery is a newly introduced framework which integrates with Joomla's new Bootstrap HTML framework; Mootools is Joomla's legacy Javascript library which is now superseded by jQuery and is included for backwards compatibility with 3rd party extensions.

In nearly all cases you should use a framework when developing Javascript in your extensions or templates and including one is very simple with Joomla's API.

===Joomla 3.x jQuery ===
Please see the guide on [[Javascript_Frameworks|Javascript Frameworks in Joomla 3.x]] for information about including a framework in Joomla 3.x

=== Joomla 1.5/2.5 Mootools ===

Unless you are maintaining Javascript code which leverages Mootools or you are developing an extension for Joomla 2.5 or earlier it is recommended you use jQuery instead.

Firstly, you will need to include the Mootools code in your extension. To include the Mootools framework in your extension, you add the following code to your view.html.php or tmpl file:

FOR JOOMLA 1.5
<source lang="php">
JHTML::_('behavior.mootools');
</source>

FOR JOOMLA 2.5
<source lang="php">
JHtml::_('behavior.framework');
</source>

The above code results in the same outcome as the similar jQuery framework statement; that is it ensures Mootools is included correctly and only once.

Then using Mootools is almost identical to jQuery:

<source lang="php">
JFactory::getDocument()->addScriptDeclaration('
window.addEvent("domready", function() {
alert($("list").getElements("li").length);
});
');
</source>

More information about Mootools is available at http://mootools.net/. For API documentation, visit http://mootools.net/docs/core.

== Important notes for 3rd party developers ==

If you are creating a custom template override or extension that needs to add a custom JS file, make sure to add important dependencies such as Jquery or Mootools before your custom JS files. JS framework fiels must always be loaded before any other files to make sure they get executed first, otherwise other files that load before the frameworks they need are likely to end in JS exceptions.

Some templates like Protostar or Beez insert all the dependencies you need using functions like

JHtml::_('bootstrap.framework');

to load Jquery + Bootstrap, but you should not relay in this fact on your extensions or custom templates overrides. Always make sure your extension or custom override load the dependencies you need before the template does it, I will explain why later:

For example if you got a custom template override that needs to insert a JS file with some Jquery scripts that does fancy things on all the pages where that template override is being used. In that case you should declare this on the top section of that override file:

JHtml::_('jquery.framework');
$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');

If you are developing a 3rd party extension that you plan to put on the Joomla! extension directory you should do something like this:

if($params->get('add_extension_resources', false))
{
JHtml::_('jquery.framework');
$doc->addScript('media/com_fancy/js/fancy-script.js');
}

The conditional clause to decide whether to add or not the extension resources is '''strongly encouraged''' and considered a '''good practice''' because it gives flexibility to 3rd party developers who don't want to use your extension resources and use custom/modified files without having to battle with Joomla! using workarounds and hacks to be able to remove your original extensions resources in order to avoid duplicates and conflicts.

==== Explanation ====

If you check the source code of the index.php from the Protostar template, you can see that the statements

JHtml::_('bootstrap.framework');

is added way before the statement

<jdoc:include type="head" />

this can make you think that the framework files and your 3rd party files using methods like

$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
$doc->addScript('media/com_fancy/js/fancy-script.js');

will be added in the right order at the right spot, '''but that is not the case''', because extension files and template override files are processed '''first''' and the index.php file of your current template is processed the '''last'''. This will cause that your custom JS files get inserted first and the framework files inserted from the template get inserted after.

This happens because the Joomla API (such as $doc->addScript) uses an array to store the JS files paths and they get rendered in the document in the same order they where inserted into that array (FIFO stack), also once a file path is inserted on the array and another API call tries to insert the same file this action is ignored to avid duplicates, it also means that the order of the files is not altered when the same files is attempted to be inserted several times.

Having said that doing this

JHtml::_('jquery.framework');
$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');

at your custom templates overrides and extension, is '''required''' and does not cause harm or conflict with the call

JHtml::_('bootstrap.framework');

at your template index.php file.

== See Also ==

[[JHtmlBehavior::framework/11.1| JHtmlBehaviour::framework method]] from the Joomla! Framework 11.1 documentation

[[Ajax using MooTools]]

[[Adding Javascript moo.fx to your component]]

== External Links ==
http://api.joomla.org/Joomla-Platform/HTML/JHtmlBehavior.html#methodframework

http://en.wikipedia.org/wiki/JavaScript

http://www.w3schools.com/js/default.asp

http://mootools.net/

http://jquery.com/

[[Category:Templates]]
[[Category:Modules]]
[[Category:Components]]
[[Category:Plugins]]
[[Category:Tutorials]]
[[Category:JavaScript]]

J3.x:Using the JHtmlTabs class in a component

2015-02-12T14:41:35Z

Isuckatthis: /* Options for JHtmlTabs */

{{version/tutor|3.x}}
===Overview===
JHtmlTabs has 3 static methods that can be used to create tabed menus. All functions return strings.
===Options for JHtmlTabs===
These are the options that can be passed to the <code>JHtmlTabs::start()</code> function in the form of an array.

<code>onActive</code>: A callback function when a tab is activated with two params. 'title' is the tab itself, and 'description' is the tab content.

<code>onBackground</code>: A callback function when a tab is backgrounded

<code>startOffset</code>: The default tab to start with (zero based index).

<code>useCookie</code>: Whether or not to use cookies to store tab active state. (boolean) (true | false) // This is not a string. Don't use quotes.

===Example===
<source lang="php">
$options = array(
'onActive' => 'function(title, description){
description.setStyle("display", "block");
title.addClass("open").removeClass("closed");
}',
'onBackground' => 'function(title, description){
description.setStyle("display", "none");
title.addClass("closed").removeClass("open");
}',
'startOffset' => 0, // 0 starts on the first tab, 1 starts the second, etc...
'useCookie' => true, // this must not be a string. Don't use quotes.
);

//Note that the options argument is optional so JHtmlTabs::start() can be called without it

echo JHtmlTabs::start('tabs_id',$options);
echo JHtmlTabs::panel("Panel Title 1",'panel-id-1');
echo "<h2>Content of first panel goes here!</h2>";
echo "<p>You can use JLayouHelper to render a layout if you want to</p>";
echo JHtmlTabs::panel(JText::_('CUSTOM_PANEL_TITLE'),'panel-id-2'); //You can use any custom text
echo "<h2>Content of second panel goes here!<h2>";
echo JHtmlTabs::end();
</source>
<noinclude>[[Category:Development]][[Category:Joomla! 3.x Development]]</noinclude>

Adding JavaScript

2015-02-12T13:59:46Z

Isuckatthis: /* Important notes for 3rd party developers */

{{version/tutor|1.5,2.5,3.1}}

JavaScript (also known as ECMAScript) is a scripting language primarily used in client-side web site development to extend and enhance an end-user's experience. Joomla provides developers with easy-to-use mechanisms to include JavaScript in their extensions using existing API methods.

There are a number of methods for including JavaScript in your Joomla extensions; some of these are described below.

==Usage==

There are three methods for embedding JavaScript into your code using the Joomla API; [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration JDocument::addScriptDeclaration], [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript JDocument::addScript] and [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script]. These methods should be called either in your component's View class (<yourcomponent>/views/<yourview>/view.html.php) or template script (<yourcomponent>/views/<yourview>/tmpl/<yourtemplate>.php or in the case of a module, in its template script (<yourmodule>/tmpl/<yourtemplate>.php).

===Inline JavaScript===

Blocks of JavaScript code can be declared directly within a component or module's display template using the [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html JDocument] class' [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration addScriptDeclaration] method:

<source lang="php">
<?php
$document = JFactory::getDocument();
$document->addScriptDeclaration('
window.event("domready", function() {
alert("An inline JavaScript Declaration");
});
');
?>
</source>

===External JavaScript===

Alternatively, you may wish to separate your JavaScript into a separate file. Separating your JavaScript into an external file can make your template code easier to read especially if the JavaScript is lengthy or complex.

There are two ways to include a JavaScript file using the Joomla API. The first involves using the [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html JDocument] class' [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript addScript] method:

<source lang="php">
<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>
</source>

The second uses the [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html JHTML] class' [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] method:

<source lang="php">
<?php
// Add the path parameter if the path is different than 'media/system/js/'
JHTML::script('sample.js', 'templates/custom/js/');
?>
</source>

API has changed in 3.x, so the second parameter cannot be a string. If you really need to use this method, you must include the absolute link to your javacript file:

<source lang="php">
<?php
JHtml::script(Juri::base() . 'templates/custom/js/sample.js');
?>
</source>

==Description==
The Joomla API's [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration JDocument::addScriptDeclaration], [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript JDocument::addScript] and [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] methods embed JavaScript into Joomla's index.php via the jdoc head tag:

<source lang="html4strict">
<jdoc:include type="head"/>
</source>

Using the [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScript JDocument::addScript] or [http://api.joomla.org/1.5/Joomla-Framework/HTML/JHTML.html#script script] methods to embed JavaScript includes would result in the index.php rendering the following HTML:

<source lang="html4strict">
<head>
...
<script type="text/javaScript" src="/media/system/js/sample.js"></script>
...
</head>
</source>

Calling the class method [http://api.joomla.org/1.5/Joomla-Framework/Document/JDocument.html#addScriptDeclaration JDocument::addScriptDeclaration] would render the following HTML:

<source lang="html4strict">
<head>
...
<script type="text/javaScript">
window.addEvent("domready", function() {
alert("Embedded block of JS here");
});
</script>
...
</head>
</source>

Using these methods is highly recommended as it clearly differentiates another scripting language (JavaScript) from the main PHP code, ensures all JavaScript is correctly embedded between the <head></head> tags and, in the case of JDocument::addScript and JHTML::script ensures that a JavaScript file is included only once (I.e. there is no .js file duplication).

== Using a JavaScript Framework ==

A Javascript framework provides developers with generic functionality for handling various coding tasks in a familiar, consistent and platform-independent way. A framework enables the developer to forget about the intricacies of implementing a certain function in different web browsers and focus on the requirements of the software.

Two [[Javascript Frameworks]] are provided as part of Joomla 3.x; jQuery and Mootools. jQuery is a newly introduced framework which integrates with Joomla's new Bootstrap HTML framework; Mootools is Joomla's legacy Javascript library which is now superseded by jQuery and is included for backwards compatibility with 3rd party extensions.

In nearly all cases you should use a framework when developing Javascript in your extensions or templates and including one is very simple with Joomla's API.

===Joomla 3.x jQuery ===
Please see the guide on [[Javascript_Frameworks|Javascript Frameworks in Joomla 3.x]] for information about including a framework in Joomla 3.x

=== Joomla 1.5/2.5 Mootools ===

Unless you are maintaining Javascript code which leverages Mootools or you are developing an extension for Joomla 2.5 or earlier it is recommended you use jQuery instead.

Firstly, you will need to include the Mootools code in your extension. To include the Mootools framework in your extension, you add the following code to your view.html.php or tmpl file:

FOR JOOMLA 1.5
<source lang="php">
JHTML::_('behavior.mootools');
</source>

FOR JOOMLA 2.5
<source lang="php">
JHtml::_('behavior.framework');
</source>

The above code results in the same outcome as the similar jQuery framework statement; that is it ensures Mootools is included correctly and only once.

Then using Mootools is almost identical to jQuery:

<source lang="php">
JFactory::getDocument()->addScriptDeclaration('
window.addEvent("domready", function() {
alert($("list").getElements("li").length);
});
');
</source>

More information about Mootools is available at http://mootools.net/. For API documentation, visit http://mootools.net/docs/core.

== Important notes for 3rd party developers ==

If you are creating a custom template override or extension that needs to add a custom JS file, make sure to add important dependencies such as Jquery or Mootools before your custom JS files. JS framework fiels must always be loaded before any other files to make sure they get executed first, otherwise other files that load before the frameworks they need are likely to end in JS exceptions.

Some templates like Protostar or Beez insert all the dependencies you need using functions like

JHtml::_('bootstrap.framework');

to load Jquery + Bootstrap, but you should not relay in this fact on your extensions or custom templates overrides. Always make sure your extension or custom override load the dependencies you need before the template does it, I will explain why later:

For example if you got a custom template override that needs to insert a JS file with some Jquery scripts that does fancy things on all the pages where that template override is being used. In that case you should declare this on the top section of that override file:

JHtml::_('jquery.framework');
$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');

If you are developing a 3rd party extension that you plan to put on the Joomla! extension directory you should do something like this:

if($params->get('add_extension_resources', false))
{
JHtml::_('jquery.framework');
$doc->addScript('media/com_fancy/js/fancy-script.js');
}

The conditional clause to decide whether to add or not the extension resources is '''strongly encouraged''' and considered a '''good practice''' because it gives flexibility to 3rd party developers who don't want to use your extension resources and use custom/modified files without having to battle with Joomla! using workarounds and hacks to be able to remove your original extensions resources in order to avoid duplicates and conflicts.

==== Ask me why ====

If you check the source code of the index.php from the Protostar template, you can see that the statements

JHtml::_('bootstrap.framework');

is added way before the statement

<jdoc:include type="head" />

this can make you think that the framework files and your 3rd party files using methods like

$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
$doc->addScript('media/com_fancy/js/fancy-script.js');

will be added in the right order at the right spot, '''but that is not the case''', because extension files and template override files are processed '''first''' and the index.php file of your current template is processed the '''last'''. This will cause that your custom JS files get inserted first and the framework files inserted from the template get inserted after.

This happens because the Joomla API (such as $doc->addScript) uses an array to store the JS files paths and they get rendered in the document in the same order they where inserted into that array (FIFO stack), also once a file path is inserted on the array and another API call tries to insert the same file this action is ignored to avid duplicates, it also means that the order of the files is not altered when the same files is attempted to be inserted several times.

Having said that doing this

JHtml::_('jquery.framework');
$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');

at your custom templates overrides and extension, is '''required''' and does not cause harm or conflict with the call

JHtml::_('bootstrap.framework');

at your template index.php file.

== See Also ==

[[JHtmlBehavior::framework/11.1| JHtmlBehaviour::framework method]] from the Joomla! Framework 11.1 documentation

[[Ajax using MooTools]]

[[Adding Javascript moo.fx to your component]]

== External Links ==
http://api.joomla.org/Joomla-Platform/HTML/JHtmlBehavior.html#methodframework

http://en.wikipedia.org/wiki/JavaScript

http://www.w3schools.com/js/default.asp

http://mootools.net/

http://jquery.com/

[[Category:Templates]]
[[Category:Modules]]
[[Category:Components]]
[[Category:Plugins]]
[[Category:Tutorials]]
[[Category:JavaScript]]

J3.x:Using the JHtmlTabs class in a component

2015-02-12T12:07:23Z

Isuckatthis:

{{version/tutor|3.x}}
===Overview===
JHtmlTabs has 3 static methods that can be used to create tabed menus. All functions return strings.
===Options for JHtmlTabs===
These are the options that can be passed to the <code>JHtmlTabs::start()</code> function.

<code>onActive</code>: A callback function when a tab is activated with two params. 'title' is the tab itself, and 'description' is the tab content.

<code>onBackground</code>: A callback function when a tab is backgrounded

<code>startOffset</code>: The default tab to start with (zero based index).

<code>useCookie</code>: Whether or not to use cookies to store tab active state. (boolean) (true | false) // This is not a string. Don't use quotes.

===Example===
<source lang="php">
$options = array(
'onActive' => 'function(title, description){
description.setStyle("display", "block");
title.addClass("open").removeClass("closed");
}',
'onBackground' => 'function(title, description){
description.setStyle("display", "none");
title.addClass("closed").removeClass("open");
}',
'startOffset' => 0, // 0 starts on the first tab, 1 starts the second, etc...
'useCookie' => true, // this must not be a string. Don't use quotes.
);

//Note that the options argument is optional so JHtmlTabs::start() can be called without it

echo JHtmlTabs::start('tabs_id',$options);
echo JHtmlTabs::panel("Panel Title 1",'panel-id-1');
echo "<h2>Content of first panel goes here!</h2>";
echo "<p>You can use JLayouHelper to render a layout if you want to</p>";
echo JHtmlTabs::panel(JText::_('CUSTOM_PANEL_TITLE'),'panel-id-2'); //You can use any custom text
echo "<h2>Content of second panel goes here!<h2>";
echo JHtmlTabs::end();
</source>
<noinclude>[[Category:Development]][[Category:Joomla! 3.x Development]]</noinclude>

User talk:Tom Hutchison

2015-02-12T11:35:09Z

Isuckatthis: /* Edits stopped by spam filter */

User talk:Tom Hutchison

2015-02-12T11:34:50Z

Isuckatthis: /* Edits stopped by spam filter */

J3.x talk:Using the JHtmlTabs class in a component

2015-02-12T11:32:43Z

Isuckatthis: Blanked the page

J3.x:Using the JHtmlTabs class in a component

2015-02-12T11:31:41Z

Isuckatthis:

{{version/tutor|3.x}}
===Overview===
JHtmlTabs has 3 static methods that can be used to create tabed menus. All functions return strings.
===Options for JHtmlTabs===

'''onActive''': A callback function when a tab is activated with two params. 'title' is the tab itself, and 'description' is the tab content.

'''onBackground''': A callback function when a tab is backgrounded

'''startOffset''': The default tab to start with (zero based index).

'''useCookie''': Whether or not to use cookies to store tab active state. (boolean) (true | false) // This is not a string. Don't use quotes.

===Example===
<source lang="php">
$options = array(
'onActive' => 'function(title, description){
description.setStyle("display", "block");
title.addClass("open").removeClass("closed");
}',
'onBackground' => 'function(title, description){
description.setStyle("display", "none");
title.addClass("closed").removeClass("open");
}',
'startOffset' => 0, // 0 starts on the first tab, 1 starts the second, etc...
'useCookie' => true, // this must not be a string. Don't use quotes.
);

//Note that the options argument is optional so JHtmlTabs::start() can be called without it

echo JHtmlTabs::start('tabs_id',$options);
echo JHtmlTabs::panel("Panel Title 1",'panel-id-1');
echo "<h2>Content of first panel goes here!</h2>";
echo "<p>You can use JLayouHelper to render a layout if you want to</p>";
echo JHtmlTabs::panel(JText::_('CUSTOM_PANEL_TITLE'),'panel-id-2'); //You can use any custom text
echo "<h2>Content of second panel goes here!<h2>";
echo JHtmlTabs::end();
</source>
<noinclude>[[Category:Development]][[Category:Joomla! 3.x Development]]</noinclude>

User talk:Tom Hutchison

2015-02-12T10:55:59Z

Isuckatthis: /* Edits stopped by spam filter */

User talk:Tom Hutchison

2015-02-12T10:55:23Z

Isuckatthis: /* Edits stopped by spam filter */ new section

J3.x talk:Using the JHtmlTabs class in a component

2015-02-12T10:38:57Z

Isuckatthis: Created page with "Oh for fucks sake i've been trying to update this page and the fuckin spam filter won't let me anyway the edits are below if anyone wants to update it just copy and paste it B..."

Oh for fucks sake i've been trying to update this page and the fuckin spam filter won't let me
anyway the edits are below if anyone wants to update it just copy and paste it
BTW Really? Can't even have discussions without this retarded captcha thing? FFS...
edit:ok fuck it i can't even post anything here. if any admin sees this please fix your damn submission system. The joomla documentations is outdated and very lackluster and the system you have in place is not helping.