ลองเล่น Linux LXLE

มีคอมเก่าอยู่ครับ อายุประมาณหกเจ็ดปี อยากลองเอามาเล่นใหม่ โดยกะว่าจะใช้งานทั่วไป ใช้พิมพ์งาน Word คำนวณ Excel เล่นเน็ต ดูหนัง ฟังเพลง เขียนโปรแกรม JAVA ฯลฯ เริ่มจะเยอะ ยกเว้นเล่นเกมส์

สเปกที่มีอยู่ก็ประมาณ
CPU Centrino Duo
RAM 1 GB
HDD 100 GB
USB 2.0 สามารถกำหนด BIOS ให้บูตผ่าน USB ได้ (พึ่งรู้เหมือนกัน)
CD/DVD drive
แบตเสื่อม แต่เสียบสายใช้งานได้อยู่
OS เดิม Windows XP

ของเดิมก็ใช้งานได้อยู่ ติดแค่ว่ามันหน่วงบ้าง เพราะลง Firewall + Antivirus และเกรงว่า XP กำลังจะเป็นเป้าหมายด้านความปลอดภัย

เลยเลือกหา OS ที่จะลงใหม่โดยอยากได้ของฟรี ทำงานได้เร็วๆ ไม่หน่วงมาก แต่ไม่ถึงขั้นกับ UI ดูไม่ได้ พอเข้าไปดูใน distrowatch.com ก็เห็นว่าตามสถิติ Page Hits ที่ผ่านมา 6 เดือน เจ้า Linux Mint ยังคงเป็นผู้นำ ตามมาด้วย Ubuntu แต่ความนิยมไม่ใช่วัตถุประสงค์ของเรานี่นา เราต้องการใช้เครื่องเก่า งั้นก็ไปค้นหาดีกว่าโดยใช้ keyword คือประเภท Old computers ผลลัพธ์ก็คือ

LXLE (อะไรอ่ะ) ได้รับความนิยมมาอันดับ 1 และในเว็บตัวเองคือ www.lxle.net บรรยายตัวเองว่า Revive that old PC! อืม น่าสนใจว่าโม้หรือเปล่า เอามาลองสักหน่อย

ว่าแล้วก็ไปโหลดทันใด ซึ่งบังคับให้โหลดแบบ torrent เท่านั้น (ไม่เข้าใจ เว็บที่ให้เก็บไฟล์ฟรีมีเยอะแยะ) ซึ่งเค้าก็มีเหตุผลของเค้าอยู่แต่ขี้เกียจอ่าน

โหลดมาเสร็จได้ไฟล์ iso ก็จะติดตั้งผ่าน USB drive ขั้นตอนแรกเลย ก็ต้อง format มันใหม่ให้เป็น FAT32 จากนั้นก็ไปโหลดตัวช่วยคือ http://unetbootin.sourceforge.net/ เพื่อคัดลอกไฟล์จาก iso ที่โหลดมาไปยัง USB drive และทำให้มันบูตได้

เมื่อเตรียมการเสร็จ ก็เสียบ USB drive เข้ากับคอมเก่า แล้วเปิดเครื่อง มีเมนูให้เลือกติดตั้ง แล้วก็กำหนดค่าเล็กน้อย ใช้เวลาไม่เกินครึ่งชั่วโมงก็เสร็จ

จากนั้นก็เป็นการลองใช้งาน มีข้อสังเกตเบื้องต้นดังนี้
ข้อดี
-ติดตั้งง่าย หาอุปกรณ์ที่มีอยู่ในเครื่องเช่น Network card และ sound ได้เอง ไม่ต้องลง drivers เพิ่ม
-บูตใช้เวลาไม่ถึง 1 นาทีก็พร้อมใช้งาน
-สวย (เกี่ยวไหมนี่) UI ดี มีหลายโหมดการใช้งานให้เลือกว่าจะเป็นแบบ Windows หรือ Mac ทำนองนี้ มี Wallpaper สวยๆมาให้เป็นร้อยแบบ (มีรูปเมืองไทยด้วย)
-มีตัวคอยบอกการใช้งานทรัพยากรให้เห็น ซึ่งถ้าข้อมูลถูกต้อง ตั้งแต่ใช้งานมาวันกว่าๆ นี้ ยังไม่เคยเห็น CPU หรือ RAM ของระบบถูกใช้ถึง 50% เลย (เพราะเล่นแต่เน็ต กับพิมพ์งาน 555) แต่แทบไม่เห็นการกระตุกหรือช้าจากการใช้งานทั่วไป (ไม่นับเน็ตช้านะครับ)
-มีซอฟต์แวร์ที่จำเป็นมาให้พร้อม เล่นเน็ตมี Firefox ใช้งานเอกสารมี Libre Office ฯลฯ แทบจะไม่ต้องหาลงเอง ถ้าจะลงเองก็มี Software Center ของ lubuntu ให้

