Joomla! Documentation - User contributions [en]

J3.x talk:Creating a simple module/Developing a Basic Module/de

2019-02-24T10:02:45Z

Pixelstunde: Created page with "Ist nicht die Benutzung von <source lang="php"> JLoader::register('ModHelloWorldHelper', __DIR__ . '/helper.php'); </source> der bessere Weg um den Helper zu laden?"

Ist nicht die Benutzung von
<source lang="php">
JLoader::register('ModHelloWorldHelper', __DIR__ . '/helper.php');
</source>
der bessere Weg um den Helper zu laden?

J3.x:Adding JavaScript and CSS to the page

2017-03-27T05:24:49Z

Pixelstunde:

<noinclude><languages /></noinclude>

<translate>
== Inserting from a File == 
</translate>
<translate>
To have a well-formed HTML document, you must put all references to Javascript and CSS files within the <code><head></code> portion. Since Joomla! generates all the HTML that makes up a page before output, it is possible to add these references within the <tt><head></tt> tags from your extension. The simplest way to do this is to make use of the functionality built in to Joomla.</translate>

<translate>
===JDocument=== 
</translate>

<translate>
First, get a reference to the current document object:</translate>

<source lang="php">
$document = JFactory::getDocument();
</source>

<translate>
Then for a stylesheet, use this code:</translate>

<source lang="php">
$document->addStyleSheet($url);
</source>

<translate>
To add a Javascript file, use this code:</translate>

<source lang="php">
$document->addScript($url);
</source>

<translate>
where <code>$url</code> is the variable containing the full path to the javascript or CSS file for example:</translate>
<code>JUri::base() . 'templates/custom/js/sample.js'</code>

<translate>
Note this will **NOT** include Mootools or jQuery. If your script requires Mootools or jQuery see [[S:MyLanguage/Javascript_Frameworks|Javascript Frameworks]] for full details on how to include them (note jQuery can only be included natively on Joomla! 3.0+).</translate>

<translate>
It used to be possible to do this with JHTML, however, this was deprecated in Joomla 2.5 and removed in Joomla 3.x.
</translate>

<translate>

== Adding the options to your JavaScript code == 
</translate>
{{Joomla version|version=3.7|time=and after|comment=<translate>
Only available in Joomla! 3.7 and higher</translate>|align=left}}
<translate>
Beside adding inline scripts, Joomla! provide mechanism to store the options in the "optionsStorage".
This is allowed to nicely manage an existing options on the server side and on the client side. And allow to place all JavaScript logic to the JavaScript file, that will be cached by browser.</translate>

<translate>
Joomla! use special mechanism for "lazy loading" the options on the client side. It do not use inline JavaScript, that is good for page rendering speed, and make your site more friendly for the Speed Tester (eg Google).</translate>

<translate>
Thus use "optionsStorage" preferred, than use inline JavaScript to add the script options.</translate>

<translate>
'''Example of use'''</translate>

<translate>
Add the script options to your module:</translate>
<source lang="php">
$document = JFactory::getDocument();
$document->addScriptOptions('mod_example',
'colors' => array('selector' => 'body', 'color' => 'orange'),
'sliderOptions' => array('selector' => '.my-slider', 'timeout' => 300, 'fx' => 'fade'),
));
</source>

<translate>
Access to your options on the client side:</translate>
<source lang="javascript">
var myOptions = Joomla.getOptions('mod_example');
console.log(myOptions.colors); // Print in the browser console your options
console.log(myOptions.sliderOptions);
</source>

<translate>
Override the options on server side (possible until the head rendering):</translate>
<source lang="php">
$document = JFactory::getDocument();
// Get existing options
$myOptions = $document->getScriptOptions('mod_example');
// Change the value
$myOptions['colors'] = array('selector' => 'body', 'color' => 'green');
// Set new options
$document->addScriptOptions('mod_example', $myOptions);
</source>

