Page History

...

In this tutorial we will build up a simple Image doodad, similar to the image thumbnails we are familiar with. We'll cover many editor features as we move through various versions of our doodad. We'll build up the code that can be found in org.waveprotocol.wave.client.editor.examples.img, if you'd like to follow along from scratch, simply replace that package in the examples with whatever package you're working in.

Set up the environment

Follow the instructions on setting up "Editor Test Harness" in Client Development Setup

...

1. Edit build.xml
   • Copy and paste <target name="editor_hosted" ...>...</target>
   • Rename
     • editor_hosted -> img_hosted
     • org.waveprotocol.wave.client.editor.harness.EditorTest -> org.waveprotocol.wave.client.editor.harness.tutorial.TestModule
   • The result looks like:

     Code Block
     xml xml
     <target name="img_hosted" depends="compile,compile_proto_gwt" description="Runs the editor harness through the GWT hosted mode server, for debugging in a JVM."> <java failonerror="true" fork="true" classname="com.google.gwt.dev.DevMode"> <classpath> <pathelement location="proto_gwt_src"/> <pathelement location="src"/> <path refid="libpath"/> </classpath> <jvmarg value="-Xmx512M"/> <jvmarg value="-agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=8001"/> <arg line="${gwt.args}"/> <arg line="-war war"/> <arg line="-startupUrl org.waveprotocol.wave.client.editor.tutorial.TestModule/EditorTest.html"/> <arg value="org.waveprotocol.wave.client.editor.tutorial.TestModule"/> </java> </target>

2. Start oophm
   • ant img_hosted
   • Open a browser and connect eclipse debugging session to oophm. See Client Development Setup
     • e.g. browser url http://127.0.0.1:8888/org.waveprotocol.wave.client.editor.tutorial.TestModule/EditorTest.html?gwt.codesvr=127.0.0.1:9997Image Removed

Get Going

Let's see what happens when we try to create one of our doodads before doing anything.

...