PUTU Herry (G651114041)

TUGAS GEOINFORMATIC

Developing OGC Compliant Web Applications with GeoExt

by Leave a comment

Developing OGC Compliant Web Applications with GeoExt

1.     GeoExt Basics

GeoExt adalah library terbaru dengan perkembangan pesat untuk membentuk aplikasi web berbasis GIS. Library tersebut dibangun berdasarkan Ext JS dan OpenLayers. Pendahulu library ini memberikan komponen UI untuk membentuk aplikasi web dengan underlying komponen data yang solid, pengembangan berikutnya adalah berupa standar de facto untuk web mapping yang dinamik.

GeoExt  memberikan mapping terkait komponen UI. GeoExt juga menyatukan akses ke informasi  dari servis OGC, Open Layers objects dan sumber arbitrary remote data. Hal ini memudahkan presentasi informasi geospasial untuk berbagai pilihan widgets, mulai dari combo boxes atau grids hingga peta dan pepohonan. GeoExt  ramah terhadap API, mengurangi barisan nomor kode yang dibutuhkan, dan menghasilkan aplikasi  mapping yang responsive dan menjanjikan. Modul ini memperkenalkan konsep fundamental GeoExt untuk membuat peta. Anda akan membuat peta, membedah peta Anda untuk memahami bagian-bagiannya, dan mendapatkan link ke sumber pembelajaran tambahan.ada 3 tahapah dalam GeoExt Basics diantaranya adalah

1.1.         Membuat Map Window

Dalam GeoExt, menurut konvensi yang didasari kerangka kerja Ext JS, peta dibuat dalam bentuk  Ext.Panel. Petanya berupa objek OpenLayers.Map. Sangat penting untuk memahami bahwa Ext JS merubah paradigma aplikasi web, berlawanan dengan paradigma web page. Artinya kita tidak membuat markup, sehingga bahan dasar untuk aplikasi ini adalah:

Contoh sederhana aplikasi GeoExt:

<html>
    <head>
        <title>GeoExt Workshop Application</title>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        <script src="openlayers/lib/OpenLayers.js"></script>
        <script type="text/javascript" src="geoext/lib/GeoExt.js"></script>

        <script type="text/javascript">

        Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
        var app, items = [], controls = [];

        Ext.onReady(function() {
            app = new Ext.Viewport({
                layout: "border",
                items: items
            });
        });

        items.push({
            xtype: "gx_mappanel",
            ref: "mapPanel",
            region: "center",
            map: {
                numZoomLevels: 19,
                controls: controls
            },
            extent: OpenLayers.Bounds.fromArray([
                -122.911, 42.291,
                -122.787,42.398
            ]),
            layers: [new OpenLayers.Layer.WMS(
                "Medford",
                "/geoserver/wms",
                {layers: "medford"},
                {isBaseLayer: false}
            )]
        });
        controls.push(
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.Attribution(),
            new OpenLayers.Control.PanPanel(),
            new OpenLayers.Control.ZoomPanel()
        );

        </script>
    </head>
    <body>
    </body>
</html>

1.2. Membedah Peta Aplikasi Anda

Peta di atas dibuat menggunakan minimal html document, application initialization code, and user interface configuration objects.

1.2.1. Minimal HTML Document

Setiap aplikasi web membutuhkan setidaknya dokumen dasar HTML sebagai container. Tidak mengandung human readable markup, sehingga hanya memiliki bentuk yang kosong. Namun sudah pasti mengandung semua sumber style dan script. Ini yang umumnya ada pada awal dokumen :

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

Ext JS bisa dipakai sendiri atau bersama dengan JavaScript frameworks seperti JQuery. Sesuai dengan lingkungannya, adapter yang sesuai harus dipasang dahulu. Kami memakai standalone, jadi kami butuh ext-base.js adapter. Pada line kedua kami memasukkan library utama.

