wiki:GeoGebraMobile/SetUp
Last modified 11 months ago Last modified on 07/02/11 18:50:58

GeoGebraMobile SetUp

Short Summary

GeoGebraMobile is a GWT (Google Web Toolkit) application. It compiles the Java source code to JavaScript (js), and optimizes it to get quicker across the wire, and get better performance concerning memory and execution of js code. The reason, why we've chosen this framework, that this way we can have the same code base (as the language of GWT is Java) but we can aim any browsers with the compiled js code.

The heart of the GeoGebraMobile is the html5 <canvas> tag, but it uses other html5 techniques as well (File Api, Drag & Drop, Offline application (not enabled yet)).

It is important to note, that not all of the Java classes are compatible with GWT. Here is the complete reference: ​http://code.google.com/intl/hu-HU/webtoolkit/doc/latest/RefJreEmulation.html. If you would like a feature, that is not implemented here, you have (at last) four choices:

  • Search the web for solution, maybe someone find out already (possibly it will be a .jar).
  • Write the source (or copy if permitted from somewhere) yourself.
  • use the <super-source> directive in the GeoGebraMobile.gwt.xml and take the java files in the described path (Eclipse will throw an error, but the compiler won't).

During development, it is important to remember, that it is a web application, and if decisions must be made, than they must follow the web application development rules. As the code written in Java, the behaviour is more js like, so use callbacks, remember load times of external resources (images, css, etc) use external css for style, and classnames in generated html-s if needed, just to name some :-). This is about the view part of the GeoGebraMobile off course, the kernel must stay as close as possible to the original.

Everything will be compiled to js that is under the 'client' package - so geogebra.geogebramobile.client.x (and if the super-source directive used then that directory too). You must place your package and source files under the 'client' package.

So if you ready:

Set up It

1; download eclipse

2; install subversive from Eclipse's repository. On Ubuntu, choose SVNKit x.x, Subversive SVN Team provider,Subversive SVN Connectors

3; install javacc (in the workspace/geogebramobile/.settings/sf.eclipse.javacc.prefs modify the path names after project's checkout) Alternatively and maybe more preferred to use in eclipse project > properties > javacc options > Global options tab, and browse for the jar files on your system. (I was new to eclipse when I did this, and maybe still I'm :-) Update site : ​http://eclipse-javacc.sourceforge.net/

4; Install the GWT plugin & SDK for eclipse from the ​http://dl.google.com/eclipse/plugin/3.6

(​http://code.google.com/intl/en-En/eclipse/docs/download.html)

5; checkout the ggjsviewer project from eclipse http://www.geogebra.org/svn/ choose branches, ggjsviewer

6; In the geogebra.geogebramobile.client.kernel.parser you should find some generated files. If not, then right click on the parser.jj, and choose the Compile it with JavaCC' In the generated ParserException.java you must correct the lines 91 and 134 like this:

protected String eol = "\n" ; /*System.getProperty("line.separator", "\n"); */

or simply

protected String eol = "\n";

The reason for this is that we can't reach for System, as we run in the browser, so we must give a value for that by hand. Also, if we would include the System in the super-source path (described earlier) then we must give all the System's methods and fields, as it replaces completely (we can't use them together : use the System incuded in GWT with lesser methods, or include the full System class in super source - I don't recommend that :-)) This counts for all super-sources class, if one used, they overwrite native ones.

7; Compile the project with GWT (red icon at top): This may take some times, as it compiles for all known browsers (5-6 permutations). You can compile for Firefox only with the directive in the GeogebraMobile.gwt.xml

<set-property name="user.agent" value="gecko1_8" />

And make sure that the

<!--<add-linker name="xs"/>-->

is commented out like this. (More on that later)

Although there will be some warnings, compilation should be successful. If any errors exist in the client package, the compiler will signal an error.

8; debug as web application

9; Open Firefox / Chrome

10; Copy the eclipse generated url in the browser. eg ​file:///C:/workspace/ggjsviewer/war/Ggjsviewer.html. On Linux, you can use only Firefox, and it will take some time until the application loads, so be patient (the Firefox will look like frozen during loading). This way you can debug your application than any other Java application. You can't debug internal JavaScript code however (the functions that has native keyword in their signature): you should use console.log() function, or browsers native debuggers for that.

Test it on server

The GWT compiles its files to the geogebramobile/war directory. When you run your application with the debugger, the Eclipse start an embedded webserver, and connects your compiled files with your Java code, so you can set break points and explore variables, etc. This take a while, and has limitations, for example long loading time, and you can't test in other browsers, if you haven't got a plugin for that special browser (and mostly you havent :-)). To test it on any external webserver, you need to things. As because the "same origin" policy, the main iFrame linker (default for GWT compiler) won't load your JavaScript files (that placed in the /war/geogebramobile/) from anywhere in the file system, we need a CrossSite linker (xs linker) to get JavaScript files that ends with the extension .js instead of the default extension .html (don't be fooled, they still JavaScript files). That files (the whole /war/geogebramobile) directory can be placed then to the web server (for example in the /war/www folder) and can be used from the html file needed to test. To get this .js files instead of .html, you need to comment the 

 <!--<set-property name="user.agent" value="gecko1_8" />-->

property, so we compile for all browsers, not only for Firefox, and uncomment the 

 <add-linker name="xs"/>

to get .js files and not html (this line enables the CrossSite linker).

After compile, you will get five permutations, and you can copy them to your web server - even locally. So your main layout should be: 

/var/www/test/myGeoGebraMobileToTest.html

/var/www/test/geogebramobile/*many-strongly-named-compiled-js-file.cache.js
/var/www/test/geogebramobile/geogebramobile.nocache.js <==must be referenced from the html.

And in the myGeoGebraMobile.html file you need a <script> tag that points to the:

<script type="text/javascript" src="geogebramobile/geogebramobile.nocache.js" />

This way, when you load the page in the browser (like http://localhost/test/myGeoGebraMobile.html ) you will get the functionality and look and feel that you can't test in the debugger of Eclipse.