RTL

[acarur01]

I have the following code that when displayed with a left-to-right language, looks perfectly fine. But when I change the language to a right-to-left such as Arabic, the select application disappears. Is this smartclient issue? or do I need to do something with my layout?

I've attached a screenshot of both cases

 isc.HLayout.create({ID:"hLayoutWrapSelectAppGrid",
members:
[isc.DynamicForm.create({ID:"SelectAppGrid",name:"SelectAppGrid",title:"&nbsp;",canFocus:true,canHover:true,numCols:1,titleSuffix:"&nbsp;",rightTitlePrefix:"&nbsp;",requiredTitleSuffix:"*",requiredRightTitleSuffix:"*",requiredRightTitlePrefix:"<B> ",colWidths:["220"],titleOrientation:"top",autoFocus:true,fields:
[{title:"Select Application&nbsp;",showSaveValue:false,ID:"SelectApp_Header",name:"SelectApp_Header",defaultValue:"Select Application",showValidation:"false",_constructor:"HeaderItem"}
,{title:"<nobr>Available Applications&nbsp;<\/nobr>",width:"*",colSpan:"1",height:120,ID:"appName",name:"appName",$cwname:"model.appName",
allowEmptyValue:true,fastCellUpdates:false,multiple:true,multipleAppearance:"grid",errorIconSrc:"\/cwf\/r\/cwfv\/error.png",_constructor:"SelectItem"},
{title:"Select&nbsp;",showTitle:false,widgetID:"Button1",redrawOnStateChange:true,width:100,autoFit:true,startRow:false,height:20,buttonStyle:"button",shouldSaveValue:false,name:"Button1",
buttonLabel:"&nbsp;Select&nbsp;&nbsp;&nbsp;",textAlign:"center",_constructor:"ButtonItem"}]})],canFocus:true});

[acarur01]

I should mention the problem only exists in firefox - in IE the only thing wrong is the button is missing

[acarur01]

I've found that if I set a width on the dynamic form, then it renders fine for both rtl languages and ltr. Is this expected behaviour?

[acarur01]

Another problem I have is with our login. Again, it is a button placement issue and the solution from above does not fix it. Ive attached a screenshot and below is our custom button item code

/**
 * This JavaScript class is a custom element using the SmartClient library.
 * A Custom element is required due to restrictions in adding images in buttons within the built-in
 * dynamic form.
 * 
 */


isc.ClassFactory.defineClass("CwButtonItem", "CanvasItem");

isc.CwButtonItem.addProperties({
    init:function () {
        this.canvas = isc.Button.create({
            shouldSaveValue: false,
            showTitle: this.showTitle,
            icon: this.icon,
            iconOrientation: this.iconOrientation,
            baseStyle: this.buttonStyle,
            ID: this.widgetID,
            width: this.width,
            height: this.height,
            action: this.click,
            showRollOver: this.showRollOver,
            showDown: false,
            iconWidth: this.iconWidth,
            iconHeight: this.iconHeight,
            name: this.name,
            autoFit: this.autoFit,
            title: this.buttonLabel,
        	align: this.textAlign
        });
		this.title="";	          //this is needed for the canvasItem otherwise a title will appear on top of the button or beside it
        return this.Super("init", arguments);
    }
    
});

[acarur01]

I've found that if I set a width on the dynamic form, then it renders fine for both rtl languages and ltr. Is this expected behaviour?

..in firefox it is fixed with specified width but in IE the button still does not appear and looking at jsDebugger the renderer seems to be placing the button in a negative position.

[Isomorphic]

Just a reminder that RTL is considered beta quality and not fully supported. The best browser is generally IE, and, as you discovered, more sizes may need to be explicitly provided.

As far as the second sample - really only a JavaScript error would explain offscreen placement of a ButtonItem (this indicates something crashed mid-layout). Unfortunately, you haven't posted enough code for us to run and reproduce the issue.

[acarur01]

I've tried cleaning up as much of our generated code as possible below. Please let me know if this is sufficient.

isc.ClassFactory.defineClass("CwButtonItem", "CanvasItem");

