Techcon Cybernet

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

Blog

blog

Items filtered by date: July 2013

ถ้าใครมี plugin สำหรับใช้กับ PhoneGap เวอร์ชั่น 2.x.x ไม่สามารถจะนำมาใช้ได้กับ PhoneGap 3.0 นะครับ จะต้องรอเจ้าของ plugin มาอัพเดตให้ตรงกับ architecture ใหม่ที่ PhoneGap กำหนด

Plugin specification  ดูได้ที่นี่

Published in PhoneGap/Cordova

เมื่อ create project ด้วย cordova cli แล้ว จะต้อง add platform ที่ต้องการ หลังจากนั้นจะต้องเลือก plugin ที่ต้องการโดยการ add เช่นเดียวกัน เนื่องจากวิธีคิดคือ ให้เราสามารถเพิ่ม plugin เฉพาะที่เราต้องการจริงๆ อันนี้เป็นวิธีที่เริ่มตั้งแต่ PhoneGap 3.0 เป็นต้นไป เรื่อง plugin จะมีความยืดหยุ่นมากขึ้นกว่าเดิม

$cordova plugin add path-to-plugin

โดย path to plugin ได้แก่

  • Basic device information: $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
  • Network and battery status: $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-battery-status.git
  • , compass, and geolocation: $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
  • , media capture, and media playback: $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git
  • Access files on device or network: $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git
  • Notifications via dialog box or vibration: $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git
  • : $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git
  • : $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git
  • Splash Screen: $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
  • In-app browser: $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
  • Debug console: $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

ตัวอย่าง เช่น เราจะเพิ่ม plugin InAppBrowser

$cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

จะมีการดาวน์โหลดไฟล์ที่เกี่ยวข้องเข้ามาใน project และเปลี่ยนค่าใน config.xml

Published in PhoneGap/Cordova

ข้อควรระวังเมื่อเพิ่ม platform Android และ BB10 ใน  cordova CLI คือ การตั้งชื่อ project ต้องไม่มี space ถ้ามีจะทำให้เกิด error เวลา add platform

An unexpected error occurred: "$ANDROID_BIN" create project --target 1 --path "$PROJECT_PATH" --package $PACKAGE --activity $ACTIVITY >&/dev/null exited with 1
Deleting project...

หรือ ใน BB10

[Error: An error occured during creation of blackberry10 sub-project. BAR filename can only contain alpha-numeric, '.', '-' and '_' characters

ดังนั้นในตอน create project ต้องใช้...

$ cordova create /path/to/project_folder com.company_name.app_name "AppName"

สังเกตุว่า "AppName" จะไม่มี space แต่ถ้าใน iOS จะไม่มีปัญหานี้ สามารถมี space ได้ เช่น "App Name"

Published in PhoneGap/Cordova

PhoneGap เพิ่งจะปล่อยเวอร์ชั่น 3.0 ออกมา ซึ่งก็มีข้อแตกต่างจากเวอร์ชั่นก่อนหลายอย่าง เช่น ไม่มี ZIP ไฟล์ให้ดาวน์โหลดอีกต่อไป แต่จะต้องติดตั้งผ่าน Node Package Manager (npm) ซึ่งจะทำให้สามารถง่ายในการติดตั้ง อัพเกรดเวอร์ชั่นใหม่ๆ ผ่าน command line tool ได้แก่ PhoneGap CLI กับ Cordova CLI

PhoneGap CLI กับ Cordova CLI แตกต่างกันที่ PhoneGap CLI สามารถที่จะ build ผ่าน PhoneGap/Build ได้แบบ remote (เสียตังค์) แต่การ build แบบ local สามารถใช้ได้ทั้งคู่ (PhoneGap CLI ก็จะใช้ Cordova CLI ในการ build) ทุกท่านคงทราบอยู่แล้วว่า PhoneGap/Build เป็นการ build ผ่าน cloud service ของ PhoneGap ทำให้เรา  build ข้าม platform ได้ เช่น คนที่ทำงานบน windows ก็ build สำหรับ iOS ได้

การติดตั้งและใช้งาน PhoneGap CLI กับ Cordova CLI คล้ายๆกัน

$ sudo npm install -g cordova

การสร้าง Cordova project

$ cordova create /path/to/project_folder com.company_name.app_name "app name"

Cordova CLI จะสร้างโฟลเดอร์ให้เลย และมีไฟล์พื้นฐานให้ในโฟลเดอร์ย่อย หลังจากนั้นเราจะต้องใส่ platform เพิ่มเข้าไปตามต้องการ

$ cordova platform add ios

จะเป็นการเพิ่มไฟล์ที่เกี่ยวข้องกับ iOS เข้าไปในโฟลเดอร์ platform ให้นำไปใช้ได้เลย ถ้าต้องการเพิ่ม android ก็เพียงเพิ่ม

$ cordova platform add android
Published in PhoneGap/Cordova

เมื่ออัพเกรด 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
« July 2013 »
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 31        

Search Blog