SOURCE CODE: Uize.Widgets.Tools.SourceVsResult.Html (view docs)

Uize.module ({
  name:'Uize.Widgets.Tools.SourceVsResult.Html',
  required:[
    'Uize.Util.Html.Encode'
  ],
  builder:function () {
    'use strict';

    return Uize.package ({
      process:function (i) {
        function _cssClass (_class) {return m.cssClass (_class)}
        function _childHtml (_properties) {return m.childHtml (_properties)}
        function _encodeAttributeValue (_value) {return Uize.Util.Html.Encode.encode (_value)}
        var
          m = this,
          i = arguments [0],
          _idPrefix = i.idPrefix,
          _fragment0 = '" class="',
          _fragment1 = _cssClass ('view'),
          _fragment2 = '" style="',
          _fragment3 = '">\r\n      <div class="',
          _fragment4 = _cssClass ('textareaShell'),
          _fragment5 = '"><textarea id="'
        ;
        return (
          '<div id="' + _idPrefix + _fragment0 + i['mCssBindings_rootNodeClasses'] + '">\r\n  <div class="' + _cssClass ('viewButtons') + '">\r\n    ' + _childHtml ({name:'sourceViewButton',extraClasses:_cssClass ('viewButton')}) + '\r\n    ' + _childHtml ({name:'resultViewButton',extraClasses:_cssClass ('viewButton')}) + '\r\n    <br style="clear: left;"/>\r\n  </div>\r\n  <div class="' + _cssClass ('views') + '">\r\n    <div id="' + _idPrefix + '-sourceView' + _fragment0 + _fragment1 + ' ' + _cssClass ('sourceView') + _fragment2 + 'display:' + (i['sourceViewShown'] ? '' : 'none') + ';' + _fragment3 + _fragment4 + _fragment5 + _idPrefix + '-source' + '">' + _encodeAttributeValue (i['source']) + '</textarea></div>\r\n    </div>\r\n    <div id="' + _idPrefix + '-resultView' + _fragment0 + _fragment1 + ' ' + _cssClass ('resultView') + _fragment2 + 'display:' + (i['resultViewShown'] ? '' : 'none') + ';' + _fragment3 + _fragment4 + _fragment5 + _idPrefix + '-result' + '" ' + (i['resultViewReadOnly'] ? 'readonly="readonly"' : '') + '>' + _encodeAttributeValue (i['result']) + '</textarea></div>\r\n    </div>\r\n  </div>\r\n</div>\r\n'
        );

      }
    });
  }
});