Do popups work in smartGWT?

[pboysen]

I built the FCKEditor in a GWT Composite and the image dialogs and other pops worked correctly. I changed Composite to a Canvas and none of the dialogs, form insertions etc. now work. I tried putting the composite version in a GWT PopupPanel to get around the problem but I can't get it to show. Is smartGWT interfering with the display?

I traced the code in the debugger and the process looked correct. Below is the code for the editor:
package edu.iastate.its.project.model.sharedwidgets.client.common;

import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HasHTML;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

public class FCKEditor extends PopupPanel implements HasHTML {
private String elementID;
private HTML html;
private HTMLSaveListener listener;
private String cssWidth,cssHeight;
private String toolBar = "Default";

/**
* @wbp.parser.constructor
*/
public FCKEditor() {
this("600","400",null);
}

public FCKEditor(String cssWidth, String cssHeight, HTMLSaveListener listener) {
this.listener = listener;
this.cssWidth = cssWidth;
this.cssHeight = cssHeight;
this.elementID = "edu-iastate-its-project-model-sharedwidgets-htmleditor-"+System.identityHashCode(this);
html = new HTML();
HorizontalPanel hpanel = new HorizontalPanel();
Button save = new Button("Save");
save.addClickListener(new ClickListener() {
public void onClick(Widget w) {
save();
}
});
Button cancel = new Button("Cancel");
cancel.addClickListener(new ClickListener() {
public void onClick(Widget w) {
cancel();
}
});
hpanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
hpanel.add(save);
hpanel.add(cancel);
VerticalPanel vpanel = new VerticalPanel();
vpanel.add(hpanel);
vpanel.add(html);
setWidget(vpanel);
}

/**
* Returns the HTML currently contained in the editor
*
* @return the HTML currently contained in the editor
*/
public String getHTML() {
return jsniGetText(elementID);
}

/**
* Returns <code>null</code> as this editor doesn't support straight text editing.
*
* @return <code>null</code> as this editor doesn't support straight text editing.
*/
public String getText() {
return null;
}

/**
* Sets the HTML currently contained in the editor
*
* @param html the HTML currently contained in the editor
*/
public void setHTML(String html) {
jsniSetText(elementID, html);
}

/**
* Does nothing as straight text editing is not supported by this editor
*
* @param text ignored
*/
public void setText(String text) {
//Do nothing
}


public void edit(String htmlText) {
show();
html.setHTML("<textarea wrap=\"virtual\" id=\""+elementID+"\">"+htmlText+"</textarea>");
initEditor(elementID,cssWidth,cssHeight,GWT.getModuleBaseURL(),"lib",toolBar);
}

private void save() {
String html = jsniGetText(elementID);
if (listener != null)
listener.onSave(html);
hide();
}

private void cancel() {
hide();
}

public String getToolBar() {
return toolBar;
}

public void setToolBar(String toolBar) {
this.toolBar = toolBar;
}

private static native String jsniGetText(String elementID) /*-{
if ($wnd.FCKeditorAPI) {
var instance = $wnd.FCKeditorAPI.GetInstance(elementID);
if (instance != null) {
return instance.GetXHTML(true);
} else {
//The instance isn't bound yet
return null;
}
} else {
//We're not bound yet in some way
return null;
}
}-*/;

private static native void jsniSetText(String elementID, String html) /*-{
if ($wnd.FCKeditorAPI) {
var instance = $wnd.FCKeditorAPI.GetInstance(elementID);
if (instance != null) {
return instance.SetHTML(html);
} else {
//The instance isn't bound yet
return;
}
} else {
//We're not bound yet in some way
return;
}
}-*/;

private native void initEditor(String name, String width, String height,String base, String root, String toolbar) /*-{
var editor = new $wnd.FCKeditor(name,parseInt(width),parseInt(height),toolbar,'');
editor.BasePath= base+'fckeditor/';
editor.Config['BaseHref'] = base + '/resources/' + root;
var link_url = '/resources/' + '&amp;ServerPath=' + root;
var image_url = link_url + '&amp;Type=Image';
var browserURL = editor.BasePath+'editor/filemanager/browser/default/browser.html?Connector=../../../../../';
editor.Config['ImageBrowserURL'] = browserURL + image_url;
editor.Config['LinkBrowserURL'] = browserURL + link_url;
editor.Config['EditorAreaCSS'] = editor.basePath + "skins/default/fck_editor.css";
editor.Config['StylesXmlPath'] = editor.BasePath + "fckstyles.xml";
editor.Config['TemplatesXmlPath'] = editor.BasePath + "fcktemplates.xml";
editor.ReplaceTextarea();
}-*/;
}

[smartgwt.dev]

In SmartClient, these are the Canvas zIndex properties:

       // default zIndex for the next item to be drawn
       _nextZIndex:200000,

       // zIndex of the next item to be sent to the back
       _SMALL_Z_INDEX:199950,

       // zIndex of the next item to be brought to the front
       _BIG_Z_INDEX:800000,

So the GWT PopupPanel is probably being displayed beneath it.

Can you try adding the following to the FCKEditor constructor and see if it helps?

DOM.setStyleAttribute(this.getElement(), "zIndex", "800001");

[pboysen]

showed FCKEditor but not its popups

Yep, that showed the editor but not its window wrapper which probably makes sense. I had made it a popup only because I couldn't get it to work in a Canvas. The popups within FCKEditor still don't show but that is probably because they don't inherit the setting. I will see if I can tweak the FCKEditor code to make it work.

[smartgwt.dev]

Read this thread. The last post there talks about how the FCKEditor zIndex can be altered.

[pboysen]

I really did search the forum first!

With a little browsing I found the same thing. But rather than put it in the main FCKConfig file I put it in the Canvas:
editor.Config['FloatingPanelsZIndex'] = '8000001';

Cool!

[sjivan]

If you are able to bundle this functionality as a generic reusable class it would be great if you can contribute it back to the community.

Thanks,
Sanjiv

PS: as the tip says, use [ CODE] and [/CODE ] to surround code

[pboysen]

Glad to

Where and how would I post it?

[sjivan]

I've created a google code project for SmartGWT extensions.

http://code.google.com/p/smartgwt-extensions/

If anyone is interested on contributing, please post here or send an email along with your google ID and I will add you as a project member.

Thanks,
Sanjiv

[pboysen]

Please add me as a member

pboysen@iastate.edu

I will be posting something after the New Year integrating FCKEditor with smartGWT. It will include a servlet that will let users upload/download files (images, flash etc.) from a repository on the server.

[sjivan]

pboysen,
Sorry I completely missed your last post. I have added you as a project member. Please let me know if you have any issues commiting code. (I'm not sure if non-google accounts work with google code).

Sanjiv

[mihai007]

Ok I would like to join also to submit some changes to EventBus extension.
My user is "mihai.ile", if needed just add @gmail.com to it.

Thank you.

[sjivan]

I've added you as a committer to smartgwt-extensions.

[gusy]

Hi,
Is it possible to get a usage sample for this HTMLEditor?

Thanks