<translate>
== Inserting inline scripts from within a PHP file == 
</translate>
<translate>
If your Javascript or CSS are generated using PHP, you can add the script or stylesheet directly into the head of your document:</translate>

<source lang="php">
$document = JFactory::getDocument();

// Add Javascript
$document->addScriptDeclaration('
window.event("domready", function() {
alert("An inline JavaScript Declaration");
});
');

// Add styles
$style = 'body {'
. 'background: #00ff00;'
. 'color: rgb(0,0,255);'
. '}';
$document->addStyleDeclaration($style);
</source>

<translate>
=== Javascript Example === 
For example, the following code is used to define a custom tool tip that takes advantage of mootools.</translate>

<source lang="php">
function getToolTipJS($toolTipVarName, $toolTipClassName){
$javascript = 'window.addEvent(\"domready\", function(){' ."\n";
$javascript .= "\t" .'var $toolTipVarName = new Tips($$("' . $toolTipVarName .'"), {' ."\n";
$javascript .= "\t\t" .'className: "' .$toolTipClassName .'",' ."\n";
$javascript .= "\t\t" .'initialize: function(){' ."\n";
$javascript .= "\t\t\t" .'this.fx = new Fx.Style(this.toolTip, "opacity", {duration: 500, wait: false}).set(0);' ."\n";
$javascript .= "\t\t" .'},' ."\n";
$javascript .= "\t\t" .'onShow: function(toolTip){' ."\n";
$javascript .= "\t\t\t" .'this.fx.start(1);' ."\n";
$javascript .= "\t\t" .'},' ."\n";
$javascript .= "\t\t" .'onHide: function(toolTip) {' ."\n";
$javascript .= "\t\t\t" .'this.fx.start(0);' ."\n";
$javascript .= "\t\t" .'}' ."\n";
$javascript .= "\t" .'});' ."\n";
$javascript .= '});' ."\n\n";
return $javascript;
}

$document = JFactory::getDocument();
$document->addStyleSheet("/joomla/components/com_mycustomcomponent/css/mytooltip.css",'text/css',"screen");
$document->addScriptDeclaration(getToolTipJS("mytool","MyToolTip"));
</source>

<translate>
Note that in order for this Javascript to be functionally useful, it would be necessary to include the appropriate class name in the HTML, as well as providing the <code>mytooltip.css</code> file. Both are outside the scope of this article.</translate>

<translate>
=== CSS Examples === 
</translate>
<translate>
This is also useful if your inserting a form field of CSS into your code. For example in a module, you might want a user to choose to call the colour of the border. After calling the form fields value and assigning it a variable $bordercolor in mod_example.php. Then in tmpl/default.php you can include the following:</translate>

<source lang="php">
$document = JFactory::getDocument();
$document->addStyleSheet('mod_example/mod_example.css');
$style = '#example {
border-color:#' . $bordercolor . ';
}';
$document->addStyleDeclaration( $style );
</source>

<translate>
Here mod_example.css contains the CSS file of any non-parameter based styles. Then the bordercolor parameter/form field is added in separately.</translate>

<translate>

==Add Custom Tag== 
</translate>
<translate>
There will be some occasions where even these functions are not flexible enough, as they are limited to writing the contents of <code><script /></code> or <code><style /></code> tags, and cannot add anything outside those tags. One example would be the inclusion of a stylesheet link within conditional comments, so that it is picked up only by Internet Explorer 6 and earlier. To do this, use <code>$document->addCustomTag</code>:</translate>

<source lang="php">
$stylelink = '' ."\n";

$document = JFactory::getDocument();
$document->addCustomTag($stylelink);
</source>

<noinclude>
<translate>

[[Category:Development]]
[[Category:Tutorials]]
[[Category:Component Development]]
[[Category:Module Development]]
[[Category:JavaScript]]
[[Category:CSS]]
</translate>
</noinclude>

Adding stylesheets for other output devices

2017-03-26T20:46:17Z

Pixelstunde:

