About ckEditor integration

[xu]

I follow the example code you gave, there is a problem when i get the ckeditor's value, " saveForm.getValue("testItem"); " can not work!
You have a good solution?

Entry Point Class code

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.smartgwt.client.bean.BeanFactory;
import com.smartgwt.client.rpc.LoadScreenCallback;
import com.smartgwt.client.rpc.RPCManager;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class BuiltInDS implements EntryPoint {
    @Override  
    public void onModuleLoad() {   
    	 // Make all form items (including CKEditorItem) reflectable:
 		GWT.create(BeanFactory.FormItemMetaFactory.class);
        final Canvas layout = new Canvas();   
        RPCManager.loadScreen("ckeditor", new LoadScreenCallback() {   
            @Override  
            public void execute() {   
                Button saveButton = (Button) this.getScreen().getByLocalId("saveButton");   
                final DynamicForm saveForm = (DynamicForm) this.getScreen().getByLocalId("saveForm");   
                saveButton.addClickHandler(new ClickHandler() {   
                    @Override  
                    public void onClick(ClickEvent event) {   
                      /*  if (Boolean.FALSE.equals((Boolean)saveForm.getValue("inStock")) &&   
                            saveForm.getValue("nextShipment") == null) {   
                            SC.warn("New stock items which are not already stocked must have a Stock Date");   
                        }   */
                    	Object obj = saveForm.getValue("testItem");
                    	
                    	if ( null == obj  ) {
                    		obj = saveForm.getValue("default");
                    	}
                    	
                    	if ( null != obj ) {
                    		SC.say( obj.toString() );
                    	} else {
                    		
                    		SC.say(" can not get the value ");
                    	}
                    }   
                });   
                layout.addChild(this.getScreen());   
            }   

        });   
        layout.draw();   
    }
}

ckeditor ui.xml's code

<VLayout xmlns:xsi="http://www.w3.org/1999/XMLSchema-instance"
     ID="componentsLayout" autoDraw="false">
     <members>
        <DynamicForm ID="saveForm" dataSource="supplyItem" autoDraw="false" width="800" height="320">
			<items>
				<item name="testItem" editorType="com.smartgwt.sample.client.CKEditorItem"
					width="800" titleWidth="100" />
			</items>
        </DynamicForm>
        
        <Button ID="saveButton" title="Save" autoDraw="false" />
    </members>
</VLayout>

CkeditorItem's code

package com.smartgwt.sample.client;

import com.smartgwt.client.widgets.form.fields.CanvasItem;

public class CKEditorItem extends CanvasItem {
	private CKEditor ckeCanvas;

	public CKEditorItem() {
		super("testItem");
		ckeCanvas = new CKEditor("testItem");
		this.setCanvas(ckeCanvas);
		setShouldSaveValue( true );
		System.out.println( "default" );
	}
	
	public CKEditorItem(String name) {
		super(name);
		ckeCanvas = new CKEditor(name);
		this.setCanvas(ckeCanvas);
		setShouldSaveValue( true );
	}

	public CKEditorItem(String name, String title) {
		super( name, title );
		
		ckeCanvas = new CKEditor(name);
		this.setCanvas(ckeCanvas);
		setShouldSaveValue( true );
	}

	@Override
	public void setWidth(String width) {
		super.setWidth(width);
		ckeCanvas.setWidth(width);
	}
	
	@Override
	public void setWidth(int width) {
		super.setWidth(width);
		ckeCanvas.setWidth(width);
	}
	
	@Override
	public void setHeight(String height) {
		super.setHeight(height);
		ckeCanvas.setHeight(height);
	}
	
	@Override
	public void setHeight(int height) {
		super.setHeight(height);
		ckeCanvas.setHeight(height);
	}
	
	@Override
	public Object getValue() {
		return getCKEditorValue(ckeCanvas.getID()+"_ta");
	}
	
	private native String getCKEditorValue(String ckEditorId)/*-{
		if($wnd.CKEDITOR.instances[ckEditorId]){
			return $wnd.CKEDITOR.instances[ckEditorId].getData();
		}
		return null;
	}-*/;
	
	@Override
	public void setValue(String value) {
		super.setValue(value);
		if(ckeCanvas.isLoaded())
			setCKEditorValue(ckeCanvas.getID()+"_ta", value);
		else
			ckeCanvas.setContents(value);
	}
	
	private native void setCKEditorValue(String ckEditorId,String value)/*-{
	if($wnd.CKEDITOR.instances[ckEditorId]){
		$wnd.CKEDITOR.instances[ckEditorId].setData(value);
	}
}-*/;

	
}

[Isomorphic]

You can indeed make use of custom classes in a ui.xml file using Reflection.

Assuming your custom class is a subclass of CanvasItem, and is called CKEditorItem, and is in the package "com.smartgwt.sample.client", the easiest way to do this is to enable Reflection for all form items by adding this to your onModuleLoad function:

		// Make all form items (including CKEditorItem) reflectable:
		GWT.create(BeanFactory.FormItemMetaFactory.class);

And then use a fully qualified ClassName to refer to it in your ui.xml file. For example you could have something like this:

<DynamicForm>
    <items>
        <item name="testItem" editorType="com.smartgwt.sample.client.CKEditorItem"/>
    </items>
</DynamicForm>

Note - you could also selectively enable reflection for the classes you care about rather than for every FormItem subclass - see the documentation for more on that.


Regards
Isomorphic Software

[xu]

Hi,I was wondering if I can only use ui.xml to define Custom component?
I use the following code but it can not work for "CKEditor":

public class CKEditorEntryPoint implements EntryPoint  {
    public interface MyMetaFactory extends BeanFactory.MetaFactory{   
        BeanFactory<CKEditorItem> getMyListGridFactory();   
    } 
    
	@Override
	public void onModuleLoad() {
		VLayout main = new VLayout();
        GWT.create(MyMetaFactory.class);   
        final Canvas layout = new Canvas();   
//        RPCManager.loadScreen("cKEditorEntryPoint", new LoadScreenCallback() {   
            RPCManager.loadScreen("ckeditor", new LoadScreenCallback() {   
            public void execute() {   
                layout.addChild(this.getScreen());   
            }   
        });
        main.addMember( layout );
        main.draw();   
	}

}

Could you tell me how can I use Reflection for ckeditor ?

[Isomorphic]

No. That's why the documentation says to do something else.

[xu]

In your CanvasItem JavaDoc,I do found showValue event and storeValue API .
I used getCKEditorValue and ckeCanvas.setContents(value) instand of showValue and storeValue API.

@Override
     public Object getValue() {
          return getCKEditorValue(ckeCanvas.getID()+"_ta");
     }
     
     private native String getCKEditorValue(String ckEditorId)/*-{
          if($wnd.CKEDITOR.instances[ckEditorId]){
               return $wnd.CKEDITOR.instances[ckEditorId].getData();
          }
          return null;
     }-*/;
     
     @Override
     public void setValue(String value) {
          super.setValue(value);
          if(ckeCanvas.isLoaded())
               setCKEditorValue(ckeCanvas.getID()+"_ta", value);
          else
               ckeCanvas.setContents(value);
     }
     
     private native void setCKEditorValue(String ckEditorId,String value)/*-{
     if($wnd.CKEDITOR.instances[ckEditorId]){
          $wnd.CKEDITOR.instances[ckEditorId].setData(value);
     }
}-*/;

Is it suitable to do this?

[Isomorphic]

If you read the rest of the sentence about "serious issues", it says what the serious issues are - you are not using the documented CanvasItem approach to managing values (showValue event and storeValue API). Details are right on the CanvasItem JavaDoc.

Once again the Reflection overview is here and contains sample code. Please attempt to use the documentation - if you somehow do not succeed, show your attempt.

[xu]

Would you please tell me the detailed *serious issues* you mentioned above?
My integretion result is shown in attachment 1 and I'm not sure if this method is correct. Since the Reflection docs can not afford me to finish the code of integration method you told me, can you give me more information about these method,addition with data binding using xml?
.smartgwtee-4.0pz IE9

[Isomorphic]

It does have some serious issues - you should read the docs for CanvasItem paying close attention to showValue and storeValue APIs and suggested usage.

[xu]

And please tell me whether the code i wrote in CKEditor.java and CKEditorItem.java is a suitable way to do smart gwt data binding?

[Isomorphic]

In 3.1, you do need a call to setEditorType() as your original code showed.

In 4.0, it's possible to set the editorType attribute in a .ds.xml file to the *fully qualifed* Java classname of a subclass of FormItem, if you've marked your class as Reflectable (see Reflection overview).

Trying to set the "type" attribute to the name of a FormItem subclass is always wrong. The "type" attribute indicates data type.

[xu]

Hi, I have read the javadoc you mentioned above before. What the integration method WiKi tells is not cover content about data binding.
And I hope the integretion implement using data binding automatically with xml file defination,without using java code.
For example, I declared in "ds.xml" for the EditorType

        <field name="information"     title="Interesting Facts"  type="ckeditor"  length="1000"/>
        <field name="picture"         title="Picture"            type="image" detail="true"
               imageURLPrefix="/isomorphic/system/reference/inlineExamples/tiles/images/"/>

It will be better not to use the code explicitly declared like *information.setEditorType(ckEditor);*.
Would you please reread codes pasted above and give me a more explicit answer? Or what's your recommended way to implement ckEditor integration.Thanks.

[Isomorphic]

Take a look at the DOMIntegration topic in the "docs" package in JavaDoc - it specifically discusses ckEditor. You might also want to review some of the sample code posted on the public wiki.

[xu]

Hi Isomorphic,I was attempting to integrate ckeditor with smartgwt.
First,I bind ckeditor for the "animals" datasource as follows:

	DataSource ds = DataSource.get("animals");
	DataSourceField information = ds.getField("information");
	ckEditor = new CKEditorItem("information", "信息");
	information.setEditorType(ckEditor);
        ckEditor.setValue(DEFAULT_HTML_CONTENT);
	ckEditor.setShowTitle(false);
	ckEditor.setWidth("100");
	ckEditor.setHeight("500");

