เปิดหน้าเว็บเพจด้วย inapp browser ใน ionic material

เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee
ionicmaterial ionicframework

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ionicmaterial ionicframework

ดูแล้ว 6,935 ครั้ง


ต่อจากเนื้อหาในตอนที่แล้ว เราได้รู้จักวิธีการดึงข้อมุลจากเว็บไซต์มาแสดง
ใน app ionic material ผ่านการใช้งาน services มาแล้ว เนื้อหาในตอนนี้
จะเพิ่มเติมในส่วนของการใช้งาน plugin ที่ชื่อว่า themeablebrowser ซึ่งเป็น
ตัวที่พัฒนาต่อมาจาก InAppBrowser plugin
 
สามารถเข้าไปศึกษารายละเอียดเพิ่มเติมด้วยตัวเองได้ที่
 
ก่อนเริ่มในส่วนของเนื้อหา เนื่องจากตอนนี้เป็นตอนต่อเนื่องจากตอนที่แล้วเรื่อง
ดึงข้อมูลจาก server มาแสดงใน app ionic material 
 
ดังนั้นสามารถดูเนื้อหาทั้งสองตอนประกอบกันได้
 
เริ่มต้นการใช้งาน inapp browser plugin 

1. ให้ทำการดาวน์โหลด icon สำหรับแสดงในแถบเมนูใน browser 

    โดยจะมี icon close , back , next , share และ menu
 

    ดาวน์โหลด icon สำหรับ inapp browser ได้ที่ https://goo.gl/smyXAP

 
    รูปภาพประกอบ
 

 
 
    ให้ทำการแตกไฟล์ แล้ว copy ไฟล์ icon ไปไว้ในโฟเลดอร์ img
    หากต้องการภาพ icon ที่ชัดเพิ่มเติมสามารถเข้าไปโหลดได้ที่
 

2. ให้ทำการติดตั้ง plugin themeablebrowser  

    โดยใช้คำสั่ง 
 
1
C:\phonegap\learn003>cordova plugin add cordova-plugin-themeablebrowser
 
 

3. กำหนดเรียกใช้ฟังก์ชั่น เปิดเว็บเพจใน inapp browser 

    ให้เปิดไฟล์ article.html ในโฟลเดอร์ templates แล้วทำการเพิ่ม event เมื่อคลิกที่
รายละเอียดของบทความ ให้เรียกใช้ฟังก์ชั่น ที่เราจะสร้างขึ้นเพื่อเปิดเว็บเพจ
 
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
32
33
34
35
<ion-view view-title="Article">
    <ion-nav-buttons side="right">
        <div class="buttons buttons-right header-item">
    <span class="right-buttons">
    <button class="button button-icon button-clear ion-android-more-vertical"> </button>
    </span>
        </div>
    </ion-nav-buttons>
    <ion-content class="stable-bg" ng-class="{expanded:isExpanded}">
        <ion-refresher on-refresh="refresh()"></ion-refresher>
        <div ng-show="!articles.length">
            <div style="text-align: center;">
                <h4>Pull to refresh</h4>
            </div>
        </div>
        <div class="list card light-bg" ng-repeat="article in articles">
            <div class="item item-avatar">
                <img ng-src="{{article.img}}">
                <h2>{{article.topic}}</h2>
                <p>{{article.date}}</p>
            </div>
 
            <div class="item item-body" ng-click="openurl('{{article.url}}','_blank')">
                <img ng-src="{{article.img}}" alt="" style="margin: auto;">
                <p>
                    {{article.description}}
                </p>
                <p>{{article.view}} views</p>
 
            </div>
        </div>
 
 
    </ion-content>
</ion-view>
 
 
สังเกตที่บรรทัด 
 
1
<div class="item item-body" ng-click="openurl('{{article.url}}','_blank')">
 
