blog

บล็อก

Sencha Touch 2.3 มีอะไรใหม่

Written by Jirawat Akkanit วันศุกร์ที่ 13 กันยายน 2013 เวลา 01:29 น.

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

Facebook iOS SDK กับ Social.Framework

Written by Jirawat Akkanit วันอังคารที่ 13 สิงหาคม 2013 เวลา 13:53 น.

ถ้าคุณใช้ facebook-ios-sdk กับ social.framework คุณอาจจะเจอ error ตอน build ว่า

dyld: Library not loaded หรือ dyld: Symbol not found: _ACFacebookAppIdKey

เป็นเพราะว่าคุณตั้ง Deployment Target เป็น iOS 5 แต่ social.framework ต้องการ iOS 6 ขึ้นไป

วิธีแก้ไขให้ run ใน iOS 5 ได้ จะต้องไปที่ Build Phases > Link Binary with  Libraries แล้วตั้ง Social.framework, Accounts.framework, AdSupport.framework ให้เป็น Optional (จากเดิม Required)

Sencha Touch 2.2.1 กับการเปลี่ยนแปลง SASS format

Written by Jirawat Akkanit วันจันทร์ที่ 22 กรกฏาคม 2013 เวลา 07:29 น.

เมื่ออัพเกรด 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';

การอัพเกรดโปรเจ็คจาก Sencha Touch 2.0 ไปเป็น 2.1

Written by Jirawat Akkanit วันพุธที่ 06 กุมภาพันธ์ 2013 เวลา 19:36 น.

เราสามารถใช้ Sencha Cmd ที่ terminal สั่งให้โปรเจ็คอัพเกรดจาก Sencha Touch 2.0 เป็น 2.1 ได้ง่ายๆ

sencha app upgrade /path/to/sencha-sdk-2.1

โดยเมื่ออัพเกรดโค้ดแล้วจะทำ backup ของเก่าไว้ในโฟลเดอร์ .sencha_backup ด้วย

การสร้างโปรเจ็คใหม่ใน Sencha Touch 2.1

Written by Jirawat Akkanit วันพุธที่ 06 กุมภาพันธ์ 2013 เวลา 19:28 น.

ใน 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 แทน

ปัญหาการ upgrade Sencha Touch 2.0 ไป 2.1

Written by Jirawat Akkanit วันพุธที่ 06 กุมภาพันธ์ 2013 เวลา 18:33 น.

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

ปัญหาคือเวลานำโค้ดที่ทำใน 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 แทน

HTML5 มีอะไรใหม่

Written by Jirawat Akkanit วันพฤหัสบดีที่ 10 มกราคม 2013 เวลา 16:38 น.

HTML5 มีอะไรใหม่

สิ่งที่ HTML5 มีให้นั้น คือความสามารถในการจัดการกับข้อมูล มัลติมีเดีย กราฟฟิก การเชื่อมต่อ ด้วยความรวดเร็วและมีประสิทธิภาพมากขึ้น

MULTIMEDIA AND GRAPHICS

การจัดการกับมัลติมีเดียและกราฟฟิก รวมไปถึงแอนนิเมชั่น สเปเชียลเอ็ฟเฟ็คต่างๆ สามารถทำได้โดยใช้มาตรฐานใหม่ๆ เช่น 3D CSS, canvas, SVG, WebGL

การจัดการกับไฟล์เสียงประเภทต่างๆผ่าน Audio APIs การจัดการเชื่อมต่อผ่าน WebSockets ความสามารถที่เพิ่มขึ้นเหล่านี้ทำให้ HTML5 กลายเป็นแพล็ตฟอร์มสำหรับเกมส์และมัลติมีเดียเทียบเท่ากับบนเดสท์ท็อป

การที่กราฟฟิกสามารถทำงานได้เร็วก็เพราะ HTML5 ทำงานร่วมกับ JavaScript engine ที่ทำงานอย่างรวดเร็ว และใช้การเร่งความเร็วในระดับฮาร์ดแวร์โดย Graphics Processing Unit (GPU) ที่ Browser ต่างๆในปัจจุบันหันมาใช้กัน

OFFLINE AND STORAGE

ปกติเว็บจะต้องเชื่อมต่อแบบออนไลน์ แต่ HTML5 จะมีความสามารถในการเก็บข้อมูลและนำมาใช้แม้ในตอนที่ไม่ได้เชื่อมต่อกับอินเตอร์เน็ต การทำงานแบบ offline ใช้ localStorage, sessionStorage, indexDB และ File System ทำให้ต่อไปผู้ใช้สามารถดาวน์โหลดไฟล์ข้อมูลขนาดใหญ่มากกว่า 1 GB มาเก็บไว้ใช้ในขณะที่ offline ได้

PERFORMANCE

ประสิทธิภาพและความความเร็วของแอพพลิเคชั่นดีขึ้นมาก ด้วยเทคโนโลยีใหม่ๆเช่น Web Workers ที่ทำให้การทำงานแบบ multiple process ใน background สามารถทำได้ การที่สามารถเก็บข้อมูลแบบ offline ทำให้ลดจำนวนการรับส่งข้อมูลกับ server ทำให้โหลดข้อมูลได้เร็วขึ้น

การที่ JavaScript engine มีการพัฒนาความเร็วขึ้นมาก ร่วมกับเทคนิคอื่นๆ เช่น การลดแบนด์วิธที่ใช้ให้น้อยลง การบีบอัดข้อมูล การทำ asynchronous callback ช่วยทำให้การทำงานเร็วขึ้น

ทำไมต้อง HTML5

Written by Jirawat Akkanit วันพฤหัสบดีที่ 10 มกราคม 2013 เวลา 16:19 น.

HTML5 คืออะไร

HTML5 คือการแก้ไขมาตรฐานภาษา HTML ครั้งที่ 5 ที่มีการปรับปรุงคุณสมบัติต่างๆขึ้นอย่างมากมาย โดยนำเอาเทคโนโลยีใหม่ๆมาผสมผสานกันทั้งในส่วนของ CSS3 และ JavaScript APIs ทำให้ความสามารถของ Web Application เทียบเท่าสิ่งที่แอพลิเคชั่นบนเดสท์ท็อปทำได้ ทั้งในเรื่องของ interactivity และ connectivity

HTML5 มาพร้อมๆกับลูกเล่น ความเร็ว ประสิทธิภาพการทำงาน ที่สามารถเข้าถึงผู้ใช้งานได้โดยไม่จำกัดที่แพลตฟอร์ม หรืออุปกรณ์ เนื่องจากเป็นมาตรฐานที่เป็นกลางที่ร่วมกันพัฒนาโดย Google, Microsoft, Apple, Mozilla, Facebook, IBM, HP, Adobe และอื่นๆ ทำให้ HTML5 คือมาตรฐานของ Web ในยุคต่อจากนี้ไป

« มิถุนายน 2017 »
จ. อ. พ. พฤ. ศ. ส. อา.
      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