Techcon Cybernet

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

Blog

blog

Jirawat Akkanit

Jirawat Akkanit

Jirawat Akkanit is a Founder and Managing Director at Techcon Cybernet Co.,Ltd. He is responsible for oversees the company's mobile and web application development. He focuses on developing multi-platform mobile apps based on HTML5, CSS3 and JavaScript, particularly Sencha Touch frameworks.  He has been invited to be a key speaker on BlackBerry Jam Asia 2012 event in Bangkok, Thailand. To discuss the basic building blocks of Sencha Touch applications and the new BlackBerry® 10 components that are being made available to get that native look and feel in Sencha application.

Website URL:

Tuesday, 13 May 2014 19:27

K2 frontend editing in full screen

Many people has problem with K2 frontend editing in Joomla CMS. You may found the "Save" button on the front end saves the edits but doesn't close the lightbox window. Here is a solution to work with full screen not a modal pop-up, when you add/edit an item from frontend. We will open an editor in a new window. When save it will reload the parent window and close. When click a close button, it will close a child window.

The file for add an item;

modules/mod_k2_user/tmpl/userblock.php

The files for edit an item;

components/com_k2/templates/default/category_item.php
components/com_k2/templates/default/item.php

Or in case you have template override;

templates/YOURJOOMLATEMPLATE/html/com_k2/templates/YOURK2THEME/category_item.php
templates/YOURJOOMLATEMPLATE/html/com_k2/templates/YOURK2THEME/item.php

 

The files for save an item;

components/com_k2/templates/default/itemform.php

 

OK Let's start with the userblock.php;

Change from:

<a class="modal" rel="{handler:'iframe',size:{x:990,y:550}}" href="/<?php echo $user->profile->addLink; ?>">

Change to:

<a target="_new" href="/<?php echo $user->profile->addLink; ?>">

 

Next, category.php and item.php.

Change from:

<a class="catItemEditLink modal"  rel="{handler:'iframe',size:{x:1000,y:550}}"

Change to:

<a class="catItemEditLink"  target="_new"

and

Change from:

<a class="itemEditLink modal"  rel="{handler:'iframe',size:{x:1000,y:550}}"

Change to:

<a class="itemEditLink"  target="_new"

 

Next, itemform.php

under

submitform( pressbutton );      

add

submitform( pressbutton );
                                setTimeout(function(){
                                         window.opener.location.reload();
                                         window.close();
                                },1200);   

 

and at

<td id="toolbar-cancel" class="button">
                        <a class="toolbar" href="#"; return false;">

Change to:    

<td id="toolbar-cancel" class="button">
                        <a class="toolbar" onclick="window.close();" return false;">
                

หลายคนอาจจะงงเวลาสร้างโปรเจคจาก Cordova ด้วยคำสั่ง create แล้วเพิ่มแพลตฟอร์มหรือปลั๊กอินเข้าไปด้วย ซึ่งจะทำให้เกิดโฟลเดอร์หลายอัน ได้แก่

  • merges
  • platforms
  • plugins
  • www

ซึ่งการจัดการคอนเท้นต์เราสามารถจัดการจากโฟลเดอร์ www ที่เดียว เมื่อเรา build มันจะถูก copy ไปยังโฟลเดอร์ platform ตามที่เราสั่ง เช่น

cordova build ios หรือ cordova build android

เมื่อเรา build เสร็จ ไฟล์ใน platform จะถูกเตรียมและคอมไพล์พร้อมที่จะรัน ถ้าใช้ cordova ปลั๊กอินเราไม่ต้องห่วงเรื่องการจะไปลิ้งค์ไฟล์ js ใน html เราสามารถเรียกใช้ cordova api ได้เลยไม่ต้องไปอ้าง <script>.....</script> ให้วุ่นวาย

เมื่อเราเสียบต่ออุปกรณ์ เราสามารถสั่งรันได้เลยสะดวกมาก ไม่ต้องรันผ่าน Xcode หรือ Eclipse

cordova run ios หรือ cordova run android

แต่ถ้าไม่มีอุปกรณ์ก็ลองรันใน simulator ได้ โดยใช้คำสั่ง

cordova emulate ios หรือ cordova emulate android

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

Tuesday, 13 August 2013 13:53

Facebook iOS SDK กับ Social.Framework

ถ้าคุณใช้ 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)

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

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

เมื่อ 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

ข้อควรระวังเมื่อเพิ่ม 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"

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

เมื่ออัพเกรด 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';
Wednesday, 06 February 2013 19:47

ไฟล์ config.xml

ในการ package Web application สำหรับ Blackberry Webworks ที่ใช้ใน Blackberry 10 นั้น จะต้องมีไฟล์ configuration ชื่อ config.xml

ข้อสำคัญคือ access uri จะต้องกำหนดให้ครบว่า Web app นั้นไปลิ้งค์กับเว็บใดบ้าง เช่น ถ้าเราใช้ Google Font ก็ต้องบอกให้ครบ

access uri="http://fonts.googleapis.com" subdomains="true"
  • «
  •  Start 
  •  Prev 
  •  1 
  •  2 
  •  Next 
  •  End 
  • »
Page 1 of 2
« 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