<noinclude><languages /></noinclude>
<translate>

Using CSS style sheets, it is possible to use a set of directives(styles) depending upon the device being used to browse web pages.
</translate>

<translate>===Media Types=== </translate>
<translate>
The recognised media types are:
*all - Suitable for all devices.
*aural - For speech synthesizers.
*braille - Intended for braille tactile feedback devices.</translate>
<translate>
*embossed - Intended for paged braille printers.
*handheld - Intended for handheld devices.
*print - Used for formatting printed pages.
*projection - Intended for projected presentations, for example projectors or print to transparencies.
*screen - Intended primarily for color computer screens.</translate>
<translate>
*tty - Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.
*tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).</translate>

<translate>===Examples=== 
You can assign a media type to a CSS declaration with the following syntax</translate>

<source lang="css">
@media print {
body {
font-size: 12pt;
font-color: #000000;
}
}
</source>

<translate>
To assign more than one declaration style to more than one media type:</translate>

<source lang="css">
@media print, handheld{
body {
font-size: 12pt;
font-color: #000000;
}
img {
max-width: 100%;
height: auto;
}
}
</source>

<translate>
The directives can be used in the main CSS file or in a separate style sheet for a given media type. There must be an include to the CSS file in the templates <head> section (the following is taken from the Joomla! Beez template):</translate>

<source lang="html4strict">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />
</source>

The recommended way to include a stylesheet is:
<source lang="php">
<?php
$document = JFactory::getDocument();
$tpath = $this->baseurl . '/templates/' . $this->template;
$document->addStyleSheet( $tpath . '/css/print.css', 'text/css', 'print'); // arguments: $path, $type, $media
?>
</source>

This way, you ensure the stylesheet will be added to the document and is accessible to plugins (e.g for combining and compressing stylesheets).

<noinclude>
<translate>

[[Category:Tutorials]]
[[Category:Templates]]
[[Category:CSS]]
</translate>
</noinclude>

Adding stylesheets for other output devices

2017-03-26T20:30:33Z

Pixelstunde:

<noinclude><languages /></noinclude>
<translate>

Using CSS style sheets, it is possible to use a set of directives(styles) depending upon the device being used to browse web pages.
</translate>

<translate>===Media Types=== </translate>
<translate>
The recognised media types are:
*all - Suitable for all devices.
*aural - For speech synthesizers.
*braille - Intended for braille tactile feedback devices.</translate>
<translate>
*embossed - Intended for paged braille printers.
*handheld - Intended for handheld devices.
*print - Used for formatting printed pages.
*projection - Intended for projected presentations, for example projectors or print to transparencies.
*screen - Intended primarily for color computer screens.</translate>
<translate>
*tty - Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.
*tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).</translate>

<translate>===Examples=== 
You can assign a media type to a CSS declaration with the following syntax</translate>

<source lang="css">
@media print {
body {
font-size: 12pt;
font-color: #000000;
}
}
</source>

<translate>
To assign more than one declaration style to more than one media type:</translate>

<source lang="css">
@media print, handheld{
body {
font-size: 12pt;
font-color: #000000;
}
img {
max-width: 100%;
height: auto;
}
}
</source>

<translate>
The directives can be used in the main CSS file or in a separate style sheet for a given media type. There must be an include to the CSS file in the templates <head> section (the following is taken from the Joomla! Beez template):</translate>

<source lang="html4strict">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />
</source>

The recommended way to include a stylesheet is:
<source lang="php">
<?php
$document = JFactory::getDocument();
$app = JFactory::getApplication();
$tpath = JURI::base(true) . '/templates/' . $app->getTemplate() . '/';
$document->addStyleSheet( $tpath . 'css/print.css', 'text/css', 'print');
?>
</source>

This way, you ensure the stylesheet will be added to the document and is accessible to plugins (e.g for combining and compressing stylesheets).

<noinclude>
<translate>

