MAF – Oracle Mobile Application Framework ile İlk Uygulama

Bir önceki MAF yazımda kurulumları tamamlayıp ilk uygulama aşamsına gelmiştik. Bu yazıda basit bir uygulama oluşturup bunun simulator de görüntülenmesini sağlaycağız. İlk olarak uygulama oluşturmadan önce uygulamayı test edeceğimiz simulatorlerin jdeveloper ile bağlantılarını yapacağız.

Jdeveloper açıldıktan sonra JDeveloper altında Preferences bölümüne girelim.

gallerygallery

ilk_uygulama1

Burada açılan pencerede sol bölümde yer alan Mobile Application Framework bölümünü açalım.

Screen Shot 2016-08-22 at 13.59.29

Burayı açtığımza 3 platform içinde sdk larını tanıtabileceğimiz ekranlar karşımıza gelecektir. Buradan bizden istenilen sdk larla ilgili dosya yollarını girelim.

Screen Shot 2016-08-22 at 14.04.28

Bilgisayarınız daha önceden Android Studio ve SDK ları yüklü ise uygulama bu uzantıları siz hiçbir şey yapmadan bulacaktır. Bu özelliği hoşuma giden özelliklerinden biri oldu. Bu şekilde konfigurasyon kolaylığı sağladı. Kurulu değilse sitesinden kısa sürede kurabilirsiniz. Aynı şekilde XCode kurulu ise yine ios için yüklü olan sdk larıda görmektedir.

Bende android ve ios sdk ları mevcut olduğu için ikisininde yer aldığı dosya uzantılarını girdim. Eğer uzantılar ile ilgili bir hata olursa bu alanı kırmızı olarak size belirtecektir. Windows Platform için ayarlamalar yapmak isteğimde olmadığını bana bu şekilde ikaz etti.

Bu alanları doldurup işlemleri tamamladıysak bir uygulama oluşturup bunu simulatore görüntüleyelim.

Öncelikle File>Application diyelim.

Screen Shot 2016-08-22 at 14.35.32

Açılan pencereden Application>Mobile Application Framework Application seçelim ve ilerleyelim.

Screen Shot 2016-08-22 at 14.38.11

Screen Shot 2016-08-22 at 14.37.09

Burada uygulamaya isim verelim ve next next işlemlerimiz ile bu aşamaları tamamlayalım.

Screen Shot 2016-08-22 at 14.41.48

Açılan pencerede bizi hiç bir ayar yapılamamış maf-features.xml ekranı karşılayacaktır. Bu ekranda ilk ekranımızı oluşturup bazı ayarlar yapacağız.

Screen Shot 2016-08-22 at 14.42.30

Burada + simgesine tıklayalım ve oluşturacağımız sayfan için bir isim verelim ve ok diyelim.

Screen Shot 2016-08-22 at 14.44.04

Daha sonra hemen altında yer alan sekmelerden "Content" sekmesine tıklayalım. Burada simgesinden bir content oluşturalım ve ok diyelim. Ekledikten sonra bu Content in Type sekmesinden ayarı MAF Task Flow yapalım. bu ayarı yaptığımız anda altta yer alan bölüm kırmızı olacaktır. Bizden kullanacağınız İş akışını istemektedir. Bunun için sekmesine tıklıyoruz ve aşağıdaki gibi task flow oluşturuyoruz.

Screen Shot 2016-08-22 at 14.44.19

Karşımıza boş bir sayfa gelecektir. Burası uygulamanın ilk açılacağı ekrandan tutun yapılacak tüm yönlendirmelerin yer aldığı iş akış ekranıdır.

Screen Shot 2016-08-22 at 14.57.06

Burada sağ tarafta yer alan Companents bölümünden öncelikle bir View seçip sürekliyip boş ekrana bırakıyoruz. buna bir isim verebilrisiniz ben anasayfa dedim. Dikkat ederseniz üzerinde bir pembe işaret yer almaktadır. Bu view in bir arayüze sahip olmadığını göstermektedir. Bunun için üstine çift tıklayarak bir arayüz oluşturacağız.

Screen Shot 2016-08-22 at 15.00.47

Burada isterseniz bir template seçebilirsiniz. Ben Use a Quick Start Layout bölümünden "split" adlı template seçenerek devam ediyorum. Burayıda ok diyerek geçiyoruz ve tebrikler ilk sayfanızı oluşturdunuz.

Screen Shot 2016-08-22 at 15.02.58