ข้อสังเกต (อาจรวมข้อด้อยด้วยมั้ง)
-มีซอฟต์แวร์เกินความจำเป็นแถมมาให้มากไป เช่น เกมส์
-หาไอคอนระบุภาษาไม่เจอ ตอนนี้ก็ยังหาวิธีให้แสดงผลภาษาปัจจุบันไม่ได้ 
-switch ภาษาอังกฤษไทยลำบาก ตอนแรกเซ็ตให้ใช้ Grave ได้ ตอนนี้ทำไม่ได้เฉยเลย สงสัยเรายังไม่เข้าใจพอ เลยต้องใช้ Alt+Left Shift ไปก่อน
-หาได้แล้วครับ แต่ยุ่งยากสักหน่อย อันดับแรกต้องไปที่ System Tools/Synaptic Package Manager แล้วค้นหา iBus จากนั้นติดตั้ง ibus-m17n เพิ่มเติม แล้วไปที่ Preferences/Input Method Switcher แล้วเลือก iBus จากนั้นรีสตาร์ทเครื่อง แล้วไปที่ Preferences/Keyboard Input Methods มันจะขึ้น iBus Preferences ให้เราเลือก Input Method แล้วเลือกภาษาตามรูป

จากนั้น ในหน้า General ให้เลือกดังนี้ สังเกตว่าในส่วนของ Next input method เราจะสามารถกำหนดได้ว่าจะใช้แป้นอะไรในการเลือกภาษาครับ