isc.CwButtonItem.addProperties({
    init:function () {
        this.canvas = isc.Button.create({
            shouldSaveValue: false,
            showTitle: this.showTitle,
            icon: this.icon,
            iconOrientation: this.iconOrientation,
            baseStyle: this.buttonStyle,
            ID: this.widgetID,
            width: this.width,
            height: this.height,
            action: this.click,
            showRollOver: this.showRollOver,
            showDown: false,
            iconWidth: this.iconWidth,
            iconHeight: this.iconHeight,
            name: this.name,
            autoFit: this.autoFit,
            title: this.buttonLabel,
            align: this.textAlign
        });
        this.title="";              //this is needed for the canvasItem otherwise a title will appear on top of the button or beside it
        return this.Super("init", arguments);
    }
    
});

isc.ClassFactory.defineClass("CwImageItem", "CanvasItem");

isc.CwImageItem.addProperties({
    init:function () {
        this.canvas = isc.ImgButton.create({
            showTitle: this.showTitle,
            src:this.src,
            cwImageID: this.cwImageID,
            width:this.width,
            height:this.height,
            form: this.form,
            autoFit: this.autoFit,
            showRollOver: this.showRollOver,
            showDown: this.showDown,
            overflow: "visible",
            canFocus: this.canFocus,
            imageType: this.imageType,
            click: this.click,
            cwUserUrl: this.cwUserUrl,
            visibility: this.visibility,
            baseStyle: this.baseStyle
        });

        return this.Super("init", arguments);
    }
    
});




isc.VLayout.create({ID:"LoginGrid_vCentering",
name:"LoginGrid_vCentering",title:" ",
canHover:true,showResizeBar:false,
height:"100%",width:"100%",
defaultLayoutAlign:"center",
members:
    [isc.LayoutSpacer.create({name:"layoutCenteredSpacer1_LoginGrid_vCentering",title:" "}),
     isc.HLayout.create({width:1,height:1,defaultLayoutAlign:"center",
       members:
        [isc.VLayout.create({defaultLayoutAlign:"center",
          members:        [isc.HLayout.create({ID:"HorizontalLayoutff",name:"HorizontalLayout",title:" ",
              canHover:true,showResizeBar:false,height:1,width:240,
              members:
                [isc.DynamicForm.create({ID:"LoginGrid",name:"LoginGrid",title:" ",canFocus:true,
                 canHover:true,numCols:2,titleSuffix:" ",rightTitlePrefix:" ",requiredTitleSuffix:"*",
                 requiredRightTitleSuffix:"*",requiredRightTitlePrefix:"<B> ",colWidths:["90","150"],titleOrientation:"left",
                 fields:[{title:"&nbsp;",width:280,height:90,src:"\/cwf\/r\/pics\/comcast_logo80c.png",align:"center",showTitle:false,
                        shouldSaveValue:false,showRollOver:false,showDown:false,showFocused:false,canFocus:false,colSpan:"*",
                        name:"loginLogo",_constructor:"CwImageItem",ID:"loginLogo"},
                        {title:"<nobr>Username&nbsp;<\/nobr>",width:"*",colSpan:"1",align:"center",ID:"userId",name:"userId",
                        required:true,_constructor:"TextItem"},                                                 
                        {title:"<nobr>Password&nbsp;<\/nobr>",width:"*",colSpan:"1",align:"center",ID:"Password",
                        name:"Password",required:true,_constructor:"PasswordItem"},
                        {shouldSaveValue:false,name:"Button1$spacer",_constructor:"SpacerItem"},
                        {title:"Login&nbsp;",showTitle:false,widgetID:"Button1",redrawOnStateChange:true,
                        width:100,startRow:false,height:20,shouldSaveValue:false,name:"Button1",buttonLabel:"&nbsp;Login&nbsp;&nbsp;&nbsp;",
                        textAlign:"center",align:"center",buttonStyle: "button",_constructor:"CwButtonItem"}]})
                ]})
            ]})
        ]}),
    isc.LayoutSpacer.create({title:"&nbsp;",name:"layoutCenteredSpacer2_LoginGrid_vCentering"})]
    });

[acarur01]

Anyone looking at this?

[Isomorphic_Paul]

Hi,
I just took a quick look at this test case and saw two problems (in IE):

