Techcon Cybernet

Thai (ภาษาไทย)English (United Kingdom)

Blog

blog

Displaying items by tag: Touch

Sencha Touch ออกเวอร์ชั่น 2.3 พร้อมกับความน่าตื่นเต้นกับฟีเจอร์ใหม่ๆ

ความสามารถในการเรียก PhoneGap/Cordova API ได้โดยตรงทำให้สะดวกขึ้นมาก อย่าง Accelerometer, Camera, Capture, Compass, Connection, Contacts, Device, Events, File, Geolocation, Globalization, InAppBrowser, Media, Notification, Splashscreen, และ Storage.

Cordova API สามารถเรียกจาก Ext.device.<API>.Cordova ได้เลย

การมี Theme ใหม่ๆและการปรับปรุงให้ดีขึ้น โดยเฉพาะใน Blakberry 10

การสนับสนุน XMLHTTPRequest Level 2 (XHR2) ซึ่งจะทำให้การจัดการอัพโหลดไฟล์ หรือรูปภาพได้ดีขึ้น สามารถบอกจำนวนข้อมูลที่รับส่งไฟล์ได้ (progress events) โดยใช้ ProgressIndicator Component

Published in Sencha Touch

เมื่ออัพเกรด Sencha Touch 2.2.1 จะพบกับปัญหาที่น่าปวดหัวอย่างหนึ่ง (แต่เมื่อคุ้นเคยแล้วจะพบว่าการทำงานกับ User Interface จะยืดหยุ่นขึ้น) คือ การทำงานกับ SASS เมื่อทำการ compile ให้เป็น CSS สิ่งที่เปลี่ยนไปใน SASS ไฟล์คือ แทนที่จะทำการ @include เหมือนเดิมจะเปลี่ยนเป็น @import แทน เรื่องแรกที่ต้องทราบ คือ 

@import 'sencha-touch/base'; //เป็นการดึงเฉพาะ base theme ของ UI พื้นฐานเข้ามาใช้ (หน้าตาที่ยังไม่ได้ตกแต่งให้สวยงาม)
@import 'sencha-touch/base/all'; //เป็นการดึงเฉพาะ base theme ของ UI พื้นฐานทั้งหมดเข้ามาใช้ (ของทุก component)

@import 'sencha-touch/default'; //เป็นการดึง standard theme ของ Sencha Touch UI เข้ามาใช้ (หน้าตาที่เพิ่มเติมจาก base theme ให้สวยงามแล้ว)
@import 'sencha-touch/default/all'; //เป็นการดึง standard theme ของ Sencha Touch UI ทั้งหมดเข้ามาใช้ (ของทุก component)

แต่ถ้าเรามีการตกแต่งหน้าตาของบาง component ด้วยรูปแบบของเราเอง เราก็จะต้องคอมเม้นท์ @import 'sencha-touch/default/all'; เอาไว้

@import 'sencha-touch/base';
@import 'sencha-touch/base/all';
@import 'sencha-touch/default';
//@import 'sencha-touch/default/all';

แล้วก็ import เฉพาะ component ที่ต้องการเข้ามา

@import 'sencha-touch/default/src/form/Panel';
@import 'sencha-touch/default/src/form/FieldSet';
@import 'sencha-touch/default/src/field/Field';
@import 'sencha-touch/default/src/picker/Picker';
@import 'sencha-touch/default/src/dataview/List';
@import 'sencha-touch/default/src/field/TextArea';
@import 'sencha-touch/default/src/carousel/Carousel';
@import 'sencha-touch/default/src/Panel';
@import 'sencha-touch/default/src/Sheet';
@import 'sencha-touch/default/src/field/Spinner';
@import 'sencha-touch/default/src/Class';
Published in CSS3 / SASS

ใน Sencha Touch 2.0 นั้น เราจะไปที่โฟลเดอร์ที่เราเก็บ SDK 2.0 แล้วใช้คำสั่ง

sencha app create AppName /path/to/app/folder 

แต่ใน Sencha Touch 2.1 นั้น เราจะไปที่โฟลเดอร์ที่เราเก็บ SDK 2.1 แล้วใช้คำสั่ง

sencha app generate AppName /path/to/app/folder 

ความแตกต่างคือเปลี่ยน create เป็น generate แทน

Published in Sencha Touch

ปัญหาที่พบระหว่างการอัพเกรด

ปัญหาคือเวลานำโค้ดที่ทำใน Sencha Touch 2.0 มารันภายใต้ Sencha Touch 2.1 แล้วแอพพลิเคชันขึ้นหน้าจอว่างๆ ตรวจสอบใน inspector ก็ไม่เจอ error

วิธีการแก้ไข จะต้องตรวจสอบสิ่งต่างๆต่อไปนี้

  • ตรวจหาโค้ดที่ใช้ Ext.DataView เปลี่ยนเป็น Ext.dataview.DataView
  • ใน app.js ส่วนของ Ext.Loader.setPath จะต้องใช้ 'Ext': 'touch/src' แทนของเดิม คือ 'Ext': 'sdk/src' และจะต้องใส่ชื่อแอพเข้าไปด้วย เช่น 'AppName':'app'
Ext.Loader.setPath({
    'Ext': 'touch/src',
    'Ext.ux': 'ux',
    'AppName': 'app'   
}); 
  • ใน app.js ส่วนของ requires จะต้องเพิ่มการเรียก UX ให้ครบ จากเดิมไม่ต้องใส่ก็ได้
 
requires: [
        'Ext.MessageBox',
        'Ext.device.Connection',
        'Ext.ux.Cover'
    ]
  • ในส่วนของ UX เองก็เช่นกัน ต้องเพิ่ม requires ให้ครบ จากเดิมไม่ต้องใส่ก็ได้
requires:[
        'Ext.dataview.DataView'
    ]
  • ถ้าใช้ UX จะต้องไปเพิ่ม app.classpath ในไฟล์ sencha.cfg ซึ่งอยู่ในโฟลเดอร์ที่ซ่อนไว้ที่ .sencha --> app
app.classpath=${app.dir}/app.js,${app.dir}/app,ux,js 
  • และเพิ่ม UX ใน workspace.classpath ด้วย ในไฟล์ sencha.cfg ซึ่งอยู่ในโฟลเดอร์ที่ซ่อนไว้ที่ .sencha --> workspace
workspace.classpath=ux,js
  • แก้ไขไฟล์ config.rb ด้วยในกรณีที่ใช้ SASS ในการจัดการ theme โดยแก้ sdk เปลี่ยนเป็น touch แทน
Published in Sencha Touch
« June 2017 »
Mon Tue Wed Thu Fri Sat Sun
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    

Search Blog