Bidirectional Dialogs in Magnolia CMS

Bidirectional Dialogs in Magnolia CMS

For an arabic or hebrew website it would be convenient to have some of the dialog controls being read and written from the right to the left. Here I show you how to mirror the Magnolia edit control. The labels and other controls stay the same.

The principle behind this modification is as follows: Everytime an edit field appears in the dialog, we check the locale and depending on it instantiate the regular info.magnolia.cms.gui.control.Edit control or our custom one, called RTLEdit.

For this to work we have to reset the class property of the control under /modules/adminInterface/controls/edit to my.package.BidirectionalDialogEdit.

The class content looks as follows:

public class BidirectionalDialogEdit extends DialogEdit {

    List<String> rtlLanguages = Arrays.asList(new String[]{"ar", "iw", "he"}); // he = iw = hebrew, ar = arabic

    @Override
    public void drawHtml(Writer out) throws IOException {
        Edit control = getLocaleDependentEditControl();

        //rest of this method is copied from info.magnolia.cms.gui.dialog.DialogEdit.drawHtml()
        control.setType(this.getConfigValue("type", PropertyType.TYPENAME_STRING));
        if (this.getConfigValue("saveInfo").equals("false")) {
            control.setSaveInfo(false);
        }
        control.setCssClass(CssConstants.CSSCLASS_EDIT);
        control.setRows(this.getConfigValue("rows", "1"));
        control.setCssStyles("width", this.getConfigValue("width", "100%"));
        if (this.getConfigValue("onchange", null) != null) {
            control.setEvent("onchange", this.getConfigValue("onchange"));
        }
        this.drawHtmlPre(out);
        out.write(control.getHtml());
        this.drawHtmlPost(out);
    }

    private Edit getLocaleDependentEditControl() {
        Edit control;
        String localeString = MgnlContext.getAttribute("mgnlLocale").toString();
        String language = StringUtils.substringBefore(localeString, "_");

        if (rtlLanguages.contains(language))
            control = new RTLEdit(this.getName(), this.getValue());
        else
            control = new Edit(this.getName(), this.getValue());

        return control;
    }
}

The really new thing here is the method getLocaleDependentEditControl() which checks for the locales “ar”, “iw” and “he”. If such a locale is found I instantiate the RTLEdit class. This class overrides the getHtml() method of it’s superclass and inserts the dir attribute as follows: dir="rtl". This will mirror the rendered text box in the dialog.

public class RTLEdit extends Edit {

    public RTLEdit() {
        super();
    }

    public RTLEdit(String name, Content websiteNode) {
        super(name, websiteNode);
    }

    public RTLEdit(String name, String value) {
        super(name, value);
    }

    @Override
    public String getHtml() {
        StringBuilder html = new StringBuilder(super.getHtml());
        html.insert(html.indexOf(" "), " dir=\"rtl\"");

        return html.toString();
    }
}

The final result looks like this:

For more information on RTL-Webpages in Magnolia see this wiki page.