View
2.108
Download
0
Category
Preview:
DESCRIPTION
OL4JSF presentation in Latinoware 2010.
Citation preview
Construindo o Mundo Digital
Facilitando o desenvolvimento de aplicações geoespaciais sobre a plataforma JEE
Por Robert Anderson <robert@code2.com.br>
Construindo o Mundo Digital
Slide 2
Construindo o Mundo Digital
Slide 3
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
Construindo o Mundo Digital
Slide 5
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
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
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
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
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
Construindo o Mundo Digital
Slide 11
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
Construindo o Mundo Digital
Brincadeira! É só aquilo mesmo.
Slide 13
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
Construindo o Mundo Digital
Slide 15
Construindo o Mundo Digital
Slide 16
Janela de Propriedades
Construindo o Mundo Digital
Slide 17
Palheta de Componentes
Construindo o Mundo Digital
Slide 18
Assistente de Código
Construindo o Mundo Digital
Slide 19
Editor Visual
Construindo o Mundo Digital
Slide 20
Construindo o Mundo Digital
Slide 21
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
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
Construindo o Mundo Digital
Slide 24
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
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
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
Construindo o Mundo Digital
@ManagedBean
@RequestScoped
public class VectorBean {
private String randomWkt = "POINT (0 0)";
public String getRandomWkt() {
return randomWkt;
}
}
Slide 28
Construindo o Mundo Digital
Slide 29
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
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
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
Construindo o Mundo Digital
Componentes de entrada
Suporte a converters
Eventos
Proxy framework
Slide 33
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
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
Construindo o Mundo Digital
...
<m:featureInfoPopup
url="#{facesContext.externalContext.
requestContextPath}/OL4JSFProxy/wms"
/>
...
Slide 36
Construindo o Mundo Digital
https://ol4jsf.dev.java.net/downloads/ol4jsf2-examples.war
Slide 37
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
Construindo o Mundo Digital
<dependency>
<groupId>org.ol4jsf</groupId>
<artifactId>ol4jsf-core</artifactId>
<version>2.0-SNAPSHOT</version>
<scope>compile</scope>
</dependency>
Slide 39
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
Construindo o Mundo Digital
Slide 41
Recommended