Further localization

This page describes an older version, please read about the latest version at:
http://resources.arcgis.com/en/help/flex-viewer/concepts/

The ArcGIS Viewer for Flex has built-in support for ten languages. Localization support was added for six languages in version 2.1 and an additional four languages in version 2.4. To add support for additional languages, you would need to localize both the API and the Viewer. This is done using standard Flex localization methods.

1. To localize the API, see Localization in the API Resource Center.
2. To localize the Viewer, use the localized API resource and also localize the viewer's resource file which is part of the source code download: FlexViewer\locale\en_US.
3. Compile your localized viewer using your localized language. See notes in the API.

Steps for Right-to-left localization

Dive-in:

The following section is advanced Flex localization for localizing to right-to-left languages such as Arabic and Hebrew.

Requirements: Adobe Flex 4.1 or higher (4.0 does not support RTL) . The following includes making changes to the source code. You need to be familiar with Flex development before you attempt these advanced steps.

Part #1 - Compile with Adobe Flex SDK 4.1 or above.

Right to Left mirroring is supported using the new property control: layoutDirection that was introduced in the Adobe Flex 4.1 SDK.

Part #2 - Modify the source

Be smart. Be careful. Save often. Test often.

2a. Change the overall layout direction for the Flex Viewer application

Add layoutDirection property to the application tag in index.mxml.

<s:Application layoutDirection="rtl" ...>

2b. Change the general text alignment for widgets

Add textAlign to the SparkSkin in the WidgetTemplateSkin.mxml file.

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/mx"
     textAlign="right">

2c. Place the widgets where it makes sense from a right-to-left perspective

Change the position of widgets in the config.xml.

<widget right="10"  top="100"
 config="widgets/Navigation/NavigationWidget.xml" url="widgets/Navigation/NavigationWidget.swf"/>
 <widget left="-2" bottom="-2"
 config="widgets/OverviewMap/OverviewMapWidget.xml" url="widgets/OverviewMap/OverviewMapWidget.swf"/>
 <widget right="20" top="55"
 config="widgets/MapSwitcher/MapSwitcherWidget.xml" url="widgets/MapSwitcher/MapSwitcherWidget.swf"/>
 <widget left="0"   top="0"
 config="widgets/HeaderController/HeaderControllerWidget.xml" url="widgets/HeaderController/HeaderControllerWidget.swf"/>

2d. Update resize_moveHandler function

Change the method of calculating widget width and position after a widget is moved or resized. In the WidgetTemplate.as replace the resize_moveHandler function with the code below:

private function resize_moveHandler(event:MouseEvent):void
{
    // if there is minWidth and minHeight specified on the container, use them while resizing
    const minimumResizeWidth:Number = minWidth ? minWidth : 200;
    const minimumResizeHeight:Number = minHeight ? minHeight : 100;

    var nextWidth:Number = stage.stageWidth - (stage.mouseX + parent.x);
    var nextHeight:Number = (stage.mouseY - parent.y);

    if (stage.mouseX > 20 && (stage.mouseY < stage.height - 20))
    {
        if (nextWidth > minimumResizeWidth)
        {
                        width = nextWidth;
        }
        if (nextHeight > minimumResizeHeight)
        {
                        height = nextHeight;
        }
    }
}

2e. Update resize_moveHandler function

Change the method of calculating widget width and position after a widget is moved or resized. In the resize_moveHandler function in WidgetTemplate.as, comment out and add as as below:

/*if (widget.x > (systemManager.stage.width - widget.width - 200))
{
    widget.x = systemManager.stage.width - widget.width - 200;
}*/

if ((widget.x + widget.width) > (systemManager.stage.stageWidth))
{
    widget.x = systemManager.stage.stageWidth - widget.width;
}

2f. Replace some icons with mirrored icons

Update the code to use the mirrored versions of the icons. Replace the following images with their rtl counterparts:

• In widgetTemplateSkin.mxml, replace w_resize.png with w_resize_rtl.png.
• In WidgetTemplate.as, replace w_resizecursor.png with w_resizecursor_rtl.png
• In three files (GeoRSSItemRenderer.mxml, QueryItemRenderer.mxml, SearchItemRenderer.mxml) replace w_link.png with w_link_rtl.png.