Burada ilk Source ekranı karşınıza gelecektir. Burada xml yapısında ekran tasarım kodları yer almaktadır. Ön izleme için altta yer alan Preview sekmesi ile görüntüleyebilirsiniz. Ekranın üstünde yer alan bölümde ise farklı platformlar için önizleme yapabileceğiniz bir imkan sağlamaktadır.

Uygulamamızı çalıştırmadan önce hangi ortamda kullanacaksak o ortam için deploy ediyoruz. Ben ios da denemek için Application>Deploy sekmesinden iOS için deploy işlemini başlatacağım. 

Screen Shot 2016-08-22 at 15.05.14

Screen Shot 2016-08-22 at 15.05.40

Açılan ekranda ne için deploy edeceğimizi seçiyoruz. Burada Simulator için, bir cihaza yüklemek için ya da markette yayınlamaya hazır hale getirecek paketleme işleme olarak 3 farklı seçenek bulunmaktadır. Burada simulator için diyerek ilerliyoruz ve tamamlanmasını bekliyoruz.

Screen Shot 2016-08-22 at 15.59.27

Bu işlemin ardından tekrar Application > Deploy dediğimizde karşımıza "iOS1 to iOS Simulator" yazısına benzer bir seçenek gelecektir. Bu işlem uygulamamızın ios simulatorde çalışması için deploy edildiğini göstermektedir.

Burada default ayarlar kullanılmaktadır. Deploy ayarlarınızı kendiniz değiştirmek istiyorsanız: Application > Deploy > New Deployment Profile diyerek ayarlar ekranına ulaşıyoruz.

Screen Shot 2016-08-23 at 14.54.44

İlk olarak bize hangi platform için oluşturmak isteğimizi soruyor. Burada Profile Type bölümünde "MAF for iOS" diyorum. Siz Android için yapmak isterseniz Android deçmelisiniz. Deployment Profile Name bölümünde bir isim isim istiyor kendi önerdiği ismi ile Ok seçeneği ile geçiyoruz. Screen Shot 2016-08-23 at 14.52.40Açılan pencerede iOS Options sekmesine tıkladığımızda aşağıdaki ekran karşımıza gelcektir.Screen Shot 2016-08-23 at 14.53.34Burada bizden application id ve name istemektedir. Bu isimler uygulamamızın ismi olacaktır. id kısmı ise markette yayınlanırken unit bir id olmasını sağlayacaktır. Bu id genelde com ile başlar ardından firma adı ardından uygulama ismi ile devam eden bir id dir. Burada com.resuldolaner.ilkuygulamam olarak ilerleyeceğim. Dikkat ederseniz yukarıda bu alan kırmızı ama aşağıdaki ekranda değil. Burada yazdığım ismi sevmediğinden kızardı. Çünkü uygulama ismi ve id "_,*, " gibi noktalama işaretleri ile oluşturulamaz. Düzeltip geçiyorum.Screen Shot 2016-08-23 at 14.54.21

Burada ayrıca iOS versiyonun minimum çalışma versiyonunu, çalıştırmaya başladığımızda hangi simulator de başlayacağı ve hangi cihaz (iphone yada ipad) için olacağı gibi seçenekler yer almaktadır. Bu kısımda Simulator seçeğinden iPhone 5 ,5s, 6 … gibi cihazları seçip görüntüleyebilirsiniz.

Screen Shot 2016-08-23 at 15.13.31Bu kısmıda tamamladıktan sonra Application>Deploy altında oluşturduğumuz iOS2 Profilini göreceksiniz. Tekrar iOS2 için Deploy edip, ardından "iOS2 to iOS Simulator" seçeneği ile uygulamamızı simulator e gönderebiliriz.Screen Shot 2016-08-23 at 14.56.21

Ve evreka diyoruz ilk görüntüyü alıyoruz.

Simulator Screen Shot 23 Aug 2016 14.56.46Biz ilk sayfa oluştururken Split template ini seçtiğmiz için gördüğünüz gibi yandan açılır bir slider menü ve içerik sayfası ile biz birşey yapmadan kendi oluşturdu. Burada Source bölümünden ufak değişiklikler yapıp çalıştırdığınızda aşağıdaki gibi küçük bir kurumsal uygulamayı andırır bir görüntü karşımıza öıkacaktır. Buraya kadar hala kod yazmadan ufak ayarlamalar ile ilerleyip bu noktaya kadar geldik. Bundan sonra keşiflere devam edeceğiz. 

Simulator Screen Shot 23 Aug 2016 15.02.07

 

 

Bir yorum bırakın

This site uses Akismet to reduce spam. Learn how your comment data is processed.