<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
	<id>https://docs.sandbox.joomla.org/api.php?action=feedcontributions&amp;feedformat=atom&amp;user=Dzandut</id>
	<title>Joomla! Documentation - User contributions [en]</title>
	<link rel="self" type="application/atom+xml" href="https://docs.sandbox.joomla.org/api.php?action=feedcontributions&amp;feedformat=atom&amp;user=Dzandut"/>
	<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/Special:Contributions/Dzandut"/>
	<updated>2026-05-15T19:19:37Z</updated>
	<subtitle>User contributions</subtitle>
	<generator>MediaWiki 1.43.0</generator>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Help4.x:Menu_Item:_Single_Article/ru&amp;diff=868264</id>
		<title>Help4.x:Menu Item: Single Article/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Help4.x:Menu_Item:_Single_Article/ru&amp;diff=868264"/>
		<updated>2022-01-08T18:15:23Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;==Описание==&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==Описание==&lt;br /&gt;
The Single Article menu item type is used to show one article in the front end of the site. &lt;br /&gt;
&lt;br /&gt;
==How To Access==&lt;br /&gt;
To create a new Single Article menu item:&lt;br /&gt;
* Select {{rarr|Menus,[name of the menu]}} from the Administrator menu (for example, {{rarr|Menus,Main Menu}}). Then...&lt;br /&gt;
** Select the &#039;&#039;&#039;New&#039;&#039;&#039; Toolbar button. Then...&lt;br /&gt;
** Select the Menu Item Type Select button [[Image:Help-4x-Menu-Item-Type-Select-Button-en.png|50xpx]].&lt;br /&gt;
** Then in the modal dialog select the Articles item to open a list and then select the &#039;&#039;&#039;Single Article&#039;&#039;&#039; item.&lt;br /&gt;
To edit an existing Single Article menu item:&lt;br /&gt;
* Select its Title in Menu Items list.&lt;br /&gt;
&lt;br /&gt;
==Screenshot==&lt;br /&gt;
[[Image:Help-4x-Menus-Menu-Item-Article-Single-Article-screen-en.png|800px]]&lt;br /&gt;
&lt;br /&gt;
==Form Fields==&lt;br /&gt;
{{:Chunk4x:Help screen column header Menu Title/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Alias/en}}&lt;br /&gt;
&lt;br /&gt;
===Details Tab===&lt;br /&gt;
&#039;&#039;&#039;Left Panel&#039;&#039;&#039;&lt;br /&gt;
{{:Chunk4x:Help screen column header Menu Item Type/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Select Article/en}}&lt;br /&gt;
*&#039;&#039;&#039;Link:&#039;&#039;&#039; Link for this menu.&lt;br /&gt;
*&#039;&#039;&#039;Target Window.&#039;&#039;&#039; Select from the drop-down list.&lt;br /&gt;
*&#039;&#039;&#039;Template Style.&#039;&#039;&#039; Select from the drop-down list.&lt;br /&gt;
&#039;&#039;&#039;Right Panel&#039;&#039;&#039;&lt;br /&gt;
{{:Chunk4x:Help screen column header Menu/en}}&lt;br /&gt;
&lt;br /&gt;
===Options Tab===&lt;br /&gt;
The Single Article Layout has the following Article Options, as shown below. These options determine how the article will show on the Front End Site layout.&lt;br /&gt;
:[[Image:Help-4x-Menus-Menu-Item-Article-Single-Article-options-modal-article-options-tab-en.png|600px]]&lt;br /&gt;
&lt;br /&gt;
Note that these options include &amp;quot;&#039;&#039;&#039;Use Global&#039;&#039;&#039;&amp;quot;. If this is selected, the setting from the Articles: Options will be used.&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Title/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Linked Titles/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Intro Text/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Position of Article Info/en}}&lt;br /&gt;
*&#039;&#039;&#039;Article Info Title.&#039;&#039;&#039; (Use Global/Hide/Show). Displays the &#039;Article Info&#039; title on top of the article information block.&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Category/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Link Category/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Parent/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Link Parent/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Associations/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Author/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Link Author/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Create Date/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Modify Date/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Publish Date/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Navigation/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Voting/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Icons/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Print Icon/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Email Icon/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Hits/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Tags/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Show Unauthorised Links/en}}&lt;br /&gt;
{{:Chunk4x:Help screen column header Positioning of the Links/en}}&lt;br /&gt;
&lt;br /&gt;
===Common Options===&lt;br /&gt;
See [[Help4.x:Menu_Item:_New_Item/en|Menus: Edit/New Item]] for help on fields common to all Menu Item types, including:&lt;br /&gt;
*&#039;&#039;&#039;Link Type Options&#039;&#039;&#039;&lt;br /&gt;
*&#039;&#039;&#039;Page Display Options&#039;&#039;&#039;&lt;br /&gt;
*&#039;&#039;&#039;Metadata Options&#039;&#039;&#039;&lt;br /&gt;
*&#039;&#039;&#039;Associations Options&#039;&#039;&#039; (only visible on multilingual sites) &lt;br /&gt;
&lt;br /&gt;
===Module Assignments Tab===&lt;br /&gt;
See [[Help4.x:Menu_Item:_New_Item/en|Menus: Edit/New Item]] for help on fields in this Menu Item.&lt;br /&gt;
&lt;br /&gt;
==Toolbar==&lt;br /&gt;
&lt;br /&gt;
At the top of the page you will see the toolbar shown in the Screenshot above. The functions are:&lt;br /&gt;
&lt;br /&gt;
*&#039;&#039;&#039;Save.&#039;&#039;&#039; Saves the menu item and stays in the current screen.&lt;br /&gt;
&lt;br /&gt;
*&#039;&#039;&#039;Save &amp;amp; Close&#039;&#039;&#039;. Saves the menu item and closes the current screen.&lt;br /&gt;
&lt;br /&gt;
*&#039;&#039;&#039;Save &amp;amp; New&#039;&#039;&#039;. Saves the menu item and keeps the editing screen open and ready to create another menu item.&lt;br /&gt;
&lt;br /&gt;
*&#039;&#039;&#039;Save as Copy&#039;&#039;&#039;. Saves your changes to a copy of the current menu item.  Does not affect the current menu item.  This toolbar icon is not shown if you are creating a new menu item.&lt;br /&gt;
&lt;br /&gt;
*&#039;&#039;&#039;Cancel&#039;&#039;&#039;. Closes the current screen and returns to the previous screen without saving any modifications you may have made. Or&lt;br /&gt;
&lt;br /&gt;
*&#039;&#039;&#039;Close&#039;&#039;&#039;. Closes the current screen and returns to the previous screen without saving any modifications you may have made.&lt;br /&gt;
&lt;br /&gt;
*&#039;&#039;&#039;Help&#039;&#039;&#039;. Opens this help screen.&lt;br /&gt;
&lt;br /&gt;
==Quick Tips==&lt;br /&gt;
* If you have a Single Article Layout defined for an article, that layout will show any time a user drills down to that article. For example, if an article is shown on another menu item type (for example, in a Category Blog or List Layout or a Featured Articles Layout), the user will be taken to the Single Article Layout for that article (if defined). &lt;br /&gt;
* Archived articles are no longer published but are still stored on the site. Articles are Archived using the Articles screen. Note that Articles assigned to the &amp;quot;Uncategorized&amp;quot; Section will not show on the Archived Article List layout.&lt;br /&gt;
&lt;br /&gt;
==Related Information==&lt;br /&gt;
* Articles are created using [[Help4.x:Articles:_Edit/en|Articles: New]].&lt;br /&gt;
{{Chunk4x:Help screen related Articles/en}}&lt;br /&gt;
&lt;br /&gt;
{{Cathelp|4.0|Menus Help Screens|Menu Item Manager Help Screens}}&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:Help4.x:Menu_Item:_Single_Article/7/ru&amp;diff=868263</id>
		<title>Translations:Help4.x:Menu Item: Single Article/7/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:Help4.x:Menu_Item:_Single_Article/7/ru&amp;diff=868263"/>
		<updated>2022-01-08T18:15:22Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;==Описание==&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;==Описание==&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866547</id>
		<title>J4.x:Web Assets/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866547"/>
		<updated>2022-01-04T13:05:33Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
== Концепция ==&lt;br /&gt;
&lt;br /&gt;
Во внешнем интерфейсе многие ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;br /&gt;
&lt;br /&gt;
== Определение ==&lt;br /&gt;
&lt;br /&gt;
Связанные ресурсы определены в файле JSON, например [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2/build/media_source/system/joomla.asset.json#L14-L21 system/joomla.asset.json#L14-L21]&lt;br /&gt;
&lt;br /&gt;
Он имеет структуру, состоящую из определения схемы&amp;lt;source inline&amp;gt;schema&amp;lt;/source&amp;gt; (для проверки), имени (name), версии (version), лицензии (license), а затем одного или нескольких определений ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Активы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; состоят из списка файлов js и файлов css, связанных с ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; и любыми зависимостями. Раздел зависимостей - это просто список имен ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;, которые необходимы для работы ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Пример:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;description&amp;quot;: &amp;quot;Joomla CMS&amp;quot;,&lt;br /&gt;
  &amp;quot;license&amp;quot;: &amp;quot;GPL-2.0+&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.css&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.css&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;core&amp;quot;,&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.js&amp;quot;,&lt;br /&gt;
      &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
        &amp;quot;defer&amp;quot;: true,&lt;br /&gt;
        &amp;quot;data-foo&amp;quot;: &amp;quot;bar&amp;quot;&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;source lang=&amp;quot;json&amp;quot; inline&amp;gt;$schema&amp;lt;/source&amp;gt; attribute is a schema definition file that allows you to validate your file using JSON Schema. Read [https://json-schema.org/understanding-json-schema/index.html the official website] for more information on json schema validation works.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Having joomla.asset.json for your extension or template are recommend but not required to WebAssset to work (see next section).&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is not recommended to add an inline asset to a json file, prefer to use a file.&lt;br /&gt;
&lt;br /&gt;
== Объяснение этапов работы с asset ==&lt;br /&gt;
&lt;br /&gt;
Each asset has 2 stages: registered and used.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Registered&#039;&#039;&#039; is where an asset is loaded into &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;. That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; knows about the existence of these assets, but will not attach them to a document while rendering.&lt;br /&gt;
All assets loaded from joomla.asset.json is at &#039;&#039;&#039;registered&#039;&#039;&#039; stage.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Used&#039;&#039;&#039; is where an asset is enabled via &amp;quot;$wa-&amp;gt;useAsset()&amp;quot; (-&amp;gt;useScript(), -&amp;gt;useStyle(), -&amp;gt;registerAndUseX() etc). That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will attach these assets and their dependencies to a document while rendering.&lt;br /&gt;
&lt;br /&gt;
An asset cannot be used if it was not registered before, this will cause an unknown asset exception.&lt;br /&gt;
&lt;br /&gt;
== Register an asset ==&lt;br /&gt;
&lt;br /&gt;
All known assets loaded and then stored in &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; (to enable/disable an asset item you have to use &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, see next section).&lt;br /&gt;
&lt;br /&gt;
Joomla! will look for next assets definition automatically at runtime (in following order):&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
media/vendor/joomla.asset.json (on first access to WebAssetRegistry)&lt;br /&gt;
media/system/joomla.asset.json&lt;br /&gt;
media/legacy/joomla.asset.json&lt;br /&gt;
media/{com_active_component}/joomla.asset.json (on dispatch the application)&lt;br /&gt;
templates/{active_template}/joomla.asset.json&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And load them to registry of known assets.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Each following assets definition will override asset items from previous assets definition, by item name.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
You can register your own assets definition via &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wr = $wa-&amp;gt;getRegistry();&lt;br /&gt;
$wr-&amp;gt;addRegistryFile(&#039;relative/path/to/your/joomla.asset.json&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To add a custom asset item at runtime:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wr-&amp;gt;add(&#039;script&#039;, new Joomla\CMS\WebAsset\WebAssetItem(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;, [&#039;type&#039; =&amp;gt; &#039;script&#039;]));&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or more simply, using &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The new asset item &#039;&#039;&#039;foobar&#039;&#039;&#039; will be added to the registry of know assets, but will not be attached to a document until your code (a layout, template etc) will request it.&lt;br /&gt;
&lt;br /&gt;
To check whether an asset exists:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
if ($wa-&amp;gt;assetExists(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; exists!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Enabling an asset ==&lt;br /&gt;
All asset management in the current Document handled by &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, which is accessible with &#039;&#039;&#039;$doc-&amp;gt;getWebAssetManager();&#039;&#039;&#039;&lt;br /&gt;
By using AssetManager you can enable or disable needed asset easily in Joomla! through a standard methods.&lt;br /&gt;
&lt;br /&gt;
To enable an asset in the page use the useAsset function, for example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;);&lt;br /&gt;
&lt;br /&gt;
// Or multiple&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;fields.validate&#039;)&lt;br /&gt;
    -&amp;gt;useStyle(&#039;foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add new asset item with dependency and use it&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;, &#039;com_foobar/bar.js&#039;, [], [], [&#039;core&#039;, &#039;foobar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will look to &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; whether the requested asset exists, and will enable it for current Document instance. Otherwise it will throw an UnknownAssetException.&lt;br /&gt;
&lt;br /&gt;
To disable an asset in the page use the disableAsset function. The example below will disable the jquery-noconflict asset from being loaded.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;jquery-noconflict&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If there are any dependencies to the disabled asset, then this asset will be re-enabled automatically, no matter what.&lt;br /&gt;
&lt;br /&gt;
To check whether asset enabled, and the asset state:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
// Checking whether an asset are active (enabled manually or automatically as dependency)&lt;br /&gt;
if ($wa-&amp;gt;isAssetActive(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; is active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// Checking state&lt;br /&gt;
switch($wa-&amp;gt;getAssetState(&#039;script&#039;, &#039;foobar&#039;)){&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_ACTIVE:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled manually&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_DEPENDENCY:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled automatically while resolving dependencies&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	default:&lt;br /&gt;
		var_dump(&#039;not active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Overriding an asset ==&lt;br /&gt;
&lt;br /&gt;
Overriding may be useful when you need to redefine the URI of asset item or its dependencies.&lt;br /&gt;
As already was noted, each of the following assets definition from joomla.asset.json will override asset items from previous assets definitions, by item name.&lt;br /&gt;
That means if you provide joomla.asset.json which contain already loaded asset items, they will be replaced with your items.&lt;br /&gt;
Another way to override in the code is to register an item with the same name.&lt;br /&gt;
Example, we have &amp;quot;foobar&amp;quot; script, that load com_example/foobar.js library, and we want to use CDN for this exact library:&lt;br /&gt;
&lt;br /&gt;
How it defined in the system initially:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To override the URI we define the asset item with &amp;quot;foobar&amp;quot; name in our joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;http://foobar.cdn.blabla/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or, register new asset item with AssetManager:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;http://fobar.cdn.blabla/foobar.js&#039;, [], [], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Working with styles ==&lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Stylesheet files. Stylesheet asset item have a type &amp;quot;style&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.css&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with styles === &lt;br /&gt;
&lt;br /&gt;
AssetManager offers the following methods to work with style files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline style ===&lt;br /&gt;
&lt;br /&gt;
Additionaly to style files, WebAssetManager allows you to add an inline style, and maintain their relation to the file asset.&lt;br /&gt;
Inline styles may be placed directly before the dependency, after the dependency, or as usual after all styles.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrieve the asset item from a registry, or as a dependency to another inline asset. If the name is not specified then a generated name based on a content hash will be used.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline3&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foobar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline4&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset has multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foo.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;bar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline assets may be a dependency to another inline asset, however it is not recommended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may change in the future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Working with scripts == &lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Script files. Script asset item have a type &amp;quot;script&amp;quot;.&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example json definition of ES6 module script, with fallback to legacy:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-as5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core&amp;quot;, &lt;br /&gt;
    &amp;quot;foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with scripts ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with script files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;bar&#039;, &#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;,&#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline script ===&lt;br /&gt;
&lt;br /&gt;
Addittionaly to script files WebAssetManager allow to add an inline script, and maintain their relation to the file asset.&lt;br /&gt;
Inline script may be placed directly before the dependency, after the dependency, or as usual after all scripts.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrive the asset item form a registry, or as dependecy to another inline asset. If name not specified then will be used generated name based on a content hash.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Specify script type&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline5&#039;, [], [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline3&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;foobar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline4&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;module&amp;quot;&amp;gt;content of inline5&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset have a multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script src=&amp;quot;foo.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;bar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline asset may be as dependency to another inline asset, hovewer it is not recomended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may changes in future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
== Working with a web component ==&lt;br /&gt;
&lt;br /&gt;
Joomla! allows you to use [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Components] for your needs. In Joomla! web components are not loaded as regular script, but loaded via Web Component loader so that they are loaded asynchronously. Therefore, a web component asset item must have a flag &amp;quot;webcomponent&amp;quot; set to the boolean &amp;quot;true&amp;quot;.&lt;br /&gt;
In all other aspects, working with web components in AssetManager is the same as working with a &amp;quot;script&amp;quot; asset item.&lt;br /&gt;
&lt;br /&gt;
Example json definition of some web components in joomla.asset.json (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
     &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example with fallback, for browsers that does not support ES6 &amp;quot;module&amp;quot; feature. Note that the legacy script should have &amp;quot;wcpolyfill&amp;quot; dependency, and module script should have dependency from legacy script:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element-es5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;wcpolyfill&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;webcomponent.foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Alternatively you can register them in PHP (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.css&#039;)&lt;br /&gt;
    -&amp;gt;registerScript(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.js&#039;, [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Attach to document:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;webcomponent.foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;webcomponent.foobar&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is preferred to prefix the asset name with &amp;quot;webcomponent.&amp;quot; to make it easily to spot, and distinct it from regular scripts in a layout.&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with web component ===&lt;br /&gt;
&lt;br /&gt;
All methods to work with a web component are the same as methods to work with script asset item.&lt;br /&gt;
&lt;br /&gt;
== Working with a presets ==&lt;br /&gt;
&lt;br /&gt;
&amp;quot;Preset&amp;quot; is a special kind of asset item that hold a list of items that has to be enabled, in same way as direct call of useAsset() to each of item in the list.&lt;br /&gt;
Preset can hold mixed types of assets (script, style, another preset, etc), the type should be provided after # symbol and follows after an asset name, example: foo#style, bar#script.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;preset&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core#script&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#style&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#script&amp;quot;,&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with preset ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with preset items:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach all items from foobar preset to the document&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable all items from foobar preset from being attached&lt;br /&gt;
$wa-&amp;gt;disablePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerPreset(&#039;bar&#039;, &#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUsePreset(&#039;bar&#039;,&#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Advanced: Custom WebAssetItem class ==&lt;br /&gt;
&lt;br /&gt;
The default class for all WebAsset items is &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
You are also allowed to use a custom class, which must implement &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItemInterface&#039;&#039;&#039; or extend &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
A custom class can allow you to do advanced actions, for example, including a script file depending on an active language:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyComExampleAssetItem extends WebAssetItem&lt;br /&gt;
{&lt;br /&gt;
	public function getUri($resolvePath = true): string&lt;br /&gt;
	{&lt;br /&gt;
		$langTag = Factory::getApplication()-&amp;gt;getLanguage()-&amp;gt;getTag();&lt;br /&gt;
		// For script asset use &amp;quot;.js&amp;quot;, for style we would use &amp;quot;.css&amp;quot;&lt;br /&gt;
		$path    = &#039;com_example/bar-&#039; . $langTag . &#039;.js&#039;;&lt;br /&gt;
&lt;br /&gt;
		if ($resolvePath)&lt;br /&gt;
		{&lt;br /&gt;
			// For script asset use &amp;quot;script&amp;quot;, for style we would use &amp;quot;stylesheet&amp;quot;&lt;br /&gt;
			$path = $this-&amp;gt;resolvePath($path, &#039;script&#039;);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		return $path;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Additionally, implementing &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface&#039;&#039;&#039; allows you to add a script options (which may depend on the environment) when your asset is enabled and attached to the Document.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyFancyFoobarAssetItem extends WebAssetItem implements WebAssetAttachBehaviorInterface&lt;br /&gt;
{&lt;br /&gt;
	public function onAttachCallback(Document $doc): void&lt;br /&gt;
	{&lt;br /&gt;
		$user = Factory::getApplication()-&amp;gt;getIdentity();&lt;br /&gt;
		$doc-&amp;gt;addScriptOptions(&#039;com_example.fancyfoobar&#039;, [&#039;userName&#039; =&amp;gt; $user-&amp;gt;username]);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Important note:&#039;&#039;&#039; An asset item that implements &#039;&#039;&#039;WebAssetAttachBehaviorInterface&#039;&#039;&#039; should be enabled before [https://docs.joomla.org/Plugin/Events/System#onBeforeCompileHead onBeforeCompileHead] event, otherwise &#039;onAttachCallback&#039; will be ignored.&lt;br /&gt;
&lt;br /&gt;
=== Defining a custom WebAssetItem class in joomla.asset.json === &lt;br /&gt;
&lt;br /&gt;
In joomla.asset.json you can define which Class should be used with specific AssetItem.&lt;br /&gt;
For this you can use 2 properties &#039;&#039;&#039;namespace&#039;&#039;&#039; and &#039;&#039;&#039;class&#039;&#039;&#039;. &#039;&#039;&#039;namespace&#039;&#039;&#039; can be defined at Root level (then it will be used as default namespace for all Asset items in joomla.asset.json) or in the Item level. For example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;namespace&amp;quot;: &amp;quot;Joomla\Component\Example\WebAsset&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;MyFooBar\Library\Example\WebAsset&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\Component\Example\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;MyFooBar\Library\Example\WebAsset\BarAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If &#039;&#039;&#039;namespace&#039;&#039;&#039; are not defined then by default will be used &#039;&#039;&#039;Joomla\CMS\WebAsset&#039;&#039;&#039;. When &#039;&#039;&#039;namespace&#039;&#039;&#039; is defined but empty, then no namespace will be used, only &#039;&#039;&#039;class&#039;&#039;&#039;. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\CMS\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;BarAssetItem&#039;&#039;&#039; (without namespace).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/118/ru&amp;diff=866546</id>
		<title>Translations:J4.x:Web Assets/118/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/118/ru&amp;diff=866546"/>
		<updated>2022-01-04T13:05:28Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Он имеет структуру, состоящую из определения схемы&amp;lt;source inline&amp;gt;schema&amp;lt;/source&amp;gt; (для проверки), имени (name), версии (version), лицензии (license), а затем одного или нескольких определений ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Активы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; состоят из списка файлов js и файлов css, связанных с ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; и любыми зависимостями. Раздел зависимостей - это просто список имен ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;, которые необходимы для работы ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Пример:&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866506</id>
		<title>J4.x:Web Assets/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866506"/>
		<updated>2022-01-04T13:00:23Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
== Концепция ==&lt;br /&gt;
&lt;br /&gt;
Во внешнем интерфейсе многие ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;br /&gt;
&lt;br /&gt;
== Определение ==&lt;br /&gt;
&lt;br /&gt;
Связанные ресурсы определены в файле JSON, например [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2/build/media_source/system/joomla.asset.json#L14-L21 system/joomla.asset.json#L14-L21]&lt;br /&gt;
&lt;br /&gt;
Он имеет структуру, состоящую из определения схемы&amp;lt;source inline&amp;gt;schema&amp;lt;/source&amp;gt; (для проверки), имени, версии, лицензии, а затем одного или нескольких определений ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Активы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; состоят из списка файлов js и файлов css, связанных с ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; и любыми зависимостями. Раздел зависимостей - это просто список имен ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;, которые необходимы для работы ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Пример:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;description&amp;quot;: &amp;quot;Joomla CMS&amp;quot;,&lt;br /&gt;
  &amp;quot;license&amp;quot;: &amp;quot;GPL-2.0+&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.css&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.css&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;core&amp;quot;,&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.js&amp;quot;,&lt;br /&gt;
      &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
        &amp;quot;defer&amp;quot;: true,&lt;br /&gt;
        &amp;quot;data-foo&amp;quot;: &amp;quot;bar&amp;quot;&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;source lang=&amp;quot;json&amp;quot; inline&amp;gt;$schema&amp;lt;/source&amp;gt; attribute is a schema definition file that allows you to validate your file using JSON Schema. Read [https://json-schema.org/understanding-json-schema/index.html the official website] for more information on json schema validation works.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Having joomla.asset.json for your extension or template are recommend but not required to WebAssset to work (see next section).&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is not recommended to add an inline asset to a json file, prefer to use a file.&lt;br /&gt;
&lt;br /&gt;
== Объяснение этапов работы с asset ==&lt;br /&gt;
&lt;br /&gt;
Each asset has 2 stages: registered and used.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Registered&#039;&#039;&#039; is where an asset is loaded into &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;. That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; knows about the existence of these assets, but will not attach them to a document while rendering.&lt;br /&gt;
All assets loaded from joomla.asset.json is at &#039;&#039;&#039;registered&#039;&#039;&#039; stage.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Used&#039;&#039;&#039; is where an asset is enabled via &amp;quot;$wa-&amp;gt;useAsset()&amp;quot; (-&amp;gt;useScript(), -&amp;gt;useStyle(), -&amp;gt;registerAndUseX() etc). That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will attach these assets and their dependencies to a document while rendering.&lt;br /&gt;
&lt;br /&gt;
An asset cannot be used if it was not registered before, this will cause an unknown asset exception.&lt;br /&gt;
&lt;br /&gt;
== Register an asset ==&lt;br /&gt;
&lt;br /&gt;
All known assets loaded and then stored in &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; (to enable/disable an asset item you have to use &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, see next section).&lt;br /&gt;
&lt;br /&gt;
Joomla! will look for next assets definition automatically at runtime (in following order):&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
media/vendor/joomla.asset.json (on first access to WebAssetRegistry)&lt;br /&gt;
media/system/joomla.asset.json&lt;br /&gt;
media/legacy/joomla.asset.json&lt;br /&gt;
media/{com_active_component}/joomla.asset.json (on dispatch the application)&lt;br /&gt;
templates/{active_template}/joomla.asset.json&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And load them to registry of known assets.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Each following assets definition will override asset items from previous assets definition, by item name.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
You can register your own assets definition via &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wr = $wa-&amp;gt;getRegistry();&lt;br /&gt;
$wr-&amp;gt;addRegistryFile(&#039;relative/path/to/your/joomla.asset.json&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To add a custom asset item at runtime:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wr-&amp;gt;add(&#039;script&#039;, new Joomla\CMS\WebAsset\WebAssetItem(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;, [&#039;type&#039; =&amp;gt; &#039;script&#039;]));&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or more simply, using &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The new asset item &#039;&#039;&#039;foobar&#039;&#039;&#039; will be added to the registry of know assets, but will not be attached to a document until your code (a layout, template etc) will request it.&lt;br /&gt;
&lt;br /&gt;
To check whether an asset exists:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
if ($wa-&amp;gt;assetExists(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; exists!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Enabling an asset ==&lt;br /&gt;
All asset management in the current Document handled by &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, which is accessible with &#039;&#039;&#039;$doc-&amp;gt;getWebAssetManager();&#039;&#039;&#039;&lt;br /&gt;
By using AssetManager you can enable or disable needed asset easily in Joomla! through a standard methods.&lt;br /&gt;
&lt;br /&gt;
To enable an asset in the page use the useAsset function, for example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;);&lt;br /&gt;
&lt;br /&gt;
// Or multiple&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;fields.validate&#039;)&lt;br /&gt;
    -&amp;gt;useStyle(&#039;foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add new asset item with dependency and use it&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;, &#039;com_foobar/bar.js&#039;, [], [], [&#039;core&#039;, &#039;foobar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will look to &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; whether the requested asset exists, and will enable it for current Document instance. Otherwise it will throw an UnknownAssetException.&lt;br /&gt;
&lt;br /&gt;
To disable an asset in the page use the disableAsset function. The example below will disable the jquery-noconflict asset from being loaded.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;jquery-noconflict&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If there are any dependencies to the disabled asset, then this asset will be re-enabled automatically, no matter what.&lt;br /&gt;
&lt;br /&gt;
To check whether asset enabled, and the asset state:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
// Checking whether an asset are active (enabled manually or automatically as dependency)&lt;br /&gt;
if ($wa-&amp;gt;isAssetActive(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; is active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// Checking state&lt;br /&gt;
switch($wa-&amp;gt;getAssetState(&#039;script&#039;, &#039;foobar&#039;)){&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_ACTIVE:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled manually&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_DEPENDENCY:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled automatically while resolving dependencies&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	default:&lt;br /&gt;
		var_dump(&#039;not active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Overriding an asset ==&lt;br /&gt;
&lt;br /&gt;
Overriding may be useful when you need to redefine the URI of asset item or its dependencies.&lt;br /&gt;
As already was noted, each of the following assets definition from joomla.asset.json will override asset items from previous assets definitions, by item name.&lt;br /&gt;
That means if you provide joomla.asset.json which contain already loaded asset items, they will be replaced with your items.&lt;br /&gt;
Another way to override in the code is to register an item with the same name.&lt;br /&gt;
Example, we have &amp;quot;foobar&amp;quot; script, that load com_example/foobar.js library, and we want to use CDN for this exact library:&lt;br /&gt;
&lt;br /&gt;
How it defined in the system initially:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To override the URI we define the asset item with &amp;quot;foobar&amp;quot; name in our joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;http://foobar.cdn.blabla/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or, register new asset item with AssetManager:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;http://fobar.cdn.blabla/foobar.js&#039;, [], [], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Working with styles ==&lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Stylesheet files. Stylesheet asset item have a type &amp;quot;style&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.css&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with styles === &lt;br /&gt;
&lt;br /&gt;
AssetManager offers the following methods to work with style files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline style ===&lt;br /&gt;
&lt;br /&gt;
Additionaly to style files, WebAssetManager allows you to add an inline style, and maintain their relation to the file asset.&lt;br /&gt;
Inline styles may be placed directly before the dependency, after the dependency, or as usual after all styles.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrieve the asset item from a registry, or as a dependency to another inline asset. If the name is not specified then a generated name based on a content hash will be used.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline3&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foobar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline4&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset has multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foo.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;bar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline assets may be a dependency to another inline asset, however it is not recommended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may change in the future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Working with scripts == &lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Script files. Script asset item have a type &amp;quot;script&amp;quot;.&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example json definition of ES6 module script, with fallback to legacy:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-as5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core&amp;quot;, &lt;br /&gt;
    &amp;quot;foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with scripts ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with script files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;bar&#039;, &#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;,&#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline script ===&lt;br /&gt;
&lt;br /&gt;
Addittionaly to script files WebAssetManager allow to add an inline script, and maintain their relation to the file asset.&lt;br /&gt;
Inline script may be placed directly before the dependency, after the dependency, or as usual after all scripts.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrive the asset item form a registry, or as dependecy to another inline asset. If name not specified then will be used generated name based on a content hash.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Specify script type&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline5&#039;, [], [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline3&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;foobar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline4&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;module&amp;quot;&amp;gt;content of inline5&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset have a multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script src=&amp;quot;foo.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;bar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline asset may be as dependency to another inline asset, hovewer it is not recomended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may changes in future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
== Working with a web component ==&lt;br /&gt;
&lt;br /&gt;
Joomla! allows you to use [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Components] for your needs. In Joomla! web components are not loaded as regular script, but loaded via Web Component loader so that they are loaded asynchronously. Therefore, a web component asset item must have a flag &amp;quot;webcomponent&amp;quot; set to the boolean &amp;quot;true&amp;quot;.&lt;br /&gt;
In all other aspects, working with web components in AssetManager is the same as working with a &amp;quot;script&amp;quot; asset item.&lt;br /&gt;
&lt;br /&gt;
Example json definition of some web components in joomla.asset.json (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
     &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example with fallback, for browsers that does not support ES6 &amp;quot;module&amp;quot; feature. Note that the legacy script should have &amp;quot;wcpolyfill&amp;quot; dependency, and module script should have dependency from legacy script:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element-es5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;wcpolyfill&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;webcomponent.foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Alternatively you can register them in PHP (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.css&#039;)&lt;br /&gt;
    -&amp;gt;registerScript(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.js&#039;, [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Attach to document:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;webcomponent.foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;webcomponent.foobar&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is preferred to prefix the asset name with &amp;quot;webcomponent.&amp;quot; to make it easily to spot, and distinct it from regular scripts in a layout.&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with web component ===&lt;br /&gt;
&lt;br /&gt;
All methods to work with a web component are the same as methods to work with script asset item.&lt;br /&gt;
&lt;br /&gt;
== Working with a presets ==&lt;br /&gt;
&lt;br /&gt;
&amp;quot;Preset&amp;quot; is a special kind of asset item that hold a list of items that has to be enabled, in same way as direct call of useAsset() to each of item in the list.&lt;br /&gt;
Preset can hold mixed types of assets (script, style, another preset, etc), the type should be provided after # symbol and follows after an asset name, example: foo#style, bar#script.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;preset&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core#script&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#style&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#script&amp;quot;,&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with preset ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with preset items:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach all items from foobar preset to the document&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable all items from foobar preset from being attached&lt;br /&gt;
$wa-&amp;gt;disablePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerPreset(&#039;bar&#039;, &#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUsePreset(&#039;bar&#039;,&#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Advanced: Custom WebAssetItem class ==&lt;br /&gt;
&lt;br /&gt;
The default class for all WebAsset items is &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
You are also allowed to use a custom class, which must implement &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItemInterface&#039;&#039;&#039; or extend &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
A custom class can allow you to do advanced actions, for example, including a script file depending on an active language:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyComExampleAssetItem extends WebAssetItem&lt;br /&gt;
{&lt;br /&gt;
	public function getUri($resolvePath = true): string&lt;br /&gt;
	{&lt;br /&gt;
		$langTag = Factory::getApplication()-&amp;gt;getLanguage()-&amp;gt;getTag();&lt;br /&gt;
		// For script asset use &amp;quot;.js&amp;quot;, for style we would use &amp;quot;.css&amp;quot;&lt;br /&gt;
		$path    = &#039;com_example/bar-&#039; . $langTag . &#039;.js&#039;;&lt;br /&gt;
&lt;br /&gt;
		if ($resolvePath)&lt;br /&gt;
		{&lt;br /&gt;
			// For script asset use &amp;quot;script&amp;quot;, for style we would use &amp;quot;stylesheet&amp;quot;&lt;br /&gt;
			$path = $this-&amp;gt;resolvePath($path, &#039;script&#039;);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		return $path;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Additionally, implementing &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface&#039;&#039;&#039; allows you to add a script options (which may depend on the environment) when your asset is enabled and attached to the Document.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyFancyFoobarAssetItem extends WebAssetItem implements WebAssetAttachBehaviorInterface&lt;br /&gt;
{&lt;br /&gt;
	public function onAttachCallback(Document $doc): void&lt;br /&gt;
	{&lt;br /&gt;
		$user = Factory::getApplication()-&amp;gt;getIdentity();&lt;br /&gt;
		$doc-&amp;gt;addScriptOptions(&#039;com_example.fancyfoobar&#039;, [&#039;userName&#039; =&amp;gt; $user-&amp;gt;username]);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Important note:&#039;&#039;&#039; An asset item that implements &#039;&#039;&#039;WebAssetAttachBehaviorInterface&#039;&#039;&#039; should be enabled before [https://docs.joomla.org/Plugin/Events/System#onBeforeCompileHead onBeforeCompileHead] event, otherwise &#039;onAttachCallback&#039; will be ignored.&lt;br /&gt;
&lt;br /&gt;
=== Defining a custom WebAssetItem class in joomla.asset.json === &lt;br /&gt;
&lt;br /&gt;
In joomla.asset.json you can define which Class should be used with specific AssetItem.&lt;br /&gt;
For this you can use 2 properties &#039;&#039;&#039;namespace&#039;&#039;&#039; and &#039;&#039;&#039;class&#039;&#039;&#039;. &#039;&#039;&#039;namespace&#039;&#039;&#039; can be defined at Root level (then it will be used as default namespace for all Asset items in joomla.asset.json) or in the Item level. For example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;namespace&amp;quot;: &amp;quot;Joomla\Component\Example\WebAsset&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;MyFooBar\Library\Example\WebAsset&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\Component\Example\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;MyFooBar\Library\Example\WebAsset\BarAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If &#039;&#039;&#039;namespace&#039;&#039;&#039; are not defined then by default will be used &#039;&#039;&#039;Joomla\CMS\WebAsset&#039;&#039;&#039;. When &#039;&#039;&#039;namespace&#039;&#039;&#039; is defined but empty, then no namespace will be used, only &#039;&#039;&#039;class&#039;&#039;&#039;. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\CMS\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;BarAssetItem&#039;&#039;&#039; (without namespace).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/118/ru&amp;diff=866505</id>
		<title>Translations:J4.x:Web Assets/118/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/118/ru&amp;diff=866505"/>
		<updated>2022-01-04T13:00:18Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Он имеет структуру, состоящую из определения схемы&amp;lt;source inline&amp;gt;schema&amp;lt;/source&amp;gt; (для проверки), имени, версии, лицензии, а затем одного или нескольких определений ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Активы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; состоят из списка файлов js и файлов css, связанных с ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; и любыми зависимостями. Раздел зависимостей - это просто список имен ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;, которые необходимы для работы ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Пример:&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866499</id>
		<title>J4.x:Web Assets/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866499"/>
		<updated>2022-01-04T12:59:44Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
== Концепция ==&lt;br /&gt;
&lt;br /&gt;
Во внешнем интерфейсе многие ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;br /&gt;
&lt;br /&gt;
== Определение ==&lt;br /&gt;
&lt;br /&gt;
Связанные ресурсы определены в файле JSON, например [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2/build/media_source/system/joomla.asset.json#L14-L21 system/joomla.asset.json#L14-L21]&lt;br /&gt;
&lt;br /&gt;
Он имеет структуру, состоящую из определения схемы&amp;lt;source inline&amp;gt;schema&amp;lt;/source&amp;gt; (для проверки), имени, версии, лицензии, а затем одного или нескольких определений активов&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Активы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; состоят из списка файлов js и файлов css, связанных с активами&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; и любыми зависимостями. Раздел зависимостей - это просто список имен активов&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;, которые необходимы для работы актива&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Пример:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;description&amp;quot;: &amp;quot;Joomla CMS&amp;quot;,&lt;br /&gt;
  &amp;quot;license&amp;quot;: &amp;quot;GPL-2.0+&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.css&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.css&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;core&amp;quot;,&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.js&amp;quot;,&lt;br /&gt;
      &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
        &amp;quot;defer&amp;quot;: true,&lt;br /&gt;
        &amp;quot;data-foo&amp;quot;: &amp;quot;bar&amp;quot;&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;source lang=&amp;quot;json&amp;quot; inline&amp;gt;$schema&amp;lt;/source&amp;gt; attribute is a schema definition file that allows you to validate your file using JSON Schema. Read [https://json-schema.org/understanding-json-schema/index.html the official website] for more information on json schema validation works.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Having joomla.asset.json for your extension or template are recommend but not required to WebAssset to work (see next section).&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is not recommended to add an inline asset to a json file, prefer to use a file.&lt;br /&gt;
&lt;br /&gt;
== Объяснение этапов работы с asset ==&lt;br /&gt;
&lt;br /&gt;
Each asset has 2 stages: registered and used.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Registered&#039;&#039;&#039; is where an asset is loaded into &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;. That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; knows about the existence of these assets, but will not attach them to a document while rendering.&lt;br /&gt;
All assets loaded from joomla.asset.json is at &#039;&#039;&#039;registered&#039;&#039;&#039; stage.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Used&#039;&#039;&#039; is where an asset is enabled via &amp;quot;$wa-&amp;gt;useAsset()&amp;quot; (-&amp;gt;useScript(), -&amp;gt;useStyle(), -&amp;gt;registerAndUseX() etc). That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will attach these assets and their dependencies to a document while rendering.&lt;br /&gt;
&lt;br /&gt;
An asset cannot be used if it was not registered before, this will cause an unknown asset exception.&lt;br /&gt;
&lt;br /&gt;
== Register an asset ==&lt;br /&gt;
&lt;br /&gt;
All known assets loaded and then stored in &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; (to enable/disable an asset item you have to use &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, see next section).&lt;br /&gt;
&lt;br /&gt;
Joomla! will look for next assets definition automatically at runtime (in following order):&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
media/vendor/joomla.asset.json (on first access to WebAssetRegistry)&lt;br /&gt;
media/system/joomla.asset.json&lt;br /&gt;
media/legacy/joomla.asset.json&lt;br /&gt;
media/{com_active_component}/joomla.asset.json (on dispatch the application)&lt;br /&gt;
templates/{active_template}/joomla.asset.json&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And load them to registry of known assets.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Each following assets definition will override asset items from previous assets definition, by item name.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
You can register your own assets definition via &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wr = $wa-&amp;gt;getRegistry();&lt;br /&gt;
$wr-&amp;gt;addRegistryFile(&#039;relative/path/to/your/joomla.asset.json&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To add a custom asset item at runtime:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wr-&amp;gt;add(&#039;script&#039;, new Joomla\CMS\WebAsset\WebAssetItem(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;, [&#039;type&#039; =&amp;gt; &#039;script&#039;]));&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or more simply, using &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The new asset item &#039;&#039;&#039;foobar&#039;&#039;&#039; will be added to the registry of know assets, but will not be attached to a document until your code (a layout, template etc) will request it.&lt;br /&gt;
&lt;br /&gt;
To check whether an asset exists:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
if ($wa-&amp;gt;assetExists(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; exists!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Enabling an asset ==&lt;br /&gt;
All asset management in the current Document handled by &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, which is accessible with &#039;&#039;&#039;$doc-&amp;gt;getWebAssetManager();&#039;&#039;&#039;&lt;br /&gt;
By using AssetManager you can enable or disable needed asset easily in Joomla! through a standard methods.&lt;br /&gt;
&lt;br /&gt;
To enable an asset in the page use the useAsset function, for example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;);&lt;br /&gt;
&lt;br /&gt;
// Or multiple&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;fields.validate&#039;)&lt;br /&gt;
    -&amp;gt;useStyle(&#039;foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add new asset item with dependency and use it&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;, &#039;com_foobar/bar.js&#039;, [], [], [&#039;core&#039;, &#039;foobar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will look to &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; whether the requested asset exists, and will enable it for current Document instance. Otherwise it will throw an UnknownAssetException.&lt;br /&gt;
&lt;br /&gt;
To disable an asset in the page use the disableAsset function. The example below will disable the jquery-noconflict asset from being loaded.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;jquery-noconflict&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If there are any dependencies to the disabled asset, then this asset will be re-enabled automatically, no matter what.&lt;br /&gt;
&lt;br /&gt;
To check whether asset enabled, and the asset state:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
// Checking whether an asset are active (enabled manually or automatically as dependency)&lt;br /&gt;
if ($wa-&amp;gt;isAssetActive(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; is active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// Checking state&lt;br /&gt;
switch($wa-&amp;gt;getAssetState(&#039;script&#039;, &#039;foobar&#039;)){&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_ACTIVE:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled manually&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_DEPENDENCY:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled automatically while resolving dependencies&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	default:&lt;br /&gt;
		var_dump(&#039;not active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Overriding an asset ==&lt;br /&gt;
&lt;br /&gt;
Overriding may be useful when you need to redefine the URI of asset item or its dependencies.&lt;br /&gt;
As already was noted, each of the following assets definition from joomla.asset.json will override asset items from previous assets definitions, by item name.&lt;br /&gt;
That means if you provide joomla.asset.json which contain already loaded asset items, they will be replaced with your items.&lt;br /&gt;
Another way to override in the code is to register an item with the same name.&lt;br /&gt;
Example, we have &amp;quot;foobar&amp;quot; script, that load com_example/foobar.js library, and we want to use CDN for this exact library:&lt;br /&gt;
&lt;br /&gt;
How it defined in the system initially:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To override the URI we define the asset item with &amp;quot;foobar&amp;quot; name in our joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;http://foobar.cdn.blabla/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or, register new asset item with AssetManager:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;http://fobar.cdn.blabla/foobar.js&#039;, [], [], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Working with styles ==&lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Stylesheet files. Stylesheet asset item have a type &amp;quot;style&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.css&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with styles === &lt;br /&gt;
&lt;br /&gt;
AssetManager offers the following methods to work with style files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline style ===&lt;br /&gt;
&lt;br /&gt;
Additionaly to style files, WebAssetManager allows you to add an inline style, and maintain their relation to the file asset.&lt;br /&gt;
Inline styles may be placed directly before the dependency, after the dependency, or as usual after all styles.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrieve the asset item from a registry, or as a dependency to another inline asset. If the name is not specified then a generated name based on a content hash will be used.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline3&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foobar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline4&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset has multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foo.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;bar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline assets may be a dependency to another inline asset, however it is not recommended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may change in the future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Working with scripts == &lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Script files. Script asset item have a type &amp;quot;script&amp;quot;.&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example json definition of ES6 module script, with fallback to legacy:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-as5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core&amp;quot;, &lt;br /&gt;
    &amp;quot;foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with scripts ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with script files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;bar&#039;, &#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;,&#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline script ===&lt;br /&gt;
&lt;br /&gt;
Addittionaly to script files WebAssetManager allow to add an inline script, and maintain their relation to the file asset.&lt;br /&gt;
Inline script may be placed directly before the dependency, after the dependency, or as usual after all scripts.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrive the asset item form a registry, or as dependecy to another inline asset. If name not specified then will be used generated name based on a content hash.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Specify script type&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline5&#039;, [], [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline3&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;foobar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline4&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;module&amp;quot;&amp;gt;content of inline5&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset have a multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script src=&amp;quot;foo.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;bar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline asset may be as dependency to another inline asset, hovewer it is not recomended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may changes in future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
== Working with a web component ==&lt;br /&gt;
&lt;br /&gt;
Joomla! allows you to use [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Components] for your needs. In Joomla! web components are not loaded as regular script, but loaded via Web Component loader so that they are loaded asynchronously. Therefore, a web component asset item must have a flag &amp;quot;webcomponent&amp;quot; set to the boolean &amp;quot;true&amp;quot;.&lt;br /&gt;
In all other aspects, working with web components in AssetManager is the same as working with a &amp;quot;script&amp;quot; asset item.&lt;br /&gt;
&lt;br /&gt;
Example json definition of some web components in joomla.asset.json (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
     &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example with fallback, for browsers that does not support ES6 &amp;quot;module&amp;quot; feature. Note that the legacy script should have &amp;quot;wcpolyfill&amp;quot; dependency, and module script should have dependency from legacy script:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element-es5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;wcpolyfill&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;webcomponent.foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Alternatively you can register them in PHP (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.css&#039;)&lt;br /&gt;
    -&amp;gt;registerScript(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.js&#039;, [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Attach to document:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;webcomponent.foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;webcomponent.foobar&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is preferred to prefix the asset name with &amp;quot;webcomponent.&amp;quot; to make it easily to spot, and distinct it from regular scripts in a layout.&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with web component ===&lt;br /&gt;
&lt;br /&gt;
All methods to work with a web component are the same as methods to work with script asset item.&lt;br /&gt;
&lt;br /&gt;
== Working with a presets ==&lt;br /&gt;
&lt;br /&gt;
&amp;quot;Preset&amp;quot; is a special kind of asset item that hold a list of items that has to be enabled, in same way as direct call of useAsset() to each of item in the list.&lt;br /&gt;
Preset can hold mixed types of assets (script, style, another preset, etc), the type should be provided after # symbol and follows after an asset name, example: foo#style, bar#script.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;preset&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core#script&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#style&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#script&amp;quot;,&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with preset ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with preset items:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach all items from foobar preset to the document&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable all items from foobar preset from being attached&lt;br /&gt;
$wa-&amp;gt;disablePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerPreset(&#039;bar&#039;, &#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUsePreset(&#039;bar&#039;,&#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Advanced: Custom WebAssetItem class ==&lt;br /&gt;
&lt;br /&gt;
The default class for all WebAsset items is &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
You are also allowed to use a custom class, which must implement &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItemInterface&#039;&#039;&#039; or extend &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
A custom class can allow you to do advanced actions, for example, including a script file depending on an active language:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyComExampleAssetItem extends WebAssetItem&lt;br /&gt;
{&lt;br /&gt;
	public function getUri($resolvePath = true): string&lt;br /&gt;
	{&lt;br /&gt;
		$langTag = Factory::getApplication()-&amp;gt;getLanguage()-&amp;gt;getTag();&lt;br /&gt;
		// For script asset use &amp;quot;.js&amp;quot;, for style we would use &amp;quot;.css&amp;quot;&lt;br /&gt;
		$path    = &#039;com_example/bar-&#039; . $langTag . &#039;.js&#039;;&lt;br /&gt;
&lt;br /&gt;
		if ($resolvePath)&lt;br /&gt;
		{&lt;br /&gt;
			// For script asset use &amp;quot;script&amp;quot;, for style we would use &amp;quot;stylesheet&amp;quot;&lt;br /&gt;
			$path = $this-&amp;gt;resolvePath($path, &#039;script&#039;);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		return $path;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Additionally, implementing &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface&#039;&#039;&#039; allows you to add a script options (which may depend on the environment) when your asset is enabled and attached to the Document.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyFancyFoobarAssetItem extends WebAssetItem implements WebAssetAttachBehaviorInterface&lt;br /&gt;
{&lt;br /&gt;
	public function onAttachCallback(Document $doc): void&lt;br /&gt;
	{&lt;br /&gt;
		$user = Factory::getApplication()-&amp;gt;getIdentity();&lt;br /&gt;
		$doc-&amp;gt;addScriptOptions(&#039;com_example.fancyfoobar&#039;, [&#039;userName&#039; =&amp;gt; $user-&amp;gt;username]);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Important note:&#039;&#039;&#039; An asset item that implements &#039;&#039;&#039;WebAssetAttachBehaviorInterface&#039;&#039;&#039; should be enabled before [https://docs.joomla.org/Plugin/Events/System#onBeforeCompileHead onBeforeCompileHead] event, otherwise &#039;onAttachCallback&#039; will be ignored.&lt;br /&gt;
&lt;br /&gt;
=== Defining a custom WebAssetItem class in joomla.asset.json === &lt;br /&gt;
&lt;br /&gt;
In joomla.asset.json you can define which Class should be used with specific AssetItem.&lt;br /&gt;
For this you can use 2 properties &#039;&#039;&#039;namespace&#039;&#039;&#039; and &#039;&#039;&#039;class&#039;&#039;&#039;. &#039;&#039;&#039;namespace&#039;&#039;&#039; can be defined at Root level (then it will be used as default namespace for all Asset items in joomla.asset.json) or in the Item level. For example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;namespace&amp;quot;: &amp;quot;Joomla\Component\Example\WebAsset&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;MyFooBar\Library\Example\WebAsset&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\Component\Example\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;MyFooBar\Library\Example\WebAsset\BarAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If &#039;&#039;&#039;namespace&#039;&#039;&#039; are not defined then by default will be used &#039;&#039;&#039;Joomla\CMS\WebAsset&#039;&#039;&#039;. When &#039;&#039;&#039;namespace&#039;&#039;&#039; is defined but empty, then no namespace will be used, only &#039;&#039;&#039;class&#039;&#039;&#039;. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\CMS\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;BarAssetItem&#039;&#039;&#039; (without namespace).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/115/ru&amp;diff=866472</id>
		<title>Translations:J4.x:Web Assets/115/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/115/ru&amp;diff=866472"/>
		<updated>2022-01-04T12:59:39Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Во внешнем интерфейсе многие ресурсы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866425</id>
		<title>J4.x:Web Assets/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866425"/>
		<updated>2022-01-04T12:37:31Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;== Объяснение этапов работы с asset ==&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
== Концепция ==&lt;br /&gt;
&lt;br /&gt;
Во внешнем интерфейсе многие активы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;br /&gt;
&lt;br /&gt;
== Определение ==&lt;br /&gt;
&lt;br /&gt;
Связанные ресурсы определены в файле JSON, например [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2/build/media_source/system/joomla.asset.json#L14-L21 system/joomla.asset.json#L14-L21]&lt;br /&gt;
&lt;br /&gt;
Он имеет структуру, состоящую из определения схемы&amp;lt;source inline&amp;gt;schema&amp;lt;/source&amp;gt; (для проверки), имени, версии, лицензии, а затем одного или нескольких определений активов&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Активы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; состоят из списка файлов js и файлов css, связанных с активами&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; и любыми зависимостями. Раздел зависимостей - это просто список имен активов&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;, которые необходимы для работы актива&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Пример:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;description&amp;quot;: &amp;quot;Joomla CMS&amp;quot;,&lt;br /&gt;
  &amp;quot;license&amp;quot;: &amp;quot;GPL-2.0+&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.css&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.css&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;core&amp;quot;,&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.js&amp;quot;,&lt;br /&gt;
      &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
        &amp;quot;defer&amp;quot;: true,&lt;br /&gt;
        &amp;quot;data-foo&amp;quot;: &amp;quot;bar&amp;quot;&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;source lang=&amp;quot;json&amp;quot; inline&amp;gt;$schema&amp;lt;/source&amp;gt; attribute is a schema definition file that allows you to validate your file using JSON Schema. Read [https://json-schema.org/understanding-json-schema/index.html the official website] for more information on json schema validation works.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Having joomla.asset.json for your extension or template are recommend but not required to WebAssset to work (see next section).&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is not recommended to add an inline asset to a json file, prefer to use a file.&lt;br /&gt;
&lt;br /&gt;
== Объяснение этапов работы с asset ==&lt;br /&gt;
&lt;br /&gt;
Each asset has 2 stages: registered and used.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Registered&#039;&#039;&#039; is where an asset is loaded into &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;. That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; knows about the existence of these assets, but will not attach them to a document while rendering.&lt;br /&gt;
All assets loaded from joomla.asset.json is at &#039;&#039;&#039;registered&#039;&#039;&#039; stage.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Used&#039;&#039;&#039; is where an asset is enabled via &amp;quot;$wa-&amp;gt;useAsset()&amp;quot; (-&amp;gt;useScript(), -&amp;gt;useStyle(), -&amp;gt;registerAndUseX() etc). That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will attach these assets and their dependencies to a document while rendering.&lt;br /&gt;
&lt;br /&gt;
An asset cannot be used if it was not registered before, this will cause an unknown asset exception.&lt;br /&gt;
&lt;br /&gt;
== Register an asset ==&lt;br /&gt;
&lt;br /&gt;
All known assets loaded and then stored in &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; (to enable/disable an asset item you have to use &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, see next section).&lt;br /&gt;
&lt;br /&gt;
Joomla! will look for next assets definition automatically at runtime (in following order):&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
media/vendor/joomla.asset.json (on first access to WebAssetRegistry)&lt;br /&gt;
media/system/joomla.asset.json&lt;br /&gt;
media/legacy/joomla.asset.json&lt;br /&gt;
media/{com_active_component}/joomla.asset.json (on dispatch the application)&lt;br /&gt;
templates/{active_template}/joomla.asset.json&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And load them to registry of known assets.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Each following assets definition will override asset items from previous assets definition, by item name.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
You can register your own assets definition via &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wr = $wa-&amp;gt;getRegistry();&lt;br /&gt;
$wr-&amp;gt;addRegistryFile(&#039;relative/path/to/your/joomla.asset.json&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To add a custom asset item at runtime:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wr-&amp;gt;add(&#039;script&#039;, new Joomla\CMS\WebAsset\WebAssetItem(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;, [&#039;type&#039; =&amp;gt; &#039;script&#039;]));&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or more simply, using &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The new asset item &#039;&#039;&#039;foobar&#039;&#039;&#039; will be added to the registry of know assets, but will not be attached to a document until your code (a layout, template etc) will request it.&lt;br /&gt;
&lt;br /&gt;
To check whether an asset exists:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
if ($wa-&amp;gt;assetExists(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; exists!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Enabling an asset ==&lt;br /&gt;
All asset management in the current Document handled by &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, which is accessible with &#039;&#039;&#039;$doc-&amp;gt;getWebAssetManager();&#039;&#039;&#039;&lt;br /&gt;
By using AssetManager you can enable or disable needed asset easily in Joomla! through a standard methods.&lt;br /&gt;
&lt;br /&gt;
To enable an asset in the page use the useAsset function, for example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;);&lt;br /&gt;
&lt;br /&gt;
// Or multiple&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;fields.validate&#039;)&lt;br /&gt;
    -&amp;gt;useStyle(&#039;foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add new asset item with dependency and use it&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;, &#039;com_foobar/bar.js&#039;, [], [], [&#039;core&#039;, &#039;foobar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will look to &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; whether the requested asset exists, and will enable it for current Document instance. Otherwise it will throw an UnknownAssetException.&lt;br /&gt;
&lt;br /&gt;
To disable an asset in the page use the disableAsset function. The example below will disable the jquery-noconflict asset from being loaded.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;jquery-noconflict&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If there are any dependencies to the disabled asset, then this asset will be re-enabled automatically, no matter what.&lt;br /&gt;
&lt;br /&gt;
To check whether asset enabled, and the asset state:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
// Checking whether an asset are active (enabled manually or automatically as dependency)&lt;br /&gt;
if ($wa-&amp;gt;isAssetActive(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; is active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// Checking state&lt;br /&gt;
switch($wa-&amp;gt;getAssetState(&#039;script&#039;, &#039;foobar&#039;)){&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_ACTIVE:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled manually&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_DEPENDENCY:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled automatically while resolving dependencies&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	default:&lt;br /&gt;
		var_dump(&#039;not active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Overriding an asset ==&lt;br /&gt;
&lt;br /&gt;
Overriding may be useful when you need to redefine the URI of asset item or its dependencies.&lt;br /&gt;
As already was noted, each of the following assets definition from joomla.asset.json will override asset items from previous assets definitions, by item name.&lt;br /&gt;
That means if you provide joomla.asset.json which contain already loaded asset items, they will be replaced with your items.&lt;br /&gt;
Another way to override in the code is to register an item with the same name.&lt;br /&gt;
Example, we have &amp;quot;foobar&amp;quot; script, that load com_example/foobar.js library, and we want to use CDN for this exact library:&lt;br /&gt;
&lt;br /&gt;
How it defined in the system initially:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To override the URI we define the asset item with &amp;quot;foobar&amp;quot; name in our joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;http://foobar.cdn.blabla/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or, register new asset item with AssetManager:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;http://fobar.cdn.blabla/foobar.js&#039;, [], [], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Working with styles ==&lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Stylesheet files. Stylesheet asset item have a type &amp;quot;style&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.css&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with styles === &lt;br /&gt;
&lt;br /&gt;
AssetManager offers the following methods to work with style files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline style ===&lt;br /&gt;
&lt;br /&gt;
Additionaly to style files, WebAssetManager allows you to add an inline style, and maintain their relation to the file asset.&lt;br /&gt;
Inline styles may be placed directly before the dependency, after the dependency, or as usual after all styles.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrieve the asset item from a registry, or as a dependency to another inline asset. If the name is not specified then a generated name based on a content hash will be used.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline3&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foobar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline4&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset has multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foo.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;bar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline assets may be a dependency to another inline asset, however it is not recommended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may change in the future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Working with scripts == &lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Script files. Script asset item have a type &amp;quot;script&amp;quot;.&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example json definition of ES6 module script, with fallback to legacy:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-as5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core&amp;quot;, &lt;br /&gt;
    &amp;quot;foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with scripts ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with script files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;bar&#039;, &#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;,&#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline script ===&lt;br /&gt;
&lt;br /&gt;
Addittionaly to script files WebAssetManager allow to add an inline script, and maintain their relation to the file asset.&lt;br /&gt;
Inline script may be placed directly before the dependency, after the dependency, or as usual after all scripts.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrive the asset item form a registry, or as dependecy to another inline asset. If name not specified then will be used generated name based on a content hash.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Specify script type&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline5&#039;, [], [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline3&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;foobar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline4&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;module&amp;quot;&amp;gt;content of inline5&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset have a multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script src=&amp;quot;foo.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;bar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline asset may be as dependency to another inline asset, hovewer it is not recomended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may changes in future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
== Working with a web component ==&lt;br /&gt;
&lt;br /&gt;
Joomla! allows you to use [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Components] for your needs. In Joomla! web components are not loaded as regular script, but loaded via Web Component loader so that they are loaded asynchronously. Therefore, a web component asset item must have a flag &amp;quot;webcomponent&amp;quot; set to the boolean &amp;quot;true&amp;quot;.&lt;br /&gt;
In all other aspects, working with web components in AssetManager is the same as working with a &amp;quot;script&amp;quot; asset item.&lt;br /&gt;
&lt;br /&gt;
Example json definition of some web components in joomla.asset.json (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
     &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example with fallback, for browsers that does not support ES6 &amp;quot;module&amp;quot; feature. Note that the legacy script should have &amp;quot;wcpolyfill&amp;quot; dependency, and module script should have dependency from legacy script:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element-es5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;wcpolyfill&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;webcomponent.foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Alternatively you can register them in PHP (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.css&#039;)&lt;br /&gt;
    -&amp;gt;registerScript(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.js&#039;, [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Attach to document:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;webcomponent.foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;webcomponent.foobar&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is preferred to prefix the asset name with &amp;quot;webcomponent.&amp;quot; to make it easily to spot, and distinct it from regular scripts in a layout.&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with web component ===&lt;br /&gt;
&lt;br /&gt;
All methods to work with a web component are the same as methods to work with script asset item.&lt;br /&gt;
&lt;br /&gt;
== Working with a presets ==&lt;br /&gt;
&lt;br /&gt;
&amp;quot;Preset&amp;quot; is a special kind of asset item that hold a list of items that has to be enabled, in same way as direct call of useAsset() to each of item in the list.&lt;br /&gt;
Preset can hold mixed types of assets (script, style, another preset, etc), the type should be provided after # symbol and follows after an asset name, example: foo#style, bar#script.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;preset&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core#script&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#style&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#script&amp;quot;,&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with preset ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with preset items:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach all items from foobar preset to the document&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable all items from foobar preset from being attached&lt;br /&gt;
$wa-&amp;gt;disablePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerPreset(&#039;bar&#039;, &#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUsePreset(&#039;bar&#039;,&#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Advanced: Custom WebAssetItem class ==&lt;br /&gt;
&lt;br /&gt;
The default class for all WebAsset items is &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
You are also allowed to use a custom class, which must implement &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItemInterface&#039;&#039;&#039; or extend &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
A custom class can allow you to do advanced actions, for example, including a script file depending on an active language:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyComExampleAssetItem extends WebAssetItem&lt;br /&gt;
{&lt;br /&gt;
	public function getUri($resolvePath = true): string&lt;br /&gt;
	{&lt;br /&gt;
		$langTag = Factory::getApplication()-&amp;gt;getLanguage()-&amp;gt;getTag();&lt;br /&gt;
		// For script asset use &amp;quot;.js&amp;quot;, for style we would use &amp;quot;.css&amp;quot;&lt;br /&gt;
		$path    = &#039;com_example/bar-&#039; . $langTag . &#039;.js&#039;;&lt;br /&gt;
&lt;br /&gt;
		if ($resolvePath)&lt;br /&gt;
		{&lt;br /&gt;
			// For script asset use &amp;quot;script&amp;quot;, for style we would use &amp;quot;stylesheet&amp;quot;&lt;br /&gt;
			$path = $this-&amp;gt;resolvePath($path, &#039;script&#039;);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		return $path;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Additionally, implementing &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface&#039;&#039;&#039; allows you to add a script options (which may depend on the environment) when your asset is enabled and attached to the Document.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyFancyFoobarAssetItem extends WebAssetItem implements WebAssetAttachBehaviorInterface&lt;br /&gt;
{&lt;br /&gt;
	public function onAttachCallback(Document $doc): void&lt;br /&gt;
	{&lt;br /&gt;
		$user = Factory::getApplication()-&amp;gt;getIdentity();&lt;br /&gt;
		$doc-&amp;gt;addScriptOptions(&#039;com_example.fancyfoobar&#039;, [&#039;userName&#039; =&amp;gt; $user-&amp;gt;username]);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Important note:&#039;&#039;&#039; An asset item that implements &#039;&#039;&#039;WebAssetAttachBehaviorInterface&#039;&#039;&#039; should be enabled before [https://docs.joomla.org/Plugin/Events/System#onBeforeCompileHead onBeforeCompileHead] event, otherwise &#039;onAttachCallback&#039; will be ignored.&lt;br /&gt;
&lt;br /&gt;
=== Defining a custom WebAssetItem class in joomla.asset.json === &lt;br /&gt;
&lt;br /&gt;
In joomla.asset.json you can define which Class should be used with specific AssetItem.&lt;br /&gt;
For this you can use 2 properties &#039;&#039;&#039;namespace&#039;&#039;&#039; and &#039;&#039;&#039;class&#039;&#039;&#039;. &#039;&#039;&#039;namespace&#039;&#039;&#039; can be defined at Root level (then it will be used as default namespace for all Asset items in joomla.asset.json) or in the Item level. For example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;namespace&amp;quot;: &amp;quot;Joomla\Component\Example\WebAsset&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;MyFooBar\Library\Example\WebAsset&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\Component\Example\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;MyFooBar\Library\Example\WebAsset\BarAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If &#039;&#039;&#039;namespace&#039;&#039;&#039; are not defined then by default will be used &#039;&#039;&#039;Joomla\CMS\WebAsset&#039;&#039;&#039;. When &#039;&#039;&#039;namespace&#039;&#039;&#039; is defined but empty, then no namespace will be used, only &#039;&#039;&#039;class&#039;&#039;&#039;. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\CMS\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;BarAssetItem&#039;&#039;&#039; (without namespace).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/122/ru&amp;diff=866424</id>
		<title>Translations:J4.x:Web Assets/122/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/122/ru&amp;diff=866424"/>
		<updated>2022-01-04T12:37:26Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;== Объяснение этапов работы с asset ==&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== Объяснение этапов работы с asset ==&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866360</id>
		<title>J4.x:Web Assets/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866360"/>
		<updated>2022-01-04T11:15:06Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
== Концепция ==&lt;br /&gt;
&lt;br /&gt;
Во внешнем интерфейсе многие активы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;br /&gt;
&lt;br /&gt;
== Определение ==&lt;br /&gt;
&lt;br /&gt;
Связанные ресурсы определены в файле JSON, например [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2/build/media_source/system/joomla.asset.json#L14-L21 system/joomla.asset.json#L14-L21]&lt;br /&gt;
&lt;br /&gt;
Он имеет структуру, состоящую из определения схемы&amp;lt;source inline&amp;gt;schema&amp;lt;/source&amp;gt; (для проверки), имени, версии, лицензии, а затем одного или нескольких определений активов&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Активы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; состоят из списка файлов js и файлов css, связанных с активами&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; и любыми зависимостями. Раздел зависимостей - это просто список имен активов&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;, которые необходимы для работы актива&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Пример:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;description&amp;quot;: &amp;quot;Joomla CMS&amp;quot;,&lt;br /&gt;
  &amp;quot;license&amp;quot;: &amp;quot;GPL-2.0+&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.css&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.css&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;core&amp;quot;,&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.js&amp;quot;,&lt;br /&gt;
      &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
        &amp;quot;defer&amp;quot;: true,&lt;br /&gt;
        &amp;quot;data-foo&amp;quot;: &amp;quot;bar&amp;quot;&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;source lang=&amp;quot;json&amp;quot; inline&amp;gt;$schema&amp;lt;/source&amp;gt; attribute is a schema definition file that allows you to validate your file using JSON Schema. Read [https://json-schema.org/understanding-json-schema/index.html the official website] for more information on json schema validation works.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Having joomla.asset.json for your extension or template are recommend but not required to WebAssset to work (see next section).&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is not recommended to add an inline asset to a json file, prefer to use a file.&lt;br /&gt;
&lt;br /&gt;
== Explaining asset stages ==&lt;br /&gt;
&lt;br /&gt;
Each asset has 2 stages: registered and used.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Registered&#039;&#039;&#039; is where an asset is loaded into &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;. That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; knows about the existence of these assets, but will not attach them to a document while rendering.&lt;br /&gt;
All assets loaded from joomla.asset.json is at &#039;&#039;&#039;registered&#039;&#039;&#039; stage.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Used&#039;&#039;&#039; is where an asset is enabled via &amp;quot;$wa-&amp;gt;useAsset()&amp;quot; (-&amp;gt;useScript(), -&amp;gt;useStyle(), -&amp;gt;registerAndUseX() etc). That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will attach these assets and their dependencies to a document while rendering.&lt;br /&gt;
&lt;br /&gt;
An asset cannot be used if it was not registered before, this will cause an unknown asset exception.&lt;br /&gt;
&lt;br /&gt;
== Register an asset ==&lt;br /&gt;
&lt;br /&gt;
All known assets loaded and then stored in &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; (to enable/disable an asset item you have to use &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, see next section).&lt;br /&gt;
&lt;br /&gt;
Joomla! will look for next assets definition automatically at runtime (in following order):&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
media/vendor/joomla.asset.json (on first access to WebAssetRegistry)&lt;br /&gt;
media/system/joomla.asset.json&lt;br /&gt;
media/legacy/joomla.asset.json&lt;br /&gt;
media/{com_active_component}/joomla.asset.json (on dispatch the application)&lt;br /&gt;
templates/{active_template}/joomla.asset.json&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And load them to registry of known assets.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Each following assets definition will override asset items from previous assets definition, by item name.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
You can register your own assets definition via &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wr = $wa-&amp;gt;getRegistry();&lt;br /&gt;
$wr-&amp;gt;addRegistryFile(&#039;relative/path/to/your/joomla.asset.json&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To add a custom asset item at runtime:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wr-&amp;gt;add(&#039;script&#039;, new Joomla\CMS\WebAsset\WebAssetItem(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;, [&#039;type&#039; =&amp;gt; &#039;script&#039;]));&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or more simply, using &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The new asset item &#039;&#039;&#039;foobar&#039;&#039;&#039; will be added to the registry of know assets, but will not be attached to a document until your code (a layout, template etc) will request it.&lt;br /&gt;
&lt;br /&gt;
To check whether an asset exists:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
if ($wa-&amp;gt;assetExists(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; exists!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Enabling an asset ==&lt;br /&gt;
All asset management in the current Document handled by &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, which is accessible with &#039;&#039;&#039;$doc-&amp;gt;getWebAssetManager();&#039;&#039;&#039;&lt;br /&gt;
By using AssetManager you can enable or disable needed asset easily in Joomla! through a standard methods.&lt;br /&gt;
&lt;br /&gt;
To enable an asset in the page use the useAsset function, for example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;);&lt;br /&gt;
&lt;br /&gt;
// Or multiple&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;fields.validate&#039;)&lt;br /&gt;
    -&amp;gt;useStyle(&#039;foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add new asset item with dependency and use it&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;, &#039;com_foobar/bar.js&#039;, [], [], [&#039;core&#039;, &#039;foobar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will look to &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; whether the requested asset exists, and will enable it for current Document instance. Otherwise it will throw an UnknownAssetException.&lt;br /&gt;
&lt;br /&gt;
To disable an asset in the page use the disableAsset function. The example below will disable the jquery-noconflict asset from being loaded.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;jquery-noconflict&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If there are any dependencies to the disabled asset, then this asset will be re-enabled automatically, no matter what.&lt;br /&gt;
&lt;br /&gt;
To check whether asset enabled, and the asset state:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
// Checking whether an asset are active (enabled manually or automatically as dependency)&lt;br /&gt;
if ($wa-&amp;gt;isAssetActive(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; is active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// Checking state&lt;br /&gt;
switch($wa-&amp;gt;getAssetState(&#039;script&#039;, &#039;foobar&#039;)){&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_ACTIVE:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled manually&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_DEPENDENCY:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled automatically while resolving dependencies&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	default:&lt;br /&gt;
		var_dump(&#039;not active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Overriding an asset ==&lt;br /&gt;
&lt;br /&gt;
Overriding may be useful when you need to redefine the URI of asset item or its dependencies.&lt;br /&gt;
As already was noted, each of the following assets definition from joomla.asset.json will override asset items from previous assets definitions, by item name.&lt;br /&gt;
That means if you provide joomla.asset.json which contain already loaded asset items, they will be replaced with your items.&lt;br /&gt;
Another way to override in the code is to register an item with the same name.&lt;br /&gt;
Example, we have &amp;quot;foobar&amp;quot; script, that load com_example/foobar.js library, and we want to use CDN for this exact library:&lt;br /&gt;
&lt;br /&gt;
How it defined in the system initially:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To override the URI we define the asset item with &amp;quot;foobar&amp;quot; name in our joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;http://foobar.cdn.blabla/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or, register new asset item with AssetManager:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;http://fobar.cdn.blabla/foobar.js&#039;, [], [], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Working with styles ==&lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Stylesheet files. Stylesheet asset item have a type &amp;quot;style&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.css&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with styles === &lt;br /&gt;
&lt;br /&gt;
AssetManager offers the following methods to work with style files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline style ===&lt;br /&gt;
&lt;br /&gt;
Additionaly to style files, WebAssetManager allows you to add an inline style, and maintain their relation to the file asset.&lt;br /&gt;
Inline styles may be placed directly before the dependency, after the dependency, or as usual after all styles.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrieve the asset item from a registry, or as a dependency to another inline asset. If the name is not specified then a generated name based on a content hash will be used.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline3&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foobar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline4&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset has multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foo.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;bar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline assets may be a dependency to another inline asset, however it is not recommended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may change in the future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Working with scripts == &lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Script files. Script asset item have a type &amp;quot;script&amp;quot;.&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example json definition of ES6 module script, with fallback to legacy:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-as5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core&amp;quot;, &lt;br /&gt;
    &amp;quot;foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with scripts ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with script files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;bar&#039;, &#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;,&#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline script ===&lt;br /&gt;
&lt;br /&gt;
Addittionaly to script files WebAssetManager allow to add an inline script, and maintain their relation to the file asset.&lt;br /&gt;
Inline script may be placed directly before the dependency, after the dependency, or as usual after all scripts.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrive the asset item form a registry, or as dependecy to another inline asset. If name not specified then will be used generated name based on a content hash.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Specify script type&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline5&#039;, [], [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline3&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;foobar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline4&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;module&amp;quot;&amp;gt;content of inline5&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset have a multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script src=&amp;quot;foo.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;bar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline asset may be as dependency to another inline asset, hovewer it is not recomended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may changes in future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
== Working with a web component ==&lt;br /&gt;
&lt;br /&gt;
Joomla! allows you to use [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Components] for your needs. In Joomla! web components are not loaded as regular script, but loaded via Web Component loader so that they are loaded asynchronously. Therefore, a web component asset item must have a flag &amp;quot;webcomponent&amp;quot; set to the boolean &amp;quot;true&amp;quot;.&lt;br /&gt;
In all other aspects, working with web components in AssetManager is the same as working with a &amp;quot;script&amp;quot; asset item.&lt;br /&gt;
&lt;br /&gt;
Example json definition of some web components in joomla.asset.json (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
     &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example with fallback, for browsers that does not support ES6 &amp;quot;module&amp;quot; feature. Note that the legacy script should have &amp;quot;wcpolyfill&amp;quot; dependency, and module script should have dependency from legacy script:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element-es5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;wcpolyfill&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;webcomponent.foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Alternatively you can register them in PHP (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.css&#039;)&lt;br /&gt;
    -&amp;gt;registerScript(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.js&#039;, [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Attach to document:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;webcomponent.foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;webcomponent.foobar&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is preferred to prefix the asset name with &amp;quot;webcomponent.&amp;quot; to make it easily to spot, and distinct it from regular scripts in a layout.&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with web component ===&lt;br /&gt;
&lt;br /&gt;
All methods to work with a web component are the same as methods to work with script asset item.&lt;br /&gt;
&lt;br /&gt;
== Working with a presets ==&lt;br /&gt;
&lt;br /&gt;
&amp;quot;Preset&amp;quot; is a special kind of asset item that hold a list of items that has to be enabled, in same way as direct call of useAsset() to each of item in the list.&lt;br /&gt;
Preset can hold mixed types of assets (script, style, another preset, etc), the type should be provided after # symbol and follows after an asset name, example: foo#style, bar#script.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;preset&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core#script&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#style&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#script&amp;quot;,&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with preset ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with preset items:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach all items from foobar preset to the document&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable all items from foobar preset from being attached&lt;br /&gt;
$wa-&amp;gt;disablePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerPreset(&#039;bar&#039;, &#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUsePreset(&#039;bar&#039;,&#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Advanced: Custom WebAssetItem class ==&lt;br /&gt;
&lt;br /&gt;
The default class for all WebAsset items is &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
You are also allowed to use a custom class, which must implement &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItemInterface&#039;&#039;&#039; or extend &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
A custom class can allow you to do advanced actions, for example, including a script file depending on an active language:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyComExampleAssetItem extends WebAssetItem&lt;br /&gt;
{&lt;br /&gt;
	public function getUri($resolvePath = true): string&lt;br /&gt;
	{&lt;br /&gt;
		$langTag = Factory::getApplication()-&amp;gt;getLanguage()-&amp;gt;getTag();&lt;br /&gt;
		// For script asset use &amp;quot;.js&amp;quot;, for style we would use &amp;quot;.css&amp;quot;&lt;br /&gt;
		$path    = &#039;com_example/bar-&#039; . $langTag . &#039;.js&#039;;&lt;br /&gt;
&lt;br /&gt;
		if ($resolvePath)&lt;br /&gt;
		{&lt;br /&gt;
			// For script asset use &amp;quot;script&amp;quot;, for style we would use &amp;quot;stylesheet&amp;quot;&lt;br /&gt;
			$path = $this-&amp;gt;resolvePath($path, &#039;script&#039;);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		return $path;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Additionally, implementing &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface&#039;&#039;&#039; allows you to add a script options (which may depend on the environment) when your asset is enabled and attached to the Document.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyFancyFoobarAssetItem extends WebAssetItem implements WebAssetAttachBehaviorInterface&lt;br /&gt;
{&lt;br /&gt;
	public function onAttachCallback(Document $doc): void&lt;br /&gt;
	{&lt;br /&gt;
		$user = Factory::getApplication()-&amp;gt;getIdentity();&lt;br /&gt;
		$doc-&amp;gt;addScriptOptions(&#039;com_example.fancyfoobar&#039;, [&#039;userName&#039; =&amp;gt; $user-&amp;gt;username]);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Important note:&#039;&#039;&#039; An asset item that implements &#039;&#039;&#039;WebAssetAttachBehaviorInterface&#039;&#039;&#039; should be enabled before [https://docs.joomla.org/Plugin/Events/System#onBeforeCompileHead onBeforeCompileHead] event, otherwise &#039;onAttachCallback&#039; will be ignored.&lt;br /&gt;
&lt;br /&gt;
=== Defining a custom WebAssetItem class in joomla.asset.json === &lt;br /&gt;
&lt;br /&gt;
In joomla.asset.json you can define which Class should be used with specific AssetItem.&lt;br /&gt;
For this you can use 2 properties &#039;&#039;&#039;namespace&#039;&#039;&#039; and &#039;&#039;&#039;class&#039;&#039;&#039;. &#039;&#039;&#039;namespace&#039;&#039;&#039; can be defined at Root level (then it will be used as default namespace for all Asset items in joomla.asset.json) or in the Item level. For example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;namespace&amp;quot;: &amp;quot;Joomla\Component\Example\WebAsset&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;MyFooBar\Library\Example\WebAsset&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\Component\Example\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;MyFooBar\Library\Example\WebAsset\BarAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If &#039;&#039;&#039;namespace&#039;&#039;&#039; are not defined then by default will be used &#039;&#039;&#039;Joomla\CMS\WebAsset&#039;&#039;&#039;. When &#039;&#039;&#039;namespace&#039;&#039;&#039; is defined but empty, then no namespace will be used, only &#039;&#039;&#039;class&#039;&#039;&#039;. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\CMS\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;BarAssetItem&#039;&#039;&#039; (without namespace).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/118/ru&amp;diff=866359</id>
		<title>Translations:J4.x:Web Assets/118/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/118/ru&amp;diff=866359"/>
		<updated>2022-01-04T11:14:59Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Он имеет структуру, состоящую из определения схемы&amp;lt;source inline&amp;gt;schema&amp;lt;/source&amp;gt; (для проверки), имени, версии, лицензии, а затем одного или нескольких определений активов&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Активы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; состоят из списка файлов js и файлов css, связанных с активами&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; и любыми зависимостями. Раздел зависимостей - это просто список имен активов&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;, которые необходимы для работы актива&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt;. Пример:&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866358</id>
		<title>J4.x:Web Assets/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866358"/>
		<updated>2022-01-04T11:12:52Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
== Концепция ==&lt;br /&gt;
&lt;br /&gt;
Во внешнем интерфейсе многие активы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;br /&gt;
&lt;br /&gt;
== Определение ==&lt;br /&gt;
&lt;br /&gt;
Связанные ресурсы определены в файле JSON, например [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2/build/media_source/system/joomla.asset.json#L14-L21 system/joomla.asset.json#L14-L21]&lt;br /&gt;
&lt;br /&gt;
Он имеет структуру, состоящую из определения схемы (для проверки), имени, версии, лицензии, а затем одного или нескольких определений активов. Активы состоят из списка файлов js и файлов css, связанных с активами и любыми зависимостями. Раздел зависимостей - это просто список имен активов, которые необходимы для работы актива. Пример:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;description&amp;quot;: &amp;quot;Joomla CMS&amp;quot;,&lt;br /&gt;
  &amp;quot;license&amp;quot;: &amp;quot;GPL-2.0+&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.css&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.css&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;core&amp;quot;,&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.js&amp;quot;,&lt;br /&gt;
      &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
        &amp;quot;defer&amp;quot;: true,&lt;br /&gt;
        &amp;quot;data-foo&amp;quot;: &amp;quot;bar&amp;quot;&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;source lang=&amp;quot;json&amp;quot; inline&amp;gt;$schema&amp;lt;/source&amp;gt; attribute is a schema definition file that allows you to validate your file using JSON Schema. Read [https://json-schema.org/understanding-json-schema/index.html the official website] for more information on json schema validation works.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Having joomla.asset.json for your extension or template are recommend but not required to WebAssset to work (see next section).&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is not recommended to add an inline asset to a json file, prefer to use a file.&lt;br /&gt;
&lt;br /&gt;
== Explaining asset stages ==&lt;br /&gt;
&lt;br /&gt;
Each asset has 2 stages: registered and used.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Registered&#039;&#039;&#039; is where an asset is loaded into &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;. That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; knows about the existence of these assets, but will not attach them to a document while rendering.&lt;br /&gt;
All assets loaded from joomla.asset.json is at &#039;&#039;&#039;registered&#039;&#039;&#039; stage.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Used&#039;&#039;&#039; is where an asset is enabled via &amp;quot;$wa-&amp;gt;useAsset()&amp;quot; (-&amp;gt;useScript(), -&amp;gt;useStyle(), -&amp;gt;registerAndUseX() etc). That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will attach these assets and their dependencies to a document while rendering.&lt;br /&gt;
&lt;br /&gt;
An asset cannot be used if it was not registered before, this will cause an unknown asset exception.&lt;br /&gt;
&lt;br /&gt;
== Register an asset ==&lt;br /&gt;
&lt;br /&gt;
All known assets loaded and then stored in &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; (to enable/disable an asset item you have to use &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, see next section).&lt;br /&gt;
&lt;br /&gt;
Joomla! will look for next assets definition automatically at runtime (in following order):&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
media/vendor/joomla.asset.json (on first access to WebAssetRegistry)&lt;br /&gt;
media/system/joomla.asset.json&lt;br /&gt;
media/legacy/joomla.asset.json&lt;br /&gt;
media/{com_active_component}/joomla.asset.json (on dispatch the application)&lt;br /&gt;
templates/{active_template}/joomla.asset.json&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And load them to registry of known assets.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Each following assets definition will override asset items from previous assets definition, by item name.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
You can register your own assets definition via &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wr = $wa-&amp;gt;getRegistry();&lt;br /&gt;
$wr-&amp;gt;addRegistryFile(&#039;relative/path/to/your/joomla.asset.json&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To add a custom asset item at runtime:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wr-&amp;gt;add(&#039;script&#039;, new Joomla\CMS\WebAsset\WebAssetItem(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;, [&#039;type&#039; =&amp;gt; &#039;script&#039;]));&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or more simply, using &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The new asset item &#039;&#039;&#039;foobar&#039;&#039;&#039; will be added to the registry of know assets, but will not be attached to a document until your code (a layout, template etc) will request it.&lt;br /&gt;
&lt;br /&gt;
To check whether an asset exists:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
if ($wa-&amp;gt;assetExists(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; exists!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Enabling an asset ==&lt;br /&gt;
All asset management in the current Document handled by &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, which is accessible with &#039;&#039;&#039;$doc-&amp;gt;getWebAssetManager();&#039;&#039;&#039;&lt;br /&gt;
By using AssetManager you can enable or disable needed asset easily in Joomla! through a standard methods.&lt;br /&gt;
&lt;br /&gt;
To enable an asset in the page use the useAsset function, for example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;);&lt;br /&gt;
&lt;br /&gt;
// Or multiple&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;fields.validate&#039;)&lt;br /&gt;
    -&amp;gt;useStyle(&#039;foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add new asset item with dependency and use it&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;, &#039;com_foobar/bar.js&#039;, [], [], [&#039;core&#039;, &#039;foobar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will look to &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; whether the requested asset exists, and will enable it for current Document instance. Otherwise it will throw an UnknownAssetException.&lt;br /&gt;
&lt;br /&gt;
To disable an asset in the page use the disableAsset function. The example below will disable the jquery-noconflict asset from being loaded.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;jquery-noconflict&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If there are any dependencies to the disabled asset, then this asset will be re-enabled automatically, no matter what.&lt;br /&gt;
&lt;br /&gt;
To check whether asset enabled, and the asset state:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
// Checking whether an asset are active (enabled manually or automatically as dependency)&lt;br /&gt;
if ($wa-&amp;gt;isAssetActive(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; is active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// Checking state&lt;br /&gt;
switch($wa-&amp;gt;getAssetState(&#039;script&#039;, &#039;foobar&#039;)){&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_ACTIVE:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled manually&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_DEPENDENCY:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled automatically while resolving dependencies&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	default:&lt;br /&gt;
		var_dump(&#039;not active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Overriding an asset ==&lt;br /&gt;
&lt;br /&gt;
Overriding may be useful when you need to redefine the URI of asset item or its dependencies.&lt;br /&gt;
As already was noted, each of the following assets definition from joomla.asset.json will override asset items from previous assets definitions, by item name.&lt;br /&gt;
That means if you provide joomla.asset.json which contain already loaded asset items, they will be replaced with your items.&lt;br /&gt;
Another way to override in the code is to register an item with the same name.&lt;br /&gt;
Example, we have &amp;quot;foobar&amp;quot; script, that load com_example/foobar.js library, and we want to use CDN for this exact library:&lt;br /&gt;
&lt;br /&gt;
How it defined in the system initially:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To override the URI we define the asset item with &amp;quot;foobar&amp;quot; name in our joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;http://foobar.cdn.blabla/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or, register new asset item with AssetManager:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;http://fobar.cdn.blabla/foobar.js&#039;, [], [], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Working with styles ==&lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Stylesheet files. Stylesheet asset item have a type &amp;quot;style&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.css&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with styles === &lt;br /&gt;
&lt;br /&gt;
AssetManager offers the following methods to work with style files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline style ===&lt;br /&gt;
&lt;br /&gt;
Additionaly to style files, WebAssetManager allows you to add an inline style, and maintain their relation to the file asset.&lt;br /&gt;
Inline styles may be placed directly before the dependency, after the dependency, or as usual after all styles.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrieve the asset item from a registry, or as a dependency to another inline asset. If the name is not specified then a generated name based on a content hash will be used.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline3&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foobar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline4&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset has multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foo.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;bar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline assets may be a dependency to another inline asset, however it is not recommended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may change in the future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Working with scripts == &lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Script files. Script asset item have a type &amp;quot;script&amp;quot;.&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example json definition of ES6 module script, with fallback to legacy:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-as5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core&amp;quot;, &lt;br /&gt;
    &amp;quot;foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with scripts ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with script files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;bar&#039;, &#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;,&#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline script ===&lt;br /&gt;
&lt;br /&gt;
Addittionaly to script files WebAssetManager allow to add an inline script, and maintain their relation to the file asset.&lt;br /&gt;
Inline script may be placed directly before the dependency, after the dependency, or as usual after all scripts.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrive the asset item form a registry, or as dependecy to another inline asset. If name not specified then will be used generated name based on a content hash.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Specify script type&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline5&#039;, [], [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline3&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;foobar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline4&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;module&amp;quot;&amp;gt;content of inline5&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset have a multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script src=&amp;quot;foo.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;bar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline asset may be as dependency to another inline asset, hovewer it is not recomended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may changes in future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
== Working with a web component ==&lt;br /&gt;
&lt;br /&gt;
Joomla! allows you to use [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Components] for your needs. In Joomla! web components are not loaded as regular script, but loaded via Web Component loader so that they are loaded asynchronously. Therefore, a web component asset item must have a flag &amp;quot;webcomponent&amp;quot; set to the boolean &amp;quot;true&amp;quot;.&lt;br /&gt;
In all other aspects, working with web components in AssetManager is the same as working with a &amp;quot;script&amp;quot; asset item.&lt;br /&gt;
&lt;br /&gt;
Example json definition of some web components in joomla.asset.json (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
     &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example with fallback, for browsers that does not support ES6 &amp;quot;module&amp;quot; feature. Note that the legacy script should have &amp;quot;wcpolyfill&amp;quot; dependency, and module script should have dependency from legacy script:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element-es5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;wcpolyfill&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;webcomponent.foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Alternatively you can register them in PHP (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.css&#039;)&lt;br /&gt;
    -&amp;gt;registerScript(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.js&#039;, [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Attach to document:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;webcomponent.foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;webcomponent.foobar&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is preferred to prefix the asset name with &amp;quot;webcomponent.&amp;quot; to make it easily to spot, and distinct it from regular scripts in a layout.&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with web component ===&lt;br /&gt;
&lt;br /&gt;
All methods to work with a web component are the same as methods to work with script asset item.&lt;br /&gt;
&lt;br /&gt;
== Working with a presets ==&lt;br /&gt;
&lt;br /&gt;
&amp;quot;Preset&amp;quot; is a special kind of asset item that hold a list of items that has to be enabled, in same way as direct call of useAsset() to each of item in the list.&lt;br /&gt;
Preset can hold mixed types of assets (script, style, another preset, etc), the type should be provided after # symbol and follows after an asset name, example: foo#style, bar#script.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;preset&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core#script&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#style&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#script&amp;quot;,&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with preset ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with preset items:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach all items from foobar preset to the document&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable all items from foobar preset from being attached&lt;br /&gt;
$wa-&amp;gt;disablePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerPreset(&#039;bar&#039;, &#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUsePreset(&#039;bar&#039;,&#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Advanced: Custom WebAssetItem class ==&lt;br /&gt;
&lt;br /&gt;
The default class for all WebAsset items is &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
You are also allowed to use a custom class, which must implement &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItemInterface&#039;&#039;&#039; or extend &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
A custom class can allow you to do advanced actions, for example, including a script file depending on an active language:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyComExampleAssetItem extends WebAssetItem&lt;br /&gt;
{&lt;br /&gt;
	public function getUri($resolvePath = true): string&lt;br /&gt;
	{&lt;br /&gt;
		$langTag = Factory::getApplication()-&amp;gt;getLanguage()-&amp;gt;getTag();&lt;br /&gt;
		// For script asset use &amp;quot;.js&amp;quot;, for style we would use &amp;quot;.css&amp;quot;&lt;br /&gt;
		$path    = &#039;com_example/bar-&#039; . $langTag . &#039;.js&#039;;&lt;br /&gt;
&lt;br /&gt;
		if ($resolvePath)&lt;br /&gt;
		{&lt;br /&gt;
			// For script asset use &amp;quot;script&amp;quot;, for style we would use &amp;quot;stylesheet&amp;quot;&lt;br /&gt;
			$path = $this-&amp;gt;resolvePath($path, &#039;script&#039;);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		return $path;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Additionally, implementing &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface&#039;&#039;&#039; allows you to add a script options (which may depend on the environment) when your asset is enabled and attached to the Document.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyFancyFoobarAssetItem extends WebAssetItem implements WebAssetAttachBehaviorInterface&lt;br /&gt;
{&lt;br /&gt;
	public function onAttachCallback(Document $doc): void&lt;br /&gt;
	{&lt;br /&gt;
		$user = Factory::getApplication()-&amp;gt;getIdentity();&lt;br /&gt;
		$doc-&amp;gt;addScriptOptions(&#039;com_example.fancyfoobar&#039;, [&#039;userName&#039; =&amp;gt; $user-&amp;gt;username]);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Important note:&#039;&#039;&#039; An asset item that implements &#039;&#039;&#039;WebAssetAttachBehaviorInterface&#039;&#039;&#039; should be enabled before [https://docs.joomla.org/Plugin/Events/System#onBeforeCompileHead onBeforeCompileHead] event, otherwise &#039;onAttachCallback&#039; will be ignored.&lt;br /&gt;
&lt;br /&gt;
=== Defining a custom WebAssetItem class in joomla.asset.json === &lt;br /&gt;
&lt;br /&gt;
In joomla.asset.json you can define which Class should be used with specific AssetItem.&lt;br /&gt;
For this you can use 2 properties &#039;&#039;&#039;namespace&#039;&#039;&#039; and &#039;&#039;&#039;class&#039;&#039;&#039;. &#039;&#039;&#039;namespace&#039;&#039;&#039; can be defined at Root level (then it will be used as default namespace for all Asset items in joomla.asset.json) or in the Item level. For example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;namespace&amp;quot;: &amp;quot;Joomla\Component\Example\WebAsset&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;MyFooBar\Library\Example\WebAsset&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\Component\Example\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;MyFooBar\Library\Example\WebAsset\BarAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If &#039;&#039;&#039;namespace&#039;&#039;&#039; are not defined then by default will be used &#039;&#039;&#039;Joomla\CMS\WebAsset&#039;&#039;&#039;. When &#039;&#039;&#039;namespace&#039;&#039;&#039; is defined but empty, then no namespace will be used, only &#039;&#039;&#039;class&#039;&#039;&#039;. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\CMS\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;BarAssetItem&#039;&#039;&#039; (without namespace).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/115/ru&amp;diff=866357</id>
		<title>Translations:J4.x:Web Assets/115/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/115/ru&amp;diff=866357"/>
		<updated>2022-01-04T11:12:46Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Во внешнем интерфейсе многие активы&amp;lt;source inline&amp;gt;assets&amp;lt;/source&amp;gt; связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866352</id>
		<title>J4.x:Web Assets/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866352"/>
		<updated>2022-01-04T11:11:34Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
== Концепция ==&lt;br /&gt;
&lt;br /&gt;
Во внешнем интерфейсе многие активы&amp;lt;source&amp;gt;assets&amp;lt;/source&amp;gt; связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;br /&gt;
&lt;br /&gt;
== Определение ==&lt;br /&gt;
&lt;br /&gt;
Связанные ресурсы определены в файле JSON, например [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2/build/media_source/system/joomla.asset.json#L14-L21 system/joomla.asset.json#L14-L21]&lt;br /&gt;
&lt;br /&gt;
Он имеет структуру, состоящую из определения схемы (для проверки), имени, версии, лицензии, а затем одного или нескольких определений активов. Активы состоят из списка файлов js и файлов css, связанных с активами и любыми зависимостями. Раздел зависимостей - это просто список имен активов, которые необходимы для работы актива. Пример:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;description&amp;quot;: &amp;quot;Joomla CMS&amp;quot;,&lt;br /&gt;
  &amp;quot;license&amp;quot;: &amp;quot;GPL-2.0+&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.css&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.css&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;core&amp;quot;,&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.js&amp;quot;,&lt;br /&gt;
      &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
        &amp;quot;defer&amp;quot;: true,&lt;br /&gt;
        &amp;quot;data-foo&amp;quot;: &amp;quot;bar&amp;quot;&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;source lang=&amp;quot;json&amp;quot; inline&amp;gt;$schema&amp;lt;/source&amp;gt; attribute is a schema definition file that allows you to validate your file using JSON Schema. Read [https://json-schema.org/understanding-json-schema/index.html the official website] for more information on json schema validation works.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Having joomla.asset.json for your extension or template are recommend but not required to WebAssset to work (see next section).&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is not recommended to add an inline asset to a json file, prefer to use a file.&lt;br /&gt;
&lt;br /&gt;
== Explaining asset stages ==&lt;br /&gt;
&lt;br /&gt;
Each asset has 2 stages: registered and used.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Registered&#039;&#039;&#039; is where an asset is loaded into &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;. That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; knows about the existence of these assets, but will not attach them to a document while rendering.&lt;br /&gt;
All assets loaded from joomla.asset.json is at &#039;&#039;&#039;registered&#039;&#039;&#039; stage.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Used&#039;&#039;&#039; is where an asset is enabled via &amp;quot;$wa-&amp;gt;useAsset()&amp;quot; (-&amp;gt;useScript(), -&amp;gt;useStyle(), -&amp;gt;registerAndUseX() etc). That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will attach these assets and their dependencies to a document while rendering.&lt;br /&gt;
&lt;br /&gt;
An asset cannot be used if it was not registered before, this will cause an unknown asset exception.&lt;br /&gt;
&lt;br /&gt;
== Register an asset ==&lt;br /&gt;
&lt;br /&gt;
All known assets loaded and then stored in &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; (to enable/disable an asset item you have to use &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, see next section).&lt;br /&gt;
&lt;br /&gt;
Joomla! will look for next assets definition automatically at runtime (in following order):&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
media/vendor/joomla.asset.json (on first access to WebAssetRegistry)&lt;br /&gt;
media/system/joomla.asset.json&lt;br /&gt;
media/legacy/joomla.asset.json&lt;br /&gt;
media/{com_active_component}/joomla.asset.json (on dispatch the application)&lt;br /&gt;
templates/{active_template}/joomla.asset.json&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And load them to registry of known assets.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Each following assets definition will override asset items from previous assets definition, by item name.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
You can register your own assets definition via &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wr = $wa-&amp;gt;getRegistry();&lt;br /&gt;
$wr-&amp;gt;addRegistryFile(&#039;relative/path/to/your/joomla.asset.json&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To add a custom asset item at runtime:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wr-&amp;gt;add(&#039;script&#039;, new Joomla\CMS\WebAsset\WebAssetItem(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;, [&#039;type&#039; =&amp;gt; &#039;script&#039;]));&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or more simply, using &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The new asset item &#039;&#039;&#039;foobar&#039;&#039;&#039; will be added to the registry of know assets, but will not be attached to a document until your code (a layout, template etc) will request it.&lt;br /&gt;
&lt;br /&gt;
To check whether an asset exists:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
if ($wa-&amp;gt;assetExists(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; exists!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Enabling an asset ==&lt;br /&gt;
All asset management in the current Document handled by &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, which is accessible with &#039;&#039;&#039;$doc-&amp;gt;getWebAssetManager();&#039;&#039;&#039;&lt;br /&gt;
By using AssetManager you can enable or disable needed asset easily in Joomla! through a standard methods.&lt;br /&gt;
&lt;br /&gt;
To enable an asset in the page use the useAsset function, for example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;);&lt;br /&gt;
&lt;br /&gt;
// Or multiple&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;fields.validate&#039;)&lt;br /&gt;
    -&amp;gt;useStyle(&#039;foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add new asset item with dependency and use it&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;, &#039;com_foobar/bar.js&#039;, [], [], [&#039;core&#039;, &#039;foobar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will look to &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; whether the requested asset exists, and will enable it for current Document instance. Otherwise it will throw an UnknownAssetException.&lt;br /&gt;
&lt;br /&gt;
To disable an asset in the page use the disableAsset function. The example below will disable the jquery-noconflict asset from being loaded.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;jquery-noconflict&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If there are any dependencies to the disabled asset, then this asset will be re-enabled automatically, no matter what.&lt;br /&gt;
&lt;br /&gt;
To check whether asset enabled, and the asset state:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
// Checking whether an asset are active (enabled manually or automatically as dependency)&lt;br /&gt;
if ($wa-&amp;gt;isAssetActive(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; is active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// Checking state&lt;br /&gt;
switch($wa-&amp;gt;getAssetState(&#039;script&#039;, &#039;foobar&#039;)){&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_ACTIVE:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled manually&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_DEPENDENCY:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled automatically while resolving dependencies&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	default:&lt;br /&gt;
		var_dump(&#039;not active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Overriding an asset ==&lt;br /&gt;
&lt;br /&gt;
Overriding may be useful when you need to redefine the URI of asset item or its dependencies.&lt;br /&gt;
As already was noted, each of the following assets definition from joomla.asset.json will override asset items from previous assets definitions, by item name.&lt;br /&gt;
That means if you provide joomla.asset.json which contain already loaded asset items, they will be replaced with your items.&lt;br /&gt;
Another way to override in the code is to register an item with the same name.&lt;br /&gt;
Example, we have &amp;quot;foobar&amp;quot; script, that load com_example/foobar.js library, and we want to use CDN for this exact library:&lt;br /&gt;
&lt;br /&gt;
How it defined in the system initially:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To override the URI we define the asset item with &amp;quot;foobar&amp;quot; name in our joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;http://foobar.cdn.blabla/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or, register new asset item with AssetManager:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;http://fobar.cdn.blabla/foobar.js&#039;, [], [], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Working with styles ==&lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Stylesheet files. Stylesheet asset item have a type &amp;quot;style&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.css&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with styles === &lt;br /&gt;
&lt;br /&gt;
AssetManager offers the following methods to work with style files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline style ===&lt;br /&gt;
&lt;br /&gt;
Additionaly to style files, WebAssetManager allows you to add an inline style, and maintain their relation to the file asset.&lt;br /&gt;
Inline styles may be placed directly before the dependency, after the dependency, or as usual after all styles.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrieve the asset item from a registry, or as a dependency to another inline asset. If the name is not specified then a generated name based on a content hash will be used.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline3&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foobar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline4&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset has multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foo.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;bar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline assets may be a dependency to another inline asset, however it is not recommended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may change in the future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Working with scripts == &lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Script files. Script asset item have a type &amp;quot;script&amp;quot;.&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example json definition of ES6 module script, with fallback to legacy:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-as5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core&amp;quot;, &lt;br /&gt;
    &amp;quot;foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with scripts ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with script files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;bar&#039;, &#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;,&#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline script ===&lt;br /&gt;
&lt;br /&gt;
Addittionaly to script files WebAssetManager allow to add an inline script, and maintain their relation to the file asset.&lt;br /&gt;
Inline script may be placed directly before the dependency, after the dependency, or as usual after all scripts.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrive the asset item form a registry, or as dependecy to another inline asset. If name not specified then will be used generated name based on a content hash.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Specify script type&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline5&#039;, [], [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline3&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;foobar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline4&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;module&amp;quot;&amp;gt;content of inline5&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset have a multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script src=&amp;quot;foo.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;bar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline asset may be as dependency to another inline asset, hovewer it is not recomended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may changes in future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
== Working with a web component ==&lt;br /&gt;
&lt;br /&gt;
Joomla! allows you to use [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Components] for your needs. In Joomla! web components are not loaded as regular script, but loaded via Web Component loader so that they are loaded asynchronously. Therefore, a web component asset item must have a flag &amp;quot;webcomponent&amp;quot; set to the boolean &amp;quot;true&amp;quot;.&lt;br /&gt;
In all other aspects, working with web components in AssetManager is the same as working with a &amp;quot;script&amp;quot; asset item.&lt;br /&gt;
&lt;br /&gt;
Example json definition of some web components in joomla.asset.json (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
     &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example with fallback, for browsers that does not support ES6 &amp;quot;module&amp;quot; feature. Note that the legacy script should have &amp;quot;wcpolyfill&amp;quot; dependency, and module script should have dependency from legacy script:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element-es5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;wcpolyfill&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;webcomponent.foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Alternatively you can register them in PHP (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.css&#039;)&lt;br /&gt;
    -&amp;gt;registerScript(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.js&#039;, [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Attach to document:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;webcomponent.foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;webcomponent.foobar&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is preferred to prefix the asset name with &amp;quot;webcomponent.&amp;quot; to make it easily to spot, and distinct it from regular scripts in a layout.&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with web component ===&lt;br /&gt;
&lt;br /&gt;
All methods to work with a web component are the same as methods to work with script asset item.&lt;br /&gt;
&lt;br /&gt;
== Working with a presets ==&lt;br /&gt;
&lt;br /&gt;
&amp;quot;Preset&amp;quot; is a special kind of asset item that hold a list of items that has to be enabled, in same way as direct call of useAsset() to each of item in the list.&lt;br /&gt;
Preset can hold mixed types of assets (script, style, another preset, etc), the type should be provided after # symbol and follows after an asset name, example: foo#style, bar#script.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;preset&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core#script&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#style&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#script&amp;quot;,&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with preset ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with preset items:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach all items from foobar preset to the document&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable all items from foobar preset from being attached&lt;br /&gt;
$wa-&amp;gt;disablePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerPreset(&#039;bar&#039;, &#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUsePreset(&#039;bar&#039;,&#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Advanced: Custom WebAssetItem class ==&lt;br /&gt;
&lt;br /&gt;
The default class for all WebAsset items is &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
You are also allowed to use a custom class, which must implement &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItemInterface&#039;&#039;&#039; or extend &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
A custom class can allow you to do advanced actions, for example, including a script file depending on an active language:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyComExampleAssetItem extends WebAssetItem&lt;br /&gt;
{&lt;br /&gt;
	public function getUri($resolvePath = true): string&lt;br /&gt;
	{&lt;br /&gt;
		$langTag = Factory::getApplication()-&amp;gt;getLanguage()-&amp;gt;getTag();&lt;br /&gt;
		// For script asset use &amp;quot;.js&amp;quot;, for style we would use &amp;quot;.css&amp;quot;&lt;br /&gt;
		$path    = &#039;com_example/bar-&#039; . $langTag . &#039;.js&#039;;&lt;br /&gt;
&lt;br /&gt;
		if ($resolvePath)&lt;br /&gt;
		{&lt;br /&gt;
			// For script asset use &amp;quot;script&amp;quot;, for style we would use &amp;quot;stylesheet&amp;quot;&lt;br /&gt;
			$path = $this-&amp;gt;resolvePath($path, &#039;script&#039;);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		return $path;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Additionally, implementing &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface&#039;&#039;&#039; allows you to add a script options (which may depend on the environment) when your asset is enabled and attached to the Document.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyFancyFoobarAssetItem extends WebAssetItem implements WebAssetAttachBehaviorInterface&lt;br /&gt;
{&lt;br /&gt;
	public function onAttachCallback(Document $doc): void&lt;br /&gt;
	{&lt;br /&gt;
		$user = Factory::getApplication()-&amp;gt;getIdentity();&lt;br /&gt;
		$doc-&amp;gt;addScriptOptions(&#039;com_example.fancyfoobar&#039;, [&#039;userName&#039; =&amp;gt; $user-&amp;gt;username]);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Important note:&#039;&#039;&#039; An asset item that implements &#039;&#039;&#039;WebAssetAttachBehaviorInterface&#039;&#039;&#039; should be enabled before [https://docs.joomla.org/Plugin/Events/System#onBeforeCompileHead onBeforeCompileHead] event, otherwise &#039;onAttachCallback&#039; will be ignored.&lt;br /&gt;
&lt;br /&gt;
=== Defining a custom WebAssetItem class in joomla.asset.json === &lt;br /&gt;
&lt;br /&gt;
In joomla.asset.json you can define which Class should be used with specific AssetItem.&lt;br /&gt;
For this you can use 2 properties &#039;&#039;&#039;namespace&#039;&#039;&#039; and &#039;&#039;&#039;class&#039;&#039;&#039;. &#039;&#039;&#039;namespace&#039;&#039;&#039; can be defined at Root level (then it will be used as default namespace for all Asset items in joomla.asset.json) or in the Item level. For example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;namespace&amp;quot;: &amp;quot;Joomla\Component\Example\WebAsset&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;MyFooBar\Library\Example\WebAsset&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\Component\Example\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;MyFooBar\Library\Example\WebAsset\BarAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If &#039;&#039;&#039;namespace&#039;&#039;&#039; are not defined then by default will be used &#039;&#039;&#039;Joomla\CMS\WebAsset&#039;&#039;&#039;. When &#039;&#039;&#039;namespace&#039;&#039;&#039; is defined but empty, then no namespace will be used, only &#039;&#039;&#039;class&#039;&#039;&#039;. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\CMS\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;BarAssetItem&#039;&#039;&#039; (without namespace).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/115/ru&amp;diff=866324</id>
		<title>Translations:J4.x:Web Assets/115/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/115/ru&amp;diff=866324"/>
		<updated>2022-01-04T11:11:29Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Во внешнем интерфейсе многие активы&amp;lt;source&amp;gt;assets&amp;lt;/source&amp;gt; связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866322</id>
		<title>J4.x:Web Assets/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866322"/>
		<updated>2022-01-04T11:06:42Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Он имеет структуру, состоящую из определения схемы (для проверки), имени, версии, лицензии, а зат...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
== Концепция ==&lt;br /&gt;
&lt;br /&gt;
Во внешнем интерфейсе многие активы (&amp;quot;assets&amp;quot;) связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;br /&gt;
&lt;br /&gt;
== Определение ==&lt;br /&gt;
&lt;br /&gt;
Связанные ресурсы определены в файле JSON, например [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2/build/media_source/system/joomla.asset.json#L14-L21 system/joomla.asset.json#L14-L21]&lt;br /&gt;
&lt;br /&gt;
Он имеет структуру, состоящую из определения схемы (для проверки), имени, версии, лицензии, а затем одного или нескольких определений активов. Активы состоят из списка файлов js и файлов css, связанных с активами и любыми зависимостями. Раздел зависимостей - это просто список имен активов, которые необходимы для работы актива. Пример:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;description&amp;quot;: &amp;quot;Joomla CMS&amp;quot;,&lt;br /&gt;
  &amp;quot;license&amp;quot;: &amp;quot;GPL-2.0+&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.css&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.css&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;core&amp;quot;,&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.js&amp;quot;,&lt;br /&gt;
      &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
        &amp;quot;defer&amp;quot;: true,&lt;br /&gt;
        &amp;quot;data-foo&amp;quot;: &amp;quot;bar&amp;quot;&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;source lang=&amp;quot;json&amp;quot; inline&amp;gt;$schema&amp;lt;/source&amp;gt; attribute is a schema definition file that allows you to validate your file using JSON Schema. Read [https://json-schema.org/understanding-json-schema/index.html the official website] for more information on json schema validation works.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Having joomla.asset.json for your extension or template are recommend but not required to WebAssset to work (see next section).&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is not recommended to add an inline asset to a json file, prefer to use a file.&lt;br /&gt;
&lt;br /&gt;
== Explaining asset stages ==&lt;br /&gt;
&lt;br /&gt;
Each asset has 2 stages: registered and used.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Registered&#039;&#039;&#039; is where an asset is loaded into &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;. That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; knows about the existence of these assets, but will not attach them to a document while rendering.&lt;br /&gt;
All assets loaded from joomla.asset.json is at &#039;&#039;&#039;registered&#039;&#039;&#039; stage.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Used&#039;&#039;&#039; is where an asset is enabled via &amp;quot;$wa-&amp;gt;useAsset()&amp;quot; (-&amp;gt;useScript(), -&amp;gt;useStyle(), -&amp;gt;registerAndUseX() etc). That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will attach these assets and their dependencies to a document while rendering.&lt;br /&gt;
&lt;br /&gt;
An asset cannot be used if it was not registered before, this will cause an unknown asset exception.&lt;br /&gt;
&lt;br /&gt;
== Register an asset ==&lt;br /&gt;
&lt;br /&gt;
All known assets loaded and then stored in &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; (to enable/disable an asset item you have to use &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, see next section).&lt;br /&gt;
&lt;br /&gt;
Joomla! will look for next assets definition automatically at runtime (in following order):&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
media/vendor/joomla.asset.json (on first access to WebAssetRegistry)&lt;br /&gt;
media/system/joomla.asset.json&lt;br /&gt;
media/legacy/joomla.asset.json&lt;br /&gt;
media/{com_active_component}/joomla.asset.json (on dispatch the application)&lt;br /&gt;
templates/{active_template}/joomla.asset.json&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And load them to registry of known assets.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Each following assets definition will override asset items from previous assets definition, by item name.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
You can register your own assets definition via &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wr = $wa-&amp;gt;getRegistry();&lt;br /&gt;
$wr-&amp;gt;addRegistryFile(&#039;relative/path/to/your/joomla.asset.json&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To add a custom asset item at runtime:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wr-&amp;gt;add(&#039;script&#039;, new Joomla\CMS\WebAsset\WebAssetItem(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;, [&#039;type&#039; =&amp;gt; &#039;script&#039;]));&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or more simply, using &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The new asset item &#039;&#039;&#039;foobar&#039;&#039;&#039; will be added to the registry of know assets, but will not be attached to a document until your code (a layout, template etc) will request it.&lt;br /&gt;
&lt;br /&gt;
To check whether an asset exists:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
if ($wa-&amp;gt;assetExists(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; exists!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Enabling an asset ==&lt;br /&gt;
All asset management in the current Document handled by &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, which is accessible with &#039;&#039;&#039;$doc-&amp;gt;getWebAssetManager();&#039;&#039;&#039;&lt;br /&gt;
By using AssetManager you can enable or disable needed asset easily in Joomla! through a standard methods.&lt;br /&gt;
&lt;br /&gt;
To enable an asset in the page use the useAsset function, for example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;);&lt;br /&gt;
&lt;br /&gt;
// Or multiple&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;fields.validate&#039;)&lt;br /&gt;
    -&amp;gt;useStyle(&#039;foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add new asset item with dependency and use it&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;, &#039;com_foobar/bar.js&#039;, [], [], [&#039;core&#039;, &#039;foobar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will look to &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; whether the requested asset exists, and will enable it for current Document instance. Otherwise it will throw an UnknownAssetException.&lt;br /&gt;
&lt;br /&gt;
To disable an asset in the page use the disableAsset function. The example below will disable the jquery-noconflict asset from being loaded.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;jquery-noconflict&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If there are any dependencies to the disabled asset, then this asset will be re-enabled automatically, no matter what.&lt;br /&gt;
&lt;br /&gt;
To check whether asset enabled, and the asset state:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
// Checking whether an asset are active (enabled manually or automatically as dependency)&lt;br /&gt;
if ($wa-&amp;gt;isAssetActive(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; is active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// Checking state&lt;br /&gt;
switch($wa-&amp;gt;getAssetState(&#039;script&#039;, &#039;foobar&#039;)){&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_ACTIVE:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled manually&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_DEPENDENCY:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled automatically while resolving dependencies&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	default:&lt;br /&gt;
		var_dump(&#039;not active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Overriding an asset ==&lt;br /&gt;
&lt;br /&gt;
Overriding may be useful when you need to redefine the URI of asset item or its dependencies.&lt;br /&gt;
As already was noted, each of the following assets definition from joomla.asset.json will override asset items from previous assets definitions, by item name.&lt;br /&gt;
That means if you provide joomla.asset.json which contain already loaded asset items, they will be replaced with your items.&lt;br /&gt;
Another way to override in the code is to register an item with the same name.&lt;br /&gt;
Example, we have &amp;quot;foobar&amp;quot; script, that load com_example/foobar.js library, and we want to use CDN for this exact library:&lt;br /&gt;
&lt;br /&gt;
How it defined in the system initially:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To override the URI we define the asset item with &amp;quot;foobar&amp;quot; name in our joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;http://foobar.cdn.blabla/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or, register new asset item with AssetManager:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;http://fobar.cdn.blabla/foobar.js&#039;, [], [], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Working with styles ==&lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Stylesheet files. Stylesheet asset item have a type &amp;quot;style&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.css&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with styles === &lt;br /&gt;
&lt;br /&gt;
AssetManager offers the following methods to work with style files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline style ===&lt;br /&gt;
&lt;br /&gt;
Additionaly to style files, WebAssetManager allows you to add an inline style, and maintain their relation to the file asset.&lt;br /&gt;
Inline styles may be placed directly before the dependency, after the dependency, or as usual after all styles.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrieve the asset item from a registry, or as a dependency to another inline asset. If the name is not specified then a generated name based on a content hash will be used.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline3&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foobar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline4&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset has multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foo.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;bar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline assets may be a dependency to another inline asset, however it is not recommended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may change in the future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Working with scripts == &lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Script files. Script asset item have a type &amp;quot;script&amp;quot;.&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example json definition of ES6 module script, with fallback to legacy:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-as5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core&amp;quot;, &lt;br /&gt;
    &amp;quot;foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with scripts ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with script files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;bar&#039;, &#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;,&#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline script ===&lt;br /&gt;
&lt;br /&gt;
Addittionaly to script files WebAssetManager allow to add an inline script, and maintain their relation to the file asset.&lt;br /&gt;
Inline script may be placed directly before the dependency, after the dependency, or as usual after all scripts.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrive the asset item form a registry, or as dependecy to another inline asset. If name not specified then will be used generated name based on a content hash.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Specify script type&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline5&#039;, [], [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline3&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;foobar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline4&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;module&amp;quot;&amp;gt;content of inline5&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset have a multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script src=&amp;quot;foo.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;bar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline asset may be as dependency to another inline asset, hovewer it is not recomended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may changes in future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
== Working with a web component ==&lt;br /&gt;
&lt;br /&gt;
Joomla! allows you to use [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Components] for your needs. In Joomla! web components are not loaded as regular script, but loaded via Web Component loader so that they are loaded asynchronously. Therefore, a web component asset item must have a flag &amp;quot;webcomponent&amp;quot; set to the boolean &amp;quot;true&amp;quot;.&lt;br /&gt;
In all other aspects, working with web components in AssetManager is the same as working with a &amp;quot;script&amp;quot; asset item.&lt;br /&gt;
&lt;br /&gt;
Example json definition of some web components in joomla.asset.json (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
     &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example with fallback, for browsers that does not support ES6 &amp;quot;module&amp;quot; feature. Note that the legacy script should have &amp;quot;wcpolyfill&amp;quot; dependency, and module script should have dependency from legacy script:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element-es5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;wcpolyfill&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;webcomponent.foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Alternatively you can register them in PHP (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.css&#039;)&lt;br /&gt;
    -&amp;gt;registerScript(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.js&#039;, [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Attach to document:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;webcomponent.foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;webcomponent.foobar&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is preferred to prefix the asset name with &amp;quot;webcomponent.&amp;quot; to make it easily to spot, and distinct it from regular scripts in a layout.&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with web component ===&lt;br /&gt;
&lt;br /&gt;
All methods to work with a web component are the same as methods to work with script asset item.&lt;br /&gt;
&lt;br /&gt;
== Working with a presets ==&lt;br /&gt;
&lt;br /&gt;
&amp;quot;Preset&amp;quot; is a special kind of asset item that hold a list of items that has to be enabled, in same way as direct call of useAsset() to each of item in the list.&lt;br /&gt;
Preset can hold mixed types of assets (script, style, another preset, etc), the type should be provided after # symbol and follows after an asset name, example: foo#style, bar#script.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;preset&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core#script&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#style&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#script&amp;quot;,&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with preset ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with preset items:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach all items from foobar preset to the document&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable all items from foobar preset from being attached&lt;br /&gt;
$wa-&amp;gt;disablePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerPreset(&#039;bar&#039;, &#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUsePreset(&#039;bar&#039;,&#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Advanced: Custom WebAssetItem class ==&lt;br /&gt;
&lt;br /&gt;
The default class for all WebAsset items is &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
You are also allowed to use a custom class, which must implement &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItemInterface&#039;&#039;&#039; or extend &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
A custom class can allow you to do advanced actions, for example, including a script file depending on an active language:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyComExampleAssetItem extends WebAssetItem&lt;br /&gt;
{&lt;br /&gt;
	public function getUri($resolvePath = true): string&lt;br /&gt;
	{&lt;br /&gt;
		$langTag = Factory::getApplication()-&amp;gt;getLanguage()-&amp;gt;getTag();&lt;br /&gt;
		// For script asset use &amp;quot;.js&amp;quot;, for style we would use &amp;quot;.css&amp;quot;&lt;br /&gt;
		$path    = &#039;com_example/bar-&#039; . $langTag . &#039;.js&#039;;&lt;br /&gt;
&lt;br /&gt;
		if ($resolvePath)&lt;br /&gt;
		{&lt;br /&gt;
			// For script asset use &amp;quot;script&amp;quot;, for style we would use &amp;quot;stylesheet&amp;quot;&lt;br /&gt;
			$path = $this-&amp;gt;resolvePath($path, &#039;script&#039;);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		return $path;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Additionally, implementing &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface&#039;&#039;&#039; allows you to add a script options (which may depend on the environment) when your asset is enabled and attached to the Document.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyFancyFoobarAssetItem extends WebAssetItem implements WebAssetAttachBehaviorInterface&lt;br /&gt;
{&lt;br /&gt;
	public function onAttachCallback(Document $doc): void&lt;br /&gt;
	{&lt;br /&gt;
		$user = Factory::getApplication()-&amp;gt;getIdentity();&lt;br /&gt;
		$doc-&amp;gt;addScriptOptions(&#039;com_example.fancyfoobar&#039;, [&#039;userName&#039; =&amp;gt; $user-&amp;gt;username]);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Important note:&#039;&#039;&#039; An asset item that implements &#039;&#039;&#039;WebAssetAttachBehaviorInterface&#039;&#039;&#039; should be enabled before [https://docs.joomla.org/Plugin/Events/System#onBeforeCompileHead onBeforeCompileHead] event, otherwise &#039;onAttachCallback&#039; will be ignored.&lt;br /&gt;
&lt;br /&gt;
=== Defining a custom WebAssetItem class in joomla.asset.json === &lt;br /&gt;
&lt;br /&gt;
In joomla.asset.json you can define which Class should be used with specific AssetItem.&lt;br /&gt;
For this you can use 2 properties &#039;&#039;&#039;namespace&#039;&#039;&#039; and &#039;&#039;&#039;class&#039;&#039;&#039;. &#039;&#039;&#039;namespace&#039;&#039;&#039; can be defined at Root level (then it will be used as default namespace for all Asset items in joomla.asset.json) or in the Item level. For example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;namespace&amp;quot;: &amp;quot;Joomla\Component\Example\WebAsset&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;MyFooBar\Library\Example\WebAsset&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\Component\Example\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;MyFooBar\Library\Example\WebAsset\BarAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If &#039;&#039;&#039;namespace&#039;&#039;&#039; are not defined then by default will be used &#039;&#039;&#039;Joomla\CMS\WebAsset&#039;&#039;&#039;. When &#039;&#039;&#039;namespace&#039;&#039;&#039; is defined but empty, then no namespace will be used, only &#039;&#039;&#039;class&#039;&#039;&#039;. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\CMS\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;BarAssetItem&#039;&#039;&#039; (without namespace).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/118/ru&amp;diff=866321</id>
		<title>Translations:J4.x:Web Assets/118/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/118/ru&amp;diff=866321"/>
		<updated>2022-01-04T11:06:37Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Он имеет структуру, состоящую из определения схемы (для проверки), имени, версии, лицензии, а зат...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Он имеет структуру, состоящую из определения схемы (для проверки), имени, версии, лицензии, а затем одного или нескольких определений активов. Активы состоят из списка файлов js и файлов css, связанных с активами и любыми зависимостями. Раздел зависимостей - это просто список имен активов, которые необходимы для работы актива. Пример:&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866257</id>
		<title>J4.x:Web Assets/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866257"/>
		<updated>2022-01-04T11:00:40Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Связанные ресурсы определены в файле JSON, например [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
== Концепция ==&lt;br /&gt;
&lt;br /&gt;
Во внешнем интерфейсе многие активы (&amp;quot;assets&amp;quot;) связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;br /&gt;
&lt;br /&gt;
== Определение ==&lt;br /&gt;
&lt;br /&gt;
Связанные ресурсы определены в файле JSON, например [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2/build/media_source/system/joomla.asset.json#L14-L21 system/joomla.asset.json#L14-L21]&lt;br /&gt;
&lt;br /&gt;
This has a structure of having a schema definition (for validation), name, version, license and then one or more asset definitions. Assets are comprised of a list of js files and css files related to the assets and any dependencies. The dependencies section is just a list of asset names that are required for the asset to function. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;description&amp;quot;: &amp;quot;Joomla CMS&amp;quot;,&lt;br /&gt;
  &amp;quot;license&amp;quot;: &amp;quot;GPL-2.0+&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.css&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.css&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;core&amp;quot;,&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.js&amp;quot;,&lt;br /&gt;
      &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
        &amp;quot;defer&amp;quot;: true,&lt;br /&gt;
        &amp;quot;data-foo&amp;quot;: &amp;quot;bar&amp;quot;&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;source lang=&amp;quot;json&amp;quot; inline&amp;gt;$schema&amp;lt;/source&amp;gt; attribute is a schema definition file that allows you to validate your file using JSON Schema. Read [https://json-schema.org/understanding-json-schema/index.html the official website] for more information on json schema validation works.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Having joomla.asset.json for your extension or template are recommend but not required to WebAssset to work (see next section).&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is not recommended to add an inline asset to a json file, prefer to use a file.&lt;br /&gt;
&lt;br /&gt;
== Explaining asset stages ==&lt;br /&gt;
&lt;br /&gt;
Each asset has 2 stages: registered and used.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Registered&#039;&#039;&#039; is where an asset is loaded into &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;. That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; knows about the existence of these assets, but will not attach them to a document while rendering.&lt;br /&gt;
All assets loaded from joomla.asset.json is at &#039;&#039;&#039;registered&#039;&#039;&#039; stage.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Used&#039;&#039;&#039; is where an asset is enabled via &amp;quot;$wa-&amp;gt;useAsset()&amp;quot; (-&amp;gt;useScript(), -&amp;gt;useStyle(), -&amp;gt;registerAndUseX() etc). That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will attach these assets and their dependencies to a document while rendering.&lt;br /&gt;
&lt;br /&gt;
An asset cannot be used if it was not registered before, this will cause an unknown asset exception.&lt;br /&gt;
&lt;br /&gt;
== Register an asset ==&lt;br /&gt;
&lt;br /&gt;
All known assets loaded and then stored in &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; (to enable/disable an asset item you have to use &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, see next section).&lt;br /&gt;
&lt;br /&gt;
Joomla! will look for next assets definition automatically at runtime (in following order):&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
media/vendor/joomla.asset.json (on first access to WebAssetRegistry)&lt;br /&gt;
media/system/joomla.asset.json&lt;br /&gt;
media/legacy/joomla.asset.json&lt;br /&gt;
media/{com_active_component}/joomla.asset.json (on dispatch the application)&lt;br /&gt;
templates/{active_template}/joomla.asset.json&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And load them to registry of known assets.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Each following assets definition will override asset items from previous assets definition, by item name.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
You can register your own assets definition via &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wr = $wa-&amp;gt;getRegistry();&lt;br /&gt;
$wr-&amp;gt;addRegistryFile(&#039;relative/path/to/your/joomla.asset.json&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To add a custom asset item at runtime:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wr-&amp;gt;add(&#039;script&#039;, new Joomla\CMS\WebAsset\WebAssetItem(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;, [&#039;type&#039; =&amp;gt; &#039;script&#039;]));&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or more simply, using &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The new asset item &#039;&#039;&#039;foobar&#039;&#039;&#039; will be added to the registry of know assets, but will not be attached to a document until your code (a layout, template etc) will request it.&lt;br /&gt;
&lt;br /&gt;
To check whether an asset exists:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
if ($wa-&amp;gt;assetExists(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; exists!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Enabling an asset ==&lt;br /&gt;
All asset management in the current Document handled by &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, which is accessible with &#039;&#039;&#039;$doc-&amp;gt;getWebAssetManager();&#039;&#039;&#039;&lt;br /&gt;
By using AssetManager you can enable or disable needed asset easily in Joomla! through a standard methods.&lt;br /&gt;
&lt;br /&gt;
To enable an asset in the page use the useAsset function, for example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;);&lt;br /&gt;
&lt;br /&gt;
// Or multiple&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;fields.validate&#039;)&lt;br /&gt;
    -&amp;gt;useStyle(&#039;foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add new asset item with dependency and use it&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;, &#039;com_foobar/bar.js&#039;, [], [], [&#039;core&#039;, &#039;foobar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will look to &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; whether the requested asset exists, and will enable it for current Document instance. Otherwise it will throw an UnknownAssetException.&lt;br /&gt;
&lt;br /&gt;
To disable an asset in the page use the disableAsset function. The example below will disable the jquery-noconflict asset from being loaded.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;jquery-noconflict&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If there are any dependencies to the disabled asset, then this asset will be re-enabled automatically, no matter what.&lt;br /&gt;
&lt;br /&gt;
To check whether asset enabled, and the asset state:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
// Checking whether an asset are active (enabled manually or automatically as dependency)&lt;br /&gt;
if ($wa-&amp;gt;isAssetActive(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; is active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// Checking state&lt;br /&gt;
switch($wa-&amp;gt;getAssetState(&#039;script&#039;, &#039;foobar&#039;)){&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_ACTIVE:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled manually&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_DEPENDENCY:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled automatically while resolving dependencies&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	default:&lt;br /&gt;
		var_dump(&#039;not active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Overriding an asset ==&lt;br /&gt;
&lt;br /&gt;
Overriding may be useful when you need to redefine the URI of asset item or its dependencies.&lt;br /&gt;
As already was noted, each of the following assets definition from joomla.asset.json will override asset items from previous assets definitions, by item name.&lt;br /&gt;
That means if you provide joomla.asset.json which contain already loaded asset items, they will be replaced with your items.&lt;br /&gt;
Another way to override in the code is to register an item with the same name.&lt;br /&gt;
Example, we have &amp;quot;foobar&amp;quot; script, that load com_example/foobar.js library, and we want to use CDN for this exact library:&lt;br /&gt;
&lt;br /&gt;
How it defined in the system initially:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To override the URI we define the asset item with &amp;quot;foobar&amp;quot; name in our joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;http://foobar.cdn.blabla/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or, register new asset item with AssetManager:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;http://fobar.cdn.blabla/foobar.js&#039;, [], [], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Working with styles ==&lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Stylesheet files. Stylesheet asset item have a type &amp;quot;style&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.css&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with styles === &lt;br /&gt;
&lt;br /&gt;
AssetManager offers the following methods to work with style files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline style ===&lt;br /&gt;
&lt;br /&gt;
Additionaly to style files, WebAssetManager allows you to add an inline style, and maintain their relation to the file asset.&lt;br /&gt;
Inline styles may be placed directly before the dependency, after the dependency, or as usual after all styles.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrieve the asset item from a registry, or as a dependency to another inline asset. If the name is not specified then a generated name based on a content hash will be used.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline3&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foobar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline4&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset has multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foo.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;bar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline assets may be a dependency to another inline asset, however it is not recommended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may change in the future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Working with scripts == &lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Script files. Script asset item have a type &amp;quot;script&amp;quot;.&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example json definition of ES6 module script, with fallback to legacy:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-as5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core&amp;quot;, &lt;br /&gt;
    &amp;quot;foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with scripts ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with script files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;bar&#039;, &#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;,&#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline script ===&lt;br /&gt;
&lt;br /&gt;
Addittionaly to script files WebAssetManager allow to add an inline script, and maintain their relation to the file asset.&lt;br /&gt;
Inline script may be placed directly before the dependency, after the dependency, or as usual after all scripts.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrive the asset item form a registry, or as dependecy to another inline asset. If name not specified then will be used generated name based on a content hash.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Specify script type&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline5&#039;, [], [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline3&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;foobar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline4&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;module&amp;quot;&amp;gt;content of inline5&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset have a multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script src=&amp;quot;foo.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;bar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline asset may be as dependency to another inline asset, hovewer it is not recomended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may changes in future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
== Working with a web component ==&lt;br /&gt;
&lt;br /&gt;
Joomla! allows you to use [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Components] for your needs. In Joomla! web components are not loaded as regular script, but loaded via Web Component loader so that they are loaded asynchronously. Therefore, a web component asset item must have a flag &amp;quot;webcomponent&amp;quot; set to the boolean &amp;quot;true&amp;quot;.&lt;br /&gt;
In all other aspects, working with web components in AssetManager is the same as working with a &amp;quot;script&amp;quot; asset item.&lt;br /&gt;
&lt;br /&gt;
Example json definition of some web components in joomla.asset.json (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
     &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example with fallback, for browsers that does not support ES6 &amp;quot;module&amp;quot; feature. Note that the legacy script should have &amp;quot;wcpolyfill&amp;quot; dependency, and module script should have dependency from legacy script:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element-es5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;wcpolyfill&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;webcomponent.foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Alternatively you can register them in PHP (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.css&#039;)&lt;br /&gt;
    -&amp;gt;registerScript(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.js&#039;, [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Attach to document:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;webcomponent.foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;webcomponent.foobar&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is preferred to prefix the asset name with &amp;quot;webcomponent.&amp;quot; to make it easily to spot, and distinct it from regular scripts in a layout.&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with web component ===&lt;br /&gt;
&lt;br /&gt;
All methods to work with a web component are the same as methods to work with script asset item.&lt;br /&gt;
&lt;br /&gt;
== Working with a presets ==&lt;br /&gt;
&lt;br /&gt;
&amp;quot;Preset&amp;quot; is a special kind of asset item that hold a list of items that has to be enabled, in same way as direct call of useAsset() to each of item in the list.&lt;br /&gt;
Preset can hold mixed types of assets (script, style, another preset, etc), the type should be provided after # symbol and follows after an asset name, example: foo#style, bar#script.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;preset&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core#script&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#style&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#script&amp;quot;,&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with preset ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with preset items:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach all items from foobar preset to the document&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable all items from foobar preset from being attached&lt;br /&gt;
$wa-&amp;gt;disablePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerPreset(&#039;bar&#039;, &#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUsePreset(&#039;bar&#039;,&#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Advanced: Custom WebAssetItem class ==&lt;br /&gt;
&lt;br /&gt;
The default class for all WebAsset items is &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
You are also allowed to use a custom class, which must implement &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItemInterface&#039;&#039;&#039; or extend &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
A custom class can allow you to do advanced actions, for example, including a script file depending on an active language:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyComExampleAssetItem extends WebAssetItem&lt;br /&gt;
{&lt;br /&gt;
	public function getUri($resolvePath = true): string&lt;br /&gt;
	{&lt;br /&gt;
		$langTag = Factory::getApplication()-&amp;gt;getLanguage()-&amp;gt;getTag();&lt;br /&gt;
		// For script asset use &amp;quot;.js&amp;quot;, for style we would use &amp;quot;.css&amp;quot;&lt;br /&gt;
		$path    = &#039;com_example/bar-&#039; . $langTag . &#039;.js&#039;;&lt;br /&gt;
&lt;br /&gt;
		if ($resolvePath)&lt;br /&gt;
		{&lt;br /&gt;
			// For script asset use &amp;quot;script&amp;quot;, for style we would use &amp;quot;stylesheet&amp;quot;&lt;br /&gt;
			$path = $this-&amp;gt;resolvePath($path, &#039;script&#039;);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		return $path;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Additionally, implementing &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface&#039;&#039;&#039; allows you to add a script options (which may depend on the environment) when your asset is enabled and attached to the Document.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyFancyFoobarAssetItem extends WebAssetItem implements WebAssetAttachBehaviorInterface&lt;br /&gt;
{&lt;br /&gt;
	public function onAttachCallback(Document $doc): void&lt;br /&gt;
	{&lt;br /&gt;
		$user = Factory::getApplication()-&amp;gt;getIdentity();&lt;br /&gt;
		$doc-&amp;gt;addScriptOptions(&#039;com_example.fancyfoobar&#039;, [&#039;userName&#039; =&amp;gt; $user-&amp;gt;username]);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Important note:&#039;&#039;&#039; An asset item that implements &#039;&#039;&#039;WebAssetAttachBehaviorInterface&#039;&#039;&#039; should be enabled before [https://docs.joomla.org/Plugin/Events/System#onBeforeCompileHead onBeforeCompileHead] event, otherwise &#039;onAttachCallback&#039; will be ignored.&lt;br /&gt;
&lt;br /&gt;
=== Defining a custom WebAssetItem class in joomla.asset.json === &lt;br /&gt;
&lt;br /&gt;
In joomla.asset.json you can define which Class should be used with specific AssetItem.&lt;br /&gt;
For this you can use 2 properties &#039;&#039;&#039;namespace&#039;&#039;&#039; and &#039;&#039;&#039;class&#039;&#039;&#039;. &#039;&#039;&#039;namespace&#039;&#039;&#039; can be defined at Root level (then it will be used as default namespace for all Asset items in joomla.asset.json) or in the Item level. For example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;namespace&amp;quot;: &amp;quot;Joomla\Component\Example\WebAsset&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;MyFooBar\Library\Example\WebAsset&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\Component\Example\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;MyFooBar\Library\Example\WebAsset\BarAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If &#039;&#039;&#039;namespace&#039;&#039;&#039; are not defined then by default will be used &#039;&#039;&#039;Joomla\CMS\WebAsset&#039;&#039;&#039;. When &#039;&#039;&#039;namespace&#039;&#039;&#039; is defined but empty, then no namespace will be used, only &#039;&#039;&#039;class&#039;&#039;&#039;. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\CMS\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;BarAssetItem&#039;&#039;&#039; (without namespace).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/117/ru&amp;diff=866255</id>
		<title>Translations:J4.x:Web Assets/117/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/117/ru&amp;diff=866255"/>
		<updated>2022-01-04T11:00:35Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Связанные ресурсы определены в файле JSON, например [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Связанные ресурсы определены в файле JSON, например [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2/build/media_source/system/joomla.asset.json#L14-L21 system/joomla.asset.json#L14-L21]&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866250</id>
		<title>J4.x:Web Assets/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866250"/>
		<updated>2022-01-04T10:59:25Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
== Концепция ==&lt;br /&gt;
&lt;br /&gt;
Во внешнем интерфейсе многие активы (&amp;quot;assets&amp;quot;) связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;br /&gt;
&lt;br /&gt;
== Определение ==&lt;br /&gt;
&lt;br /&gt;
Related assets are defined in a JSON file such as [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2/build/media_source/system/joomla.asset.json#L14-L21 system/joomla.asset.json#L14-L21]&lt;br /&gt;
&lt;br /&gt;
This has a structure of having a schema definition (for validation), name, version, license and then one or more asset definitions. Assets are comprised of a list of js files and css files related to the assets and any dependencies. The dependencies section is just a list of asset names that are required for the asset to function. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;description&amp;quot;: &amp;quot;Joomla CMS&amp;quot;,&lt;br /&gt;
  &amp;quot;license&amp;quot;: &amp;quot;GPL-2.0+&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.css&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.css&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;core&amp;quot;,&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.js&amp;quot;,&lt;br /&gt;
      &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
        &amp;quot;defer&amp;quot;: true,&lt;br /&gt;
        &amp;quot;data-foo&amp;quot;: &amp;quot;bar&amp;quot;&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;source lang=&amp;quot;json&amp;quot; inline&amp;gt;$schema&amp;lt;/source&amp;gt; attribute is a schema definition file that allows you to validate your file using JSON Schema. Read [https://json-schema.org/understanding-json-schema/index.html the official website] for more information on json schema validation works.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Having joomla.asset.json for your extension or template are recommend but not required to WebAssset to work (see next section).&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is not recommended to add an inline asset to a json file, prefer to use a file.&lt;br /&gt;
&lt;br /&gt;
== Explaining asset stages ==&lt;br /&gt;
&lt;br /&gt;
Each asset has 2 stages: registered and used.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Registered&#039;&#039;&#039; is where an asset is loaded into &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;. That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; knows about the existence of these assets, but will not attach them to a document while rendering.&lt;br /&gt;
All assets loaded from joomla.asset.json is at &#039;&#039;&#039;registered&#039;&#039;&#039; stage.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Used&#039;&#039;&#039; is where an asset is enabled via &amp;quot;$wa-&amp;gt;useAsset()&amp;quot; (-&amp;gt;useScript(), -&amp;gt;useStyle(), -&amp;gt;registerAndUseX() etc). That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will attach these assets and their dependencies to a document while rendering.&lt;br /&gt;
&lt;br /&gt;
An asset cannot be used if it was not registered before, this will cause an unknown asset exception.&lt;br /&gt;
&lt;br /&gt;
== Register an asset ==&lt;br /&gt;
&lt;br /&gt;
All known assets loaded and then stored in &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; (to enable/disable an asset item you have to use &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, see next section).&lt;br /&gt;
&lt;br /&gt;
Joomla! will look for next assets definition automatically at runtime (in following order):&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
media/vendor/joomla.asset.json (on first access to WebAssetRegistry)&lt;br /&gt;
media/system/joomla.asset.json&lt;br /&gt;
media/legacy/joomla.asset.json&lt;br /&gt;
media/{com_active_component}/joomla.asset.json (on dispatch the application)&lt;br /&gt;
templates/{active_template}/joomla.asset.json&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And load them to registry of known assets.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Each following assets definition will override asset items from previous assets definition, by item name.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
You can register your own assets definition via &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wr = $wa-&amp;gt;getRegistry();&lt;br /&gt;
$wr-&amp;gt;addRegistryFile(&#039;relative/path/to/your/joomla.asset.json&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To add a custom asset item at runtime:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wr-&amp;gt;add(&#039;script&#039;, new Joomla\CMS\WebAsset\WebAssetItem(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;, [&#039;type&#039; =&amp;gt; &#039;script&#039;]));&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or more simply, using &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The new asset item &#039;&#039;&#039;foobar&#039;&#039;&#039; will be added to the registry of know assets, but will not be attached to a document until your code (a layout, template etc) will request it.&lt;br /&gt;
&lt;br /&gt;
To check whether an asset exists:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
if ($wa-&amp;gt;assetExists(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; exists!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Enabling an asset ==&lt;br /&gt;
All asset management in the current Document handled by &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, which is accessible with &#039;&#039;&#039;$doc-&amp;gt;getWebAssetManager();&#039;&#039;&#039;&lt;br /&gt;
By using AssetManager you can enable or disable needed asset easily in Joomla! through a standard methods.&lt;br /&gt;
&lt;br /&gt;
To enable an asset in the page use the useAsset function, for example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;);&lt;br /&gt;
&lt;br /&gt;
// Or multiple&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;fields.validate&#039;)&lt;br /&gt;
    -&amp;gt;useStyle(&#039;foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add new asset item with dependency and use it&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;, &#039;com_foobar/bar.js&#039;, [], [], [&#039;core&#039;, &#039;foobar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will look to &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; whether the requested asset exists, and will enable it for current Document instance. Otherwise it will throw an UnknownAssetException.&lt;br /&gt;
&lt;br /&gt;
To disable an asset in the page use the disableAsset function. The example below will disable the jquery-noconflict asset from being loaded.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;jquery-noconflict&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If there are any dependencies to the disabled asset, then this asset will be re-enabled automatically, no matter what.&lt;br /&gt;
&lt;br /&gt;
To check whether asset enabled, and the asset state:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
// Checking whether an asset are active (enabled manually or automatically as dependency)&lt;br /&gt;
if ($wa-&amp;gt;isAssetActive(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; is active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// Checking state&lt;br /&gt;
switch($wa-&amp;gt;getAssetState(&#039;script&#039;, &#039;foobar&#039;)){&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_ACTIVE:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled manually&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_DEPENDENCY:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled automatically while resolving dependencies&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	default:&lt;br /&gt;
		var_dump(&#039;not active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Overriding an asset ==&lt;br /&gt;
&lt;br /&gt;
Overriding may be useful when you need to redefine the URI of asset item or its dependencies.&lt;br /&gt;
As already was noted, each of the following assets definition from joomla.asset.json will override asset items from previous assets definitions, by item name.&lt;br /&gt;
That means if you provide joomla.asset.json which contain already loaded asset items, they will be replaced with your items.&lt;br /&gt;
Another way to override in the code is to register an item with the same name.&lt;br /&gt;
Example, we have &amp;quot;foobar&amp;quot; script, that load com_example/foobar.js library, and we want to use CDN for this exact library:&lt;br /&gt;
&lt;br /&gt;
How it defined in the system initially:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To override the URI we define the asset item with &amp;quot;foobar&amp;quot; name in our joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;http://foobar.cdn.blabla/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or, register new asset item with AssetManager:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;http://fobar.cdn.blabla/foobar.js&#039;, [], [], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Working with styles ==&lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Stylesheet files. Stylesheet asset item have a type &amp;quot;style&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.css&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with styles === &lt;br /&gt;
&lt;br /&gt;
AssetManager offers the following methods to work with style files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline style ===&lt;br /&gt;
&lt;br /&gt;
Additionaly to style files, WebAssetManager allows you to add an inline style, and maintain their relation to the file asset.&lt;br /&gt;
Inline styles may be placed directly before the dependency, after the dependency, or as usual after all styles.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrieve the asset item from a registry, or as a dependency to another inline asset. If the name is not specified then a generated name based on a content hash will be used.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline3&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foobar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline4&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset has multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foo.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;bar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline assets may be a dependency to another inline asset, however it is not recommended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may change in the future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Working with scripts == &lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Script files. Script asset item have a type &amp;quot;script&amp;quot;.&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example json definition of ES6 module script, with fallback to legacy:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-as5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core&amp;quot;, &lt;br /&gt;
    &amp;quot;foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with scripts ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with script files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;bar&#039;, &#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;,&#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline script ===&lt;br /&gt;
&lt;br /&gt;
Addittionaly to script files WebAssetManager allow to add an inline script, and maintain their relation to the file asset.&lt;br /&gt;
Inline script may be placed directly before the dependency, after the dependency, or as usual after all scripts.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrive the asset item form a registry, or as dependecy to another inline asset. If name not specified then will be used generated name based on a content hash.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Specify script type&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline5&#039;, [], [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline3&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;foobar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline4&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;module&amp;quot;&amp;gt;content of inline5&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset have a multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script src=&amp;quot;foo.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;bar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline asset may be as dependency to another inline asset, hovewer it is not recomended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may changes in future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
== Working with a web component ==&lt;br /&gt;
&lt;br /&gt;
Joomla! allows you to use [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Components] for your needs. In Joomla! web components are not loaded as regular script, but loaded via Web Component loader so that they are loaded asynchronously. Therefore, a web component asset item must have a flag &amp;quot;webcomponent&amp;quot; set to the boolean &amp;quot;true&amp;quot;.&lt;br /&gt;
In all other aspects, working with web components in AssetManager is the same as working with a &amp;quot;script&amp;quot; asset item.&lt;br /&gt;
&lt;br /&gt;
Example json definition of some web components in joomla.asset.json (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
     &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example with fallback, for browsers that does not support ES6 &amp;quot;module&amp;quot; feature. Note that the legacy script should have &amp;quot;wcpolyfill&amp;quot; dependency, and module script should have dependency from legacy script:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element-es5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;wcpolyfill&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;webcomponent.foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Alternatively you can register them in PHP (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.css&#039;)&lt;br /&gt;
    -&amp;gt;registerScript(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.js&#039;, [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Attach to document:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;webcomponent.foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;webcomponent.foobar&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is preferred to prefix the asset name with &amp;quot;webcomponent.&amp;quot; to make it easily to spot, and distinct it from regular scripts in a layout.&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with web component ===&lt;br /&gt;
&lt;br /&gt;
All methods to work with a web component are the same as methods to work with script asset item.&lt;br /&gt;
&lt;br /&gt;
== Working with a presets ==&lt;br /&gt;
&lt;br /&gt;
&amp;quot;Preset&amp;quot; is a special kind of asset item that hold a list of items that has to be enabled, in same way as direct call of useAsset() to each of item in the list.&lt;br /&gt;
Preset can hold mixed types of assets (script, style, another preset, etc), the type should be provided after # symbol and follows after an asset name, example: foo#style, bar#script.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;preset&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core#script&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#style&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#script&amp;quot;,&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with preset ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with preset items:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach all items from foobar preset to the document&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable all items from foobar preset from being attached&lt;br /&gt;
$wa-&amp;gt;disablePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerPreset(&#039;bar&#039;, &#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUsePreset(&#039;bar&#039;,&#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Advanced: Custom WebAssetItem class ==&lt;br /&gt;
&lt;br /&gt;
The default class for all WebAsset items is &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
You are also allowed to use a custom class, which must implement &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItemInterface&#039;&#039;&#039; or extend &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
A custom class can allow you to do advanced actions, for example, including a script file depending on an active language:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyComExampleAssetItem extends WebAssetItem&lt;br /&gt;
{&lt;br /&gt;
	public function getUri($resolvePath = true): string&lt;br /&gt;
	{&lt;br /&gt;
		$langTag = Factory::getApplication()-&amp;gt;getLanguage()-&amp;gt;getTag();&lt;br /&gt;
		// For script asset use &amp;quot;.js&amp;quot;, for style we would use &amp;quot;.css&amp;quot;&lt;br /&gt;
		$path    = &#039;com_example/bar-&#039; . $langTag . &#039;.js&#039;;&lt;br /&gt;
&lt;br /&gt;
		if ($resolvePath)&lt;br /&gt;
		{&lt;br /&gt;
			// For script asset use &amp;quot;script&amp;quot;, for style we would use &amp;quot;stylesheet&amp;quot;&lt;br /&gt;
			$path = $this-&amp;gt;resolvePath($path, &#039;script&#039;);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		return $path;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Additionally, implementing &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface&#039;&#039;&#039; allows you to add a script options (which may depend on the environment) when your asset is enabled and attached to the Document.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyFancyFoobarAssetItem extends WebAssetItem implements WebAssetAttachBehaviorInterface&lt;br /&gt;
{&lt;br /&gt;
	public function onAttachCallback(Document $doc): void&lt;br /&gt;
	{&lt;br /&gt;
		$user = Factory::getApplication()-&amp;gt;getIdentity();&lt;br /&gt;
		$doc-&amp;gt;addScriptOptions(&#039;com_example.fancyfoobar&#039;, [&#039;userName&#039; =&amp;gt; $user-&amp;gt;username]);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Important note:&#039;&#039;&#039; An asset item that implements &#039;&#039;&#039;WebAssetAttachBehaviorInterface&#039;&#039;&#039; should be enabled before [https://docs.joomla.org/Plugin/Events/System#onBeforeCompileHead onBeforeCompileHead] event, otherwise &#039;onAttachCallback&#039; will be ignored.&lt;br /&gt;
&lt;br /&gt;
=== Defining a custom WebAssetItem class in joomla.asset.json === &lt;br /&gt;
&lt;br /&gt;
In joomla.asset.json you can define which Class should be used with specific AssetItem.&lt;br /&gt;
For this you can use 2 properties &#039;&#039;&#039;namespace&#039;&#039;&#039; and &#039;&#039;&#039;class&#039;&#039;&#039;. &#039;&#039;&#039;namespace&#039;&#039;&#039; can be defined at Root level (then it will be used as default namespace for all Asset items in joomla.asset.json) or in the Item level. For example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;namespace&amp;quot;: &amp;quot;Joomla\Component\Example\WebAsset&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;MyFooBar\Library\Example\WebAsset&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\Component\Example\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;MyFooBar\Library\Example\WebAsset\BarAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If &#039;&#039;&#039;namespace&#039;&#039;&#039; are not defined then by default will be used &#039;&#039;&#039;Joomla\CMS\WebAsset&#039;&#039;&#039;. When &#039;&#039;&#039;namespace&#039;&#039;&#039; is defined but empty, then no namespace will be used, only &#039;&#039;&#039;class&#039;&#039;&#039;. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\CMS\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;BarAssetItem&#039;&#039;&#039; (without namespace).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/115/ru&amp;diff=866249</id>
		<title>Translations:J4.x:Web Assets/115/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/115/ru&amp;diff=866249"/>
		<updated>2022-01-04T10:59:20Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Во внешнем интерфейсе многие активы (&amp;quot;assets&amp;quot;) связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866212</id>
		<title>J4.x:Web Assets/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866212"/>
		<updated>2022-01-04T10:57:59Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;== Определение ==&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
== Концепция ==&lt;br /&gt;
&lt;br /&gt;
Во внешнем интерфейсе многие активы связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;br /&gt;
&lt;br /&gt;
== Определение ==&lt;br /&gt;
&lt;br /&gt;
Related assets are defined in a JSON file such as [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2/build/media_source/system/joomla.asset.json#L14-L21 system/joomla.asset.json#L14-L21]&lt;br /&gt;
&lt;br /&gt;
This has a structure of having a schema definition (for validation), name, version, license and then one or more asset definitions. Assets are comprised of a list of js files and css files related to the assets and any dependencies. The dependencies section is just a list of asset names that are required for the asset to function. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;description&amp;quot;: &amp;quot;Joomla CMS&amp;quot;,&lt;br /&gt;
  &amp;quot;license&amp;quot;: &amp;quot;GPL-2.0+&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.css&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.css&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;core&amp;quot;,&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.js&amp;quot;,&lt;br /&gt;
      &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
        &amp;quot;defer&amp;quot;: true,&lt;br /&gt;
        &amp;quot;data-foo&amp;quot;: &amp;quot;bar&amp;quot;&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;source lang=&amp;quot;json&amp;quot; inline&amp;gt;$schema&amp;lt;/source&amp;gt; attribute is a schema definition file that allows you to validate your file using JSON Schema. Read [https://json-schema.org/understanding-json-schema/index.html the official website] for more information on json schema validation works.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Having joomla.asset.json for your extension or template are recommend but not required to WebAssset to work (see next section).&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is not recommended to add an inline asset to a json file, prefer to use a file.&lt;br /&gt;
&lt;br /&gt;
== Explaining asset stages ==&lt;br /&gt;
&lt;br /&gt;
Each asset has 2 stages: registered and used.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Registered&#039;&#039;&#039; is where an asset is loaded into &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;. That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; knows about the existence of these assets, but will not attach them to a document while rendering.&lt;br /&gt;
All assets loaded from joomla.asset.json is at &#039;&#039;&#039;registered&#039;&#039;&#039; stage.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Used&#039;&#039;&#039; is where an asset is enabled via &amp;quot;$wa-&amp;gt;useAsset()&amp;quot; (-&amp;gt;useScript(), -&amp;gt;useStyle(), -&amp;gt;registerAndUseX() etc). That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will attach these assets and their dependencies to a document while rendering.&lt;br /&gt;
&lt;br /&gt;
An asset cannot be used if it was not registered before, this will cause an unknown asset exception.&lt;br /&gt;
&lt;br /&gt;
== Register an asset ==&lt;br /&gt;
&lt;br /&gt;
All known assets loaded and then stored in &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; (to enable/disable an asset item you have to use &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, see next section).&lt;br /&gt;
&lt;br /&gt;
Joomla! will look for next assets definition automatically at runtime (in following order):&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
media/vendor/joomla.asset.json (on first access to WebAssetRegistry)&lt;br /&gt;
media/system/joomla.asset.json&lt;br /&gt;
media/legacy/joomla.asset.json&lt;br /&gt;
media/{com_active_component}/joomla.asset.json (on dispatch the application)&lt;br /&gt;
templates/{active_template}/joomla.asset.json&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And load them to registry of known assets.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Each following assets definition will override asset items from previous assets definition, by item name.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
You can register your own assets definition via &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wr = $wa-&amp;gt;getRegistry();&lt;br /&gt;
$wr-&amp;gt;addRegistryFile(&#039;relative/path/to/your/joomla.asset.json&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To add a custom asset item at runtime:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wr-&amp;gt;add(&#039;script&#039;, new Joomla\CMS\WebAsset\WebAssetItem(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;, [&#039;type&#039; =&amp;gt; &#039;script&#039;]));&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or more simply, using &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The new asset item &#039;&#039;&#039;foobar&#039;&#039;&#039; will be added to the registry of know assets, but will not be attached to a document until your code (a layout, template etc) will request it.&lt;br /&gt;
&lt;br /&gt;
To check whether an asset exists:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
if ($wa-&amp;gt;assetExists(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; exists!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Enabling an asset ==&lt;br /&gt;
All asset management in the current Document handled by &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, which is accessible with &#039;&#039;&#039;$doc-&amp;gt;getWebAssetManager();&#039;&#039;&#039;&lt;br /&gt;
By using AssetManager you can enable or disable needed asset easily in Joomla! through a standard methods.&lt;br /&gt;
&lt;br /&gt;
To enable an asset in the page use the useAsset function, for example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;);&lt;br /&gt;
&lt;br /&gt;
// Or multiple&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;fields.validate&#039;)&lt;br /&gt;
    -&amp;gt;useStyle(&#039;foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add new asset item with dependency and use it&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;, &#039;com_foobar/bar.js&#039;, [], [], [&#039;core&#039;, &#039;foobar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will look to &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; whether the requested asset exists, and will enable it for current Document instance. Otherwise it will throw an UnknownAssetException.&lt;br /&gt;
&lt;br /&gt;
To disable an asset in the page use the disableAsset function. The example below will disable the jquery-noconflict asset from being loaded.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;jquery-noconflict&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If there are any dependencies to the disabled asset, then this asset will be re-enabled automatically, no matter what.&lt;br /&gt;
&lt;br /&gt;
To check whether asset enabled, and the asset state:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
// Checking whether an asset are active (enabled manually or automatically as dependency)&lt;br /&gt;
if ($wa-&amp;gt;isAssetActive(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; is active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// Checking state&lt;br /&gt;
switch($wa-&amp;gt;getAssetState(&#039;script&#039;, &#039;foobar&#039;)){&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_ACTIVE:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled manually&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_DEPENDENCY:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled automatically while resolving dependencies&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	default:&lt;br /&gt;
		var_dump(&#039;not active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Overriding an asset ==&lt;br /&gt;
&lt;br /&gt;
Overriding may be useful when you need to redefine the URI of asset item or its dependencies.&lt;br /&gt;
As already was noted, each of the following assets definition from joomla.asset.json will override asset items from previous assets definitions, by item name.&lt;br /&gt;
That means if you provide joomla.asset.json which contain already loaded asset items, they will be replaced with your items.&lt;br /&gt;
Another way to override in the code is to register an item with the same name.&lt;br /&gt;
Example, we have &amp;quot;foobar&amp;quot; script, that load com_example/foobar.js library, and we want to use CDN for this exact library:&lt;br /&gt;
&lt;br /&gt;
How it defined in the system initially:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To override the URI we define the asset item with &amp;quot;foobar&amp;quot; name in our joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;http://foobar.cdn.blabla/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or, register new asset item with AssetManager:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;http://fobar.cdn.blabla/foobar.js&#039;, [], [], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Working with styles ==&lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Stylesheet files. Stylesheet asset item have a type &amp;quot;style&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.css&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with styles === &lt;br /&gt;
&lt;br /&gt;
AssetManager offers the following methods to work with style files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline style ===&lt;br /&gt;
&lt;br /&gt;
Additionaly to style files, WebAssetManager allows you to add an inline style, and maintain their relation to the file asset.&lt;br /&gt;
Inline styles may be placed directly before the dependency, after the dependency, or as usual after all styles.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrieve the asset item from a registry, or as a dependency to another inline asset. If the name is not specified then a generated name based on a content hash will be used.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline3&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foobar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline4&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset has multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foo.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;bar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline assets may be a dependency to another inline asset, however it is not recommended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may change in the future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Working with scripts == &lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Script files. Script asset item have a type &amp;quot;script&amp;quot;.&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example json definition of ES6 module script, with fallback to legacy:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-as5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core&amp;quot;, &lt;br /&gt;
    &amp;quot;foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with scripts ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with script files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;bar&#039;, &#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;,&#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline script ===&lt;br /&gt;
&lt;br /&gt;
Addittionaly to script files WebAssetManager allow to add an inline script, and maintain their relation to the file asset.&lt;br /&gt;
Inline script may be placed directly before the dependency, after the dependency, or as usual after all scripts.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrive the asset item form a registry, or as dependecy to another inline asset. If name not specified then will be used generated name based on a content hash.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Specify script type&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline5&#039;, [], [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline3&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;foobar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline4&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;module&amp;quot;&amp;gt;content of inline5&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset have a multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script src=&amp;quot;foo.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;bar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline asset may be as dependency to another inline asset, hovewer it is not recomended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may changes in future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
== Working with a web component ==&lt;br /&gt;
&lt;br /&gt;
Joomla! allows you to use [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Components] for your needs. In Joomla! web components are not loaded as regular script, but loaded via Web Component loader so that they are loaded asynchronously. Therefore, a web component asset item must have a flag &amp;quot;webcomponent&amp;quot; set to the boolean &amp;quot;true&amp;quot;.&lt;br /&gt;
In all other aspects, working with web components in AssetManager is the same as working with a &amp;quot;script&amp;quot; asset item.&lt;br /&gt;
&lt;br /&gt;
Example json definition of some web components in joomla.asset.json (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
     &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example with fallback, for browsers that does not support ES6 &amp;quot;module&amp;quot; feature. Note that the legacy script should have &amp;quot;wcpolyfill&amp;quot; dependency, and module script should have dependency from legacy script:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element-es5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;wcpolyfill&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;webcomponent.foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Alternatively you can register them in PHP (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.css&#039;)&lt;br /&gt;
    -&amp;gt;registerScript(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.js&#039;, [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Attach to document:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;webcomponent.foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;webcomponent.foobar&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is preferred to prefix the asset name with &amp;quot;webcomponent.&amp;quot; to make it easily to spot, and distinct it from regular scripts in a layout.&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with web component ===&lt;br /&gt;
&lt;br /&gt;
All methods to work with a web component are the same as methods to work with script asset item.&lt;br /&gt;
&lt;br /&gt;
== Working with a presets ==&lt;br /&gt;
&lt;br /&gt;
&amp;quot;Preset&amp;quot; is a special kind of asset item that hold a list of items that has to be enabled, in same way as direct call of useAsset() to each of item in the list.&lt;br /&gt;
Preset can hold mixed types of assets (script, style, another preset, etc), the type should be provided after # symbol and follows after an asset name, example: foo#style, bar#script.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;preset&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core#script&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#style&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#script&amp;quot;,&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with preset ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with preset items:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach all items from foobar preset to the document&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable all items from foobar preset from being attached&lt;br /&gt;
$wa-&amp;gt;disablePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerPreset(&#039;bar&#039;, &#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUsePreset(&#039;bar&#039;,&#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Advanced: Custom WebAssetItem class ==&lt;br /&gt;
&lt;br /&gt;
The default class for all WebAsset items is &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
You are also allowed to use a custom class, which must implement &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItemInterface&#039;&#039;&#039; or extend &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
A custom class can allow you to do advanced actions, for example, including a script file depending on an active language:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyComExampleAssetItem extends WebAssetItem&lt;br /&gt;
{&lt;br /&gt;
	public function getUri($resolvePath = true): string&lt;br /&gt;
	{&lt;br /&gt;
		$langTag = Factory::getApplication()-&amp;gt;getLanguage()-&amp;gt;getTag();&lt;br /&gt;
		// For script asset use &amp;quot;.js&amp;quot;, for style we would use &amp;quot;.css&amp;quot;&lt;br /&gt;
		$path    = &#039;com_example/bar-&#039; . $langTag . &#039;.js&#039;;&lt;br /&gt;
&lt;br /&gt;
		if ($resolvePath)&lt;br /&gt;
		{&lt;br /&gt;
			// For script asset use &amp;quot;script&amp;quot;, for style we would use &amp;quot;stylesheet&amp;quot;&lt;br /&gt;
			$path = $this-&amp;gt;resolvePath($path, &#039;script&#039;);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		return $path;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Additionally, implementing &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface&#039;&#039;&#039; allows you to add a script options (which may depend on the environment) when your asset is enabled and attached to the Document.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyFancyFoobarAssetItem extends WebAssetItem implements WebAssetAttachBehaviorInterface&lt;br /&gt;
{&lt;br /&gt;
	public function onAttachCallback(Document $doc): void&lt;br /&gt;
	{&lt;br /&gt;
		$user = Factory::getApplication()-&amp;gt;getIdentity();&lt;br /&gt;
		$doc-&amp;gt;addScriptOptions(&#039;com_example.fancyfoobar&#039;, [&#039;userName&#039; =&amp;gt; $user-&amp;gt;username]);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Important note:&#039;&#039;&#039; An asset item that implements &#039;&#039;&#039;WebAssetAttachBehaviorInterface&#039;&#039;&#039; should be enabled before [https://docs.joomla.org/Plugin/Events/System#onBeforeCompileHead onBeforeCompileHead] event, otherwise &#039;onAttachCallback&#039; will be ignored.&lt;br /&gt;
&lt;br /&gt;
=== Defining a custom WebAssetItem class in joomla.asset.json === &lt;br /&gt;
&lt;br /&gt;
In joomla.asset.json you can define which Class should be used with specific AssetItem.&lt;br /&gt;
For this you can use 2 properties &#039;&#039;&#039;namespace&#039;&#039;&#039; and &#039;&#039;&#039;class&#039;&#039;&#039;. &#039;&#039;&#039;namespace&#039;&#039;&#039; can be defined at Root level (then it will be used as default namespace for all Asset items in joomla.asset.json) or in the Item level. For example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;namespace&amp;quot;: &amp;quot;Joomla\Component\Example\WebAsset&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;MyFooBar\Library\Example\WebAsset&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\Component\Example\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;MyFooBar\Library\Example\WebAsset\BarAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If &#039;&#039;&#039;namespace&#039;&#039;&#039; are not defined then by default will be used &#039;&#039;&#039;Joomla\CMS\WebAsset&#039;&#039;&#039;. When &#039;&#039;&#039;namespace&#039;&#039;&#039; is defined but empty, then no namespace will be used, only &#039;&#039;&#039;class&#039;&#039;&#039;. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\CMS\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;BarAssetItem&#039;&#039;&#039; (without namespace).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/116/ru&amp;diff=866211</id>
		<title>Translations:J4.x:Web Assets/116/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/116/ru&amp;diff=866211"/>
		<updated>2022-01-04T10:57:54Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;== Определение ==&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== Определение ==&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866210</id>
		<title>J4.x:Web Assets/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866210"/>
		<updated>2022-01-04T10:57:16Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Во внешнем интерфейсе многие активы связаны. Например, наш скрипт keepalive зависит от файла core.js дл...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
== Концепция ==&lt;br /&gt;
&lt;br /&gt;
Во внешнем интерфейсе многие активы связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;br /&gt;
&lt;br /&gt;
== Definition ==&lt;br /&gt;
&lt;br /&gt;
Related assets are defined in a JSON file such as [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2/build/media_source/system/joomla.asset.json#L14-L21 system/joomla.asset.json#L14-L21]&lt;br /&gt;
&lt;br /&gt;
This has a structure of having a schema definition (for validation), name, version, license and then one or more asset definitions. Assets are comprised of a list of js files and css files related to the assets and any dependencies. The dependencies section is just a list of asset names that are required for the asset to function. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;description&amp;quot;: &amp;quot;Joomla CMS&amp;quot;,&lt;br /&gt;
  &amp;quot;license&amp;quot;: &amp;quot;GPL-2.0+&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.css&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.css&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;core&amp;quot;,&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.js&amp;quot;,&lt;br /&gt;
      &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
        &amp;quot;defer&amp;quot;: true,&lt;br /&gt;
        &amp;quot;data-foo&amp;quot;: &amp;quot;bar&amp;quot;&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;source lang=&amp;quot;json&amp;quot; inline&amp;gt;$schema&amp;lt;/source&amp;gt; attribute is a schema definition file that allows you to validate your file using JSON Schema. Read [https://json-schema.org/understanding-json-schema/index.html the official website] for more information on json schema validation works.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Having joomla.asset.json for your extension or template are recommend but not required to WebAssset to work (see next section).&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is not recommended to add an inline asset to a json file, prefer to use a file.&lt;br /&gt;
&lt;br /&gt;
== Explaining asset stages ==&lt;br /&gt;
&lt;br /&gt;
Each asset has 2 stages: registered and used.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Registered&#039;&#039;&#039; is where an asset is loaded into &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;. That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; knows about the existence of these assets, but will not attach them to a document while rendering.&lt;br /&gt;
All assets loaded from joomla.asset.json is at &#039;&#039;&#039;registered&#039;&#039;&#039; stage.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Used&#039;&#039;&#039; is where an asset is enabled via &amp;quot;$wa-&amp;gt;useAsset()&amp;quot; (-&amp;gt;useScript(), -&amp;gt;useStyle(), -&amp;gt;registerAndUseX() etc). That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will attach these assets and their dependencies to a document while rendering.&lt;br /&gt;
&lt;br /&gt;
An asset cannot be used if it was not registered before, this will cause an unknown asset exception.&lt;br /&gt;
&lt;br /&gt;
== Register an asset ==&lt;br /&gt;
&lt;br /&gt;
All known assets loaded and then stored in &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; (to enable/disable an asset item you have to use &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, see next section).&lt;br /&gt;
&lt;br /&gt;
Joomla! will look for next assets definition automatically at runtime (in following order):&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
media/vendor/joomla.asset.json (on first access to WebAssetRegistry)&lt;br /&gt;
media/system/joomla.asset.json&lt;br /&gt;
media/legacy/joomla.asset.json&lt;br /&gt;
media/{com_active_component}/joomla.asset.json (on dispatch the application)&lt;br /&gt;
templates/{active_template}/joomla.asset.json&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And load them to registry of known assets.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Each following assets definition will override asset items from previous assets definition, by item name.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
You can register your own assets definition via &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wr = $wa-&amp;gt;getRegistry();&lt;br /&gt;
$wr-&amp;gt;addRegistryFile(&#039;relative/path/to/your/joomla.asset.json&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To add a custom asset item at runtime:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wr-&amp;gt;add(&#039;script&#039;, new Joomla\CMS\WebAsset\WebAssetItem(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;, [&#039;type&#039; =&amp;gt; &#039;script&#039;]));&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or more simply, using &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The new asset item &#039;&#039;&#039;foobar&#039;&#039;&#039; will be added to the registry of know assets, but will not be attached to a document until your code (a layout, template etc) will request it.&lt;br /&gt;
&lt;br /&gt;
To check whether an asset exists:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
if ($wa-&amp;gt;assetExists(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; exists!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Enabling an asset ==&lt;br /&gt;
All asset management in the current Document handled by &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, which is accessible with &#039;&#039;&#039;$doc-&amp;gt;getWebAssetManager();&#039;&#039;&#039;&lt;br /&gt;
By using AssetManager you can enable or disable needed asset easily in Joomla! through a standard methods.&lt;br /&gt;
&lt;br /&gt;
To enable an asset in the page use the useAsset function, for example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;);&lt;br /&gt;
&lt;br /&gt;
// Or multiple&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;fields.validate&#039;)&lt;br /&gt;
    -&amp;gt;useStyle(&#039;foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add new asset item with dependency and use it&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;, &#039;com_foobar/bar.js&#039;, [], [], [&#039;core&#039;, &#039;foobar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will look to &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; whether the requested asset exists, and will enable it for current Document instance. Otherwise it will throw an UnknownAssetException.&lt;br /&gt;
&lt;br /&gt;
To disable an asset in the page use the disableAsset function. The example below will disable the jquery-noconflict asset from being loaded.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;jquery-noconflict&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If there are any dependencies to the disabled asset, then this asset will be re-enabled automatically, no matter what.&lt;br /&gt;
&lt;br /&gt;
To check whether asset enabled, and the asset state:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
// Checking whether an asset are active (enabled manually or automatically as dependency)&lt;br /&gt;
if ($wa-&amp;gt;isAssetActive(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; is active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// Checking state&lt;br /&gt;
switch($wa-&amp;gt;getAssetState(&#039;script&#039;, &#039;foobar&#039;)){&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_ACTIVE:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled manually&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_DEPENDENCY:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled automatically while resolving dependencies&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	default:&lt;br /&gt;
		var_dump(&#039;not active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Overriding an asset ==&lt;br /&gt;
&lt;br /&gt;
Overriding may be useful when you need to redefine the URI of asset item or its dependencies.&lt;br /&gt;
As already was noted, each of the following assets definition from joomla.asset.json will override asset items from previous assets definitions, by item name.&lt;br /&gt;
That means if you provide joomla.asset.json which contain already loaded asset items, they will be replaced with your items.&lt;br /&gt;
Another way to override in the code is to register an item with the same name.&lt;br /&gt;
Example, we have &amp;quot;foobar&amp;quot; script, that load com_example/foobar.js library, and we want to use CDN for this exact library:&lt;br /&gt;
&lt;br /&gt;
How it defined in the system initially:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To override the URI we define the asset item with &amp;quot;foobar&amp;quot; name in our joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;http://foobar.cdn.blabla/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or, register new asset item with AssetManager:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;http://fobar.cdn.blabla/foobar.js&#039;, [], [], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Working with styles ==&lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Stylesheet files. Stylesheet asset item have a type &amp;quot;style&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.css&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with styles === &lt;br /&gt;
&lt;br /&gt;
AssetManager offers the following methods to work with style files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline style ===&lt;br /&gt;
&lt;br /&gt;
Additionaly to style files, WebAssetManager allows you to add an inline style, and maintain their relation to the file asset.&lt;br /&gt;
Inline styles may be placed directly before the dependency, after the dependency, or as usual after all styles.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrieve the asset item from a registry, or as a dependency to another inline asset. If the name is not specified then a generated name based on a content hash will be used.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline3&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foobar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline4&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset has multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foo.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;bar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline assets may be a dependency to another inline asset, however it is not recommended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may change in the future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Working with scripts == &lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Script files. Script asset item have a type &amp;quot;script&amp;quot;.&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example json definition of ES6 module script, with fallback to legacy:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-as5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core&amp;quot;, &lt;br /&gt;
    &amp;quot;foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with scripts ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with script files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;bar&#039;, &#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;,&#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline script ===&lt;br /&gt;
&lt;br /&gt;
Addittionaly to script files WebAssetManager allow to add an inline script, and maintain their relation to the file asset.&lt;br /&gt;
Inline script may be placed directly before the dependency, after the dependency, or as usual after all scripts.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrive the asset item form a registry, or as dependecy to another inline asset. If name not specified then will be used generated name based on a content hash.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Specify script type&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline5&#039;, [], [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline3&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;foobar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline4&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;module&amp;quot;&amp;gt;content of inline5&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset have a multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script src=&amp;quot;foo.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;bar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline asset may be as dependency to another inline asset, hovewer it is not recomended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may changes in future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
== Working with a web component ==&lt;br /&gt;
&lt;br /&gt;
Joomla! allows you to use [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Components] for your needs. In Joomla! web components are not loaded as regular script, but loaded via Web Component loader so that they are loaded asynchronously. Therefore, a web component asset item must have a flag &amp;quot;webcomponent&amp;quot; set to the boolean &amp;quot;true&amp;quot;.&lt;br /&gt;
In all other aspects, working with web components in AssetManager is the same as working with a &amp;quot;script&amp;quot; asset item.&lt;br /&gt;
&lt;br /&gt;
Example json definition of some web components in joomla.asset.json (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
     &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example with fallback, for browsers that does not support ES6 &amp;quot;module&amp;quot; feature. Note that the legacy script should have &amp;quot;wcpolyfill&amp;quot; dependency, and module script should have dependency from legacy script:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element-es5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;wcpolyfill&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;webcomponent.foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Alternatively you can register them in PHP (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.css&#039;)&lt;br /&gt;
    -&amp;gt;registerScript(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.js&#039;, [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Attach to document:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;webcomponent.foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;webcomponent.foobar&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is preferred to prefix the asset name with &amp;quot;webcomponent.&amp;quot; to make it easily to spot, and distinct it from regular scripts in a layout.&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with web component ===&lt;br /&gt;
&lt;br /&gt;
All methods to work with a web component are the same as methods to work with script asset item.&lt;br /&gt;
&lt;br /&gt;
== Working with a presets ==&lt;br /&gt;
&lt;br /&gt;
&amp;quot;Preset&amp;quot; is a special kind of asset item that hold a list of items that has to be enabled, in same way as direct call of useAsset() to each of item in the list.&lt;br /&gt;
Preset can hold mixed types of assets (script, style, another preset, etc), the type should be provided after # symbol and follows after an asset name, example: foo#style, bar#script.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;preset&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core#script&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#style&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#script&amp;quot;,&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with preset ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with preset items:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach all items from foobar preset to the document&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable all items from foobar preset from being attached&lt;br /&gt;
$wa-&amp;gt;disablePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerPreset(&#039;bar&#039;, &#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUsePreset(&#039;bar&#039;,&#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Advanced: Custom WebAssetItem class ==&lt;br /&gt;
&lt;br /&gt;
The default class for all WebAsset items is &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
You are also allowed to use a custom class, which must implement &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItemInterface&#039;&#039;&#039; or extend &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
A custom class can allow you to do advanced actions, for example, including a script file depending on an active language:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyComExampleAssetItem extends WebAssetItem&lt;br /&gt;
{&lt;br /&gt;
	public function getUri($resolvePath = true): string&lt;br /&gt;
	{&lt;br /&gt;
		$langTag = Factory::getApplication()-&amp;gt;getLanguage()-&amp;gt;getTag();&lt;br /&gt;
		// For script asset use &amp;quot;.js&amp;quot;, for style we would use &amp;quot;.css&amp;quot;&lt;br /&gt;
		$path    = &#039;com_example/bar-&#039; . $langTag . &#039;.js&#039;;&lt;br /&gt;
&lt;br /&gt;
		if ($resolvePath)&lt;br /&gt;
		{&lt;br /&gt;
			// For script asset use &amp;quot;script&amp;quot;, for style we would use &amp;quot;stylesheet&amp;quot;&lt;br /&gt;
			$path = $this-&amp;gt;resolvePath($path, &#039;script&#039;);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		return $path;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Additionally, implementing &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface&#039;&#039;&#039; allows you to add a script options (which may depend on the environment) when your asset is enabled and attached to the Document.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyFancyFoobarAssetItem extends WebAssetItem implements WebAssetAttachBehaviorInterface&lt;br /&gt;
{&lt;br /&gt;
	public function onAttachCallback(Document $doc): void&lt;br /&gt;
	{&lt;br /&gt;
		$user = Factory::getApplication()-&amp;gt;getIdentity();&lt;br /&gt;
		$doc-&amp;gt;addScriptOptions(&#039;com_example.fancyfoobar&#039;, [&#039;userName&#039; =&amp;gt; $user-&amp;gt;username]);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Important note:&#039;&#039;&#039; An asset item that implements &#039;&#039;&#039;WebAssetAttachBehaviorInterface&#039;&#039;&#039; should be enabled before [https://docs.joomla.org/Plugin/Events/System#onBeforeCompileHead onBeforeCompileHead] event, otherwise &#039;onAttachCallback&#039; will be ignored.&lt;br /&gt;
&lt;br /&gt;
=== Defining a custom WebAssetItem class in joomla.asset.json === &lt;br /&gt;
&lt;br /&gt;
In joomla.asset.json you can define which Class should be used with specific AssetItem.&lt;br /&gt;
For this you can use 2 properties &#039;&#039;&#039;namespace&#039;&#039;&#039; and &#039;&#039;&#039;class&#039;&#039;&#039;. &#039;&#039;&#039;namespace&#039;&#039;&#039; can be defined at Root level (then it will be used as default namespace for all Asset items in joomla.asset.json) or in the Item level. For example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;namespace&amp;quot;: &amp;quot;Joomla\Component\Example\WebAsset&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;MyFooBar\Library\Example\WebAsset&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\Component\Example\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;MyFooBar\Library\Example\WebAsset\BarAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If &#039;&#039;&#039;namespace&#039;&#039;&#039; are not defined then by default will be used &#039;&#039;&#039;Joomla\CMS\WebAsset&#039;&#039;&#039;. When &#039;&#039;&#039;namespace&#039;&#039;&#039; is defined but empty, then no namespace will be used, only &#039;&#039;&#039;class&#039;&#039;&#039;. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\CMS\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;BarAssetItem&#039;&#039;&#039; (without namespace).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/115/ru&amp;diff=866209</id>
		<title>Translations:J4.x:Web Assets/115/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/115/ru&amp;diff=866209"/>
		<updated>2022-01-04T10:57:11Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Во внешнем интерфейсе многие активы связаны. Например, наш скрипт keepalive зависит от файла core.js дл...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Во внешнем интерфейсе многие активы связаны. Например, наш скрипт keepalive зависит от файла core.js для управления параметрами. В Joomla никогда не было простого способа указать это, нужно было просто включить несколько файлов. Joomla 4 меняет это понятие с помощью концепции веб-ресурсов.&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866171</id>
		<title>J4.x:Web Assets/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Web_Assets/ru&amp;diff=866171"/>
		<updated>2022-01-04T10:51:52Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;== Концепция ==&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
== Концепция ==&lt;br /&gt;
&lt;br /&gt;
In the frontend world many assets are related. For example our keepalive script depends on the core.js file for options management. In Joomla there never was an easy way to specify this, you just had to include multiple files. Joomla 4 changes this with the concept of web assets.&lt;br /&gt;
&lt;br /&gt;
== Definition ==&lt;br /&gt;
&lt;br /&gt;
Related assets are defined in a JSON file such as [https://github.com/joomla/joomla-cms/blob/7b72c565b610e02c1b01f8958d622879631fa6a2/build/media_source/system/joomla.asset.json#L14-L21 system/joomla.asset.json#L14-L21]&lt;br /&gt;
&lt;br /&gt;
This has a structure of having a schema definition (for validation), name, version, license and then one or more asset definitions. Assets are comprised of a list of js files and css files related to the assets and any dependencies. The dependencies section is just a list of asset names that are required for the asset to function. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;description&amp;quot;: &amp;quot;Joomla CMS&amp;quot;,&lt;br /&gt;
  &amp;quot;license&amp;quot;: &amp;quot;GPL-2.0+&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.css&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.css&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;beer&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
        &amp;quot;core&amp;quot;,&lt;br /&gt;
        &amp;quot;bar&amp;quot;&lt;br /&gt;
      ],&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/beer.js&amp;quot;,&lt;br /&gt;
      &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
        &amp;quot;defer&amp;quot;: true,&lt;br /&gt;
        &amp;quot;data-foo&amp;quot;: &amp;quot;bar&amp;quot;&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;source lang=&amp;quot;json&amp;quot; inline&amp;gt;$schema&amp;lt;/source&amp;gt; attribute is a schema definition file that allows you to validate your file using JSON Schema. Read [https://json-schema.org/understanding-json-schema/index.html the official website] for more information on json schema validation works.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Having joomla.asset.json for your extension or template are recommend but not required to WebAssset to work (see next section).&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is not recommended to add an inline asset to a json file, prefer to use a file.&lt;br /&gt;
&lt;br /&gt;
== Explaining asset stages ==&lt;br /&gt;
&lt;br /&gt;
Each asset has 2 stages: registered and used.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Registered&#039;&#039;&#039; is where an asset is loaded into &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;. That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; knows about the existence of these assets, but will not attach them to a document while rendering.&lt;br /&gt;
All assets loaded from joomla.asset.json is at &#039;&#039;&#039;registered&#039;&#039;&#039; stage.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Used&#039;&#039;&#039; is where an asset is enabled via &amp;quot;$wa-&amp;gt;useAsset()&amp;quot; (-&amp;gt;useScript(), -&amp;gt;useStyle(), -&amp;gt;registerAndUseX() etc). That means &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will attach these assets and their dependencies to a document while rendering.&lt;br /&gt;
&lt;br /&gt;
An asset cannot be used if it was not registered before, this will cause an unknown asset exception.&lt;br /&gt;
&lt;br /&gt;
== Register an asset ==&lt;br /&gt;
&lt;br /&gt;
All known assets loaded and then stored in &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; (to enable/disable an asset item you have to use &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, see next section).&lt;br /&gt;
&lt;br /&gt;
Joomla! will look for next assets definition automatically at runtime (in following order):&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
media/vendor/joomla.asset.json (on first access to WebAssetRegistry)&lt;br /&gt;
media/system/joomla.asset.json&lt;br /&gt;
media/legacy/joomla.asset.json&lt;br /&gt;
media/{com_active_component}/joomla.asset.json (on dispatch the application)&lt;br /&gt;
templates/{active_template}/joomla.asset.json&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
And load them to registry of known assets.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Each following assets definition will override asset items from previous assets definition, by item name.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
You can register your own assets definition via &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039;:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wr = $wa-&amp;gt;getRegistry();&lt;br /&gt;
$wr-&amp;gt;addRegistryFile(&#039;relative/path/to/your/joomla.asset.json&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To add a custom asset item at runtime:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wr-&amp;gt;add(&#039;script&#039;, new Joomla\CMS\WebAsset\WebAssetItem(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;, [&#039;type&#039; =&amp;gt; &#039;script&#039;]));&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or more simply, using &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;com_foobar/file.js&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The new asset item &#039;&#039;&#039;foobar&#039;&#039;&#039; will be added to the registry of know assets, but will not be attached to a document until your code (a layout, template etc) will request it.&lt;br /&gt;
&lt;br /&gt;
To check whether an asset exists:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
if ($wa-&amp;gt;assetExists(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; exists!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Enabling an asset ==&lt;br /&gt;
All asset management in the current Document handled by &#039;&#039;&#039;WebAssetManager&#039;&#039;&#039;, which is accessible with &#039;&#039;&#039;$doc-&amp;gt;getWebAssetManager();&#039;&#039;&#039;&lt;br /&gt;
By using AssetManager you can enable or disable needed asset easily in Joomla! through a standard methods.&lt;br /&gt;
&lt;br /&gt;
To enable an asset in the page use the useAsset function, for example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;);&lt;br /&gt;
&lt;br /&gt;
// Or multiple&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;keepalive&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;fields.validate&#039;)&lt;br /&gt;
    -&amp;gt;useStyle(&#039;foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add new asset item with dependency and use it&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;, &#039;com_foobar/bar.js&#039;, [], [], [&#039;core&#039;, &#039;foobar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;WebAssetManager&#039;&#039;&#039; will look to &#039;&#039;&#039;WebAssetRegistry&#039;&#039;&#039; whether the requested asset exists, and will enable it for current Document instance. Otherwise it will throw an UnknownAssetException.&lt;br /&gt;
&lt;br /&gt;
To disable an asset in the page use the disableAsset function. The example below will disable the jquery-noconflict asset from being loaded.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;jquery-noconflict&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If there are any dependencies to the disabled asset, then this asset will be re-enabled automatically, no matter what.&lt;br /&gt;
&lt;br /&gt;
To check whether asset enabled, and the asset state:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
// Checking whether an asset are active (enabled manually or automatically as dependency)&lt;br /&gt;
if ($wa-&amp;gt;isAssetActive(&#039;script&#039;, &#039;foobar&#039;))&lt;br /&gt;
{&lt;br /&gt;
    var_dump(&#039;Script &amp;quot;foobar&amp;quot; is active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
// Checking state&lt;br /&gt;
switch($wa-&amp;gt;getAssetState(&#039;script&#039;, &#039;foobar&#039;)){&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_ACTIVE:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled manually&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	case Joomla\CMS\WebAsset\WebAssetManager::ASSET_STATE_DEPENDENCY:&lt;br /&gt;
		var_dump(&#039;Active! Was enabled automatically while resolving dependencies&#039;);&lt;br /&gt;
		break;&lt;br /&gt;
	default:&lt;br /&gt;
		var_dump(&#039;not active!&#039;);&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Overriding an asset ==&lt;br /&gt;
&lt;br /&gt;
Overriding may be useful when you need to redefine the URI of asset item or its dependencies.&lt;br /&gt;
As already was noted, each of the following assets definition from joomla.asset.json will override asset items from previous assets definitions, by item name.&lt;br /&gt;
That means if you provide joomla.asset.json which contain already loaded asset items, they will be replaced with your items.&lt;br /&gt;
Another way to override in the code is to register an item with the same name.&lt;br /&gt;
Example, we have &amp;quot;foobar&amp;quot; script, that load com_example/foobar.js library, and we want to use CDN for this exact library:&lt;br /&gt;
&lt;br /&gt;
How it defined in the system initially:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To override the URI we define the asset item with &amp;quot;foobar&amp;quot; name in our joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;http://foobar.cdn.blabla/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Or, register new asset item with AssetManager:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;foobar&#039;, &#039;http://fobar.cdn.blabla/foobar.js&#039;, [], [], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Working with styles ==&lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Stylesheet files. Stylesheet asset item have a type &amp;quot;style&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.css&amp;quot;&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with styles === &lt;br /&gt;
&lt;br /&gt;
AssetManager offers the following methods to work with style files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableStyle(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseStyle(&#039;bar&#039;, &#039;com_example/bar.css&#039;, [], [&#039;data-foo&#039; =&amp;gt; &#039;some attribute&#039;], [&#039;some.dependency&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline style ===&lt;br /&gt;
&lt;br /&gt;
Additionaly to style files, WebAssetManager allows you to add an inline style, and maintain their relation to the file asset.&lt;br /&gt;
Inline styles may be placed directly before the dependency, after the dependency, or as usual after all styles.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrieve the asset item from a registry, or as a dependency to another inline asset. If the name is not specified then a generated name based on a content hash will be used.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline3&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foobar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline4&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset has multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineStyle(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foo.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline1&amp;lt;/style&amp;gt;&lt;br /&gt;
&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;bar.css&amp;quot; /&amp;gt;&lt;br /&gt;
&amp;lt;style&amp;gt;content of inline2&amp;lt;/style&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline assets may be a dependency to another inline asset, however it is not recommended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may change in the future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Working with scripts == &lt;br /&gt;
&lt;br /&gt;
AssetManager allow to manage Script files. Script asset item have a type &amp;quot;script&amp;quot;.&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example json definition of ES6 module script, with fallback to legacy:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-as5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&amp;quot;core&amp;quot;]&lt;br /&gt;
}&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core&amp;quot;, &lt;br /&gt;
    &amp;quot;foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with scripts ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with script files:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach foobar to the document&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable foobar from being attached&lt;br /&gt;
$wa-&amp;gt;disableScript(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerScript(&#039;bar&#039;, &#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;useScript(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUseScript(&#039;bar&#039;,&#039;com_example/bar.js&#039;, [], [&#039;defer&#039; =&amp;gt; true], [&#039;core&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Add inline script ===&lt;br /&gt;
&lt;br /&gt;
Addittionaly to script files WebAssetManager allow to add an inline script, and maintain their relation to the file asset.&lt;br /&gt;
Inline script may be placed directly before the dependency, after the dependency, or as usual after all scripts.&lt;br /&gt;
&lt;br /&gt;
Inline asset may have a name as well as other assets (but not required), the name can be used to retrive the asset item form a registry, or as dependecy to another inline asset. If name not specified then will be used generated name based on a content hash.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Add an inline content as usual, will be rendered in flow after all assets&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed after &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [&#039;data-foo&#039; =&amp;gt; &#039;bar&#039;], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Add an inline content that will be placed before &amp;quot;foobar&amp;quot; asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline3&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foobar&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Named inline asset&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline4&#039;, [&#039;name&#039; =&amp;gt; &#039;my.inline.asset&#039;]);&lt;br /&gt;
&lt;br /&gt;
// Specify script type&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline5&#039;, [], [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; &amp;quot;foobar&amp;quot; asset should exist in the asset registry, otherwise you will get an unsatisfied dependency exception.&lt;br /&gt;
&lt;br /&gt;
Example above will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline3&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;foobar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script data-foo=&amp;quot;bar&amp;quot;&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline4&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script type=&amp;quot;module&amp;quot;&amp;gt;content of inline5&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
If inline asset have a multiple dependencies, then will be used last one for positioning. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline1&#039;, [&#039;position&#039; =&amp;gt; &#039;before&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
$wa-&amp;gt;addInlineScript(&#039;content of inline2&#039;, [&#039;position&#039; =&amp;gt; &#039;after&#039;], [], [&#039;foo&#039;, &#039;bar&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Will produce:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;html5&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;script src=&amp;quot;foo.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline1&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script src=&amp;quot;bar.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;content of inline2&amp;lt;/script&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; Named inline asset may be as dependency to another inline asset, hovewer it is not recomended to use an inline asset as dependency to non-inline asset. This will work, but this behavior may changes in future. Prefer to use &amp;quot;position&amp;quot; instead.&lt;br /&gt;
&lt;br /&gt;
== Working with a web component ==&lt;br /&gt;
&lt;br /&gt;
Joomla! allows you to use [https://developer.mozilla.org/en-US/docs/Web/Web_Components Web Components] for your needs. In Joomla! web components are not loaded as regular script, but loaded via Web Component loader so that they are loaded asynchronously. Therefore, a web component asset item must have a flag &amp;quot;webcomponent&amp;quot; set to the boolean &amp;quot;true&amp;quot;.&lt;br /&gt;
In all other aspects, working with web components in AssetManager is the same as working with a &amp;quot;script&amp;quot; asset item.&lt;br /&gt;
&lt;br /&gt;
Example json definition of some web components in joomla.asset.json (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
     &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Example with fallback, for browsers that does not support ES6 &amp;quot;module&amp;quot; feature. Note that the legacy script should have &amp;quot;wcpolyfill&amp;quot; dependency, and module script should have dependency from legacy script:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;style&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.css&amp;quot;,&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar-legacy&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element-es5.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;nomodule&amp;quot;: true,&lt;br /&gt;
    &amp;quot;defer&amp;quot;: true&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;wcpolyfill&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
},&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;webcomponent.foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;com_example/foobar-custom-element.js&amp;quot;,&lt;br /&gt;
  &amp;quot;attributes&amp;quot;: {&lt;br /&gt;
    &amp;quot;type&amp;quot;: &amp;quot;module&amp;quot;&lt;br /&gt;
  },&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;webcomponent.foobar-legacy&amp;quot;&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Alternatively you can register them in PHP (as ES6 module):&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;registerStyle(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.css&#039;)&lt;br /&gt;
    -&amp;gt;registerScript(&#039;webcomponent.foobar&#039;, &#039;com_example/foobar-custom-element.js&#039;, [&#039;type&#039; =&amp;gt; &#039;module&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Attach to document:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
$wa-&amp;gt;useStyle(&#039;webcomponent.foobar&#039;)&lt;br /&gt;
    -&amp;gt;useScript(&#039;webcomponent.foobar&#039;);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; It is preferred to prefix the asset name with &amp;quot;webcomponent.&amp;quot; to make it easily to spot, and distinct it from regular scripts in a layout.&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with web component ===&lt;br /&gt;
&lt;br /&gt;
All methods to work with a web component are the same as methods to work with script asset item.&lt;br /&gt;
&lt;br /&gt;
== Working with a presets ==&lt;br /&gt;
&lt;br /&gt;
&amp;quot;Preset&amp;quot; is a special kind of asset item that hold a list of items that has to be enabled, in same way as direct call of useAsset() to each of item in the list.&lt;br /&gt;
Preset can hold mixed types of assets (script, style, another preset, etc), the type should be provided after # symbol and follows after an asset name, example: foo#style, bar#script.&lt;br /&gt;
&lt;br /&gt;
Example json definition of item in joomla.asset.json:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;foobar&amp;quot;,&lt;br /&gt;
  &amp;quot;type&amp;quot;: &amp;quot;preset&amp;quot;,&lt;br /&gt;
  &amp;quot;uri&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
  &amp;quot;dependencies&amp;quot;: [&lt;br /&gt;
    &amp;quot;core#script&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#style&amp;quot;,&lt;br /&gt;
    &amp;quot;foobar#script&amp;quot;,&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Methods to work with preset ===&lt;br /&gt;
&lt;br /&gt;
AssetManager offer next methods to work with preset items:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */&lt;br /&gt;
$wa = Factory::getApplication()-&amp;gt;getDocument()-&amp;gt;getWebAssetManager();&lt;br /&gt;
&lt;br /&gt;
// Attach all items from foobar preset to the document&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Disable all items from foobar preset from being attached&lt;br /&gt;
$wa-&amp;gt;disablePreset(&#039;foobar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register custom item without json definition&lt;br /&gt;
$wa-&amp;gt;registerPreset(&#039;bar&#039;, &#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&lt;br /&gt;
// And use it later&lt;br /&gt;
$wa-&amp;gt;usePreset(&#039;bar&#039;);&lt;br /&gt;
&lt;br /&gt;
// Register and attach a custom item in one run&lt;br /&gt;
$wa-&amp;gt;registerAndUsePreset(&#039;bar&#039;,&#039;&#039;, [], [], [&#039;core#script&#039;, &#039;bar#script&#039;]);&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Advanced: Custom WebAssetItem class ==&lt;br /&gt;
&lt;br /&gt;
The default class for all WebAsset items is &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
You are also allowed to use a custom class, which must implement &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItemInterface&#039;&#039;&#039; or extend &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
A custom class can allow you to do advanced actions, for example, including a script file depending on an active language:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyComExampleAssetItem extends WebAssetItem&lt;br /&gt;
{&lt;br /&gt;
	public function getUri($resolvePath = true): string&lt;br /&gt;
	{&lt;br /&gt;
		$langTag = Factory::getApplication()-&amp;gt;getLanguage()-&amp;gt;getTag();&lt;br /&gt;
		// For script asset use &amp;quot;.js&amp;quot;, for style we would use &amp;quot;.css&amp;quot;&lt;br /&gt;
		$path    = &#039;com_example/bar-&#039; . $langTag . &#039;.js&#039;;&lt;br /&gt;
&lt;br /&gt;
		if ($resolvePath)&lt;br /&gt;
		{&lt;br /&gt;
			// For script asset use &amp;quot;script&amp;quot;, for style we would use &amp;quot;stylesheet&amp;quot;&lt;br /&gt;
			$path = $this-&amp;gt;resolvePath($path, &#039;script&#039;);&lt;br /&gt;
		}&lt;br /&gt;
&lt;br /&gt;
		return $path;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Additionally, implementing &#039;&#039;&#039;Joomla\CMS\WebAsset\WebAssetAttachBehaviorInterface&#039;&#039;&#039; allows you to add a script options (which may depend on the environment) when your asset is enabled and attached to the Document.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
class MyFancyFoobarAssetItem extends WebAssetItem implements WebAssetAttachBehaviorInterface&lt;br /&gt;
{&lt;br /&gt;
	public function onAttachCallback(Document $doc): void&lt;br /&gt;
	{&lt;br /&gt;
		$user = Factory::getApplication()-&amp;gt;getIdentity();&lt;br /&gt;
		$doc-&amp;gt;addScriptOptions(&#039;com_example.fancyfoobar&#039;, [&#039;userName&#039; =&amp;gt; $user-&amp;gt;username]);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Important note:&#039;&#039;&#039; An asset item that implements &#039;&#039;&#039;WebAssetAttachBehaviorInterface&#039;&#039;&#039; should be enabled before [https://docs.joomla.org/Plugin/Events/System#onBeforeCompileHead onBeforeCompileHead] event, otherwise &#039;onAttachCallback&#039; will be ignored.&lt;br /&gt;
&lt;br /&gt;
=== Defining a custom WebAssetItem class in joomla.asset.json === &lt;br /&gt;
&lt;br /&gt;
In joomla.asset.json you can define which Class should be used with specific AssetItem.&lt;br /&gt;
For this you can use 2 properties &#039;&#039;&#039;namespace&#039;&#039;&#039; and &#039;&#039;&#039;class&#039;&#039;&#039;. &#039;&#039;&#039;namespace&#039;&#039;&#039; can be defined at Root level (then it will be used as default namespace for all Asset items in joomla.asset.json) or in the Item level. For example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;version&amp;quot;: &amp;quot;4.0.0&amp;quot;,&lt;br /&gt;
  &amp;quot;namespace&amp;quot;: &amp;quot;Joomla\Component\Example\WebAsset&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;MyFooBar\Library\Example\WebAsset&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\Component\Example\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;MyFooBar\Library\Example\WebAsset\BarAssetItem&#039;&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;&#039;Note:&#039;&#039;&#039; If &#039;&#039;&#039;namespace&#039;&#039;&#039; are not defined then by default will be used &#039;&#039;&#039;Joomla\CMS\WebAsset&#039;&#039;&#039;. When &#039;&#039;&#039;namespace&#039;&#039;&#039; is defined but empty, then no namespace will be used, only &#039;&#039;&#039;class&#039;&#039;&#039;. Example:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;json&amp;quot;&amp;gt;&lt;br /&gt;
{&lt;br /&gt;
  &amp;quot;$schema&amp;quot;: &amp;quot;https://developer.joomla.org/schemas/json-schema/web_assets.json&amp;quot;,&lt;br /&gt;
  &amp;quot;name&amp;quot;: &amp;quot;com_example&amp;quot;,&lt;br /&gt;
  &amp;quot;assets&amp;quot;: [&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;foo&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;FooAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/foo.js&amp;quot;&lt;br /&gt;
    },&lt;br /&gt;
    {&lt;br /&gt;
      &amp;quot;name&amp;quot;: &amp;quot;bar&amp;quot;,&lt;br /&gt;
      &amp;quot;type&amp;quot;: &amp;quot;script&amp;quot;,&lt;br /&gt;
      &amp;quot;namespace&amp;quot;: &amp;quot;&amp;quot;,&lt;br /&gt;
      &amp;quot;class&amp;quot;: &amp;quot;BarAssetItem&amp;quot;,&lt;br /&gt;
      &amp;quot;uri&amp;quot;: &amp;quot;com_example/bar.js&amp;quot;&lt;br /&gt;
    }&lt;br /&gt;
  ]&lt;br /&gt;
}&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Here the asset &#039;&#039;&#039;foo&#039;&#039;&#039; will be associated with class &#039;&#039;&#039;Joomla\CMS\WebAsset\FooAssetItem&#039;&#039;&#039;, and &#039;&#039;&#039;bar&#039;&#039;&#039; with class &#039;&#039;&#039;BarAssetItem&#039;&#039;&#039; (without namespace).&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/114/ru&amp;diff=866170</id>
		<title>Translations:J4.x:Web Assets/114/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Web_Assets/114/ru&amp;diff=866170"/>
		<updated>2022-01-04T10:51:47Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;== Концепция ==&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== Концепция ==&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Category:Joomla!_4.x/ru&amp;diff=865817</id>
		<title>Category:Joomla! 4.x/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Category:Joomla!_4.x/ru&amp;diff=865817"/>
		<updated>2022-01-03T16:18:21Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Чтобы появиться в этой категории, на каждой странице темы в конце должен быть вставлен следующи...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{Joomla version|version=4.x|status=future|comment=series}}&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
This page contains articles related to Joomla! version 4.x.&lt;br /&gt;
&lt;br /&gt;
Чтобы появиться в этой категории, на каждой странице темы в конце должен быть вставлен следующий код:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;code&amp;gt;&amp;lt;nowiki&amp;gt;&amp;lt;noinclude&amp;gt;[[Category:Joomla! 4.x]]&amp;lt;/noinclude&amp;gt;&amp;lt;/nowiki&amp;gt;&amp;lt;/code&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:Category:Joomla!_4.x/3/ru&amp;diff=865816</id>
		<title>Translations:Category:Joomla! 4.x/3/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:Category:Joomla!_4.x/3/ru&amp;diff=865816"/>
		<updated>2022-01-03T16:18:21Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Чтобы появиться в этой категории, на каждой странице темы в конце должен быть вставлен следующи...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Чтобы появиться в этой категории, на каждой странице темы в конце должен быть вставлен следующий код:&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=JDOC:Joomla_4_Tutorials_Project/ru&amp;diff=865815</id>
		<title>JDOC:Joomla 4 Tutorials Project/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=JDOC:Joomla_4_Tutorials_Project/ru&amp;diff=865815"/>
		<updated>2022-01-03T16:15:05Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Это &amp;#039;&amp;#039;&amp;#039;Joomla! Документация Wiki Tutorial Project&amp;#039;&amp;#039;&amp;#039; ориентирована на предоставление учебных пособий, чтобы по...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
{{Top portal heading|color=white-bkgd|icon=joomla|icon-color=#5091cd|size=5x|text-color=#333|title=Joomla 4 Tutorials Project}}&lt;br /&gt;
Это &#039;&#039;&#039;Joomla! Документация Wiki Tutorial Project&#039;&#039;&#039; ориентирована на предоставление учебных пособий, чтобы помочь новичкам и разработчикам с основными изменениями Joomla 4. Joomla Docs Wiki создается и поддерживается сообществом, любой может принять участие в Joomla 4 Tutorials Project! В этом проекте JDOC есть много небольших задач, которые в сочетании друг с другом помогут создать высококачественные учебные пособия для начинающих и средних разработчиков Joomla!. Покажите другим свой интерес к проекту Joomla, зарегистрируйтесь, чтобы помочь с этим проектом Docs Wiki на странице обсуждения. &lt;br /&gt;
&amp;lt;div class=&amp;quot;large-6 column&amp;quot;&amp;gt;&lt;br /&gt;
{{section portal heading|icon=magic|title=Joomla 4 Tutorials Maintained}}&lt;br /&gt;
&lt;br /&gt;
== For Newcomers ==&lt;br /&gt;
* [[S:MyLanguage/J4.x:Getting_Started_with_Joomla!|Getting Started with Joomla!]]&lt;br /&gt;
&lt;br /&gt;
== For Upgraders ==&lt;br /&gt;
&lt;br /&gt;
* [[S:MyLanguage/Potential backward compatibility issues in Joomla 4|Potential backward compatibility issues in Joomla 4]]&lt;br /&gt;
* [[S:MyLanguage/Joomla_3.x_to_4.x_Step_by_Step_Migration|Joomla 3.x to 4.x Step by Step Migration]]&lt;br /&gt;
&lt;br /&gt;
== For Maintainers ==&lt;br /&gt;
&lt;br /&gt;
* [[S:MyLanguage/J4.x:Adding_a_menu_link_in_an_article|Adding a menu link in an article]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:Adding_a_Custom_Administrator_Menu| Adding a Custom Administrator Menu]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:Workflow|Workflow]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:Http_Header_Management|How to Use the New HTTP Header Management]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:CLI_Database_Exporter_Importer|CLI Database Exporter Importer]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:Improved_Override_Management|Improved Override Management]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:Media_Manager|The New Media Manager in Joomla 4.0]]&lt;br /&gt;
** [[S:MyLanguage/J4.x:How_to_use_the_new_Media_Manager|How to use the new media manager in Joomla 4.0]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:Using Bootstrap Components in Joomla 4|Using Bootstrap Components in Joomla 4]]&lt;br /&gt;
&lt;br /&gt;
== For Developers ==&lt;br /&gt;
&lt;br /&gt;
* [[S:MyLanguage/J4.x:Creating_a_Plugin_for_Joomla|Creating a Plugin for Joomla 4]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:Creating_a_Simple_Module| Creating a simple Module for Joomla 4]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:SCSS_and_Sass|SCSS and Sass]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:Setting_Up_Your_Local_Environment|Setting up your local environment]]&lt;br /&gt;
* [[S:MyLanguage/Setting_up_Eclipse_PDT_2020_and_Git_for_Pulls|Setting up Eclipse PDT 2020 and Git for Pulls]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:Web_Assets|Web Assets]]&lt;br /&gt;
* [[S:MyLanguage/Adding changelog to your manifest file|Adding changelog to your manifest file]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:Dependency_Injection_in_Joomla_4|Dependency Injection in Joomla 4]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:Moving_Joomla_To_Prepared_Statements|Moving Joomla to Prepared Statements]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:Namespace_Conventions_In_Joomla|Namespace conventions in Joomla 4]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:Writing_A_CLI_Application|Writing a CLI Application with the new Console Package]]&lt;br /&gt;
** [[S:MyLanguage/J4.x:Cloud_File_Systems_for_Media_Manager|How to build a cloud file system plugin for the new Media Manager]]&lt;br /&gt;
* Joomla 4&#039;s API: There are several pages documentation which you can find linked [[S:MyLanguage/Category:Joomla!_Api|in this Category on the Wiki]]&lt;br /&gt;
&lt;br /&gt;
== For Documenters ==&lt;br /&gt;
&lt;br /&gt;
* [[S:MyLanguage/Help4.x:Help_screens|Joomla 4 Help Screens]]&lt;br /&gt;
* [[S:MyLanguage/Help4.x:Chunks| Joomla 4 Chunks]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:Doc_Pages| Joomla 4 Doc Pages]]&lt;br /&gt;
* [[S:MyLanguage/J4.x:Help_pages| Joomla 4 Help Pages]]&lt;br /&gt;
* [[S:MyLanguage/J3.x:Doc_Pages| Joomla 3 Doc Pages]] (for comparison)&lt;br /&gt;
== Appendices ==&lt;br /&gt;
&lt;br /&gt;
=====Joomla 4.x Extensions - Simple working examples explained=====&lt;br /&gt;
&lt;br /&gt;
* [[S:MyLanguage/J4 Plugin example - Table of Contents|J4 Plugin example - Table of Contents]]&lt;br /&gt;
* [[S:MyLanguage/J4 Component example - Mywalks|J4 Component example - Mywalks]] - Updated for Beta 4&lt;br /&gt;
* [[S:MyLanguage/J4 Module example - Mydownmsg|J4 Module example - Mydownmsg]]&lt;br /&gt;
* [[S:MyLanguage/J4 CLI example - Onoffbydate|J4 CLI example - Onoffbydate]]&lt;br /&gt;
&lt;br /&gt;
* [[J4.x:Tips and Tricks for Joomla 4 Developers|Tips and Tricks for Joomla 4 Developers]]&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;div class=&amp;quot;large-6 column&amp;quot;&amp;gt;&lt;br /&gt;
{{section portal heading|icon=check-square|title=To Do List}}&lt;br /&gt;
These are a few &#039;to do&#039;s&#039; to get this project startedː &lt;br /&gt;
* How to use the new Publishing Workflow&lt;br /&gt;
* How to create an accessible template&lt;br /&gt;
* How to test the accessibility of an extension&lt;br /&gt;
* [[S:MyLanguage/J4.x:Developing_an_MVC_Component|Developing an MVC component]]&lt;br /&gt;
* Joomla! 4 Component Development Tutorial&lt;br /&gt;
* Cassiopeia Template - Front End Template for Joomla 4&lt;br /&gt;
* Atum Template - Back End Template for Joomla 4&lt;br /&gt;
* HTML Mail Templates&lt;br /&gt;
* What&#039;s changed in Joomla 4? (vs backwards compatibility)&lt;br /&gt;
* Custom Admin User Dashboards&lt;br /&gt;
* Plugin: System - Additional Accessibility Features&lt;br /&gt;
* Upgrading Joomla 4: Pre Update Check&lt;br /&gt;
* Making a language pack for Joomla 4 ([[J3.x:Making a Language Pack for Joomla|J3 version]])&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;div class=&amp;quot;large-12 column&amp;quot;&amp;gt;{{section portal heading|icon=plus|title=Join This JDOC Project}}{{JDOC:Beginners_Tutorial_Project/Get Involved/en}}&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;div class=&amp;quot;large-6 column&amp;quot;&amp;gt;&lt;br /&gt;
{{section portal heading|icon=question|title=FAQ}}{{JDOC:Developer_Tutorials_Project/FAQs/en}}&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;div class=&amp;quot;large-6 column&amp;quot;&amp;gt;&lt;br /&gt;
{{section portal heading|icon=group|title=Members of this Project}}&lt;br /&gt;
==Members==&lt;br /&gt;
*[[User:Sandra97|Sandra Decoux]]&lt;br /&gt;
*[[User:Hutchy68|Tom Hutchison]]&lt;br /&gt;
*[[User:MartijnM|Martijn Maandag]]&lt;br /&gt;
*[[User:M-b-o|Mike Brandner, Teamlead JDocs]]&lt;br /&gt;
*[[User:Wilsonge|George Wilson, Joomla 4 Release Lead]]&lt;br /&gt;
*[[User:Partic|Patrick Jackson]]&lt;br /&gt;
{{section portal heading|icon=book|title=News}}&lt;br /&gt;
The JDOC Joomla 4 Tutorials Project was started on Sat, 08 Dec 2018 in an effort to benefit the users of the Joomla! Documentation Wiki.&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;
&lt;br /&gt;
__NOTOC__&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:JDOC Projects{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla!_4.x{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
__NOEDITSECTION__&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:JDOC:Joomla_4_Tutorials_Project/2/ru&amp;diff=865814</id>
		<title>Translations:JDOC:Joomla 4 Tutorials Project/2/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:JDOC:Joomla_4_Tutorials_Project/2/ru&amp;diff=865814"/>
		<updated>2022-01-03T16:15:05Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Это &amp;#039;&amp;#039;&amp;#039;Joomla! Документация Wiki Tutorial Project&amp;#039;&amp;#039;&amp;#039; ориентирована на предоставление учебных пособий, чтобы по...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Это &#039;&#039;&#039;Joomla! Документация Wiki Tutorial Project&#039;&#039;&#039; ориентирована на предоставление учебных пособий, чтобы помочь новичкам и разработчикам с основными изменениями Joomla 4. Joomla Docs Wiki создается и поддерживается сообществом, любой может принять участие в Joomla 4 Tutorials Project! В этом проекте JDOC есть много небольших задач, которые в сочетании друг с другом помогут создать высококачественные учебные пособия для начинающих и средних разработчиков Joomla!. Покажите другим свой интерес к проекту Joomla, зарегистрируйтесь, чтобы помочь с этим проектом Docs Wiki на странице обсуждения.&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Language/ru&amp;diff=848203</id>
		<title>Language/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Language/ru&amp;diff=848203"/>
		<updated>2021-11-17T14:36:04Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;== Ссылки ==&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
{{Chunk:Language/en}}&lt;br /&gt;
&lt;br /&gt;
Языковые пакеты - это расширения, которые обеспечивают перевод для Joomla!. Joomla! 1.5 и выше поддерживает полный перевод сайта и интерфейса администратора. Из-за этого существует два основных типа языковых пакетов: для сайта и для администратора, с Joomla! 1.5.4 и выше поддерживаются языковые пакеты для сайта и администратора в одном пакете &amp;lt;ref name=&amp;quot;154langinstaller&amp;quot;&amp;gt;[http://www.joomla.org/content/view/5180/1/1/1/#Language_Installation_Improvemen Joomla! 1.5.4 объявление о выпуске]&amp;lt;/ref&amp;gt;.&lt;br /&gt;
&amp;lt;noinclude&amp;gt;== Ссылки ==&lt;br /&gt;
&amp;lt;references/&amp;gt;&lt;br /&gt;
[[Category:Extensions| Language]]&lt;br /&gt;
[[Category:Landing Pages]]&lt;br /&gt;
[[Category:Glossary]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:Language/4/ru&amp;diff=848202</id>
		<title>Translations:Language/4/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:Language/4/ru&amp;diff=848202"/>
		<updated>2021-11-17T14:36:04Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;== Ссылки ==&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== Ссылки ==&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Language/ru&amp;diff=848201</id>
		<title>Language/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Language/ru&amp;diff=848201"/>
		<updated>2021-11-17T14:35:57Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;объявление о выпуске&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
{{Chunk:Language/en}}&lt;br /&gt;
&lt;br /&gt;
Языковые пакеты - это расширения, которые обеспечивают перевод для Joomla!. Joomla! 1.5 и выше поддерживает полный перевод сайта и интерфейса администратора. Из-за этого существует два основных типа языковых пакетов: для сайта и для администратора, с Joomla! 1.5.4 и выше поддерживаются языковые пакеты для сайта и администратора в одном пакете &amp;lt;ref name=&amp;quot;154langinstaller&amp;quot;&amp;gt;[http://www.joomla.org/content/view/5180/1/1/1/#Language_Installation_Improvemen Joomla! 1.5.4 объявление о выпуске]&amp;lt;/ref&amp;gt;.&lt;br /&gt;
&amp;lt;noinclude&amp;gt;== References ==&lt;br /&gt;
&amp;lt;references/&amp;gt;&lt;br /&gt;
[[Category:Extensions| Language]]&lt;br /&gt;
[[Category:Landing Pages]]&lt;br /&gt;
[[Category:Glossary]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:Language/3/ru&amp;diff=848200</id>
		<title>Translations:Language/3/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:Language/3/ru&amp;diff=848200"/>
		<updated>2021-11-17T14:35:57Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;объявление о выпуске&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;объявление о выпуске&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Language/ru&amp;diff=848199</id>
		<title>Language/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Language/ru&amp;diff=848199"/>
		<updated>2021-11-17T14:35:30Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Языковые пакеты - это расширения, которые обеспечивают перевод для Joomla!. Joomla! 1.5 и выше поддержив...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
{{Chunk:Language/en}}&lt;br /&gt;
&lt;br /&gt;
Языковые пакеты - это расширения, которые обеспечивают перевод для Joomla!. Joomla! 1.5 и выше поддерживает полный перевод сайта и интерфейса администратора. Из-за этого существует два основных типа языковых пакетов: для сайта и для администратора, с Joomla! 1.5.4 и выше поддерживаются языковые пакеты для сайта и администратора в одном пакете &amp;lt;ref name=&amp;quot;154langinstaller&amp;quot;&amp;gt;[http://www.joomla.org/content/view/5180/1/1/1/#Language_Installation_Improvemen Joomla! 1.5.4 release announcement]&amp;lt;/ref&amp;gt;.&lt;br /&gt;
&amp;lt;noinclude&amp;gt;== References ==&lt;br /&gt;
&amp;lt;references/&amp;gt;&lt;br /&gt;
[[Category:Extensions| Language]]&lt;br /&gt;
[[Category:Landing Pages]]&lt;br /&gt;
[[Category:Glossary]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:Language/2/ru&amp;diff=848198</id>
		<title>Translations:Language/2/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:Language/2/ru&amp;diff=848198"/>
		<updated>2021-11-17T14:35:29Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Языковые пакеты - это расширения, которые обеспечивают перевод для Joomla!. Joomla! 1.5 и выше поддержив...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Языковые пакеты - это расширения, которые обеспечивают перевод для Joomla!. Joomla! 1.5 и выше поддерживает полный перевод сайта и интерфейса администратора. Из-за этого существует два основных типа языковых пакетов: для сайта и для администратора, с Joomla! 1.5.4 и выше поддерживаются языковые пакеты для сайта и администратора в одном пакете&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Language/ru&amp;diff=848197</id>
		<title>Language/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Language/ru&amp;diff=848197"/>
		<updated>2021-11-17T14:31:47Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Язык&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
{{Chunk:Language/en}}&lt;br /&gt;
&lt;br /&gt;
Language packs are extensions that provide translations for the Joomla! system. Joomla! 1.5 and higher supports a full translateable site and administrator interface. Because of this there are two major types of language packs, ones for the site and ones for the administrator, with Joomla! 1.5.4 and higher supporting language packs with both the site and administrator in the one pack &amp;lt;ref name=&amp;quot;154langinstaller&amp;quot;&amp;gt;[http://www.joomla.org/content/view/5180/1/1/1/#Language_Installation_Improvemen Joomla! 1.5.4 release announcement]&amp;lt;/ref&amp;gt;.&lt;br /&gt;
&amp;lt;noinclude&amp;gt;== References ==&lt;br /&gt;
&amp;lt;references/&amp;gt;&lt;br /&gt;
[[Category:Extensions| Language]]&lt;br /&gt;
[[Category:Landing Pages]]&lt;br /&gt;
[[Category:Glossary]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:Language/Page_display_title/ru&amp;diff=848196</id>
		<title>Translations:Language/Page display title/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:Language/Page_display_title/ru&amp;diff=848196"/>
		<updated>2021-11-17T14:31:46Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Язык&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Язык&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Creating_a_Simple_Module/ru&amp;diff=848195</id>
		<title>J4.x:Creating a Simple Module/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Creating_a_Simple_Module/ru&amp;diff=848195"/>
		<updated>2021-11-17T14:28:57Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Более подробную информацию о языковых файлах можно найти here.&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
{{Joomla version|version=4.x|comment=&amp;gt;Tutorial}}&lt;br /&gt;
{{-}}&lt;br /&gt;
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Creating a Simple Module for Joomla 4.x}}&lt;br /&gt;
{{-}}&lt;br /&gt;
&lt;br /&gt;
This is a tutorial on how to Create a simple module for Joomla Version 4x. &lt;br /&gt;
== Introduction ==&lt;br /&gt;
Joomlaǃ 4 provides five types of extensionsː&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Component|Components]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;A component is the main part of the site. A component handles data manipulation as well as input and storage into the database. A component on most sites is the primary focus of the page.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Module|Modules]]&#039;&#039;&#039; &amp;lt;br /&amp;gt;A module is an add-on to the site that extends the functionality. A module usually occupies a secondary portion of the web page and is not considered the primary focus of a page. It can be displayed on different positions and you can choose on which active menu items it should be displayed. Modules are lightweight and flexible extensions. They are used for small bits of the page that are generally less complex and are able to be seen across different components.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Plugin|Plugins]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;A Plugin manipulates output that is already generated by the system. It typically does not run as separate part of the site. It takes data from other sources (i.e. the content) and manipulates this data before displaying. A plugin typically work behind the scenes.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Languages|Languages]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;Probably the most basic extensions are languages. In essence the language package files consist of key/value pairs, which provide the translation of static text strings, assigned within the Joomla! source code.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Templates|Templates]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;A template is basically the design of your Joomla! powered website.&lt;br /&gt;
&lt;br /&gt;
Joomla! 4 is constructed using five different applications:&lt;br /&gt;
* Installation (used for installing Joomla and have to delete after installation);&lt;br /&gt;
* Administrator (backend - used for managing content);&lt;br /&gt;
* Public or site (frontend - used for displaying content);&lt;br /&gt;
* CLI (used for accessing Joomla on the command line and for cron jobs);&lt;br /&gt;
* API (web services - used for creating APIs for machine accessible content);&lt;br /&gt;
The installation application is used once. The administrator and public are used through the concept of &#039;&#039;components&#039;&#039; with &#039;&#039;modules&#039;&#039;. Each module has a single entry point located in the &#039;&#039;modules&#039;&#039; and accordingly &#039;&#039;administrator/modules&#039;&#039;  directory. This entry point is called &amp;lt;tt&amp;gt;&#039;&#039;mod_modulename/mod_modulename.php&#039;&#039;&amp;lt;/tt&amp;gt; (the &#039;&#039;mod_&#039;&#039; prefix is a historical trace). The entry point for the login module is for example &#039;&#039;/mod_login/mod_login.php&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x installation available to use for this tutorial ([https://github.com/joomla/joomla-cms/releases Download latest release here])&lt;br /&gt;
&lt;br /&gt;
You can download Joomla! 4 at [https://github.com/joomla/joomla-cms/releases GitHub], on the [https://developer.joomla.org/nightly-builds.html Developer website] or you can create a free website at https://launch.joomla.org.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Creating a simple module/Developing a Basic Module - Part 1 ==&lt;br /&gt;
You can see many examples of modules in the standard Joomla! install. For example:&lt;br /&gt;
* Menus &lt;br /&gt;
* Latest News&lt;br /&gt;
* Login form&lt;br /&gt;
* and many more.&lt;br /&gt;
&lt;br /&gt;
This tutorial will explain how to create a simple module. Through this tutorial you will learn the basic file structure of a Joomlaǃ 4 module. This basic structure can then be expanded to produce more elaborate modules.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
There are a few basic files that are used in the standard pattern of module development:&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; - This file is the main entry point for the module. It will perform any necessary initialization routines, call helper routines to collect any necessary data, and include the template which will display the module output.&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - This file contains information about the module. It defines the files that need to be installed by the Joomla! installer and specifies configuration parameters for the module.&lt;br /&gt;
* &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; - This is the module template. This file will take the data collected by mod_foo.php and generate the HTML to be displayed on the page.&lt;br /&gt;
* &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; and &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt;- This are the files that provide the text in United Kingdom English.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== Creating mod_foo.php ===&lt;br /&gt;
The &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file will perform following tasks:&lt;br /&gt;
* Import the class &amp;lt;tt&amp;gt;ModuleHelper&amp;lt;/tt&amp;gt; to the current scope. We need it later for displaying the output.&lt;br /&gt;
* Include the template to display the output.&lt;br /&gt;
&lt;br /&gt;
The helper class is imported to our current scope at the begin of the file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;use Joomla\CMS\Helper\ModuleHelper;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Last we include the template to display the output via&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;require ModuleHelper::getLayoutPath(&#039;mod_foo&#039;, $params-&amp;gt;get(&#039;layout&#039;, &#039;default&#039;));&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.php file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
use Joomla\CMS\Helper\ModuleHelper;&lt;br /&gt;
&lt;br /&gt;
require ModuleHelper::getLayoutPath(&#039;mod_foo&#039;, $params-&amp;gt;get(&#039;layout&#039;, &#039;default&#039;));&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;Side note&#039;&#039;ː In Joomla 3x you usually used a line like &amp;lt;tt&amp;gt;$moduleclass_sfx = htmlspecialchars($params-&amp;gt;get(&#039;moduleclass_sfx&#039;));&amp;lt;/tt&amp;gt;. You don&#039;t need this anymore. See this PRː https://github.com/joomla/joomla-cms/pull/17447. &lt;br /&gt;
&lt;br /&gt;
The one line that we haven’t explained so far is the first line &amp;lt;tt&amp;gt;defined(&#039;_JEXEC&#039;) or die;&amp;lt;/tt&amp;gt;. This line checks to make sure that this file is being included from the Joomla application. This is necessary to prevent variable injection and other potential security concerns.&lt;br /&gt;
&lt;br /&gt;
=== Creating tmpl/default.php ===&lt;br /&gt;
The &amp;lt;tt&amp;gt;default.php&amp;lt;/tt&amp;gt; file is the template which displays the module output.&lt;br /&gt;
&lt;br /&gt;
==== Completed tmpl/default.php file ====&lt;br /&gt;
The code for the tmpl/default.php file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
echo &#039;[PROJECT_NAME]&#039;; &lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
An important point to note is that the template file has the same scope as the &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file. It means that a variable can be defined in the &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file and then used in the template file without any extra declarations or function calls.&lt;br /&gt;
&lt;br /&gt;
=== Creating mod_foo.xml ===&lt;br /&gt;
The &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is the installation file. Most entries are self-explanatory.&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml file ====&lt;br /&gt;
The code for the &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt;  file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Создание языковых файлов ===&lt;br /&gt;
Файлы &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; и &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt; используются для перевода текста на сайте и панели администратора. Обратите внимание, что структура языкового файла была обновлена в Joomla 4, и языковые префиксы для отдельных файлов в языковой папке больше не требуются.&lt;br /&gt;
&lt;br /&gt;
Код для &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt; выглядит следующим образом:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Код для &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; выглядит следующим образом:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Файл &amp;lt;tt&amp;gt;.sys.ini&amp;lt;/tt&amp;gt; используется для перевода описания расширения при установке, тогда как файл &amp;lt;tt&amp;gt;.ini&amp;lt;/tt&amp;gt; используется для перевода оставшихся строк и описания при просмотре вашего расширения. &lt;br /&gt;
&lt;br /&gt;
Более подробную информацию о языковых файлах можно найти [[S:MyLanguage/Specification_of_language_files|here]].&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&amp;lt;br /&amp;gt;&lt;br /&gt;
After that you can choose your module in the module manager, when you create a new site module. &lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial1-en.png|700px|center]]&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial2-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
In the frontend, you will see your module like displayed in the next image.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial3-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
Module development for Joomla is a fairly simple, straightforward process. Using the techniques described in this tutorial, an endless variety of modules can be developed with little hassle.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Add a helper class using namespaces - Part 2==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
== Namespaces ==&lt;br /&gt;
With PHP 5.3, the namespaces came into their own. In other programming languages for a long time in use, these small structures now also help us with the clarity of our code. &lt;br /&gt;
&lt;br /&gt;
Namespaces are separate areas in which certain logical things (in our case, classes, interfaces, functions, and constants) can live. These areas provide encapsulation of the code and prevent name conflicts.&lt;br /&gt;
&lt;br /&gt;
Let&#039;s take a look how to use them in Joomla 4. We use the helper file for this.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will create/change the following files:&lt;br /&gt;
* &amp;lt;code&amp;gt;Helper/FooHelper.php&amp;lt;/code&amp;gt; - This is the file we use here as an example. We have to create it.&lt;br /&gt;
* &amp;lt;code&amp;gt;mod_foo.php&amp;lt;/code&amp;gt; - In this file, we will mainly load the namespace.&lt;br /&gt;
* &amp;lt;code&amp;gt;tmpl/default.php&amp;lt;/code&amp;gt; - In this file, we will demonstrate how the data of a helper can be displayed.&lt;br /&gt;
* &amp;lt;code&amp;gt;mod_foo.xml&amp;lt;/code&amp;gt; - We create a new directory with a new file. This must be installed during the installation. For this we have to specify them in this file.&lt;br /&gt;
&lt;br /&gt;
=== Creating Helper/FooHelper.php ===&lt;br /&gt;
Our new helper class should belong to a namespace. We achieve this with the following code. It is important, that this line is at the beginning of the file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;namespace Joomla\Module\Foo\Site\Helper;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then we create a simple class with a simple method. Of course you can do a lot more here. Take a look at the Joomla core methods. Here are many examples. They show you first-hand what options you have.&lt;br /&gt;
&lt;br /&gt;
==== Completed Helper/FooHelper.php ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;FooHelper.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package     Joomla.Site&lt;br /&gt;
 * @subpackage  mod_foo&lt;br /&gt;
 *&lt;br /&gt;
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.&lt;br /&gt;
 * @license     GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
namespace Joomla\Module\Foo\Site\Helper;&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
/**&lt;br /&gt;
 * Helper for mod_foo&lt;br /&gt;
 *&lt;br /&gt;
 * @since  4.0&lt;br /&gt;
 */&lt;br /&gt;
class FooHelper&lt;br /&gt;
{&lt;br /&gt;
	/**&lt;br /&gt;
	 * Retrieve foo test&lt;br /&gt;
	 *&lt;br /&gt;
	 * @param   Registry        $params  The module parameters&lt;br /&gt;
	 * @param   CMSApplication  $app     The application&lt;br /&gt;
	 *&lt;br /&gt;
	 * @return  array&lt;br /&gt;
	 */&lt;br /&gt;
	public static function getText()&lt;br /&gt;
	{&lt;br /&gt;
		return &#039;FooHelpertest&#039;;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.php ===&lt;br /&gt;
Our new helper class is imported to our current scope at the beginning of the file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;use Joomla\Module\Foo\Site\Helper\FooHelper;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Last use the helper file for testing if it is loaded correctlyː&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;$test  = FooHelper::getText($params, $app);&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.php file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
use Joomla\CMS\Helper\ModuleHelper;&lt;br /&gt;
use Joomla\Module\Foo\Site\Helper\FooHelper;&lt;br /&gt;
&lt;br /&gt;
$test  = FooHelper::getText();&lt;br /&gt;
&lt;br /&gt;
require ModuleHelper::getLayoutPath(&#039;mod_foo&#039;, $params-&amp;gt;get(&#039;layout&#039;, &#039;default&#039;));&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing tmpl/default.php ===&lt;br /&gt;
In this file you make only a small change to demonstrate in the frontend that your helper file is working properly. You only add the value of the variable at the end of the current output.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;echo &#039;[PROJECT_NAME]&#039; . $test;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed tmpl/default.php ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
echo &#039;[PROJECT_NAME]&#039; . $test; &lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.xml ===&lt;br /&gt;
First you have to add a line, so that the namespace is set automatically in Joomla. After this change, you have to re-install your module. A simple change in an already installed module is not enough. If you are doing local development you can also delete the files libraries/autoload_psr4.php and it will automatically be re-created. After inserting and installing, the namespace is known by the loader &amp;lt;tt&amp;gt;JPATH_LIBRARIES . &#039;/autoload_psr4.php&#039;&amp;lt;/tt&amp;gt;.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Joomla! should copy your helper file when installing the module. So Joomla! needs to know your helper file. For this, you need to add the following line to your XML file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&lt;br /&gt;
After that you can choose your module in the module manager, when you create a new site module. &lt;br /&gt;
&lt;br /&gt;
In the frontend you will see your module like displayed in the next image. The text from your helper file is displayed.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial23-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
As you can see, once you get a bit into the namespaces, they are not that complicated anymore. In big projects they can bring a lot of benefits. However, we should plan namespaces, as otherwise it will soon be more time-consuming.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Customizationː Add parameters via form fields - Part 3 ==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
== Customization with form fields and parameters ==&lt;br /&gt;
Form fields give a great deal of customization in Joomla and for modules are the sole way of allowing the user to tweak the module to the needs of their site. &lt;br /&gt;
&lt;br /&gt;
In this case we are going to extend our previous example using a url field for inserting a domain that we can use as link in the front end. To allow this to happen we will use the [[S:MyLanguage/URL_form_field_type|URL Form Field]] type.&lt;br /&gt;
&lt;br /&gt;
After that, we insert parameters that allow to use standard functionality of Joomla.&lt;br /&gt;
&lt;br /&gt;
Let&#039;s take a look on how to use them in Joomla 4.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will change the following files:&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - This is the file where we add the fields.&lt;br /&gt;
* &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; - In this file demonstrate how the data of a field can be used.&lt;br /&gt;
* &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.ini&amp;lt;/tt&amp;gt; - Here we use a language string so that the field can be labeled correctly in different languages.&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.xml ===&lt;br /&gt;
First we set a custom parameter.  &lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
    type=&amp;quot;url&amp;quot;&lt;br /&gt;
    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then we insert Joomla default fields, so that we can use cache, moduleclass-suffix and layouts.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
    type=&amp;quot;list&amp;quot;&lt;br /&gt;
    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
    default=&amp;quot;0&amp;quot;&lt;br /&gt;
&amp;gt;&lt;br /&gt;
    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
&amp;lt;/field&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
    type=&amp;quot;number&amp;quot;&lt;br /&gt;
    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
    default=&amp;quot;0&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
&amp;gt;&lt;br /&gt;
    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
&amp;lt;/field&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
    &amp;lt;config&amp;gt;&lt;br /&gt;
        &amp;lt;fields name=&amp;quot;params&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;basic&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
                    type=&amp;quot;url&amp;quot;&lt;br /&gt;
                    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
                    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;advanced&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
                    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
                    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
                    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
                    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
                    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
                    type=&amp;quot;list&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
                    type=&amp;quot;number&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
                    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
                    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
        &amp;lt;/fields&amp;gt;&lt;br /&gt;
    &amp;lt;/config&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing tmpl/default.php ===&lt;br /&gt;
We can use the value of the parameter for creating a hyperlink in the frontend. We can access the value via the variable $params.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;$domain = $params-&amp;gt;get(&#039;domain&#039;, &#039;https://www.joomla.org&#039;);&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Later we set use this value for creating the hyperlink.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;a href=&amp;quot;&amp;lt;?php echo $domain; ?&amp;gt;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;?php echo &#039;[PROJECT_NAME]&#039; . $test; ?&amp;gt;&lt;br /&gt;
&amp;lt;/a&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed tmpl/default.php file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
$domain = $params-&amp;gt;get(&#039;domain&#039;, &#039;https://www.joomla.org&#039;);&lt;br /&gt;
?&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;a href=&amp;quot;&amp;lt;?php echo $domain; ?&amp;gt;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;?php echo &#039;[PROJECT_NAME]&#039; . $test; ?&amp;gt;&lt;br /&gt;
&amp;lt;/a&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing language/en-GB/en-GB.mod_foo.ini ===&lt;br /&gt;
Here we can specify the text for the English version of the field label.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;MOD_FOO_FIELD_URL_LABEL=&amp;quot;Url&amp;quot;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed language/en-GB/en-GB.mod_foo.ini ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.ini&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
MOD_FOO_FIELD_URL_LABEL=&amp;quot;Url&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&lt;br /&gt;
After that you can choose your module in the module manager, when you create a new site module. &lt;br /&gt;
&lt;br /&gt;
In the backend, you will see your module like displayed in the next image. &lt;br /&gt;
&lt;br /&gt;
In the basic tab, you will see the custom field where you can insert a domain. The text for the label is fetched from the language file. &lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial31-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
In the advanced tab, you will see all default options except the cache mode because of this is a hidden field.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial32-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
In the frontend, you will see your module like displayed in the next image. The text form your helper file is displayed and you should see a hyperlink.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial33-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
Form fields give the user an easy way to customize the module to their sites settings. This allows the modules scope to be increased. &lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
See this issue for possible future changes:&lt;br /&gt;
* https://github.com/joomla/joomla-cms/pull/23553&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Use Install, Update and Uninstall script - Part 4 ==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
=== Scripts ===&lt;br /&gt;
Installing, updating and uninstalling a module may require additional operations that cannot be achieved by the basic operations described in the main XML file. Joomla offers a new approach to solve this problem. It consists in using a PHP script file containing a class using five methods:&lt;br /&gt;
* preflight which is executed before install and update&lt;br /&gt;
* install&lt;br /&gt;
* update&lt;br /&gt;
* uninstall&lt;br /&gt;
* postflight which is executed after install and update&lt;br /&gt;
&lt;br /&gt;
Let&#039;s take a look how to use them in Joomla 4. We use the helper file for this.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will create/change the following files:&lt;br /&gt;
* &amp;lt;tt&amp;gt;script.php&amp;lt;/tt&amp;gt; - This is the file we use here as an example. We have to create it.&lt;br /&gt;
* &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.sys.ini&amp;lt;/tt&amp;gt; - In this file we will add text.&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - We create a new file. This must be installed during the installation. For this we have to specify it in this file.&lt;br /&gt;
&lt;br /&gt;
=== Creating script.php ===&lt;br /&gt;
Writing an extension script consists in declaring a class whose name is &amp;lt;tt&amp;gt;mod_ModuleNameInstallerScript&amp;lt;/tt&amp;gt; with these 5 methods. See the comments in the file for more information. In this comments I explain when a method is called. &lt;br /&gt;
&lt;br /&gt;
In this example, I only use text to show when which method will be executed. In addition, I show you how to check the minimum requirements. Of course you can do much more. For example, you can delete files that are no longer needed in a new version of your module. This can be seen in the file. Another idea for this file is to create sample content, to show a success message with the current installed version number or you can redirect after a successful installation to the page with the module settings. &lt;br /&gt;
&lt;br /&gt;
==== Completed script.php ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;script.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
use Joomla\CMS\Language\Text;&lt;br /&gt;
use Joomla\CMS\Log\Log;&lt;br /&gt;
&lt;br /&gt;
/**&lt;br /&gt;
 * Script file of Foo module&lt;br /&gt;
 */&lt;br /&gt;
class mod_fooInstallerScript {&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Extension script constructor.&lt;br /&gt;
     *&lt;br /&gt;
     * @return  void&lt;br /&gt;
     */&lt;br /&gt;
    public function __construct() {&lt;br /&gt;
        $this-&amp;gt;minimumJoomla = &#039;4.0&#039;;&lt;br /&gt;
        $this-&amp;gt;minimumPhp = JOOMLA_MINIMUM_PHP;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Method to install the extension&lt;br /&gt;
     *&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function install($parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_INSTALL&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Method to uninstall the extension&lt;br /&gt;
     *&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function uninstall($parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_UNINSTALL&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Method to update the extension&lt;br /&gt;
     *&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function update($parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_UPDATE&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Function called before extension installation/update/removal procedure commences&lt;br /&gt;
     *&lt;br /&gt;
     * @param   string            $type    The type of change (install, update or discover_install, not uninstall)&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function preflight($type, $parent) {&lt;br /&gt;
        // Check for the minimum PHP version before continuing&lt;br /&gt;
        if (!empty($this-&amp;gt;minimumPhp) &amp;amp;&amp;amp; version_compare(PHP_VERSION, $this-&amp;gt;minimumPhp, &#039;&amp;lt;&#039;)) {&lt;br /&gt;
            Log::add(Text::sprintf(&#039;JLIB_INSTALLER_MINIMUM_PHP&#039;, $this-&amp;gt;minimumPhp), Log::WARNING, &#039;jerror&#039;);&lt;br /&gt;
&lt;br /&gt;
            return false;&lt;br /&gt;
        }&lt;br /&gt;
&lt;br /&gt;
        // Check for the minimum Joomla version before continuing&lt;br /&gt;
        if (!empty($this-&amp;gt;minimumJoomla) &amp;amp;&amp;amp; version_compare(JVERSION, $this-&amp;gt;minimumJoomla, &#039;&amp;lt;&#039;)) {&lt;br /&gt;
            Log::add(Text::sprintf(&#039;JLIB_INSTALLER_MINIMUM_JOOMLA&#039;, $this-&amp;gt;minimumJoomla), Log::WARNING, &#039;jerror&#039;);&lt;br /&gt;
&lt;br /&gt;
            return false;&lt;br /&gt;
        }&lt;br /&gt;
        &lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_PREFLIGHT&#039;);&lt;br /&gt;
        echo $this-&amp;gt;minimumJoomla . &#039; &#039; . $this-&amp;gt;minimumPhp;&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Function called after extension installation/update/removal procedure commences&lt;br /&gt;
     *&lt;br /&gt;
     * @param   string            $type    The type of change (install, update or discover_install, not uninstall)&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function postflight($type, $parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_POSTFLIGHT&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing language/en-GB/en-GB.mod_foo.sys.ini ===&lt;br /&gt;
There is not much to explain here. Write the text for the translation into this file.&lt;br /&gt;
&lt;br /&gt;
==== Completed language/en-GB/en-GB.mod_foo.sys.ini file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.sys.ini&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_PREFLIGHT=&amp;quot;&amp;lt;p&amp;gt;Anything here happens before the installation/update/uninstallation of the module&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_UPDATE=&amp;quot;&amp;lt;p&amp;gt;The module has been updated&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_UNINSTALL=&amp;quot;&amp;lt;p&amp;gt;The module has been uninstalled&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_INSTALL=&amp;quot;&amp;lt;p&amp;gt;The module has been installed&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_POSTFLIGHT=&amp;quot;&amp;lt;p&amp;gt;Anything here happens after the installation/update/uninstallation of the module&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.xml ===&lt;br /&gt;
You have to add a line, so that the script is called automatically in Joomla. &lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;scriptfile&amp;gt;script.php&amp;lt;/scriptfile&amp;gt;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;scriptfile&amp;gt;script.php&amp;lt;/scriptfile&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
    &amp;lt;config&amp;gt;&lt;br /&gt;
        &amp;lt;fields name=&amp;quot;params&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;basic&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
                    type=&amp;quot;url&amp;quot;&lt;br /&gt;
                    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
                    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;advanced&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
                    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
                    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
                    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
                    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
                    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
                    type=&amp;quot;list&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
                    type=&amp;quot;number&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
                    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
                    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
        &amp;lt;/fields&amp;gt;&lt;br /&gt;
    &amp;lt;/config&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&lt;br /&gt;
Immediately after the installation, you will see the following information. This you had entered in the script so.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial14-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
As you can see, Joomla offers you a lot to make your extension easy to use - right from the start.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Use Joomla Updaterː Adding Auto Update - Part 5 ==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
=== Joomla Updater ===&lt;br /&gt;
The first thing to do is to read the [[S:MyLanguage/J2.5:Managing_Component_Updates|Managing Component Upgrades with Joomla 2.5 - Part 1]] tutorial to give an idea of how the upgrade process works in Joomlaǃ. Whilst written for 2.5 the process hasn&#039;t changed. Also read [[S:MyLanguage/Deploying_an_Update_Server|Deploying an update server]] - this is what we&#039;ll be implementing in this tutorial.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will create/change the following files:&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - The only way to update our existing module is to add in a update server - for example &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/foo_update.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; - into the xml file. &lt;br /&gt;
* &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt; - Then we have to create the XML file for the update server at &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/foo_update.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; to let Joomla know an update is available. &lt;br /&gt;
&lt;br /&gt;
==== Editing mod_foo.xml ====&lt;br /&gt;
To add our update server, we need to insert the following lines in your XML-Fileː&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;updateservers&amp;gt;&lt;br /&gt;
    &amp;lt;server type=&amp;quot;extension&amp;quot; priority=&amp;quot;1&amp;quot; name=&amp;quot;[PROJECT_NAME]&amp;quot;&amp;gt;https://www.example.com/mod_foo.xml&amp;lt;/server&amp;gt;&lt;br /&gt;
&amp;lt;/updateservers&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
    &amp;lt;updateservers&amp;gt;&lt;br /&gt;
        &amp;lt;server type=&amp;quot;extension&amp;quot; priority=&amp;quot;1&amp;quot; name=&amp;quot;[PROJECT_NAME]&amp;quot;&amp;gt;https://www.example.com/mod_foo.xml&amp;lt;/server&amp;gt;&lt;br /&gt;
    &amp;lt;/updateservers&amp;gt;&lt;br /&gt;
    &amp;lt;config&amp;gt;&lt;br /&gt;
        &amp;lt;fields name=&amp;quot;params&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;basic&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
                    type=&amp;quot;url&amp;quot;&lt;br /&gt;
                    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
                    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;advanced&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
                    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
                    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
                    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
                    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
                    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
                    type=&amp;quot;list&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
                    type=&amp;quot;number&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
                    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
                    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
        &amp;lt;/fields&amp;gt;&lt;br /&gt;
    &amp;lt;/config&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
So now that Joomlaǃ is searching for updates to our extension - let&#039;s create one to test out our process. But first we need to create the file &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt;. So far we have only described the update server. We do not know yet if there is an update. In the file &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt; we indicate when a new version is published and where it can be downloaded.&lt;br /&gt;
&lt;br /&gt;
=== Creating foo_update.xml ===&lt;br /&gt;
Now we have to create the XML file at &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/foo_update.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; to let Joomla know an update is available. &lt;br /&gt;
 &lt;br /&gt;
==== Completed foo_update.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; ?&amp;gt;&lt;br /&gt;
&amp;lt;updates&amp;gt;&lt;br /&gt;
    &amp;lt;update&amp;gt;&lt;br /&gt;
        &amp;lt;name&amp;gt;Foo&amp;lt;/name&amp;gt;&lt;br /&gt;
        &amp;lt;description&amp;gt;This is mod_foo 1.0.1&amp;lt;/description&amp;gt;&lt;br /&gt;
        &amp;lt;element&amp;gt;mod_foo&amp;lt;/element&amp;gt;&lt;br /&gt;
        &amp;lt;type&amp;gt;module&amp;lt;/type&amp;gt;&lt;br /&gt;
        &amp;lt;version&amp;gt;1.0.1&amp;lt;/version&amp;gt;&lt;br /&gt;
        &amp;lt;downloads&amp;gt;&lt;br /&gt;
            &amp;lt;downloadurl type=&amp;quot;full&amp;quot; format=&amp;quot;zip&amp;quot;&amp;gt;http://www.example.com/mod_foo_101.zip&amp;lt;/downloadurl&amp;gt;&lt;br /&gt;
        &amp;lt;/downloads&amp;gt;&lt;br /&gt;
        &amp;lt;maintainer&amp;gt;Joomla&amp;lt;/maintainer&amp;gt;&lt;br /&gt;
        &amp;lt;maintainerurl&amp;gt;http://www.example.com&amp;lt;/maintainerurl&amp;gt;&lt;br /&gt;
        &amp;lt;targetplatform name=&amp;quot;joomla&amp;quot; version=&amp;quot;4.0&amp;quot;/&amp;gt;&lt;br /&gt;
        &amp;lt;client&amp;gt;site&amp;lt;/client&amp;gt;&lt;br /&gt;
    &amp;lt;/update&amp;gt;&lt;br /&gt;
&amp;lt;/updates&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
After uploading this file to the address &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;https://www.example.com/mod_foo.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; the update will be displayed in the Joomla backend.&lt;br /&gt;
&lt;br /&gt;
=== Test your module update ===&lt;br /&gt;
Create a copy of the module as it is now. Then let&#039;s update the version number to 1.0.1. Now you can zip all files. After that you should load your zip to the URL &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/mod_foo_101.zip&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt;. Now you can update your module via the Joomla Updater.&lt;br /&gt;
&lt;br /&gt;
=== Commercial Modules ===&lt;br /&gt;
Note that in our files we have linked to the extensions updates xml file. And from that xml file we have a location for the zip of the module. This means that if someone was to track this backwards they could find the physical source of your modules zip file. If you don&#039;t do like this, you can find a solution in this PRː https://github.com/joomla/joomla-cms/pull/15185 .&lt;br /&gt;
&lt;br /&gt;
=== Conclusion ===&lt;br /&gt;
With the Joomlaǃ updater, you can easily reach all users and tell them that there is a new version. Even the update itself is easy. &lt;br /&gt;
&lt;br /&gt;
Each extension should use an update server. Especially for security reasons.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Beginner Development{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials in a Series{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
[[Category:Module Development{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Creating_a_Simple_Module/54/ru&amp;diff=848194</id>
		<title>Translations:J4.x:Creating a Simple Module/54/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Creating_a_Simple_Module/54/ru&amp;diff=848194"/>
		<updated>2021-11-17T14:28:52Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Более подробную информацию о языковых файлах можно найти here.&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Более подробную информацию о языковых файлах можно найти [[S:MyLanguage/Specification_of_language_files|here]].&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Creating_a_Simple_Module/ru&amp;diff=848193</id>
		<title>J4.x:Creating a Simple Module/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Creating_a_Simple_Module/ru&amp;diff=848193"/>
		<updated>2021-11-17T14:28:13Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
{{Joomla version|version=4.x|comment=&amp;gt;Tutorial}}&lt;br /&gt;
{{-}}&lt;br /&gt;
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Creating a Simple Module for Joomla 4.x}}&lt;br /&gt;
{{-}}&lt;br /&gt;
&lt;br /&gt;
This is a tutorial on how to Create a simple module for Joomla Version 4x. &lt;br /&gt;
== Introduction ==&lt;br /&gt;
Joomlaǃ 4 provides five types of extensionsː&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Component|Components]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;A component is the main part of the site. A component handles data manipulation as well as input and storage into the database. A component on most sites is the primary focus of the page.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Module|Modules]]&#039;&#039;&#039; &amp;lt;br /&amp;gt;A module is an add-on to the site that extends the functionality. A module usually occupies a secondary portion of the web page and is not considered the primary focus of a page. It can be displayed on different positions and you can choose on which active menu items it should be displayed. Modules are lightweight and flexible extensions. They are used for small bits of the page that are generally less complex and are able to be seen across different components.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Plugin|Plugins]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;A Plugin manipulates output that is already generated by the system. It typically does not run as separate part of the site. It takes data from other sources (i.e. the content) and manipulates this data before displaying. A plugin typically work behind the scenes.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Languages|Languages]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;Probably the most basic extensions are languages. In essence the language package files consist of key/value pairs, which provide the translation of static text strings, assigned within the Joomla! source code.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Templates|Templates]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;A template is basically the design of your Joomla! powered website.&lt;br /&gt;
&lt;br /&gt;
Joomla! 4 is constructed using five different applications:&lt;br /&gt;
* Installation (used for installing Joomla and have to delete after installation);&lt;br /&gt;
* Administrator (backend - used for managing content);&lt;br /&gt;
* Public or site (frontend - used for displaying content);&lt;br /&gt;
* CLI (used for accessing Joomla on the command line and for cron jobs);&lt;br /&gt;
* API (web services - used for creating APIs for machine accessible content);&lt;br /&gt;
The installation application is used once. The administrator and public are used through the concept of &#039;&#039;components&#039;&#039; with &#039;&#039;modules&#039;&#039;. Each module has a single entry point located in the &#039;&#039;modules&#039;&#039; and accordingly &#039;&#039;administrator/modules&#039;&#039;  directory. This entry point is called &amp;lt;tt&amp;gt;&#039;&#039;mod_modulename/mod_modulename.php&#039;&#039;&amp;lt;/tt&amp;gt; (the &#039;&#039;mod_&#039;&#039; prefix is a historical trace). The entry point for the login module is for example &#039;&#039;/mod_login/mod_login.php&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x installation available to use for this tutorial ([https://github.com/joomla/joomla-cms/releases Download latest release here])&lt;br /&gt;
&lt;br /&gt;
You can download Joomla! 4 at [https://github.com/joomla/joomla-cms/releases GitHub], on the [https://developer.joomla.org/nightly-builds.html Developer website] or you can create a free website at https://launch.joomla.org.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Creating a simple module/Developing a Basic Module - Part 1 ==&lt;br /&gt;
You can see many examples of modules in the standard Joomla! install. For example:&lt;br /&gt;
* Menus &lt;br /&gt;
* Latest News&lt;br /&gt;
* Login form&lt;br /&gt;
* and many more.&lt;br /&gt;
&lt;br /&gt;
This tutorial will explain how to create a simple module. Through this tutorial you will learn the basic file structure of a Joomlaǃ 4 module. This basic structure can then be expanded to produce more elaborate modules.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
There are a few basic files that are used in the standard pattern of module development:&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; - This file is the main entry point for the module. It will perform any necessary initialization routines, call helper routines to collect any necessary data, and include the template which will display the module output.&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - This file contains information about the module. It defines the files that need to be installed by the Joomla! installer and specifies configuration parameters for the module.&lt;br /&gt;
* &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; - This is the module template. This file will take the data collected by mod_foo.php and generate the HTML to be displayed on the page.&lt;br /&gt;
* &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; and &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt;- This are the files that provide the text in United Kingdom English.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== Creating mod_foo.php ===&lt;br /&gt;
The &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file will perform following tasks:&lt;br /&gt;
* Import the class &amp;lt;tt&amp;gt;ModuleHelper&amp;lt;/tt&amp;gt; to the current scope. We need it later for displaying the output.&lt;br /&gt;
* Include the template to display the output.&lt;br /&gt;
&lt;br /&gt;
The helper class is imported to our current scope at the begin of the file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;use Joomla\CMS\Helper\ModuleHelper;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Last we include the template to display the output via&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;require ModuleHelper::getLayoutPath(&#039;mod_foo&#039;, $params-&amp;gt;get(&#039;layout&#039;, &#039;default&#039;));&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.php file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
use Joomla\CMS\Helper\ModuleHelper;&lt;br /&gt;
&lt;br /&gt;
require ModuleHelper::getLayoutPath(&#039;mod_foo&#039;, $params-&amp;gt;get(&#039;layout&#039;, &#039;default&#039;));&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;Side note&#039;&#039;ː In Joomla 3x you usually used a line like &amp;lt;tt&amp;gt;$moduleclass_sfx = htmlspecialchars($params-&amp;gt;get(&#039;moduleclass_sfx&#039;));&amp;lt;/tt&amp;gt;. You don&#039;t need this anymore. See this PRː https://github.com/joomla/joomla-cms/pull/17447. &lt;br /&gt;
&lt;br /&gt;
The one line that we haven’t explained so far is the first line &amp;lt;tt&amp;gt;defined(&#039;_JEXEC&#039;) or die;&amp;lt;/tt&amp;gt;. This line checks to make sure that this file is being included from the Joomla application. This is necessary to prevent variable injection and other potential security concerns.&lt;br /&gt;
&lt;br /&gt;
=== Creating tmpl/default.php ===&lt;br /&gt;
The &amp;lt;tt&amp;gt;default.php&amp;lt;/tt&amp;gt; file is the template which displays the module output.&lt;br /&gt;
&lt;br /&gt;
==== Completed tmpl/default.php file ====&lt;br /&gt;
The code for the tmpl/default.php file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
echo &#039;[PROJECT_NAME]&#039;; &lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
An important point to note is that the template file has the same scope as the &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file. It means that a variable can be defined in the &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file and then used in the template file without any extra declarations or function calls.&lt;br /&gt;
&lt;br /&gt;
=== Creating mod_foo.xml ===&lt;br /&gt;
The &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is the installation file. Most entries are self-explanatory.&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml file ====&lt;br /&gt;
The code for the &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt;  file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Создание языковых файлов ===&lt;br /&gt;
Файлы &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; и &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt; используются для перевода текста на сайте и панели администратора. Обратите внимание, что структура языкового файла была обновлена в Joomla 4, и языковые префиксы для отдельных файлов в языковой папке больше не требуются.&lt;br /&gt;
&lt;br /&gt;
Код для &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt; выглядит следующим образом:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Код для &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; выглядит следующим образом:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Файл &amp;lt;tt&amp;gt;.sys.ini&amp;lt;/tt&amp;gt; используется для перевода описания расширения при установке, тогда как файл &amp;lt;tt&amp;gt;.ini&amp;lt;/tt&amp;gt; используется для перевода оставшихся строк и описания при просмотре вашего расширения. &lt;br /&gt;
&lt;br /&gt;
More information about language files can be found [[S:MyLanguage/Specification_of_language_files|here]].&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&amp;lt;br /&amp;gt;&lt;br /&gt;
After that you can choose your module in the module manager, when you create a new site module. &lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial1-en.png|700px|center]]&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial2-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
In the frontend, you will see your module like displayed in the next image.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial3-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
Module development for Joomla is a fairly simple, straightforward process. Using the techniques described in this tutorial, an endless variety of modules can be developed with little hassle.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Add a helper class using namespaces - Part 2==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
== Namespaces ==&lt;br /&gt;
With PHP 5.3, the namespaces came into their own. In other programming languages for a long time in use, these small structures now also help us with the clarity of our code. &lt;br /&gt;
&lt;br /&gt;
Namespaces are separate areas in which certain logical things (in our case, classes, interfaces, functions, and constants) can live. These areas provide encapsulation of the code and prevent name conflicts.&lt;br /&gt;
&lt;br /&gt;
Let&#039;s take a look how to use them in Joomla 4. We use the helper file for this.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will create/change the following files:&lt;br /&gt;
* &amp;lt;code&amp;gt;Helper/FooHelper.php&amp;lt;/code&amp;gt; - This is the file we use here as an example. We have to create it.&lt;br /&gt;
* &amp;lt;code&amp;gt;mod_foo.php&amp;lt;/code&amp;gt; - In this file, we will mainly load the namespace.&lt;br /&gt;
* &amp;lt;code&amp;gt;tmpl/default.php&amp;lt;/code&amp;gt; - In this file, we will demonstrate how the data of a helper can be displayed.&lt;br /&gt;
* &amp;lt;code&amp;gt;mod_foo.xml&amp;lt;/code&amp;gt; - We create a new directory with a new file. This must be installed during the installation. For this we have to specify them in this file.&lt;br /&gt;
&lt;br /&gt;
=== Creating Helper/FooHelper.php ===&lt;br /&gt;
Our new helper class should belong to a namespace. We achieve this with the following code. It is important, that this line is at the beginning of the file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;namespace Joomla\Module\Foo\Site\Helper;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then we create a simple class with a simple method. Of course you can do a lot more here. Take a look at the Joomla core methods. Here are many examples. They show you first-hand what options you have.&lt;br /&gt;
&lt;br /&gt;
==== Completed Helper/FooHelper.php ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;FooHelper.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package     Joomla.Site&lt;br /&gt;
 * @subpackage  mod_foo&lt;br /&gt;
 *&lt;br /&gt;
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.&lt;br /&gt;
 * @license     GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
namespace Joomla\Module\Foo\Site\Helper;&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
/**&lt;br /&gt;
 * Helper for mod_foo&lt;br /&gt;
 *&lt;br /&gt;
 * @since  4.0&lt;br /&gt;
 */&lt;br /&gt;
class FooHelper&lt;br /&gt;
{&lt;br /&gt;
	/**&lt;br /&gt;
	 * Retrieve foo test&lt;br /&gt;
	 *&lt;br /&gt;
	 * @param   Registry        $params  The module parameters&lt;br /&gt;
	 * @param   CMSApplication  $app     The application&lt;br /&gt;
	 *&lt;br /&gt;
	 * @return  array&lt;br /&gt;
	 */&lt;br /&gt;
	public static function getText()&lt;br /&gt;
	{&lt;br /&gt;
		return &#039;FooHelpertest&#039;;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.php ===&lt;br /&gt;
Our new helper class is imported to our current scope at the beginning of the file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;use Joomla\Module\Foo\Site\Helper\FooHelper;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Last use the helper file for testing if it is loaded correctlyː&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;$test  = FooHelper::getText($params, $app);&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.php file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
use Joomla\CMS\Helper\ModuleHelper;&lt;br /&gt;
use Joomla\Module\Foo\Site\Helper\FooHelper;&lt;br /&gt;
&lt;br /&gt;
$test  = FooHelper::getText();&lt;br /&gt;
&lt;br /&gt;
require ModuleHelper::getLayoutPath(&#039;mod_foo&#039;, $params-&amp;gt;get(&#039;layout&#039;, &#039;default&#039;));&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing tmpl/default.php ===&lt;br /&gt;
In this file you make only a small change to demonstrate in the frontend that your helper file is working properly. You only add the value of the variable at the end of the current output.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;echo &#039;[PROJECT_NAME]&#039; . $test;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed tmpl/default.php ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
echo &#039;[PROJECT_NAME]&#039; . $test; &lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.xml ===&lt;br /&gt;
First you have to add a line, so that the namespace is set automatically in Joomla. After this change, you have to re-install your module. A simple change in an already installed module is not enough. If you are doing local development you can also delete the files libraries/autoload_psr4.php and it will automatically be re-created. After inserting and installing, the namespace is known by the loader &amp;lt;tt&amp;gt;JPATH_LIBRARIES . &#039;/autoload_psr4.php&#039;&amp;lt;/tt&amp;gt;.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Joomla! should copy your helper file when installing the module. So Joomla! needs to know your helper file. For this, you need to add the following line to your XML file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&lt;br /&gt;
After that you can choose your module in the module manager, when you create a new site module. &lt;br /&gt;
&lt;br /&gt;
In the frontend you will see your module like displayed in the next image. The text from your helper file is displayed.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial23-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
As you can see, once you get a bit into the namespaces, they are not that complicated anymore. In big projects they can bring a lot of benefits. However, we should plan namespaces, as otherwise it will soon be more time-consuming.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Customizationː Add parameters via form fields - Part 3 ==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
== Customization with form fields and parameters ==&lt;br /&gt;
Form fields give a great deal of customization in Joomla and for modules are the sole way of allowing the user to tweak the module to the needs of their site. &lt;br /&gt;
&lt;br /&gt;
In this case we are going to extend our previous example using a url field for inserting a domain that we can use as link in the front end. To allow this to happen we will use the [[S:MyLanguage/URL_form_field_type|URL Form Field]] type.&lt;br /&gt;
&lt;br /&gt;
After that, we insert parameters that allow to use standard functionality of Joomla.&lt;br /&gt;
&lt;br /&gt;
Let&#039;s take a look on how to use them in Joomla 4.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will change the following files:&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - This is the file where we add the fields.&lt;br /&gt;
* &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; - In this file demonstrate how the data of a field can be used.&lt;br /&gt;
* &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.ini&amp;lt;/tt&amp;gt; - Here we use a language string so that the field can be labeled correctly in different languages.&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.xml ===&lt;br /&gt;
First we set a custom parameter.  &lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
    type=&amp;quot;url&amp;quot;&lt;br /&gt;
    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then we insert Joomla default fields, so that we can use cache, moduleclass-suffix and layouts.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
    type=&amp;quot;list&amp;quot;&lt;br /&gt;
    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
    default=&amp;quot;0&amp;quot;&lt;br /&gt;
&amp;gt;&lt;br /&gt;
    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
&amp;lt;/field&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
    type=&amp;quot;number&amp;quot;&lt;br /&gt;
    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
    default=&amp;quot;0&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
&amp;gt;&lt;br /&gt;
    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
&amp;lt;/field&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
    &amp;lt;config&amp;gt;&lt;br /&gt;
        &amp;lt;fields name=&amp;quot;params&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;basic&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
                    type=&amp;quot;url&amp;quot;&lt;br /&gt;
                    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
                    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;advanced&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
                    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
                    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
                    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
                    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
                    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
                    type=&amp;quot;list&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
                    type=&amp;quot;number&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
                    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
                    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
        &amp;lt;/fields&amp;gt;&lt;br /&gt;
    &amp;lt;/config&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing tmpl/default.php ===&lt;br /&gt;
We can use the value of the parameter for creating a hyperlink in the frontend. We can access the value via the variable $params.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;$domain = $params-&amp;gt;get(&#039;domain&#039;, &#039;https://www.joomla.org&#039;);&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Later we set use this value for creating the hyperlink.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;a href=&amp;quot;&amp;lt;?php echo $domain; ?&amp;gt;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;?php echo &#039;[PROJECT_NAME]&#039; . $test; ?&amp;gt;&lt;br /&gt;
&amp;lt;/a&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed tmpl/default.php file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
$domain = $params-&amp;gt;get(&#039;domain&#039;, &#039;https://www.joomla.org&#039;);&lt;br /&gt;
?&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;a href=&amp;quot;&amp;lt;?php echo $domain; ?&amp;gt;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;?php echo &#039;[PROJECT_NAME]&#039; . $test; ?&amp;gt;&lt;br /&gt;
&amp;lt;/a&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing language/en-GB/en-GB.mod_foo.ini ===&lt;br /&gt;
Here we can specify the text for the English version of the field label.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;MOD_FOO_FIELD_URL_LABEL=&amp;quot;Url&amp;quot;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed language/en-GB/en-GB.mod_foo.ini ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.ini&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
MOD_FOO_FIELD_URL_LABEL=&amp;quot;Url&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&lt;br /&gt;
After that you can choose your module in the module manager, when you create a new site module. &lt;br /&gt;
&lt;br /&gt;
In the backend, you will see your module like displayed in the next image. &lt;br /&gt;
&lt;br /&gt;
In the basic tab, you will see the custom field where you can insert a domain. The text for the label is fetched from the language file. &lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial31-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
In the advanced tab, you will see all default options except the cache mode because of this is a hidden field.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial32-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
In the frontend, you will see your module like displayed in the next image. The text form your helper file is displayed and you should see a hyperlink.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial33-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
Form fields give the user an easy way to customize the module to their sites settings. This allows the modules scope to be increased. &lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
See this issue for possible future changes:&lt;br /&gt;
* https://github.com/joomla/joomla-cms/pull/23553&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Use Install, Update and Uninstall script - Part 4 ==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
=== Scripts ===&lt;br /&gt;
Installing, updating and uninstalling a module may require additional operations that cannot be achieved by the basic operations described in the main XML file. Joomla offers a new approach to solve this problem. It consists in using a PHP script file containing a class using five methods:&lt;br /&gt;
* preflight which is executed before install and update&lt;br /&gt;
* install&lt;br /&gt;
* update&lt;br /&gt;
* uninstall&lt;br /&gt;
* postflight which is executed after install and update&lt;br /&gt;
&lt;br /&gt;
Let&#039;s take a look how to use them in Joomla 4. We use the helper file for this.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will create/change the following files:&lt;br /&gt;
* &amp;lt;tt&amp;gt;script.php&amp;lt;/tt&amp;gt; - This is the file we use here as an example. We have to create it.&lt;br /&gt;
* &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.sys.ini&amp;lt;/tt&amp;gt; - In this file we will add text.&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - We create a new file. This must be installed during the installation. For this we have to specify it in this file.&lt;br /&gt;
&lt;br /&gt;
=== Creating script.php ===&lt;br /&gt;
Writing an extension script consists in declaring a class whose name is &amp;lt;tt&amp;gt;mod_ModuleNameInstallerScript&amp;lt;/tt&amp;gt; with these 5 methods. See the comments in the file for more information. In this comments I explain when a method is called. &lt;br /&gt;
&lt;br /&gt;
In this example, I only use text to show when which method will be executed. In addition, I show you how to check the minimum requirements. Of course you can do much more. For example, you can delete files that are no longer needed in a new version of your module. This can be seen in the file. Another idea for this file is to create sample content, to show a success message with the current installed version number or you can redirect after a successful installation to the page with the module settings. &lt;br /&gt;
&lt;br /&gt;
==== Completed script.php ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;script.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
use Joomla\CMS\Language\Text;&lt;br /&gt;
use Joomla\CMS\Log\Log;&lt;br /&gt;
&lt;br /&gt;
/**&lt;br /&gt;
 * Script file of Foo module&lt;br /&gt;
 */&lt;br /&gt;
class mod_fooInstallerScript {&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Extension script constructor.&lt;br /&gt;
     *&lt;br /&gt;
     * @return  void&lt;br /&gt;
     */&lt;br /&gt;
    public function __construct() {&lt;br /&gt;
        $this-&amp;gt;minimumJoomla = &#039;4.0&#039;;&lt;br /&gt;
        $this-&amp;gt;minimumPhp = JOOMLA_MINIMUM_PHP;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Method to install the extension&lt;br /&gt;
     *&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function install($parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_INSTALL&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Method to uninstall the extension&lt;br /&gt;
     *&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function uninstall($parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_UNINSTALL&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Method to update the extension&lt;br /&gt;
     *&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function update($parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_UPDATE&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Function called before extension installation/update/removal procedure commences&lt;br /&gt;
     *&lt;br /&gt;
     * @param   string            $type    The type of change (install, update or discover_install, not uninstall)&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function preflight($type, $parent) {&lt;br /&gt;
        // Check for the minimum PHP version before continuing&lt;br /&gt;
        if (!empty($this-&amp;gt;minimumPhp) &amp;amp;&amp;amp; version_compare(PHP_VERSION, $this-&amp;gt;minimumPhp, &#039;&amp;lt;&#039;)) {&lt;br /&gt;
            Log::add(Text::sprintf(&#039;JLIB_INSTALLER_MINIMUM_PHP&#039;, $this-&amp;gt;minimumPhp), Log::WARNING, &#039;jerror&#039;);&lt;br /&gt;
&lt;br /&gt;
            return false;&lt;br /&gt;
        }&lt;br /&gt;
&lt;br /&gt;
        // Check for the minimum Joomla version before continuing&lt;br /&gt;
        if (!empty($this-&amp;gt;minimumJoomla) &amp;amp;&amp;amp; version_compare(JVERSION, $this-&amp;gt;minimumJoomla, &#039;&amp;lt;&#039;)) {&lt;br /&gt;
            Log::add(Text::sprintf(&#039;JLIB_INSTALLER_MINIMUM_JOOMLA&#039;, $this-&amp;gt;minimumJoomla), Log::WARNING, &#039;jerror&#039;);&lt;br /&gt;
&lt;br /&gt;
            return false;&lt;br /&gt;
        }&lt;br /&gt;
        &lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_PREFLIGHT&#039;);&lt;br /&gt;
        echo $this-&amp;gt;minimumJoomla . &#039; &#039; . $this-&amp;gt;minimumPhp;&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Function called after extension installation/update/removal procedure commences&lt;br /&gt;
     *&lt;br /&gt;
     * @param   string            $type    The type of change (install, update or discover_install, not uninstall)&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function postflight($type, $parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_POSTFLIGHT&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing language/en-GB/en-GB.mod_foo.sys.ini ===&lt;br /&gt;
There is not much to explain here. Write the text for the translation into this file.&lt;br /&gt;
&lt;br /&gt;
==== Completed language/en-GB/en-GB.mod_foo.sys.ini file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.sys.ini&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_PREFLIGHT=&amp;quot;&amp;lt;p&amp;gt;Anything here happens before the installation/update/uninstallation of the module&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_UPDATE=&amp;quot;&amp;lt;p&amp;gt;The module has been updated&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_UNINSTALL=&amp;quot;&amp;lt;p&amp;gt;The module has been uninstalled&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_INSTALL=&amp;quot;&amp;lt;p&amp;gt;The module has been installed&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_POSTFLIGHT=&amp;quot;&amp;lt;p&amp;gt;Anything here happens after the installation/update/uninstallation of the module&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.xml ===&lt;br /&gt;
You have to add a line, so that the script is called automatically in Joomla. &lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;scriptfile&amp;gt;script.php&amp;lt;/scriptfile&amp;gt;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;scriptfile&amp;gt;script.php&amp;lt;/scriptfile&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
    &amp;lt;config&amp;gt;&lt;br /&gt;
        &amp;lt;fields name=&amp;quot;params&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;basic&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
                    type=&amp;quot;url&amp;quot;&lt;br /&gt;
                    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
                    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;advanced&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
                    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
                    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
                    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
                    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
                    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
                    type=&amp;quot;list&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
                    type=&amp;quot;number&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
                    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
                    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
        &amp;lt;/fields&amp;gt;&lt;br /&gt;
    &amp;lt;/config&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&lt;br /&gt;
Immediately after the installation, you will see the following information. This you had entered in the script so.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial14-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
As you can see, Joomla offers you a lot to make your extension easy to use - right from the start.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Use Joomla Updaterː Adding Auto Update - Part 5 ==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
=== Joomla Updater ===&lt;br /&gt;
The first thing to do is to read the [[S:MyLanguage/J2.5:Managing_Component_Updates|Managing Component Upgrades with Joomla 2.5 - Part 1]] tutorial to give an idea of how the upgrade process works in Joomlaǃ. Whilst written for 2.5 the process hasn&#039;t changed. Also read [[S:MyLanguage/Deploying_an_Update_Server|Deploying an update server]] - this is what we&#039;ll be implementing in this tutorial.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will create/change the following files:&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - The only way to update our existing module is to add in a update server - for example &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/foo_update.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; - into the xml file. &lt;br /&gt;
* &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt; - Then we have to create the XML file for the update server at &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/foo_update.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; to let Joomla know an update is available. &lt;br /&gt;
&lt;br /&gt;
==== Editing mod_foo.xml ====&lt;br /&gt;
To add our update server, we need to insert the following lines in your XML-Fileː&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;updateservers&amp;gt;&lt;br /&gt;
    &amp;lt;server type=&amp;quot;extension&amp;quot; priority=&amp;quot;1&amp;quot; name=&amp;quot;[PROJECT_NAME]&amp;quot;&amp;gt;https://www.example.com/mod_foo.xml&amp;lt;/server&amp;gt;&lt;br /&gt;
&amp;lt;/updateservers&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
    &amp;lt;updateservers&amp;gt;&lt;br /&gt;
        &amp;lt;server type=&amp;quot;extension&amp;quot; priority=&amp;quot;1&amp;quot; name=&amp;quot;[PROJECT_NAME]&amp;quot;&amp;gt;https://www.example.com/mod_foo.xml&amp;lt;/server&amp;gt;&lt;br /&gt;
    &amp;lt;/updateservers&amp;gt;&lt;br /&gt;
    &amp;lt;config&amp;gt;&lt;br /&gt;
        &amp;lt;fields name=&amp;quot;params&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;basic&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
                    type=&amp;quot;url&amp;quot;&lt;br /&gt;
                    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
                    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;advanced&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
                    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
                    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
                    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
                    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
                    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
                    type=&amp;quot;list&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
                    type=&amp;quot;number&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
                    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
                    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
        &amp;lt;/fields&amp;gt;&lt;br /&gt;
    &amp;lt;/config&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
So now that Joomlaǃ is searching for updates to our extension - let&#039;s create one to test out our process. But first we need to create the file &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt;. So far we have only described the update server. We do not know yet if there is an update. In the file &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt; we indicate when a new version is published and where it can be downloaded.&lt;br /&gt;
&lt;br /&gt;
=== Creating foo_update.xml ===&lt;br /&gt;
Now we have to create the XML file at &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/foo_update.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; to let Joomla know an update is available. &lt;br /&gt;
 &lt;br /&gt;
==== Completed foo_update.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; ?&amp;gt;&lt;br /&gt;
&amp;lt;updates&amp;gt;&lt;br /&gt;
    &amp;lt;update&amp;gt;&lt;br /&gt;
        &amp;lt;name&amp;gt;Foo&amp;lt;/name&amp;gt;&lt;br /&gt;
        &amp;lt;description&amp;gt;This is mod_foo 1.0.1&amp;lt;/description&amp;gt;&lt;br /&gt;
        &amp;lt;element&amp;gt;mod_foo&amp;lt;/element&amp;gt;&lt;br /&gt;
        &amp;lt;type&amp;gt;module&amp;lt;/type&amp;gt;&lt;br /&gt;
        &amp;lt;version&amp;gt;1.0.1&amp;lt;/version&amp;gt;&lt;br /&gt;
        &amp;lt;downloads&amp;gt;&lt;br /&gt;
            &amp;lt;downloadurl type=&amp;quot;full&amp;quot; format=&amp;quot;zip&amp;quot;&amp;gt;http://www.example.com/mod_foo_101.zip&amp;lt;/downloadurl&amp;gt;&lt;br /&gt;
        &amp;lt;/downloads&amp;gt;&lt;br /&gt;
        &amp;lt;maintainer&amp;gt;Joomla&amp;lt;/maintainer&amp;gt;&lt;br /&gt;
        &amp;lt;maintainerurl&amp;gt;http://www.example.com&amp;lt;/maintainerurl&amp;gt;&lt;br /&gt;
        &amp;lt;targetplatform name=&amp;quot;joomla&amp;quot; version=&amp;quot;4.0&amp;quot;/&amp;gt;&lt;br /&gt;
        &amp;lt;client&amp;gt;site&amp;lt;/client&amp;gt;&lt;br /&gt;
    &amp;lt;/update&amp;gt;&lt;br /&gt;
&amp;lt;/updates&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
After uploading this file to the address &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;https://www.example.com/mod_foo.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; the update will be displayed in the Joomla backend.&lt;br /&gt;
&lt;br /&gt;
=== Test your module update ===&lt;br /&gt;
Create a copy of the module as it is now. Then let&#039;s update the version number to 1.0.1. Now you can zip all files. After that you should load your zip to the URL &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/mod_foo_101.zip&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt;. Now you can update your module via the Joomla Updater.&lt;br /&gt;
&lt;br /&gt;
=== Commercial Modules ===&lt;br /&gt;
Note that in our files we have linked to the extensions updates xml file. And from that xml file we have a location for the zip of the module. This means that if someone was to track this backwards they could find the physical source of your modules zip file. If you don&#039;t do like this, you can find a solution in this PRː https://github.com/joomla/joomla-cms/pull/15185 .&lt;br /&gt;
&lt;br /&gt;
=== Conclusion ===&lt;br /&gt;
With the Joomlaǃ updater, you can easily reach all users and tell them that there is a new version. Even the update itself is easy. &lt;br /&gt;
&lt;br /&gt;
Each extension should use an update server. Especially for security reasons.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Beginner Development{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials in a Series{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
[[Category:Module Development{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Creating_a_Simple_Module/51/ru&amp;diff=848192</id>
		<title>Translations:J4.x:Creating a Simple Module/51/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Creating_a_Simple_Module/51/ru&amp;diff=848192"/>
		<updated>2021-11-17T14:28:08Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Файлы &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; и &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt; используются для перевода текста на сайте и панели администратора. Обратите внимание, что структура языкового файла была обновлена в Joomla 4, и языковые префиксы для отдельных файлов в языковой папке больше не требуются.&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Creating_a_Simple_Module/ru&amp;diff=848191</id>
		<title>J4.x:Creating a Simple Module/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Creating_a_Simple_Module/ru&amp;diff=848191"/>
		<updated>2021-11-17T14:27:59Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Файл &amp;lt;tt&amp;gt;.sys.ini&amp;lt;/tt&amp;gt; используется для перевода описания расширения при установке, тогда как файл &amp;lt;tt&amp;gt;.in...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
{{Joomla version|version=4.x|comment=&amp;gt;Tutorial}}&lt;br /&gt;
{{-}}&lt;br /&gt;
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Creating a Simple Module for Joomla 4.x}}&lt;br /&gt;
{{-}}&lt;br /&gt;
&lt;br /&gt;
This is a tutorial on how to Create a simple module for Joomla Version 4x. &lt;br /&gt;
== Introduction ==&lt;br /&gt;
Joomlaǃ 4 provides five types of extensionsː&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Component|Components]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;A component is the main part of the site. A component handles data manipulation as well as input and storage into the database. A component on most sites is the primary focus of the page.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Module|Modules]]&#039;&#039;&#039; &amp;lt;br /&amp;gt;A module is an add-on to the site that extends the functionality. A module usually occupies a secondary portion of the web page and is not considered the primary focus of a page. It can be displayed on different positions and you can choose on which active menu items it should be displayed. Modules are lightweight and flexible extensions. They are used for small bits of the page that are generally less complex and are able to be seen across different components.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Plugin|Plugins]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;A Plugin manipulates output that is already generated by the system. It typically does not run as separate part of the site. It takes data from other sources (i.e. the content) and manipulates this data before displaying. A plugin typically work behind the scenes.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Languages|Languages]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;Probably the most basic extensions are languages. In essence the language package files consist of key/value pairs, which provide the translation of static text strings, assigned within the Joomla! source code.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Templates|Templates]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;A template is basically the design of your Joomla! powered website.&lt;br /&gt;
&lt;br /&gt;
Joomla! 4 is constructed using five different applications:&lt;br /&gt;
* Installation (used for installing Joomla and have to delete after installation);&lt;br /&gt;
* Administrator (backend - used for managing content);&lt;br /&gt;
* Public or site (frontend - used for displaying content);&lt;br /&gt;
* CLI (used for accessing Joomla on the command line and for cron jobs);&lt;br /&gt;
* API (web services - used for creating APIs for machine accessible content);&lt;br /&gt;
The installation application is used once. The administrator and public are used through the concept of &#039;&#039;components&#039;&#039; with &#039;&#039;modules&#039;&#039;. Each module has a single entry point located in the &#039;&#039;modules&#039;&#039; and accordingly &#039;&#039;administrator/modules&#039;&#039;  directory. This entry point is called &amp;lt;tt&amp;gt;&#039;&#039;mod_modulename/mod_modulename.php&#039;&#039;&amp;lt;/tt&amp;gt; (the &#039;&#039;mod_&#039;&#039; prefix is a historical trace). The entry point for the login module is for example &#039;&#039;/mod_login/mod_login.php&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x installation available to use for this tutorial ([https://github.com/joomla/joomla-cms/releases Download latest release here])&lt;br /&gt;
&lt;br /&gt;
You can download Joomla! 4 at [https://github.com/joomla/joomla-cms/releases GitHub], on the [https://developer.joomla.org/nightly-builds.html Developer website] or you can create a free website at https://launch.joomla.org.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Creating a simple module/Developing a Basic Module - Part 1 ==&lt;br /&gt;
You can see many examples of modules in the standard Joomla! install. For example:&lt;br /&gt;
* Menus &lt;br /&gt;
* Latest News&lt;br /&gt;
* Login form&lt;br /&gt;
* and many more.&lt;br /&gt;
&lt;br /&gt;
This tutorial will explain how to create a simple module. Through this tutorial you will learn the basic file structure of a Joomlaǃ 4 module. This basic structure can then be expanded to produce more elaborate modules.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
There are a few basic files that are used in the standard pattern of module development:&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; - This file is the main entry point for the module. It will perform any necessary initialization routines, call helper routines to collect any necessary data, and include the template which will display the module output.&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - This file contains information about the module. It defines the files that need to be installed by the Joomla! installer and specifies configuration parameters for the module.&lt;br /&gt;
* &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; - This is the module template. This file will take the data collected by mod_foo.php and generate the HTML to be displayed on the page.&lt;br /&gt;
* &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; and &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt;- This are the files that provide the text in United Kingdom English.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== Creating mod_foo.php ===&lt;br /&gt;
The &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file will perform following tasks:&lt;br /&gt;
* Import the class &amp;lt;tt&amp;gt;ModuleHelper&amp;lt;/tt&amp;gt; to the current scope. We need it later for displaying the output.&lt;br /&gt;
* Include the template to display the output.&lt;br /&gt;
&lt;br /&gt;
The helper class is imported to our current scope at the begin of the file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;use Joomla\CMS\Helper\ModuleHelper;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Last we include the template to display the output via&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;require ModuleHelper::getLayoutPath(&#039;mod_foo&#039;, $params-&amp;gt;get(&#039;layout&#039;, &#039;default&#039;));&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.php file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
use Joomla\CMS\Helper\ModuleHelper;&lt;br /&gt;
&lt;br /&gt;
require ModuleHelper::getLayoutPath(&#039;mod_foo&#039;, $params-&amp;gt;get(&#039;layout&#039;, &#039;default&#039;));&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;Side note&#039;&#039;ː In Joomla 3x you usually used a line like &amp;lt;tt&amp;gt;$moduleclass_sfx = htmlspecialchars($params-&amp;gt;get(&#039;moduleclass_sfx&#039;));&amp;lt;/tt&amp;gt;. You don&#039;t need this anymore. See this PRː https://github.com/joomla/joomla-cms/pull/17447. &lt;br /&gt;
&lt;br /&gt;
The one line that we haven’t explained so far is the first line &amp;lt;tt&amp;gt;defined(&#039;_JEXEC&#039;) or die;&amp;lt;/tt&amp;gt;. This line checks to make sure that this file is being included from the Joomla application. This is necessary to prevent variable injection and other potential security concerns.&lt;br /&gt;
&lt;br /&gt;
=== Creating tmpl/default.php ===&lt;br /&gt;
The &amp;lt;tt&amp;gt;default.php&amp;lt;/tt&amp;gt; file is the template which displays the module output.&lt;br /&gt;
&lt;br /&gt;
==== Completed tmpl/default.php file ====&lt;br /&gt;
The code for the tmpl/default.php file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
echo &#039;[PROJECT_NAME]&#039;; &lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
An important point to note is that the template file has the same scope as the &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file. It means that a variable can be defined in the &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file and then used in the template file without any extra declarations or function calls.&lt;br /&gt;
&lt;br /&gt;
=== Creating mod_foo.xml ===&lt;br /&gt;
The &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is the installation file. Most entries are self-explanatory.&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml file ====&lt;br /&gt;
The code for the &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt;  file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Создание языковых файлов ===&lt;br /&gt;
Файлы &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; и &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt; используются для перевода текста на сайте и панели администратора соответственно. Обратите внимание, что структура языкового файла была обновлена в Joomla 4, и языковые префиксы для отдельных файлов в языковой папке больше не требуются.&lt;br /&gt;
&lt;br /&gt;
Код для &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt; выглядит следующим образом:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Код для &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; выглядит следующим образом:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Файл &amp;lt;tt&amp;gt;.sys.ini&amp;lt;/tt&amp;gt; используется для перевода описания расширения при установке, тогда как файл &amp;lt;tt&amp;gt;.ini&amp;lt;/tt&amp;gt; используется для перевода оставшихся строк и описания при просмотре вашего расширения. &lt;br /&gt;
&lt;br /&gt;
More information about language files can be found [[S:MyLanguage/Specification_of_language_files|here]].&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&amp;lt;br /&amp;gt;&lt;br /&gt;
After that you can choose your module in the module manager, when you create a new site module. &lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial1-en.png|700px|center]]&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial2-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
In the frontend, you will see your module like displayed in the next image.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial3-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
Module development for Joomla is a fairly simple, straightforward process. Using the techniques described in this tutorial, an endless variety of modules can be developed with little hassle.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Add a helper class using namespaces - Part 2==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
== Namespaces ==&lt;br /&gt;
With PHP 5.3, the namespaces came into their own. In other programming languages for a long time in use, these small structures now also help us with the clarity of our code. &lt;br /&gt;
&lt;br /&gt;
Namespaces are separate areas in which certain logical things (in our case, classes, interfaces, functions, and constants) can live. These areas provide encapsulation of the code and prevent name conflicts.&lt;br /&gt;
&lt;br /&gt;
Let&#039;s take a look how to use them in Joomla 4. We use the helper file for this.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will create/change the following files:&lt;br /&gt;
* &amp;lt;code&amp;gt;Helper/FooHelper.php&amp;lt;/code&amp;gt; - This is the file we use here as an example. We have to create it.&lt;br /&gt;
* &amp;lt;code&amp;gt;mod_foo.php&amp;lt;/code&amp;gt; - In this file, we will mainly load the namespace.&lt;br /&gt;
* &amp;lt;code&amp;gt;tmpl/default.php&amp;lt;/code&amp;gt; - In this file, we will demonstrate how the data of a helper can be displayed.&lt;br /&gt;
* &amp;lt;code&amp;gt;mod_foo.xml&amp;lt;/code&amp;gt; - We create a new directory with a new file. This must be installed during the installation. For this we have to specify them in this file.&lt;br /&gt;
&lt;br /&gt;
=== Creating Helper/FooHelper.php ===&lt;br /&gt;
Our new helper class should belong to a namespace. We achieve this with the following code. It is important, that this line is at the beginning of the file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;namespace Joomla\Module\Foo\Site\Helper;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then we create a simple class with a simple method. Of course you can do a lot more here. Take a look at the Joomla core methods. Here are many examples. They show you first-hand what options you have.&lt;br /&gt;
&lt;br /&gt;
==== Completed Helper/FooHelper.php ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;FooHelper.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package     Joomla.Site&lt;br /&gt;
 * @subpackage  mod_foo&lt;br /&gt;
 *&lt;br /&gt;
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.&lt;br /&gt;
 * @license     GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
namespace Joomla\Module\Foo\Site\Helper;&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
/**&lt;br /&gt;
 * Helper for mod_foo&lt;br /&gt;
 *&lt;br /&gt;
 * @since  4.0&lt;br /&gt;
 */&lt;br /&gt;
class FooHelper&lt;br /&gt;
{&lt;br /&gt;
	/**&lt;br /&gt;
	 * Retrieve foo test&lt;br /&gt;
	 *&lt;br /&gt;
	 * @param   Registry        $params  The module parameters&lt;br /&gt;
	 * @param   CMSApplication  $app     The application&lt;br /&gt;
	 *&lt;br /&gt;
	 * @return  array&lt;br /&gt;
	 */&lt;br /&gt;
	public static function getText()&lt;br /&gt;
	{&lt;br /&gt;
		return &#039;FooHelpertest&#039;;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.php ===&lt;br /&gt;
Our new helper class is imported to our current scope at the beginning of the file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;use Joomla\Module\Foo\Site\Helper\FooHelper;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Last use the helper file for testing if it is loaded correctlyː&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;$test  = FooHelper::getText($params, $app);&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.php file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
use Joomla\CMS\Helper\ModuleHelper;&lt;br /&gt;
use Joomla\Module\Foo\Site\Helper\FooHelper;&lt;br /&gt;
&lt;br /&gt;
$test  = FooHelper::getText();&lt;br /&gt;
&lt;br /&gt;
require ModuleHelper::getLayoutPath(&#039;mod_foo&#039;, $params-&amp;gt;get(&#039;layout&#039;, &#039;default&#039;));&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing tmpl/default.php ===&lt;br /&gt;
In this file you make only a small change to demonstrate in the frontend that your helper file is working properly. You only add the value of the variable at the end of the current output.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;echo &#039;[PROJECT_NAME]&#039; . $test;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed tmpl/default.php ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
echo &#039;[PROJECT_NAME]&#039; . $test; &lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.xml ===&lt;br /&gt;
First you have to add a line, so that the namespace is set automatically in Joomla. After this change, you have to re-install your module. A simple change in an already installed module is not enough. If you are doing local development you can also delete the files libraries/autoload_psr4.php and it will automatically be re-created. After inserting and installing, the namespace is known by the loader &amp;lt;tt&amp;gt;JPATH_LIBRARIES . &#039;/autoload_psr4.php&#039;&amp;lt;/tt&amp;gt;.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Joomla! should copy your helper file when installing the module. So Joomla! needs to know your helper file. For this, you need to add the following line to your XML file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&lt;br /&gt;
After that you can choose your module in the module manager, when you create a new site module. &lt;br /&gt;
&lt;br /&gt;
In the frontend you will see your module like displayed in the next image. The text from your helper file is displayed.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial23-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
As you can see, once you get a bit into the namespaces, they are not that complicated anymore. In big projects they can bring a lot of benefits. However, we should plan namespaces, as otherwise it will soon be more time-consuming.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Customizationː Add parameters via form fields - Part 3 ==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
== Customization with form fields and parameters ==&lt;br /&gt;
Form fields give a great deal of customization in Joomla and for modules are the sole way of allowing the user to tweak the module to the needs of their site. &lt;br /&gt;
&lt;br /&gt;
In this case we are going to extend our previous example using a url field for inserting a domain that we can use as link in the front end. To allow this to happen we will use the [[S:MyLanguage/URL_form_field_type|URL Form Field]] type.&lt;br /&gt;
&lt;br /&gt;
After that, we insert parameters that allow to use standard functionality of Joomla.&lt;br /&gt;
&lt;br /&gt;
Let&#039;s take a look on how to use them in Joomla 4.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will change the following files:&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - This is the file where we add the fields.&lt;br /&gt;
* &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; - In this file demonstrate how the data of a field can be used.&lt;br /&gt;
* &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.ini&amp;lt;/tt&amp;gt; - Here we use a language string so that the field can be labeled correctly in different languages.&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.xml ===&lt;br /&gt;
First we set a custom parameter.  &lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
    type=&amp;quot;url&amp;quot;&lt;br /&gt;
    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then we insert Joomla default fields, so that we can use cache, moduleclass-suffix and layouts.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
    type=&amp;quot;list&amp;quot;&lt;br /&gt;
    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
    default=&amp;quot;0&amp;quot;&lt;br /&gt;
&amp;gt;&lt;br /&gt;
    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
&amp;lt;/field&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
    type=&amp;quot;number&amp;quot;&lt;br /&gt;
    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
    default=&amp;quot;0&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
&amp;gt;&lt;br /&gt;
    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
&amp;lt;/field&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
    &amp;lt;config&amp;gt;&lt;br /&gt;
        &amp;lt;fields name=&amp;quot;params&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;basic&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
                    type=&amp;quot;url&amp;quot;&lt;br /&gt;
                    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
                    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;advanced&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
                    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
                    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
                    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
                    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
                    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
                    type=&amp;quot;list&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
                    type=&amp;quot;number&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
                    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
                    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
        &amp;lt;/fields&amp;gt;&lt;br /&gt;
    &amp;lt;/config&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing tmpl/default.php ===&lt;br /&gt;
We can use the value of the parameter for creating a hyperlink in the frontend. We can access the value via the variable $params.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;$domain = $params-&amp;gt;get(&#039;domain&#039;, &#039;https://www.joomla.org&#039;);&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Later we set use this value for creating the hyperlink.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;a href=&amp;quot;&amp;lt;?php echo $domain; ?&amp;gt;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;?php echo &#039;[PROJECT_NAME]&#039; . $test; ?&amp;gt;&lt;br /&gt;
&amp;lt;/a&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed tmpl/default.php file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
$domain = $params-&amp;gt;get(&#039;domain&#039;, &#039;https://www.joomla.org&#039;);&lt;br /&gt;
?&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;a href=&amp;quot;&amp;lt;?php echo $domain; ?&amp;gt;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;?php echo &#039;[PROJECT_NAME]&#039; . $test; ?&amp;gt;&lt;br /&gt;
&amp;lt;/a&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing language/en-GB/en-GB.mod_foo.ini ===&lt;br /&gt;
Here we can specify the text for the English version of the field label.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;MOD_FOO_FIELD_URL_LABEL=&amp;quot;Url&amp;quot;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed language/en-GB/en-GB.mod_foo.ini ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.ini&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
MOD_FOO_FIELD_URL_LABEL=&amp;quot;Url&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&lt;br /&gt;
After that you can choose your module in the module manager, when you create a new site module. &lt;br /&gt;
&lt;br /&gt;
In the backend, you will see your module like displayed in the next image. &lt;br /&gt;
&lt;br /&gt;
In the basic tab, you will see the custom field where you can insert a domain. The text for the label is fetched from the language file. &lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial31-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
In the advanced tab, you will see all default options except the cache mode because of this is a hidden field.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial32-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
In the frontend, you will see your module like displayed in the next image. The text form your helper file is displayed and you should see a hyperlink.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial33-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
Form fields give the user an easy way to customize the module to their sites settings. This allows the modules scope to be increased. &lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
See this issue for possible future changes:&lt;br /&gt;
* https://github.com/joomla/joomla-cms/pull/23553&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Use Install, Update and Uninstall script - Part 4 ==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
=== Scripts ===&lt;br /&gt;
Installing, updating and uninstalling a module may require additional operations that cannot be achieved by the basic operations described in the main XML file. Joomla offers a new approach to solve this problem. It consists in using a PHP script file containing a class using five methods:&lt;br /&gt;
* preflight which is executed before install and update&lt;br /&gt;
* install&lt;br /&gt;
* update&lt;br /&gt;
* uninstall&lt;br /&gt;
* postflight which is executed after install and update&lt;br /&gt;
&lt;br /&gt;
Let&#039;s take a look how to use them in Joomla 4. We use the helper file for this.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will create/change the following files:&lt;br /&gt;
* &amp;lt;tt&amp;gt;script.php&amp;lt;/tt&amp;gt; - This is the file we use here as an example. We have to create it.&lt;br /&gt;
* &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.sys.ini&amp;lt;/tt&amp;gt; - In this file we will add text.&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - We create a new file. This must be installed during the installation. For this we have to specify it in this file.&lt;br /&gt;
&lt;br /&gt;
=== Creating script.php ===&lt;br /&gt;
Writing an extension script consists in declaring a class whose name is &amp;lt;tt&amp;gt;mod_ModuleNameInstallerScript&amp;lt;/tt&amp;gt; with these 5 methods. See the comments in the file for more information. In this comments I explain when a method is called. &lt;br /&gt;
&lt;br /&gt;
In this example, I only use text to show when which method will be executed. In addition, I show you how to check the minimum requirements. Of course you can do much more. For example, you can delete files that are no longer needed in a new version of your module. This can be seen in the file. Another idea for this file is to create sample content, to show a success message with the current installed version number or you can redirect after a successful installation to the page with the module settings. &lt;br /&gt;
&lt;br /&gt;
==== Completed script.php ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;script.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
use Joomla\CMS\Language\Text;&lt;br /&gt;
use Joomla\CMS\Log\Log;&lt;br /&gt;
&lt;br /&gt;
/**&lt;br /&gt;
 * Script file of Foo module&lt;br /&gt;
 */&lt;br /&gt;
class mod_fooInstallerScript {&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Extension script constructor.&lt;br /&gt;
     *&lt;br /&gt;
     * @return  void&lt;br /&gt;
     */&lt;br /&gt;
    public function __construct() {&lt;br /&gt;
        $this-&amp;gt;minimumJoomla = &#039;4.0&#039;;&lt;br /&gt;
        $this-&amp;gt;minimumPhp = JOOMLA_MINIMUM_PHP;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Method to install the extension&lt;br /&gt;
     *&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function install($parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_INSTALL&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Method to uninstall the extension&lt;br /&gt;
     *&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function uninstall($parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_UNINSTALL&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Method to update the extension&lt;br /&gt;
     *&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function update($parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_UPDATE&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Function called before extension installation/update/removal procedure commences&lt;br /&gt;
     *&lt;br /&gt;
     * @param   string            $type    The type of change (install, update or discover_install, not uninstall)&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function preflight($type, $parent) {&lt;br /&gt;
        // Check for the minimum PHP version before continuing&lt;br /&gt;
        if (!empty($this-&amp;gt;minimumPhp) &amp;amp;&amp;amp; version_compare(PHP_VERSION, $this-&amp;gt;minimumPhp, &#039;&amp;lt;&#039;)) {&lt;br /&gt;
            Log::add(Text::sprintf(&#039;JLIB_INSTALLER_MINIMUM_PHP&#039;, $this-&amp;gt;minimumPhp), Log::WARNING, &#039;jerror&#039;);&lt;br /&gt;
&lt;br /&gt;
            return false;&lt;br /&gt;
        }&lt;br /&gt;
&lt;br /&gt;
        // Check for the minimum Joomla version before continuing&lt;br /&gt;
        if (!empty($this-&amp;gt;minimumJoomla) &amp;amp;&amp;amp; version_compare(JVERSION, $this-&amp;gt;minimumJoomla, &#039;&amp;lt;&#039;)) {&lt;br /&gt;
            Log::add(Text::sprintf(&#039;JLIB_INSTALLER_MINIMUM_JOOMLA&#039;, $this-&amp;gt;minimumJoomla), Log::WARNING, &#039;jerror&#039;);&lt;br /&gt;
&lt;br /&gt;
            return false;&lt;br /&gt;
        }&lt;br /&gt;
        &lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_PREFLIGHT&#039;);&lt;br /&gt;
        echo $this-&amp;gt;minimumJoomla . &#039; &#039; . $this-&amp;gt;minimumPhp;&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Function called after extension installation/update/removal procedure commences&lt;br /&gt;
     *&lt;br /&gt;
     * @param   string            $type    The type of change (install, update or discover_install, not uninstall)&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function postflight($type, $parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_POSTFLIGHT&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing language/en-GB/en-GB.mod_foo.sys.ini ===&lt;br /&gt;
There is not much to explain here. Write the text for the translation into this file.&lt;br /&gt;
&lt;br /&gt;
==== Completed language/en-GB/en-GB.mod_foo.sys.ini file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.sys.ini&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_PREFLIGHT=&amp;quot;&amp;lt;p&amp;gt;Anything here happens before the installation/update/uninstallation of the module&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_UPDATE=&amp;quot;&amp;lt;p&amp;gt;The module has been updated&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_UNINSTALL=&amp;quot;&amp;lt;p&amp;gt;The module has been uninstalled&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_INSTALL=&amp;quot;&amp;lt;p&amp;gt;The module has been installed&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_POSTFLIGHT=&amp;quot;&amp;lt;p&amp;gt;Anything here happens after the installation/update/uninstallation of the module&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.xml ===&lt;br /&gt;
You have to add a line, so that the script is called automatically in Joomla. &lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;scriptfile&amp;gt;script.php&amp;lt;/scriptfile&amp;gt;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;scriptfile&amp;gt;script.php&amp;lt;/scriptfile&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
    &amp;lt;config&amp;gt;&lt;br /&gt;
        &amp;lt;fields name=&amp;quot;params&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;basic&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
                    type=&amp;quot;url&amp;quot;&lt;br /&gt;
                    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
                    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;advanced&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
                    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
                    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
                    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
                    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
                    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
                    type=&amp;quot;list&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
                    type=&amp;quot;number&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
                    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
                    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
        &amp;lt;/fields&amp;gt;&lt;br /&gt;
    &amp;lt;/config&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&lt;br /&gt;
Immediately after the installation, you will see the following information. This you had entered in the script so.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial14-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
As you can see, Joomla offers you a lot to make your extension easy to use - right from the start.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Use Joomla Updaterː Adding Auto Update - Part 5 ==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
=== Joomla Updater ===&lt;br /&gt;
The first thing to do is to read the [[S:MyLanguage/J2.5:Managing_Component_Updates|Managing Component Upgrades with Joomla 2.5 - Part 1]] tutorial to give an idea of how the upgrade process works in Joomlaǃ. Whilst written for 2.5 the process hasn&#039;t changed. Also read [[S:MyLanguage/Deploying_an_Update_Server|Deploying an update server]] - this is what we&#039;ll be implementing in this tutorial.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will create/change the following files:&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - The only way to update our existing module is to add in a update server - for example &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/foo_update.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; - into the xml file. &lt;br /&gt;
* &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt; - Then we have to create the XML file for the update server at &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/foo_update.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; to let Joomla know an update is available. &lt;br /&gt;
&lt;br /&gt;
==== Editing mod_foo.xml ====&lt;br /&gt;
To add our update server, we need to insert the following lines in your XML-Fileː&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;updateservers&amp;gt;&lt;br /&gt;
    &amp;lt;server type=&amp;quot;extension&amp;quot; priority=&amp;quot;1&amp;quot; name=&amp;quot;[PROJECT_NAME]&amp;quot;&amp;gt;https://www.example.com/mod_foo.xml&amp;lt;/server&amp;gt;&lt;br /&gt;
&amp;lt;/updateservers&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
    &amp;lt;updateservers&amp;gt;&lt;br /&gt;
        &amp;lt;server type=&amp;quot;extension&amp;quot; priority=&amp;quot;1&amp;quot; name=&amp;quot;[PROJECT_NAME]&amp;quot;&amp;gt;https://www.example.com/mod_foo.xml&amp;lt;/server&amp;gt;&lt;br /&gt;
    &amp;lt;/updateservers&amp;gt;&lt;br /&gt;
    &amp;lt;config&amp;gt;&lt;br /&gt;
        &amp;lt;fields name=&amp;quot;params&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;basic&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
                    type=&amp;quot;url&amp;quot;&lt;br /&gt;
                    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
                    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;advanced&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
                    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
                    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
                    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
                    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
                    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
                    type=&amp;quot;list&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
                    type=&amp;quot;number&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
                    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
                    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
        &amp;lt;/fields&amp;gt;&lt;br /&gt;
    &amp;lt;/config&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
So now that Joomlaǃ is searching for updates to our extension - let&#039;s create one to test out our process. But first we need to create the file &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt;. So far we have only described the update server. We do not know yet if there is an update. In the file &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt; we indicate when a new version is published and where it can be downloaded.&lt;br /&gt;
&lt;br /&gt;
=== Creating foo_update.xml ===&lt;br /&gt;
Now we have to create the XML file at &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/foo_update.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; to let Joomla know an update is available. &lt;br /&gt;
 &lt;br /&gt;
==== Completed foo_update.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; ?&amp;gt;&lt;br /&gt;
&amp;lt;updates&amp;gt;&lt;br /&gt;
    &amp;lt;update&amp;gt;&lt;br /&gt;
        &amp;lt;name&amp;gt;Foo&amp;lt;/name&amp;gt;&lt;br /&gt;
        &amp;lt;description&amp;gt;This is mod_foo 1.0.1&amp;lt;/description&amp;gt;&lt;br /&gt;
        &amp;lt;element&amp;gt;mod_foo&amp;lt;/element&amp;gt;&lt;br /&gt;
        &amp;lt;type&amp;gt;module&amp;lt;/type&amp;gt;&lt;br /&gt;
        &amp;lt;version&amp;gt;1.0.1&amp;lt;/version&amp;gt;&lt;br /&gt;
        &amp;lt;downloads&amp;gt;&lt;br /&gt;
            &amp;lt;downloadurl type=&amp;quot;full&amp;quot; format=&amp;quot;zip&amp;quot;&amp;gt;http://www.example.com/mod_foo_101.zip&amp;lt;/downloadurl&amp;gt;&lt;br /&gt;
        &amp;lt;/downloads&amp;gt;&lt;br /&gt;
        &amp;lt;maintainer&amp;gt;Joomla&amp;lt;/maintainer&amp;gt;&lt;br /&gt;
        &amp;lt;maintainerurl&amp;gt;http://www.example.com&amp;lt;/maintainerurl&amp;gt;&lt;br /&gt;
        &amp;lt;targetplatform name=&amp;quot;joomla&amp;quot; version=&amp;quot;4.0&amp;quot;/&amp;gt;&lt;br /&gt;
        &amp;lt;client&amp;gt;site&amp;lt;/client&amp;gt;&lt;br /&gt;
    &amp;lt;/update&amp;gt;&lt;br /&gt;
&amp;lt;/updates&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
After uploading this file to the address &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;https://www.example.com/mod_foo.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; the update will be displayed in the Joomla backend.&lt;br /&gt;
&lt;br /&gt;
=== Test your module update ===&lt;br /&gt;
Create a copy of the module as it is now. Then let&#039;s update the version number to 1.0.1. Now you can zip all files. After that you should load your zip to the URL &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/mod_foo_101.zip&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt;. Now you can update your module via the Joomla Updater.&lt;br /&gt;
&lt;br /&gt;
=== Commercial Modules ===&lt;br /&gt;
Note that in our files we have linked to the extensions updates xml file. And from that xml file we have a location for the zip of the module. This means that if someone was to track this backwards they could find the physical source of your modules zip file. If you don&#039;t do like this, you can find a solution in this PRː https://github.com/joomla/joomla-cms/pull/15185 .&lt;br /&gt;
&lt;br /&gt;
=== Conclusion ===&lt;br /&gt;
With the Joomlaǃ updater, you can easily reach all users and tell them that there is a new version. Even the update itself is easy. &lt;br /&gt;
&lt;br /&gt;
Each extension should use an update server. Especially for security reasons.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Beginner Development{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials in a Series{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
[[Category:Module Development{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Creating_a_Simple_Module/53/ru&amp;diff=848190</id>
		<title>Translations:J4.x:Creating a Simple Module/53/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Creating_a_Simple_Module/53/ru&amp;diff=848190"/>
		<updated>2021-11-17T14:27:54Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Файл &amp;lt;tt&amp;gt;.sys.ini&amp;lt;/tt&amp;gt; используется для перевода описания расширения при установке, тогда как файл &amp;lt;tt&amp;gt;.in...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Файл &amp;lt;tt&amp;gt;.sys.ini&amp;lt;/tt&amp;gt; используется для перевода описания расширения при установке, тогда как файл &amp;lt;tt&amp;gt;.ini&amp;lt;/tt&amp;gt; используется для перевода оставшихся строк и описания при просмотре вашего расширения.&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Creating_a_Simple_Module/ru&amp;diff=848189</id>
		<title>J4.x:Creating a Simple Module/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Creating_a_Simple_Module/ru&amp;diff=848189"/>
		<updated>2021-11-17T14:25:54Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Код для &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; выглядит следующим образом:&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
{{Joomla version|version=4.x|comment=&amp;gt;Tutorial}}&lt;br /&gt;
{{-}}&lt;br /&gt;
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Creating a Simple Module for Joomla 4.x}}&lt;br /&gt;
{{-}}&lt;br /&gt;
&lt;br /&gt;
This is a tutorial on how to Create a simple module for Joomla Version 4x. &lt;br /&gt;
== Introduction ==&lt;br /&gt;
Joomlaǃ 4 provides five types of extensionsː&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Component|Components]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;A component is the main part of the site. A component handles data manipulation as well as input and storage into the database. A component on most sites is the primary focus of the page.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Module|Modules]]&#039;&#039;&#039; &amp;lt;br /&amp;gt;A module is an add-on to the site that extends the functionality. A module usually occupies a secondary portion of the web page and is not considered the primary focus of a page. It can be displayed on different positions and you can choose on which active menu items it should be displayed. Modules are lightweight and flexible extensions. They are used for small bits of the page that are generally less complex and are able to be seen across different components.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Plugin|Plugins]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;A Plugin manipulates output that is already generated by the system. It typically does not run as separate part of the site. It takes data from other sources (i.e. the content) and manipulates this data before displaying. A plugin typically work behind the scenes.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Languages|Languages]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;Probably the most basic extensions are languages. In essence the language package files consist of key/value pairs, which provide the translation of static text strings, assigned within the Joomla! source code.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Templates|Templates]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;A template is basically the design of your Joomla! powered website.&lt;br /&gt;
&lt;br /&gt;
Joomla! 4 is constructed using five different applications:&lt;br /&gt;
* Installation (used for installing Joomla and have to delete after installation);&lt;br /&gt;
* Administrator (backend - used for managing content);&lt;br /&gt;
* Public or site (frontend - used for displaying content);&lt;br /&gt;
* CLI (used for accessing Joomla on the command line and for cron jobs);&lt;br /&gt;
* API (web services - used for creating APIs for machine accessible content);&lt;br /&gt;
The installation application is used once. The administrator and public are used through the concept of &#039;&#039;components&#039;&#039; with &#039;&#039;modules&#039;&#039;. Each module has a single entry point located in the &#039;&#039;modules&#039;&#039; and accordingly &#039;&#039;administrator/modules&#039;&#039;  directory. This entry point is called &amp;lt;tt&amp;gt;&#039;&#039;mod_modulename/mod_modulename.php&#039;&#039;&amp;lt;/tt&amp;gt; (the &#039;&#039;mod_&#039;&#039; prefix is a historical trace). The entry point for the login module is for example &#039;&#039;/mod_login/mod_login.php&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x installation available to use for this tutorial ([https://github.com/joomla/joomla-cms/releases Download latest release here])&lt;br /&gt;
&lt;br /&gt;
You can download Joomla! 4 at [https://github.com/joomla/joomla-cms/releases GitHub], on the [https://developer.joomla.org/nightly-builds.html Developer website] or you can create a free website at https://launch.joomla.org.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Creating a simple module/Developing a Basic Module - Part 1 ==&lt;br /&gt;
You can see many examples of modules in the standard Joomla! install. For example:&lt;br /&gt;
* Menus &lt;br /&gt;
* Latest News&lt;br /&gt;
* Login form&lt;br /&gt;
* and many more.&lt;br /&gt;
&lt;br /&gt;
This tutorial will explain how to create a simple module. Through this tutorial you will learn the basic file structure of a Joomlaǃ 4 module. This basic structure can then be expanded to produce more elaborate modules.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
There are a few basic files that are used in the standard pattern of module development:&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; - This file is the main entry point for the module. It will perform any necessary initialization routines, call helper routines to collect any necessary data, and include the template which will display the module output.&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - This file contains information about the module. It defines the files that need to be installed by the Joomla! installer and specifies configuration parameters for the module.&lt;br /&gt;
* &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; - This is the module template. This file will take the data collected by mod_foo.php and generate the HTML to be displayed on the page.&lt;br /&gt;
* &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; and &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt;- This are the files that provide the text in United Kingdom English.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== Creating mod_foo.php ===&lt;br /&gt;
The &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file will perform following tasks:&lt;br /&gt;
* Import the class &amp;lt;tt&amp;gt;ModuleHelper&amp;lt;/tt&amp;gt; to the current scope. We need it later for displaying the output.&lt;br /&gt;
* Include the template to display the output.&lt;br /&gt;
&lt;br /&gt;
The helper class is imported to our current scope at the begin of the file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;use Joomla\CMS\Helper\ModuleHelper;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Last we include the template to display the output via&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;require ModuleHelper::getLayoutPath(&#039;mod_foo&#039;, $params-&amp;gt;get(&#039;layout&#039;, &#039;default&#039;));&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.php file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
use Joomla\CMS\Helper\ModuleHelper;&lt;br /&gt;
&lt;br /&gt;
require ModuleHelper::getLayoutPath(&#039;mod_foo&#039;, $params-&amp;gt;get(&#039;layout&#039;, &#039;default&#039;));&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;Side note&#039;&#039;ː In Joomla 3x you usually used a line like &amp;lt;tt&amp;gt;$moduleclass_sfx = htmlspecialchars($params-&amp;gt;get(&#039;moduleclass_sfx&#039;));&amp;lt;/tt&amp;gt;. You don&#039;t need this anymore. See this PRː https://github.com/joomla/joomla-cms/pull/17447. &lt;br /&gt;
&lt;br /&gt;
The one line that we haven’t explained so far is the first line &amp;lt;tt&amp;gt;defined(&#039;_JEXEC&#039;) or die;&amp;lt;/tt&amp;gt;. This line checks to make sure that this file is being included from the Joomla application. This is necessary to prevent variable injection and other potential security concerns.&lt;br /&gt;
&lt;br /&gt;
=== Creating tmpl/default.php ===&lt;br /&gt;
The &amp;lt;tt&amp;gt;default.php&amp;lt;/tt&amp;gt; file is the template which displays the module output.&lt;br /&gt;
&lt;br /&gt;
==== Completed tmpl/default.php file ====&lt;br /&gt;
The code for the tmpl/default.php file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
echo &#039;[PROJECT_NAME]&#039;; &lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
An important point to note is that the template file has the same scope as the &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file. It means that a variable can be defined in the &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file and then used in the template file without any extra declarations or function calls.&lt;br /&gt;
&lt;br /&gt;
=== Creating mod_foo.xml ===&lt;br /&gt;
The &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is the installation file. Most entries are self-explanatory.&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml file ====&lt;br /&gt;
The code for the &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt;  file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Создание языковых файлов ===&lt;br /&gt;
Файлы &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; и &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt; используются для перевода текста на сайте и панели администратора соответственно. Обратите внимание, что структура языкового файла была обновлена в Joomla 4, и языковые префиксы для отдельных файлов в языковой папке больше не требуются.&lt;br /&gt;
&lt;br /&gt;
Код для &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt; выглядит следующим образом:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Код для &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; выглядит следующим образом:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;tt&amp;gt;.sys.ini&amp;lt;/tt&amp;gt; file is used to translate the description of the extension upon installation, where as the &amp;lt;tt&amp;gt;.ini&amp;lt;/tt&amp;gt; file is used to translate the remaining strings and the description when viewing your extension. &lt;br /&gt;
&lt;br /&gt;
More information about language files can be found [[S:MyLanguage/Specification_of_language_files|here]].&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&amp;lt;br /&amp;gt;&lt;br /&gt;
After that you can choose your module in the module manager, when you create a new site module. &lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial1-en.png|700px|center]]&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial2-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
In the frontend, you will see your module like displayed in the next image.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial3-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
Module development for Joomla is a fairly simple, straightforward process. Using the techniques described in this tutorial, an endless variety of modules can be developed with little hassle.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Add a helper class using namespaces - Part 2==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
== Namespaces ==&lt;br /&gt;
With PHP 5.3, the namespaces came into their own. In other programming languages for a long time in use, these small structures now also help us with the clarity of our code. &lt;br /&gt;
&lt;br /&gt;
Namespaces are separate areas in which certain logical things (in our case, classes, interfaces, functions, and constants) can live. These areas provide encapsulation of the code and prevent name conflicts.&lt;br /&gt;
&lt;br /&gt;
Let&#039;s take a look how to use them in Joomla 4. We use the helper file for this.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will create/change the following files:&lt;br /&gt;
* &amp;lt;code&amp;gt;Helper/FooHelper.php&amp;lt;/code&amp;gt; - This is the file we use here as an example. We have to create it.&lt;br /&gt;
* &amp;lt;code&amp;gt;mod_foo.php&amp;lt;/code&amp;gt; - In this file, we will mainly load the namespace.&lt;br /&gt;
* &amp;lt;code&amp;gt;tmpl/default.php&amp;lt;/code&amp;gt; - In this file, we will demonstrate how the data of a helper can be displayed.&lt;br /&gt;
* &amp;lt;code&amp;gt;mod_foo.xml&amp;lt;/code&amp;gt; - We create a new directory with a new file. This must be installed during the installation. For this we have to specify them in this file.&lt;br /&gt;
&lt;br /&gt;
=== Creating Helper/FooHelper.php ===&lt;br /&gt;
Our new helper class should belong to a namespace. We achieve this with the following code. It is important, that this line is at the beginning of the file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;namespace Joomla\Module\Foo\Site\Helper;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then we create a simple class with a simple method. Of course you can do a lot more here. Take a look at the Joomla core methods. Here are many examples. They show you first-hand what options you have.&lt;br /&gt;
&lt;br /&gt;
==== Completed Helper/FooHelper.php ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;FooHelper.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package     Joomla.Site&lt;br /&gt;
 * @subpackage  mod_foo&lt;br /&gt;
 *&lt;br /&gt;
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.&lt;br /&gt;
 * @license     GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
namespace Joomla\Module\Foo\Site\Helper;&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
/**&lt;br /&gt;
 * Helper for mod_foo&lt;br /&gt;
 *&lt;br /&gt;
 * @since  4.0&lt;br /&gt;
 */&lt;br /&gt;
class FooHelper&lt;br /&gt;
{&lt;br /&gt;
	/**&lt;br /&gt;
	 * Retrieve foo test&lt;br /&gt;
	 *&lt;br /&gt;
	 * @param   Registry        $params  The module parameters&lt;br /&gt;
	 * @param   CMSApplication  $app     The application&lt;br /&gt;
	 *&lt;br /&gt;
	 * @return  array&lt;br /&gt;
	 */&lt;br /&gt;
	public static function getText()&lt;br /&gt;
	{&lt;br /&gt;
		return &#039;FooHelpertest&#039;;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.php ===&lt;br /&gt;
Our new helper class is imported to our current scope at the beginning of the file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;use Joomla\Module\Foo\Site\Helper\FooHelper;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Last use the helper file for testing if it is loaded correctlyː&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;$test  = FooHelper::getText($params, $app);&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.php file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
use Joomla\CMS\Helper\ModuleHelper;&lt;br /&gt;
use Joomla\Module\Foo\Site\Helper\FooHelper;&lt;br /&gt;
&lt;br /&gt;
$test  = FooHelper::getText();&lt;br /&gt;
&lt;br /&gt;
require ModuleHelper::getLayoutPath(&#039;mod_foo&#039;, $params-&amp;gt;get(&#039;layout&#039;, &#039;default&#039;));&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing tmpl/default.php ===&lt;br /&gt;
In this file you make only a small change to demonstrate in the frontend that your helper file is working properly. You only add the value of the variable at the end of the current output.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;echo &#039;[PROJECT_NAME]&#039; . $test;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed tmpl/default.php ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
echo &#039;[PROJECT_NAME]&#039; . $test; &lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.xml ===&lt;br /&gt;
First you have to add a line, so that the namespace is set automatically in Joomla. After this change, you have to re-install your module. A simple change in an already installed module is not enough. If you are doing local development you can also delete the files libraries/autoload_psr4.php and it will automatically be re-created. After inserting and installing, the namespace is known by the loader &amp;lt;tt&amp;gt;JPATH_LIBRARIES . &#039;/autoload_psr4.php&#039;&amp;lt;/tt&amp;gt;.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Joomla! should copy your helper file when installing the module. So Joomla! needs to know your helper file. For this, you need to add the following line to your XML file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&lt;br /&gt;
After that you can choose your module in the module manager, when you create a new site module. &lt;br /&gt;
&lt;br /&gt;
In the frontend you will see your module like displayed in the next image. The text from your helper file is displayed.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial23-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
As you can see, once you get a bit into the namespaces, they are not that complicated anymore. In big projects they can bring a lot of benefits. However, we should plan namespaces, as otherwise it will soon be more time-consuming.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Customizationː Add parameters via form fields - Part 3 ==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
== Customization with form fields and parameters ==&lt;br /&gt;
Form fields give a great deal of customization in Joomla and for modules are the sole way of allowing the user to tweak the module to the needs of their site. &lt;br /&gt;
&lt;br /&gt;
In this case we are going to extend our previous example using a url field for inserting a domain that we can use as link in the front end. To allow this to happen we will use the [[S:MyLanguage/URL_form_field_type|URL Form Field]] type.&lt;br /&gt;
&lt;br /&gt;
After that, we insert parameters that allow to use standard functionality of Joomla.&lt;br /&gt;
&lt;br /&gt;
Let&#039;s take a look on how to use them in Joomla 4.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will change the following files:&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - This is the file where we add the fields.&lt;br /&gt;
* &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; - In this file demonstrate how the data of a field can be used.&lt;br /&gt;
* &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.ini&amp;lt;/tt&amp;gt; - Here we use a language string so that the field can be labeled correctly in different languages.&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.xml ===&lt;br /&gt;
First we set a custom parameter.  &lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
    type=&amp;quot;url&amp;quot;&lt;br /&gt;
    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then we insert Joomla default fields, so that we can use cache, moduleclass-suffix and layouts.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
    type=&amp;quot;list&amp;quot;&lt;br /&gt;
    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
    default=&amp;quot;0&amp;quot;&lt;br /&gt;
&amp;gt;&lt;br /&gt;
    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
&amp;lt;/field&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
    type=&amp;quot;number&amp;quot;&lt;br /&gt;
    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
    default=&amp;quot;0&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
&amp;gt;&lt;br /&gt;
    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
&amp;lt;/field&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
    &amp;lt;config&amp;gt;&lt;br /&gt;
        &amp;lt;fields name=&amp;quot;params&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;basic&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
                    type=&amp;quot;url&amp;quot;&lt;br /&gt;
                    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
                    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;advanced&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
                    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
                    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
                    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
                    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
                    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
                    type=&amp;quot;list&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
                    type=&amp;quot;number&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
                    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
                    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
        &amp;lt;/fields&amp;gt;&lt;br /&gt;
    &amp;lt;/config&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing tmpl/default.php ===&lt;br /&gt;
We can use the value of the parameter for creating a hyperlink in the frontend. We can access the value via the variable $params.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;$domain = $params-&amp;gt;get(&#039;domain&#039;, &#039;https://www.joomla.org&#039;);&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Later we set use this value for creating the hyperlink.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;a href=&amp;quot;&amp;lt;?php echo $domain; ?&amp;gt;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;?php echo &#039;[PROJECT_NAME]&#039; . $test; ?&amp;gt;&lt;br /&gt;
&amp;lt;/a&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed tmpl/default.php file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
$domain = $params-&amp;gt;get(&#039;domain&#039;, &#039;https://www.joomla.org&#039;);&lt;br /&gt;
?&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;a href=&amp;quot;&amp;lt;?php echo $domain; ?&amp;gt;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;?php echo &#039;[PROJECT_NAME]&#039; . $test; ?&amp;gt;&lt;br /&gt;
&amp;lt;/a&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing language/en-GB/en-GB.mod_foo.ini ===&lt;br /&gt;
Here we can specify the text for the English version of the field label.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;MOD_FOO_FIELD_URL_LABEL=&amp;quot;Url&amp;quot;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed language/en-GB/en-GB.mod_foo.ini ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.ini&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
MOD_FOO_FIELD_URL_LABEL=&amp;quot;Url&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&lt;br /&gt;
After that you can choose your module in the module manager, when you create a new site module. &lt;br /&gt;
&lt;br /&gt;
In the backend, you will see your module like displayed in the next image. &lt;br /&gt;
&lt;br /&gt;
In the basic tab, you will see the custom field where you can insert a domain. The text for the label is fetched from the language file. &lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial31-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
In the advanced tab, you will see all default options except the cache mode because of this is a hidden field.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial32-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
In the frontend, you will see your module like displayed in the next image. The text form your helper file is displayed and you should see a hyperlink.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial33-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
Form fields give the user an easy way to customize the module to their sites settings. This allows the modules scope to be increased. &lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
See this issue for possible future changes:&lt;br /&gt;
* https://github.com/joomla/joomla-cms/pull/23553&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Use Install, Update and Uninstall script - Part 4 ==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
=== Scripts ===&lt;br /&gt;
Installing, updating and uninstalling a module may require additional operations that cannot be achieved by the basic operations described in the main XML file. Joomla offers a new approach to solve this problem. It consists in using a PHP script file containing a class using five methods:&lt;br /&gt;
* preflight which is executed before install and update&lt;br /&gt;
* install&lt;br /&gt;
* update&lt;br /&gt;
* uninstall&lt;br /&gt;
* postflight which is executed after install and update&lt;br /&gt;
&lt;br /&gt;
Let&#039;s take a look how to use them in Joomla 4. We use the helper file for this.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will create/change the following files:&lt;br /&gt;
* &amp;lt;tt&amp;gt;script.php&amp;lt;/tt&amp;gt; - This is the file we use here as an example. We have to create it.&lt;br /&gt;
* &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.sys.ini&amp;lt;/tt&amp;gt; - In this file we will add text.&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - We create a new file. This must be installed during the installation. For this we have to specify it in this file.&lt;br /&gt;
&lt;br /&gt;
=== Creating script.php ===&lt;br /&gt;
Writing an extension script consists in declaring a class whose name is &amp;lt;tt&amp;gt;mod_ModuleNameInstallerScript&amp;lt;/tt&amp;gt; with these 5 methods. See the comments in the file for more information. In this comments I explain when a method is called. &lt;br /&gt;
&lt;br /&gt;
In this example, I only use text to show when which method will be executed. In addition, I show you how to check the minimum requirements. Of course you can do much more. For example, you can delete files that are no longer needed in a new version of your module. This can be seen in the file. Another idea for this file is to create sample content, to show a success message with the current installed version number or you can redirect after a successful installation to the page with the module settings. &lt;br /&gt;
&lt;br /&gt;
==== Completed script.php ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;script.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
use Joomla\CMS\Language\Text;&lt;br /&gt;
use Joomla\CMS\Log\Log;&lt;br /&gt;
&lt;br /&gt;
/**&lt;br /&gt;
 * Script file of Foo module&lt;br /&gt;
 */&lt;br /&gt;
class mod_fooInstallerScript {&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Extension script constructor.&lt;br /&gt;
     *&lt;br /&gt;
     * @return  void&lt;br /&gt;
     */&lt;br /&gt;
    public function __construct() {&lt;br /&gt;
        $this-&amp;gt;minimumJoomla = &#039;4.0&#039;;&lt;br /&gt;
        $this-&amp;gt;minimumPhp = JOOMLA_MINIMUM_PHP;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Method to install the extension&lt;br /&gt;
     *&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function install($parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_INSTALL&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Method to uninstall the extension&lt;br /&gt;
     *&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function uninstall($parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_UNINSTALL&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Method to update the extension&lt;br /&gt;
     *&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function update($parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_UPDATE&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Function called before extension installation/update/removal procedure commences&lt;br /&gt;
     *&lt;br /&gt;
     * @param   string            $type    The type of change (install, update or discover_install, not uninstall)&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function preflight($type, $parent) {&lt;br /&gt;
        // Check for the minimum PHP version before continuing&lt;br /&gt;
        if (!empty($this-&amp;gt;minimumPhp) &amp;amp;&amp;amp; version_compare(PHP_VERSION, $this-&amp;gt;minimumPhp, &#039;&amp;lt;&#039;)) {&lt;br /&gt;
            Log::add(Text::sprintf(&#039;JLIB_INSTALLER_MINIMUM_PHP&#039;, $this-&amp;gt;minimumPhp), Log::WARNING, &#039;jerror&#039;);&lt;br /&gt;
&lt;br /&gt;
            return false;&lt;br /&gt;
        }&lt;br /&gt;
&lt;br /&gt;
        // Check for the minimum Joomla version before continuing&lt;br /&gt;
        if (!empty($this-&amp;gt;minimumJoomla) &amp;amp;&amp;amp; version_compare(JVERSION, $this-&amp;gt;minimumJoomla, &#039;&amp;lt;&#039;)) {&lt;br /&gt;
            Log::add(Text::sprintf(&#039;JLIB_INSTALLER_MINIMUM_JOOMLA&#039;, $this-&amp;gt;minimumJoomla), Log::WARNING, &#039;jerror&#039;);&lt;br /&gt;
&lt;br /&gt;
            return false;&lt;br /&gt;
        }&lt;br /&gt;
        &lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_PREFLIGHT&#039;);&lt;br /&gt;
        echo $this-&amp;gt;minimumJoomla . &#039; &#039; . $this-&amp;gt;minimumPhp;&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Function called after extension installation/update/removal procedure commences&lt;br /&gt;
     *&lt;br /&gt;
     * @param   string            $type    The type of change (install, update or discover_install, not uninstall)&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function postflight($type, $parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_POSTFLIGHT&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing language/en-GB/en-GB.mod_foo.sys.ini ===&lt;br /&gt;
There is not much to explain here. Write the text for the translation into this file.&lt;br /&gt;
&lt;br /&gt;
==== Completed language/en-GB/en-GB.mod_foo.sys.ini file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.sys.ini&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_PREFLIGHT=&amp;quot;&amp;lt;p&amp;gt;Anything here happens before the installation/update/uninstallation of the module&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_UPDATE=&amp;quot;&amp;lt;p&amp;gt;The module has been updated&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_UNINSTALL=&amp;quot;&amp;lt;p&amp;gt;The module has been uninstalled&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_INSTALL=&amp;quot;&amp;lt;p&amp;gt;The module has been installed&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_POSTFLIGHT=&amp;quot;&amp;lt;p&amp;gt;Anything here happens after the installation/update/uninstallation of the module&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.xml ===&lt;br /&gt;
You have to add a line, so that the script is called automatically in Joomla. &lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;scriptfile&amp;gt;script.php&amp;lt;/scriptfile&amp;gt;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;scriptfile&amp;gt;script.php&amp;lt;/scriptfile&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
    &amp;lt;config&amp;gt;&lt;br /&gt;
        &amp;lt;fields name=&amp;quot;params&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;basic&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
                    type=&amp;quot;url&amp;quot;&lt;br /&gt;
                    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
                    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;advanced&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
                    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
                    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
                    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
                    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
                    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
                    type=&amp;quot;list&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
                    type=&amp;quot;number&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
                    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
                    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
        &amp;lt;/fields&amp;gt;&lt;br /&gt;
    &amp;lt;/config&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&lt;br /&gt;
Immediately after the installation, you will see the following information. This you had entered in the script so.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial14-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
As you can see, Joomla offers you a lot to make your extension easy to use - right from the start.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Use Joomla Updaterː Adding Auto Update - Part 5 ==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
=== Joomla Updater ===&lt;br /&gt;
The first thing to do is to read the [[S:MyLanguage/J2.5:Managing_Component_Updates|Managing Component Upgrades with Joomla 2.5 - Part 1]] tutorial to give an idea of how the upgrade process works in Joomlaǃ. Whilst written for 2.5 the process hasn&#039;t changed. Also read [[S:MyLanguage/Deploying_an_Update_Server|Deploying an update server]] - this is what we&#039;ll be implementing in this tutorial.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will create/change the following files:&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - The only way to update our existing module is to add in a update server - for example &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/foo_update.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; - into the xml file. &lt;br /&gt;
* &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt; - Then we have to create the XML file for the update server at &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/foo_update.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; to let Joomla know an update is available. &lt;br /&gt;
&lt;br /&gt;
==== Editing mod_foo.xml ====&lt;br /&gt;
To add our update server, we need to insert the following lines in your XML-Fileː&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;updateservers&amp;gt;&lt;br /&gt;
    &amp;lt;server type=&amp;quot;extension&amp;quot; priority=&amp;quot;1&amp;quot; name=&amp;quot;[PROJECT_NAME]&amp;quot;&amp;gt;https://www.example.com/mod_foo.xml&amp;lt;/server&amp;gt;&lt;br /&gt;
&amp;lt;/updateservers&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
    &amp;lt;updateservers&amp;gt;&lt;br /&gt;
        &amp;lt;server type=&amp;quot;extension&amp;quot; priority=&amp;quot;1&amp;quot; name=&amp;quot;[PROJECT_NAME]&amp;quot;&amp;gt;https://www.example.com/mod_foo.xml&amp;lt;/server&amp;gt;&lt;br /&gt;
    &amp;lt;/updateservers&amp;gt;&lt;br /&gt;
    &amp;lt;config&amp;gt;&lt;br /&gt;
        &amp;lt;fields name=&amp;quot;params&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;basic&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
                    type=&amp;quot;url&amp;quot;&lt;br /&gt;
                    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
                    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;advanced&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
                    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
                    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
                    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
                    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
                    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
                    type=&amp;quot;list&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
                    type=&amp;quot;number&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
                    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
                    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
        &amp;lt;/fields&amp;gt;&lt;br /&gt;
    &amp;lt;/config&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
So now that Joomlaǃ is searching for updates to our extension - let&#039;s create one to test out our process. But first we need to create the file &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt;. So far we have only described the update server. We do not know yet if there is an update. In the file &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt; we indicate when a new version is published and where it can be downloaded.&lt;br /&gt;
&lt;br /&gt;
=== Creating foo_update.xml ===&lt;br /&gt;
Now we have to create the XML file at &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/foo_update.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; to let Joomla know an update is available. &lt;br /&gt;
 &lt;br /&gt;
==== Completed foo_update.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; ?&amp;gt;&lt;br /&gt;
&amp;lt;updates&amp;gt;&lt;br /&gt;
    &amp;lt;update&amp;gt;&lt;br /&gt;
        &amp;lt;name&amp;gt;Foo&amp;lt;/name&amp;gt;&lt;br /&gt;
        &amp;lt;description&amp;gt;This is mod_foo 1.0.1&amp;lt;/description&amp;gt;&lt;br /&gt;
        &amp;lt;element&amp;gt;mod_foo&amp;lt;/element&amp;gt;&lt;br /&gt;
        &amp;lt;type&amp;gt;module&amp;lt;/type&amp;gt;&lt;br /&gt;
        &amp;lt;version&amp;gt;1.0.1&amp;lt;/version&amp;gt;&lt;br /&gt;
        &amp;lt;downloads&amp;gt;&lt;br /&gt;
            &amp;lt;downloadurl type=&amp;quot;full&amp;quot; format=&amp;quot;zip&amp;quot;&amp;gt;http://www.example.com/mod_foo_101.zip&amp;lt;/downloadurl&amp;gt;&lt;br /&gt;
        &amp;lt;/downloads&amp;gt;&lt;br /&gt;
        &amp;lt;maintainer&amp;gt;Joomla&amp;lt;/maintainer&amp;gt;&lt;br /&gt;
        &amp;lt;maintainerurl&amp;gt;http://www.example.com&amp;lt;/maintainerurl&amp;gt;&lt;br /&gt;
        &amp;lt;targetplatform name=&amp;quot;joomla&amp;quot; version=&amp;quot;4.0&amp;quot;/&amp;gt;&lt;br /&gt;
        &amp;lt;client&amp;gt;site&amp;lt;/client&amp;gt;&lt;br /&gt;
    &amp;lt;/update&amp;gt;&lt;br /&gt;
&amp;lt;/updates&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
After uploading this file to the address &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;https://www.example.com/mod_foo.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; the update will be displayed in the Joomla backend.&lt;br /&gt;
&lt;br /&gt;
=== Test your module update ===&lt;br /&gt;
Create a copy of the module as it is now. Then let&#039;s update the version number to 1.0.1. Now you can zip all files. After that you should load your zip to the URL &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/mod_foo_101.zip&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt;. Now you can update your module via the Joomla Updater.&lt;br /&gt;
&lt;br /&gt;
=== Commercial Modules ===&lt;br /&gt;
Note that in our files we have linked to the extensions updates xml file. And from that xml file we have a location for the zip of the module. This means that if someone was to track this backwards they could find the physical source of your modules zip file. If you don&#039;t do like this, you can find a solution in this PRː https://github.com/joomla/joomla-cms/pull/15185 .&lt;br /&gt;
&lt;br /&gt;
=== Conclusion ===&lt;br /&gt;
With the Joomlaǃ updater, you can easily reach all users and tell them that there is a new version. Even the update itself is easy. &lt;br /&gt;
&lt;br /&gt;
Each extension should use an update server. Especially for security reasons.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Beginner Development{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials in a Series{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
[[Category:Module Development{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Creating_a_Simple_Module/204/ru&amp;diff=848188</id>
		<title>Translations:J4.x:Creating a Simple Module/204/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Creating_a_Simple_Module/204/ru&amp;diff=848188"/>
		<updated>2021-11-17T14:25:49Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Код для &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; выглядит следующим образом:&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Код для &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; выглядит следующим образом:&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=J4.x:Creating_a_Simple_Module/ru&amp;diff=848187</id>
		<title>J4.x:Creating a Simple Module/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=J4.x:Creating_a_Simple_Module/ru&amp;diff=848187"/>
		<updated>2021-11-17T14:24:50Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Код для &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt; выглядит следующим образом:&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;noinclude&amp;gt;&amp;lt;languages /&amp;gt;&amp;lt;/noinclude&amp;gt;&lt;br /&gt;
{{Joomla version|version=4.x|comment=&amp;gt;Tutorial}}&lt;br /&gt;
{{-}}&lt;br /&gt;
{{Top portal heading|color=white-bkgd|icon=file-code-o|icon-color=#5091cd|size=5x|text-color=#333|title=Creating a Simple Module for Joomla 4.x}}&lt;br /&gt;
{{-}}&lt;br /&gt;
&lt;br /&gt;
This is a tutorial on how to Create a simple module for Joomla Version 4x. &lt;br /&gt;
== Introduction ==&lt;br /&gt;
Joomlaǃ 4 provides five types of extensionsː&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Component|Components]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;A component is the main part of the site. A component handles data manipulation as well as input and storage into the database. A component on most sites is the primary focus of the page.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Module|Modules]]&#039;&#039;&#039; &amp;lt;br /&amp;gt;A module is an add-on to the site that extends the functionality. A module usually occupies a secondary portion of the web page and is not considered the primary focus of a page. It can be displayed on different positions and you can choose on which active menu items it should be displayed. Modules are lightweight and flexible extensions. They are used for small bits of the page that are generally less complex and are able to be seen across different components.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Plugin|Plugins]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;A Plugin manipulates output that is already generated by the system. It typically does not run as separate part of the site. It takes data from other sources (i.e. the content) and manipulates this data before displaying. A plugin typically work behind the scenes.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Languages|Languages]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;Probably the most basic extensions are languages. In essence the language package files consist of key/value pairs, which provide the translation of static text strings, assigned within the Joomla! source code.&lt;br /&gt;
* &#039;&#039;&#039;[[S:MyLanguage/Templates|Templates]]&#039;&#039;&#039;&amp;lt;br /&amp;gt;A template is basically the design of your Joomla! powered website.&lt;br /&gt;
&lt;br /&gt;
Joomla! 4 is constructed using five different applications:&lt;br /&gt;
* Installation (used for installing Joomla and have to delete after installation);&lt;br /&gt;
* Administrator (backend - used for managing content);&lt;br /&gt;
* Public or site (frontend - used for displaying content);&lt;br /&gt;
* CLI (used for accessing Joomla on the command line and for cron jobs);&lt;br /&gt;
* API (web services - used for creating APIs for machine accessible content);&lt;br /&gt;
The installation application is used once. The administrator and public are used through the concept of &#039;&#039;components&#039;&#039; with &#039;&#039;modules&#039;&#039;. Each module has a single entry point located in the &#039;&#039;modules&#039;&#039; and accordingly &#039;&#039;administrator/modules&#039;&#039;  directory. This entry point is called &amp;lt;tt&amp;gt;&#039;&#039;mod_modulename/mod_modulename.php&#039;&#039;&amp;lt;/tt&amp;gt; (the &#039;&#039;mod_&#039;&#039; prefix is a historical trace). The entry point for the login module is for example &#039;&#039;/mod_login/mod_login.php&#039;&#039;.&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x installation available to use for this tutorial ([https://github.com/joomla/joomla-cms/releases Download latest release here])&lt;br /&gt;
&lt;br /&gt;
You can download Joomla! 4 at [https://github.com/joomla/joomla-cms/releases GitHub], on the [https://developer.joomla.org/nightly-builds.html Developer website] or you can create a free website at https://launch.joomla.org.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Creating a simple module/Developing a Basic Module - Part 1 ==&lt;br /&gt;
You can see many examples of modules in the standard Joomla! install. For example:&lt;br /&gt;
* Menus &lt;br /&gt;
* Latest News&lt;br /&gt;
* Login form&lt;br /&gt;
* and many more.&lt;br /&gt;
&lt;br /&gt;
This tutorial will explain how to create a simple module. Through this tutorial you will learn the basic file structure of a Joomlaǃ 4 module. This basic structure can then be expanded to produce more elaborate modules.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
There are a few basic files that are used in the standard pattern of module development:&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; - This file is the main entry point for the module. It will perform any necessary initialization routines, call helper routines to collect any necessary data, and include the template which will display the module output.&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - This file contains information about the module. It defines the files that need to be installed by the Joomla! installer and specifies configuration parameters for the module.&lt;br /&gt;
* &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; - This is the module template. This file will take the data collected by mod_foo.php and generate the HTML to be displayed on the page.&lt;br /&gt;
* &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; and &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt;- This are the files that provide the text in United Kingdom English.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== Creating mod_foo.php ===&lt;br /&gt;
The &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file will perform following tasks:&lt;br /&gt;
* Import the class &amp;lt;tt&amp;gt;ModuleHelper&amp;lt;/tt&amp;gt; to the current scope. We need it later for displaying the output.&lt;br /&gt;
* Include the template to display the output.&lt;br /&gt;
&lt;br /&gt;
The helper class is imported to our current scope at the begin of the file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;use Joomla\CMS\Helper\ModuleHelper;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Last we include the template to display the output via&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;require ModuleHelper::getLayoutPath(&#039;mod_foo&#039;, $params-&amp;gt;get(&#039;layout&#039;, &#039;default&#039;));&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.php file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
use Joomla\CMS\Helper\ModuleHelper;&lt;br /&gt;
&lt;br /&gt;
require ModuleHelper::getLayoutPath(&#039;mod_foo&#039;, $params-&amp;gt;get(&#039;layout&#039;, &#039;default&#039;));&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&#039;&#039;Side note&#039;&#039;ː In Joomla 3x you usually used a line like &amp;lt;tt&amp;gt;$moduleclass_sfx = htmlspecialchars($params-&amp;gt;get(&#039;moduleclass_sfx&#039;));&amp;lt;/tt&amp;gt;. You don&#039;t need this anymore. See this PRː https://github.com/joomla/joomla-cms/pull/17447. &lt;br /&gt;
&lt;br /&gt;
The one line that we haven’t explained so far is the first line &amp;lt;tt&amp;gt;defined(&#039;_JEXEC&#039;) or die;&amp;lt;/tt&amp;gt;. This line checks to make sure that this file is being included from the Joomla application. This is necessary to prevent variable injection and other potential security concerns.&lt;br /&gt;
&lt;br /&gt;
=== Creating tmpl/default.php ===&lt;br /&gt;
The &amp;lt;tt&amp;gt;default.php&amp;lt;/tt&amp;gt; file is the template which displays the module output.&lt;br /&gt;
&lt;br /&gt;
==== Completed tmpl/default.php file ====&lt;br /&gt;
The code for the tmpl/default.php file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
echo &#039;[PROJECT_NAME]&#039;; &lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
An important point to note is that the template file has the same scope as the &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file. It means that a variable can be defined in the &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file and then used in the template file without any extra declarations or function calls.&lt;br /&gt;
&lt;br /&gt;
=== Creating mod_foo.xml ===&lt;br /&gt;
The &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is the installation file. Most entries are self-explanatory.&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml file ====&lt;br /&gt;
The code for the &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt;  file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Создание языковых файлов ===&lt;br /&gt;
Файлы &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; и &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt; используются для перевода текста на сайте и панели администратора соответственно. Обратите внимание, что структура языкового файла была обновлена в Joomla 4, и языковые префиксы для отдельных файлов в языковой папке больше не требуются.&lt;br /&gt;
&lt;br /&gt;
Код для &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt; выглядит следующим образом:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The code for &amp;lt;tt&amp;gt;language/en-GB/mod_foo.ini&amp;lt;/tt&amp;gt; is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
The &amp;lt;tt&amp;gt;.sys.ini&amp;lt;/tt&amp;gt; file is used to translate the description of the extension upon installation, where as the &amp;lt;tt&amp;gt;.ini&amp;lt;/tt&amp;gt; file is used to translate the remaining strings and the description when viewing your extension. &lt;br /&gt;
&lt;br /&gt;
More information about language files can be found [[S:MyLanguage/Specification_of_language_files|here]].&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&amp;lt;br /&amp;gt;&lt;br /&gt;
After that you can choose your module in the module manager, when you create a new site module. &lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial1-en.png|700px|center]]&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial2-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
In the frontend, you will see your module like displayed in the next image.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial3-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
Module development for Joomla is a fairly simple, straightforward process. Using the techniques described in this tutorial, an endless variety of modules can be developed with little hassle.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Add a helper class using namespaces - Part 2==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
== Namespaces ==&lt;br /&gt;
With PHP 5.3, the namespaces came into their own. In other programming languages for a long time in use, these small structures now also help us with the clarity of our code. &lt;br /&gt;
&lt;br /&gt;
Namespaces are separate areas in which certain logical things (in our case, classes, interfaces, functions, and constants) can live. These areas provide encapsulation of the code and prevent name conflicts.&lt;br /&gt;
&lt;br /&gt;
Let&#039;s take a look how to use them in Joomla 4. We use the helper file for this.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will create/change the following files:&lt;br /&gt;
* &amp;lt;code&amp;gt;Helper/FooHelper.php&amp;lt;/code&amp;gt; - This is the file we use here as an example. We have to create it.&lt;br /&gt;
* &amp;lt;code&amp;gt;mod_foo.php&amp;lt;/code&amp;gt; - In this file, we will mainly load the namespace.&lt;br /&gt;
* &amp;lt;code&amp;gt;tmpl/default.php&amp;lt;/code&amp;gt; - In this file, we will demonstrate how the data of a helper can be displayed.&lt;br /&gt;
* &amp;lt;code&amp;gt;mod_foo.xml&amp;lt;/code&amp;gt; - We create a new directory with a new file. This must be installed during the installation. For this we have to specify them in this file.&lt;br /&gt;
&lt;br /&gt;
=== Creating Helper/FooHelper.php ===&lt;br /&gt;
Our new helper class should belong to a namespace. We achieve this with the following code. It is important, that this line is at the beginning of the file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;namespace Joomla\Module\Foo\Site\Helper;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then we create a simple class with a simple method. Of course you can do a lot more here. Take a look at the Joomla core methods. Here are many examples. They show you first-hand what options you have.&lt;br /&gt;
&lt;br /&gt;
==== Completed Helper/FooHelper.php ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;FooHelper.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package     Joomla.Site&lt;br /&gt;
 * @subpackage  mod_foo&lt;br /&gt;
 *&lt;br /&gt;
 * @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.&lt;br /&gt;
 * @license     GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
namespace Joomla\Module\Foo\Site\Helper;&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
/**&lt;br /&gt;
 * Helper for mod_foo&lt;br /&gt;
 *&lt;br /&gt;
 * @since  4.0&lt;br /&gt;
 */&lt;br /&gt;
class FooHelper&lt;br /&gt;
{&lt;br /&gt;
	/**&lt;br /&gt;
	 * Retrieve foo test&lt;br /&gt;
	 *&lt;br /&gt;
	 * @param   Registry        $params  The module parameters&lt;br /&gt;
	 * @param   CMSApplication  $app     The application&lt;br /&gt;
	 *&lt;br /&gt;
	 * @return  array&lt;br /&gt;
	 */&lt;br /&gt;
	public static function getText()&lt;br /&gt;
	{&lt;br /&gt;
		return &#039;FooHelpertest&#039;;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.php ===&lt;br /&gt;
Our new helper class is imported to our current scope at the beginning of the file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;use Joomla\Module\Foo\Site\Helper\FooHelper;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Last use the helper file for testing if it is loaded correctlyː&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;$test  = FooHelper::getText($params, $app);&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.php file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
use Joomla\CMS\Helper\ModuleHelper;&lt;br /&gt;
use Joomla\Module\Foo\Site\Helper\FooHelper;&lt;br /&gt;
&lt;br /&gt;
$test  = FooHelper::getText();&lt;br /&gt;
&lt;br /&gt;
require ModuleHelper::getLayoutPath(&#039;mod_foo&#039;, $params-&amp;gt;get(&#039;layout&#039;, &#039;default&#039;));&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing tmpl/default.php ===&lt;br /&gt;
In this file you make only a small change to demonstrate in the frontend that your helper file is working properly. You only add the value of the variable at the end of the current output.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;echo &#039;[PROJECT_NAME]&#039; . $test;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed tmpl/default.php ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
echo &#039;[PROJECT_NAME]&#039; . $test; &lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.xml ===&lt;br /&gt;
First you have to add a line, so that the namespace is set automatically in Joomla. After this change, you have to re-install your module. A simple change in an already installed module is not enough. If you are doing local development you can also delete the files libraries/autoload_psr4.php and it will automatically be re-created. After inserting and installing, the namespace is known by the loader &amp;lt;tt&amp;gt;JPATH_LIBRARIES . &#039;/autoload_psr4.php&#039;&amp;lt;/tt&amp;gt;.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Joomla! should copy your helper file when installing the module. So Joomla! needs to know your helper file. For this, you need to add the following line to your XML file.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&lt;br /&gt;
After that you can choose your module in the module manager, when you create a new site module. &lt;br /&gt;
&lt;br /&gt;
In the frontend you will see your module like displayed in the next image. The text from your helper file is displayed.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial23-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
As you can see, once you get a bit into the namespaces, they are not that complicated anymore. In big projects they can bring a lot of benefits. However, we should plan namespaces, as otherwise it will soon be more time-consuming.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Customizationː Add parameters via form fields - Part 3 ==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
== Customization with form fields and parameters ==&lt;br /&gt;
Form fields give a great deal of customization in Joomla and for modules are the sole way of allowing the user to tweak the module to the needs of their site. &lt;br /&gt;
&lt;br /&gt;
In this case we are going to extend our previous example using a url field for inserting a domain that we can use as link in the front end. To allow this to happen we will use the [[S:MyLanguage/URL_form_field_type|URL Form Field]] type.&lt;br /&gt;
&lt;br /&gt;
After that, we insert parameters that allow to use standard functionality of Joomla.&lt;br /&gt;
&lt;br /&gt;
Let&#039;s take a look on how to use them in Joomla 4.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will change the following files:&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - This is the file where we add the fields.&lt;br /&gt;
* &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; - In this file demonstrate how the data of a field can be used.&lt;br /&gt;
* &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.ini&amp;lt;/tt&amp;gt; - Here we use a language string so that the field can be labeled correctly in different languages.&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.xml ===&lt;br /&gt;
First we set a custom parameter.  &lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
    type=&amp;quot;url&amp;quot;&lt;br /&gt;
    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Then we insert Joomla default fields, so that we can use cache, moduleclass-suffix and layouts.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
    type=&amp;quot;list&amp;quot;&lt;br /&gt;
    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
    default=&amp;quot;0&amp;quot;&lt;br /&gt;
&amp;gt;&lt;br /&gt;
    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
&amp;lt;/field&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
    type=&amp;quot;number&amp;quot;&lt;br /&gt;
    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
    default=&amp;quot;0&amp;quot;&lt;br /&gt;
/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;field&lt;br /&gt;
    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
&amp;gt;&lt;br /&gt;
    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
&amp;lt;/field&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
    &amp;lt;config&amp;gt;&lt;br /&gt;
        &amp;lt;fields name=&amp;quot;params&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;basic&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
                    type=&amp;quot;url&amp;quot;&lt;br /&gt;
                    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
                    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;advanced&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
                    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
                    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
                    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
                    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
                    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
                    type=&amp;quot;list&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
                    type=&amp;quot;number&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
                    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
                    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
        &amp;lt;/fields&amp;gt;&lt;br /&gt;
    &amp;lt;/config&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing tmpl/default.php ===&lt;br /&gt;
We can use the value of the parameter for creating a hyperlink in the frontend. We can access the value via the variable $params.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;$domain = $params-&amp;gt;get(&#039;domain&#039;, &#039;https://www.joomla.org&#039;);&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
Later we set use this value for creating the hyperlink.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;a href=&amp;quot;&amp;lt;?php echo $domain; ?&amp;gt;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;?php echo &#039;[PROJECT_NAME]&#039; . $test; ?&amp;gt;&lt;br /&gt;
&amp;lt;/a&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed tmpl/default.php file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;tmpl/default.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
$domain = $params-&amp;gt;get(&#039;domain&#039;, &#039;https://www.joomla.org&#039;);&lt;br /&gt;
?&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;a href=&amp;quot;&amp;lt;?php echo $domain; ?&amp;gt;&amp;quot;&amp;gt;&lt;br /&gt;
	&amp;lt;?php echo &#039;[PROJECT_NAME]&#039; . $test; ?&amp;gt;&lt;br /&gt;
&amp;lt;/a&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing language/en-GB/en-GB.mod_foo.ini ===&lt;br /&gt;
Here we can specify the text for the English version of the field label.&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;MOD_FOO_FIELD_URL_LABEL=&amp;quot;Url&amp;quot;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed language/en-GB/en-GB.mod_foo.ini ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.ini&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
MOD_FOO_FIELD_URL_LABEL=&amp;quot;Url&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&lt;br /&gt;
After that you can choose your module in the module manager, when you create a new site module. &lt;br /&gt;
&lt;br /&gt;
In the backend, you will see your module like displayed in the next image. &lt;br /&gt;
&lt;br /&gt;
In the basic tab, you will see the custom field where you can insert a domain. The text for the label is fetched from the language file. &lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial31-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
In the advanced tab, you will see all default options except the cache mode because of this is a hidden field.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial32-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
In the frontend, you will see your module like displayed in the next image. The text form your helper file is displayed and you should see a hyperlink.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial33-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
Form fields give the user an easy way to customize the module to their sites settings. This allows the modules scope to be increased. &lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
See this issue for possible future changes:&lt;br /&gt;
* https://github.com/joomla/joomla-cms/pull/23553&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Use Install, Update and Uninstall script - Part 4 ==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
=== Scripts ===&lt;br /&gt;
Installing, updating and uninstalling a module may require additional operations that cannot be achieved by the basic operations described in the main XML file. Joomla offers a new approach to solve this problem. It consists in using a PHP script file containing a class using five methods:&lt;br /&gt;
* preflight which is executed before install and update&lt;br /&gt;
* install&lt;br /&gt;
* update&lt;br /&gt;
* uninstall&lt;br /&gt;
* postflight which is executed after install and update&lt;br /&gt;
&lt;br /&gt;
Let&#039;s take a look how to use them in Joomla 4. We use the helper file for this.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will create/change the following files:&lt;br /&gt;
* &amp;lt;tt&amp;gt;script.php&amp;lt;/tt&amp;gt; - This is the file we use here as an example. We have to create it.&lt;br /&gt;
* &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.sys.ini&amp;lt;/tt&amp;gt; - In this file we will add text.&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - We create a new file. This must be installed during the installation. For this we have to specify it in this file.&lt;br /&gt;
&lt;br /&gt;
=== Creating script.php ===&lt;br /&gt;
Writing an extension script consists in declaring a class whose name is &amp;lt;tt&amp;gt;mod_ModuleNameInstallerScript&amp;lt;/tt&amp;gt; with these 5 methods. See the comments in the file for more information. In this comments I explain when a method is called. &lt;br /&gt;
&lt;br /&gt;
In this example, I only use text to show when which method will be executed. In addition, I show you how to check the minimum requirements. Of course you can do much more. For example, you can delete files that are no longer needed in a new version of your module. This can be seen in the file. Another idea for this file is to create sample content, to show a success message with the current installed version number or you can redirect after a successful installation to the page with the module settings. &lt;br /&gt;
&lt;br /&gt;
==== Completed script.php ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;script.php&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?php&lt;br /&gt;
/**&lt;br /&gt;
 * @package    [PACKAGE_NAME]&lt;br /&gt;
 *&lt;br /&gt;
 * @author     [AUTHOR] &amp;lt;[AUTHOR_EMAIL]&amp;gt;&lt;br /&gt;
 * @copyright  [COPYRIGHT]&lt;br /&gt;
 * @license    GNU General Public License version 2 or later; see LICENSE.txt&lt;br /&gt;
 * @link       [AUTHOR_URL]&lt;br /&gt;
 */&lt;br /&gt;
&lt;br /&gt;
// No direct access to this file&lt;br /&gt;
defined(&#039;_JEXEC&#039;) or die;&lt;br /&gt;
&lt;br /&gt;
use Joomla\CMS\Language\Text;&lt;br /&gt;
use Joomla\CMS\Log\Log;&lt;br /&gt;
&lt;br /&gt;
/**&lt;br /&gt;
 * Script file of Foo module&lt;br /&gt;
 */&lt;br /&gt;
class mod_fooInstallerScript {&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Extension script constructor.&lt;br /&gt;
     *&lt;br /&gt;
     * @return  void&lt;br /&gt;
     */&lt;br /&gt;
    public function __construct() {&lt;br /&gt;
        $this-&amp;gt;minimumJoomla = &#039;4.0&#039;;&lt;br /&gt;
        $this-&amp;gt;minimumPhp = JOOMLA_MINIMUM_PHP;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Method to install the extension&lt;br /&gt;
     *&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function install($parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_INSTALL&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Method to uninstall the extension&lt;br /&gt;
     *&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function uninstall($parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_UNINSTALL&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Method to update the extension&lt;br /&gt;
     *&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function update($parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_UPDATE&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Function called before extension installation/update/removal procedure commences&lt;br /&gt;
     *&lt;br /&gt;
     * @param   string            $type    The type of change (install, update or discover_install, not uninstall)&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function preflight($type, $parent) {&lt;br /&gt;
        // Check for the minimum PHP version before continuing&lt;br /&gt;
        if (!empty($this-&amp;gt;minimumPhp) &amp;amp;&amp;amp; version_compare(PHP_VERSION, $this-&amp;gt;minimumPhp, &#039;&amp;lt;&#039;)) {&lt;br /&gt;
            Log::add(Text::sprintf(&#039;JLIB_INSTALLER_MINIMUM_PHP&#039;, $this-&amp;gt;minimumPhp), Log::WARNING, &#039;jerror&#039;);&lt;br /&gt;
&lt;br /&gt;
            return false;&lt;br /&gt;
        }&lt;br /&gt;
&lt;br /&gt;
        // Check for the minimum Joomla version before continuing&lt;br /&gt;
        if (!empty($this-&amp;gt;minimumJoomla) &amp;amp;&amp;amp; version_compare(JVERSION, $this-&amp;gt;minimumJoomla, &#039;&amp;lt;&#039;)) {&lt;br /&gt;
            Log::add(Text::sprintf(&#039;JLIB_INSTALLER_MINIMUM_JOOMLA&#039;, $this-&amp;gt;minimumJoomla), Log::WARNING, &#039;jerror&#039;);&lt;br /&gt;
&lt;br /&gt;
            return false;&lt;br /&gt;
        }&lt;br /&gt;
        &lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_PREFLIGHT&#039;);&lt;br /&gt;
        echo $this-&amp;gt;minimumJoomla . &#039; &#039; . $this-&amp;gt;minimumPhp;&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
    /**&lt;br /&gt;
     * Function called after extension installation/update/removal procedure commences&lt;br /&gt;
     *&lt;br /&gt;
     * @param   string            $type    The type of change (install, update or discover_install, not uninstall)&lt;br /&gt;
     * @param   InstallerAdapter  $parent  The class calling this method&lt;br /&gt;
     *&lt;br /&gt;
     * @return  boolean  True on success&lt;br /&gt;
     */&lt;br /&gt;
    function postflight($type, $parent) {&lt;br /&gt;
        echo Text::_(&#039;MOD_FOO_INSTALLERSCRIPT_POSTFLIGHT&#039;);&lt;br /&gt;
&lt;br /&gt;
        return true;&lt;br /&gt;
    }&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing language/en-GB/en-GB.mod_foo.sys.ini ===&lt;br /&gt;
There is not much to explain here. Write the text for the translation into this file.&lt;br /&gt;
&lt;br /&gt;
==== Completed language/en-GB/en-GB.mod_foo.sys.ini file ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;language/en-GB/en-GB.mod_foo.sys.ini&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
MOD_FOO=&amp;quot;[PROJECT_NAME]&amp;quot;&lt;br /&gt;
MOD_FOO_XML_DESCRIPTION=&amp;quot;Foo Module&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_PREFLIGHT=&amp;quot;&amp;lt;p&amp;gt;Anything here happens before the installation/update/uninstallation of the module&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_UPDATE=&amp;quot;&amp;lt;p&amp;gt;The module has been updated&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_UNINSTALL=&amp;quot;&amp;lt;p&amp;gt;The module has been uninstalled&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_INSTALL=&amp;quot;&amp;lt;p&amp;gt;The module has been installed&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
MOD_FOO_INSTALLERSCRIPT_POSTFLIGHT=&amp;quot;&amp;lt;p&amp;gt;Anything here happens after the installation/update/uninstallation of the module&amp;lt;/p&amp;gt;&amp;quot;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Editing mod_foo.xml ===&lt;br /&gt;
You have to add a line, so that the script is called automatically in Joomla. &lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&amp;lt;scriptfile&amp;gt;script.php&amp;lt;/scriptfile&amp;gt;&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;scriptfile&amp;gt;script.php&amp;lt;/scriptfile&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
    &amp;lt;config&amp;gt;&lt;br /&gt;
        &amp;lt;fields name=&amp;quot;params&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;basic&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
                    type=&amp;quot;url&amp;quot;&lt;br /&gt;
                    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
                    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;advanced&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
                    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
                    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
                    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
                    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
                    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
                    type=&amp;quot;list&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
                    type=&amp;quot;number&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
                    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
                    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
        &amp;lt;/fields&amp;gt;&lt;br /&gt;
    &amp;lt;/config&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test your module ==&lt;br /&gt;
Now you can zip all files and install them via the Joomla Extension Manager.&lt;br /&gt;
Immediately after the installation, you will see the following information. This you had entered in the script so.&lt;br /&gt;
{{-}}&lt;br /&gt;
[[File:moduletutorial14-en.png|700px|center]]&lt;br /&gt;
&lt;br /&gt;
== Conclusion ==&lt;br /&gt;
As you can see, Joomla offers you a lot to make your extension easy to use - right from the start.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Use Joomla Updaterː Adding Auto Update - Part 5 ==&lt;br /&gt;
&lt;br /&gt;
=== Requirements ===&lt;br /&gt;
You need Joomla! 4.x for this tutorial (as of writing currently Joomla! 4.0.0-alpha6-dev)&lt;br /&gt;
&lt;br /&gt;
=== Joomla Updater ===&lt;br /&gt;
The first thing to do is to read the [[S:MyLanguage/J2.5:Managing_Component_Updates|Managing Component Upgrades with Joomla 2.5 - Part 1]] tutorial to give an idea of how the upgrade process works in Joomlaǃ. Whilst written for 2.5 the process hasn&#039;t changed. Also read [[S:MyLanguage/Deploying_an_Update_Server|Deploying an update server]] - this is what we&#039;ll be implementing in this tutorial.&lt;br /&gt;
&lt;br /&gt;
=== File Structure ===&lt;br /&gt;
We will create/change the following files:&lt;br /&gt;
* &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; - The only way to update our existing module is to add in a update server - for example &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/foo_update.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; - into the xml file. &lt;br /&gt;
* &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt; - Then we have to create the XML file for the update server at &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/foo_update.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; to let Joomla know an update is available. &lt;br /&gt;
&lt;br /&gt;
==== Editing mod_foo.xml ====&lt;br /&gt;
To add our update server, we need to insert the following lines in your XML-Fileː&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;php&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;updateservers&amp;gt;&lt;br /&gt;
    &amp;lt;server type=&amp;quot;extension&amp;quot; priority=&amp;quot;1&amp;quot; name=&amp;quot;[PROJECT_NAME]&amp;quot;&amp;gt;https://www.example.com/mod_foo.xml&amp;lt;/server&amp;gt;&lt;br /&gt;
&amp;lt;/updateservers&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
==== Completed mod_foo.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;mod_foo.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;&lt;br /&gt;
&amp;lt;extension type=&amp;quot;module&amp;quot; version=&amp;quot;4.0&amp;quot; client=&amp;quot;site&amp;quot; method=&amp;quot;upgrade&amp;quot;&amp;gt;&lt;br /&gt;
    &amp;lt;name&amp;gt;MOD_FOO&amp;lt;/name&amp;gt;&lt;br /&gt;
    &amp;lt;creationDate&amp;gt;[DATE]&amp;lt;/creationDate&amp;gt;&lt;br /&gt;
    &amp;lt;author&amp;gt;[AUTHOR]&amp;lt;/author&amp;gt;&lt;br /&gt;
    &amp;lt;authorEmail&amp;gt;[AUTHOR_EMAIL]&amp;lt;/authorEmail&amp;gt;&lt;br /&gt;
    &amp;lt;authorUrl&amp;gt;[AUTHOR_URL]&amp;lt;/authorUrl&amp;gt;&lt;br /&gt;
    &amp;lt;copyright&amp;gt;[COPYRIGHT]&amp;lt;/copyright&amp;gt;&lt;br /&gt;
    &amp;lt;license&amp;gt;GNU General Public License version 2 or later; see LICENSE.txt&amp;lt;/license&amp;gt;&lt;br /&gt;
    &amp;lt;version&amp;gt;1.0&amp;lt;/version&amp;gt;&lt;br /&gt;
    &amp;lt;description&amp;gt;MOD_FOO_XML_DESCRIPTION&amp;lt;/description&amp;gt;&lt;br /&gt;
    &amp;lt;namespace&amp;gt;Joomla\Module\Foo&amp;lt;/namespace&amp;gt;&lt;br /&gt;
    &amp;lt;files&amp;gt;&lt;br /&gt;
        &amp;lt;filename module=&amp;quot;mod_foo&amp;quot;&amp;gt;mod_foo.php&amp;lt;/filename&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;tmpl&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;Helper&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;folder&amp;gt;language&amp;lt;/folder&amp;gt;&lt;br /&gt;
        &amp;lt;filename&amp;gt;mod_foo.xml&amp;lt;/filename&amp;gt;&lt;br /&gt;
    &amp;lt;/files&amp;gt;&lt;br /&gt;
    &amp;lt;updateservers&amp;gt;&lt;br /&gt;
        &amp;lt;server type=&amp;quot;extension&amp;quot; priority=&amp;quot;1&amp;quot; name=&amp;quot;[PROJECT_NAME]&amp;quot;&amp;gt;https://www.example.com/mod_foo.xml&amp;lt;/server&amp;gt;&lt;br /&gt;
    &amp;lt;/updateservers&amp;gt;&lt;br /&gt;
    &amp;lt;config&amp;gt;&lt;br /&gt;
        &amp;lt;fields name=&amp;quot;params&amp;quot;&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;basic&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;domain&amp;quot;&lt;br /&gt;
                    type=&amp;quot;url&amp;quot;&lt;br /&gt;
                    label=&amp;quot;MOD_FOO_FIELD_URL_LABEL&amp;quot;&lt;br /&gt;
                    filter=&amp;quot;url&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
            &amp;lt;fieldset name=&amp;quot;advanced&amp;quot;&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;layout&amp;quot;&lt;br /&gt;
                    type=&amp;quot;modulelayout&amp;quot;&lt;br /&gt;
                    label=&amp;quot;JFIELD_ALT_LAYOUT_LABEL&amp;quot;&lt;br /&gt;
                    class=&amp;quot;custom-select&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;moduleclass_sfx&amp;quot;&lt;br /&gt;
                    type=&amp;quot;textarea&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_MODULECLASS_SFX_LABEL&amp;quot;&lt;br /&gt;
                    rows=&amp;quot;3&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache&amp;quot;&lt;br /&gt;
                    type=&amp;quot;list&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHING_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;1&amp;quot;&amp;gt;JGLOBAL_USE_GLOBAL&amp;lt;/option&amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;0&amp;quot;&amp;gt;COM_MODULES_FIELD_VALUE_NOCACHING&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cache_time&amp;quot;&lt;br /&gt;
                    type=&amp;quot;number&amp;quot;&lt;br /&gt;
                    label=&amp;quot;COM_MODULES_FIELD_CACHE_TIME_LABEL&amp;quot;&lt;br /&gt;
                    default=&amp;quot;0&amp;quot;&lt;br /&gt;
                /&amp;gt;&lt;br /&gt;
                &amp;lt;field&lt;br /&gt;
                    name=&amp;quot;cachemode&amp;quot;&lt;br /&gt;
                    type=&amp;quot;hidden&amp;quot;&lt;br /&gt;
                    default=&amp;quot;itemid&amp;quot;&lt;br /&gt;
                &amp;gt;&lt;br /&gt;
                    &amp;lt;option value=&amp;quot;itemid&amp;quot;&amp;gt;&amp;lt;/option&amp;gt;&lt;br /&gt;
                &amp;lt;/field&amp;gt;&lt;br /&gt;
            &amp;lt;/fieldset&amp;gt;&lt;br /&gt;
        &amp;lt;/fields&amp;gt;&lt;br /&gt;
    &amp;lt;/config&amp;gt;&lt;br /&gt;
&amp;lt;/extension&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
So now that Joomlaǃ is searching for updates to our extension - let&#039;s create one to test out our process. But first we need to create the file &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt;. So far we have only described the update server. We do not know yet if there is an update. In the file &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt; we indicate when a new version is published and where it can be downloaded.&lt;br /&gt;
&lt;br /&gt;
=== Creating foo_update.xml ===&lt;br /&gt;
Now we have to create the XML file at &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/foo_update.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; to let Joomla know an update is available. &lt;br /&gt;
 &lt;br /&gt;
==== Completed foo_update.xml ====&lt;br /&gt;
The complete &amp;lt;tt&amp;gt;foo_update.xml&amp;lt;/tt&amp;gt; file is as follows:&lt;br /&gt;
 &lt;br /&gt;
&amp;lt;source lang=&amp;quot;xml&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;?xml version=&amp;quot;1.0&amp;quot; ?&amp;gt;&lt;br /&gt;
&amp;lt;updates&amp;gt;&lt;br /&gt;
    &amp;lt;update&amp;gt;&lt;br /&gt;
        &amp;lt;name&amp;gt;Foo&amp;lt;/name&amp;gt;&lt;br /&gt;
        &amp;lt;description&amp;gt;This is mod_foo 1.0.1&amp;lt;/description&amp;gt;&lt;br /&gt;
        &amp;lt;element&amp;gt;mod_foo&amp;lt;/element&amp;gt;&lt;br /&gt;
        &amp;lt;type&amp;gt;module&amp;lt;/type&amp;gt;&lt;br /&gt;
        &amp;lt;version&amp;gt;1.0.1&amp;lt;/version&amp;gt;&lt;br /&gt;
        &amp;lt;downloads&amp;gt;&lt;br /&gt;
            &amp;lt;downloadurl type=&amp;quot;full&amp;quot; format=&amp;quot;zip&amp;quot;&amp;gt;http://www.example.com/mod_foo_101.zip&amp;lt;/downloadurl&amp;gt;&lt;br /&gt;
        &amp;lt;/downloads&amp;gt;&lt;br /&gt;
        &amp;lt;maintainer&amp;gt;Joomla&amp;lt;/maintainer&amp;gt;&lt;br /&gt;
        &amp;lt;maintainerurl&amp;gt;http://www.example.com&amp;lt;/maintainerurl&amp;gt;&lt;br /&gt;
        &amp;lt;targetplatform name=&amp;quot;joomla&amp;quot; version=&amp;quot;4.0&amp;quot;/&amp;gt;&lt;br /&gt;
        &amp;lt;client&amp;gt;site&amp;lt;/client&amp;gt;&lt;br /&gt;
    &amp;lt;/update&amp;gt;&lt;br /&gt;
&amp;lt;/updates&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/source&amp;gt;&lt;br /&gt;
&lt;br /&gt;
After uploading this file to the address &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;https://www.example.com/mod_foo.xml&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt; the update will be displayed in the Joomla backend.&lt;br /&gt;
&lt;br /&gt;
=== Test your module update ===&lt;br /&gt;
Create a copy of the module as it is now. Then let&#039;s update the version number to 1.0.1. Now you can zip all files. After that you should load your zip to the URL &amp;lt;tt&amp;gt;&amp;lt;nowiki&amp;gt;http://www.example.com/mod_foo_101.zip&amp;lt;/nowiki&amp;gt;&amp;lt;/tt&amp;gt;. Now you can update your module via the Joomla Updater.&lt;br /&gt;
&lt;br /&gt;
=== Commercial Modules ===&lt;br /&gt;
Note that in our files we have linked to the extensions updates xml file. And from that xml file we have a location for the zip of the module. This means that if someone was to track this backwards they could find the physical source of your modules zip file. If you don&#039;t do like this, you can find a solution in this PRː https://github.com/joomla/joomla-cms/pull/15185 .&lt;br /&gt;
&lt;br /&gt;
=== Conclusion ===&lt;br /&gt;
With the Joomlaǃ updater, you can easily reach all users and tell them that there is a new version. Even the update itself is easy. &lt;br /&gt;
&lt;br /&gt;
Each extension should use an update server. Especially for security reasons.&lt;br /&gt;
&lt;br /&gt;
You can find boilerplates hereː&lt;br /&gt;
* https://github.com/joomla-extensions/boilerplate/tree/master/module&lt;br /&gt;
The sample files for this Tutorial can be found hereː&lt;br /&gt;
* https://github.com/astridx/boilerplate/tree/tutorial/tutorial/modules&lt;br /&gt;
&lt;br /&gt;
&amp;lt;noinclude&amp;gt;&lt;br /&gt;
[[Category:Beginner Development{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials{{#translation:}}]]&lt;br /&gt;
[[Category:Tutorials in a Series{{#translation:}}]]&lt;br /&gt;
[[Category:Development{{#translation:}}]]&lt;br /&gt;
[[Category:Module Development{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.x{{#translation:}}]]&lt;br /&gt;
[[Category:Joomla! 4.0{{#translation:}}]]&lt;br /&gt;
&amp;lt;/noinclude&amp;gt;&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
	<entry>
		<id>https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Creating_a_Simple_Module/52/ru&amp;diff=848186</id>
		<title>Translations:J4.x:Creating a Simple Module/52/ru</title>
		<link rel="alternate" type="text/html" href="https://docs.sandbox.joomla.org/index.php?title=Translations:J4.x:Creating_a_Simple_Module/52/ru&amp;diff=848186"/>
		<updated>2021-11-17T14:24:45Z</updated>

		<summary type="html">&lt;p&gt;Dzandut: Created page with &amp;quot;Код для &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt; выглядит следующим образом:&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;Код для &amp;lt;tt&amp;gt;language/en-GB/mod_foo.sys.ini&amp;lt;/tt&amp;gt; выглядит следующим образом:&lt;/div&gt;</summary>
		<author><name>Dzandut</name></author>
	</entry>
</feed>