SAP UI5 Dosya Yapısı
UI5 dosya yapısı, bir UI5 uygulamasının tüm dosyalarının nasıl organize edildiğini belirtir. Tipik olarak, bir UI5 uygulaması iki ana bölümden oluşur: “Web App” ve “Component”.
“Web App” bölümü, bir HTML dosyası ve bir “manifest.json” dosyası içerir. HTML dosyası, uygulamanın görünümünü tanımlayan temel bir sayfadır. Bu dosya, uygulamanın tüm UI bileşenlerinin kullanıcıya sunulacağı yerdir. “manifest.json” dosyası, uygulamanın yapılandırması ve ayarlarını içerir. Bu dosya, uygulama ayarlarını, veri kaynaklarını, UI bileşenlerini ve daha fazlasını tanımlamak için kullanılır.
“Component” bölümü, “Web App” bölümündeki dosyalara ek olarak, uygulamanın UI bileşenlerinin (Controller, View, Model, Fragment vb.) yer aldığı klasörleri içerir. Bu klasörler, uygulamanın mantığına ve veri kaynaklarına göre düzenlenir. Örneğin, “Controller” klasörü, uygulamanın olaylarını ve işlevlerini yönetir. “View” klasörü, uygulamanın görsel tasarımını ve bileşenlerini tanımlar. “Model” klasörü, uygulamanın veri kaynaklarını ve veri işlemesi işlemlerini yönetir.
UI5 dosya yapısı, projenin ölçeğine, gereksinimlerine ve gereksinimlerin yönetimine göre farklı şekillerde özelleştirilebilir. Ancak, genel olarak, bir UI5 uygulaması dosya yapısı, “Web App” ve “Component” bölümleri ile birbirine bağlı dosyaları içerir.
<!DOCTYPE html>
<html>
<head>
<title>UI5 Örnek</title>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<script src=”https://sapui5.hana.ondemand.com/resources/sap-ui-core.js” id=”sap-ui-bootstrap” data-sap-ui-theme=”sap_bluecrystal” data-sap-ui-libs=”sap.m”></script>
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Button({
text: “Merhaba Dünya!”,
press: function () {
alert(“Merhaba Dünya!”);
}
}).placeAt(“content”);
});
</script>
</head>
<body class=”sapUiBody” id=”content”>
</body>
</html>
Bu kod, bir HTML dosyası içinde yer alır. Kod, SAPUI5 kütüphanesini yükler ve bir “Merhaba Dünya” düğmesi oluşturur. Düğme tıklandığında, bir uyarı penceresi görüntüler. Bu kod örneği, UI5 uygulamalarının nasıl yapılandırıldığını ve UI bileşenlerinin nasıl oluşturulduğunu gösterir.
