OL4JSF - Latinoware 2010

Construindo o Mundo Digital

Facilitando o desenvolvimento de aplicações geoespaciais sobre a plataforma JEE

Por Robert Anderson <[email protected]>


Slide 2


Slide 3


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


Slide 5


<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


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


Baixa integração com IDEs

Dificuldade de depuração/manutenção

Grande verbosidade

Conhecimento da API é uma OBRIGAÇÃO

Slide 8


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


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

https://ol4jsf.dev.java.net/


Slide 11


<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


Brincadeira! É só aquilo mesmo.

Slide 13


Alta integração com IDEs

Facilita depuração/manutenção

Baixa verbosidade

Conhecimento da API é “PONTUAL”

Arquitetura flexível (“Não engessa”)

Slide 14


Slide 15


Slide 16

Janela de Propriedades


Slide 17

Palheta de Componentes


Slide 18

Assistente de Código


Slide 19

Editor Visual


Slide 20


Slide 21


<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>




</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


<m:map width="512px" height="256px"

jsVariable="map">




</m:wmsLayer>




</m:wmsLayer>




</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


Slide 24


<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:map>

</h:panelGroup>

<h:commandButton value="Random WKT"action="#{vectorBean.randomWKTFromList}">

<f:ajax render="panelMap" />

</h:commandButton>

</h:form>

Slide 25





...



</m:map>

</h:panelGroup>



</h:commandButton>

</h:form>

Slide 26





...



</m:map>

</h:panelGroup>



</h:commandButton>

</h:form>

Slide 27


@ManagedBean

@RequestScoped

public class VectorBean {

private String randomWkt = "POINT (0 0)";

public String getRandomWkt() {

return randomWkt;

}

}

Slide 28


Slide 29





...



</m:map>

</h:panelGroup>



</h:commandButton>

</h:form>

Slide 30


@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





...



</m:map>

</h:panelGroup>



</h:commandButton>

</h:form>

Slide 32


Componentes de entrada

Suporte a converters

Eventos

Proxy framework

Slide 33


<?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


<?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


...

<m:featureInfoPopup

url="#{facesContext.externalContext.

requestContextPath}/OL4JSFProxy/wms"

/>

...

Slide 36


https://ol4jsf.dev.java.net/downloads/ol4jsf2-examples.war

Slide 37


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









<dependency>

<groupId>org.ol4jsf</groupId>

<artifactId>ol4jsf-core</artifactId>

<version>2.0-SNAPSHOT</version>

<scope>compile</scope>

</dependency>

Slide 39


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







Slide 41


Robert Anderson [email protected]

Slide 42

mailto:[email protected]

Documents

OL4JSF - Latinoware 2010