Translating widgets
Application Mashup (WireCloud) course @ http://edu.fiware.org
Presenter Notes
Translating widgets
Translating widget metadata
Presenter Notes
Translating widget metadata
Using XML templates
XML templates allows translations of some fields that will be displayed to users
in WireCloud platform, this translations can be included in the template adding
the translations node with the attribute default specifying the default language
of the widget. For every language to be translated the Traslations node contains
a translation node specifying the language with the attribute lang.
To translate a field, you only need to use MSG_translationName patterns
(where translationName is used as translation identifier) inside the value of
the field. Once added the translation patters, you should add msg nodes
(matching the translation names with the name attribute) to the translation
nodes. These msg elements, will provide the string that will be used to remplace
the translations patterns.
Presenter Notes
Translating widget metadata
Using XML templates
The structure of a config.xml file before and after adding the translations can be seen below:
<widget xmlns="http://wirecloud.conwet.fi.upm.es/ns/macdescription/1" vendor="CoNWeT" name="weather-example" version="1.0">
<details>
<title>Weather Widget Example</title>
<authors>aarranz</authors>
<email>aarranz@conwet.com</email>
<image>images/catalogue.png</image>
<smartphoneimage>images/catalogue_iphone.png</smartphoneimage>
<description>Example of widget for the Wirecloud Plaftorm.</description>
<doc>doc/index.html</doc>
</details>
<wiring>
<outputendpoint name="location_coord" type="text" label="Forecast location" description="This event is launched when the user clicks on the location name of current forecast." friendcode="location"/>
<inputendpoint name="coord" type="text" label="Show forecast by coord" description="Shows the weather forecast for a given location (a latitude longitude coordinate)." friendcode="location"/>
</wiring>
<contents src="weather.html" contenttype="text/html" charset="utf-8"/>
<rendering height="24" width="6"/>
</widget>
Presenter Notes
Translating widget metadata
Using XML templates
Final result (main part):
<widget xmlns="http://wirecloud.conwet.fi.upm.es/ns/macdescription/1" vendor="CoNWeT" name="weather-example" version="1.0">
<details>
<title>__MSG_displayName__</title>
<authors>aarranz</authors>
<email>aarranz@conwet.com</email>
<image>images/catalogue.png</image>
<smartphoneimage>images/catalogue_iphone.png</smartphoneimage>
<description>__MSG_description__</description>
<doc>doc/index.html</doc>
</details>
<wiring>
<outputendpoint name="location_coord" type="text" label="__MSG_eventLabel__" description="__MSG_eventDescription__" friendcode="location"/>
<inputendpoint name="coord" type="text" label="__MSG_slotLabel__" description="__MSG_slotDescription__" friendcode="location"/>
</wiring>
<contents src="weather.html" contenttype="text/html" charset="utf-8"/>
<rendering height="24" width="6"/>
...
Presenter Notes
Translating widget metadata
Using XML templates
Final result (translations):
...
<translations default="en">
<translation lang="en">
<msg name="displayName">Weather Widget Example</msg>
<msg name="description">Example of widget for the Wirecloud Plaftorm.</msg>
<msg name="eventDescription">This event is launched when the user clicks on the location name of current forecast.</msg>
<msg name="slotDescription">Shows the weather forecast for a given location (a latitude longitude coordinate).</msg>
<msg name="slotLabel">Show forecast by coord</msg>
<msg name="eventLabel">Forecast location</msg>
</translation>
<translation lang="es">
<msg name="displayName">Ejemplo de widget del tiempo</msg>
<msg name="description">Ejemplo de un widget para la plataforma Wirecloud.</msg>
<msg name="eventDescription">Este evento se lanza cuando el usuario hace click en el nombre de la ubicación de la previsión actual.</msg>
<msg name="slotDescription">Muestra las previsiones meteorológicas para una ubicación dada (coordenadas en latitud y longitud).</msg>
<msg name="slotLabel">Muestra las prevesiones por coordenadas</msg>
<msg name="eventLabel">Ubicación de la previsión</msg>
</translation>
</translations>
</widget>
Presenter Notes
Translating widget metadata
Using RDF templates
Translations in RDF descriptions are based in the use of RDF literal attribute lang. To translate a field it is included in the template for every language to be translated, specifying the language with the attribute lang.
Presenter Notes
Translating widget metadata
Using RDF templates
The structure of a RDF (xml) description without translations:
...
<wire:Widget rdf:about="http://wirecloud.conwet.fi.upm.es/ns/weather-example">
<dcterms:title>weather-example</dcterms:title>
<dcterms:description>Example of widget for the Wirecloud Plaftorm.</dcterms:description>
<wire:displayName>Weather Widget Example</wire:displayName>
<dcterms:creator>
<foaf:Person>
<foaf:name>aarranz</foaf:name>
</foaf:Person>
</dcterms:creator>
<usdl-core:versionInfo>1.0</usdl-core:versionInfo>
<wire:hasImageUri rdf:resource="images/catalogue.png"/>
<wire:hasiPhoneImageUri rdf:resource="images/catalogue_iphone.png"/>
...
Presenter Notes
Translating widget metadata
Using RDF templates
The structure of a RDF (xml) description with translations:
...
<wire:Widget rdf:about="http://wirecloud.conwet.fi.upm.es/ns/weather-example">
<dcterms:title>weather-example</dcterms:title>
<dcterms:description xml:lang="en">Example of widget for the Wirecloud Plaftorm.</dcterms:description>
<dcterms:description xml:lang="es">Ejemplo de un widget para la plataforma Wirecloud.</dcterms:description>
<wire:displayName xml:lang="en">Weather Widget Example</wire:displayName>
<wire:displayName xml:lang="es">Ejemplo de widget del tiempo</wire:displayName>
<dcterms:creator>
<foaf:Person>
<foaf:name>aarranz</foaf:name>
</foaf:Person>
</dcterms:creator>
<usdl-core:versionInfo>1.0</usdl-core:versionInfo>
<wire:hasImageUri rdf:resource="images/catalogue.png"/>
<wire:hasiPhoneImageUri rdf:resource="images/catalogue_iphone.png"/>
...
Presenter Notes
Translating widget metadata
Using RDF templates
The structure of a RDF (turtle) description without translations:
...
<http://wirecloud.conwet.fi.upm.es/ns/weather-example>
a wire:Widget ;
dcterms:title "weather-example" ;
wire:displayName "Weather Widget Example" ;
dcterms:description "Example of widget for the Wirecloud Plaftorm." ;
dcterms:creator _:b1 ;
usdl-core:versionInfo "1.0" ;
wire:hasImageUri <images/catalogue.png> ;
wire:hasiPhoneImageUri <images/catalogue_iphone.png> ;
...
Presenter Notes
Translating widget metadata
Using RDF templates
The structure of a RDF (turtle) description with translations:
...
<http://wirecloud.conwet.fi.upm.es/ns/weather-example>
a wire:Widget ;
dcterms:title "weather-example" ;
wire:displayName "Weather Widget Example"@en ;
wire:displayName "Ejemplo de widget del tiempo"@es ;
dcterms:description "Example of widget for the Wirecloud Plaftorm."@en ;
dcterms:description "Ejemplo de un widget para la plataforma Wirecloud."@es ;
dcterms:creator _:b1 ;
usdl-core:versionInfo "1.0" ;
wire:hasImageUri <images/catalogue.png> ;
wire:hasiPhoneImageUri <images/catalogue_iphone.png> ;
...
Presenter Notes
Translating widgets
Translating widget contents
Presenter Notes
Translating widget contents
The content of the widget should be translated using javascript and the support for accessing to the context of the platform. Platform context support is needed for knowing what language is currently in use:
MashupPlatform.context.get('language');
Presenter Notes