KAWWA Markup Pattern Library


Site Utilities

Language Selection Component Information

  • Class name: (k-language)
  • Version: 1.1
  • jQuery jQuery Interactive feature
  • Tapestry Tapestry Integration

Add to list

The choice of the main site language may be done in two ways:

  • Via radio boxes: the choice of the available languages is presented by radio boxes and it uses "jQuery.button" plug-in to controls its design, as presented by the demo here below.
  • Via a select menu: a simple select menu that will inherit the design of the general select fields. You won't need the jQuery plug-in in this case.

The choice between these two options will depend of the nature of the site design.

The XHTML code below present you with both options.

Choose preferred language:

HTML5 Plain Code

COPY
  1. <!-- This block may be placed on the "k-tools" block -->
  2. <form class="k-language" method="post" action="">
  3. 	<fieldset class="k-radio">
  4. 		<legend>Choose preferred language:</legend>
  5. 		<p>
  6. 			<input type="radio" id="en" value="en" name="language" checked="checked" />
  7. 			<label for="en" title="English version">EN</label>
  8. 			<input type="radio" id="fr" value="fr" name="language" />
  9. 			<label for="fr" lang="fr" xml:lang="fr" title="Version française">FR</label>
  10. 			<input type="radio" id="de" value="de" name="language" />
  11. 			<label for="de" lang="de" xml:lang="de" title="Deutsch version">DE</label>
  12. 		</p>
  13. 	</fieldset>
  14. 	<!-- If you want a simple select menu 
  15. 	<p><select id="language-select" name="language-select" title="Choose preferred language:">
  16. 		<option value="en">English version</option>
  17. 		<option value="fr" lang="fr" xml:lang="fr">Version française</option>
  18. 		<option value="de" lang="de" xml:lang="de">Deutsch version</option>
  19. 		</select></p>-->
  20. </form>

CSS Code

COPY
  1. form.k-language {}
  2. 
                                
  3. 	form.k-language legend {position: absolute; left: -9000px;}
  4. 	form.k-language input {position: absolute; left: -9000px;}
  5. 	form.k-language select {font-size: 120%; margin-top: 2em;}
  6. 	form.k-language p {font-size: 0.95em; margin: 0;}
  7. 
                                
  8. 	form.k-language label {
  9. 		float: left;
  10. 		width: 2em;
  11. 		list-style-type: none;
  12. 		text-align: center;
  13. 		text-transform: uppercase;
  14. 		color: #EEE;
  15. 		background: #3E3E3E;
  16. 		padding: 2em 0.2em 0.3em;
  17. 		margin: 0 1px;
  18. 		cursor: pointer;
  19. 	}
  20. 	form.k-language .ui-corner-left {
  21. 		border-left: none;
  22. 	}
  23. 	form.k-language .ui-corner-right {
  24. 		border-right: none;
  25. 	}
  26. 	/* Active/Hover States */
  27. 	form.k-language .ui-state-active, form.k-language label:hover, form.k-language label:focus {
  28. 		color: #050505;
  29. 		background: #FFF;
  30. 	}
  31. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	$(document).ready(function(){
  5. 		if ($.ui && $.ui.buttonset) {
  6. 			$('form.k-language fieldset.k-radio').buttonset();
  7. 		}
  8. 	});
  9. })(jQuery);

For more information about how to apply this plugin, its options, events and methods, see the jQuery Button Widget page.

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Tapestry Integration

The Component will display an input (Select or Radio) for each supported locales (configured in the AppModule of your Application). When the user will click on one of these inputs, an ajax request will be sent to server, and the locale will be updated. The user will be automatically redirected to the same page.

You can change the label for each local by adding an entry into your bundles. For example, if you want to change the label for the english locale, you will add :

LanguageSelection-fr=Français
LanguageSelection-en_US=USA
LanguageSelection-en=English
LanguageSelection parameters
Name Required Java Type Default Prefix Default Value Description
mode false Boolean prop false Display Mode (true: Radio component, false: Select component)

The Template

COPY
  1. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" 
  2. 	xmlns:p="tapestry:parameter">
  3.  	
  4.  	
  5.  	<t:kawwa2.languageSelection t:mode="true"/>
  6.  	
  7.  	
  8. </html>

Java Implementation

COPY
  1. package net.atos.kawwaportal.components.test.services;
  2. 
                                
  3. import net.atos.kawwaportal.components.services.KawwaPortalComponentsModule;
  4. 
                                
  5. import org.apache.tapestry5.SymbolConstants;
  6. import org.apache.tapestry5.ioc.MappedConfiguration;
  7. import org.apache.tapestry5.ioc.annotations.Contribute;
  8. import org.apache.tapestry5.ioc.annotations.SubModule;
  9. import org.apache.tapestry5.ioc.services.ApplicationDefaults;
  10. import org.apache.tapestry5.ioc.services.SymbolProvider;
  11. 
                                
  12. public class AppModule {
  13. 
                                
  14. 	@Contribute(SymbolProvider.class)
  15.     @ApplicationDefaults
  16.     public static void contributeFactoryDefaults(MappedConfiguration<String, String> configuration)
  17.     {
  18. 		configuration.add(SymbolConstants.SUPPORTED_LOCALES, "en, fr");
  19.     }
  20. }

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce