This document discusses using OL4JSF, an OpenLayers wrapper for JavaServer Faces (JSF), to build geospatial applications. OL4JSF allows developers to integrate OpenLayers maps and features into JSF web applications, providing benefits like tight IDE integration, reusable interface components, and separating presentation logic from data processing. The document provides examples of using OL4JSF components like <m:map> and <m:vectorLayer> to display WMS and vector layers on a map within a JSF application.

1. Construindo o Mundo Digital
Facilitando o desenvolvimento de aplicações
geoespaciais sobre a plataforma JEE
Por Robert Anderson <robert@code2.com.br>

2. Construindo o Mundo Digital
Slide 2

3. Construindo o Mundo Digital
Slide 3

4. Construindo o Mundo Digital
 API Javascript para plotagem de mapas em
navegadores
 Independência de tecnologias server-side
 Implementa diversos padrões OGC
(WMS,WFS,...)
 Google, Yahoo,...
Slide 4

5. Construindo o Mundo Digital
Slide 5

6. Construindo o Mundo Digital
<script type="text/javascript">
// making this a global variable so that it is accessible for
// debugging/inspecting in Firebug
var map = null;
function init(){
map = new OpenLayers.Map('map');
var ol_wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}
);
var jpl_wms = new OpenLayers.Layer.WMS(
"NASA Global Mosaic",
"http://t1.hypercube.telascience.org/cgi-bin/landsat7",
{layers: "landsat7"}
);
Slide 6

7. Construindo o Mundo Digital
var dm_wms = new OpenLayers.Layer.WMS(
"DM Solutions Demo",
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{
layers:
"bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace",
transparent: "true", format: "image/png"},
{
minResolution: 0.17578125,
maxResolution: 0.703125
}
);
map.addLayers([ol_wms, jpl_wms, dm_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
</script>
Slide 7

8. Construindo o Mundo Digital
 Baixa integração com IDEs
 Dificuldade de depuração/manutenção
 Grande verbosidade
 Conhecimento da API é uma OBRIGAÇÃO
Slide 8

9. Construindo o Mundo Digital
 Separação entre a camada de apresentação e
a lógica envolvida no processamento dos
dados propriamente ditos
 Forte integração com ambientes de
desenvolvimento (IDE)
 Reusabilidade de componentes de interface
Slide 9

10. Construindo o Mundo Digital
 Criado em 2009
 Atualmente compatível com JSF 2.0
 Une o melhor dos dois mundos
 Recursos do OpenLayers
 Encapsulamento do JSF
 https://ol4jsf.dev.java.net
 Licença Apache v2.0
Slide 10

11. Construindo o Mundo Digital
Slide 11

12. Construindo o Mundo Digital
<m:map width="512px" height="256px">
<m:wmsLayer name="OpenLayers WMS"
url="http://labs.metacarta.com/wms/vmap0" params="{layers:'basic'}"
/>
<m:wmsLayer name="NASA Global Mosaic"
url="http://t1.hypercube.telascience.org/cgi-bin/landsat7"
params="{layers:'landsat7'}"/>
<m:wmsLayer name="DM Solutions Demo"
url="http://www2.dmsolutions.ca/cgi-
bin/mswms_gmap"
params="{layers:
'bathymetry,land_fn,park,drain_fn,drainage,prov_bound,fedlimit,rail
,road,popplace',
transparent: 'true', format: 'image/png'}"
options="{
minResolution: 0.17578125,
maxResolution: 0.703125
}"/>
<m:layerSwitcherControl />
</m:map>
Slide 12

13. Construindo o Mundo Digital
Brincadeira! É só aquilo mesmo.
Slide 13

14. Construindo o Mundo Digital
 Alta integração com IDEs
 Facilita depuração/manutenção
 Baixa verbosidade
 Conhecimento da API é “PONTUAL”
 Arquitetura flexível (“Não engessa”)
Slide 14

15. Construindo o Mundo Digital
Slide 15

16. Construindo o Mundo Digital
Slide 16
Janela de Propriedades

17. Construindo o Mundo Digital
Slide 17
Palheta de
Componentes

