<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">Hi all,<div><br></div><div>Eric Wittmann has volunteered to implement proof-of-concept internationalization features in ErraiUI. To get things going, he asked me to sum up the conversation we had on a GitHub pull request[1]. Here's my summary, as I understand it.</div><div><br></div><div>Goals:</div><div> * Must not compromise on 'designer templates:' the template must be 100% valid HTML5 and render properly in a browser as-is.</div><div> * Aim for least possible amount of boilerplate in the common case: if I18N is invisible on 80% of the fields it affects (both Java side and HTML side) then we're winning.</div><div> * At compile time, we'll generate reports on the state of each translation: for each language, which translations are missing and which are orphaned? If this is summarized numerically in a .properties file, it's trivially easy to track in Jenkins with the Plot plugin[2].</div><div> * Must be able to substitute different images based on user's language</div><div> * Ability to translate both text within an element as well as attribute values in tags</div><div> * Should accommodate simple HTML markup within messages (eg. anything SafeHtml would allow)</div><div> * Support user selection of language independent of what the accept-language header says</div><div><br></div><div>Non-Goals:</div><div> * We're not attempting to define something that works outside of Errai UI templates and @Templated classes</div><div> * We're not considering the ability to define structurally different page layouts based on locale (Android can do this with its resources system)</div><div> * We're not talking about reacting to anything except the user's language preference (again, Android's resource system supports varying resources based on screen size, resolution, language, country, and lots more besides)</div><div><br></div><div>Open Questions:</div><div> * Should we use GWT's message resource file format?</div><div> * When/if we specify a key, should it be in the template file (eg, as a data-i18n="message.key" attrbute) or in the Java class (as an @I18n("message.key") annotation on the @DataField)? ewittmann originally proposed the attribute-in-template approach, and okrasz and w0mbat expressed a preference for that too.</div><div> * How will we handle interpolation into messages (for example <span style="color: rgb(51, 51, 51); font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 11.818181991577148px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 17.27272605895996px; text-align: left; text-indent: 0px; text-transform: none; white-space: nowrap; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(248, 248, 248); display: inline !important; float: none; ">Hello {name}. Pleased to meet you!)</span>? Most importantly, where do the values come from?</div><div> * (How) do we handle special numeric formatting like $0.00 in the USA vs. 0,00€ in Europe? It seems we may need a mechanism to call out to GWT's number formatting classes</div><div><br></div><div><br></div><div>Based on all that, here's a strawman proposal to get us started (lifted from Eric's comment):</div><div><br></div><div>Java:</div><div><br>@Templated<br>public class MyPage extends Composite {<div> </div> @Inject @DataField("field1")<div> private Label contentBecomesKey;</div><div> </div> @Inject @DataField("field2") @I18n("mypage.description")<div> private Label keySpecifiedInAnnotation;</div><div> </div> @Inject @DataField("field3") @I18n(value="mypage.input", attributes={"placeholder", "title"})<div> private Text inputBoxWithTranslatedTooltipAndPlaceholder;</div><div><br></div><div> // I don't think this will actually work well. It's just here for the sake of argument.</div><div> @I18nParams</div><div> private Map<String, SafeHtml> messageKeys;</div><div>}</div><div><br></div>Template:<br><br><div data-field="templateId"><div> <div data-field="field1">MyHeader</div></div><div> <div data-field="field2">This is a lengthy description that I don't want becoming an i18n key.</div></div><div> <input data-field="field3" type="text" name="field3" placeholder="Enter a value here" title="Use this data entry field to enter a valid value..." /></div></div><div> <div>Innocent Bystander</div></div><div> <div data-field="field3">{name}, you owe {amountOwing}.</div><br></div><br><br></div><div>Bundle for Piglatin translation:<br><br>MyHeader=yHeaderMay<br>mypage.description=Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>mypage.input.placeholder=Value here, you must enter<br>mypage.input.title=This data entry field, use you must...<br>Innocent\ Bystander=Innocentay Ystanderbay<br><br></div><div>So, thoughts?</div><div><br></div><div>-Jonathan</div><div><br></div><div>[1]: <a href="https://github.com/errai/errai/pull/24">https://github.com/errai/errai/pull/24</a></div><div>[2]: <a href="https://wiki.jenkins-ci.org/display/JENKINS/Plot+Plugin">https://wiki.jenkins-ci.org/display/JENKINS/Plot+Plugin</a></div></body></html>