Yes I've done it; the basic idea is to extend from qx.ui.core.Widget, and
when you're ready to initialise the widget get the DOM element by calling
this.getContentElement().getDomElement() and then pass the result to
CodeMirror constructor.
In my case I knew the DOM was ready at the time when I wanted to
initialise CodeMirror but YMMV.
Loading the right JS and CSS modules for CodeMirror modes and features was
a pain because I didn't necessarily know what I wanted to load until
runtime and had to figure out my own dynamic loading and callbacks (and
delay initialisation until the load had complete etc), but if you hard
code your choices that won't matter - just add script and link tags to the
index.html and that should be fine.
I found that it was necessary to do this after initialising CodeMirror:
var elems = qx.bom.Selector.query(".CodeMirror-scroll");
for (var i = 0; i < elems.length; i++) {
elems[i].style.height = "100%";
elems[i].style.overflow = "scroll";
}
this.__resizeCodeMirror();
Where __resizeCodeMirror is:
__resizeCodeMirror: function() {
var el = this.getContentElement();
if (el) {
var Style = qx.bom.element.Style;
var div = el.getDomElement();
if (div && div.firstChild) {
div = div.firstChild;
Style.set(div, "width", this.__width + "px");
Style.set(div, "height", this.__height + "px");
this.__editor.refresh();
}
}
},
/*
* @Override
*/
renderLayout : function(left, top, width, height) {
var result = this.base(arguments, left, top, width, height - 7);
this.__width = width;
this.__height = height;
this.__resizeCodeMirror();
return result;
},
/*
* @Override
*/
_createContentElement: function() {
var el = new qx.html.Element("div");
// Apply styles
el.setStyles( {
"padding" : 0,
"margin" : 0,
"position" : "absolute",
left: "0",
top: "0"
});
return el;
},
Your widget's getValue/setValue implementation will probably need to take
care of whether CodeMirror is initialised yet - don't try to create "new
CodeMirror" when setValue is called, that's often a mistake. Instead,
cache the value being set and set it to CodeMirror during initialisation.
Once CodeMirror is running setValue can just copy the new value straight
over
The other issue I had is that if you add an onChange handler to CodeMirror
and you want to fire "changeValue" events, it's best to not fire
"changeValue" with every change from CodeMirror - instead, set a timer
that will merge CodeMirror's onChange callbacks into a single
"changeValue" event every 250 milliseconds or so.
I'd make this a contrib but my class depends on other bits on my library
that it's difficult to extract and I don't have the time right now, but
I'll help out if I can
John
On 14/08/2012 19:59, "smhanes" <[email protected]> wrote:
>For the last several days, I've been trying to find out how to integrate
>CodeMirror into Qooxdoo. All I have found is this:
>http://www.mail-archive.com/[email protected]/msg35552.h
>tml.
>
>Both of these are old versions and after poring over Qooxdoo's Playground
>implementation, I'm none the wiser for how to integrate the two.
>
>Is there any push to make such integration easier? Anyone actually do it
>outside the Playground?
>
>Thanks
>
>
>
>--
>View this message in context:
>http://qooxdoo.678.n2.nabble.com/Qooxdoo-2-0-1-and-CodeMirror-2-32-Integra
>tion-tp7580979.html
>Sent from the qooxdoo mailing list archive at Nabble.com.
>
>--------------------------------------------------------------------------
>----
>Live Security Virtual Conference
>Exclusive live event will cover all the ways today's security and
>threat landscape has changed and how IT managers can respond. Discussions
>will include endpoint security, mobile security and the latest in malware
>threats. http://www.accelacomm.com/jaw/sfrnl04242012/114/50122263/
>_______________________________________________
>qooxdoo-devel mailing list
>[email protected]
>https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
------------------------------------------------------------------------------
Live Security Virtual Conference
Exclusive live event will cover all the ways today's security and
threat landscape has changed and how IT managers can respond. Discussions
will include endpoint security, mobile security and the latest in malware
threats. http://www.accelacomm.com/jaw/sfrnl04242012/114/50122263/
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
