การสร้างแอพลิเคชันสำหรับ Windows 8 App Store (ตอนที่ 2)

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

สร้างโปรเจกต์ใหม่

แอพลิเคชันส่วนใหญ่มักจะมีหลายหน้าจอ รวมถึงแอพลิเคชันที่เรากำลังจะสร้างด้วย เพื่อความง่ายเราจะสร้างแอพลิเคชันจากเทมเพลตที่ Visual Studio เตรียมไว้ให้เลย ดังนี้

1. เรียกเมนู File > New Project...
2. เลือกเทมเพลตโดยเลือกหัวข้อ Templates > JavaScript จากเมนูด้านซ้าย จากนั้นเลือก Navigation App
3. ตั้งชื่อโปรเจกต์ในช่อง Name จากนั้นคลิกปุ่ม OK

รอสักครู่เราจะได้โปรเจกต์ตั้งต้นพร้อมหน้าแรก สามารถคลิกปุ่ม Start Debugging (ปุ่มไอคอน play สีเขียวบนแถบเครื่องมือ) เพื่อลองทดสอบได้ทันที

โครงสร้างของโปรเจกต์

ก่อนจะเริ่มลงมือ เรามาศึกษาโครงสร้างของโปรเจกต์กันก่อน ให้สังเกตที่แถบ Solution Explorer ด้านขวาบนของหน้าจอ ส่วนนั้นจะแสดงส่วนประกอบของโปรเจกต์ ซึ่งมีส่วนหลักๆ ดังนี้

• default.htmlเป็นหน้าจอหลักของแอพลิเคชัน (อาจเป็นชื่ออื่นหากค่าในไฟล์ package.appxmanifest กำหนดเป็นอย่างอื่น)
• css/default.cssเป็นไฟล์สไตล์ชีทกำหนดลักษณะการแสดงผลโดยรวมของแอพลิเคชัน
• js/default.jsเป็นไฟล์จาวาสคริปต์ตั้งต้นที่จะทำงานเมื่อเปิดแอพลิเคชัน
• js/navigator.jsเป็นจาวาไฟล์สคริปต์เพื่อควบคุม navigation ระหว่างหน้า
• package.appxmanifestเป็นไฟล์กำหนดคุณลักษณะต่างๆ ของโปรเจกต์ เช่น แอพลิเคชันชื่ออะไร หน้าหลักของแอพลิเคชันอยู่ที่ไหน แอพลิเคชันต้องการสิทธิ์อนุญาตอะไรบ้าง เป็นต้น (ลักษณะเดียวกับไฟล์ AndroidManifest.xml บนแอนดรอยด์)

สำหรับไฟล์เว็บเพจ จาวาสคริปต์ สไตล์ชีท และรูปภาพนั้น เราจะกำหนดชื่อและวางไว้ในตำแหน่งใดก็ได้ เนื่องจากเราจะต้องเป็นคนอ้างอิงไฟล์ดังกล่าวเองทั้งหมด เช่นเดียวกับการสร้างเว็บเพจทั่วๆ ไป (เช่น ไฟล์จาวาสคริปต์และสไตล์ชีทต้องใส่ไว้ในแท็ก head ของหน้าเว็บเพจ)

การใช้คอนโทรลพื้นฐาน

หน้าหลักของแอพลิเคชันคือ default.html จะมีเพียง div ที่ทำหน้าที่เป็น PageControlNavigator เพื่อนำหน้าต่างๆ มาแสดงเท่านั้น เราสามารถกำหนดหน้าแรกที่จะเริ่มแสดงผลได้จากที่นี่ โดยตอนแรกโปรเจกต์ได้กำหนดไว้ให้เปิดหน้า /pages/home/home.html

ในส่วนของหน้า /pages/home/home.html นั้นจะมีโครงสร้างหลักๆ ของหน้าอยู่ โดยปกติ

เราจะลองแก้ไขหน้าแรกให้มีปุ่ม New และ Open ดู โดยเปิดไฟล์ /pages/home/home.html และแก้ไขเนื้อหาในแท็ก section ใหม่ดังนี้

<section aria-label="Main content" role="main">
    <button id="newButton">New</button>
    <button id="openButton">Open</button>
</section>