1) the positioning behavior within Layouts is unreliable when members overflow the specified size of the parent layout. This was causing the "LoginGrid" form to appear in the wrong position -- your code appears to be attempting to use an HLayout with a small width specified, nested inside a vlayout with defaultLayoutAlign set to center the form (and any other members of the HLayout) horizontally.
If you use layoutSpacers inside the HLayout instead of relying on a small size plus the parent's defaultLayoutAlign things will work.
In other words, get rid of the width:1 specification here:

    [isc.LayoutSpacer.create({name:"layoutCenteredSpacer1_LoginGrid_vCentering",title:" "}),
     isc.HLayout.create({width:1,height:1,defaultLayoutAlign:"center",
...

and instead add a layout spacer (with width set to "*") on either side of the VLayout inside it:

    [isc.LayoutSpacer.create({name:"layoutCenteredSpacer1_LoginGrid_vCentering",title:" "}),
     isc.HLayout.create({height:1,defaultLayoutAlign:"center",
       members:
        [isc.LayoutSpacer.create({width:"*"}),
         isc.VLayout.create({defaultLayoutAlign:"center",
             ... // other nested components
         }),
         isc.LayoutSpacer.create({width:"*"})
        ]
...

2) Your custom CanvasItem button is showing up to the left of the dynamicForm as a whole, rather than centered in its column.
We've just added a fix to the framework which should resolve this issue - if you can upgrade to the next nightly build, feel free to give it a try. Otherwise we'd recommend either getting rid of the "align:center" on this item, or duplicating the appearance by creating an actual Button widget and rendering it below the form rather than using a CanvasItem within the form.

[acarur01]

Thank you Paul. I will look into your suggestions

[acarur01]

I just updated the SC library and unfortunately am still getting the same problem. I suppose the alignment of the button in the alignment isn't a big deal. But the first example I posted where the button is completely off view in IE is more of a problem. Were you able to look into that one as well?

[Isomorphic_Paul]

When I ran your test code I got the 2 issues I described -- the button was showing up partially offscreen as a result of these 2 issues.

I just tested against the latest nightly build (Oct 12) on IE8 and things seem to be resolved -- centering of the canvasItem is working and centering of the form as a whole can be achieved by the workaround I described above.

Here's my test case code

<HTML dir="RTL">
<head>

<script>
window.isomorphicDir="/isomorphic/"
</script>

<SCRIPT SRC=/isomorphic/system/modules/ISC_Core.js?isc_version=${versionNumber}.js></SCRIPT>

<SCRIPT SRC=/isomorphic/system/modules/ISC_Foundation.js?isc_version=${versionNumber}.js></SCRIPT>
<SCRIPT SRC=/isomorphic/system/modules/ISC_Containers.js?isc_version=${versionNumber}.js></SCRIPT>
<SCRIPT SRC=/isomorphic/system/modules/ISC_Grids.js?isc_version=${versionNumber}.js></SCRIPT>
<SCRIPT SRC=/isomorphic/system/modules/ISC_Forms.js?isc_version=${versionNumber}.js></SCRIPT>

<SCRIPT SRC=/isomorphic/system/modules/ISC_DataBinding.js?isc_version=${versionNumber}.js></SCRIPT>
<SCRIPT SRC=/isomorphic/system/modules/ISC_Calendar.js?isc_version=${versionNumber}.js></SCRIPT>

<SCRIPT src=/isomorphic/skins/Enterprise/load_skin.js?isc_version=${versionNumber}.js></SCRIPT>


</head>
<body>
<script>

isc.setAutoDraw(false);

isc.ClassFactory.defineClass("CwButtonItem", "CanvasItem");

isc.CwButtonItem.addProperties({
    init:function () {
        this.canvas = isc.Button.create({
            shouldSaveValue: false,
            showTitle: this.showTitle,
            icon: this.icon,
            iconOrientation: this.iconOrientation,
            baseStyle: this.buttonStyle,
            ID: this.widgetID,
            width: this.width,
            height: this.height,
            action: this.click,
            showRollOver: this.showRollOver,
            showDown: false,
            iconWidth: this.iconWidth,
            iconHeight: this.iconHeight,
            name: this.name,
            autoFit: this.autoFit,
            title: this.buttonLabel,
            align: this.textAlign
        });
        this.title="";              //this is needed for the canvasItem otherwise a title will appear on top of the button or beside it
        return this.Super("init", arguments);
    }
    
});

isc.ClassFactory.defineClass("CwImageItem", "CanvasItem");

isc.CwImageItem.addProperties({
    init:function () {
        this.canvas = isc.ImgButton.create({
            showTitle: this.showTitle,
            src:this.src,
            cwImageID: this.cwImageID,
            width:this.width,
            height:this.height,
            form: this.form,
            autoFit: this.autoFit,
            showRollOver: this.showRollOver,
            showDown: this.showDown,
            overflow: "visible",
            canFocus: this.canFocus,
            imageType: this.imageType,
            click: this.click,
            cwUserUrl: this.cwUserUrl,
            visibility: this.visibility,
            baseStyle: this.baseStyle
        });

        return this.Super("init", arguments);
    }
    
});




isc.VLayout.create({ID:"LoginGrid_vCentering",
        autoDraw:true,
        
name:"LoginGrid_vCentering",title:"&nbsp;",
canHover:true,showResizeBar:false,
height:"100%",width:"100%",
defaultLayoutAlign:"center",
members:
    [isc.LayoutSpacer.create({name:"layoutCenteredSpacer1_LoginGrid_vCentering",title:"&nbsp;"}),
     isc.HLayout.create({height:1,defaultLayoutAlign:"center",
             
       members:
        [
        isc.LayoutSpacer.create({
                width:"*"
        }),

        isc.VLayout.create({
                    defaultLayoutAlign:"center",
                    members:        [
                        
                        isc.HLayout.create({
                                ID:"HorizontalLayoutff",name:"HorizontalLayout",
                                title:"&nbsp;",
                              canHover:true,showResizeBar:false,height:1,width:240,
                  members:
                [
                    
                    isc.DynamicForm.create({
                            ID:"LoginGrid",name:"LoginGrid",title:"&nbsp;",
                            canFocus:true,
                            canHover:true,numCols:2,
                            titleSuffix:"&nbsp;",rightTitlePrefix:"&nbsp;",
                            requiredTitleSuffix:"*",
                             requiredRightTitleSuffix:"*",requiredRightTitlePrefix:"<B> ",
                             colWidths:["90","150"],
                             titleOrientation:"left",
                             fields:[{
                                     title:"&nbsp;",
                                     // xxx paul change from 240
                                     width:240,height:90,
                                     src:"\/cwf\/r\/pics\/comcast_logo80c.png",
                                     align:"center",showTitle:false,
                                     shouldSaveValue:false,
                                     showRollOver:false,showDown:false,
                                     showFocused:false,canFocus:false,colSpan:"*",
                                    name:"loginLogo",_constructor:"CwImageItem",
                                    ID:"loginLogo"},
                                    
                                    {title:"<nobr>Username&nbsp;<\/nobr>",width:"*",
                                        colSpan:"1",align:"center",ID:"userId",
                                        name:"userId",
                                        required:true,_constructor:"TextItem"},      
                                        
                                    {title:"<nobr>Password&nbsp;<\/nobr>",
                                        width:"*",colSpan:"1",align:"center",ID:"Password",
                                        name:"Password",required:true,_constructor:"PasswordItem"},
                                        
                                    {shouldSaveValue:false,name:"Button1$spacer",
                                    _constructor:"SpacerItem"},
                                    
                                    {title:"Login&nbsp;",
                                        showTitle:false,
                                        widgetID:"Button1",
                                        redrawOnStateChange:true,
                                        width:100,startRow:false,height:20,
                                        shouldSaveValue:false,
                                        
                                        name:"Button1",
                                        buttonLabel:"&nbsp;Login&nbsp;&nbsp;&nbsp;",
                                        textAlign:"center",align:"center",
                                        buttonStyle: "button",_constructor:"CwButtonItem"
                                    }
                             ]
                       })
                ]
                        })
                    ]
        }),
        
        isc.LayoutSpacer.create({
             width:"*"
        })
        
        ]
     }),
     isc.LayoutSpacer.create({title:"&nbsp;",name:"layoutCenteredSpacer2_LoginGrid_vCentering"})
    ]
});


</script>

</body>
</HTML>

[acarur01]

Unfortunately, I am still getting the same result even with the exact same javascript. Is there any way to test RTL using the feature explorer?

[Isomorphic_Paul]

Are you saying that if you copy and paste the complete HTML src from my previous post (which includes a 'rtl' specification) and run it against the build from October 12th (or a more recent nightly build) in IE8 you're still seeing the problem??
When running this test try clearing your browser cache as well to ensure you are really testing against the latest build.

[acarur01]

I just got the standalone testcase to run and as you said, it works fine. There is something else happening on our end that creates the shift.

Thanks for all the help.