[[Category:Tutorials]]
[[Category:Templates]]
[[Category:CSS]]
</translate>
</noinclude>

Adding stylesheets for other output devices

2017-03-26T20:27:50Z

Pixelstunde:

<noinclude><languages /></noinclude>
<translate>

Using CSS style sheets, it is possible to use a set of directives(styles) depending upon the device being used to browse web pages.
</translate>

<translate>===Media Types=== </translate>
<translate>
The recognised media types are:
*all - Suitable for all devices.
*aural - For speech synthesizers.
*braille - Intended for braille tactile feedback devices.</translate>
<translate>
*embossed - Intended for paged braille printers.
*handheld - Intended for handheld devices.
*print - Used for formatting printed pages.
*projection - Intended for projected presentations, for example projectors or print to transparencies.
*screen - Intended primarily for color computer screens.</translate>
<translate>
*tty - Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.
*tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).</translate>

<translate>===Examples=== 
You can assign a media type to a CSS declaration with the following syntax</translate>

<source lang="css">
@media print {
body {
font-size: 12pt;
font-color: #000000;
}
}
</source>

<translate>
To assign more than one declaration style to more than one media type:</translate>

<source lang="css">
@media print, handheld{
body {
font-size: 12pt;
font-color: #000000;
}
img {
max-width: 100%;
height: auto;
}
}
</source>

<translate>
The directives can be used in the main CSS file or in a separate style sheet for a given media type. There must be an include to the CSS file in the templates <head> section (the following is taken from the Joomla! Beez template):</translate>

<source lang="html4strict">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />
</source>

The recommended way to include a stylesheet is:
<source lang="php">
<?php
$document = JFactory::getDocument();
$app = JFactory::getApplication();
$tpath = JURI::base(true) . '/templates/' . $app->getTemplate() . '/';
$document->addStyleSheet( $tpath . 'css/print.css', 'text/css', 'print');
?>
</source>
<noinclude>
<translate>

[[Category:Tutorials]]
[[Category:Templates]]
[[Category:CSS]]
</translate>
</noinclude>

Adding stylesheets for other output devices

2017-03-26T20:26:21Z

Pixelstunde:

<noinclude><languages /></noinclude>
<translate>

Using CSS style sheets, it is possible to use a set of directives(styles) depending upon the device being used to browse web pages.
</translate>

<translate>===Media Types=== </translate>
<translate>
The recognised media types are:
*all - Suitable for all devices.
*aural - For speech synthesizers.
*braille - Intended for braille tactile feedback devices.</translate>
<translate>
*embossed - Intended for paged braille printers.
*handheld - Intended for handheld devices.
*print - Used for formatting printed pages.
*projection - Intended for projected presentations, for example projectors or print to transparencies.
*screen - Intended primarily for color computer screens.</translate>
<translate>
*tty - Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.
*tv - Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).</translate>

<translate>===Examples=== 
You can assign a media type to a CSS declaration with the following syntax</translate>

<source lang="css">
@media print {
body {
font-size: 12pt;
font-color: #000000;
}
}
</source>

<translate>
To assign more than one declaration style to more than one media type:</translate>

<source lang="css">
@media print, handheld{
body {
font-size: 12pt;
font-color: #000000;
}
img {
max-width: 100%;
height: auto;
}
}
</source>

<translate>
The directives can be used in the main CSS file or in a separate style sheet for a given media type. There must be an include to the CSS file in the templates <head> section (the following is taken from the Joomla! Beez template):</translate>

<source lang="html4strict">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />
</source>

The recommended way to include a stylesheet is:
<source lang="php">
<?php
$document = JFactory::getDocument();
$tpath = JURI::base(true) . '/templates/' . $app->getTemplate() . '/';
$document->addStyleSheet( $tpath . 'css/print.css', 'text/css', 'print');
?>
</source>
<noinclude>
<translate>

[[Category:Tutorials]]
[[Category:Templates]]
[[Category:CSS]]
</translate>
</noinclude>