My detail implementation code is shown as follows:
BuiltInDS.java

public void onModuleLoad() {
		try {
			DataSource ds = DataSource.get("animals");
			DataSourceField information = ds.getField("information");
			
			ckEditor = new CKEditorItem("information", "信息");
			information.setEditorType(ckEditor);
			
			ckEditor.setValue(DEFAULT_HTML_CONTENT);
			ckEditor.setShowTitle(false);
			ckEditor.setWidth("100");
			ckEditor.setHeight("500");
			
			VLayout main = new VLayout();
			main.setSize("100%", "80%");
			final DynamicForm form = new DynamicForm();
			form.setBorder("2px solid blue");
			form.setNumCols(2);
			form.setAutoFocus(true);
			form.setDataSource(ds);
			IButton btnPrintHTML = new IButton("打印HTML");
			btnPrintHTML.addClickHandler(btnPrintHTML_onClick);

			IButton save = new IButton("保存");
			save.addClickHandler( new ClickHandler() {
				
				@Override
				public void onClick(ClickEvent event) {
					form.saveData();
				}
			});
			form.setSize( "50%", "80%" );
			HLayout hMain = new HLayout();
			
			/************************** start *************************/
	        final ListGrid countryGrid = new ListGrid();   
	        countryGrid.setWidth(500);   
	        countryGrid.setHeight(224);   
	        countryGrid.setShowAllRecords(true);   
	  
	        ListGridField countryCodeField = new ListGridField("countryCode", "代码", 40);   
	        ListGridField nameField = new ListGridField("countryName", "国家");   
	        ListGridField independenceField = new ListGridField("independence", "独立日", 225);   
	        independenceField.setType(ListGridFieldType.DATE);   
	        ListGridField populationField = new ListGridField("population", "人口");   
	        populationField.setType(ListGridFieldType.INTEGER);   
	        ListGridField gdpField = new ListGridField("gdp", "GDP");   
	        gdpField.setType(ListGridFieldType.FLOAT);   
	  
	        countryGrid.setFields(new ListGridField[] {countryCodeField, nameField, independenceField,   
	                                                   populationField, gdpField});   
	        countryGrid.setCanResizeFields(true);   
	        countryGrid.setData(CountrySampleData.getRecords());   
			/************************** end *************************/
			
			hMain.setMembers(btnPrintHTML, save, countryGrid);
			main.setMembers(form, hMain );
			main.draw();
        
		} catch (Exception exc) {
			SC.warn("An exception has occured:<br>" + exc.toString());
		}

	}

CKEditor.java

package com.smartgwt.sample.client;

import com.smartgwt.client.widgets.form.fields.CanvasItem;

public class CKEditorItem extends CanvasItem {
	private CKEditor ckeCanvas;

	public CKEditorItem(String name) {
		super(name);
		ckeCanvas = new CKEditor(name);
		this.setCanvas(ckeCanvas);
		setShouldSaveValue( true );
	}

	public CKEditorItem(String name, String title) {
		super( name, title );
		
		ckeCanvas = new CKEditor(name);
		this.setCanvas(ckeCanvas);
		setShouldSaveValue( true );
	}

	@Override
	public void setWidth(String width) {
		super.setWidth(width);
		ckeCanvas.setWidth(width);
	}
	@Override
	public void setWidth(int width) {
		super.setWidth(width);
		ckeCanvas.setWidth(width);
	}
	@Override
	public void setHeight(String height) {
		super.setHeight(height);
		ckeCanvas.setHeight(height);
	}
	
	@Override
	public void setHeight(int height) {
		super.setHeight(height);
		ckeCanvas.setHeight(height);
	}
	
	@Override
	public Object getValue() {
		return getCKEditorValue(ckeCanvas.getID()+"_ta");
	}	
	@Override
	public void setValue(String value) {
		super.setValue(value);
		if(ckeCanvas.isLoaded())
			setCKEditorValue(ckeCanvas.getID()+"_ta", value);
		else
			ckeCanvas.setContents(value);
	}
}

CKEditorItem.java

package com.smartgwt.sample.client;

import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.events.DrawEvent;
import com.smartgwt.client.widgets.events.DrawHandler;

public class CKEditor extends Canvas{
	{
		setOverflow(Overflow.VISIBLE);
		setCanDragResize(false);
		setRedrawOnResize(false);
		setZIndex(0);
	}
	
	private boolean loaded=false;

	public CKEditor(String id){
		super(id);
		addDrawHandler(new DrawHandler() {
			
			@Override
			public void onDraw(DrawEvent event) {
				loadCKEditor();
			}
		});
	}
	@Override
	public String getInnerHTML() {
		if(this.getContents() != null){
			return "<textarea style='width=100%;height=100%' id=" + this.getID() + "_ta>"+
				getContents()+"</textarea>";
		}
		return "<textarea style='width=100%;height=100%' id=" + this.getID() + "_ta></textarea>";
	}
	public boolean isLoaded() {
		return loaded;
	}
}

I was wondering if my implementation method is appropriate. What's your suggestion about ckEditor integration.
. smartgwtee-4.0p、ie9.0、eclipse