ลองสั่งรันแอพลิเคชันดูจะพบปุ่มทั้งสองปรากฎบนหน้าจอแล้ว

จะสังเกตได้ว่า การพัฒนาในเบื้องต้นแทบไม่ต่างจากการสร้างเว็บเพจตามปกติ โดยเราสามารถใช้แท็ก HTML มาตรฐานต่างๆ ในการสร้างแอพลิเคชันได้เลย

การสร้างหน้าใหม่ เราจะทำให้แอพลิเคชันเปลี่ยนหน้าไปยังหน้า editor เมื่อผู้ใช้คลิกปุ่ม New แต่ก่อนอื่นเราจะต้องสร้างหน้า editor ขึ้นมาเสียก่อน โดยทำดังนี้ 1. ที่ Solution Explorer คลิกขวาที่โฟลเดอร์ pages จากนั้นเลือกเมนู Add > New Folder แล้วกำหนดชื่อโฟลเดอร์เป็น editor 2. คลิกขวาที่โฟลเดอร์ editor ที่สร้างขึ้นใหม่ จากนั้นเลือกเมนู Add > New Item... 3. เลือก Page Control จากนั้นกำหนดชื่อในช่อง Name เป็น editor.html แล้วกดปุ่ม OK

เราจะได้หน้าใหม่ /pages/editor/editor.html พร้อมไฟล์สไตล์ชีทและจาวาสคริปต์ตั้งต้นแล้ว จากนั้นเพิ่มช่องแก้ไขข้อความลงไปในหน้า โดยเพิ่ม textarea เข้าไป หมายเหตุ: ในหน้าที่สร้างขึ้นด้วยวิธีนี้ ส่วนหัวของไฟล์ HTML จะไม่ได้เรียกใช้ไฟล์ default.css เราต้องไปเพิ่มแท็ก <link href="/css/default.css" rel="stylesheet"/> เอาเอง

ข้อควรทราบเกี่ยวกับการเขียนโปรแกรมด้วยภาษาจาวาสคริปต์

สำหรับผู้ที่ไม่คุ้นเคยกับภาษาจาวาสคริปต์ มีเรื่องที่ต้องทำความเข้าใจเบื้องต้นดังนี้

ในภาษาจาวาสคริปต์ เราสามารถเขียนสคริปต์ได้โดยตรง แต่การเขียนแบบนั้นอาจเกิดปัญหาการประกาศตัวแปรและใช้ตัวแปรกันข้ามไฟล์สคริปต์ได้ ดังนั้นโดยปกติเราจะเขียนโค้ดในฟังก์ชัน จากนั้นเรียกใช้ฟังก์ชันนั้นทันทีอีกทีนึง เช่น

(function () {
    "use strict";
    // Our code goes here...
    var myVar = 8;
})();

การเขียนแบบนี้จะทำให้เราประกาศและใช้ตัวแปรได้โดยไม่ต้องกลัวว่าจะมีไฟล์สคริปต์ไฟล์อื่นมากำหนดค่าทับลงไปได้

การรับฟังอีเวนต์จากคอนโทรล และการกำหนด navigation

เมื่อหน้าใหม่พร้อมแล้ว เราจะสั่งให้แอพลิเคชันเปลี่ยนหน้าเมื่อกดปุ่ม New โดยเปิดไฟล์ /pages/home/home.js จะพบโครงสร้างโค้ดที่ใช้กำหนดพฤติกรรมของหน้า ดังนี้

(function () {
    "use strict";
    WinJS.UI.Pages.define("/pages/test/test.html", {
        ready: function (element, options) {
            // TODO: Initialize the page here.
        },
        unload: function () {
            // TODO: Respond to navigations away from this page.
        },
        updateLayout: function (element, viewState, lastViewState) {
            // TODO: Respond to changes in viewState.
        }
    });
})();

ฟังก์ชัน WinJS.UI.Pages.defineจะใช้สำหรับกำหนดให้หน้าเว็บเพจของเรากลายเป็น PageControlได้ โดยอาร์กิวเมนต์แรกระบุที่อยู่ของหน้า ส่วนอาร์กิวเมนต์ที่สองเป็นวัตถุระบุที่มีฟังก์ชันระบุพฤติกรรมต่างๆ ของหน้า เราจะแก้ไขในฟังก์ชัน readyซึ่งจะถูกเรียกเมื่อหน้าถูกสร้างขึ้นเรียบร้อยพร้อมใช้งาน ให้เริ่มฟังอีเวนต์จากปุ่ม newButtonดังนี้