GeoExt tidak saja  berdasarkan Ext JS, namun juga OpenLayers. Jadi kami harus memasukkan OpenLayers. Akhirnya kami bisa memasukkan GeoExt:

<script src="openlayers/lib/OpenLayers.js"></script>
<script type="text/javascript" src="geoext/lib/GeoExt.js"></script>

Catatan

Saat memakai GeoExt, anda mendapatkan keuntungan dari semua fungsi plain yang disediakan Ext JS dan OpenLayers. Anda dapat menambahkan GeoExt ke aplikasi Ext JS and OpenLayers anda yang sudah ada tanpa merusak apapun.

1.2.2. Application Initialization Code

Application initialization dalam konteks ini adalah kode yang dibuat sesegera mungkin.

Ext.BLANK_IMAGE_URL = "ext/resources/images/default/s.gif";
var app, items = [], controls = [];

items.push({
    xtype: "gx_mappanel",
    ref: "mapPanel",
    region: "center",
    map: {
        numZoomLevels: 19,
        controls: controls
    },
    extent: OpenLayers.Bounds.fromArray([
        -122.911, 42.291,
        -122.787,42.398
    ]),
    layers: [new OpenLayers.Layer.WMS(
        "Medford",
        "/geoserver/wms?SERVICE=WMS",
        {layers: "medford"},
        {isBaseLayer: false}
    )]
});
controls.push(
    new OpenLayers.Control.Navigation(),
    new OpenLayers.Control.Attribution(),
    new OpenLayers.Control.PanPanel(),
    new OpenLayers.Control.ZoomPanel()
);

Kita mulai dengan mengeset URL local untuk blank image yang sering dipakai Ext JS, dan menentukan beberapa variable. Kami mempopulasi dua array. items adalah user interface items dari aplikasi kami dan controls adalah OpenLayers map controls kami.

Dalam Ext JS, kami membuat konfigurasi objek ketimbang menulis kode seperti kebanyakan tugas basic, yang umumnya membuat aplikasi berkembang lebih mudah dan cepat. Item berinteraksi melalui events dan pendengar events, sebagai “glue” yang akan kita bahas nanti.

Mari mencari tahu mengenai bagaimana  add content to our viewport.

1.2.3      MembangunUser Interface

Kita telah mengetahui bahwa body dari dokumen HTML adalah kosong. Semua yang terlihat pada web page ditambahkan oleh Ext JS, namun kita tetap butuh menyiapkan DOM dari page. Untuk memastikan kita tidak menulis pada DOM terlalu awal, Ext menyiapkan Ext.onReady() hook.

Pada contoh,  dipakai user interface sederhana. Kita cukup membuat Ext.Viewport baru dengan border layout.  Hal ini membuat kita mampu mengisi seluruh browser viewport dengan aplikasi kita, dan tidak butuh penambahan markup ke page tersebut.

Ext.onReady(function() {
    app = new Ext.Viewport({
        layout: "border",
        items: items
    });
});

Ext.Viewport memakai “border” layout. Dapat memiliki item dari region tengah, utara, timur, selatan dan barat namun hanya region center mandatorynya. Dapat memakai semua ruang yang tidak dipakai oleh region lain, yang perlu dikonfigurasi dengan width atau height.

Catatan

Untuk membuat aplikasi workshop menjadi modular, kita akan memakai Ext.onReady () beberapa kali saat menambah fungsionalitas. Tidak perlu untuk melakukan hal ini dalam aplikasi kehidupan nyata, di mana semua kode dependent DOM biasanya termasuk ke dalam Ext.onReady () blok tunggal.

 1.2.4. Komponen GeoExt.MapPanel

Dalam Ext JS, semua pembentuk komponen UI membuat argument tunggal yang akan kami sebut sebagai “configuration object”. Seperti semua JavaScript objects, konfigurasi ini termuat dalam curly braces, dan mengandung sepasang key: value. Berikut configuration object untuk peta kami:

{
    xtype: "gx_mappanel",
    ref: "mapPanel",
    region: "center",
    map: {
        numZoomLevels: 19,
        controls: controls
    },
    extent: OpenLayers.Bounds.fromArray([
        -122.911, 42.291,
        -122.787,42.398
    ]),
    layers: [new OpenLayers.Layer.WMS(
        "Medford",
        "/geoserver/wms?SERVICE=WMS",
        {layers: "medford"},
        {isBaseLayer: false}
    )]
}

Ketiga property awal tidak spesifik untuk GeoExt. xtype memberitahukan Ext JS konstruktor mana yang akan mengirim configuration object  ke .ref mendefinisikan referensi relatif terhadap kontainer (dalam hal ini Ext.Viewport yang kita tambahkan item ini). region adalah wilayah viewport tempat kita ingin menempatkan peta.

Catatan

Kedua notasi berikut adalah ekuivalent:

  • new GeoExt.MapPanel({region: center, extent: /* … */});
  • {xtype: “gx_mappanel”, region: center, extent: /* … */});

Ext JS menjaga registry dari komponen yang ada, disebut “xtypes”. GeoExt menambahkan komponennya ke registry tadi. Utk membedakan satu dg yang lain, nama mereka dimulai dg “gx_” prefix. Dlm konteks ini properti ref jg penting: dipakai utk membuat referensi shg kita bisa mengakses berikutnya dg lebih mudah.

Memakai xtypes berguna saat meload konfigurasi secara dynamic memakai AJAX. Pada kasus ini, konfigurasi harus JSON compliant, dan hanya mengandung tipe sederhana (nomor, strings and boolean values).

Property lain yang spesifik utk GeoExt.MapPanel: daripada OpenLayers.Map instant, kami merumuskan opsi konfigurasi utk peta pada opsi map. extent mengeset initial extent dari peta, dan layers mengeset  initial set dari layers. Bagi peta sederhana ini, kami hanya menunjukkan WMS layer tunggal. Pada plain OpenLayers, kami melakukan hal yang sama dengan menginstantkan objek OpenLayers.Layer.WMS. bedanya disini adalah kami mengkonfigurasi WMS layer dg opsi {isBaseLayer: false}. Hal ini tdk harus dilakukan sekarang, namun saat kami menambahkan  layer tree, kami ingin melihat tree node dari layer tadi ditambah checkbox, bukan dg radio button.

1.3. GeoExt Resources

Library GeoExt memuat banyak fungsi. Meskipun pengembang telah bekerja keras untuk memberikan contoh fungsi itu dan telah mengorganisir kode dengan cara yang memungkinkan pengembang berpengalaman lainnya untuk menemukan caranya, pendatang baru mungkin menemukan tantangan untuk memulai dari awal.

1.3.1. Belajar dari contoh

User baru mungkin beranggapan bahwa cara yang paling berguna adalah dg menyelami contoh kode GeoExt dan mempelajari fungsi dari library.

Contoh Ext JS dan OpenLayers adalah dasar pengetahuan yang berharga, khususnya jika anda mulai dg GeoExt dan belum pernah mencoba Ext JS atau OpenLayers sebelumnya.

1.3.2. Browsing dokumentasi

Untuk info topic spesifik, browsinglah dokumentasi GeoExt. Khususnya tutorial dan pengenalan ke konsep inti.

1.3.3. Menemukan referensi API

Setelah memahami komponen inti yang membuat & mengontrol aplikasi mapping, carilah dokumentasi referensi API utk detail pada metode signatures dan property objek.

Referensi GeoExt API links to Ext JS and OpenLayers API docs utk referensi lebih lanjut. Sumbernya dpt ditemukan disini:

 1.3.4. bergabung dg komunitas

GeoExt disupport dan dimaintain oleh komunitas developer dan user spt anda. Apakah anda punya pertanyaan atau kode utk dikontribusikan, anda bisa terlibat dg mendaftar pada salah satu mailing list dan memperkenalkan diri.

Leave a comment