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.