On 4/11/10 11:13 AM, [email protected] wrote:
> I try to add the editor creation to an new class. The head looks like
> this
>
> qx.Class.define("go.system.editor.Main", {
> extend: qx.core.Object,
> members : {
> htmlArea : null,
>
> main : function() {
> this.base(arguments);
> var demoContent = '<h1>Test</h1>';
>
> var htmlDecorator = new qx.ui.decoration.Single(1, "solid",
> "border-main");
> htmlDecorator.setWidthTop(0);
>
> this.htmlArea = new qx.ui.embed.HtmlArea(demoContent, null,
> "blank.html");
>
<snip>
Hi,
Coincidentally, I have been trying to do a similar (and possibly the
same) thing. First off, you'll need to extend either a widget or the
composite container. Since your vbContainer is a composite, I think
extending that is simpler. To make a form element that can be added to
any form, you have to implement IForm. To make a form element that can
be used with a string model element, you also need to implement
IStringForm. It's easiest to do this with MForm. In my experimenting,
the other mixins, or using properties didn't quite work for handling the
link between the value and the HtmlArea, so I defined the setters
directly and hook the focusOut event of the HtmlArea to fire a
changeValue event. The changeValue event is absolutely necessary for
data binding to work. I also added some flexibility of passing in a
decorator and the path to the blank.html file needed for the HtmlArea
element.
Here is the top of the code I've been using:
qx.Class.define("qooxdoo.Widgets.HtmlArea", {
extend: qx.ui.container.Composite,
implement : [
qx.ui.form.IStringForm,
qx.ui.form.IForm
],
include: [
qx.ui.form.MForm
],
events: {
"changeValue" : "qx.event.type.Data"
},
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
/** * Main method - application start point */
construct: function(content, styler, htmlsource, decorator) {
var vb = new qx.ui.layout.VBox(0);
this.base(arguments, vb);
var htmlDecorator;
if (decorator == null) {
var deco = new qx.ui.decoration.Single(1, "solid",
"border-main");
deco.setWidthTop(0);
htmlDecorator = {
width: 200,
height: 100,
decorator: deco
};
} else {
htmlDecorator = decorator;
}
this.__htmlArea = new qx.ui.embed.HtmlArea(content, styler,
htmlsource);
this.__htmlArea.set(htmlDecorator);
this.__htmlArea.setValue(" ");
var toolbar = this.__setupToolbar();
// Add description, toolbar and HtmlArea widget
this.add(toolbar);
this.add(this.__htmlArea);
this.__htmlArea.addListener("focusOut", this._valueChanged, this);
},
members: {
__htmlarea: null,
_valueChanged: function(e)
{
this.fireDataEvent("changeValue", this.getValue());
},
setValue: function(value)
{
this.__htmlArea.setValue(value);
},
resetValue: function()
{
this.__htmlArea.resetHtml();
},
getValue: function()
{
return this.__htmlArea.getComputedValue();
},
/* *********************************************
*
* Special handler for Toolbar entries
*
********************************************* */
/**
* Handler method for font color
*
* @param e {qx.event.type.Event} event instance
*/
__fontColorHandler: function(e) {
... etc.
Note that there are still several major problems with this code:
1) You'll need to edit your config.json and add a library line, or copy
all of the images from the htmlarea demo into your project [a previous
thread from me addresses this issue]
2) Although the buttons work, they aren't very effective. For instance,
the Bold button only turns on bold, it doesn't toggle it. The link
button only attempts to add a new link, it doesn't recognize and edit an
existing one.
#2 essentially means you'll have to do a whole bunch more coding, which
is why I've been investigating simply embedding a complete HTML editor
suck as ckeditor instead of using the HtmlArea widget. Honestly, I'd
love to use the HtmlArea widget directly, and will be investigating
whether this problem can be solved more easily than I think it can tonight.
Greg
------------------------------------------------------------------------------
Download Intel® Parallel Studio Eval
Try the new software tools for yourself. Speed compiling, find bugs
proactively, and fine-tune applications for parallel performance.
See why Intel Parallel Studio got high marks during beta.
http://p.sf.net/sfu/intel-sw-dev
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
