GeomajasForDummies WINXP EN PDF

GEOMAJAS FOR DUMMIES
GEOMAJAS
FOR DUMMIES
Copyright (c) 2012 by Stefan Hogas. This work is made available under the terms of the Creative Commons
Attribution-ShareAlike 3.0 license,
http://creativecommons.org/licenses/by-sa/3.0/. All brand names or trademarks mentioned in this document are the
property of their respective owners.
Acknowledgments
We like dummies!
Especially those who contributed to this Geomajas For Dummies guide.
It all started with Bram Minne during his internship with DFC Software Engineering.
Thanks, for getting this rolling!
First laboratory animals to test and review the initial versions were Zaneta Kaszta, Wout
Swartenbroeckx and Matthias Streulens (the Geomajas Community SysAdmin).
Thanks for making it better and better!
The most recent contributor to the Geomajas For Dummies is Stefan Hogas. He updated the
document to the latest Geomajas versions. Stefan also volunteered to be the Lead Maintainer of
this document. I guess that makes him our ber Dummy?!
Thanks for keeping this rolling, Stefan!
If we have forgotten to mention some contributors, it is not because their work wasn't good. It's just
us being forgetful. So please, Unknown Dummy, accept our deepest appreciation!
We hope this document will be helpful to you. If you find the document to be incomplete, incorrect
or unclear, please do help us making it better. We welcome your feedback and contributions at
geomajas4dummies@geomajas.org.
Dirk Frigne
Founding Father
i
TABLE OF CONTENTS
Chapter 1: Installing Apache Tomcat................................................................................................ 1
Step 1: Downloading and installing Java.......................................................................................1
Step 2: Downloading and installing Apache Tomcat...................................................................... 1
Step 3: Geomajas demo test........................................................................................................ 3
Chapter 2: Installing Maven and Eclipse.......................................................................................... 5
Step 1: Downloading and installing Maven................................................................................... 5
Step 2: Building a Maven Project.................................................................................................. 8
Step 3: Installing and configuring Eclipse....................................................................................10
3.1 m2eclipse: Maven in Eclipse ......................................................................................... 11
3.2 Subclipse....................................................................................................................... 12
3.3 m2eclipse extras............................................................................................................ 12
3.4 Checkstyle..................................................................................................................... 13
3.5 SVN team provider: ...................................................................................................... 13
3.5.4 Google's GWT Eclipse plug-in:................................................................................... 16
Step 4: Running/debugging with the Google Plug-in for Eclipse (embedded Jetty option)..........16
Chapter3. First adjustments........................................................................................................... 23
Step1. Modify the text in browser title bar................................................................................... 23
Step2. Modify Map label............................................................................................................. 24
Step3. Change the background color of the mainLayout............................................................26
Step4. Modify layer representation............................................................................................. 28
ii
TABLE OF FIGURES
Figure 1-Apache Tomcat Installation - choose full install.................................................................. 2

Figure 2-Apache Tomcat installation : provide username and password..........................................2
Figure 3-Apache Tomcat installation : installation folder for JRE...................................................... 3
Figure 4-Apache Tomcat - Select WAR file to deploy....................................................................... 4
Figure 5-Apache Tomcat-Application list...........................................................................................5
Figure 6-System Poperties window.................................................................................................. 5
Figure 7-Environment Variables window...........................................................................................6
Figure 8-Add M2 System Variable.................................................................................................... 6
Figure 9-Add JAVA_HOME System Variable.................................................................................... 7
Figure 10-Edit Path System Variable................................................................................................ 7
Figure 11-Check maven installation.................................................................................................. 8
Figure 12-Create project using GWT Maven archetype.................................................................... 9
Figure 13-Choose the correct archetype.......................................................................................... 9
Figure 14-Confirm Maven archetype installation configuration....................................................... 10
Figure 15-Maven Project successfully created............................................................................... 10
Figure 16-Eclipse Indigo IDE: Install New Software........................................................................ 11
Figure 17-Eclipse plug-in: Maven in Eclipse (m2eclipse)................................................................ 11
Figure 18-Eclipse plug-in: Subclipse.............................................................................................. 12
Figure 19-Eclipse plug-in: Maven in Eclipse extras (m2e-extras)................................................... 12
Figure 20-Eclipse plug-in: Checkstyle............................................................................................ 13
Figure 21-Eclipse plug-in: SVN team provider : Collaboration........................................................ 13
Figure 22-Eclipse plug-in: SVN team provider: Subversive SVN Team Provider (Incubation)........14
Figure 23-Eclipse plug-in: SVN team provider: Programming Languages...................................... 14
Figure 24-Eclipse plug-in: SVN team provider: JavaScript Development Tools..............................15
Figure 25-Eclipse plug-in: SVN team provider: Web, XML, and Java EE Development.................15
Figure 26-Eclipse plug-in: Google GWT......................................................................................... 16
Figure 27-Eclipse: Import Maven Project........................................................................................ 17
iii

