Sencha Touch - Hızlı Kılavuz
Sencha Touch, mobil uygulamalar için bir kullanıcı arayüzü oluşturmak için popüler bir Sencha çerçevesidir. Geliştiricinin basit HTML, CSS, JS kullanarak android, IOS, BlackBerry ve Windows gibi birçok mobil cihazı destekleyen bir mobil uygulama oluşturmasına yardımcı olur. MVC mimarisine dayanmaktadır. Sencha Touch'ın en son sürümü 2.4'tür.
Sencha Touch'ın Tarihçesi
Sencha'nın web uygulaması için olan diğer ürünü ExtJs'i piyasaya sürdükten sonra, mobil cihazlarda da çalışan bir çerçeve geliştirmeye ihtiyaç vardı.
Sencha Touch'ın ilk sürümü, Android ve IOS cihazlarını destekleyen 0.9 beta sürümüydü. Daha sonra, ilk kararlı sürüm olan ve Blackberry cihazlarını da destekleyen Sencha Touch sürüm 1.0'ın ilk ana sürümü Kasım 2010'da yayınlandı.
Sencha Touch'ın en son sürümü, Haziran 2015'te yayınlanan ve Android, IOS, BlackBerry OS 10, Android için Google Chrome ve mobil Safari gibi Windows, Tizen gibi birçok cihazı destekleyen 2.4 sürümüdür.
Sencha Touch'ın Özellikleri
Aşağıdakiler Sencha Touch'ın en öne çıkan özellikleri -
Özel olarak mobil platformlar için oluşturulmuş listeler, atlı karıncalar, formlar, menüler ve araç çubukları gibi zengin kullanıcı arayüzlerinden oluşan bir koleksiyona sahip, özelleştirilebilir ve 50'den fazla kullanıcı arabirimi widget'ı.
Yeni sürümlerin eskisi ile kod uyumluluğu.
Farklı işletim sistemlerine sahip birden çok mobil cihazda veri ve içeriğin görüntülenmesini düzenlemeye yardımcı olan esnek bir düzen yöneticisi.
Çerçeve, herhangi bir arka uç veri kaynağından veri tüketebilen güçlü bir veri paketi içerir.
Kullanım için daha iyi bir mobil web uygulaması deneyimi için uyarlanabilir düzenler, animasyonlar ve yumuşak kaydırma.
Her büyük platform için kullanıma hazır, yerel görünümlü temalar, web ve hibrit uygulamaların hedef platformların görünümüne ve hissine uymasını sağlar.
Sencha Touch ─ Faydaları
Sencha Touch, işletme düzeyinde web uygulaması geliştirme için lider standarttır. Uygulamaların geliştirilmesi için tek bir platform sağlayan mobil cihazların çoğu için sağlam uygulamalar oluşturmak için gerekli araçları sunar. Avantajlardan bazıları şunlardır -
Duyarlı bir dokunma özelliği sağlar, böylece kullanıcı mobil uygulamayı kullanırken kolayca gezinebilir.
IOS, Android, Blackberry ve Windows'un tüm son sürümleriyle uyumluluk sağlar.
Herhangi bir mobil uygulama için arzu edilen mümkün olan en hızlı hızı sağlar.
Çapraz platform uyumluluğu ile uygun maliyetli bir çözüm sunar.
Yerel API'lere ve HTML, CSS, JS gibi temel web geliştirme dillerine dayanır ve bu da geliştiricinin Sencha Touch'ı anlamasını kolaylaştırır.
Sencha Touch ─ Sınırlamalar
Sencha Touch API aşağıdaki özelliğe sahip değildir -
Uygulamanın cihazın kamerasına, kişilerine ve ivmeölçere erişimi yoktur.
Push bildirim özelliği sağlamaz. Bunun için web soketleri veya uzun yoklama kullanmalıyız.
Genel kamu lisans politikasına göre, açık kaynak uygulamaları için ücretsizdir ancak ticari uygulamalar için ücretlidir.
Oyun uygulamaları gibi zorlu grafikler ve animasyon uygulamaları için iyi değildir.
Sencha Touch ─ Araçlar
Sencha SDK
Bu, projenin iskeletini oluşturmak için kullanılan Sencha geliştirme kitidir. Komutta verilen adla bir uygulama oluşturmak için "sencha -sdk yol / to / touch uygulama appName oluştur" komutunu kullanıyoruz.
Uygulama oluşturulduğunda, uygulamada aşağıdaki dosyaları görebilirsiniz -
app - Bu klasör, uygulama için model, görünüm, kontrolör ve mağaza dosyalarını içerir.
app.js- Bu, uygulamanız için ana JS dosyasıdır. Bu dosyadan Sencha kod akışı başlar.
app.json - Bu, uygulamanın yapılandırma dosyasıdır, tüm yapılandırma ayrıntıları burada sunulur.
index.html - Bu, app.js'yi ve Sencha ile ilgili diğer dosyaları dahil ettiğimiz ana html dosyasıdır.
package.json - Bu dosya, uygulamayla ilgili tüm bağımlılığı ve diğer bilgileri içerir.
resources - Bu klasör, uygulama için gerekli tüm CSS dosyalarını ve resimleri içerir.
Sencha CMD
Sencha CMD, Sencha Dokunmatik kod küçültme, iskele, yapı oluşturma ve üretim amaçlı diğer kullanışlı özelliklerin özelliklerini sağlayan bir komut satırı aracıdır.
Bunun için uygulamayı oluşturmak için komut isteminde "Sencha app build package" komutunu kullanıyoruz. Komut isteminde uygulama dizinine gidin ve yukarıdaki komutu yazın. Derleme başarılı olduğunda, uygulamanın küçültülmüş versiyonunun temelde üretim amacıyla kullanıldığını göreceğiz.
Bu, adresinden indirilebilir https://www.sencha.com/products/extjs/cmd-download/
Sencha Müfettişi
Sencha Inspector, geliştirme sırasında Sencha kodundaki herhangi bir sorunu gidermek için bir hata ayıklama aracıdır.
Yerel Ortam Kurulumu
Bu bölüm, Sencha Touch'ı makinenize nasıl indirip kuracağınız konusunda size rehberlik eder. Lütfen ortamı kurmak için adımları izleyin.
Kitaplık dosyalarını indirme
Sencha Touch kitaplık dosyalarının ticari bir sürümünü aşağıdaki bağlantıdan indirin https://www.sencha.com. Sencha-touch-2.4.2-commercial adlı sıkıştırılmış bir klasör olacak olan kayıtlı posta kimliğinizdeki siteden deneme sürümünü alacaksınız.
Klasörü açın ve uygulamanıza dahil etmek için çeşitli JavaScript ve CSS dosyaları bulacaksınız. Çoğunlukla aşağıdaki dosyaları ekleyin -
Javascript Files - \ sencha-touch-2.4.2commercial \ touch-2.4.2 klasörü altında bulabileceğiniz JS dosyası -
Sr.No | Dosya ve Açıklama |
---|---|
1 | sencha-touch.js Bu, uygulamayı çalıştırmak için tüm işlevleri içeren çekirdek dosyadır. |
2 | sencha-touch-all.js Bu dosya, dosyada yorum olmadan küçültülmüş tüm kodu içerir. |
3 | sencha-touch-debug.js Bu, hata ayıklama amacıyla sencha-touch-all.js'nin küçültülmemiş sürümüdür. |
4 | sencha-touch-all-debug.js Bu dosya da küçültülmemiş ve herhangi bir hatayı / sorunu kontrol etmek için tüm yorumları ve konsol günlüklerini içerdiğinden geliştirme amacıyla kullanılır. |
Bu dosyaları projelerinizin JS klasörüne ekleyebilir veya dosyaların sisteminizde bulunduğu yere doğrudan bir yol sağlayabilirsiniz.
CSS Files - I: \ sencha touch \ sencha-touch-2.4.2-commercial \ touch-2.4.2 \ resources \ css \ sencha-touch.css klasöründe bulabileceğiniz temaya dayalı çok sayıda dosya vardır.
Bu kütüphane dosyaları Sencha Touch uygulamasına aşağıdaki şekilde eklenecektir -
<html>
<head>
<script type = "text/javascript" src = "../sencha-touch-2.4.2-commercial/touch-2.4.2/sencha-touch-all.js"></script>
<link href = "../sencha-touch-2.4.2-commercial/touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type ="text/javascript" src = "app.js" > </script>
</head>
</html>
Sencha Touch uygulama kodunu app.js dosyasında tutabilirsiniz.
CDN Kurulumu
CDN, Sencha Touch kitaplık dosyalarını indirmenize gerek olmayan içerik dağıtım ağıdır, bunun yerine ExtJS için CDN bağlantısını aşağıdaki şekilde programınıza doğrudan ekleyebilirsiniz -
<html>
<head>
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" />
<script type = "text/javascript" src = "app.js" > </script>
</head>
</html>
Popüler Editörler
Web uygulamaları geliştirmek için kullanılan bir JavaScript çerçevesi olduğundan, proje HTML, JS dosyalarına sahip olacak ve Ext JS programlarınızı yazmak için bir metin düzenleyiciye ihtiyacınız olacak. Piyasada birden fazla IDE mevcuttur. Ancak şimdilik aşağıdakilerden birini düşünebilirsiniz -
Notepad - Windows makinede, Not Defteri (Bu eğitim için önerilir), Notepad ++ gibi herhangi bir basit metin düzenleyiciyi kullanabilirsiniz.
Brackets - İndirilebilen başka bir popüler IDE http://brackets.io/ .
Sublime - İndirilebilen başka bir popüler IDE https://www.sublimetext.com/3/ .
Naming conventiontanımlayıcılar için uyulması gereken bir dizi kuraldır. Kodu diğer programcılar için de kolayca okunabilir ve anlaşılır hale getirir.
Sencha Touch'taki adlandırma kuralı, zorunlu olmayan ancak uyulması iyi bir uygulama olan standart JavaScript kuralını izler. Sınıfı, yöntemi, değişkeni ve özellikleri adlandırmak için deve durumu sözdizimini takip etmelidir.
İsim iki kelimeyle birleştirilirse, ikinci kelime her zaman büyük harfle başlar. Örneğin, doLayout (), StudentForm, firstName, vb.
Sr.No. | İsim ve Kongre |
---|---|
1 | Class Name Büyük harfle başlamalı ve ardından deve harfleri gelmelidir. Örneğin, StudentClass |
2 | Method Name Küçük harfle başlamalı ve ardından deve harfiyle başlamalıdır. Örneğin, studentMethod () |
3 | Variable Name Küçük harfle başlamalı ve ardından deve harfiyle başlamalıdır. Örneğin, studentName |
4 | Constant Name Yalnızca büyük harf olmalıdır. Örneğin, COUNT, MAX_VALUE |
5 | Property Name Küçük harfle başlamalı ve ardından deve harfiyle başlamalıdır. Örneğin, enableColumnResize = true |
Herhangi bir mobil uygulama için en alt katman işletim sistemidir, bunun üzerine herhangi bir şey veya her şey inşa edilir. Ardından uygulamaları çalıştıracağımız tarayıcılara sahibiz. Chrome, Safari, IE herhangi bir şey olabilir. Üst katman, herkes için ortak olan bir W3 standartlarıdır. Sencha Touch, tek bir uygulamayı farklı cihazların farklı tarayıcılarıyla uyumlu hale getiren HTML5'ten başka bir şey olmayan W3 standartlarının üzerine inşa edilmiş veya dayanmaktadır.
Sencha Touch, üç çerçevenin birleşimidir - ExtJs, JqTouch ve Raphael (vektör çizimi). MVC mimarisini takip eder. MVC, kodu daha yönetilebilir parçalara ayırır.
Mimari program için zorunlu olmasa da, kodunuzu yüksek oranda bakım ve organize hale getirmek için bu yapıyı takip etmek en iyi uygulamadır.
Sencha Touch App ile Proje Yapısı
----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files
Sencha Touch uygulama klasörü, projenizin JavaScript klasöründe yer alacaktır.
Uygulama, app.js içeren denetleyici, görünüm, model, mağaza ve yardımcı program dosyalarını içerir.
app.js- Program akışının başlayacağı ana dosya. <script> etiketi kullanılarak ana HTML dosyasına dahil edilmelidir. Uygulama, işlevselliğin geri kalanı için uygulama denetleyicisini çağırır.
Controller.js- Sencha Touch MVC mimarisinin kontrolör dosyasıdır. Bu, uygulamanın tüm denetimini, olay dinleyicilerini ve kodun işlevlerinin çoğunu içerir. Şu görevleri gerçekleştirir: yönlendirme, görünüm ve model arasında ara ve olayları yürütür.
View.js- Kullanıcıya gösterilen uygulamanın arayüz kısmını içerir. Sencha Touch, ihtiyaca göre genişletilebilen ve özelleştirilebilen çeşitli UI zengin görünümleri kullanır.
Store.js- Model nesnelerinin yardımıyla görünümde oluşturulacak yerel olarak önbelleğe alınmış verileri içerir. Mağaza, hizmetlerin arka uç verilerini getirmesi için tanımlanan yola sahip olan proxy'leri kullanarak verileri alır.
Model.js- Mağaza verilerini görüntülemek için bağlayan nesneleri içerir. Temelde veritabanıyla ilgilenen gerçek dünya nesnesinin temsilidir.
Utils.js- MVC mimarisine dahil değildir, ancak kodu temiz, daha az karmaşık ve daha okunaklı hale getirmek için bunu kullanmak en iyi uygulamadır. Bu dosyaya yöntemler yazabilir ve bunları denetleyici veya görüntü oluşturucuda gerektiği yerde çağırabiliriz. Kodun yeniden kullanılabilirliği için de faydalıdır.
MVC, Model View Controller anlamına gelir. Uygulamayı mantıksal bileşenlere ayırarak daha yönetilebilir hale getiren mimari bir modeldir.
Aşağıdaki diyagram, MVC mimarisinin nasıl çalıştığını gösterir -
Controller - Denetleyici, modelin değişip değişmediğini görünüme bildirir ve kullanıcı girdilerine göre eylemler gerçekleştirir.
View- Uygulamanın kullanıcıya görsel olan arayüz kısmını içerir. Denetleyiciye kullanıcı girişindeki modeli değiştirmesini bildirir.
Model- Mağaza verilerini görüntülemek için bağlayan nesneleri içerir. Temelde veritabanıyla ilgilenen gerçek dünya nesnesinin temsilidir. Ayrıca, görünümdeki herhangi bir değişiklik için denetleyiciyi bilgilendirir.
Bu bölümde, Ext JS'de ilk Hello World programını yazma adımlarını listeleyeceğiz.
Aşama 1
Seçtiğimiz bir düzenleyicide bir index.htm sayfası oluşturun. Gerekli kitaplık dosyalarını html sayfasının baş kısmına aşağıdaki gibi ekleyin.
index.htm
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js">
</script>
<script type = "text/javascript">
Ext.application( {
name: 'Sencha', launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true, items: [{
title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
<body>
</body>
</html>
Açıklama
Ext.application () yöntemi, Sencha Touch uygulamasının başlangıç noktasıdır. Name özelliğiyle bildirilen 'Sencha' adlı global bir değişken oluşturur - Modeller, Görünümler ve Denetleyiciler gibi tüm Uygulama sınıfları bu tek ad alanı altında yer alır ve bu da global değişkenlerin ve dosya adlarının çarpışma olasılığını azaltır.
launch () yöntemi, sayfa hazır olduğunda ve tüm JavaScript dosyaları yüklendiğinde çağrılır.
Ext.create () yöntemi, Sencha Touch'ta bir nesne oluşturmak için kullanılır. Burada Ext.tab.Panel basit panel sınıfından bir nesne oluşturuyoruz.
Ext.tab.Panel, Sencha Touch'ta bir panel oluşturmak için önceden tanımlanmış sınıftır.
Her Sencha Touch sınıfı, bazı temel işlevleri gerçekleştirmek için farklı özelliklere sahiptir.
Ext.Panel sınıfı, -
fullscreen özellik tam bir ekrandan yararlanmaktır, dolayısıyla panel tam ekran alanı kaplar.
items özellik, çeşitli öğeler için konteynerdir.
iconCls farklı simgeleri görüntülemek için kullanılan sınıftır.
title özellik, başlığın panele verilmesidir.
html özellik, panelde gösterilecek html içeriğidir.
Adım 2
İndex.htm dosyasını standart bir tarayıcıda açın ve aşağıdaki çıktıyı alacaksınız.
Günümüzün web uygulaması talebi, daha az geliştirme çabasıyla hızlı bir uygulama geliştirmektir. Sencha Touch, özel bir yapı oluşturmak için tesisle birlikte geliştirme veya üretim koduna dayalı olarak seçim yapabileceğiniz bir dizi yapı kitaplığı sağladığı için bunu kolaylıkla yapmanıza yardımcı olur.
Sencha Touch derleme kitaplıkları sınıfları dinamik olarak yükler. Dinamik yükleme, gerektiğinde yüklenen sınıfları ifade eder ve yalnızca uygulamada gerekli olan sınıflar dahil edilir. Bu, yüklenecek dosya sayısı azaldıkça uygulamanın daha hızlı çalışmasını sağlar ve aynı zamanda yükleme süresini azaltır.
Sencha Touch 2.x, aşağıdaki beş yapı kitaplığını sağlar.
Sr.No. | Yapılar ve Kullanım |
---|---|
1 | sencha-touchdebug.js Bu yapı, uygulamayı yerel olarak geliştirirken kullanılır. Geliştirme sırasında kolay hata ayıklama için tüm yorumları ve hata ayıklama günlüklerini içeren küçültülmemiş bir sürümdür. |
2 | senchatouch.js Bu dosya üretim amaçlı kullanılmaktadır. Özel bir yapımız olduğunda küçültülmüş versiyondur. |
3 | sencha-touchall.js Bu dosya üretim amaçlı kullanılmaktadır. Özel bir yapımız olmadığında küçültülmüş versiyondur. |
4 | sencha-touchall-debug.js Bu dosya, üretimde hata ayıklama için kullanılır. Küçültülmemiştir ve tüm yorumları ve hata ayıklama günlüklerini içerir. |
5 | sencha-touchall-compat.js Bu yapı, 1.x sürümünü 2.x sürümüne taşımak için kullanılır. Sürüm 1.x kodunun uyumlu olmadığı ve kod değişikliği gerektiren her yerde uyarı verir. |
Yukarıda belirtilen yapılarla Sencha Touch, özel yapılar oluşturmak için bir tesis sağlar.
Özel Bir Yapıya Sahip Olmanın Avantajları
Özel derleme, tüm dokunmatik dosyaları yüklemez. Yalnızca uygulamada kullandığımız dosyaları yükler, bu da uygulamayı daha hızlı ve kolay bakım yapılabilir hale getirir.
Sencha CMD, özel bir yapı oluşturmak için kullanılır. Sencha CMD'de özel bir yapı oluşturmak için, uygulama dosyasının bulunduğu dizine gidin ve bir yapı oluşturmak için aşağıdaki komutlardan birini yazın.
Sr.No. | Komut ve Kullanım |
---|---|
1 | sencha app build native Uygulamayı oluşturur ve bir uygulamayı paketlemek için kullanabileceğiniz packager.temp.json adlı bir dosya hazırlar - packager.temp.json, packager.json ile aynıdır, ancak ek yollar içerir. |
2 | sencha app build -run native Uygulamayı oluşturur ve otomatik olarak paketler ve uygun simülatörü başlatır. |
3 | sencha app build package Uygulamayı paketleme desteğiyle oluşturur, ancak bir paketleyici JSON dosyası yapılandırmaz. Bu, birden çok packager.json dosyasını manuel olarak tutan projeler için kullanışlıdır. |
Derleme başarılı olduktan sonra, üretime hazır hale getirmek için index.html'ye eklememiz gereken all-classes.js dosyasını oluşturacaktır.
Aşağıdaki kod, üretime hazır kod için yapılacak değişiklikleri göstermektedir.
Index.html before building application
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-debug.js"></script>
<script type = "text/javascript" src = "app.js"> </script>
</head>
<body>
</body>
</html>
Index.html after building the application
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch.js"></script>
<script type = "text/javascript" src = "app.js"> </script>
<script type = "text/javascript" src = "app-classes.js"> </script>
</head>
<body>
</body>
</html>
Sencha Touch, önceki sürümden çeşitli düzeltmelerle birlikte gelir.
Sencha Touch 2, 1.x sürümünden 2.x sürümüne geçiş sürecini kolaylaştıran geriye dönük uyumluluk yapısıyla birlikte gelir.
Bu yapı, herhangi bir geçiş sorunu oluştuğunda veya kod değişikliği gerektiğinde bir uyarı ve günlükler sağlayarak işi kolaylaştırır, böylece kullanıcı, uygulamanın en son sürümle çalıştığından emin olmak için değişikliklerin nerede olması gerektiğini bilir.
Sencha Touch 2.x geçişi aşağıdaki kod değişikliklerini gerektirir.
Sınıf sistemi
Code in Sencha Touch 1.x -
MyApp.view.StudentPanel = Ext.extend(Ext.Panel, {
scroll: 'vertical',
html: 'Student Panel'
initComponent: function() {
Ext.getCmp('StudentIdDiv').update('This is a Student panel');
}
});
Code in Sencha Touch 2.x -
Ext.define('MyApp.view.StudentPanel', {
extend: 'Ext.Panel',
config: {
scroll: 'vertical',
html: 'Student Panel'
},
initialize: function() {
Ext.getCmp('StudentIdDiv').setHtml('This is a Student panel')
}
});
Her iki sürüme de bakarak, sınıf yaratmanın yolunun şu anda ExtJ'lerden esinlenen değişiklikler olduğunu görebilirsiniz:
Ext.extend, Ext.define olarak değiştirildi.
Sınıfla ilgili tüm yapılandırma parametreleri artık config parametresi altında tanımlanmıştır.
İnitComponent, initialize () yöntemine değiştirildi.
Sencha Touch 2.x'de html'yi güncellemek veya değeri almak için setHtml () ve getHtml () işlevlerine sahip olabiliriz.
MVC Mimarisi
Sencha Touch 1.x kodu modülerdi ve MVC mimarisine dayanıyordu. Sencha Touch 2.x, model, görünüm ve kontrolör yazmak için farklı bir sözdizimi izler. Farklı sürümlerdeki model, görünüm ve denetleyici dosyalarının farkını görelim.
Modeli
Code in Sencha Touch 1.x -
Ext.regModel('MyApp.model.StudentModel', {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}
]
});
Code in Sencha Touch 2.x -
Ext.define('MyApp.model.StudentModel', {
extend: 'Ext.data.Model', config: {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}
]
}
});
Ext.regModel, Ext.data.Model'i genişleten Ext.define olarak değiştirildi.
Tüm alanlar şimdi 2.x sürümünde yapılandırma bölümüne geliyor.
Görünüm
Code in Sencha Touch 1.x -
Ext.Panel("studentView", {
items: [{}]
});
Code in Sencha Touch 2.x -
Ext.define('MyApp.view.StudentView', {
extend: 'Ext.tab.Panel',
items: [{}]
});
View hemen hemen aynıdır, görünüm adındaki tek değişiklik Myapp.view.StudentView gibi 2.x sürüm ad aralığını takip eder ve kod Ext.define yöntemiyle aynı modelde yazılır.
Kontrolör
Code in Sencha Touch 1.x -
Ext.regController("studentController", {
someMethod: function() {
alert('Method is called');
}
});
Code in Sencha Touch 2.x -
Ext.define('MyApp.controller.studentController', {
extend: 'Ext.app.Controller', someMethod: function() {
alert('Method is called');
}
});
Kontrolördeki modelle aynı. Ayrıca Ext.regController, Ext.app.Controller'ı genişleten Ext.define olarak değiştirildi.
Uygulama
Code in Sencha Touch 1.x -
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.StudentView');
}
});
Code in Sencha Touch 2.x -
Ext.application({
name: 'MyApp',
models: ['studentModel'],
controllers: ['studentController'],
views: ['studentView'],
stores: ['studentStore'],
launch: function() {
Ext.create('MyApp.view.Main');
}
});
Sürüm 1.x ve sürüm 2.x arasındaki en büyük fark, 2.x'te uygulamanın kendisindeki tüm modelleri, görünümleri, denetleyicileri ve depoları beyan etmemizdir.
Sencha Touch, sınıf sistemi, ajax, kontrolörler vb. Gibi çeşitli temel konseptlere sahiptir.
Aşağıdaki tablo, Sencha Touch'ın temel konseptlerini listelemektedir.
Sr.No. | Konsept ve Açıklama Bağlantısı |
---|---|
1 | Sınıf sistemi |
2 | Bileşenler |
3 | Kontrolörler |
4 | BlackBerry desteği |
5 | Ajax kullanımı |
Sencha Touch'taki veri paketi, verilerin depolanması veya yüklenmesi ile her türlü veri işlemenin gerçekleştirilmesinden sorumludur.
Veri paketleri model, mağaza ve proxy'ler ile ilgilidir.
Sr.No. | Konsept ve Açıklama Bağlantısı |
---|---|
1 | Model Tüm değerleri kullanıcı arayüzünde görüntülediğimiz veri ve alanların toplanmasıdır. Açıklama |
2 | Store Temelde verileri yerel olarak depolayan model örneklerinin bir koleksiyonudur. Depoda veri almak için tüm olayları ve dinlenme çağrılarını yazıyoruz. Açıklama |
3 | Proxy Depodaki verilerin yüklenmesinden temel olarak sorumludur. Depo verilerini yüklemek için çoğunlukla ajax proxy kullanıyoruz. Açıklama |
Sencha Touch, uygulamalarınızda kullanılmak üzere bir dizi tema sağlar. Klasik tema yerine farklı temalar ekleyebilir ve uygulama için kullandığımız cihaza göre çıktıdaki farkı görebilirsiniz. Bu, aşağıdaki örnekte açıklandığı gibi tema CSS dosyasını değiştirerek basitçe yapılır.
Masaüstü Teması
İlk Hello World başvurunuzu düşünün. Uygulamadaki aşağıdaki CSS, masaüstü teması için kullanılır.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Etkiyi görmek için aşağıdaki programı deneyin -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type="text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>
Bu, aşağıdaki sonucu verecektir -
Windows Teması
İlk Hello World başvurunuzu düşünün. Aşağıdaki CSS'yi uygulamadan kaldırın -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Windows temasını kullanmak için aşağıdaki CSS'yi ekleyin.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css
Etkiyi görmek için aşağıdaki programı deneyin -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>
Bu, aşağıdaki sonucu verecektir -
IOS Teması
İlk Hello World başvurunuzu düşünün. Aşağıdaki CSS'yi uygulamadan kaldırın.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Windows temasını kullanmak için aşağıdaki CSS'yi ekleyin
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css
Etkiyi görmek için aşağıdaki programı deneyin -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>
Bu, aşağıdaki sonucu verecektir -
IOS Klasik Teması
İlk Hello World başvurunuzu düşünün. Aşağıdaki CSS'yi uygulamadan kaldırın -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Windows temasını kullanmak için aşağıdaki CSS'yi ekleyin -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css
Etkiyi görmek için aşağıdaki programı deneyin -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>
Bu, aşağıdaki sonucu verecektir -
Android Teması
İlk Hello World başvurunuzu düşünün. Aşağıdaki CSS'yi uygulamadan kaldırın.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Windows temasını kullanmak için aşağıdaki CSS'yi ekleyin.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css
Etkiyi görmek için aşağıdaki programı deneyin -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>
Bu, aşağıdaki sonucu verecektir -
BlackBerry Teması
İlk Hello World başvurunuzu düşünün. Aşağıdaki CSS'yi uygulamadan kaldırın.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Windows temasını kullanmak için aşağıdaki CSS'yi ekleyin.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css
Etkiyi görmek için aşağıdaki programı deneyin -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>
Bu, aşağıdaki sonucu verecektir -
Günümüzün teknoloji dünyasında, farklı ekran boyutlarına sahip mobil, tablet, masaüstü ve dizüstü bilgisayar gibi birden çok cihazımız var. Bu nedenle, tüm cihazlardan iyi bir görünüm ve his ile erişilebilen uygulamalar geliştirmeye ihtiyaç vardır. Bununla birlikte, farklı cihazlar için farklı kod geliştirmek çok zaman alıcı ve maliyetlidir.
Sencha Touch, bir cihaz profili özelliği sunarak bu konuda bize yardımcı oluyor. Aktif profile bağlı olarak, farklı bağımlılıklar çalıştırılacak ve uygulanabilir.
Bir uygulama kodu yazarken cihaz profilini tanımlayabiliriz. Birden fazla cihazımız olabilir -
Ext.application({
name: 'MyApp',
profiles: ['Phone', 'Tablet']
});
Tamamlandığında, profiller şu şekilde yüklenecektir -
- MyApp.profiles.Phone.js
- MyApp.profiles.Tablet.js
Basit bir telefon profili yazmak
Ext.define('Mail.profile.Phone', {
extend: 'Ext.app.Profile',
config: {
name: 'Phone',
views: ['phoneView']
},
isActive: function() {
return Ext.os.is('Phone');
}
});
Basit bir tablet profili yazmak
Ext.define('Mail.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
name: 'Tablet',
views: ['tableView']
},
isActive: function() {
return Ext.os.is('Tablet');
}
});
Profilde görebileceğimiz gibi, belirli bir cihazın aktif olup olmadığını belirleyen isActive fonksiyonumuz var. Cihaz etkinse, ilgili bağımlılıklar yüklenecek ve somutlaştırılacaktır.
Yukarıdaki örnekte belirtildiği gibi, telefon cihazı kullanıyorsak, telefon profilinin isActive işlevi true olarak dönecek ve telefon cihazı ile ilgili bağımlılıklar yüklenecektir; burada phoneView yüklenecek. Cihaz bir tablet ise, telefon profilinin isActive işlevi yanlış döndürür ve tablet profilinin isActive işlevi doğru döndürür ve bağımlılık tabletView yüklenir.
Başlatma Süreci
Burada dikkat edilmesi gereken bir nokta daha, uygulamada profillere sahip olduğumuzda, uygulama kodunun yüklenmesi ve somutlaştırılması aşağıdaki sırada olacaktır -
- İlk önce denetleyiciler başlatılır ve her denetleyicinin başlatma işlevi yüklenecektir.
- Profilin başlatma işlevi çağrılacaktır.
- Uygulamanın başlatma işlevi çağrılacaktır.
Hem profilin hem de uygulamanın başlatma işlevleri isteğe bağlıdır, dolayısıyla bunlardan herhangi birini tanımlamazsak çağrılmazlar.
Farklı başlatma ve başlatma işlevlerinin nerede ve nasıl tanımlanabileceğini kontrol etmek için aşağıdaki koda bir göz atın.
Denetleyicinin başlatma işlevi
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
init : function (){
Ext.Msg.alert('Controller's init method');
},
config: {
refs: {
tab: '#divId
}
}
});
Profilin başlatma işlevi
Ext.define('Mail.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
name: 'Tablet', views: ['tableView']
},
isActive: function() {
return Ext.os.is('Tablet');
}
launch : function() {
Ext.Msg.alert('profile's launch function');
}
});
Uygulamanın başlatma işlevi
Ext.application({
name: 'Sencha', launch: function() {
Ext.Msg.alert(Application's launch function);
}
});
Sencha Touch'ta, biri uygulama içinde diğeri sınıflar içinde olmak üzere bağımlılıkları bildirmek için tanımlanmış belirli yollar vardır.
Bağımlılıkları tanımlamanın farklı yollarına bir göz atalım.
Uygulama Seviyesi Bağımlılıkları
Burada Ext.application oluşturduğumuzda tüm bağımlılıkları bildiriyoruz.
Ext.application({
name: 'MyApp',
views: ['StudentsView'],
models: ['StudentsModel'],
controllers: ['StudentsController'],
stores: ['StudentsStore'],
profiles: ['Phone', 'Tablet']
});
Artık uygulama yüklendiğinde, tüm bağımlılıklar aynı anda yüklenecek. Diğer dosyaların yolu -
- MyApp.views.StudentsView
- MyApp.models.StudentsModel
- MyApp.stores.StudentsStore vb.
Yukarıdaki beyan yolu sadece dosyayı yüklemekle kalmaz, aynı zamanda hangi profili aktif tutması gerektiğine de karar verir. Denetleyiciyi yükledikten sonra, onun somutlaştırıldığından emin olur. Depolar yüklendikten sonra, onları başlatır ve önceden verilmemişse bir kimlik sağlar.
Profile özgü Bağımlılıklar
Profilleri bir uygulamada kullandığımızda, yalnızca bazı özel profiller için birkaç işlevin gerekli olma olasılığı olabilir.
Profile özgü bağımlılıklar, uygulama düzeyi bildirimi yerine profillerin kendisinde bildirilir.
Ext.define('MyApp.profile.Tablet', {
extend: 'Ext.app.Profile', config: {
views: ['StudentView'], controllers: ['StudentController'], models: ['StudentModel']
}
});
Bağımlılıklar, profilin etkin olup olmadığına bakılmaksızın yüklenir. Ancak, etkin profile bağlı olarak, denetleyici ve depoları örnekleme gibi ek işlemler gerçekleşir.
İç İçe Bağımlılıklar
Daha büyük bir uygulamaya sahip olduğumuzda, birden çok denetleyicimiz, modelimiz, görünümümüz ve mağazamız vardır.
Daha büyük uygulamalarda modülerliği korumak her zaman iyidir. Bunun için alt klasörler tanımlayabiliriz ve bağımlılıkları bildirirken bildirmek için alt klasör adını kullanabiliriz.
Ext.application({
name: 'MyApp',
controllers: ['Controller', 'nested.NewController'],
views: ['class.Cview', 'SView']
});
Yukarıdaki durumda, aşağıdaki dosyalar yüklenecektir -
- MyApp.controllers.Controller
- MyApp.controllers.nested.NewController
- MyApp.Views.Sview
- MyApp.Views.class.Cview
Dış Bağımlılıklar
Sınıfların tam nitelikli adlarını aşağıdaki gibi vererek uygulama dışındaki bağımlılıkları belirleyebiliriz -
Ext.Loader.setPath({
'Class': 'Class'
});
Ext.application({
views: ['Class.view.LoginForm', 'Welcome'],
controllers: ['Class.controller.Sessions', 'Main'],
models: ['Class.model.User']
});
Yukarıdaki durumda, aşağıdaki dosyalar yüklenecektir -
- Class/view/LoginForm.js
- Class/controller/Sessions.js
- Class/model/User.js
- app/view/Welcome.js
- app/controller/Main.js
Hangi işletim sistemini kullandığınızı, hangi tarayıcıda çalıştığınızı ve ortamınız için mevcut olan özelliklerin neler olduğunu belirlemenize yardımcı olur.
Sencha Touch, ortama özgü bilgileri almak için farklı işlevler sağlar. Koşul eğer (Ext.os.is.Windows) {} ise ve koşul görevlerine bağlıysa, aşağıda belirtilen tüm yöntemler kontrol edilebilir.
Aşağıdaki yöntemlerin tümü Boole değerini döndürür.
İşletim sistemi
Ext.os, hangi işletim sistemi üzerinde çalıştığımızı bilmeniz için size farklı yöntemler sunan bir sınıftır.
Sr.No | Yöntem ve Açıklama |
---|---|
1 | Ext.os.is.webOS Bu işlev, webos işletim sistemini kullanıyorsanız doğru döndürür, aksi takdirde yanlış döndürür. |
2 | Ext.os.is.RIMTable Bu işlev, RIMTable işletim sistemini kullanıyorsanız, doğru döndürür, aksi takdirde yanlış döndürür. |
3 | Ext.os.is.Linux Linux işletim sistemi kullanıyorsanız, bu işlev true değerini döndürür, aksi takdirde false döndürür. |
4 | Ext.os.is.Windows Bu işlev, Windows işletim sistemi kullanıyorsanız, doğru döndürür, aksi takdirde yanlış döndürür. |
5 | Ext.os.is.MacOs Bu işlev, Mac işletim sistemi kullanıyorsanız, doğru olarak dönecektir, aksi takdirde yanlış döndürür. |
6 | Ext.os.is.BlackBerry BlackBerry işletim sistemini kullanıyorsanız bu işlev doğru olarak dönecektir, aksi takdirde yanlış döndürür. |
7 | Ext.os.is.iOS Bu işlev, eğer IOS işletim sistemi kullanıyorsanız, doğru, aksi takdirde yanlış döndürür. |
8 | Ext.os.is.Android Bu işlev, Android işletim sistemini kullanıyorsanız doğru döndürür, aksi takdirde yanlış döndürür. |
Cihaz Tespiti
Sr.No | Yöntem ve Açıklama |
---|---|
1 | Ext.os.is.iPad Bu işlev, iPad kullanıyorsanız doğru olarak dönecektir, aksi takdirde yanlış döndürür. |
2 | Ext.os.is.iPhone İPhone kullanıyorsanız, bu işlev doğru döndürür, aksi takdirde yanlış döndürür. |
3 | Ext.os.is.iPod İPod kullanıyorsanız bu işlev doğru, aksi takdirde yanlış döndürür. |
İşletim Sisteminin Sürümü
Sr.No | Yöntem ve Açıklama |
---|---|
1 | Ext.os.name İşletim sisteminin adını döndürür. |
2 | Ext.os.version.version Kullandığımız işletim sisteminin versiyonunu verir. |
Tarayıcı Algılama
Sr.No | Yöntem ve Açıklama |
---|---|
1 | Ext.browser.is.IE Bu işlev, eğer Internet explorer tarayıcısı kullanıyorsak true döndürür, aksi takdirde false döndürür. |
2 | Ext.browser.is.FF FireFox tarayıcısı kullanıyorsak bu işlev true döndürür, aksi takdirde false döndürür. |
3 | Ext.browser.is.Chrome Bu işlev, Chrome tarayıcısını kullanıyorsak true döndürür, aksi takdirde false döndürür. |
4 | Ext.browser.is.Opera Opera tarayıcısını kullanıyorsak bu işlev true döndürür, aksi takdirde false döndürür. |
5 | Ext.browser.is.Safari Safari tarayıcısını kullanıyorsak bu işlev true döndürür, aksi takdirde false döndürür. |
Bu Ext.browser işlevi çeşitli başka işlevler sağlar -
Sr.No | Yöntem ve Açıklama |
---|---|
1 | Ext.browser.userAgent Mevcut userAgent'ı döndürür. |
2 | Ext.browser.isSecure Mevcut sayfa SSL kullanıyorsa doğru döndürür. |
3 | Ext.browser.isStrict Tarayıcı katı modda ise true döndürür. |
4 | Ext.browser.engineName Tarayıcı motoru adını (WebKit, Gecko, Presto, Trident ve Diğer) döndürür. |
5 | Ext.browser.engineVersion Tarayıcı motorunun sürümünü döndürür. |
Özellikleri
Ext.feature.has, tarayıcının aşağıdaki özelliğe sahip olup olmadığını kontrol etmektir.
Sr.No | Yöntem ve Açıklama |
---|---|
1 | Ext.feature.has.Audio Tarayıcı html5'in ses etiketi özelliğini destekliyorsa, bu yöntem true değerini döndürür. |
2 | Ext.feature.has.Canvas Tarayıcı, html5'in canvas tag özelliğini destekliyorsa bu yöntem true değerini döndürür. |
3 | Ext.feature.has.classList Tarayıcı, html öğesi için css sınıflarını eklemek, kaldırmak ve değiştirmek için kullanılan html5'in classlist özelliğini destekliyorsa bu yöntem true değerini döndürür. |
4 | Ext.feature.has.Css3dTransforms Tarayıcı, css3'ün Css 3d Dönüştürme özelliğini destekliyorsa bu yöntem true değerini döndürür. |
5 | Ext.feature.has.CssAnimations Tarayıcı, css3 animasyonlarını destekliyorsa bu yöntem true değerini döndürür. |
6 | Ext.feature.has.CssTransforms Tarayıcı, css3'ün Css dönüştürme özelliğini destekliyorsa bu yöntem true değerini döndürür. |
7 | Ext.feature.has.CssTransitions Tarayıcı, css3'ün geçiş özelliğini destekliyorsa bu yöntem true değerini döndürür. |
8 | Ext.feature.has.DeviceMotion Bu yöntem, tarayıcı cihaz hareket özelliğini destekliyorsa doğru döndürür. |
9 | Ext.feature.has.Geolocation Bu yöntem, tarayıcı html5'in Coğrafi Konum özelliğini destekliyorsa true değerini döndürür. |
10 | Ext.feature.has.History Tarayıcı html'nin geçmiş özelliğini destekliyorsa bu yöntem true değerini döndürür. |
11 | Ext.feature.has.Orientation Bu yöntem, tarayıcı hangi aygıt yönünü algılayabilirse doğru döndürür. |
12 | Ext.feature.has.OrientationChange Tarayıcı, cihazın Yönünde bir değişiklik algılayabilirse bu yöntem doğru döndürür. |
13 | Ext.feature.has.Range Aralık, aralık kaydırıcı öğesi için bir tür html giriş etiketi olduğundan, tarayıcı kaydırıcıyı destekliyorsa bu işlev true değerini döndürür. |
14 | Ext.feature.has.SqlDatabase Web sql veritabanı, sorgu işlemlerini gerçekleştirebileceğimiz veri n veritabanını depolamak için kullanılan bir web sayfası api'sidir. Tarayıcı web Sql Veritabanını destekliyorsa bu yöntem true değerini döndürür. |
15 | Ext.feature.has.Svg Svg, Ölçeklenebilir Vektör Grafikleri anlamına gelir. Bu yöntem, tarayıcı html 5'in svg özelliğini destekliyorsa doğru değerini döndürür. |
16 | Ext.feature.has.Touch Tarayıcının Dokunma özelliği varsa bu yöntem doğru döndürür. |
17 | Ext.feature.has.Video Tarayıcı html 5 video etiketlerini destekliyorsa bu yöntem true değerini döndürür. |
18 | Ext.feature.has.Vml Vml, xml tabanlı bir biçimlendirme dili olan vektör biçimlendirme dilinin kısaltmasıdır. Dolayısıyla, tarayıcı vml'yi destekliyorsa bu yöntem true değerini döndürür. |
19 | Ext.feature.has.WebSockets Web soketi, temelde, istemciler ve sunucu arasında iki iletişimi destekleyen bilgisayarlar için bir iletişim protokolüdür. Bu yöntem, tarayıcı WebSockets'i destekliyorsa true değerini döndürür, aksi takdirde false döndürür. |
Olaylar, sınıfa bir şey olduğunda ateşlenen şeylerdir. Örneğin, bir düğme tıklandığında veya bir öğe oluşturulmadan önce / sonra.
Etkinlik Yazma Yöntemleri
Olayları yazma yöntemleri aşağıdadır.
- Dinleyicileri kullanan yerleşik olaylar.
- Olayları daha sonra eklemek
- Özel olaylar
Dinleyicileri Kullanan Yerleşik Etkinlikler
Sencha Touch, Sencha Touch dosyalarında olaylar ve özel olaylar yazmak için dinleyici özelliği sağlar.
Sencha Touch'ta dinleyici yazma
Aşağıdaki gibi panele listen özelliğini ekleyerek dinleyiciyi önceki programa ekleyeceğiz -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha', launch: function() {
Ext.create('Ext.Panel', {
html: 'My Panel', fullscreen: true, listeners: {
painted: function() {
Ext.Msg.alert('I was painted to the screen');
}
}
});
}
});
</script>
</head>
</html>
Bu, aşağıdaki sonucu verecektir -
Bu şekilde, listeners özelliğinde birden çok olay da yazabiliriz.
Aynı dinleyicide birden çok olay
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on({
tap: function() {
var randomWidth = 100 + Math.round(Math.random() * 200);
this.setWidth(randomWidth);
},
widthchange: function(button, newWidth, oldWidth) {
alert('My width changed from ' + oldWidth + ' to ' + newWidth);
}
});
}
});
</script>
</head>
</html>
Aşağıdaki sonucu verecektir -
Olayı daha sonra eklemek
Önceki olay yazma yönteminde, öğeler yaratma sırasında dinleyicilerde olaylar yazdık.
Olayları eklemenin diğer yolu aşağıdaki gibidir -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on('tap', function() {
alert("Event listener attached by .on");
});
}
});
</script>
</head>
</html>
Aşağıdaki sonucu verecektir -
Özel olaylar
Sencha Touch'ta özel etkinlikler yazabilir ve olayları fireEvent yöntemi ile ateşleyebiliriz. Aşağıdaki örnek, özel etkinliklerin nasıl yazılacağını açıklamaktadır.
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: "Just wait 5 seconds",
listeners: {
myEvent: function(button, points) {
alert('myEvent was fired! You score ' + points + ' points');
}
}
});
Ext.defer(function() {
var number = Math.ceil(Math.random() * 100);
myButton.fireEvent('myEvent', myButton, number);
}, 5000);
}
});
</script>
</head>
</html>
Sayfa yüklendikten ve belge hazır olduğunda, düğmeli UI sayfası görünecek ve 5 saniye sonra bir olayı tetiklediğimizde, belge hazır olduğunda 5 saniye sonra uyarı kutusu görünecektir.
Burada 'myEvent' özel olayını yazdık ve olayları button.fireEvent (eventName) olarak tetikliyoruz;
Düzen, elemanların bir kapta düzenlenme şeklidir. Bu yatay, dikey veya başka herhangi bir şey olabilir. Sencha Touch'ın kütüphanesinde tanımlanmış farklı düzenleri vardır, ancak her zaman özel düzenler de yazabiliriz.
Sr.No. | Düzen ve Açıklama |
---|---|
1 | hBox Bu düzen, elemanın yatay bir şekilde dağıtılmasına izin verir. |
2 | vBox Bu düzen, elemanın dikey bir şekilde dağıtılmasına izin verir. Bu, yaygın olarak kullanılan düzenden biridir. |
3 | Uygun Bu düzende konteyner tek bir panel ile doldurulur ve yerleşim ile ilgili özel bir gereklilik olmadığında bu düzen kullanılır. |
4 | Kart (TabPanel) Bu düzen, farklı bileşenleri sekme tarzında düzenler. Kabın üstünde sekmeler görüntülenecektir. Her seferinde yalnızca bir sekme görünür ve her sekme farklı bir bileşen olarak kabul edilir. |
Sencha Touch, tam geçmiş desteği ve derin bağlantı olanaklarıyla birlikte gelir.
Sayfayı veya uygulamayı yenilemeden kullanıcının ekranlar arasında gezinmesine yardımcı olan en basit geri düğmesi işlevine sahiptir.
Ayrıca, kullanıcının herhangi bir URL'ye gitmesine yardımcı olan rota işlevselliği de sağlar. Tarayıcı penceresinde sağlanan URL'ye bağlı olarak, belirli bir görevi gerçekleştirmek için belirli işlevleri çağırır.
Geri düğmesi işlevi için aşağıdaki örneğe bakın.
Bu örnek, bir listenin içindeki listeden başka bir şey olmayan yuvalanmış listeyi gösterir, bu nedenle liste öğelerinden herhangi birine tıkladığınızda başka bir liste açar ve ekranın üstünde bir geri düğmesi görünür.
Tam kod tabanı için kontrol edebilirsiniz Görünüm bileşen bölümü altında İç İçe Liste .
Yönlendirme
En basit yol örneği
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
routes: {
login: 'showLogin',
'user/:id': 'userId'
}
},
showLogin: function() {
Ext.Msg.alert('This is the login page');
},
userId: function(id) {
Ext.Msg.alert('This is the login page specific to the used Id provided');
}
});
Yukarıdaki örnekte, tarayıcı URL'si https://myApp.com/#login ise, showLogin işlevi çağrılacaktır.
URL'de parametreler sağlayabiliriz ve işlevin çağrılabileceği belirli parametreye göre. Örneğin, URL https://myApp.com/#user/3 ise, o zaman başka bir işlev userId çağrılır ve özel kimlik işlevlerin içinde kullanılabilir.
Gelişmiş yönlendirme
Bazen virgül, boşluk ve özel karakterler içeren gelişmiş parametrelerimiz vardır, bunun için yukarıdaki yol yazma yöntemini kullanırsak işe yaramayacaktır. Bu sorunu çözmek için Sencha touch, parametrenin kabul etmesi gereken veri türünün koşulunu belirleyebileceğimiz koşullu yönlendirme sağlar.
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller', config: {
routes: {
login/:id: {
action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }
}
},
showLogin: function() {
Ext.Msg.alert('This is the login page with specific id which matches criteria');
}
}
});
Dolayısıyla, yukarıdaki örnekte olduğu gibi, URL parametresi olarak hangi tür verilere izin verilmesi gerektiğini açıkça belirten koşulda regex verdik.
Aynı URL'yi farklı cihaz profilleri arasında paylaşma
Sencha touch, cihaz profili sağladığından, aynı uygulama kodu birden fazla cihazda kullanılabilir, farklı profillerin aynı URL için farklı işlevlere sahip olma olasılığı olabilir.
Bu sorunu çözmek için Sencha touch, bize ana denetleyicide yönlendirme yazma özgürlüğü verir ve çağrılan işlevi profiline özgü olanlarla tüm profilde yazılır.
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller', config: {
routes: {
login: 'showLogin'
}
},
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
extend: 'MyApp.controller.Main, showLogin: function() {
Ext.Msg.alert('This is the login page for mobile phone profile');
}
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
extend: 'MyApp.controller.Main,showLogin: function() {
Ext.Msg.alert('This is the login page for tablet profile');
}
});
Örnek olarak gösterildiği gibi, showLogin işlevine sahip bir ana denetleyicimiz var ve iki farklı profilimiz var (Telefon / Tablet). Her iki profil de, profile özgü farklı kodlarla showLogin işlevine sahiptir.
Bu şekilde, aynı URL'yi belirli işlevleriyle birden çok profil cihazında paylaşabiliriz.
Sencha Touch, Ajax ve Ajax2 geliştirme ile çalışmak için XHR2 yapılandırması sağlar.
XHR2, sunucudan veri talep etmek için kullanılan xmlHttpRequest düzey 2'dir. Herhangi bir web uygulaması için veriler sunucuda bulunur ve sayfa yüklendikten sonra verilere Ajax istekleri yardımıyla sunucudan erişilmelidir.
Sencha Touch'taki XHR2, kullanıcıya belirli bir istek için aktarılan veri miktarını gösteren ilerleme çubuğu özelliğini sağlar. XHR2 yeni eklendi, bu nedenle tarayıcının destekleyip desteklemediğini kontrol etmemiz gerekiyor.
Aşağıda, tarayıcının XHR2'yi destekleyip desteklemediğini kontrol etme işlevi verilmiştir -
if (Ext.feature.has.XHR2) {
// Here we can write functionality to work if browser supports XHR2
}
XHR2 ile aşamalı yüklemenin tarayıcı tarafından desteklenip desteklenmediğini bile kontrol edebiliriz.
if (Ext.feature.has.XHRUploadProgress) {
// Here we can write functionality to work if browser supports progressive uploads
}
Sencha Touch'a çeşitli yeni XHR2 özellikleri dahildir.
Sr.No | Özellikler ve Açıklama |
---|---|
1 | XHR2: true Bu, uygulamada XHR2 işlevselliğini etkinleştirmek ve devre dışı bırakmak için kullanılır. |
2 | Ext.field.File Alan türü hakkında daha fazla kalite sağlamak için yeni dosya alanı eklendi. |
3 | Ext.field.FileInput Bu, FileInput sağlamak içindir. |
4 | Ext.progressIndicator Bu, ilerleme çubuğu cinsinden aktarılan verilerin tam yüzdesini sağlamak içindir. |
5 | xtype: fileinput FileInput sınıfının örneğini oluşturmak için. |
6 | xtype: filefield Dosya sınıfının örneğini oluşturmak için. |
7 | responseType : value Bu parametre, metin, belge, blob vb. Gibi çeşitli yanıt türlerine izin verir. |
Aşağıda, parametreli ve parametresiz basit ajax isteği gönderme ve ajax kullanarak dosya yükleme örnekleri verilmiştir.
Parametreleri olmayan basit Ajax isteği - Başarılı
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/index.htm',
method: 'POST',
xhr2: true,
success: function(response) {
Ext.Msg.alert('Ajax call successful');
},
failure: function(response) {
Ext.Msg.alert('Ajax call failed');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
Aşağıdaki sonucu verecektir -
Yukarıdaki örnek, belirtilen URL doğru olduğu için başarılı ajax çağrısını göstermektedir. Bu örnekte, herhangi bir parametre aktarmıyoruz, bu sadece belirtilen URL'ye ulaşan basit bir ajax isteğidir.
Geliştirici aracında krom tarayıcı kullanıyorsanız, ağ bölümüne gidin, gönderilen talebi ve aldığımız yanıtı görebilirsiniz.
Parametreleri olmayan basit Ajax isteği - Hata
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/indexx.htm',
method: 'POST',
xhr2: true,
success: function(response) {
Ext.Msg.alert('Ajax call successful');
},
failure: function(response) {
Ext.Msg.alert('Ajax call failed');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
Aşağıdaki sonucu verecektir -
Yukarıdaki örnekte, ajax başarısızlığının nasıl çalıştığını göstermek için yanlış URL'den bahsettik. Bunu ve önceki örneği karşılaştırın, farkı bulacaksınız.
Ajax isteğinde parametreler gönderme
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var formData = new FormData();
formData.append("firstName", "Hi");
formData.append("lastName", "Reader");
// Request will be sent as part of the payload instead of standard post data
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
method: 'POST',
xhr2: true,
data: formData,
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
Ext.Msg.alert(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
Ext.Msg.alert('Ajax failed!');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
Aşağıdaki sonucu verecektir -
Bu örnekte, ajax çağrısının data özelliğini kullanarak ajax ile parametreleri geçiriyoruz.
Ajax kullanarak dosya yükleme
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.setup({
requires: [
'Ext.Panel',
'Ext.MessageBox',
'Ext.Button',
'Ext.ProgressIndicator',
'Ext.form.Panel',
'Ext.field.FileInput'
],
onReady: function() {
var progressIndicator = Ext.create("Ext.ProgressIndicator", {
loadingText: "Uploading: {percent}%"
});
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
method: 'POST',
xhr2: true,
progress:progressIndicator,
success: function(response) {
Ext.Msg.alert('File uploaded successfully.');
},
failure: function(response) {
Ext.Msg.alert('File upload failed.');
}
};
Ext.Viewport.add(progressIndicator);
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"fileinput",
accept:"image/jpeg"
},
{
xtype:"button",
text: "Upload",
ui: 'confirm',
handler: function(){
var input = Ext.Viewport.down("fileinput").input;
var files = input.dom.files;
if (files.length) {
request.binaryData = files[0];
Ext.Ajax.request(request);
}else {
Ext.Msg.alert("Please Select a JPG");
}
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
Aşağıdaki sonucu verecektir -
Bu örnek, ajax çağrısı kullanılarak verilerin nasıl yükleneceğini gösterir. Bu örnekte, dosyayı yüklerken ilerlemeyi göstermek için ilerleme çubuğu göstergesini kullanıyoruz.
Sencha Touch, gereksinimlere göre özelleştirilebilen çeşitli UI bileşenleri sağlar.
Sr.N0. | Bileşen Açıklaması |
---|---|
1 | Atlıkarınca Bu UI bileşeni, Atlı Karınca görüntülemek için kullanılır. |
2 | Liste Bu UI bileşeni listeleri görüntülemek için kullanılır. |
3 | Yuvalanmış Liste Bu UI bileşeni, iç içe geçmiş listeyi görüntülemek için kullanılır. |
4 | Form Bu UI bileşeni, Formları görüntülemek için kullanılır. |
5 | Grafik Bu kullanıcı arayüzü bileşeni, farklı grafik türlerini görüntülemek için kullanılır. |
6 | Yüzer Bileşen Bu UI bileşeni, kayan bileşeni görüntülemek için kullanılır. |
7 | Sekme Paneli Bu UI bileşeni, Sekme paneli görünümünü görüntülemek için kullanılır. |
8 | Navigasyon Görünümü Bu UI bileşeni, navigasyon görünümünü görüntülemek için kullanılır. |
9 | İşlem Menüsü Bu UI bileşeni, işlem menü çubuğunu görüntülemek için kullanılır. |
10 | Veri görünümü Bu UI bileşeni, veri görünümünü görüntülemek için kullanılır. |
11 | Harita Bu UI bileşeni, google haritasını görüntülemek için kullanılır. |
Sencha Touch, yerel paketleme özellikleriyle birlikte gelir.
Sencha Touch'ın yerel ambalaj konseptleri için bağlantılar aşağıdadır.
Sr.No. | Konsept ve Açıklama Bağlantısı |
---|---|
1 | Yerel iOS temel hazırlığı |
2 | Yerel API'ler |
Temel JavaScript en iyi uygulaması
JavaScript ile ilgili tüm kodu ayrı bir yerde tutmak iyi bir uygulamadır. js (external JS) dosyaya yazmak yerine <script> başlık bölümünün altındaki etiketi veya belge gövdesindeki satır içi JavaScript.
Öğe başka bir mantıkta kullanılmadan önce her zaman boş bir denetim gerçekleştirin.
Kodun diğer programcılar tarafından anlaşılmasını kolaylaştırdığı için her zaman adlandırma kuralına uyun.
Kodu kolayca anlaşılır kılmak için, JS yöntemlerine yönelik yorumların, bir işlevin ne yaptığının arkasında net bir mantıkla yazılması her zaman tercih edilir.
Sencha Touch'a özgü en iyi uygulama
JS sıkıştırma veya küçültme sırasında yardımcı olacak Sencha Touch'ın önerilen klasör yapısını kullanın.
Dinleyiciyi (onclick / onblur, vb.) Html sayfasının kendisine yazmak yerine denetleyicide kullanmanız önemle tavsiye edilir.
Mağaza görünümden çağrılırken mağaza örneğini oluşturmayın.
Bir mağazanın örneğini oluşturduğumuzda, performansı etkilediği için onu her zaman yok etmeliyiz.
Sencha Touch'ı kullanırken, başka herhangi bir basit JavaScript dosyası belirtmeyin. Ext sınıflarındaki tüm işlevleri kullanın (denetleyici veya yardımcı programlarda belirtilen).
Model eşlemesi ve adı aynı olduğunda, eşlemeyi belirtmeyin. Amacı sadece isim çözecektir.
Görünümde gereksiz özellikleri kullanmayın. Yalnızca gerekli olan özelliği ve varsayılan değerden farklı olan değeri kullanın.