ZK Textbox with Codemirror

Introduction

This article describe how to make ZK textbox working with Codemirror.

Pre-request

Load External Javascript and CSS Files in ZK
http://ben-bai.blogspot.tw/2013/03/zk-basic-load-external-javascript-and.html

Codemirror Getting Started
http://ben-bai.blogspot.tw/2013/03/web-code-editor-codemirror-getting.html

The Program

textbox_codemirror.zul

A multiline ZK Textbox (with textarea dom element), bind the onblur of codemirror to onchange of textbox.

<?script type="text/javascript" src="resources/js/libsAndTools/codemirror/lib/codemirror.js"?>
<?style href="resources/js/libsAndTools/codemirror/lib/codemirror.css" type="text/css" ?>
<?script type="text/javascript" src="resources/js/libsAndTools/codemirror/mode/javascript/javascript.js"?>
<zk xmlns:w="client">
    <window title="ZK Textbox Codemirror Test" border="normal">
        <div width="300px" height="250px" style="overflow: hidden;">
            <textbox id="tbx" rows="10">
                <attribute w:name="bind_"><![CDATA[
                    function (a, b, c) {
                        this.$bind_(a, b, c);
                        var wgt = this;
                        myCodeMirror = CodeMirror.fromTextArea(this.$n());
                        myCodeMirror.on('blur', function () {
                            var val = myCodeMirror.getValue();
                            wgt.$n().value = val;
                            wgt.fire('onChange', {value: val}, {toServer: true});
                        });
                    }
                ]]></attribute>
            </textbox>
        </div>
        <button label="test" onClick="alert(tbx.getValue());" />
        <button label="execute">
            <attribute name="onClick"><![CDATA[
                Clients.evalJavaScript(tbx.getValue());
            ]]></attribute>
        </button>
    </window>
</zk>

The Result

View demo online
http://screencast.com/t/ZQMHIJj8

Download

textbox_codemirror.zul
https://github.com/benbai123/ZK_Practice/blob/master/Components/projects/Components_Practice/WebContent/textbox_codemirror.zul

Demo Flash
https://github.com/benbai123/ZK_Practice/blob/master/Components/demos/ZK_Textbox_Codemirror.swf