
Esri Calcite Design System ile Web Arayüzü Geliştirme
Calcite Design System Esri’nin bir UI Kit’idir. Daha az eforla şık ve modern gözüken arayüzler inşa etmenize olanak sağlar. Calcite ile arayüzünüzün tasarımıyla zaman kaybetmez ve direkt işlevselliğine odaklanabilirsiniz. Bu yazıda Calcite ile basit bir arayüz oluşturacağız. Bir buton ekleyip, butonun eventleriyle bir modal tetikleyip kullanıcıdan veri girişi yapmasını isteyeceğiz. Girilen bilgileri de bir JSON oluşturup içinde tutacağız.
Uygulamanın temelini oluşturmak için öncelikle ArcGIS Maps SDK for JavaScript’in Display Map örneğini kullanarak ilerleyelim. Aşağıdaki kod Display Map örneğini esas alan ama içerisine yorum satırıyla bazı TODO noktaları eklenmiş halidir. Yazının devamında paylaşılacak olan kodlar burada belirtilen TODO’lara eklenmelidir. Aşağıdaki kodu index.html olarak kaydedelim ve geliştirmemize başlayalım.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Esri Calcite Design System Web Arayüzü </title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.30/"></script>
<!-- TODO 1 : CDN Bilgisi Buraya Eklenecek -->
<!-- TODO 1 -->
<script>
require(["esri/config", "esri/Map", "esri/views/MapView"], function(esriConfig, Map, MapView) {
const map = new Map({
basemap: "arcgis/topographic"
});
const view = new MapView({
map: map,
center: [-118.805, 34.027],
zoom: 13,
container: "viewDiv"
});
/* TODO 4 : JavaScript kodları buraya eklenecek */
/* TODO 4 */
});
</script>
</head>
<body>
<div style="position: absolute;top:15px;right:15px;z-index: 2;" >
<!-- TODO 2 : Button buraya eklenecek !-->
<!-- TODO 2 !-->
</div>
<div>
<!-- TODO 3 : Dialog Kodu Buraya Eklenecek -->
<!-- TODO 3 -->
</div>
<div id="viewDiv">
</div>
</body>
</html>
Bu kod ile arayüzümüze bir harita eklemiş ve aşağıdaki görüntüyü elde etmiş olduk.

Calcite Design’in özelliklerini uygulamamıza kazandırmak için CDN’leri kullanarak kodumuza ekleyeceğiz. Get Started dökümanında verilen bu CDN adreslerini kodumuzdaki TODO 1 ile belirtilen kısıma ekleyelim. Örnekte CDN ile ilerliyor olsakta bu sayfadan NPM package’ı olarakta Calcite’ı kullanabilirsiniz.
<!-- TODO 1 : CDN Bilgisi Buraya Eklenecek -->
<script type="module" src="https://js.arcgis.com/calcite-components/2.13.0/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.0/calcite.css" />
<!-- TODO 1 -->
Bu aşamadan sonra artık kodumuzda Calcite Design Component’lerini kullanabilir olacağız. Componentler temel bir UI Kit’inde olması gereken her şeyi kapsıyor. Bu dökümandan uygulamamızda kullanmak istediğimiz component seçip tıklayacağız.

Bu sayfadaki componentleri inceleyebilir ve ihtiyacınız olanları uygulamalarınızda kullanabilirsiniz. Her bir component’in altında kod örneklerini de içeren bir dökümanı bulunmaktadır. Bizim örneğimizde ilk ekleyeceğimiz şey bir buton olduğu için, bu ekrandan Button’u bulup tıklayalım.
Bu sayfadaki kod örneğinden görebileceğimiz üzere Button örneği aşağıdaki gibi.
<calcite-button>Add layer</calcite-button>
Bu butona bir ID verelim ve buton yazısını Veri Girişi olarak güncelleyelim. Daha sonra bu kodu TODO 2 olarak belirttiğimiz yere yazalım.
<!-- TODO 2 : Button buraya eklenecek !-->
<calcite-button id='_modalBtn'>Veri Girişi</calcite-button>
<!-- TODO 2 !-->
Artık arayüzümüzün sağ üst kısmında buttonumuzu görebiliriz.

Bu butona tıklandığında bir Modal göstermek için örnek kodda TODO ile belirttiğimiz kısıma butona tıkladığımızda açılacak Modal’ın kodlarını yazalım. Bu kod ile beraber ortaya çıkacak Modal aşağıdaki gibidir.

