เนื้อหาต่อเนื่องจากตอนที่ 1
เรียนรู้ ionicframework สร้าง hybrid mobile app ตอนที่ 1
https://www.ninenik.com/content.php?arti_id=521 via @ninenik
พูดคุย ก่อนเข้าเนื้อหา
เนื้อหาที่นำมาทำข้อมูล จะสังเกตว่าเป็นลักษณะของการทำตามตัวอย่าง
และเป็นการฝึกเขียน โดยเริ่มจาก 0 ของผู้เชียนเนื้อหาเอง คือกำลังศึกษาไปด้วย
เหตุผลที่ฝึกเขียนไปด้วยและ นำมาสร้างเนื้อไปด้วย เพราะต้องการย้ำความเข้าใจ
ของผู้เขียนเอง รวมทั้งแบ่งปัน เก็บเป็นข้อมูลไว้
โดยส่วนตัว ผู้เขียนเคยชอบที่จะอ่านและเข้าใจในสิ่งที่อ่าน แต่ไม่เคยลงมือทำ
ทำให้ไม่เกิดประสิทธิผล เช่น มองโค้ด ตามตัวอย่างต่างๆ อ่านไปเรื่อยๆ เข้าใจการทำงาน
แต่ไม่เคยลงมือทำ สุดท้ายก็คือว่างเปล่า ไม่ได้อะไรเลย ดังนั้น จึงย้ำว่า
สำหรับคนที่สนใจ ลองทำตาม หรือเรียนรู้ไปพร้อมกันได้ ยิ่งฝึกพิมพ์ จะยิ่งมอง
ภาพรวมออกง่ายขึ้น
เช้าเนื้อหา ต่อจากตอนที่ 1
ตัวอย่างผลลัพธ์ที่เราต้องการ แสดงตามด้านล่าง
ก่อนเริ่ม ขออธิบาย ส่วนของแท็ก สองส่วนนี้ในไฟล์ index.html จาก
ตอนที่ 1 คร่าวๆ ก่อน
- <html ng-app="myIonicApp"> ส่วนนี้กำหนด directive ng-app สำหรับใช้งาน angularjs
- <body ng-controller="myIonicHome"> ส่วนนี้สำหรับกำหนด directive ส่วนของจะจัดการ
เช่น เหตุการณ์ event การคลิก หรือการทำอะไรก็ตามในส่วนของ body ที่ angularjs เรียกใช้
หมายเหตุ สำหรับคนที่ไม่เข้าใจ หรือไม่รู้จัก angularjs สามารถศึกษาเพิ่มเติมในเว็บนี้ก็มี หรือ
ถ้าไม่ให้ การเรียนรู้ ionicframework สะดุด ก็ให้เข้าใจเพียงว่า มันคือ javascript ตัวหนึ่ง แค่นี้พอ
1. มาเริ่มต้นที่ส่วนแรก on-side-menus
ให้เข้าใจว่า ถ้าจะทำ mobile app ทีมี side muenus เราต้องใช้ โค้ด ต่อไปนี้
โดยโค้ดด้านล่าง ไม่ใช่แท็ก html ปกติ แต่เป็น directive ของ angurlarjs
ที่เราสามารถกำหนดรูปแบบเองได้ ซึ่งทาง ionicframework จะใช้แท็ก
<ion- ขึ้นต้นแบบนี้เป็น directive
รูปแบบแท็ก side menu แบบเต็ม จะมีแยก สามส่วนคือ ด้านซ้าย สำหรับ side menu ฝั่งซ้าย
ดรงกลาง สำหรับส่วนของเนื้อหา และ ด้านขวา สำหรับ side menu ด้านขวา
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
</ion-side-menu>
<!-- Right menu -->
<ion-side-menu side="right">
</ion-side-menu>
</ion-side-menus>
แต่ตัวอย่างเรา จะมีแค่สองส่วนคือ ด้านซ้าย และตรงกลาง ดังนั้นเราจะตัด ตัว ด้านขวาออก
มาวางในส่วนของ body ตามนี้เลย
<body ng-controller="myIonicHome">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
</ion-side-menu>
</ion-side-menus>
</body>
2. เราจะทำต่อในส่วนของ side menu ด้านซ้าย โดยจะเพิ่ม
header และ content เข้าไป
รูปแบบแท็กคือ header
<ion-header-bar>
</ion-header-bar>
รูปแบบ content
<ion-content>
</ion-content>
โดย content ในเมนูด้านซ้าย เราจะไม่เพิ่มอะไรเข้าไป
ส่วน header เราจะใส่หัวข้อเข้าไป และกำหนด สีสัน ด้วย css
ใช้ class="bar bar-header bar-positive"
โดยแทรกโค้ดตามนี้ เข้าไปใน side menu ด้านซ้าย
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">bar-positive</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-side-menu>
3. เพิ่มในส่วนของ ตรงกลาง คือใน side-menu-content
ทำแบบเดียวกับ side-menu left จะได้ตามโค้ดด้านล่าง
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">bar-positive</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-side-menu-content>
4. เพิ่มปุ่ม สำหรับเรียกแสดง side-menu ด้านซ้ายด้วยโค้ด
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
และเปลี่ยน title h1 ซักหน่อยเป็น My Home Ionic จะได้เป็น
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar bar-header bar-positive">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title">My Home Ionic</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-side-menu-content>
อธิบายเพิ่มตรงปุ่ม
menu-toggle="left" ให้เข้าใจว่า เป็นส่วนที่ใช้ซ่อน หรือแสดง side-menu
class="button button-icon icon ion-navicon" สำหรับส่วนนี้ก็จะเป็นการกำหนด css class
ในที่นี้จะเป็นปุ่มรูปเส้นขีดแนวนอน โดยใช้ชื่อ ion-navicon
ดูเพิ่มเติมชื่อได้ที่ http://ionicons.com/
ก่อนไปต่อใน เรามาดูหน้าตา การแสดงผลก่อน เรียกใช้งาน angularjs เพื่อ complie
แท็ก directive กับหลัง เรียกใช้งาน
ตัวอย่าง ก่อนเรียกใช้งาน angularjs
จากตัวอย่างด้านบน จะเห็นว่า เนื่องจากเรายังไม่ได้เรียกใช้การจัดการ app ด้วย angularjs
ก็จะแสดงไม่สมบูรณ์ ตามรุปแสดงเฉพาะส่วนของ side-menu ด้านซ้าย
ต่อที่ขั้นตอนที่ 5
5. เรียกใช้งาน angularjs เพื่อสร้าง module จาก directive ng-app
<html ng-app="myIonicApp">
โดยให้ไปแก้ไขที่ไฟล์ app.js
โค้ดไฟล์ app.js แบบมีคำอธิบาย
// สร้าง module ขึ้นมาชื่อ myIonicApp และเรียกใช้ ionic components
angular.module('myIonicApp', ['ionic']) // อ้างอิงชื่อ module <html ng-app="myIonicApp">
// กำหนดกิจกรรม หรือการกระทำทั้งในส่วนควบคุม <body ng-controller="myIonicHome">
.controller('myIonicHome', function($scope) { // ส่งค่า scope เข้ามาใช้งาน
// scope ก็คือ object ของ module มีลักษณะเลียนแบบตามรูปแบบของ DOM
// หรือโครงส้ราง html
});
โค้ดไฟล์ app.js
angular.module('myIonicApp', ['ionic'])
.controller('myIonicHome', function($scope) {
});
พอเรามีการเรียกใช้งาน javascirpt ทำให้ module ทำงาน ก็จะทำให้ side-menu และปุ่ม
กดซ่อนแสดง ท่ำงานได้ ตามตัวอย่างด้านล่าง
6. มาเพิ่มแท็บเมนูด้านล่าง ด้วยแท็กต่อไปนี้
<div class="tabs tabs-icon-top">
<a class="tab-item" href="#">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
โดยจะเพิ่มต่อแท็ก </ion-content> ที่แสดงตรงส่วนกลาง
อันนี้เราเพิ่มดูการแสดงผล ไม่ได้ต่อยอด ทำอะไรต่อในตอนนี้
ผลที่ได้
7. ส่วนสุดท้าย ลองทดสอบ การใช้งาน angularjs กับการแสดง checkbox
โดยจะไปเพิ่ม model data ในไฟล์ app.js
ให้กับ scope เป็นชุดของ ข้อมูล arrays ที่เป็น object อีกที
angular.module('myIonicApp', ['ionic'])
.controller('myIonicHome', function($scope) {
$scope.listItem=[
{listtext:'List number 1'},
{listtext:'List number 2'},
{listtext:'List number 3'},
{listtext:'List number 4'}
];
});
listItem จะเป็น model ที่จะถูกเรียกใช้
จากนั้นที่ไฟล์ index.html เราจะเพิ่มโค้ดต่อไปนี้เข้าไปใน ส่วน ion-content ส่วนกลาง
เป็นลิสรายการ checkbox ตามโค้ดด้านล่าง
<ion-content class="scroll-content ionic-scroll has-header">
<ul class="list">
<li class="item item-checkbox" ng-repeat="mylist in listItem">
<label class="checkbox">
<input type="checkbox">
</label>
{{mylist.listtext}}
</li>
</ul>
</ion-content>
โค้ดพร้อมคำอธิบาย
ำหนด class ให้กับ ion-content กรณี มี header-->
<ion-content class="scroll-content ionic-scroll has-header">
<ul class="list">
<!--
มีการใช้ directive ของ angularjs เพื่อวนลูปแสดงข้อมูล ด้วย ngRepeat
ใน html จะเขียนเป็น ng-repeat ใช้ ng-repeat="mylist in listItem"
โดยนำค่า medel listItem มาวนลูปแสดง อ้างอิงด้วยชื่อ mylist
-->
<li class="item item-checkbox" ng-repeat="mylist in listItem">
<label class="checkbox">
<input type="checkbox">
</label>
<!-- แสดงข้อความของ model -->
{{mylist.listtext}}
</li>
</ul>
</ion-content>
ตัวอย่าง เมื่อเสร็จแล้ว
ไฟล์ index.html ทั้งหมด
<!DOCTYPE html>
<html ng-app="myIonicApp">
<head>
<meta charset="utf-8" />
<!-- เบอร์โทรทีแสดง กำหนดให้เป็นลิ้งค์ และกดโทรได้ กรณี ios ในที่นี้ เป็น no-->
<meta name="format-detection" content="telephone=no" />
<!-- กำหนดให้กดลิ้งค์ แล้วแสดง highlight ใน window phone ในที่นี้ เป็น no-->
<meta name="msapplication-tap-highlight" content="no" />
<!-- กำหนด การแสดงผลสำหรับมือถือ รายละเอียด ค้นหาเพิ่มเติมได้-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<!-- เรียกใช้ css ionic-->
<link href="css/ionic.css" rel="stylesheet">
<!-- เรียกใช้งาน javascript ไฟล์นี้จะมีการรวมไปถึง angularjs ด้วย-->
<script type="text/javascript" src="js/ionic.bundle.js"></script>
<!-- ไฟล์ javascript ที่เราจะเขียนโค้ดเพิ่ม เพื่อใช้งาน -->
<script type="text/javascript" src="app.js"></script>
<title>MyIonicApp 1</title>
</head>
<body ng-controller="myIonicHome">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar bar-header bar-positive">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title">My Home Ionic</h1>
</ion-header-bar>
<!-- กำหนด class ให้กับ ion-content กรณี มี header-->
<ion-content class="scroll-content ionic-scroll has-header">
<ul class="list">
<!--
มีการใช้ directive ของ angularjs เพื่อวนลูปแสดงข้อมูล ด้วย ngRepeat
ใน html จะเขียนเป็น ng-repeat ใช้ ng-repeat="mylist in listItem"
โดยนำค่า medel listItem มาวนลูปแสดง อ้างอิงด้วยชื่อ mylist
-->
<li class="item item-checkbox" ng-repeat="mylist in listItem">
<label class="checkbox">
<input type="checkbox">
</label>
<!-- แสดงข้อความของ model -->
{{mylist.listtext}}
</li>
</ul>
</ion-content>
<div class="tabs tabs-icon-top">
<a class="tab-item" href="#">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">bar-positive</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
ไฟล์ app.js ทั้งหมด
angular.module('myIonicApp', ['ionic'])
.controller('myIonicHome', function($scope) {
$scope.listItem=[
{listtext:'List number 1'},
{listtext:'List number 2'},
{listtext:'List number 3'},
{listtext:'List number 4'}
];
});
ขอจบเท่านี้ รอติดตาม เนื้อหาเพิ่มเติมต่อไป
เนื้อหาที่เกี่ยวข้อง