ArcGIS Experience Builder ile Profesyonel Web Uygulamaları Geliştirme
🕹️ Bölüm 6: Etkileşim ve Eylemler
Anahtar Noktalar
- Etkileşim Nedir? Widget’lar arasında dinamik bağlantılar kurarak uygulamanızın kullanıcı girişlerine tepki vermesini sağlar.
- Eylemler (Actions): Widget’ların birbirine mesaj göndererek çalışmasını sağlar; örneğin, bir haritada seçilen bir nokta, bir tabloyu güncelleyebilir.
- Mesaj Türleri: Record selection change, Data change, Extent change gibi 10 farklı mesaj türü desteklenir.
- Eylem Türleri: Pan to, Zoom to, Filter data gibi 12 eylem türü, widget’ların davranışlarını özelleştirir.
- Haziran 2025 Güncellemesi: Yeni eylem türleri (Open view, Toggle widget) ve erişilebilirlik iyileştirmeleri eklendi.
Etkileşim ve Eylemlerin Önemi
Etkileşim ve eylemler, ArcGIS Experience Builder’da uygulamanızı statik bir görselleştirmeden dinamik ve kullanıcı odaklı bir deneyime dönüştürür. Örneğin:
- Bir haritada tıklanan bir bina, ilgili detayları bir Özellik Bilgisi widget’ında gösterebilir.
- Bir filtre widget’ı, harita ve tabloyu anında güncelleyerek veri analizini kolaylaştırır.
Bu bölümde, her mesaj ve eylem türünü, yapılandırma adımlarını, pratik örnekleri ve en iyi uygulamaları detaylıca açıklayacağız. Haziran 2025 sürümüne uygun olarak, yeni özellikler ve erişilebilirlik iyileştirmeleri de dahil edilecek.
6.1 Etkileşim ve Eylemler Nedir?
Etkileşim, widget’ların birbirleriyle iletişim kurmasını ve kullanıcı eylemlerine tepki vermesini sağlar. Örneğin, bir haritada bir konuma tıklanırsa, bir tablo veya grafik widget’ı otomatik olarak ilgili verileri gösterebilir. Bu iletişim, eylemler aracılığıyla gerçekleşir.
Eylemler, bir widget’ın başka bir widget’a mesaj göndermesiyle tetiklenen işlemdir. Mesajlar, belirli olaylara (ör. seçim, veri değişikliği) dayalıdır ve eylemler, bu mesajlara yanıt olarak ne yapılacağını tanımlar (ör. yakınlaştırma, filtreleme).
Neden Önemli?
- Dinamik Deneyim: Kullanıcıların etkileşimli bir şekilde veri keşfetmesini sağlar.
- Veri Analizi: Veriler arasında bağlantı kurarak daha derin analiz imkanı sunar.
- Kullanıcı Dostu: Kullanıcıların uygulamanızı kolayca anlamasını ve kullanmasını sağlar.
6.2 Mesaj Türleri
Mesajlar, bir widget’ın başka bir widget’a bilgi göndermesini sağlar. ArcGIS Experience Builder, 10 farklı mesaj türü destekler. Aşağıda her birinin detaylı açıklaması ve kullanım senaryoları yer alıyor:
- Record Selection Change (Kayıt Seçimi Değişikliği)
- Tanım: Bir veri kaydının seçilmesiyle tetiklenir. Örneğin, bir haritada bir noktaya tıklama veya bir tabloda bir satır seçme.
- Kullanım Alanları:
- Haritada seçilen bir konumu, Özellik Bilgisi widget’ında detaylandırma.
- Tabloda seçilen bir satırı, haritada vurgulama.
- Destekleyen Widget’lar: Harita, Liste, Tablo, Özellik Bilgisi, Filtre, Sorgu, Seçim.
- Örnek: Bir emlak uygulamasında, haritada bir ev seçildiğinde, evin detayları (fiyat, alan) bir Özellik Bilgisi widget’ında görünür.
- Data Change (Veri Değişikliği)
- Tanım: Veri kaynağında yapılan ekleme, silme veya güncelleme işlemleriyle tetiklenir.
- Kullanım Alanları:
- Yeni bir veri eklendiğinde grafik veya tabloyu güncelleme.
- Düzenleme widget’ıyla veri değiştirildiğinde haritayı yenileme.
- Destekleyen Widget’lar: Düzenle, Veri Ekle, Tablo.
- Örnek: Bir afet yönetimi uygulamasında, yeni bir afet raporu eklendiğinde tablo ve harita otomatik güncellenir.
- Extent Change (Görünüm Değişikliği)
- Tanım: Harita veya sahnenin görünüm alanı (extent) değiştiğinde tetiklenir, örneğin yakınlaştırma veya kaydırma.
- Kullanım Alanları:
- Harita görünümü değiştiğinde, başka bir haritayı senkronize etme.
- Görünüm alanındaki verileri bir tabloda listeleme.
- Destekleyen Widget’lar: Harita.
- Örnek: Bir şehir planlama uygulamasında, bir harita yakınlaştırıldığında, ikinci bir harita aynı bölgeye otomatik olarak yakınlaşır.
- Data Filtering Change (Veri Filtreleme Değişikliği)
- Tanım: Bir veri kaynağında filtre uygulandığında veya kaldırıldığında tetiklenir.
- Kullanım Alanları:
- Filtre widget’ıyla seçilen verileri harita ve grafiklerde güncelleme.
- Sorgu widget’ıyla filtrelenen verileri tabloya yansıtma.
- Destekleyen Widget’lar: Filtre, Sorgu.
- Örnek: Bir emlak uygulamasında, fiyat aralığına göre filtreleme yapıldığında, harita sadece uygun mülkleri gösterir.
- Data Source Error (Veri Kaynağı Hatası)
- Tanım: Veri kaynağında bir hata oluştuğunda tetiklenir.
- Kullanım Alanları:
- Hata mesajlarını kullanıcıya göstermek.
- Alternatif veri kaynaklarına geçiş yapmak.
- Destekleyen Widget’lar: Harita, Tablo, Grafik.
- Örnek: Veri kaynağı yüklenemezse, bir metin widget’ında hata mesajı gösterilir.
- Data Records Loaded (Veri Kayıtları Yüklendi)
- Tanım: Veri kayıtları yüklendiğinde tetiklenir.
- Kullanım Alanları:
- Yeni veriler yüklendiğinde grafik veya tabloyu güncelleme.
- Veri yükleme tamamlandığında kullanıcıya bildirim göstermek.
- Destekleyen Widget’lar: Harita, Liste, Tablo.
- Örnek: Yeni bir veri seti yüklendiğinde, bir grafik widget’ı otomatik olarak güncellenir.
- Data Source Created (Veri Kaynağı Oluşturuldu)
- Tanım: Yeni bir veri kaynağı eklendiğinde tetiklenir.
- Kullanım Alanları:
- Yeni veri kaynaklarını otomatik olarak bir widget’a bağlama.
- Yeni veri kaynağıyla ilgili kullanıcıyı bilgilendirme.
- Destekleyen Widget’lar: Veri Ekle.
- Örnek: Kullanıcı bir veri seti eklediğinde, harita otomatik olarak bu veriyi gösterir.
- Data Source Selection (Veri Kaynağı Seçimi)
- Tanım: Bir veri kaynağının seçilmesiyle tetiklenir.
- Kullanım Alanları:
- Bir veri kaynağını seçtiğinde ilgili widget’ları güncelleme.
- Veri kaynağı seçimine göre filtre veya sorgu uygulama.
- Destekleyen Widget’lar: Veri Ekle, Filtre.
- Örnek: Kullanıcı bir veri kaynağı seçtiğinde, tablo widget’ı bu veriyi listeler.
- Filter Selection Change (Filtre Seçimi Değişikliği)
- Tanım: Filtre widget’ında bir seçim yapıldığında tetiklenir.
- Kullanım Alanları:
- Filtre seçimine göre harita veya tabloyu güncelleme.
- Dinamik veri görselleştirme.
- Destekleyen Widget’lar: Filtre.
- Örnek: Bir çevre uygulamasında, hava kalitesi seviyesine göre filtreleme yapıldığında harita güncellenir.
- Navigate to View (Görünüme Git)
- Tanım: Bir Bölüm widget’ında belirli bir görünüme geçiş yapıldığında tetiklenir.
- Kullanım Alanları:
- Farklı veri görünümlerine geçiş yapma.
- Görünüm değiştiğinde diğer widget’ları güncelleme.
- Destekleyen Widget’lar: Bölüm, Menü.
- Örnek: Bir menüden “Nüfus Verileri” görünümüne geçiş yapıldığında, ilgili harita ve grafik güncellenir.
Tablo: Mesaj Türleri Özeti
| Mesaj Türü | Tanım | Destekleyen Widget’lar | Kullanım Örneği |
|---|---|---|---|
| Record Selection Change | Kayıt seçimi değişti | Harita, Liste, Tablo | Haritada seçilen evin detaylarını gösterme |
| Data Change | Veri ekleme/silme/güncelleme | Düzenle, Veri Ekle | Yeni veri eklendiğinde tablo güncelleme |
| Extent Change | Harita görünümü değişti | Harita | İkinci haritayı senkronize etme |
| Data Filtering Change | Filtre uygulandı/kaldırıldı | Filtre, Sorgu | Filtrelenen verileri haritada gösterme |
| Data Source Error | Veri kaynağında hata | Harita, Tablo, Grafik | Hata mesajı gösterme |
| Data Records Loaded | Veri kayıtları yüklendi | Harita, Liste, Tablo | Grafiği güncelleme |
| Data Source Created | Yeni veri kaynağı eklendi | Veri Ekle | Yeni veriyi haritada gösterme |
| Data Source Selection | Veri kaynağı seçildi | Veri Ekle, Filtre | Tabloyu yeni veriyle güncelleme |
| Filter Selection Change | Filtre seçimi değişti | Filtre | Haritayı filtreye göre güncelleme |
| Navigate to View | Görünüme geçiş | Bölüm, Menü | Görünüm değiştiğinde grafik güncelleme |
6.3 Eylem Türleri
Eylemler, bir mesaj alındığında ne yapılacağını tanımlar. ArcGIS Experience Builder, 12 eylem türü destekler. Aşağıda her birinin detaylı açıklaması ve kullanım senaryoları yer alıyor:
- Pan to (Kaydır)
- Tanım: Haritayı belirli bir konuma kaydırır.
- Kullanım: Arama veya seçim sonucu bir konuma odaklanma.
- Örnek: Arama widget’ında bir adres seçildiğinde, harita o konuma kaydırılır.
- Zoom to (Yakınlaş)
- Tanım: Haritayı belirli bir konuma veya veri setine yakınlaştırır.
- Kullanım: Seçilen verileri veya görünüm alanını vurgulama.
- Örnek: Tablo widget’ında bir satır seçildiğinde, harita o konuma yakınlaşır.
- Filter Data (Veri Filtrele)
- Tanım: Veri kaynağını bir kritere göre filtreler.
- Kullanım: Dinamik veri görselleştirme.
- Örnek: Filtre widget’ında fiyat aralığı seçildiğinde, harita ve tablo sadece uygun verileri gösterir.
- Flash (Yanıp Sön)
- Tanım: Haritadaki bir özelliği kısa süreli yanıp sönerek vurgular.
- Kullanım: Kullanıcının dikkatini çekmek.
- Örnek: Haritada seçilen bir bina kısa süre yanıp söner.
- Show on Map (Haritada Göster)
- Tanım: Seçilen veriyi haritada vurgular.
- Kullanım: Tablo veya listedeki verileri haritada görselleştirme.
- Örnek: Liste widget’ında bir öğe seçildiğinde, haritada ilgili konum vurgulanır.
- Add Marker (İşaretçi Ekle)
- Tanım: Haritaya bir işaretçi ekler (Haziran 2025 yeniliği).
- Kullanım: Geçici işaretçilerle kullanıcı girişlerini işaretleme.
- Örnek: Arama sonucunda haritaya bir işaretçi eklenir.
- Show Pop-up (Pop-up Göster)
- Tanım: Haritada bir pop-up açar.
- Kullanım: Seçilen özelliğin detaylarını gösterme.
- Örnek: Haritada bir konuma tıklanırsa, pop-up’ta detaylar görünür.
- Set Filter (Filtre Ayarla)
- Tanım: Filtre widget’ına bir filtre kuralı uygular.
- Kullanım: Dinamik filtreleme.
- Örnek: Menü widget’ından bir görünüm seçildiğinde, filtre otomatik uygulanır.
- Open View (Görünüm Aç)
- Tanım: Bölüm widget’ında belirli bir görünüme geçiş yapar (Haziran 2025 yeniliği).
- Kullanım: Farklı veri görünümlerine geçiş.
- Örnek: Menüden “Nüfus” görünümüne geçiş yapıldığında, ilgili veri seti yüklenir.
- Toggle Widget (Widget Aç/Kapa)
- Tanım: Widget Kontrolcüsü’nde bir widget’ı açar veya kapatır (Haziran 2025 yeniliği).
- Kullanım: Widget’ların görünürlüğünü kontrol etme.
- Örnek: Bir düğmeye tıklandığında, Filtre widget’ı açılır.
- Reset (Sıfırla)
- Tanım: Widget’ın durumunu sıfırlar (ör. filtreler, seçimler).
- Kullanım: Varsayılan duruma dönme.
- Örnek: Filtre widget’ındaki tüm filtreler sıfırlanır.
- Refresh (Yenile)
- Tanım: Widget’ın içeriğini yeniler.
- Kullanım: Veri değişikliklerini yansıtma.
- Örnek: Veri Ekle widget’ıyla yeni veri eklendiğinde, tablo yenilenir.
Tablo: Eylem Türleri Özeti
| Eylem Türü | Tanım | Kullanım Örneği | Destekleyen Widget’lar |
|---|---|---|---|
| Pan to | Haritayı kaydırır | Arama sonucu konuma odaklanma | Harita |
| Zoom to | Haritaya yakınlaşır | Seçilen veriye odaklanma | Harita |
| Filter Data | Veriyi filtreler | Fiyat aralığına göre filtreleme | Harita, Tablo, Grafik |
| Flash | Özelliği yanıp söndürür | Seçilen binayı vurgulama | Harita |
| Show on Map | Veriyi haritada vurgular | Listeden seçilen konumu gösterme | Harita |
| Add Marker | Haritaya işaretçi ekler | Arama sonucu işaretleme | Harita |
| Show Pop-up | Pop-up açar | Konum detaylarını gösterme | Harita |
| Set Filter | Filtre kuralı uygular | Görünüme göre filtreleme | Filtre |
| Open View | Görünüme geçiş yapar | Nüfus görünümüne geçiş | Bölüm, Menü |
| Toggle Widget | Widget’ı açar/kapatır | Filtre widget’ını açma | Widget Kontrolcüsü |
| Reset | Widget’ı sıfırlar | Filtreleri sıfırlama | Filtre, Sorgu |
| Refresh | Widget’ı yeniler | Tabloyu güncelleme | Harita, Tablo, Grafik |
6.4 Eylemleri Yapılandırma
Eylemleri yapılandırmak için aşağıdaki adımları izleyin:
- Widget Seçimi
- Tuvalde bir widget’a (ör. Harita, Arama) tıklayın.
- Sağdaki yapılandırma panelinde Action sekmesine gidin.
- Mesaj Türü Seçimi
- Add a trigger düğmesine tıklayın.
- Açılan listede uygun mesaj türünü seçin (ör. Record Selection Change).
- Eylem Ekleme
- Mesaj türü seçildikten sonra, Add an action seçeneğine tıklayın.
- Uygun eylem türünü seçin (ör. Zoom to, Filter Data).
- Hedef widget’ı seçin (ör. Harita, Tablo).
- Eylem Ayarları
- Eylem türüne göre ek ayarları yapılandırın. Örneğin:
- Filter Data: SQL ifadesi veya filtre kriteri tanımlayın.
- Zoom to: Yakınlaştırma seviyesini belirleyin.
- Apply ile ayarları kaydedin.
- Eylem türüne göre ek ayarları yapılandırın. Örneğin:
- Test Etme
- Preview moduna geçerek eylemin çalıştığını test edin.
- Örneğin, haritada bir noktaya tıklayın ve hedef widget’ın (ör. Tablo) güncellendiğini kontrol edin.
İpucu: Birden fazla eylem ekleyebilirsiniz. Örneğin, bir harita seçimi hem Tablo’yu güncellesin hem de Grafik widget’ını filtrelesin.
6.5 Haziran 2025 Güncellemesindeki Yenilikler
- Yeni Eylem Türleri:
- Open View: Bölüm widget’ında belirli bir görünüme geçiş yapar.
- Toggle Widget: Widget Kontrolcüsü’nde widget’ları açar/kapar.
- Erişilebilirlik İyileştirmeleri:
- Filtre ve Tablo widget’larında klavye navigasyonu (ör. Shift+Spacebar ile satır seçimi).
- Widget Kontrolcüsü’nde erişilebilirlik için yeni ikonlar.
- Performans İyileştirmeleri: Eylemlerin daha hızlı çalışması için optimize edilmiş mesaj işleme.
6.6 Pratik Örnekler
Aşağıda, basitten zora dört pratik örnekle etkileşim ve eylemleri nasıl kullanacağınızı detaylıca açıklayacağız.
Örnek 1: Basit Harita ve Tablo Etkileşimi (Başlangıç Seviyesi)
- Amaç: Haritada seçilen bir konumu tablo widget’ında vurgulamak.
- Widget’lar: Harita, Tablo.
- Adımlar:
- Harita Widget’ı ekleyin, şehirdeki okulları içeren bir veri katmanı seçin.
- Boyutlandırma: %100 genişlik, 600px yükseklik.
- Tablo Widget’ı ekleyin, aynı veri katmanını bağlayın.
- Boyutlandırma: %100 genişlik, auto yükseklik.
- Harita widget’ında:
- Action > Add a trigger > Record Selection Change.
- Add an action > Show on Map seçin, hedef olarak Tablo widget’ını seçin.
- Tablo widget’ında:
- Action > Add a trigger > Record Selection Change.
- Add an action > Zoom to seçin, hedef olarak Harita widget’ını seçin.
- Preview ile test edin: Haritada bir okula tıklayın, tablo ilgili satırı vurgular; tabloda bir satır seçin, harita o konuma yakınlaşır.
- Harita Widget’ı ekleyin, şehirdeki okulları içeren bir veri katmanı seçin.
- Sonuç: Harita ve tablo arasında iki yönlü etkileşim.
Örnek 2: Filtreleme ile Dinamik Veri Görselleştirme (Orta Seviye)
- Amaç: Filtre widget’ıyla seçilen veri aralığını harita ve grafik widget’larında güncellemek.
- Widget’lar: Harita, Grafik, Filtre.
- Adımlar:
- Harita Widget’ı ekleyin, emlak verileri (fiyat, alan) içeren bir katman seçin.
- Boyutlandırma: %50 genişlik, 600px yükseklik.
- Grafik Widget’ı ekleyin, fiyat verileri için çubuk grafiği seçin.
- Boyutlandırma: %50 genişlik, 400px yükseklik.
- Filtre Widget’ı ekleyin, emlak fiyat aralığı için filtre tanımlayın.
- Boyutlandırma: 200px genişlik, auto yükseklik.
- Filtre Kriteri:
price BETWEEN 100000 AND 500000.
- Filtre widget’ında:
- Action > Add a trigger > Filter Selection Change.
- Add an action > Filter Data, hedef olarak Harita ve Grafik widget’larını seçin.
- Preview ile test edin: Fiyat aralığını değiştirin, harita ve grafik otomatik güncellenir.
- Harita Widget’ı ekleyin, emlak verileri (fiyat, alan) içeren bir katman seçin.
- Sonuç: Dinamik filtreleme ile veri görselleştirme.
Örnek 3: Görünüm Tabanlı Navigasyon (İleri Seviye)
- Amaç: Menü widget’ıyla farklı veri görünümlerine geçiş yapmak ve ilgili widget’ları güncellemek.
- Widget’lar: Menü, Bölüm, Harita, Tablo.
- Adımlar:
- Bölüm Widget’ı ekleyin, iki görünüm oluşturun: “Nüfus” ve “Ekonomi”.
- Boyutlandırma: %100 genişlik/yükseklik.
- Harita Widget’ı ekleyin, her görünüm için farklı veri katmanları bağlayın (nüfus ve ekonomi verileri).
- Tablo Widget’ı ekleyin, her görünüm için ilgili veriyi gösterin.
- Menü Widget’ı ekleyin, “Nüfus” ve “Ekonomi” bağlantıları ekleyin.
- Boyutlandırma: %100 genişlik, 50px yükseklik.
- Menü widget’ında:
- Action > Add a trigger > Navigate to View.
- Add an action > Open View, hedef olarak Bölüm widget’ındaki ilgili görünümü seçin.
- Bölüm widget’ında:
- Action > Add a trigger > Navigate to View.
- Add an action > Filter Data, hedef olarak Harita ve Tablo widget’larını seçin.
- Preview ile test edin: Menüden bir görünüm seçin, harita ve tablo ilgili veriyle güncellenir.
- Bölüm Widget’ı ekleyin, iki görünüm oluşturun: “Nüfus” ve “Ekonomi”.
- Sonuç: Görünüm tabanlı dinamik navigasyon.
Örnek 4: Afet Yönetimi için Dinamik Pano (Uzman Seviyesi)
- Amaç: Gerçek zamanlı afet verilerini analiz eden, etkileşimli bir pano oluşturmak.
- Widget’lar: Harita, Analiz, Tablo, Filtre, Widget Kontrolcüsü, Akordeon.
- Adımlar:
- Akordeon Widget’ı ekleyin, iki panel oluşturun: “Harita ve Analiz” ve “Veri Görselleştirme”.
- Boyutlandırma: %100 genişlik/yükseklik.
- Harita Widget’ı (Panel 1): 3D sahne katmanı (afet alanı) bağlayın.
- Boyutlandırma: %100 genişlik, 800px yükseklik.
- Analiz Widget’ı (Panel 1): Yükseklik Profili aracı ekleyin.
- Eylem: Harita ile senkronize analiz.
- Tablo Widget’ı (Panel 2): Afet verileri bağlayın.
- Eylem: Haritada seçilen veriyi vurgulama.
- Filtre Widget’ı (Widget Kontrolcüsü içinde): Risk seviyesine göre filtre.
- Eylem: Harita ve Tablo’yu filtreleme.
- Widget Kontrolcüsü: Filtre ve Özellik Bilgisi widget’larını içerir.
- Eylem: Toggle Widget ile açma/kapama.
- Harita widget’ında:
- Action > Add a trigger > Record Selection Change.
- Add an action > Show Pop-up ve Filter Data (Tablo için).
- Filtre widget’ında:
- Action > Add a trigger > Filter Selection Change.
- Add an action > Filter Data (Harita ve Tablo için).
- Preview ile test edin: Haritada bir konuma tıklayın, pop-up ve tablo güncellensin; filtreyi değiştirin, tüm widget’lar senkronize olsun.
- Akordeon Widget’ı ekleyin, iki panel oluşturun: “Harita ve Analiz” ve “Veri Görselleştirme”.
- Sonuç: Gerçek zamanlı, etkileşimli afet yönetimi panosu.
6.7 En İyi Uygulamalar ve İpuçları
- Amaç Odaklı Eylemler: Kullanıcıların en çok ihtiyaç duyacağı etkileşimlere odaklanın.
- Minimalizm: Çok fazla eylem eklemek, uygulamayı karmaşıklaştırabilir; sadece gerekli olanları kullanın.
- Test: Her eylemi Preview modunda test ederek doğru çalıştığından emin olun.
- Erişilebilirlik: Haziran 2025 güncellemesiyle gelen klavye navigasyonu özelliklerini kullanın (ör. Tablo’da Shift+Spacebar).
- Performans: Büyük veri setlerinde, eylemlerin performansını optimize etmek için veri kaynaklarını sadeleştirin.
6.8 Sorun Giderme
- Eylem Çalışmıyor: Mesaj türünün ve hedef widget’ın doğru seçildiğinden emin olun.
- Veri Güncellenmiyor: Veri kaynağının paylaşım ayarlarını kontrol edin.
- Performans Sorunları: Çok fazla eylem veya karmaşık filtreler performansı yavaşlatabilir; optimize edin.
- Erişilebilirlik Hataları: Klavye navigasyonu sorunları için widget’ların güncel olduğundan emin olun.