<!-- TODO 3 : Dialog Kodu Buraya Eklenecek -->
<calcite-dialog modal heading="Yeni Veri Girişi" id="_dialog">
<calcite-label>
İsim
<calcite-input id='_name' placeholder="İsim soyisim giriniz."></calcite-input>
</calcite-label>
<calcite-label>
Açıklama
<calcite-input id='_desc' placeholder="Açıklama giriniz..."></calcite-input>
</calcite-label>
<calcite-label>
Enlem
<calcite-input id="_lat" type="number" placeholder="Enlem"></calcite-input>
</calcite-label>
<calcite-label>
Boylam
<calcite-input id='_long' type="number" placeholder="Boylam"></calcite-input>
</calcite-label>
<calcite-notice open icon width="full">
<div slot="message">Enlem boylam bilgileri için 4326 koordinatları kullanmalısınız.</div>
</calcite-notice>
<calcite-button kind="light" id="_closeBtn" slot="footer-start">
Kapat
</calcite-button>
<calcite-button id="_saveBtn" slot="footer-end">
Kaydet
</calcite-button>
</calcite-dialog>
<!-- TODO 3 -->
Burada kullandığımız Dialog içerisinde; Button, Input, ve Notice bulunmaktadır. Kullandığımız bu html taglerin her birisini yine Calcite componentler sayfasından aldık. Her bir html tag’inin aldığı parametreler yine bu componentler sayfasından erişebilir. Örneğimizde iki tane calcite-button kullandık. Bunların birisinde “kind” parametresini “inverse” olarak tanımladık ve bu şekilde buton rengimizi koyu renkli hale getirdik. Tanımlamanın bu şekilde yapılabileceği her bir component sayfasında bulunan Properties başlığının altından bulduk. Aşağıdaki görselden API reference içerisinde nerede bulunduğunu görebilirsiniz.

Bu kısımla beraber arayüzümüzde yazacağımız HTML kodlarını bitirmiş olduk. Artık JavaScript yazarak bu ekranı çalışır hale getirebiliriz.
Veri Girişi butonuna tıklandığında Modal’ın açılabilmesi ve Kapat butonuna basıldığında kapatılması için TODO 4 ile belirtilen yere aşağıdaki kodları ekleyebiliriz.
/* TODO 4 : JavaScript kodları buraya eklenecek */
document.getElementById('_modalBtn').addEventListener('click',()=>{
document.getElementById('_dialog').open = true
})
document.getElementById('_closeBtn').addEventListener('click',()=>{
document.getElementById('_dialog').open = false
})
// ...
/* TODO 4 */
Bu kodla beraber yaptığımız şey calcite-dialog‘un Open parametresini true ve false değerlere eşitlemek. Bununla beraber artık arayüzümüzde Modal butonlar vasıtasıyla açılır ve kapanır özelliği kazanmış oldu.
Formdaki bilgileri okumakta yine bilinen HTML+JavaScript yöntemleriyle, aşağıdaki örnek kodla beraber yapılabilir. Bu ilgili kodu bir önceki kodda yorum satırlarıyla belirtilen yere ekleyerek denemenizi yapabilirsiniz.
document.getElementById('_saveBtn').addEventListener('click',()=>{
// Forma girilen verileri bir JSON'a ekleyelim.
let submitJson = {
"name" : document.getElementById('_name').value,
"description" : document.getElementById('_desc').value,
"latitude" : document.getElementById('_lat').value,
"longitude" : document.getElementById('_long').value
}
// Oluşturduğumuz JSON ile ne yapmak istiyorsak buraya yazabiliriz.
console.log(submitJson)
// JSON'umuz oluştuktan sonra Formumuzu Kapatalım
document.getElementById('_dialog').open = false
})
Bu kod parçasını da ekledikten sonra artık form verilerini bir JSON’a kaydetmiş olduk. Aşağıdaki görselde görebileceğiniz gibi JSON’umuzu buradan girmiş olduğumuz veriler ile doldurduk.

Gördüğünüz üzere şık ve modern duran bir arayüzü CSS tarafını dert etmeden hızlıca geliştirebildik. Bu şekilde çalışmalarınizda asıl önemli konulara daha fazla zaman ayırabilirsiniz.