18. Construindo o Mundo Digital
Slide 18
Assistente de Código

19. Construindo o Mundo Digital
Slide 19
Editor Visual

20. Construindo o Mundo Digital
Slide 20

21. Construindo o Mundo Digital
Slide 21

22. Construindo o Mundo Digital
<m:map width="512px" height="256px"
jsVariable="map">
<m:wmsLayer name="0 buffer: OpenLayers WMS"
url="http://labs.metacarta.com/wms/vmap0"
params="{layers: 'basic'}, {'buffer':0}">
</m:wmsLayer>
<m:wmsLayer name="1 buffer: OpenLayers WMS"
url="http://labs.metacarta.com/wms/vmap0"
params="{layers: 'basic'}, {'buffer':1}">
</m:wmsLayer>
<m:wmsLayer name="4 buffer: OpenLayers WMS"
url="http://labs.metacarta.com/wms/vmap0"
params="{layers: 'basic'}, {'buffer':4}">
</m:wmsLayer>
<m:layerSwitcherControl>
</m:layerSwitcherControl>
<m:script>map.setCenter(new OpenLayers.LonLat(0, 0), 2);</m:script>
</m:map>
Slide 22
Variável JS
Global

23. Construindo o Mundo Digital
<m:map width="512px" height="256px"
jsVariable="map">
<m:wmsLayer name="0 buffer: OpenLayers WMS"
url="http://labs.metacarta.com/wms/vmap0"
params="{layers: 'basic'}, {'buffer':0}">
</m:wmsLayer>
<m:wmsLayer name="1 buffer: OpenLayers WMS"
url="http://labs.metacarta.com/wms/vmap0"
params="{layers: 'basic'}, {'buffer':1}">
</m:wmsLayer>
<m:wmsLayer name="4 buffer: OpenLayers WMS"
url="http://labs.metacarta.com/wms/vmap0"
params="{layers: 'basic'}, {'buffer':4}">
</m:wmsLayer>
<m:layerSwitcherControl>
</m:layerSwitcherControl>
<m:script>map.setCenter(new OpenLayers.LonLat(0, 0), 2);</m:script>
</m:map>
Slide 23
Utilização da
variável

24. Construindo o Mundo Digital
Slide 24

25. Construindo o Mundo Digital
<h:form prependId="false">
<h:panelGroup id="panelMap" layout="block">
<m:map width="512px" height="256px"
renderOnWindowLoad="false">
...
<m:vectorLayer name="Features"
value="#{vectorBean.randomWkt}" />
<m:layerSwitcherControl />
</m:map>
</h:panelGroup>
<h:commandButton value="Random WKT"
action="#{vectorBean.randomWKTFromList}">
<f:ajax render="panelMap" />
</h:commandButton>
</h:form>
Slide 25

26. Construindo o Mundo Digital
<h:form prependId="false">
<h:panelGroup id="panelMap" layout="block">
<m:map width="512px" height="256px"
renderOnWindowLoad="false">
...
<m:vectorLayer name="Features"
value="#{vectorBean.randomWkt}" />
<m:layerSwitcherControl />
</m:map>
</h:panelGroup>
<h:commandButton value="Random WKT"
action="#{vectorBean.randomWKTFromList}">
<f:ajax render="panelMap" />
</h:commandButton>
</h:form>
Slide 26

27. Construindo o Mundo Digital
<h:form prependId="false">
<h:panelGroup id="panelMap" layout="block">
<m:map width="512px" height="256px"
renderOnWindowLoad="false">
...
<m:vectorLayer name="Features"
value="#{vectorBean.randomWkt}" />
<m:layerSwitcherControl />
</m:map>
</h:panelGroup>
<h:commandButton value="Random WKT"
action="#{vectorBean.randomWKTFromList}">
<f:ajax render="panelMap" />
</h:commandButton>
</h:form>
Slide 27

28. Construindo o Mundo Digital
@ManagedBean
@RequestScoped
public class VectorBean {
private String randomWkt = "POINT
(0 0)";
public String getRandomWkt() {
return randomWkt;
}
}
Slide 28