(function () {
    "use strict";
    var onNewDocument = function (event) {
        WinJS.Navigation.navigate("/pages/editor/editor.html");
    };
    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function (element, options) {
            var newButton = element.querySelector('#newButton');
            newButton.addEventListener("click", onNewDocument);
        }
    });
})();

ในฟังก์ชัน readyบรรทัดแรกเราจะหาอีลิเมนต์ที่มีไอดีเป็น newButtonก่อน จากนั้นจึงสั่งให้ฟังอีเวนต์ clickหากมีการคลิกให้เรียกฟังก์ชัน onNewDocumentส่วนฟังก์ชัน onNewDocumentเรียกฟังก์ชัน WinJS.Navigation.navigateเพื่อเปลี่ยนหน้าไปยังหน้าที่ต้องการ กรณีที่ต้องการส่งค่าไปให้หน้าใหม่ได้ สามารถส่งผ่านอาร์กิวเมนต์ตัวที่สองได้ (ซึ่งเราจะใช้ในตอนต่อๆ ไป)

เสร็จแล้วทดลองรันโปรแกรม เราจะสามารถคลิกปุ่ม New เพื่อไปยังหน้าใหม่ที่เราสร้างได้แล้ว และสามารถคลิกปุ่ม Back เพื่อย้อนกลับมาหน้าเดิมได้ด้วย (ทำงานได้ด้วยซอร์สโค้ดส่วนที่ Visual Studio สร้างไว้ให้เรา)

ตกแต่งหน้าตาด้วย HTML/CSS

เราสามารถตกแต่งหน้าตาแอพลิเคชันได้โดยใช้ HTML5/CSS3 พื้นฐาน โดยเราจะเริ่มจากปรับเปลี่ยนสีของแอพลิเคชัน และปรับหน้าตาของปุ่ม New และ Open ใหม่ให้คล้ายคลึงกับ Tile เพื่อไม่ให้หน้าตาดูโล่งเกินไป

สำหรับการปรับสีพื้นหลังนั้นสามารถทำได้ง่ายโดยกำหนดคุณสมบัติของ #contentHostในไฟล์ default.cssส่วนการปรับหน้าตาของปุ่มนั้น เราจะถือโอกาสนี้ทดลองใช้ความสามารถในการจัดวัตถุด้วยกริดกัน

เริ่มต้นจากเปิดไฟล์ /pages/home/home.htmlแล้วแก้ไขจากปุ่มเป็น div ที่ครอบด้วยข้อความแทน ดังนี้

<section aria-label="Main content" role="main">
    <div id="newButton" class="tileButton">
        <p>New</p>
    </div>
    <div id="openButton" class="tileButton">
        <p>Open</p>
    </div>
</section>

จากนั้นตกแต่งหน้าตาปุ่ม โดยกำหนดสไตล์ของคลาส titleButtonซึ่งทำได้เช่นเดียวกับการตกแต่งหน้าเว็บเพจด้วย CSS3 ทั่วไป ดังนี้

.tileButton {
    background: rgb(71, 169, 80);
    border: 1px solid rgb(109, 179, 81);
}
.tileButton p {
    margin: 10px;
    font-weight: 200;
    font-size: x-large;
}

จากนั้นเราจะกำหนดให้ปุ่มเรียงกันในกริด ให้เปิดไฟล์ /pages/home/home.cssแล้วกำหนดให้ container (ในที่นี้คืออีลิเมนต์คลาส homepage) ให้เป็น grid container ดังนี้

.homepage section[role=main] {
    display: -ms-grid;
    -ms-grid-columns: 250px;
    -ms-grid-rows: 120px 10px 120px;
    margin-top: 60px;
    margin-left: 120px;
}