การทำงานคือ เมื่อคลิกที่เนือหาบทความ ให้เรียกฟังก์ชั่น openurl() โดยส่งค่า url ของ
เพจที่เราต้องการแสดง กับ target หรือการเปิดหน้าต่างใดๆ ในที่นี้ใช้เปิดเป็น _blank
article.url คือค่าที่เราส่งมาแล้วจากการเรียกใช้ service ถ้าหากใครยังไม่ได้กำหนด url
ของเพจที่ต้องการแสดง ก็ต้องไปกำหนดในไฟล์ article_api.php หรือไฟล์ที่เราใช้ดึงข้อมูล

 

4. ปรับแต่ง ArticleCtrl สำหรับควบคุมการทำงานหน้า Article

    ให้เปิดไฟล์ controllers.js ในโฟลเดอร์ js แล้วดูในส่วนของ ArticleCtrl controller
 
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
.controller('ArticleCtrl', function(
    $scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion
    ,$ionicPlatform, ArticleService, $cordovaToast, $cordovaSpinnerDialog) {
    $scope.$parent.showHeader();
    $scope.$parent.clearFabs();
    $scope.$parent.setHeaderFab(false);
    $scope.$parent.hasShadow();
 
    $timeout(function() {
        $scope.isExpanded = false;
        $scope.$parent.setExpanded(false);
    }, 300);
 
    // สร้างฟังก์ชั่นสำหรับเรียกใช้ Toast plugin
    $scope.showToast = function(str, duration, position){
        $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
            return $cordovaToast
                .show(str, duration, position)
                .then(function(success) {
                    // success
                }, function (error) {
                    // error
                });
        });
    };
 
    // สร้างฟังก์ชั่นสำหรับเปิดเว็บเพจ รับค่า url และ target
    $scope.openurl = function(url, target){
 
        $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
            // เรียกให้ plugin ทำงานหร้อมปรับแต่งการแสดงผล
            cordova.ThemeableBrowser.open(url, target, {
                statusbar: {
                    color: '#ffffffff'
                },
                toolbar: {
                    height: 44,
                    color: '#f0f0f0ff'
                },
                title: {
                    color: '#003264ff',
                    showPageTitle: true
                },
                backButton: {
                    wwwImage: 'img/ic_chevron_left_black_48dp.png',
                    wwwImagePressed: 'img/ic_chevron_left_black_48dp.png',
                    wwwImageDensity: 2,
                    align: 'left',
                    event: 'backPressed' // กด back ให้ทำงานที่ backPressed
                },
                forwardButton: {
                    wwwImage: 'img/ic_chevron_right_black_48dp.png',
                    wwwImagePressed: 'img/ic_chevron_right_black_48dp.png',
                    wwwImageDensity: 2,
                    align: 'left',
                    event: 'forwardPressed'
                },
                closeButton: {
                    wwwImage: 'img/ic_close_black_48dp.png',
                    wwwImagePressed: 'img/ic_close_black_48dp.png',
                    wwwImageDensity: 2,
                    align: 'left',
                    event: 'closePressed'
                },
                customButtons: [
                    {
                        wwwImage: 'img/ic_share_black_48dp.png',
                        wwwImagePressed: 'img/ic_share_black_48dp.png',
                        wwwImageDensity: 2,
                        align: 'right',
                        event: 'sharePressed'
                    }
                ],
                menu: {
                    wwwImage: 'img/ic_more_vert_black_48dp.png',
                    wwwImagePressed: 'img/ic_more_vert_black_48dp.png',
                    wwwImageDensity: 2,
                    title: 'Test',
                    cancel: 'Cancel',
                    align: 'right',
                    items: [
                        {
                            event: 'helloPressed',
                            label: 'Hello World!'
                        },
                        {
                            event: 'testPressed',
                            label: 'Test!'
                        }
                    ]
                },
                backButtonCanClose: true
            }).addEventListener('backPressed', function(e) {
                $scope.showToast('ทำการกดปุ่ม Back', 'long', 'bottom');
            }).addEventListener('forwardPressed', function(e) {
                $scope.showToast('ทำการกดปุ่ม forward', 'long', 'bottom');
            }).addEventListener('helloPressed', function(e) {
                $scope.showToast('ทำการกดปุ่ม Hello', 'long', 'bottom');
            }).addEventListener('sharePressed', function(e) {
                $scope.showToast('ทำการกดปุ่ม share URL=' + e.url, 'long', 'bottom');
            }).addEventListener(cordova.ThemeableBrowser.EVT_ERR, function(e) {
                $scope.showToast('แจ้ง error:' +e.message, 'long', 'bottom');
            }).addEventListener(cordova.ThemeableBrowser.EVT_WRN, function(e) {
                $scope.showToast('เตือน warning:' +e.message, 'long', 'bottom');
            });
 
        });
 
    };
 
 
    // กำหนดตัวแปร สำหรับไว้รับค่าข้อมูลบทความ
    $scope.articles = [];
 
 
     // สร้างฟังก์ชั่นสำหรับไปดึงข้อมูลจาก server
    $scope.refresh = function(){
        $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
            // เรียกใช้ ArticleService ให้ทำงานฟังก์ชั่น getArticle
            ArticleService.getArticle()
                .then(function (response) {
                    $cordovaSpinnerDialog.hide();
                    // นำผลลัพธ์ที่ได้เก็บในตัวแปร $scope.articles
                    $scope.articles = response;
                    // ซ่อนหลังจาก ข้อมูลแสดงแล้ว
                    $scope.$broadcast("scroll.refreshComplete");
                });
        });
    };
 
    // เราจะให้ทำการโหลดข้อมลเมื่อเข้ามาหน้า article แต่แรก
    // และให้แสดง loading
    $ionicPlatform.ready(function() { // เตรียมก่อนเรียกใช้ plugin
        // แสดง spin dialog plugin จะใช้หรือไม่ก็ได้ นำมาใช้เผื่อใครไปประยุกต์เพิ่ม
        $cordovaSpinnerDialog.show(null,"รอสักครู่..กำลังโหลดข้อมูล"); // แสดง loading
        $scope.refresh();
    });
 
 
 
    ionicMaterialMotion.fadeSlideInRight();
 
    ionicMaterialInk.displayEffect();
 
})
 
 
    การปรับแต่งเพิ่มในหน้า article ผ่าน ArticleCtrl controller คือเรามีการให้แสดงบทความ
