Şekil 78: Sencha Touch

Sencha Touch (ST), iPhone, iPad ve Android odaklı web siteleri ve web servisleri geliştirmek için kullanılan bir çerçevedir (framework). ExtJS kütüphanesinin tanınmış bir tedarikçisi olan Sencha, Inc. tarafından, yüksek teknoloji ürünü tarayıcı ara yüz pazarı için geliştirilmiş ücretli bir platformdur. 400 $ ile 1900 $ civarı arasında paketleri vardır.

ST’nin asıl amacı, mümkün olduğu kadar, standart ara yüz ve iOS ara yüzünün elemanlarının davranışını taklit ederek programcılara esnek bir API sunmaktır.
Çekirdek kütüphane JavaScript, CSS3 ve Html5 ile yazılmıştır. FireFox 4 ve IE 9, desteklenen tarayıcılar listesinde değildir. Buna göre, bir ST uygulaması ortak bir istemci-sunucu geliştirmedir, Safari veya Chrome tarayıcısı bir istemci olarak çalışır. JSON, XML ve diğer birkaç formatta “yanıt verebilecek” herhangi bir web hizmeti bir sunucu olarak davranır.

Temel olarak, çerçeve yine tanıdık bir HTML5 + JS + CSS grubudur. Ancak bu durumda, ara yüzü geliştirirken JS’ye HTML5’ten daha fazla önem veriyor. Çerçeve, hem UI bileşenlerini hem de mevcut olanları temel alarak geliştirmek için esnek araçlar sunar. Herhangi bir kütüphane bileşeni aslında bir dizi yöntem ve özelliğe sahip bir ST nesnesidir.

Sencha’nın avantajları:

• Kendi bileşenlerinizi oluşturarak kendi ara yüzünüzü oluşturma esnekliği (daha katı bileşen gereksinimleri)
• Hızlı bir başlangıç ​​için çok fazla belge olması

İlk Ext JS Uygulamasını Oluşturma:

Windows platformunda Sencha Cmd kullanarak ilk Ext JS 6 uygulamasını oluşturacağız. Sencha Cmd ve GPL Ext JS SDK’yı indirip kurmak gereklidir.

Şekil 79: Ruby aracılığı ile  Sencha touch uygulaması oluşturma.

1. Adım – Uygulama oluşturma

Sencha CMD komut satırına aşağıdaki kod yazılır:

encha -sdk /path/to/ExtSDK generate app -classic TutorialApp ./TutorialApp

Elde edilen TutorialApp, giriş / çıkış uygulamasına temel olarak kullanılacak tamamen işlevsel bir Cmd uygulamasıdır. Web sunucusundaki[1] uygulamanın konumuna giderek bu uygulamayı görüntüleyebilirsiniz. Örneğin:

http://localhost/TutorialApp

2.      Adım – Login View Bileşenlerini Oluşturun

Uygulamanın “app / view /” klasörüne gidin. Varsayılan olarak oluşturulan “Main” klasörü görmelisiniz. Bu klasör Main.js , MainController.js veMainModel.js dosyalarını içerir.

“App / view / login /” klasörü oluşturulduktan sonra, aşağıdaki dosyaları belirtilen klasöre eklemek gereklidir:

– Login.js

– LoginController.js

3. Adım – mainView’ı devre dışı bırakın

Görünüm eklentisinden “TutorialApp.view.main.Main” devre dışı bırakılır.

4. Adım- Giriş Penceresini Yaratın

“{appRoot}/app/view/login/Login.js” oluşturup dosyaya aşağıdaki kodu ekliyoruz:
Ext.define(‘TutorialApp.view.login.Login’, {
extend: ‘Ext.window.Window’,
xtype: ‘login’,
requires: [
‘TutorialApp.view.login.LoginController’,
‘Ext.form.Panel’
],
controller: ‘login’,
bodyPadding: 10,
title: ‘Login Window’,
closable: false,
autoShow: true,
items: {
xtype: ‘form’,
reference: ‘form’,
items: [{
xtype: ‘textfield’,
name: ‘username’,
fieldLabel: ‘Username’,
allowBlank: false
}, {
xtype: ‘textfield’,
name: ‘password’,
inputType: ‘password’,
fieldLabel: ‘Password’,
allowBlank: false
}, {
xtype: ‘displayfield’,
hideEmptyLabel: false,
value: ‘Enter any non-blank password’
}],
buttons: [{
text: ‘Login’,
formBind: true,
listeners: {
click: ‘onLoginClick’
}
}]
}
});

5.      Adım – Giriş Mantığı Ekleme

{appRoot}/app/view/login/LoginController.js dosyası oluşturulur:

Ext.define(‘TutorialApp.view.login.LoginController’, {
extend: ‘Ext.app.ViewController’,
alias: ‘controller.login’,
onLoginClick: function() {

// kullanıcının kimlik bilgilerini doğrulamak için
// LocalStorage değerini true olarak ayarlayın.

localStorage.setItem(“TutorialLoggedIn”, true);
// Giriş Penceresini Kapat
this.getView().destroy();
// Ana görünümü, görünüm alanına ekleyin

Ext.create({
xtype: ‘app-main’
});
}
});

Sonuçta ortaya çıkan {appRoot}/app/view/main/Main.js dosyası çalıştırılır.[2]

[1]              Sencha localhost üzerinde çalışır. IIS yapılandırması gereklidir.

[2]              Sencha resmi sitesinden faydalanılmıştır. https://docs.sencha.com/ext/6.0.0/guides/tutorials/login_app.html :05.02.2019