Revision as of 06:55, 13 July 2011

Adding language translation[edit]

So, we would like our component to support translation, which essentially means that instead of hard-coding strings, we would like the strings to be read from translation files. This makes it very easy to provide multiple translations since all that has to be done to change the language is to read a different language files.

Frontend translation[edit]

The first thing we will do is to add the language files, for now the frontend language files will be empty since we are not displaying anything in the frontend except for the hello message itself, but in the order of completeness, we will still add a file for translating the frontend.

With your favorite editor, create the following empty file

site/language/en-GB/en-GB.com_helloworld.ini

Now, this can get a little tricky, since the view is part of the frontend but the menu item type (site/views/helloworld/tmpl/default.xml) is used in the backend, the translation strings for this xml file will be added to the backend language files and not the frontend, so for now we will only replace the language strings.

With your favorite editor, modify the following file to look like this

site/views/helloworld/tmpl/default.xml

<?xml version="1.0" encoding="utf-8"?>
<metadata>
	<layout title="COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_TITLE">
		<message>COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_DESC</message>
	</layout>
	<fields name="request"
		addfieldpath="/administrator/components/com_helloworld/models/fields">
		<fieldset name="request">
			<field
				name="id"
				type="helloworld"
				label="COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_LABEL"
				description="COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_DESC"
			/>
		</fieldset>
	</fields>
</metadata>

Backend translation[edit]

With your favorite editor, create the following file

site/language/en-GB/en-GB.com_helloworld.ini

COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_DESC="This message will be displayed"
COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_LABEL="Message"
COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING="Greeting"
COM_HELLOWORLD_HELLOWORLD_HEADING_ID="ID"

As you can see, language strings are sort of namespaced. This is a very good practice for avoiding that strings override each other. As an example these strings start with COM_HELLOWORLD which is the component name, and then the next part is HELLOWORLD which is the view name. FIELD clearly states that we are dealing with language strings for form fields etc. This method also makes it very easy to sort the languages files in order to have all the strings of a certain type in the same place, making it both easier to read and to maintain.

In order to provide translation during the installation process, in the extension manager and in the menus, another language file is required in the backend. The difference between these two files can be daunting at first, but usually the sys.ini contains a lot less translation strings and this file is loaded in scenarios where the loaded component is not com_helloworld itself, but minimal translation is still needed.

With your favorite editor, create the following file

site/language/en-GB/en-GB.com_helloworld.sys.ini

COM_HELLOWORLD="Hello World"
COM_HELLOWORLD_DESCRIPTION="This is the Hello World description"
COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_TITLE="Hello World"
COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_DESC="This view displays a selected message"
COM_HELLOWORLD_MENU="Hello World"

With your favorite editor, modify the following file to look like this

admin/views/helloworld/tmpl/default_head.php

<?php
// No direct access to this file
defined('_JEXEC') or die;
?>
<tr>
	<th width="5">
		<?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_HEADING_ID'); ?>
	</th>
	<th width="20">
		<input type="checkbox" name="toggle" value="" onclick="checkAll(<?php echo count($this->items); ?>);" />
	</th>			
	<th>
		<?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING'); ?>
	</th>
</tr>

Here we simply replace the previously hardcoded table headings with their language string counterparts.

Installation manifest[edit]

In our manifest, in addition to updating the version number and adding the language folders for both the frontend and backend, we also replace the component name, description and the menu title with language strings which are present in our language files (line 4, 15 and 41).

helloworld.xml

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="1.6.0" method="upgrade">

	<name>COM_HELLOWORLD</name>
	<!-- The following elements are optional and free of formatting constraints -->
	<creationDate>June 2011</creationDate>
	<author>John Doe</author>
	<authorEmail>john.doe@example.org</authorEmail>
	<authorUrl>http://www.example.org</authorUrl>
	<copyright>Copyright Info</copyright>
	<license>License Info</license>
	<!--  The version string is stored in the components table -->
	<version>0.0.8</version>
	<!-- The description is optional and defaults to the name -->
	<description>COM_HELLOWORLD_DESCRIPTION</description>

	<install>
		<sql>
			<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
		</sql>
	</install>
	<uninstall>
		<sql>
			<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
		</sql>
	</uninstall>

	<!-- Note the folder attribute: This attribute describes the folder
		to copy FROM in the package to install therefore files copied
		in this section are copied from "site/" in the package -->
	<files folder="site">
		<filename>index.html</filename>
		<filename>helloworld.php</filename>
		<filename>controller.php</filename>
		<folder>views</folder>
		<folder>models</folder>
		<folder>language</folder>
	</files>

	<administration>
		<menu>COM_HELLOWORLD_MENU</menu>
		<!-- Note the folder attribute: This attribute describes the folder
			to copy FROM in the package to install therefore files copied
			in this section are copied from "admin/" in the package -->
		<files folder="admin">
			<filename>index.html</filename>
			<filename>helloworld.php</filename>
			<filename>controller.php</filename>
			<folder>sql</folder>
			<folder>tables</folder>
			<folder>models</folder>
			<folder>views</folder>
			<folder>language</folder>
		</files>
	</administration>

</extension>

Testing your component[edit]

For details on how to install the component into your Joomla! site, refer to the information provided in Part 01.

In order to see if this component works, make sure all the language strings are properly translated both in the frontend and backend.

File listing[edit]

Download this part[edit]

Articles in this series[edit]

This tutorial is supported by the following versions of Joomla!

@@ Line 53: / Line 53: @@
 </source>
 </span>
+As you can see, language strings are sort of namespaced. This is a very good practice for avoiding that strings override each other. As an example these strings start with '''COM_HELLOWORLD''' which is the component name, and then the next part is '''HELLOWORLD''' which is the view name. '''FIELD''' clearly states that we are dealing with language strings for form fields etc. This method also makes it very easy to sort the languages files in order to have all the strings of a certain type in the same place, making it both easier to read and to maintain.
 In order to provide translation during the installation process, in the extension manager and in the menus, another language file is required in the backend. The difference between these two files can be daunting at first, but usually the '''sys.ini''' contains a lot less translation strings and this file is loaded in scenarios where the loaded component is not '''com_helloworld''' itself, but minimal translation is still needed.
@@ Line 91: / Line 93: @@
 </source>
 </span>
+Here we simply replace the previously hardcoded table headings with their language string counterparts.
 == Installation manifest ==

User

Difference between revisions of "Rvsjoen/tutorial/Developing an MVC Component/Part 08"

From Joomla! Documentation

< User:Rvsjoen‎ | tutorial/Developing an MVC Component