arabic RTL sample GWT code

[antonio.signore]

In our application in English we need to allow the user to define some translations in RLT languages like Arabic.

So basically we need to have in our application some TextBox, TextArea to work RTL while the application remains in English locale.

How can I in smartGwt implemente tha ? The text obviously need to be aligned on the right and expand to the left,

Can somebody provide me a code snippet ?


regards

[svjard]

Good question, currently not supported though would be a good Wishlist item since pretty trivial to implement. You can create your own custom textarea for now though with JSNI. Again would be better to have an actual TextDirection enum and make the change dynamic and all, easy change to the API, but this should get you going.

public class MyTextAreaItem extends TextAreaItem {
	public MyTextAreaItem() {
		mySetElementHTML();
	}
	
	public native void mySetElementHTML() /*-{
    	var self = this.@com.smartgwt.client.core.DataClass::getJsObj()();
    	self.getElementHTML = function (value, dataValue) {
	// remember which element number we wrote this out as
	var form = this.form,
		formID = form.getID(),
		itemID = this.getItemID(),
        
	    output = $wnd.isc.StringBuffer.create(),
        valueIconHTML = this._getValueIconHTML(dataValue);
    if (valueIconHTML != null) output.append(valueIconHTML);
    if (!this.showValueIconOnly) {
        output.append(
            "<TEXTAREA NAME=" , this.getElementName(),
            " ID=", this.getDataElementId(),

            // hang a flag on the element marking it as the data element for the
            // appropriate form item.
            this._getItemElementAttributeHTML(),
            
            this.getElementStyleHTML(),
            (this.isDisabled() ? " DISABLED " : ""),

            // disable native autoComplete 
            (this._getAutoCompleteSetting() != "native" ? " AUTOCOMPLETE=OFF " : ""),
    
            // enable / disable native spellcheck in Moz
            // Same setting in Safari - see comments in TextItem.js
            (($wnd.isc.Browser.isMoz || $wnd.isc.Browser.isSafari) ? 
                (this.getBrowserSpellCheck() ? " spellcheck=true" : " spellcheck=false") :
                null),
    
            " WRAP=", this.wrap,
			" DIR=rtl",
            " TABINDEX=", this._getElementTabIndex(),
            (this.showTitle == false && this.accessKey != null ? 
                " ACCESSKEY=" + this.accessKey : ""),
                
            // If this browser supports the "input" event write out a handler for it.
            (this._willHandleInput ? " ONINPUT='" + this.getID() + "._handleInput()'" 
                                   : null),
                                   
            // If the readonly property is set, set it on the handle too
            (this.readOnly || this.isInactiveHTML() ? " READONLY=TRUE" : null),
                                    
            // Ensure we pass events through the ISC event handling system.
            " handleNativeEvents=false>",
            (this.isInactiveHTML() ? value : null),
            "</TEXTAREA>"
		);
    }
        
    //this.logWarn("textArea HTML:"+ output);
	return output.release();
}
	}-*/;
};

[antonio.signore]

thanks for your prompt response. I tried it up and breaks at runtime on the this._getValueIconHTML(dataValue);

unfortunately I'm not very good at js. Is there something I need to do to make it working ?

[antonio.signore]

this one works...

public native void mySetElementHTML() /*-{
var self = this.@com.smartgwt.client.core.DataClass::getJsObj()();
self.getElementHTML = function (value, dataValue) {
var form = this.form,
formID = form.getID(),
itemID = this.getItemID(),
output = $wnd.isc.StringBuffer.create();
output.append(
"<TEXTAREA NAME=" , this.getElementName(),
" ID=", this.getDataElementId(),

" WRAP=", this.wrap, " DIR=rtl",
" handleNativeEvents=false>",
(this.isInactiveHTML() ? value : null),
"</TEXTAREA>");

return output.release();
}
}-*/;

[svjard]

What version are you on?

[antonio.signore]

<dependency>
<groupId>com.smartgwt</groupId>
<artifactId>smartgwt</artifactId>
<version>2.0</version>
</dependency>
<dependency>
<groupId>com.smartgwt</groupId>
<artifactId>smartgwt-skins</artifactId>
<version>2.0</version>
</dependency>

[svjard]

Alright just a matter of that I was assuming 2.2, anyway you seem to have gotten the idea.

[antonio.signore]

indeed. Thanks a lot

[a_aslau]

also using a style and specify direction:rtl does the trick.