Figure 28-Eclipse: Import Maven Project : choose your project...................................................... 17
Figure 29-Eclipse: Configure Google Web Toolkit settings............................................................. 18
Figure 30-Eclipse: Configure Google Web Toolkit settings - Web Toolkit........................................ 18
Figure 31-Eclipse: Configure Google Web Toolkit settings - Web Application.................................19
Figure 32-Eclipse: Debug Configurations....................................................................................... 19
Figure 33-Eclipse: New Java Application........................................................................................ 20
Figure 34-Eclipse: JettyRunner as main class................................................................................ 20
Figure 35-Eclipse: Running the GWT application........................................................................... 21
Figure 36-Eclipse: Running the GWT application - URL................................................................. 22
Figure 37-Browser: Geomajas demo working................................................................................. 22
Figure 38-Eclipse: edit src/main/webapp/index.html....................................................................... 23
Figure 39-Browser: modified text in title bar................................................................................... 24
Figure 40-Eclipse: Edit /src/main/java/geomajas/client/Application.java......................................... 25
Figure 41-Browser: modified map label.......................................................................................... 26
Figure 42-Eclipse: Change the background color of the mainLayout..............................................27
Figure 43-Browser: modified mainLayout background color........................................................... 27
Figure 44-Eclipse: Change layer color............................................................................................ 29
Figure 45-Browser: Change layer color.......................................................................................... 29
iv
This tutorial is organized in Chapters and steps. Chapter 1 will go you through Apache
Tomcat installation, Chapter2 will deal with Apache Maven (software project management and
comprehension too) and Eclipse (Java development environment). We will also make use of GWT
(Google Web Toolkit - development toolkit for building and optimizing complex browser-based
applications).
This tutorial was made using the latest versions (as of May 2012) of any of the software
used. Anyway, for production purposes, Java 7 is not yet fully supported. Please use Java 5 or
Java 6 instead.
v
Chapter 1: Installing Apache Tomcat

We will start installing Apache Tomcat. If you already heave Apache Tomcat installed, you
can skip this and jump to chapter 2.
Step 1: Downloading and installing Java

There are two Java components which we are now interested in: JRE (Java Runtime
Environment) and JDK (Java Development Kit). We will need both, but in this Chapter we just have
to care about JRE which is required in order for Apache Tomcat to run.
Before starting, please check if you dont have JRE already installed. You can do a quick
check by looking in C:\Program Files \Java (on Windows XP) or C:\Program Files (x86)\Java (on
Windows7) and see if there is a folder inside called jreX (where X is the version of JRE).Please
remember this path as this is the installation folder for java. This is a piece of information will need
it later.
Usually its better to have the latest version of Java, so lets download and install it. Start by
pointing your browser to http://www.oracle.com/technetwork/java/javase/downloads/index.html and
download from here the latest version of JDK (Java Development Kit which includes JRE). Click on
this picture:
and get the latest version for your platform. Usually you are on 32 bits platform so the magic file is
jdk-7u3-windows-i586.exe (7u3 is the current version and i586 stands for an 32 bits system). After
downloading, double click on the file and install Java (its a simple Run-Next-Continue-Finish
procedure dont change anything, leave the default options). You can check now in the installation
folder for java and see that two folders are inside : jdk1.7.0_03 and jre7 (versions according to the
downloaded installation kit).
Step 2: Downloading and installing Apache Tomcat