ก็น่าจะเกิดไอคอนภาษา ด้านขวาล่างของจอครับ
แต่อย่างไรก็ตาม มันก็ยังดูขัดๆอยู่เวลาพิมพ์ เพราะมันจะมีเส้นใต้ขีดเป็นแนวในการพิมพ์ให้ รู้สึกแปลกๆครับ และหากใช้ตัว Grave เป็นตัวเปลี่ยนภาษา มันก็จะติดตัว ` หรือ _ มาด้วย ต้องเลือกตัวอื่นที่กดแล้วไม่เป็นตัวอักษรแทน เช่น Window Key

-ปรับความสว่างหน้าจอไม่ได้ มีซอฟต์แวร์ให้ปรับ แต่ทำแล้วก็ไม่เห็นการเปลี่ยนแปลง ปรับได้นะครับ อยู่ที่ Preferences/Brightness
-ตัว Software Center เหมือนขาดบางอย่างไป เช่น OpendJDK-jdk ก็ไม่มี แล้วจะเขียน JAVA ยังไง ต้องไปติดตั้งผ่าน terminal เอง

ถ้าเจออะไรจะมาเขียนเพิ่มนะครับ

สรุป
ชอบ lxle ค่อนข้างมากครับ ตรงกับความต้องการที่อยากใช้คอมเก่ากับงานง่ายๆ ทำให้รู้สึกดีใจที่สามารถเอาคอมเดิมที่อยู่ในกรุ ปัดฝุ่นขึ้นมาทำงานอีกครั้ง (บางทีเราก็มีความผูกพันกับคอมใช่ไหมล่ะ เช่น คอมเครื่องนี้ใช้มาตั้งแต่ตอนเรียนเลยนะ) คิดว่าถ้ามีคนถามว่าคอมเก่าแล้ว อยากเปลี่ยนใหม่เพราะมันช้า จะตอบว่าถ้าแค่ใช้งานทั่วไป ลอง lxle ไหมล่ะ

ปิดท้ายด้วยรูปหน้าจอครับ

jQuery Mobile กับปัญหาการคลิกเอง (Firing twice / Firing multiple times)

เขียน jQuery Mobile กับ Cordova อยู่ เจอปัญหาปุ่มถูกคลิกเอง คลิกหลายๆครั้งด้วย ทำให้กระโดดไปหน้าอื่นทั้งๆที่ยังไม่ได้คลิก

ไปค้นดูครับ คนเจอปัญหาเยอะแยะ เช่น
http://stackoverflow.com/questions/14411532/all-jquery-mobile-events-firing-twice
http://stackoverflow.com/questions/10794181/jquery-mobile-tap-event-triggered-for-twice

และมีหลายวิธีแก้เหลือเกิน เช่น
1. เปลี่ยน event สำหรับการแตะ จาก tap เป็น click คือให้ใช้

$("#btt").off().on("click",function(){
 //do something
})

2. ใช้ off ปิด event ก่อนหน้า แล้วตามด้วย on เช่น

$("#btt").off().on("tap",function(){
      //off then on
});

หรือ

$("#btt").off("tap").on("tap",function(){
      //off then on
});

3. ย้าย script ไปไว้ระหว่างแท็ก head ไม่ใช่ส่วน body

4. เพิ่ม event.preventDefault(); เช่น

$("#btt").on("tap",function(event){
    event.preventDefault();
    //other codes
});

5. วางลำดับการอ้างถึง JavaScript และแทรก script ต่อไปนี้ลงไป

<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
<script src="js/jquery-2.1.1.min.js"></script>
<script>
 $(document).on("mobileinit", function() {
  $.mobile.ajaxEnabled = false;
  $.mobile.pushStateEnabled = false;
  $.mobile.linkBindingEnabled = false;
  $.mobile.hashListeningEnabled = false;
  $.mobile.defaultTransition = 'none';
 });   
</script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>  
<script src="js/index.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>

และอีกมากมาย

ส่วนตัวผมเองเจอปัญหากับ tap แล้วแค่พอเปลี่ยนเป็น click ก็หาย

สาเหตุอีกอย่างนึง ที่สังเกตดูคือ ถ้าเราสร้างแอพโดยมีหลายๆ หน้า และแต่ละหน้าเชื่อมโยงกันไปมา คือสามารถกระโดดไป-กลับ ไปหน้าอื่นๆได้
การกำหนด event สำหรับปุ่มต่างๆ ควรจะเอาไว้ใน

$(document).on("pagecreate","#pageID",function(){
    //begin code here
});

ส่วนตัวแปรที่ต้องการอัพเดททุกครั้ง เช่น เพื่อการแสดงผล ให้เอาไว้ใน

$(document).on("pagebeforeshow","#pageID",function(){
    //begin code here
});

ไม่ควรเอา event สำหรับปุ่มไว้ใน page event: pagebeforeshow เพราะทุกครั้งที่กลับมาที่หน้านี้ ผมเข้าใจว่าปุ่มมันเหมือนจะถูกกำหนด event สองครั้งซ้อน เมื่อเรากดปุ่มก็เลยเหมือนกดสองครั้ง

ถ้าใครเจอปัญหานี้ ลองวิธีแก้ต่างๆข้างต้นดูครับ

jQuery Mobile กับ Apache Cordova จะวางลำดับกันอย่างไร

เคยสงสัยเหมือนผมไหมครับว่าถ้าเราใช้ jQuery Mobile กับ Apache Cordova จะวางลำดับการเริ่มโปรแกรมอย่างไร เพราะ

jQuery Mobile ให้เริ่มด้วย

$(document).on("pagecreate","#pageID",function(){
    //begin code here
});

แต่ Cordova บอกให้เริ่มด้วย

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){
    //begin code here
}

เชื่อใครดีล่ะ

ในเน็ตก็มีคนสอบถามกันเยอะครับ เหมือนว่าคำตอบที่เป็นที่ยอมรับอยู่ในนี้ http://stackoverflow.com/questions/10945643/correct-way-of-using-jquery-mobile-phonegap-together

ถ้าเอาแบบลูกทุ่ง ส่วนตัวผมคิดว่ามีหลักของตัวเองคือ
1. หน้าไหนไม่มีการใช้คุณสมบัติของ Cordova เช่น ไม่ได้ใช้ Cordova events, plugin ก็ไม่ต้อง include ไฟล์ cordova.js, cordova_plugin.js ใช้แบบ jQuery Mobile เลย คือใช้การเริ่มแบบ jQuery

2. หน้าที่ใช้คุณสมบัติของ Cordova ให้  include ไฟล์ cordova.js, cordova_plugin.js และเริ่มแบบนี้

$(document).on("pagecreate","#pageID",function(){
    document.addEventListener("deviceready", onDeviceReady, false);
});

function onDeviceReady(){
    //begin code here
}

เป็นการลองแบบคาดการณ์ดูนะครับ ไม่รู้ว่าจะมีปัญหาอะไรที่ยังไม่ทราบไหม

การเพิ่ม plug-in ให้กับ Cordova project

Apache Cordova ตั้งแต่รุ่น 3.0 มา ได้แยกส่วนของ plug-in ออกจากตัวโค้ดหลัก ทำให้โปรแกรมเมอร์ต้องติดตั้ง plug-in แยกต่างหาก ซึ่งก็มีข้อดีและข้อยุ่งยาก ข้อดีที่ผมเห็นก็คือ นักพัฒนาสามารถเลือกที่จะเพิ่ม ลบ อัพเดท plug-in ให้กับโปรเจคของตนเองได้ โดยไม่ต้องมี plug-in ทั้งหมดอยู่ด้วยกันเหมือนแต่ก่อน และทำให้ผู้ที่สนใจพัฒนา plug-in เองสามารถแลกเปลี่ยนและแจกจ่าย plug-in ได้ง่ายขึ้น ผ่านเว็บ http://plugins.cordova.io/

ส่วนข้อยุ่งยากคือ มันไม่สามารถติดตั้ง plug-in เองได้ง่ายๆ จริงแล้ว plug-in หลักๆสามารถไปดาวน์โหลดได้ที่ https://www.apache.org/dist/cordova/plugins/ แต่ผมลองพยายามติดตั้งแล้ว ไม่สำเร็จ ลองไปแกะโค้ดที่ติดตั้งผ่านเครื่องมืออื่น ก็พบว่ายุ่งยากพอสมควร

เลยตัดสินใจกลับมาทำตามคู่มือ
วิธีแรก ถ้าเราติดตั้ง Cordova แบบแรก (คือเลือก platform) ให้ใช้ plugman เข้าช่วย
วิธีที่สอง ถ้าเราติดตั้ง Cordova แบบที่สองคือผ่าน npm ก็ติดตั้ง plug-in ง่ายๆได้เลย

สรุปแล้ว ถ้าติดตั้งแบบเลือก platform ต้องติดตั้ง plugman ต่อ ซึ่งตัวนี้ก็ต้องติดตั้งผ่าน npm อยู่ดี สรุปแล้วยังไงก็ต้องทำกระบวนการติดตั้งแบบวิธีที่สองโดยติดตั้ง npm และ plugman ให้เสร็จก่อน ตามนี้ (ไม่ต้องติดตั้ง cordova ก็ได้)

จากนั้น
กรณีแรก
ไม่ติดตั้ง Cordova แต่ดาวน์โหลดตัว platform มา เช่น Android ก็เปิด command prompt เรียก setpath.bat ที่เคยทำไว้ในบทความก่อนหน้านี้ สมมติว่าโปรเจคเราอยู่ที่ D:\mobile\code\hello

จากนั้นใช้คำสั่งในรูปแบบ
plugman install --platform --project --plugin
เช่น ถ้าต้องการติดตั้ง plugin ชื่อ geolocation สำหรับบอกพิกัดของอุปกรณ์ ก็จะใช้คำสั่ง
plugman install --platform android --project D:\mobile\code\hello --plugin org.apache.cordova.geolocation

ก็เป็นอันเรียบร้อยแล้วครับ

กรณีที่สอง

ติดตั้ง Cordova แล้ว เปิด command prompt เรียก setpath.bat ที่เคยทำไว้ในบทความก่อนหน้านี้ ย้ายไปยังโฟลเดอร์ของโปรเจค เช่น D:\mobile\code\hello แล้วก็ใช้คำสั่งง่ายๆ คือ

cordova plugin add org.apache.cordova.geolocation

ก็เสร็จแล้วครับ

ติดตั้ง Apache Cordova (PhoneGap) แบบเกือบ portable บน Windows (วิธีที่สอง: ลองทดสอบโค้ด jQuery Mobile)

ต่อจากตอนที่แล้ว หลังจากสร้าง Cordova Project แบบ multi-platform และได้ทดสอบกับ Android platform แล้ว ตอนนี้เราจะลองทำการเปลี่ยนโค้ด โดยเพิ่ม jQuery Mobile เหมือนกับ ตัวอย่างนี้ กันครับ

ไปที่โปรเจค D:\mobile\code\multi\www แล้วแก้ไขไฟล์ index.html ดังต่อไปนี้

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
 <link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css">
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/jquery.mobile-1.4.4.min.js"></script>
        <script src="cordova.js"></script>
 <script src="js/index.js"></script>
    </head>
 
    <body>
        <div data-role="page" id="pageHome">
            <div data-role="header">
                <h3>Header</h3>
            </div>
            <div data-role="main" class="ui-content">
                <button id="bttOK" class="ui-btn ui-btn-inline">OK</button>
            </div>
            <div data-role="footer">
                <h3>Footer</h3>
            </div>
        </div>       
    </body>
</html>

และแก้ไขไฟล์ index.js ในโฟลเดอร์ js ดังนี้

$(document).on("pagecreate","#pageHome",function(){
 document.addEventListener("deviceready", onDeviceReady, false);
});

function onDeviceReady(){
 $("#bttOK").on("tap",function(){
  alert("Hello World!");
 });
}

อย่าลืมคัดลอกไฟล์ jquery และ jquery mobile ทั้ง .js และ .css ไปไว้ยังโฟลเดอร์ js และ css ตามลำดับด้วยครับ

จากนั้นลองทดสอบ run เลยก็ได้ครับ สมมติว่าตอนนี้เราอยู่ที่โฟลเดอร์ของโปรเจค เช่น D:\mobile\code\multi ก็ใช้คำสั่ง

cordova run android

ก็น่าจะได้ผลลัพธ์เหมือนตัวอย่างก่อนหน้านี้เช่นเดียวกัน