Tuesday, December 12, 2006

Lazy loading FCKeditor in GWT application

Principle is On-demand script. My sample utils (not tested!) class for create FCKeditor when is neaded. This class is used in google GWT application, and it is not tested but show principle.
package net.ct.sajt.client.ui;
import java.util.ArrayList;
import java.util.List;
import net.ct.sajt.client.Log;

import com.google.gwt.user.client.Random;

import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.HTML;


/**
 * Sampl class for load FCK editor.
 * Usage: 
 * 
 *  ... new HTML("<textarea id="\te\" name="\te\" textarea>..."); 
 * FCKEditorUtil.createScript("http://localhost:8080/web/js/FCKeditor/fckeditor.js", "34534", true);
 * final Timer timer = new Timer() {
 *   public void run() {
 *    if(FCKEditorNews.show()) { // while browser load script
 *     cancel();
 *     return;
 *    }            
 *   }   
 * }; 
 * timer.scheduleRepeating(100);
 */
public class FCKEditorUtil {

/**
  * Return html content from texarea.

  * 
  * @param editorInstance
  *            name of FCKEditor instance.
  * @return html content
  */
public static native String getContent(String editorInstance) /*-{  

  return $wnd.FCKeditorAPI.GetInstance(editorInstance).GetXHTML();
 }-*/;

/**
  * Show editor if is loaded and return true, otherwise false.
  */
private static native boolean show() /*-{

  if($wnd.FCKeditor) {
   var oFCKeditor = new $wnd.FCKeditor( 'te' ) ;
   oFCKeditor.BasePath = "http://localhost:8080/web/js/FCKeditor/" ;
   oFCKeditor.ToolbarSet = 'Basic';
   oFCKeditor.Config["CustomConfigurationsPath"] = "http://localhost:8080/web/js/FCKeditor/news_config.js?" + ( new Date() * 1 ) ;  // not cache while develop        
   oFCKeditor.ReplaceTextarea() ;
   $wnd.oFCKeditor = oFCKeditor;
   return true;
  }else {
   return false;
  }

 }-*/;

// contein script urls for prevent that not two same JS script load twice.
private static List cacheScript = new ArrayList();



/**
  * Create < script src=.... > if not exist alredy. 
  * @param src javascript url
  * @param id any ID for <script id=...
  */
public static void createScript(String src, String id) {

if (cacheScript.contains(src)) {
return;

}
createSrc(src, id);
cacheScript.add(src);

}



private static native void createSrc(String src, String id) /*-{   

   var head = $doc.getElementsByTagName("head")[0];
   var  script = $doc.createElement('script');    
   script.id = id;
   script.type = 'text/javascript';
   script.src = src;
  
   //Indicates that the script is not going to generate any document content. The browser can continue parsing and drawing the page  
   //script.defer = true;
   head.appendChild(script);       
  }-*/;

/**

  * Create <script></script> tag.
  * 
  * @param src javascript url
  * @param id
  * @param noCache if true than add random number to end of script (e.g. src + "?234534" )
  * because browser cache javascipt.
  */
public static void createScript(String src, String id, boolean noCache) {

if (noCache) {
createSrc(src + "?" + Random.nextInt(), id);

}

}
} 
 
 
 
SemGen 

No comments: