You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

VRichTextArea.java 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  1. /*
  2. @VaadinApache2LicenseForJavaFiles@
  3. */
  4. package com.vaadin.terminal.gwt.client.ui.richtextarea;
  5. import com.google.gwt.core.client.Scheduler;
  6. import com.google.gwt.event.dom.client.BlurEvent;
  7. import com.google.gwt.event.dom.client.BlurHandler;
  8. import com.google.gwt.event.dom.client.ChangeEvent;
  9. import com.google.gwt.event.dom.client.ChangeHandler;
  10. import com.google.gwt.event.dom.client.KeyDownEvent;
  11. import com.google.gwt.event.dom.client.KeyDownHandler;
  12. import com.google.gwt.event.dom.client.KeyPressEvent;
  13. import com.google.gwt.event.dom.client.KeyPressHandler;
  14. import com.google.gwt.event.shared.HandlerRegistration;
  15. import com.google.gwt.user.client.Command;
  16. import com.google.gwt.user.client.DOM;
  17. import com.google.gwt.user.client.Element;
  18. import com.google.gwt.user.client.Timer;
  19. import com.google.gwt.user.client.ui.Composite;
  20. import com.google.gwt.user.client.ui.FlowPanel;
  21. import com.google.gwt.user.client.ui.Focusable;
  22. import com.google.gwt.user.client.ui.HTML;
  23. import com.google.gwt.user.client.ui.RichTextArea;
  24. import com.google.gwt.user.client.ui.Widget;
  25. import com.vaadin.terminal.gwt.client.ApplicationConnection;
  26. import com.vaadin.terminal.gwt.client.BrowserInfo;
  27. import com.vaadin.terminal.gwt.client.Util;
  28. import com.vaadin.terminal.gwt.client.ConnectorMap;
  29. import com.vaadin.terminal.gwt.client.ui.Field;
  30. import com.vaadin.terminal.gwt.client.ui.ShortcutActionHandler;
  31. import com.vaadin.terminal.gwt.client.ui.ShortcutActionHandler.ShortcutActionHandlerOwner;
  32. /**
  33. * This class implements a basic client side rich text editor component.
  34. *
  35. * @author Vaadin Ltd.
  36. *
  37. */
  38. public class VRichTextArea extends Composite implements Field, ChangeHandler,
  39. BlurHandler, KeyPressHandler, KeyDownHandler, Focusable {
  40. /**
  41. * The input node CSS classname.
  42. */
  43. public static final String CLASSNAME = "v-richtextarea";
  44. protected String id;
  45. protected ApplicationConnection client;
  46. boolean immediate = false;
  47. RichTextArea rta;
  48. private VRichTextToolbar formatter;
  49. HTML html = new HTML();
  50. private final FlowPanel fp = new FlowPanel();
  51. private boolean enabled = true;
  52. private int extraHorizontalPixels = -1;
  53. private int extraVerticalPixels = -1;
  54. int maxLength = -1;
  55. private int toolbarNaturalWidth = 500;
  56. HandlerRegistration keyPressHandler;
  57. private ShortcutActionHandlerOwner hasShortcutActionHandler;
  58. String currentValue = "";
  59. private boolean readOnly = false;
  60. public VRichTextArea() {
  61. createRTAComponents();
  62. fp.add(formatter);
  63. fp.add(rta);
  64. initWidget(fp);
  65. setStyleName(CLASSNAME);
  66. }
  67. private void createRTAComponents() {
  68. rta = new RichTextArea();
  69. rta.setWidth("100%");
  70. rta.addBlurHandler(this);
  71. rta.addKeyDownHandler(this);
  72. formatter = new VRichTextToolbar(rta);
  73. }
  74. public void setEnabled(boolean enabled) {
  75. if (this.enabled != enabled) {
  76. // rta.setEnabled(enabled);
  77. swapEditableArea();
  78. this.enabled = enabled;
  79. }
  80. }
  81. /**
  82. * Swaps html to rta and visa versa.
  83. */
  84. private void swapEditableArea() {
  85. if (html.isAttached()) {
  86. fp.remove(html);
  87. if (BrowserInfo.get().isWebkit()) {
  88. fp.remove(formatter);
  89. createRTAComponents(); // recreate new RTA to bypass #5379
  90. fp.add(formatter);
  91. }
  92. rta.setHTML(currentValue);
  93. fp.add(rta);
  94. } else {
  95. html.setHTML(currentValue);
  96. fp.remove(rta);
  97. fp.add(html);
  98. }
  99. }
  100. void selectAll() {
  101. /*
  102. * There is a timing issue if trying to select all immediately on first
  103. * render. Simple deferred command is not enough. Using Timer with
  104. * moderated timeout. If this appears to fail on many (most likely slow)
  105. * environments, consider increasing the timeout.
  106. *
  107. * FF seems to require the most time to stabilize its RTA. On Vaadin
  108. * tiergarden test machines, 200ms was not enough always (about 50%
  109. * success rate) - 300 ms was 100% successful. This however was not
  110. * enough on a sluggish old non-virtualized XP test machine. A bullet
  111. * proof solution would be nice, GWT 2.1 might however solve these. At
  112. * least setFocus has a workaround for this kind of issue.
  113. */
  114. new Timer() {
  115. @Override
  116. public void run() {
  117. rta.getFormatter().selectAll();
  118. }
  119. }.schedule(320);
  120. }
  121. void setReadOnly(boolean b) {
  122. if (isReadOnly() != b) {
  123. swapEditableArea();
  124. readOnly = b;
  125. }
  126. // reset visibility in case enabled state changed and the formatter was
  127. // recreated
  128. formatter.setVisible(!readOnly);
  129. }
  130. private boolean isReadOnly() {
  131. return readOnly;
  132. }
  133. // TODO is this really used, or does everything go via onBlur() only?
  134. public void onChange(ChangeEvent event) {
  135. synchronizeContentToServer();
  136. }
  137. /**
  138. * Method is public to let popupview force synchronization on close.
  139. */
  140. public void synchronizeContentToServer() {
  141. if (client != null && id != null) {
  142. final String html = rta.getHTML();
  143. if (!html.equals(currentValue)) {
  144. client.updateVariable(id, "text", html, immediate);
  145. currentValue = html;
  146. }
  147. }
  148. }
  149. public void onBlur(BlurEvent event) {
  150. synchronizeContentToServer();
  151. // TODO notify possible server side blur/focus listeners
  152. }
  153. /**
  154. * @return space used by components paddings and borders
  155. */
  156. private int getExtraHorizontalPixels() {
  157. if (extraHorizontalPixels < 0) {
  158. detectExtraSizes();
  159. }
  160. return extraHorizontalPixels;
  161. }
  162. /**
  163. * @return space used by components paddings and borders
  164. */
  165. private int getExtraVerticalPixels() {
  166. if (extraVerticalPixels < 0) {
  167. detectExtraSizes();
  168. }
  169. return extraVerticalPixels;
  170. }
  171. /**
  172. * Detects space used by components paddings and borders.
  173. */
  174. private void detectExtraSizes() {
  175. Element clone = Util.cloneNode(getElement(), false);
  176. DOM.setElementAttribute(clone, "id", "");
  177. DOM.setStyleAttribute(clone, "visibility", "hidden");
  178. DOM.setStyleAttribute(clone, "position", "absolute");
  179. // due FF3 bug set size to 10px and later subtract it from extra pixels
  180. DOM.setStyleAttribute(clone, "width", "10px");
  181. DOM.setStyleAttribute(clone, "height", "10px");
  182. DOM.appendChild(DOM.getParent(getElement()), clone);
  183. extraHorizontalPixels = DOM.getElementPropertyInt(clone, "offsetWidth") - 10;
  184. extraVerticalPixels = DOM.getElementPropertyInt(clone, "offsetHeight") - 10;
  185. DOM.removeChild(DOM.getParent(getElement()), clone);
  186. }
  187. @Override
  188. public void setHeight(String height) {
  189. if (height.endsWith("px")) {
  190. int h = Integer.parseInt(height.substring(0, height.length() - 2));
  191. h -= getExtraVerticalPixels();
  192. if (h < 0) {
  193. h = 0;
  194. }
  195. super.setHeight(h + "px");
  196. } else {
  197. super.setHeight(height);
  198. }
  199. if (height == null || height.equals("")) {
  200. rta.setHeight("");
  201. } else {
  202. /*
  203. * The formatter height will be initially calculated wrong so we
  204. * delay the height setting so the DOM has had time to stabilize.
  205. */
  206. Scheduler.get().scheduleDeferred(new Command() {
  207. public void execute() {
  208. int editorHeight = getOffsetHeight()
  209. - getExtraVerticalPixels()
  210. - formatter.getOffsetHeight();
  211. if (editorHeight < 0) {
  212. editorHeight = 0;
  213. }
  214. rta.setHeight(editorHeight + "px");
  215. }
  216. });
  217. }
  218. }
  219. @Override
  220. public void setWidth(String width) {
  221. if (width.endsWith("px")) {
  222. int w = Integer.parseInt(width.substring(0, width.length() - 2));
  223. w -= getExtraHorizontalPixels();
  224. if (w < 0) {
  225. w = 0;
  226. }
  227. super.setWidth(w + "px");
  228. } else if (width.equals("")) {
  229. /*
  230. * IE cannot calculate the width of the 100% iframe correctly if
  231. * there is no width specified for the parent. In this case we would
  232. * use the toolbar but IE cannot calculate the width of that one
  233. * correctly either in all cases. So we end up using a default width
  234. * for a RichTextArea with no width definition in all browsers (for
  235. * compatibility).
  236. */
  237. super.setWidth(toolbarNaturalWidth + "px");
  238. } else {
  239. super.setWidth(width);
  240. }
  241. }
  242. public void onKeyPress(KeyPressEvent event) {
  243. if (maxLength >= 0) {
  244. Scheduler.get().scheduleDeferred(new Command() {
  245. public void execute() {
  246. if (rta.getHTML().length() > maxLength) {
  247. rta.setHTML(rta.getHTML().substring(0, maxLength));
  248. }
  249. }
  250. });
  251. }
  252. }
  253. public void onKeyDown(KeyDownEvent event) {
  254. // delegate to closest shortcut action handler
  255. // throw event from the iframe forward to the shortcuthandler
  256. ShortcutActionHandler shortcutHandler = getShortcutHandlerOwner()
  257. .getShortcutActionHandler();
  258. if (shortcutHandler != null) {
  259. shortcutHandler
  260. .handleKeyboardEvent(com.google.gwt.user.client.Event
  261. .as(event.getNativeEvent()),
  262. ConnectorMap.get(client).getConnector(this));
  263. }
  264. }
  265. private ShortcutActionHandlerOwner getShortcutHandlerOwner() {
  266. if (hasShortcutActionHandler == null) {
  267. Widget parent = getParent();
  268. while (parent != null) {
  269. if (parent instanceof ShortcutActionHandlerOwner) {
  270. break;
  271. }
  272. parent = parent.getParent();
  273. }
  274. hasShortcutActionHandler = (ShortcutActionHandlerOwner) parent;
  275. }
  276. return hasShortcutActionHandler;
  277. }
  278. public int getTabIndex() {
  279. return rta.getTabIndex();
  280. }
  281. public void setAccessKey(char key) {
  282. rta.setAccessKey(key);
  283. }
  284. public void setFocus(boolean focused) {
  285. /*
  286. * Similar issue as with selectAll. Focusing must happen before possible
  287. * selectall, so keep the timeout here lower.
  288. */
  289. new Timer() {
  290. @Override
  291. public void run() {
  292. rta.setFocus(true);
  293. }
  294. }.schedule(300);
  295. }
  296. public void setTabIndex(int index) {
  297. rta.setTabIndex(index);
  298. }
  299. }