{"id":1053,"date":"2020-04-07T14:35:01","date_gmt":"2020-04-07T11:35:01","guid":{"rendered":"http:\/\/hilmibilici.com\/blog\/?p=1053"},"modified":"2020-04-07T14:35:01","modified_gmt":"2020-04-07T11:35:01","slug":"bolum-3-frameworkler-ders-9-sencha-touch","status":"publish","type":"post","link":"http:\/\/hilmibilici.com\/?p=1053","title":{"rendered":"B\u00f6l\u00fcm 3 (Frameworkler) Ders-9: Sencha Touch"},"content":{"rendered":"<div class=\"content-item-summary\">\n<h3 class=\"course-item-title question-title\">Sencha Touch<\/h3>\n<div class=\"content-item-description lesson-description\">\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-895\" src=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/05\/78.png\" sizes=\"(max-width: 648px) 100vw, 648px\" srcset=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/05\/78.png 648w, http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/05\/78-300x125.png 300w\" alt=\"\" width=\"648\" height=\"270\" \/><\/p>\n<p>\u015eekil 78: Sencha Touch<\/p>\n<p><a href=\"http:\/\/dev.sencha.com\/deploy\/touch\/docs\/\">Sencha Touch<\/a>\u00a0(ST), iPhone, iPad ve Android odakl\u0131 web siteleri ve web servisleri geli\u015ftirmek i\u00e7in kullan\u0131lan bir \u00e7er\u00e7evedir (framework).\u00a0ExtJS k\u00fct\u00fcphanesinin tan\u0131nm\u0131\u015f bir tedarik\u00e7isi olan\u00a0<a href=\"http:\/\/www.sencha.com\/\">Sencha, Inc.<\/a>\u00a0taraf\u0131ndan, y\u00fcksek teknoloji \u00fcr\u00fcn\u00fc taray\u0131c\u0131 ara y\u00fcz pazar\u0131 i\u00e7in geli\u015ftirilmi\u015f\u00a0<u>\u00fccretli<\/u>\u00a0bir platformdur. 400 $ ile 1900 $ civar\u0131 aras\u0131nda paketleri vard\u0131r.<\/p>\n<p><!--more--><br \/>\nST\u2019nin as\u0131l amac\u0131, m\u00fcmk\u00fcn oldu\u011fu kadar, standart ara y\u00fcz ve iOS ara y\u00fcz\u00fcn\u00fcn elemanlar\u0131n\u0131n davran\u0131\u015f\u0131n\u0131 taklit ederek programc\u0131lara esnek bir API sunmakt\u0131r.<br \/>\n\u00c7ekirdek k\u00fct\u00fcphane JavaScript, CSS3 ve Html5 ile yaz\u0131lm\u0131\u015ft\u0131r.\u00a0FireFox 4 ve IE 9, desteklenen taray\u0131c\u0131lar listesinde de\u011fildir. Buna g\u00f6re, bir ST uygulamas\u0131 ortak bir istemci-sunucu geli\u015ftirmedir, Safari veya Chrome taray\u0131c\u0131s\u0131 bir istemci olarak \u00e7al\u0131\u015f\u0131r. JSON, XML ve di\u011fer birka\u00e7 formatta \u201cyan\u0131t verebilecek\u201d herhangi bir web hizmeti bir sunucu olarak davran\u0131r.<\/p>\n<p>Temel olarak, \u00e7er\u00e7eve yine tan\u0131d\u0131k bir HTML5 + JS + CSS grubudur.\u00a0Ancak bu durumda, ara y\u00fcz\u00fc geli\u015ftirirken JS\u2019ye HTML5\u2019ten daha fazla \u00f6nem veriyor.\u00a0\u00c7er\u00e7eve, hem UI bile\u015fenlerini hem de mevcut olanlar\u0131 temel alarak geli\u015ftirmek i\u00e7in esnek ara\u00e7lar sunar.\u00a0Herhangi bir k\u00fct\u00fcphane bile\u015feni asl\u0131nda bir dizi y\u00f6ntem ve \u00f6zelli\u011fe sahip bir ST nesnesidir.<\/p>\n<p>Sencha\u2019n\u0131n avantajlar\u0131:<\/p>\n<ul>\n<li>Kendi bile\u015fenlerinizi olu\u015fturarak kendi ara y\u00fcz\u00fcn\u00fcz\u00fc olu\u015fturma esnekli\u011fi (daha kat\u0131 bile\u015fen gereksinimleri)<\/li>\n<li>H\u0131zl\u0131 bir ba\u015flang\u0131\u00e7 \u200b\u200bi\u00e7in \u00e7ok fazla belge olmas\u0131<\/li>\n<\/ul>\n<h1>\u0130lk Ext JS Uygulamas\u0131n\u0131 Olu\u015fturma:<\/h1>\n<p>Windows platformunda Sencha Cmd kullanarak ilk Ext JS 6 uygulamas\u0131n\u0131 olu\u015fturaca\u011f\u0131z. Sencha Cmd ve GPL Ext JS SDK\u2019y\u0131 indirip kurmak gereklidir.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-896\" src=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/05\/79.png\" sizes=\"(max-width: 881px) 100vw, 881px\" srcset=\"http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/05\/79.png 881w, http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/05\/79-300x156.png 300w, http:\/\/tez.hilmibilici.com\/wp-content\/uploads\/2019\/05\/79-768x399.png 768w\" alt=\"\" width=\"881\" height=\"458\" \/><\/p>\n<p><a name=\"_Toc1736756\"><\/a>\u015eekil 79: Ruby arac\u0131l\u0131\u011f\u0131 ile\u00a0 Sencha touch uygulamas\u0131 olu\u015fturma.<\/p>\n<ol>\n<li><strong>Ad\u0131m<\/strong><strong>\u00a0\u2013\u00a0<\/strong><strong>Uygulama olu\u015fturma<\/strong><\/li>\n<\/ol>\n<p>Sencha CMD komut sat\u0131r\u0131na a\u015fa\u011f\u0131daki kod yaz\u0131l\u0131r:<\/p>\n<p>encha -sdk \/path\/to\/ExtSDK generate app -classic TutorialApp .\/TutorialApp<\/p>\n<p>Elde edilen TutorialApp, giri\u015f \/ \u00e7\u0131k\u0131\u015f uygulamas\u0131na temel olarak kullan\u0131lacak tamamen i\u015flevsel bir Cmd uygulamas\u0131d\u0131r.\u00a0Web sunucusundaki<a href=\"http:\/\/tez.hilmibilici.com\/kurslar\/mobil-programlama-temelleri\/lessons\/9-sencha-touch\/#_ftn1\" name=\"_ftnref1\">[1]<\/a>\u00a0uygulaman\u0131n konumuna giderek bu uygulamay\u0131 g\u00f6r\u00fcnt\u00fcleyebilirsiniz.\u00a0\u00d6rne\u011fin:<\/p>\n<p>http:\/\/localhost\/TutorialApp<\/p>\n<h2>2.\u00a0\u00a0\u00a0\u00a0\u00a0 Ad\u0131m \u2013 Login View Bile\u015fenlerini Olu\u015fturun<\/h2>\n<p>Uygulaman\u0131n \u201capp \/ view \/\u201d klas\u00f6r\u00fcne gidin.\u00a0Varsay\u0131lan olarak olu\u015fturulan \u201cMain\u201d klas\u00f6r\u00fc g\u00f6rmelisiniz.\u00a0Bu klas\u00f6r\u00a0<strong>Main.js<\/strong>\u00a0,\u00a0<strong>MainController.js<\/strong>\u00a0ve<strong>MainModel.js<\/strong>\u00a0dosyalar\u0131n\u0131 i\u00e7erir.<\/p>\n<p>\u201cApp \/ view \/ login \/\u201d klas\u00f6r\u00fc olu\u015fturulduktan sonra, a\u015fa\u011f\u0131daki dosyalar\u0131 belirtilen klas\u00f6re eklemek gereklidir:<\/p>\n<p>\u2013 Login.js<\/p>\n<p>\u2013 LoginController.js<\/p>\n<ol start=\"3\">\n<li><strong>Ad\u0131m \u2013 mainView\u2019\u0131 devre d\u0131\u015f\u0131 b\u0131rak\u0131n<\/strong><\/li>\n<\/ol>\n<p>G\u00f6r\u00fcn\u00fcm eklentisinden \u201cTutorialApp.view.main.Main\u201d devre d\u0131\u015f\u0131 b\u0131rak\u0131l\u0131r.<\/p>\n<ol start=\"4\">\n<li><strong>Ad\u0131m- Giri\u015f Penceresini Yarat\u0131n<\/strong><\/li>\n<\/ol>\n<blockquote><p>\u201c{appRoot}\/app\/view\/login\/<u>Login.js<\/u>\u201d olu\u015fturup dosyaya a\u015fa\u011f\u0131daki kodu ekliyoruz:<br \/>\nExt.define(\u2018TutorialApp.view.login.Login\u2019, {<br \/>\nextend: \u2018Ext.window.Window\u2019,<br \/>\nxtype: \u2018login\u2019,<br \/>\nrequires: [<br \/>\n\u2018TutorialApp.view.login.LoginController\u2019,<br \/>\n\u2018Ext.form.Panel\u2019<br \/>\n],<br \/>\ncontroller: \u2018login\u2019,<br \/>\nbodyPadding: 10,<br \/>\ntitle: \u2018Login Window\u2019,<br \/>\nclosable: false,<br \/>\nautoShow: true,<br \/>\nitems: {<br \/>\nxtype: \u2018form\u2019,<br \/>\nreference: \u2018form\u2019,<br \/>\nitems: [{<br \/>\nxtype: \u2018textfield\u2019,<br \/>\nname: \u2018username\u2019,<br \/>\nfieldLabel: \u2018Username\u2019,<br \/>\nallowBlank: false<br \/>\n}, {<br \/>\nxtype: \u2018textfield\u2019,<br \/>\nname: \u2018password\u2019,<br \/>\ninputType: \u2018password\u2019,<br \/>\nfieldLabel: \u2018Password\u2019,<br \/>\nallowBlank: false<br \/>\n}, {<br \/>\nxtype: \u2018displayfield\u2019,<br \/>\nhideEmptyLabel: false,<br \/>\nvalue: \u2018Enter any non-blank password\u2019<br \/>\n}],<br \/>\nbuttons: [{<br \/>\ntext: \u2018Login\u2019,<br \/>\nformBind: true,<br \/>\nlisteners: {<br \/>\nclick: \u2018onLoginClick\u2019<br \/>\n}<br \/>\n}]<br \/>\n}<br \/>\n});<\/p><\/blockquote>\n<h2>5.\u00a0\u00a0\u00a0\u00a0\u00a0 Ad\u0131m \u2013 Giri\u015f Mant\u0131\u011f\u0131 Ekleme<\/h2>\n<p>{appRoot}\/app\/view\/login\/<u>LoginController.js<\/u>\u00a0dosyas\u0131 olu\u015fturulur:<\/p>\n<p>Ext.define(\u2018TutorialApp.view.login.LoginController\u2019, {<br \/>\nextend: \u2018Ext.app.ViewController\u2019,<br \/>\nalias: \u2018controller.login\u2019,<br \/>\nonLoginClick: function() {<\/p>\n<p>\/\/ kullan\u0131c\u0131n\u0131n kimlik bilgilerini do\u011frulamak i\u00e7in<br \/>\n\/\/ LocalStorage de\u011ferini true olarak ayarlay\u0131n.<\/p>\n<p>localStorage.setItem(\u201cTutorialLoggedIn\u201d, true);<br \/>\n\/\/ Giri\u015f Penceresini Kapat<br \/>\nthis.getView().destroy();<br \/>\n\/\/ Ana g\u00f6r\u00fcn\u00fcm\u00fc, g\u00f6r\u00fcn\u00fcm alan\u0131na ekleyin<\/p>\n<p>Ext.create({<br \/>\nxtype: \u2018app-main\u2019<br \/>\n});<br \/>\n}<br \/>\n});<\/p>\n<p>Sonu\u00e7ta ortaya \u00e7\u0131kan\u00a0{appRoot}\/app\/view\/main\/Main.js dosyas\u0131 \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r.<a href=\"http:\/\/tez.hilmibilici.com\/kurslar\/mobil-programlama-temelleri\/lessons\/9-sencha-touch\/#_ftn2\" name=\"_ftnref2\">[2]<\/a><\/p>\n<p><a href=\"http:\/\/tez.hilmibilici.com\/kurslar\/mobil-programlama-temelleri\/lessons\/9-sencha-touch\/#_ftnref1\" name=\"_ftn1\">[1]<\/a>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Sencha localhost \u00fczerinde \u00e7al\u0131\u015f\u0131r. IIS yap\u0131land\u0131rmas\u0131 gereklidir.<\/p>\n<p><a href=\"http:\/\/tez.hilmibilici.com\/kurslar\/mobil-programlama-temelleri\/lessons\/9-sencha-touch\/#_ftnref2\" name=\"_ftn2\">[2]<\/a>\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Sencha resmi sitesinden faydalan\u0131lm\u0131\u015ft\u0131r.\u00a0<a href=\"https:\/\/docs.sencha.com\/ext\/6.0.0\/guides\/tutorials\/login_app.html\">https:\/\/docs.sencha.com\/ext\/6.0.0\/guides\/tutorials\/login_app.html<\/a>\u00a0:05.02.2019<\/p>\n<\/div>\n<\/div>\n<blockquote><p>Bu ve devam edecek anlat\u0131mlar\u0131n tamam\u0131 ve s\u0131navlar<\/p>\n<p><a href=\"http:\/\/tez.hilmibilici.com\">tez.hilmibilici.com\u00a0<\/a><\/p>\n<p>alt domaininde yay\u0131ndad\u0131r. Tezimi payla\u015f\u0131ma a\u00e7\u0131yorum. Al\u0131n teridir, l\u00fctfen payla\u015f\u0131rken kaynak belirtmeyi unutmay\u0131n.<span style=\"font-size: 16px;\">\u00a0<\/span><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Sencha Touch \u015eekil 78: Sencha Touch Sencha Touch\u00a0(ST), iPhone, iPad ve Android odakl\u0131 web siteleri ve web servisleri geli\u015ftirmek i\u00e7in&#8230;<\/p>\n","protected":false},"author":1,"featured_media":83421,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[42],"tags":[53,202,305,312,381,392,393,394,395],"class_list":["post-1053","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobprog","tag-2020-mobil-programlama","tag-frameworkler","tag-mobil-programlama-framewrok","tag-mobil-yazilim","tag-ruby-araciligi-ile-sencha-touch","tag-sencha-touch","tag-sencha-touch-framework","tag-sencha-touch-platformu","tag-senchanin-avantajlari"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/hilmibilici.com\/index.php?rest_route=\/wp\/v2\/posts\/1053","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/hilmibilici.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/hilmibilici.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/hilmibilici.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/hilmibilici.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1053"}],"version-history":[{"count":0,"href":"http:\/\/hilmibilici.com\/index.php?rest_route=\/wp\/v2\/posts\/1053\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/hilmibilici.com\/index.php?rest_route=\/"}],"wp:attachment":[{"href":"http:\/\/hilmibilici.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/hilmibilici.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1053"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/hilmibilici.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}