29. Construindo o Mundo Digital
Slide 29

30. Construindo o Mundo Digital
<h:form prependId="false">
<h:panelGroup id="panelMap" layout="block">
<m:map width="512px" height="256px"
renderOnWindowLoad="false">
...
<m:vectorLayer name="Features"
value="#{vectorBean.randomWkt}" />
<m:layerSwitcherControl />
</m:map>
</h:panelGroup>
<h:commandButton value="Random WKT"
action="#{vectorBean.randomWKTFromList}">
<f:ajax render="panelMap" />
</h:commandButton>
</h:form>
Slide 30

31. Construindo o Mundo Digital
@ManagedBean
@RequestScoped
public class VectorBean {
private List<String> wkts = new ArrayList<String>();
private String randomWkt = "POINT (0 0)";
public String getRandomWkt() {
return randomWkt;
}
public VectorBean() {
//Adiciona geometrias à lista
}
public String randomWKTFromList() {
int rnd = (int) (Math.random() * ((wkts.size() - 1) + 1) );
randomWkt = wkts.get(rnd);
return null;
}
}
Slide 31

32. Construindo o Mundo Digital
<h:form prependId="false">
<h:panelGroup id="panelMap" layout="block">
<m:map width="512px" height="256px"
renderOnWindowLoad="false">
...
<m:vectorLayer name="Features"
value="#{vectorBean.randomWkt}" />
<m:layerSwitcherControl />
</m:map>
</h:panelGroup>
<h:commandButton value="Random WKT"
action="#{vectorBean.randomWKTFromList}">
<f:ajax render="panelMap" />
</h:commandButton>
</h:form>
Slide 32

33. Construindo o Mundo Digital
 Componentes de entrada
 Suporte a converters
 Eventos
 Proxy framework
Slide 33

34. Construindo o Mundo Digital
<?xml version="1.0" encoding="UTF-8"?>
<ol4jsf-proxy>
<use-environment id="desenv" />
<environment id="desenv">
<description>Development Environment.</description>
<resources>
<resource name="wfs">
<url>http://demo.opengeo.org/geoserver/wfs</url>
</resource>
<resource name="wms">
<url>http://demo.opengeo.org/geoserver/wms</url>
</resource>
</resources>
</environment>
</ol4jsf-proxy>
Slide 34

35. Construindo o Mundo Digital
<?xml version="1.0" encoding="UTF-8"?>
<ol4jsf-proxy>
<use-environment id="desenv" />
<environment id="desenv">
<description>Development Environment.</description>
<resources>
<resource name="wfs">
<url>http://demo.opengeo.org/geoserver/wfs</url>
</resource>
<resource name="wms">
<url>http://demo.opengeo.org/geoserver/wms</url>
</resource>
</resources>
</environment>
</ol4jsf-proxy>
Slide 35

36. Construindo o Mundo Digital
...
<m:featureInfoPopup
url="#{facesContext.externalContext.
requestContextPath}/OL4JSFProxy/wms"
/>
...
Slide 36

37. Construindo o Mundo Digital
 https://ol4jsf.dev.java.net/downloads/ol4jsf2
-examples.war
Slide 37

38. Construindo o Mundo Digital
 https://ol4jsf.dev.java.net/downloads/ol4jsf-
core-2.0-SNAPSHOT.jar
 Adicione ao seu classpath (/WEB-INF/lib)
 Só isso? Sim! Só isso.
Slide 38

39. Construindo o Mundo Digital
<dependency>
<groupId>org.ol4jsf</groupId>
<artifactId>ol4jsf-core</artifactId>
<version>2.0-SNAPSHOT</version>
<scope>compile</scope>
</dependency>
Slide 39

40. Construindo o Mundo Digital
 Projeto da fundação Bertelsmann-Stiftung.de
 Atlas on-line para educação infantil
 OL4JSF, Primefaces, AtlasStyler and Geoserver
 http://www.keck-atlas.de/keck-
atlas/indikatoren/
Slide 40

41. Construindo o Mundo Digital
Slide 41

42. Construindo o Mundo Digital
 Robert Anderson robert@code2.com.br
Slide 42