Now that we have JRE installed we can start to download and install Apache Tomcat.
The easiest way is to simply download and run the 32-bit/64-bit Windows Service Installer of the
latest version on Apache Tomcat. In my case the latest version of Apache Tomcat is 7 and the
download link is :
http://mirrors.hostingromania.ro/apache.org/tomcat/tomcat-7/v7.0.26/bin/apache-tomcat-7.0.26.exe
Run this file if you agree with the license terms and switch to the Full type of install so all the
optional components are checked in the following screen:
-1Copyright (c) 2012 by Stefan Hogas. This work is made available under the terms of the Creative Commons

Figure 1-Apache Tomcat Installation - choose full install
If you now click on Next you get the following screen:
Figure 2-Apache Tomcat installation : provide username and password
The only think you have to do here is to fill a User Name, provide a Password for it and
eventually tick on the checkbox for Create shortcuts for all users. Leave everything as is.
Normally you dont need to change anything. Click on Next.

Figure 3-Apache Tomcat installation : installation folder for JRE
As I mentioned before, Apache Tomcat needs JRE, and more than this, the installation
procedure detects it and let us, eventually, change the path to it. We havent changed anything
during Java installation so we just click again on Next button. The next screen will prompt us for
the installation location of Apache Tomcat (C:\Program Files\Apache Software Foundation\Tomcat
7.0), we will live it as it is and proceed to Install. After installation Apache Tomcat from now on
will start automatically on computer startup. This is one less worry.
Your Tomcat is now accessible via : http://localhost:8080/
Step 3: Geomajas demo test

First and foremost you will need to download the demo via the either Geomajas website or
SourceForge.I used the last one, looked for the latest version and downloaded the appropriate file.
The file you will get is a "WAR" file. This kind of file is actually similar to a compressed folder but for
web applications.
You need no special program to learn in order to be able to continue. All you have to do is
upload the file to your Tomcat. To do this, go to your Tomcat via your browser. Simply follow this
link: http://localhost:8080/ , go to Manager App (http://localhost:8080/manager/html) and login with
the User Name and Password provided during Apache Tomcat installation.
Scroll down and you will see the following:

Figure 4-Apache Tomcat - Select WAR file to deploy
Browse for the war file downloaded and then press Deploy.
A word of caution!
If your war file is larger than 50MB you will get an error page. By default, Apache Tomcat 7 limits
the size of the war files to deploy to 50 MB. To increase this value, go to C:\Program Files\Apache
Software Foundation\Tomcat 7.0\webapps\manager\WEB-INF right click on the file web.xml and
open it with Notepad. Look for:
<max-file-size>52428800</max-file-size>
<max-request-size>52428800</max-request-size>
and replace with
<max-file-size>104857600</max-file-size>
<max-request-size>104857600</max-request-size>
Now you will be able to deploy war files up to 100 MB in size
After the file was deployed you will see above on the same page Geomajas listed in the
Application list. All you need is to click on the name and you can test Geomajas! (In my case I used
geomajas-gwt-example-1.8.0.war

Figure 5-Apache Tomcat-Application list
Chapter 2: Installing Maven and Eclipse

Step 1: Downloading and installing Maven
Maven can be downloaded from http://maven.apache.org/download.html. Just look for the
latest version and download the Binary zip. Unzip the archive and copy the resulting folder (mine
is apache-maven-3.0.4) in C:\Program Files\Apache Software Foundation\. Just for the records,
at this path I have now two folders Tomcat 7.0 and apache-maven-3.0.4
Now its time to add in the system variables some values. To do this press the WIN key and
the PAUSE key (or right click on My Computer and choose Properties from the contextual menu.
Figure 6-System Poperties window
In the System Properties go to Advance tab and click on Environment Variables button on
the lower left corner.

Figure 7-Environment Variables window
On the System variables click New and add the following :

Variable name : M2
Variable value : C:\Program Files\Apache Software Foundation\apache-maven-3.0.4
Figure 8-Add M2 System Variable

Press OK and again New and add:
Variable name : JAVA_HOME
Variable value : C:\Program Files\Java\jdk1.7.0_03
Figure 9-Add JAVA_HOME System Variable
Next to this, also in the System Variables, scroll down to Path and then click Edit. Add at
the end
;%JAVA_HOME%\bin;%M2%\bin
and then press OK third times to close all configuration windows.
Figure 10-Edit Path System Variable

Now open a command prompt (Start Run and type cmd on Windows XP and Start and
type cmd on Windows7). On the command prompt opened type
mvn version.
If you have a result of this type :
Figure 11-Check maven installation
Everything is OK till now.
Step 2: Building a Maven Project.

In C:\ create a folder named GeomajasEclipse and from the Command Prompt type
cd c:\GeomajasEclipse
to make this folder the current directory.
Using Maven, you can now create a template project, called the Geomajas GWT
Application Archetype.
At the command prompt use:
mvn archetype:generate
-DarchetypeCatalog=http://files.geomajas.org/archetype-catalog.xml
if we want to create a template project using the latest stable release, or
mvn archetype:generate
-DarchetypeCatalog=http://files.geomajas.org/archetype-latest.xml
if we want to create a project using the latest snapshot
Lets use the first option.

Figure 12-Create project using GWT Maven archetype
We will need the Geomajas GWT application archetype so type 1 and press Enter.
Figure 13-Choose the correct archetype
Next maven asks for the groupId: Often the package name is used (i.e. geomajas)
Next maven asks for the artifactId: This represents the name for your application. (i.e. myapp)
Next maven asks for version for your application. It suggests 1.0-SNAPSHOT we agree with
that, so just press Enter
Next maven asks for package suggesting groupID value (geomajas in our case). Just press
Enter.

Figure 14-Confirm Maven archetype installation configuration
We are now asked for a confirmation of what weve configured till now, we type Y (Yes) and
our project is build.
Figure 15-Maven Project successfully created
Well leave this for the moment and go further to step 3 of this chapter.
Step 3: Installing and configuring Eclipse

To begin, install 'Eclipse IDE for Java Developers ".This can be found at
http://www.eclipse.org/downloads/ Choose the right version for you, usually will be the Windows
32 Bit version.
The current version is Eclipse Indigo (3.7.2)
Unzip the archive and copy the eclipse folder to c: .From c:\eclipse run eclipse.exe
After getting around with eclipse you need to install some plugins for eclipse. This is very
easy to do. You go to the menu 'Help' and click 'Install new software and you can go through
certain links to the correct software.
- 10 Copyright (c) 2012 by Stefan Hogas. This work is made available under the terms of the Creative Commons

Figure 16-Eclipse Indigo IDE: Install New Software
3.1 m2eclipse: Maven in Eclipse
The goal of the Eclipse m2eclipse project is to provide Apache Maven support in the
Eclipse IDE, making it easier to edit Maven's pom.xml, run a build from the IDE and much more
m2eclipse - http://m2eclipse.sonatype.org/sites/m2e
Figure 17-Eclipse plug-in: Maven in Eclipse (m2eclipse)

3.2 Subclipse
Subclipse is an Eclipse plug-in that provides the functionality to interact with a Subversion server,
and to manipulate a project on a Subversion server in the Eclipse environment.
Subclipse - http://subclipse.tigris.org/update_1.8.x
Figure 18-Eclipse plug-in: Subclipse
3.3 m2eclipse extras
m2eclipse extras provide Maven integration for : M2Eclipse, Eclipse Extras, Eclipse WTP,
Subclipse, OSGi Development. (*Note - DO NOT install Web Application Runner)
m2eclipse extras - http://m2eclipse.sonatype.org/sites/m2e-extras
Figure 19-Eclipse plug-in: Maven in Eclipse extras (m2e-extras)

3.4 Checkstyle
The eclipse-cs Checkstyle plug-in integrates the well-known source code analyzer Checkstyle into
today's leading IDE Eclipse
Checkstyle - http://eclipse-cs.sf.net/update/
Figure 20-Eclipse plug-in: Checkstyle
3.5 SVN team provider:
http://download.eclipse.org/releases/indigo
3.5.1 Under 'Collaboration
Figure 21-Eclipse plug-in: SVN team provider : Collaboration

Choose Subversive SVN Team Provider (Incubation)
Figure 22-Eclipse plug-in: SVN team provider: Subversive SVN Team Provider
(Incubation)
3.5.2 Under Programming Languages
Figure 23-Eclipse plug-in: SVN team provider: Programming Languages
Choose JavaScript Development Tools

Figure 24-Eclipse plug-in: SVN team provider: JavaScript Development Tools
3.5.3 Choose and select Web, XML, and Java EE Development

Figure 25-Eclipse plug-in: SVN team provider: Web, XML, and Java EE Development
3.5.4 Google's GWT Eclipse plug-in:
Google Plugin for Eclipse is a set of software development tools that enables Java
developers to quickly design, build, optimize, and deploy cloud-based applications.
Google's GWT Eclipse plug-in : http://dl.google.com/eclipse/plugin/3.7
Figure 26-Eclipse plug-in: Google GWT
Step 4: Running/debugging with the Google Plug-in for Eclipse (embedded Jetty option)
Now everything is prepared for the project to begin. We will start by importing the maven
project created at Step 2: Building a Maven Project.
Run Eclipse, choose your workspace folder to C:\GeomajasEclipse, and from the File
menu choose Import.

Figure 27-Eclipse: Import Maven Project
Click on Next at browse for your project. This should be in C:\GeomajasEclipse\myapp

Figure 28-Eclipse: Import Maven Project : choose your project
Press Finish and wait for Eclipse to build the project.

In the Project Explorer panel you will see your project myapp imported in Eclipse. Right
click on myapp and choose Google/Web Toolkit Settings
Figure 29-Eclipse: Configure Google Web Toolkit settings
Under Web Toolkit check Use Google Web Toolkit and Use specific SDK
Figure 30-Eclipse: Configure Google Web Toolkit settings - Web Toolkit

Under Web Application above check This project has a WAR directory and
Launch and deploy from this directory (disabled because this is a Maven
project). Click OK and wait for the project to be built. Normally it wont take long.
Figure 31-Eclipse: Configure Google Web Toolkit settings - Web Application
Right click again on myapp and choose Debug as/Debug Configurations
Figure 32-Eclipse: Debug Configurations

Click on Java Application and choose New
Figure 33-Eclipse: New Java Application
A new_configuration window for a Java Application will be opened. Near the Main class
field click Search button and in the Select Main Type window type Jetty. Choose from the
Matching items JettyRunner org.geomajas.jetty and then click OK. Click then Close.
Figure 34-Eclipse: JettyRunner as main class
Its now time to run our project. Right click on myapp, choose Debug As/Web application
Figure 35-Eclipse: Running the GWT application
Wait for a while, and at the end you will have a URL on the right hand of the Eclipse
window.

Figure 36-Eclipse: Running the GWT application - URL
Double click on the link and Voila! we have the Geomajas demo working!
Figure 37-Browser: Geomajas demo working
Chapter3. First adjustments

We will try in this chapter to make some minor tweaking to our application. Please
remember that we are running in debugging mode with the Jetty servlet container so any changes
in code will be quick reflected in our application.
Step1. Modify the text in browser title bar.

Looking back on the top of Figure 37 we notice in the title bar some text GWT web
application using Geomajas and for some reason we would like to change or at least modify this.
For this, lets go back to Eclipse (last time we were here the URL for the application was
generated.)
In Project Explorer look for he file called index.html. You will find it under
myapp/src/main/webapp/index.html
Double click on the file and you will see a new window with a lot of cod. Dont be scared as we are
going to go through it for the moment. Search for
<title>GWT web application using Geomajas</title>
and change with
<title>GWT web application using Geomajas-For Dummies</title>
(actually I just added For Dummies)
Figure 38-Eclipse: edit src/main/webapp/index.html
Lets say we are sure of what we are doing and save the project (File/Save). Go back in
your browser and press the Refresh button. Please notice the new text in the browser title bar.

Figure 39-Browser: modified text in title bar
Step2. Modify Map label

Now that we are telling the world that our project is running, we would also like tell the
others about this major step. So, Hello World its not enough. But who did it?
Back to Eclipse again and look in
myapp/src/main/java/geomajas/client/
for Application.java. Double click and search for
Label title = new Label("Geomajas GWT:Hello world");
change it to
Label title = new Label("Geomajas GWT:Hello world, Stefan was here");
and save the project.

Figure 40-Eclipse: Edit /src/main/java/geomajas/client/Application.java
Go back to you browser and press Refresh. OK, now everybody will know!

Figure 41-Browser: modified map label
Step3. Change the background color of the mainLayout.

Ok, we are now happy with the text, but what about colors? We dont like that grey around
the map and panels and we would like to change this.
Again in Eclipse, the same Application.java and look for
VLayout mainLayout = new VLayout();
mainLayout.setWidth100();
mainLayout.setHeight100();
mainLayout.setBackgroundColor("#A0A0A0");
Ok, so there is no green, red and blue written here, instead we have #A0A0A0. I was
never good in colors (who told me this before?) but this is too much. Actually, this the color code in
hexadecimal. Go to http://www.2createawebsite.com/build/hex-colors.html#colorgenerator, pick a
color we like and copy the corresponding Hex code. Now we will have
VLayout mainLayout = new VLayout();
mainLayout.setWidth100();
mainLayout.setHeight100();
mainLayout.setBackgroundColor("#46B849");
Again Save and see whats happening.

Figure 42-Eclipse: Change the background color of the mainLayout
Back to your browser and press Refresh

Figure 43-Browser: modified mainLayout background color
Step4. Modify layer representation.

Now its time to look a little bit at the map itself. We have a polygon layer representing world
countries represented with different colors (a color scheme) according to country population. For
some reason we would like to represent in an intuitive way which countries have their population
up to 100mil, or between 50-100mil, 10-50 mil and less than 10 million inhabitants.
Lets try to put in evidence the countries with the population between 10 and 50 mil by
changing the corresponding color.
Back in Eclipse, look for layerCountries.xml in
myapp\src\main\webapp\WEB-INF
Double click and change from Design to Source (there are two tabs at the bottom part).
Here, look for:
<bean class="org.geomajas.configuration.FeatureStyleInfo">
<property name="name" value="Countries: population > 10mil"/>
<property name="formula" value="(PEOPLE > 10000000)"/>
<property name="fillColor" value="#9999FF"/>
<property name="fillOpacity" value=".5"/>
<property name="strokeColor" value="#000033"/>
<property name="strokeOpacity" value=".8"/>
<property name="strokeWidth" value="1"/>
</bean>
and change the fillColor with something at your choice. Mine look like this
<bean class="org.geomajas.configuration.FeatureStyleInfo">
<property name="name" value="Countries: population > 10mil"/>
<property name="formula" value="(PEOPLE > 10000000)"/>
<property name="fillColor" value="#D52424"/>
<property name="fillOpacity" value=".5"/>
<property name="strokeColor" value="#000033"/>
<property name="strokeOpacity" value=".8"/>
<property name="strokeWidth" value="1"/>
</bean>
Press again Save.

Figure 44-Eclipse: Change layer color
Back to your browser and press Refresh

Figure 45-Browser: Change layer color

This tutorial is just a brief go through Geomajas installation and (very) basic customization.
For a more in-depth documentation please visit Geomajas website www.geomajas.org.
and the continuously developing documentation section
http://www.geomajas.org/documentation/main.

GeomajasForDummies WINXP EN PDF

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

GeomajasForDummies WINXP EN PDF

Hochgeladen von

Copyright:

Verfügbare Formate

GEOMAJAS FOR DUMMIES