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

ต่อจากเนื้อหาในตอนที่แล้ว เราได้รู้จักวิธีการดึงข้อมุลจากเว็บไซต์มาแสดง

ใน app ionic material ผ่านการใช้งาน services มาแล้ว เนื้อหาในตอนนี้

จะเพิ่มเติมในส่วนของการใช้งาน plugin ที่ชื่อว่า themeablebrowser ซึ่งเป็น

ตัวที่พัฒนาต่อมาจาก InAppBrowser plugin

 

สามารถเข้าไปศึกษารายละเอียดเพิ่มเติมด้วยตัวเองได้ที่

https://github.com/initialxy/cordova-plugin-themeablebrowser

 

ก่อนเริ่มในส่วนของเนื้อหา เนื่องจากตอนนี้เป็นตอนต่อเนื่องจากตอนที่แล้วเรื่อง

ดึงข้อมูลจาก server มาแสดงใน app ionic material 

https://www.ninenik.com/content.php?arti_id=740 via @ninenik

 

ดังนั้นสามารถดูเนื้อหาทั้งสองตอนประกอบกันได้

 

เริ่มต้นการใช้งาน inapp browser plugin 

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

 

 

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

 

 

 

    ให้ทำการแตกไฟล์ แล้ว copy ไฟล์ icon ไปไว้ในโฟเลดอร์ img

    หากต้องการภาพ icon ที่ชัดเพิ่มเติมสามารถเข้าไปโหลดได้ที่

    https://material.io/icons/

 

  

    โดยใช้คำสั่ง 

 

C:\phonegap\learn003>cordova plugin add cordova-plugin-themeablebrowser

 

 

    ให้เปิดไฟล์ article.html ในโฟลเดอร์ templates แล้วทำการเพิ่ม event เมื่อคลิกที่

รายละเอียดของบทความ ให้เรียกใช้ฟังก์ชั่น ที่เราจะสร้างขึ้นเพื่อเปิดเว็บเพจ

 

<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>

 

 

สังเกตที่บรรทัด 

 

<div class="item item-body" ng-click="openurl('{{article.url}}','_blank')">

 

การทำงานคือ เมื่อคลิกที่เนือหาบทความ ให้เรียกฟังก์ชั่น openurl() โดยส่งค่า url ของ

เพจที่เราต้องการแสดง กับ target หรือการเปิดหน้าต่างใดๆ ในที่นี้ใช้เปิดเป็น _blank

article.url คือค่าที่เราส่งมาแล้วจากการเรียกใช้ service ถ้าหากใครยังไม่ได้กำหนด url

ของเพจที่ต้องการแสดง ก็ต้องไปกำหนดในไฟล์ article_api.php หรือไฟล์ที่เราใช้ดึงข้อมูล

 

    ให้เปิดไฟล์ controllers.js ในโฟลเดอร์ js แล้วดูในส่วนของ ArticleCtrl controller

 

.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 การปรับแต่งเพิ่มเติมสามารถดูได้ที่

 

https://github.com/initialxy/cordova-plugin-themeablebrowser

 

 

 ด้วยคำสั่ง 

 

C:\phonegap\learn003>phonegap build android  

 

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