Table of Contents Advanced Web Technology Internationalization - PowerPoint PPT Presentation

Table of Contents Advanced Web Technology Internationalization � 13) Google Web Toolkits 2 - Static String i18n GWT, Communication Remote Procedure Code � Emmanuel Benoist Fall Term 2016-17 JSON � Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 1 2 Internationalization : I18N Module Core types related to internationalization: LocaleInfo Provides information about the current locale. Constants Useful for localizing typed constant values Messages Useful for localizing messages requiring arguments Internationalization ConstantsWithLookup Like Constants but with extra lookup flexibility for highly data-driven applications Dictionary Useful when adding a GWT module to existing localized web pages Localizable Useful for localizing algorithms encapsulated in a class or when the classes above don’t provide sufficient control DateTimeFormat Formatting dates as strings. See the section on date and number formatting. NumberFormat Formatting numbers as strings. See the section on date and number formatting. Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 3 4

Interantionalizing Strings Implement the Constant Interface Contains only static strings Very efficient and compiled once. Implement the Messages Interface Static String i18n Allows to insert values in the string For instance numbers or dates Equivalent to the resource bundle in applications. Dynamic String Internationalization The Dictionary class lets your GWT application consume strings supplied by the host HTML page. Convenient if your existing web server has a localization system that you do not wish to integrate with the static string internationalization methods. Implement the Localizable Interface The most powerful technique allows you to go beyond simple string substitution create localized versions of custom types. Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 5 6 Implement the Constants Interface Example: the Constants file package com.google.gwt.sample.stockwatcher.client; import com.google.gwt.i18n.client.Constants; public interface StockWatcherConstants extends Constants { @DefaultStringValue(”StockWatcher”) Create the StockWatcherConstants interface String stockWatcher(); Uses annotations for the default translation @DefaultStringValue(”Symbol”) Implements the Constant interface (GWT) String symbol(); Bound automatically to the StockWatcherConstants*.properties files @DefaultStringValue(”Price”) The java file must contain one method for each of the String price(); constants in the properties files @DefaultStringValue(”Change”) The right value is found at runtime, corresponding to the locale String change(); @DefaultStringValue(”Remove”) String remove(); @DefaultStringValue(”Add”) String add(); } Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 7 8

Translate it to German Implement the Messages interface For Strings containing information Similar to resource bundles in Java Create a file StockWatcherConstants de.properties Can contain strings with parameters stockWatcher = Aktienbeobachter ’’ { 0 } ’’ ist kein g¨ ultiges Aktiensymbol. symbol = Symbol The number is a place holder price = Kurs myString = First parm is { 0 } , second parm is { 1 } , third ց change = ¨ Anderung → parm is { 2 } . remove = Entfernen Usefull for integrating dates, prices, internationalized add = Hinzuf¨ ugen results ◮ Usefull but less efficient. The strings must be produced at runtime Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 9 10 Messages file The corresponding properties file package com.google.gwt.sample.stockwatcher.client; import com.google.gwt.i18n.client.Messages; StockWatcherMessages de.properties file. import java.util.Date; lastUpdate = Letzte Aktualisierung: { 0,date,medium } { 0,time, ց public interface StockWatcherMessages extends Messages { → medium } @DefaultMessage(”’’ { 0 } ’’ is not a valid symbol.”) invalidSymbol = ’’ { 0 } ’’ ist kein g¨ ultiges Aktiensymbol. String invalidSymbol(String symbol); @DefaultMessage(”Last update: { 0,date,medium } { 0,time, ց → medium } ”) String lastUpdate(Date timestamp); } Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 11 12

Replace content Replace content (Cont) Replace the texts with place holders Set the content: < body > // Set the window title, the header text, and the Add button ց < img src=”images/GoogleCode.png”/ > → text. < h1 id=”appTitle” >< /h1 > Window.setTitle(constants.stockWatcher()); RootPanel.get(”appTitle”).add(new Label(constants. ց Replacing strings set programmatically → stockWatcher())); Create the instances of the classes (internationalized) addStockButton = new Button(constants.add()); // Create table for stock data. private ArrayList < String > stocks = new ArrayList < String > (); stocksFlexTable.setText(0, 0, constants.symbol()); private StockWatcherConstants constants = GWT.create( ց stocksFlexTable.setText(0, 1, constants.price()); → StockWatcherConstants.class); stocksFlexTable.setText(0, 2, constants.change()); private StockWatcherMessages messages = GWT.create( ց stocksFlexTable.setText(0, 3, constants.remove()); → StockWatcherMessages.class); Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 13 14 Add a supported locale: Client Server Communication Remote Procedure Code Inside StockWatcher.gwt.xml add the property From Java To Java < entry − point class=’com.google.gwt.sample. ց Supported by the language Optimized and easy to test → stockwatcher.client.StockWatcher’/ > JSON For communicating with the same server < extend − property name=”locale” values=”de”/ > < /module > JSONP For cross server communication Load the german version by adding &locale=de Overgoes the Same Origin Policy Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 15 16

GWT Remote Procedure Call RPC contains: the service that runs on the server the method you are calling the client code that invokes the service Remote Procedure Code the Java data objects that pass between the client and server Both (client and server) must serialize and deserialize the objects You need to write three components Define the interface StockPriceService that extends RemoteService and lists all your RPC methods Create a class StockPriceServiceImpl that extends RemoteServiceServlet and implements the interface you created above. Define an asynchronous interface StockPriceServiceAsync to your service to be called from the client-side code. Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 17 18 GWT Remote Procedure Call 1 StockPriceService interface In the package com.google.gwt.sample.stockwatcher.client package com.google.gwt.sample.stockwatcher.client; import com.google.gwt.user.client.rpc.RemoteService; import com.google.gwt.user.client.rpc. ց → RemoteServiceRelativePath; @RemoteServiceRelativePath(”stockPrices”) public interface StockPriceService extends RemoteService { StockPrice[] getPrices(String[] symbols); } 1 Source: code.google.com Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences Berner Fachhochschule | Haute cole spcialise bernoise | Berne University of Applied Sciences 19 20