Announcement

**Isomorphic** · 17 Jul 2013, 12:06

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 · 17 Jul 2013, 18:14

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

Code:

        <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** · 17 Jul 2013, 19:11

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 · 17 Jul 2013, 20:18

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** · 17 Jul 2013, 21:33

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 · 18 Jul 2013, 18:24

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

Attached Files

**Isomorphic** · 18 Jul 2013, 18:41

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 · 18 Jul 2013, 19:07

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.

Code:

@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** · 18 Jul 2013, 19:33

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

xu · 21 Jul 2013, 18:13

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":

Code:

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** · 22 Jul 2013, 12:08

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:

Code:

		// 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:

Code:

<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 · 23 Jul 2013, 02:14

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

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

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

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);
	}
}-*/;

	
}

Attached Files

**Isomorphic** · 23 Jul 2013, 09:29

The problem here is that you're still overriding 'getValue()' / 'setValue()' on your custom item, rather than using the "storeValue()" / "showValue()" APIs.

This is not the right way to handle values for a CanvasItem subclass - the framework code that handles managing values for DynamicForms and FormItems will not call your overrides, and moreover events like "change" / "changed" will not fire when you expect in your custom item if you attempt to integrate in this way.

Instead, you need to do 2 things:
- Add logic to your 3rd-party editor using their APIs to react to changes the user makes to the value. Whenever the user modifies the value, you should call the "storeValue" API on your custom CanvasItem.
- As part of your initialization code for the custom CKEditorItem you should call "addShowValueHandler()". Within your handler, you should take the value passed in, and display it in the 3rd-party editor, using their APIs.

This will cause the item to display the form's values as expected, and will mean that when the user edits the value in the ckEditor, the standard change / changed handlers will fire, and the value will be updated within the DynamicForm.

Regards
Isomorphic Software

xu · 24 Jul 2013, 02:13

I want use this code for bind change event to invoke storeValue method , but it doesn't work!
Thanks very much!

Code:

protected native void loadCKEditor() /*-{
		if (!this.@com.smartgwt.sample.client.CKEditor::initialised) {
			var editorId = this.@com.smartgwt.sample.client.CKEditor::getID()()
					+ "_ta";
			$wnd.CKEDITOR.replace(editorId);
			this.@com.smartgwt.sample.client.CKEditor::initialised = true;
			
			
			$wnd.CKEDITOR.instances[ editorId ].onchange = function() {
				alert( 'test' );
			};
			$wnd.CKEDITOR.instances[ editorId ].on( 'change', function( env ) { alert( 'env' ) ; } );
			alert( $wnd.document.getElementById( editorId ) );
			
			$wnd.document.getElementById( editorId ).onchange = function() {
				alert( 'editor' );
			};
		}
	}-*/;

Announcement

About ckEditor integration

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment