Re: [xwiki-devs] Use WYSIWG New Backgournd Color API
Hi Marius, I successfully load the tree panel in the WYSIWYG editing model. Thank you so much! :-) I put the compiled xwiki-web-gwt, xwiki-web-wysiwyg and xwiki-webdav 2.02 jar file to the lib folder. After the tree loaded, I found there 2 errors using firebug (thank you for recommendation), one is saying "isc is not defined" in overwritesc.js(), one is saying "isc is not defined" in overwritesc.js(). Here is the screenshot: http://picasaweb.google.com/lh/photo/BxK7IksttDQFB4KtJAJOvg?feat=directlink. Here is what I did, first I modify the template/macros.vm file: Wysiwyg.onModuleLoad(function() { window["wysiwyg_editor"] = new WysiwygEditor($jsVarName); $jsVarName = undefined; }); In the GWT file: native void setBackgroudColor(String color) /*-{ wysiwyg_editor.getCommandManager().execute('backcolor', 'yellow'); alert(wysiwyg_editor.getCommandManager().getValue('backcolor') ); }-*/; /** * This is the entry point method. */ @SuppressWarnings("unchecked") public void onModuleLoad() { Tree tree = new Tree(); tree.setAnimationEnabled(true); TreeItem outerRoot = new TreeItem("DR Tag Tree"); outerRoot.addItem("Alternative"); outerRoot.addItem("Assumption"); outerRoot.addItem("Argument"); outerRoot.addItem("Claim"); outerRoot.addItem("Decision"); outerRoot.addItem("Requirement"); tree.addItem(outerRoot); tree.addSelectionHandler(new SelectionHandler() { public void onSelection(SelectionEvent event) { if (((TreeItem) event.getSelectedItem()).getText().equals( "Alternative")) { setBackgroudColor("yellow"); } else if (((TreeItem) event.getSelectedItem()).getText() .equals("Requirement")) { setBackgroudColor("blue"); } else if (((TreeItem) event.getSelectedItem()).getText() .equals("Decision")) { setBackgroudColor("green"); } Window.alert(((TreeItem) event.getSelectedItem()).getText()); } }); Could you give me some ideas what is wrong? Or what I missed? Thank you, Marius! -Leon
Hi Leon, Leon Wang wrote:
Hi Marius,
I successfully load the tree panel in the WYSIWYG editing model. Thank you so much! :-)
I put the compiled xwiki-web-gwt, xwiki-web-wysiwyg and xwiki-webdav 2.02 jar file to the lib folder. After the tree loaded, I found there 2 errors using firebug (thank you for recommendation), one is saying "isc is not defined" in overwritesc.js(), one is saying "isc is not defined" in overwritesc.js(). Here is the screenshot: http://picasaweb.google.com/lh/photo/BxK7IksttDQFB4KtJAJOvg?feat=directlink.
"isc" is defined by SmartClient JavaScript framework. Do you use SmartClient? Did you changed any of the JavaScript files or templates (besides macros.vm and editpanelsvars.vm) that are bundled with XWiki Enterprise? It looks like the SmartClient JavaScript files are not loaded.
Here is what I did, first I modify the template/macros.vm file:
Wysiwyg.onModuleLoad(function() { window["wysiwyg_editor"] = new WysiwygEditor($jsVarName); $jsVarName = undefined; });
Good.
In the GWT file:
native void setBackgroudColor(String color) /*-{ wysiwyg_editor.getCommandManager().execute('backcolor', 'yellow'); alert(wysiwyg_editor.getCommandManager().getValue('backcolor') ); }-*/;
Almost there. You see, the code of your GWT module is loaded in an iframe and because of this any reference to the window object refers in fact to the iframe's window NOT the main browser window in which the wiki pages is loaded. You defined window["wysiwyg_editor"] in macros.vm but that's the main browser window. Writing any of: window["wysiwyg_editor"] window.wysiwyg_editor wysiwyg_editor inside a native GWT method will fail because you refer to the iframe's window. Instead, you have to write any of: $wnd["wysiwyg_editor"] $wnd.wysiwyg_editor where $wnd is defined by GWT and points to the main browser window.
/** * This is the entry point method. */ @SuppressWarnings("unchecked") public void onModuleLoad() { Tree tree = new Tree(); tree.setAnimationEnabled(true); TreeItem outerRoot = new TreeItem("DR Tag Tree"); outerRoot.addItem("Alternative"); outerRoot.addItem("Assumption"); outerRoot.addItem("Argument"); outerRoot.addItem("Claim"); outerRoot.addItem("Decision"); outerRoot.addItem("Requirement"); tree.addItem(outerRoot);
tree.addSelectionHandler(new SelectionHandler() { public void onSelection(SelectionEvent event) { if (((TreeItem) event.getSelectedItem()).getText().equals( "Alternative")) { setBackgroudColor("yellow"); } else if (((TreeItem) event.getSelectedItem()).getText() .equals("Requirement")) { setBackgroudColor("blue"); } else if (((TreeItem) event.getSelectedItem()).getText() .equals("Decision")) { setBackgroudColor("green"); } Window.alert(((TreeItem) event.getSelectedItem()).getText()); } });
This looks fine. Hope this helps, Marius
Could you give me some ideas what is wrong? Or what I missed?
Thank you, Marius!
-Leon _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
participants (2)
-
Leon Wang -
Marius Dumitru Florea