การทำให้อีลิเมนต์กลายเป็น grid container สามารถกำหนดได้โดยใหสไตล้ display มีค่าเป็น -ms-grid; จากนั้นเราสามารถกำหนดได้ว่าจะให้ตัวกริดเรียงตัวอย่างไรโดยใช้สไตล์ -ms-grid-columns และ -ms-grid-rows กำหนดขนาดของแถวและคอลัมน์ทีละอันตามลำดับ โดยเราสามารถกำหนดด้วย px, หรือกำหนดเป็นอัตราส่วนต่อพื้นที่ที่เหลืออยู่ด้วยหน่วย fr, หรือกำหนดเป็น auto เพื่อให้ขนาดเป็นไปตามเนื้อหาของสมาชิกก็ได้

ในที่นี้เรากำหนดให้กริดมีสามแถว สูง 120px, 10px, 120px ตามลำดับ (แถวที่สูง 10px กันไว้เป็นช่องว่างระหว่างปุ่ม) และคอลัมน์เดียวกว้าง 250px ส่วน margin-top และ margin-left กำหนดเพิ่มเติมเพื่อให้ตัวกริดห่างออกมาจากขอบจอ

จากนั้นเราจึงกำหนดให้อีลิเมนต์ในกริดไปประจำในช่องกริด ดังนี้

#newButton {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}
#openButton {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

ทดลองรันแอพลิเคชันอีกครั้ง เราจะพบปุ่มมีหน้าตาคล้าย Tile และเรียงกันในกริดแล้ว

การใช้ความสามารถของ CSS

เราสามารถตกแต่งหน้าตา และกำหนดอนิเมชันเบื้องต้นให้กับคอนโทรลของเราได้ง่ายๆ โดยใช้ความสามารถของ CSS โดยในที่นี้เราจะกำหนดให้ปุ่มย่อขนาดลง 10% เมื่อถูกกด ทำได้โดยแก้ไขไฟล์ /pages/home/home.cssดังนี้

.tileButton {
    background: rgb(71, 169, 80);
    border: 1px solid rgb(109, 179, 81);
    -ms-transition: -ms-transform ease-out 0.2s;
    -ms-transform: scale(1.0, 1.0);
}
.tileButton:active {
    -ms-transform: scale(0.9, 0.9);
}

อีกตัวอย่างหนึ่งคือการกำหนดขนาดของ textarea ในหน้า editor ให้มีขนาดเต็มหน้าจอ โดยใช้ฟังก์ชัน calc ช่วยกำหนดขนาด โดยเปิดไฟล์ /pages/editor/editor.css แล้วเพิ่มเติมโค้ดดังนี้

#contentArea {
    font-size: x-large;
    /* Clear default margin */
    margin: 0;
    /* Include padding in width/height */
    box-sizing: border-box;
    /* Use feature of CSS3 to calculate width and height. */
    /* Warning: The space between value and the minus sign is required. */
    /* width = 100% - 120px left - 120px right */
    width: calc(100% - 240px);
    
    /* 60px is just a magic number for beautifulness */
    height: calc(100% - 60px);
}

รายละเอียดเพิ่มเติมเกี่ยวกับการปรับแต่งหน้าตาด้วย CSS สามารถอ่านได้จาก[เอกสารในเว็บไซต์ Microsoft] (http://msdn.microsoft.com/en-us/library/ie/hh673536(v=vs.85).aspx)

การกำหนดสไตล์สำหรับขนาดหน้าจอต่างๆ

โดยปกติผู้ใช้สามารถกำหนดขนาดหน้าจอของแอพลิเคชันได้ 3 state หลักๆ คือ

แบบ Full screen view

แบบ Fill view

แบบ Snapped view

นอกจากนี้หากแอพลิเคชันถูกรันบนแท็บเล็ต ผู้ใช้ก็สามารถหมุนหน้าจอได้อีกด้วย

เพื่อประสบการณ์ที่ดีของผู้ใช้งาน เราควรขนาดและการจัดเรียงคอนโทรลต่างๆ ให้เหมาะสมกับขนาดหน้าจอแต่ละแบบ โดยเราสามารถกำหนดสไตล์ชีทเฉพาะ view state หรือการตั้งหน้าจอก็ได้

วิธีที่ง่ายที่สุดในการเขียนสไตล์ชีทเพื่อแสดงผลหลายหน้าจอ คือกำหนดสไตล์สำหรับขนาดหน้าจอปกติก่อน จากนั้นจึงกำหนดสไตล์สำหรับขนาดหน้าจอเฉพาะแบบ เฉพาะค่าที่ต้องการ override จากขนาดหน้าจอปกติ

ตัวอย่างเช่น ในแอพลิเคชันของเรา ความกว้างของ editor จะไม่เท่ากัน สามารถกำหนดได้ดังนี้

@media screen and (-ms-view-state: snapped) {
    .editor section[role=main] {
        margin-left: 20px;
    }
    #contentArea {
        /* width = 100% - 20px left - 20px right */
        width: calc(100% - 40px);
    }
}
@media screen and (-ms-view-state: portrait) {
    .editor section[role=main] {
        margin-left: 100px;
    }
    
    #contentArea {
        /* width = 100% - 100px left - 100px right */
        width: calc(100% - 200px);
    }
}

