server/org.argeo.slc.ria/src/argeo-ria-lib/jcr/class/org/argeo/jcr/ria/views/XmlNodeEditor.js

   1 qx.Class.define("org.argeo.jcr.ria.views.XmlNodeEditor", {
   2         extend : qx.ui.container.Composite,
   3         implement : [org.argeo.ria.components.IView],
   4
   5         properties : {
   6                 /**
   7                  * The commands definition Map that will be automatically added and wired to the menubar and toolbar.
   8                  * See {@link org.argeo.ria.event.CommandsManager#definitions} for the keys to use for defining commands.
   9                  */
  10                 commands : {
  11                         init : {}
  12                 },
  13                 viewSelection : {
  14                         nullable:false,
  15                         check:"org.argeo.ria.components.ViewSelection"
  16                 },
  17                 instanceId : {
  18                         init:"XmlEditor",
  19                         event : "changeInstanceId"
  20                 },
  21                 instanceLabel : {
  22                         init:"Xml Editor",
  23                         event : "changeInstanceLabel"
  24                 },
  25                 dataModel : {
  26
  27                 }
  28         },
  29
  30         construct : function(){
  31                 this.base(arguments);
  32         },
  33
  34         members : {
  35                 /**
  36                  * The implementation should contain the GUI initialisation.
  37                  * This is the role of the manager to actually add the graphical component to the pane,
  38                  * so it's not necessary to do it here.
  39                  * @param viewPane {org.argeo.ria.components.ViewPane} The pane manager
  40                  * @param data {Mixed} Any object or data passed by the initiator of the view
  41                  * @return {Boolean}
  42                  */
  43                 init : function(viewPane, dataModel){
  44                         this.setViewSelection(new org.argeo.ria.components.ViewSelection(viewPane.getViewId()));
  45                         this.setLayout(new qx.ui.layout.VBox());
  46                         this.setDataModel(dataModel);
  47
  48                         this.input = new qx.ui.form.TextField();
  49                         this.add(this.input);
  50
  51                         this._attachInputToDM();
  52
  53                         this.htmlPane = new qx.ui.embed.Html();
  54                         this.htmlPane.setOverflow("auto", "auto");
  55                         this.add(this.htmlPane, {flex:1});
  56
  57                 },
  58                 /**
  59                  * The implementation should contain the real data loading (i.o. query...)
  60                  * @return {Boolean}
  61                  */
  62                 load : function(){
  63                         var dataModel = this.getDataModel();
  64                         dataModel.addListener("changeContextNode", function(event){
  65                                 var xmlString = event.getData().toXmlString(true);
  66                             var TAG_START_PATTERN = new RegExp("<([0-9a-zA-Z\.]+)([^>]*)>", "gi");
  67                             var TAG_END_PATTERN = new RegExp("</([0-9a-zA-Z\.]+)>", "gi");
  68                             var TAG_CLOSE_PATTERN = new RegExp("(/?>)", "gi");
  69                             var TAG_ATTRIBUTE = new RegExp("\\s([0-9a-zA-Z:]+)\\=\"([^\"]*)\"", "gi");
  70                             // Not implemented yet
  71                             var TAG_COMMENT = new RegExp("(<!--.*-->)", "gi");
  72                             var TAG_CDATA_START = new RegExp("(\\<!\\[CDATA\\[).*", "gi");
  73                             var TAG_CDATA_END = new RegExp(".*(]]>)", "gi");
  74
  75                             xmlString = xmlString.replace(TAG_START_PATTERN, 'xml_div_begin&lt;xml_tagname_begin$1xml_tagname_end$2&gt;');
  76                             xmlString = xmlString.replace(TAG_END_PATTERN, '&lt;/xml_tagname_begin$1xml_tagname_end&gt;xml_div_end');
  77                             xmlString = xmlString.replace(TAG_CLOSE_PATTERN, '&gt;');
  78
  79                             xmlString = xmlString.replace(TAG_ATTRIBUTE, ' xml_attname_begin$1xml_attname_end="xml_attvalue_begin$2xml_attvalue_end"');
  80
  81                                 //xmlString = qx.xml.String.escape(xmlString);
  82                                 xmlString = xmlString.replace(new RegExp("(xml_div_begin)", "g"), '<div style="padding:1px;line-height:17px;padding-left:15px;">');
  83                                 xmlString = xmlString.replace(new RegExp("(xml_div_end)", "g"), '</div>');
  84                                 xmlString = xmlString.replace(new RegExp("(xml_tagname_begin)", "g"), '<b style="color:rgb(63,127,127);">');
  85                                 xmlString = xmlString.replace(new RegExp("(xml_tagname_end)", "g"), '</b>');
  86                                 xmlString = xmlString.replace(new RegExp("(xml_attname_begin)", "g"), '<b>');
  87                                 xmlString = xmlString.replace(new RegExp("(xml_attname_end)", "g"), '</b>');
  88                                 xmlString = xmlString.replace(new RegExp("(xml_attvalue_begin)", "g"), '<span style="color:rgb(0,0,255)">');
  89                                 xmlString = xmlString.replace(new RegExp("(xml_attvalue_end)", "g"), '</span>');
  90                                 xmlString = '<div style="margin-left:-10px;">' + xmlString + '</div>';
  91                                 this.htmlPane.setHtml(xmlString);
  92                                 /*
  93                                 var call = new qx.util.DeferredCall(function(){
  94                                         var htmlDom = this.htmlPane.getContentElement().getDomElement();
  95                                         var spans = qx.bom.Selector.query("span", htmlDom);
  96                                         for(var i=0;i<spans.length;i++){
  97                                                 var oThis = this;
  98                                                 spans[i].onclick = function(){oThis._setAttributesSpanEditable(this)};
  99                                         }
 100                                 }, this);
 101                                 call.schedule();
 102                                 */
 103                         }, this);
 104                         dataModel.requireContextChange();
 105                 },
 106
 107                 _setAttributesSpanEditable : function(span){
 108                         var width = qx.bom.element.Dimension.getWidth(span);
 109                         var value = span.innerHTML;
 110                         qx.bom.element.Style.set(span, "display", "none");
 111                         var input = qx.bom.Element.create("input", {value:value, style:'width:'+width+'px;'});
 112                         qx.dom.Element.insertAfter(input, span);
 113                 },
 114
 115                 _attachInputToDM : function(){
 116                         var dm = this.getDataModel();
 117                         this.input.addListener("keypress", function(event){
 118                                 if(event.getKeyIdentifier() != "Enter") return;
 119                                 var path = this.input.getValue();
 120                                 dm.requireContextChange(path);
 121                         }, this);
 122                         dm.addListener("changeContextNode", function(event){
 123                                 var ctxtNode = event.getData();
 124                                 this.input.setValue(ctxtNode.getPath());
 125                         }, this);
 126
 127                 },
 128
 129                 /**
 130                  * Whether this component is already contained in a scroller (return false) or not (return true).
 131                  * @return {Boolean}
 132                  */
 133                 addScroll : function(){
 134                         return false;
 135                 },
 136                 /**
 137                  * Called at destruction time
 138                  * Perform all the clean operations (stopping polling queries, etc.)
 139                  */
 140                 close : function(){
 141
 142                 }
 143         }
 144
 145
 146 });