SAPUI5 (HTML5 için SAP kullanıcı arayüzü), tek bir kod tabanını koruyarak tarayıcıda çalışan masaüstü ve mobil uygulamalar oluşturmak için kullanabileceğiniz bir kütüphaneler koleksiyonudur. SAPUI5 JavaScript araç seti ile, ek kodlama yapmadan erişilebilir ve duyarlı HTML5 uygulamaları oluşturmak kolaydır. HTML5 web geliştirme standartlarını kullanarak web uygulamaları oluşturabilirsiniz.
SAPUI5’in birincil, temel geliştirme konseptini anlamalısınız. SAPUI5, Model Görünüm Denetleyicisi (MVC) konseptini destekler. “kullanıcı arayüzlerini uygulamaya yönelik bir yazılım mimari modelidir”. Bir geliştirici olarak, veri modeli işlemeyi korumak için MVC’yi kullanmanız teşvik edilir. UI tasarımı ve uygulama mantığı ayrıdır. Bu, farklı bölümleri değiştirmenin yanı sıra UI geliştirmeyi kolaylaştırmaya yardımcı olur.
Model: uygulamanızda görüntülenen verilerin alınması ve güncellenmesi.
View: ilk kullanıcı arayüzünün yorumlanması ve oluşturulması. SAPUI5 bağlamında görünüm. Modeldeki değişikliklere dayalı olarak kullanıcıya sunumu oluşturur.
Controller: görünüm mantığını veri mantığından ayırır. Denetleyici, görünümü ve modeli ayarlayarak kullanıcı etkileşimine ve ‘görünüm olaylarına’ yanıt verir.
SAPUI5 web uygulaması geliştirmeyi basitleştirir. Çeşitli kullanıcı arayüzü kontrolleri. Temel öğelerden karmaşık UI modellerine kadar çeşitli UI kontrolleri, çekici bir düzen için bir araya getirilebilir. Tüm UI kontrolleri tutarlı bir tasarım dilinden ve tutarlı UX modellerinden yararlanır. SAPUI5 esneklik hizmetleri, bir uygulamanın kullanıcı arayüzünü kolayca uyarlamanıza ve değişiklikleri katmanlı bir depoda saklamanıza olanak tanır.
Proje Oluşturma
Ben şahsen sıfırdan bir uygulama oluşturmanızı tavsiye etmiyorum, özellikle de size yardımcı olacak ve doğrudan geliştirmeye başlamanızı sağlayacak sihirbaz aracınız varsa. Mevcut bir şablondan bir proje oluşturmanın veya oluşturmanın iki yolu vardır. Aşağıdaki adımlardan birini ya da ikisini izleyin.
Şablon Seçimi
Bir sonraki ekran şablon seçim ekranı olacaktır. Burada, ne tür bir başlangıç projesi istediğinizi seçebilirsiniz. Bizim dersimiz için sadece “SAPUI5 Uygulaması” seçilecektir.
Proje özelliklerinize göre uygun SAPUI5 sürümünü seçtiğinizden emin olun.
İstenen uygulamayı seçtikten sonra, artık proje adı ve ad alanı ile devam edebiliriz:
“Proje Adı”, SAP Web IDE çalışma alanınızdaki uygulamanızın klasör adı olacaktır. “Namespace” ise tüm bu uygulama için benzersiz tanımlayıcınız olacaktır. Proje adı ile birlikte ad alanı, uygulamanız için benzersiz bir tanımlayıcı oluşturmak için önek olacaktır.
Sonuç olarak:
Şimdilik sadece varsayılan bir ana görünüm (sayfa) oluşturacağız.
Bu ekrandan “Finish” düğmesine tıklayabilirsiniz.
Çalıştırma Yapılandırmaları Oluşturma
Projeyi bir şablondan oluşturduktan sonra, uygulamayı çalıştırmak için neredeyse hazırız. Ancak uygulamayı çalıştırmadan önce, SAP Web IDE’nin bu uygulamayı nasıl çalıştıracağını belirtmeliyiz. Bu tek başına bir uygulama mı yoksa Fiori Launchpad tabanlı bir uygulama mı?
Bu, projenizde yeni bir yapılandırma ayarı oluşturacaktır, şimdilik “Kaydet ve Çalıştır” düğmesine basabilirsiniz. Bu, tarayıcınızda uygulamayı ayrı olarak görüntüleyebileceğiniz yeni bir sekme açacaktır. Gördüğünüz gibi, uygulamanın çalışması için birçok özelleştirme mevcuttur.
Liste Görünümünün Oluşturulması
Devamında artık liste elemanını XML görünüm dosyasına yerleştirebiliriz.
Home.view.xml, uygulamamız için oluşturduğumuz tüm yapılacaklar öğelerinin listesini içerecektir. Görünüm dosyasını açın ve content etiketinin içine aşağıdaki ifadeleri kopyalayın:
<List>
<items>
<StandardListItem title=”Buy Milk”/>
<StandardListItem title=”Pay Bills”/>
<StandardListItem title=”Exercise”/>
</Items>
</List>Uygulamayı çalıştırın, çıktı aşağıdaki öğeye benzer olmalıdır:
Genel Özet:
SAP UI5 (User Interface 5) kütüphanesi, SAP tarafından geliştirilen ve özellikle kurumsal web uygulamaları için kullanılan bir kullanıcı arayüzü çerçevesidir. SAP UI5, HTML5, CSS3, ve JavaScript teknolojilerini kullanarak zengin, etkileşimli ve kullanıcı dostu web uygulamaları oluşturmak için tasarlanmıştır. Bu kütüphane, SAP’nin önde gelen kurumsal çözümleriyle entegrasyon için uygun araçlar ve bileşenler içerir.
SAP UI5’in temel özellikleri şunlardır:
- MVC Mimarisi (Model-View-Controller): SAP UI5, Model-View-Controller (MVC) tasarım desenini kullanır. Bu, uygulamanın veri (Model), kullanıcı arayüzü (View) ve uygulama mantığı (Controller) arasında bir ayrım sağlar.
- Modüler ve Genişletilebilir: SAP UI5, modüler bir yapıya sahiptir ve kullanıcılar özelleştirilmiş veya genişletilmiş özellikleri ekleyebilirler. Bu, geliştiricilere esneklik sağlar.
- Veri Bağlama ve Bağlantı: UI5, farklı veri kaynaklarına bağlanabilme yeteneğine sahiptir. OData protokolünü kullanarak SAP sistemleri ile kolayca entegre edilebilir.
- Zengin Kullanıcı Kontrolleri: SAP UI5, zengin bir dizi kullanıcı kontrolü (UI controls) sunar. Bu kontroller, grafiksel nesneler, tablolar, formlar ve diğer kullanıcı arabirimini oluşturan bileşenleri içerir.
- Responsive Tasarım: UI5, farklı ekran boyutlarına uyum sağlamak için responsive tasarım prensiplerini destekler. Bu, uygulamaların farklı cihazlarda uygun şekilde çalışmasını sağlar.
- Veri Bağlama: UI5, veri bağlama özellikleri sayesinde arayüz elemanlarını veri kaynaklarıyla bağlamayı kolaylaştırır. Bu, dinamik ve güncel veri gösterimini mümkün kılar.
SAP UI5, genellikle SAP’nin Fiori tasarım dilini destekleyen birçok uygulama ve çözümde kullanılır. Fiori, modern ve kullanıcı dostu bir görünüm ve his sağlamak için tasarlanmış bir kullanıcı arayüzü tasarım dilidir. SAP UI5, Fiori tasarım prensiplerini takip ederek şirket içi uygulamaların kullanıcı deneyimini artırmaya yardımcı olur.
SAP UI5’in avantajları şunlardır:
SAP UI5’nin bir dizi avantajı vardır ve bu avantajlar, kurumsal web uygulamaları geliştiren şirketler ve geliştiriciler için değerli olabilir. İşte SAP UI5’in bazı avantajları:
- Kurumsal Entegrasyon: SAP UI5, SAP’nin kurumsal çözümleri ile doğrudan entegre olabilir. Bu, özellikle SAP altyapısını kullanan şirketler için büyük bir avantajdır ve uygulamaların kolayca SAP sistemleriyle etkileşimde bulunabilmesini sağlar.
- Modüler ve Genişletilebilir: SAP UI5, modüler bir yapıya sahiptir ve geliştiricilerin ihtiyaca göre özelleştirmeler yapmasına olanak tanır. Bu, uygulamanın spesifik gereksinimlere göre uyarlanabilmesini sağlar.
- Zengin Kullanıcı Kontrolleri: UI5, zengin bir dizi kullanıcı kontrolleri içerir. Bu kontroller, geliştiricilere zengin ve etkileşimli kullanıcı arayüzleri oluşturma konusunda büyük esneklik sağlar.
- Mobil Desteği: SAP UI5, mobil cihazlarda kullanım için optimize edilmiş uygulamalar oluşturmak için tasarlanmıştır. Fiori tasarım prensiplerini destekleyerek, kullanıcıların farklı cihazlarda tutarlı bir deneyim yaşamasını sağlar.
- Veri Bağlama Yetenekleri: UI5, farklı veri kaynaklarına kolayca bağlanabilir ve veri bağlama süreçlerini kolaylaştırır. Bu, uygulamaların gerçek zamanlı ve güncel verilerle çalışmasını sağlar.
- Responsive Tasarım: UI5, responsive tasarım prensiplerini destekler. Bu özellik, uygulamanın farklı ekran boyutlarına ve cihazlara uyum sağlamasını sağlar.
- Topluluk ve Destek: SAP UI5, geniş bir geliştirici topluluğuna sahiptir. Bu, geliştiricilerin bilgi alışverişi yapabileceği, sorunları çözebileceği ve yeni özelliklere dair kaynaklara ulaşabileceği bir ekosistem sunar.
- Güçlü Güvenlik: SAP, güvenlik konusunda geniş deneyime sahiptir ve bu deneyimi SAP UI5’in güvenlik özelliklerine entegre eder. Bu da özellikle kurumsal uygulamalarda güvenlik gereksinimleri yüksek olan şirketler için önemlidir.
Bu avantajlar, SAP UI5’in kurumsal düzeyde uygulama geliştirmek için tercih edilen bir çözüm olmasını sağlar.
SAP UI5 Geliştirme Ortamları
SAP UI5 uygulamaları genellikle SAP Web IDE (Integrated Development Environment) veya başka bir entegre geliştirme ortamı içinde geliştirilir. İşte SAP UI5 uygulamalarını geliştirmek için kullanılan bazı ana ortamlar:
- SAP Web IDE (Integrated Development Environment): SAP tarafından sağlanan bu bulut tabanlı geliştirme ortamı, SAP UI5 uygulamalarını hızlı bir şekilde oluşturmak ve geliştirmek için tasarlanmıştır. SAP Web IDE, SAP Cloud Platform gibi bulut tabanlı hizmetlerle entegre olarak çalışır ve geliştiricilere işbirliği, kod yazma, hata ayıklama ve sürüm kontrolü gibi özellikleri sunar.
- Eclipse: SAP UI5 uygulamalarını geliştirmek için Eclipse IDE de kullanılabilir. Eclipse, geniş bir eklenti ekosistemi ve SAP tarafından sağlanan SAPUI5 eklentisi ile birlikte kullanılarak SAP UI5 projelerinin geliştirilmesini sağlar.
- Visual Studio Code: Visual Studio Code, geniş bir kullanıcı kitlesi tarafından tercih edilen bir hafif ve genişletilebilir metin düzenleyicisidir. SAP UI5 uygulamalarını geliştirmek için SAP tarafından sağlanan SAP Fiori Tools eklentisi kullanılabilir.
- SAP Business Application Studio: SAP, SAP Web IDE’nin yerini alacak şekilde SAP Business Application Studio’yu sunmaktadır. Bu da bulut tabanlı bir geliştirme ortamıdır ve SAP Fiori uygulamaları, SAP UI5 projeleri ve diğer SAP çözümleri üzerinde çalışmak için kullanılabilir.
Bu ortamlar, geliştiricilere SAP UI5 uygulamalarını oluşturmak, test etmek ve dağıtmak için gerekli araçları sağlar. Ayrıca, bu ortamların birçoğu SAP’nin Fiori tasarım prensiplerine uygun uygulamalar oluşturmayı destekler. Geliştirici, tercih ettiği geliştirme ortamını seçebilir ve SAP UI5 uygulamalarını bu ortam üzerinde geliştirebilir.