ทันทีที่เข้ามาหน้านี้ โดยไม่จำเป็นต้องไปกดแล้วดึงส่วนของเนื้อหา หรือที่เรียกว่า pull to refresh
เพื่อแรกดูข้อมูล แต่คุณสมบัติ การกดดึงแล้ว refresh ก็ยังคงอยู่เหมือนเดิม นอกจากนั้นเราได้มีการเรียกใช้
plugin toast และ ก็ loading ที่เป็น spinnerdialogs มาช่วยในการแสดงการแจ้งเตือน
    สำหรับ plugin ในส่วนของ inapp browser ก็จะไม่มีอะไรมาก จะเป็นปรับแต่งบางส่วน เช่น
สีของ แถบเครื่องมือ การกำหนดตำแหน่งของ icon การกำหนด event ให้ icon การกำหนดรูปภาพ
ให้ icon การปรับแต่งเพิ่มเติมสามารถดูได้ที่
 


 

5. ทำการ build apk ไฟล์แล้วนำไปทดสอบติดตั้งบนมือถือ 

 
 ด้วยคำสั่ง 
 
1
C:\phonegap\learn003>phonegap build android
 
ให้ทำการทดสอบติดตั้งในมือถือ android ของเรา จะได้หน้าตา app ประมาณนี้
ปล. เว็บไชต์ www.ninenik.com ไม่ได้ปรับหน้าเว็บให้เป็นแบบ responsive เนื่องจากความจำเป็นในบทความทำให้ การแสดงใน 
inapp browser จะดูไม่สวย 
 
      
 


 

ดาวน์โหลดไฟล์ apk ตัวอย่างได้ที่ https://goo.gl/WfDBvG



 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง



Tags:: ionicframework ionicmaterial







URL สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