PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

19 November 2016 By


ต่อจากเนื้อหาในตอนที่แล้ว เราได้รู้จักวิธีการดึงข้อมุลจากเว็บไซต์มาแสดง
ใน app ionic material ผ่านการใช้งาน services มาแล้ว เนื้อหาในตอนนี้
จะเพิ่มเติมในส่วนของการใช้งาน plugin ที่ชื่อว่า themeablebrowser ซึ่งเป็น
ตัวที่พัฒนาต่อมาจาก InAppBrowser plugin
 
สามารถเข้าไปศึกษารายละเอียดเพิ่มเติมด้วยตัวเองได้ที่
https://github.com/initialxy/cordova-plugin-themeablebrowser
 
ก่อนเริ่มในส่วนของเนื้อหา เนื่องจากตอนนี้เป็นตอนต่อเนื่องจากตอนที่แล้วเรื่อง
ดึงข้อมูลจาก server มาแสดงใน app ionic material 
http://www.ninenik.com/content.php?arti_id=740 via @ninenik
 
ดังนั้นสามารถดูเนื้อหาทั้งสองตอนประกอบกันได้
 
เริ่มต้นการใช้งาน inapp browser plugin 

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

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

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

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

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

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

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

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

    ให้เปิดไฟล์ 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 หรือไฟล์ที่เราใช้ดึงข้อมูล

 

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

    ให้เปิดไฟล์ 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


 

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

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


 

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



 



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



Tags:: ionicmaterial ionicframework

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





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