การใช้คอนโทรลเฉพาะของ Windows 8

นอกจากคอนโทรลพื้นฐานใน HTML5 แล้ว ยังมีคอนโทรลอีกจำนวนหนึ่งที่เป็นคอนโทรลเฉพาะของ Windows 8 ที่เราสามารถนำมาใช้ได้ วิธีการเรียกใช้ทำได้โดยการประกาศ div แล้วกำหนดประเภทคอนโทรลที่จะใช้ในแอตทริบิวต์ data-win-control และกำหนดตัวเลือกอื่นๆ ในแอตทริบิวต์ data-win-options

ตัวอย่างการใช้งานแรกที่เราได้เห็นไปแล้ว (แต่ไม่ได้เขียนเอง) นั่นคือ PageControlNavigator ที่ถูกสร้างให้อัตโนมัติใน default.html นั่นเอง

<div id="contenthost" 
    data-win-control="Application.PageControlNavigator" 
    data-win-options="{home: '/pages/home/home.html'}">
</div>

รายการคอนโทรลทั้งหมดสามารถดูได้จากเอกสาร

การสร้าง AppBar

AppBar นั้นถือเป็นคอนโทรลประเภทหนึ่งในหน้า จึงสามารถสร้างได้โดยการเขียน HTML ตัวอย่างนี้เราจะสร้าง AppBar และเพิ่มปุ่ม Save เข้าไปในหน้า /pages/editor/editor.html

<div class="editor fragment">
    ...
    <div id="bottomAppBar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{
                id: 'saveButton',
                label: 'Save',
                icon: 'save',
                section: 'global'
            }">
        </button>
    </div>
</div>

สำหรับไอคอนที่มีอยู่แล้วในระบบสามารถดูชื่อได้จากเอกสาร

ส่วนวิธีการกำหนดการทำงานเมื่อผู้ใช้คลิกปุ่มก็ไม่ต่างจากปุ่มแบบปกติ คือหานั้นแก้ไขโค้ดในไฟล์ /pages/editor/editor.jsในที่นี้เราจะกำหนดให้เมื่อผู้ใช้คลิกปุ่ม ให้ปิด AppBar ไปก่อน โดยยังไม่ต้องบันทึกเอกสารจริงๆ

(function () {
    "use strict";
    var bottomAppBar;
    var saveButton;
    var onClickSaveButton = function (event) {
        bottomAppBar.winControl.hide();
    }
    WinJS.UI.Pages.define("/pages/editor/editor.html", {
        ready: function (element, options) {
            bottomAppBar = element.querySelector("#bottomAppBar");
            saveButton = element.querySelector("#saveButton");
            saveButton.addEventListener("click", onClickSaveButton);
        }
    });
})();

สังเกตว่าคอนโทรลเฉพาะของ Windows 8 นั้นจะมี property ชื่อ winControl ซึ่งจะมี property และฟังก์ชันต่างๆ ของคอนโทรลให้เรียกใช้งานได้เพิ่มเติมด้วย

ตอนต่อไป

ตอนนี้เราสร้างส่วนติดต่อผู้ใช้พื้นฐานได้แล้ว ในตอนต่อไปเราจะศึกษาวงจรชีวิตของแอพลิเคชัน และฟีเจอร์อื่นๆ สำหรับแอพลิเคชันใน Windows 8 App Store ให้มากยิ่งขึ้น ก่อนจะทำให้แอพลิเคชันของเราอ่านและเขียนไฟล์ได้จริงๆ ต่อไป