Yazar Bozar

Merhabalar;

Smartface Designer, mobil uygulama geliştirmek isteyenler için gerçekten büyük kolaylıklar sağlayan, hiçbir kod yazmadan sadece aksiyonlar belirleyerek uygulama yapabilmeyi sağlayan bir sürükle-bırak platformudur. Bu yazıda, Smartface Designer üzerinde sadece “HTTP Object”, “Edit Box”, “Image” ve birkaç aksiyon kullanarak, Google Maps haritası çağıracağız.

Öncelikle Google Maps, direk bir URL adresi ile statik harita hizmeti sunmaktadır (1). Bu URL kabaca şöyledir:

http://maps.google.com/maps/api/staticmap?size=240×320&maptype=roadmap&sensor=true&mobile=true&zoom=15&center=taksim,istanbul

Bu URL’deki parametreler isteğe göre değiştirilebilir. Mesela “center=taksim,istanbul” yerine direk Taksim’in koordinatları da girilebilir: “center=41.036948,28.986629”. Referanslarda verdiğim Google Maps Api sayfasında bu konu hakkında çok daha ayrıntılı bilgi bulabilirsiniz.

Google Maps hakkında kısa bir bilgi verdikten sonra, Smartface Designer ile tasarıma başlayabiliriz. Öncelikle bu örnekte “Image”, “Edit Box” ve “HTTP Object” elemanları ve 2 ayrı sayfa kullanacağız.

Smartface Designer Insert Bar ve "Image", "Edit Box" ve "HTTP Object" Elemanları

Yeni bir proje açarak boş bir sayfa önümüze geldikten sonra tekrar yeni sayfa butonuna tıklayarak bize gerekli olan diğer sayfayı da oluşturuyoruz. İlk sayfamız arama sayfası, ikinci sayfamız da harita sayfamız olacaktır. İlk adım olarak arama sayfamıza ait nesneleri yerleştirelim. Bu sayfada temel olarak “Edit Box” yer alacaktır. Araç çubuğundan ve “Design Object” ekranından bu nesneye ait butonu buluyoruz sürükle-bırak ile sayfamıza yerleştiriyoruz ve tasarıma göre boyutlarını, konumlarını ayarlıyoruz. Bu yerleştirdiğimiz “Edit Box” haritamızın konumunu belirleyecektir. Daha sonra sayfanın geri kalanını isteğimize göre (Banner, Left Soft Key, Right Soft Key isimleri vb.) düzenliyoruz.

Şimdi 2. Sayfaya geçerek haritamızı gerçekliyoruz. Öncelikle “Image” tuşuna tıklayarak sayfamıza bu nesneyi getiriyoruz. Bu haritamızın görüntüsünü ekrana yansıtacaktır. Yarattığımız “Image” nesnesini, “Palettes” ekranına geçerek genişlik ve yüksekliğini %100, X-Y konumlarını 0 (sıfır) ve “Data Source” kaynağını da önceden belirlediğimiz bir resim olarak ayarlıyoruz. Bahsettiğim “Data Source” noktası çok önemlidir, çünkü içeriği boş olan “Image” nesnesine “HTTP Object” ile gelen bir dosyayı bağlayamayız. Bu adımı yaptıktan sonra, “HTTP Object” nesnesini sayfamıza getiriyoruz. Yine “Palettes” ekranından bu objeye ait “URL” seçeneğini düzenleyerek “http://maps.google.com/maps/api/staticmap?size=240×320&maptype=roadmap&sensor=true&mobile=true&zoom=15” değerine getiriyoruz. “Sending Parameters” ifadesini açarak “center” değerinde yeni bir parametre ekliyoruz ve bu parametrenin içeriğini “Object Value” seçeneğiyle Sayfa 1’de yarattığımız “Edit Box” olacak şekilde ayarlıyoruz.

HTTP Object Seçenekleri

Harita uygulamamızın temel iskeletini yarattık, ancak uygulamanın çalışması için belirli aksiyonlara ihtiyacımız var. Bu aksiyonları “Actions Editor” ekranından ayarlıyoruz. Öncelikle Sayfa 1’e geçerek, “Left Soft Key” tuşuna (bu tercih tamamen size aittir, herhangi bir tuş veya nesne de olabilir) hem HTTP bağlantısını hem de Sayfa 2’ye geçişi ayarlayalım. “Project Browser” ekranından Sayfa 1’i seçiyoruz, daha sonra “Keypad” ekranından “Left Soft Key” tuşuna tıklayarak “Actions Editor” ekranına geçelim. Burada önce “Network” sekmesinden “Send HTTP” seçeneğine tıklıyoruz ve ekrana gelen ayarlarda Sayfa 2’yi ve yarattığımız “HTTP Object” ifadesini seçiyoruz. Şimdi asıl önemli nokta olan, Google Maps tarafından geri gönderilen haritayı ekrana aktarmak. “Send HTTP” ayarlarından “Save Returning Value To” seçeneğini seçiyoruz ve Sayfa 2’de bulunan ve haritamızı temsil eden “Image” nesnesine bu değeri “Property” seçeneği “Image” olacak şekilde kaydediyoruz. Bu aksiyonu bitirdikten sonra yine aynı aksiyon penceresinden “Navigation” sekmesine gelip “Show Page” aksiyonun seçiyoruz ve “Page” ayarını Sayfa 2 olarak ayarlıyoruz. Smartface Designer, aksiyonları pencerede görülen sırada yaptığı için “Show Page” aksiyonunun “Send HTTP” aksiyonundan sonra koymak gereklidir. Aksi takdirde uygulama önce Sayfa 2′yi gösterip sonra haritayı çağıracağından düzgün çalışmayabilir.

Sayfa 1 "Left Soft Key" Aksiyonları

Ve basit bir Google Maps uygulamasını Smartface Designer ile birlikte yapmış olduk. Yazı boyunca yaptığımız işlemleri bir akış diyagramı halinde anlatırsak metni daha anlaşılır kılabiliriz.

Örnek Google Maps Uygulamasının Akış Diyagramı

Smartface Designer kendi Device Simulator seçeneğinde, “HTTP Object” nesnelerini henüz kullanamadığı için, yaptığımız uygulamayı Symbian, Java, Blackberry bir telefon ile veya J2ME olarak uygulamayı yayınlayarak Sun Java Wireless Toolkit (2) ile tam olarak test edebiliriz. Son olarak, yaptığımız uygulamamızın ekran görüntüleri temel olarak aşağıdaki gibi olacaktır:

Örnek Google Maps Uygulamasının Ekran Görüntüleri

Her türlü soru ve yardım için mail adresim aracılığıyla benimle iletişime geçebilirsiniz. İyi çalışmalar.

Tuna Emre

tn.emre@gmail.com

Referanslar:

1. http://code.google.com/apis/maps/documentation/staticmaps/
2. http://java.sun.com/products/sjwtoolkit/

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.