Just a Computer Graphics Studio & My Life

Posts tagged ‘teach’

[Ionic][AngularJS] 選單

就像人生，面臨許多選擇，AngularJS選單可以怎麼呈現呢？

[Ionic][AngularJS] 選單.png

View的部分可以這麼寫：

/**
 Theme: AngularJS Select
 IDE: Sublime
 Language: Javascript
 Date: 106/07/13
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

    <select ng-init="somethingHere = kidList[0]"
ng-model="somethingHere"
ng-options="option.Name for option in kidList"
ng-change="select()">
    </select>
  • ng-init為預設值
  • ng-model為被選擇的變數
  • ng-options為選擇項目
  • ng-change為選擇後的行為

Controller可以這麼做：

/**
 Theme: AngularJS Select
 IDE: Sublime
 Language: Javascript
 Date: 106/07/13
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

  $scope.kidList = JSON.parse(AuthService.storageGet('kidList'));

  $scope.select = function () {
       $scope.selectId = $scope.somethingHere.Id;
  };

參考：getting the ng-object selected with ng-change。

廣告

分類：

AngularJS, Ionic, 教學

Tagged with:

[Ionic][AngularJS] 回傳呼叫 (Callback)

呼叫API之後，要等它處理完並傳回訊息，就能進行接下來的工作，這個行為叫做回傳呼叫 (Callback)，類似其它語言的Closure或Block。

那麼在AngularJS要怎麼實現Callback呢？

原來函數中的參數，可以函數型態傳入呀！

/**
 Theme: Callback
 IDE: Sublime
 Language: Javascript
 Date: 106/07/08
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

function two() {
	console.log("value is 2")
}
function one(callback) {
	console.log("value is 1")
	callback()
}
one(function() {
	two()
})

執行結果：

value is 1
value is 2

參考：Wait for callback response in AngularJS / Ionic。

分類：

AngularJS, Ionic, 教學

Tagged with:

[Ionic][AngularJS] Youtube 離開畫面停止播放

承接[Ionic][AngularJS] 載入Youtube影片，想要離開畫面就停止播放，該怎麼做呢？因為進到下一頁，正在播放的影片還沒有被移除，就會持續播放下去。

在controllers.js中寫：

.controller('ResultCtrl', function($scope, $sce) {

  $scope.pauseVideo = function() {
    console.log('postMessage pauseVideo');
    var iframe = document.getElementsByTagName("iframe")[0].contentWindow;
    iframe.postMessage('{"event":"command","func":"' + 'pauseVideo' +   '","args":""}', '*');
  }

  $scope.playVideo = function() {
    console.log('postMessage playVideo');
    var iframe = document.getElementsByTagName("iframe")[0].contentWindow;
    iframe.postMessage('{"event":"command","func":"' + 'playVideo' +   '","args":""}', '*');
  }

  $scope.$on('$ionicView.beforeLeave', function(){
    console.log('pauseVideo');
    $scope.pauseVideo();
  });

  $scope.$on('$ionicView.enter', function(){
    console.log('playVideo');
    $scope.playVideo();
  });

})

還要在Youtube影片網址後方連接參數⋯⋯

?enablejsapi=1

格式會像是：https://www.youtube.com/embed/uSmcLz2FAUI?enablejsapi=1

程式碼才會有作用喔～

參考：How to pause or stop an iframe youtube video when you leave a tab view or minimise your Ionic App。

分類：

AngularJS, Ionic, 教學

Tagged with:

[iOS] 調整HTML中影像寬度 (Adjust Image Width in HTML)

有時候App畫面需要套用Web內容，你就會發現很神奇的地方，就是Web開發者說已經調整好寬度100%，可是在我們App中顯示就是有問題，像是貓咪的臉會被截掉⋯⋯

那到底是誰的問題呢？基本上我是認為Web寫好直接套用就要呈現期望的樣子，App這邊不需要特別設定什麼。

ios-%e8%aa%bf%e6%95%b4html%e4%b8%ad%e5%bd%b1%e5%83%8f%e5%af%ac%e5%ba%a6-adjust-image-width-in-html00001

不過呢⋯⋯也許App元件本身有問題，此時就要找出替代方案，總是有前人遇過類似的問題，google就對了！

（繼續閱讀…）

分類：

iOS, 教學

Tagged with:

[iOS] 不要緩存網路資料

原以為已經解決AFNetworking會暫存資料的問題，第二次驗收還是被資安公司給退件，那麼只好使出一勞永逸的絕招！就是讓整個App網路資料都不要暫存資料，也就是說不只是針對AFNetworking，設定NSURLCache就能做到！透過模擬器追蹤Cache資料夾，打開Cache.db查看真的不再暫存撈回來的資料。

Disable AFNetworking Cache00004

可以看到追蹤模擬器資料夾會有個Cache.db。

（繼續閱讀…）

分類：

iOS, 教學

Tagged with:

[iOS] DBAccess 資料庫

上次提到FMDB 資料庫，這次講解DBAccess 資料庫，我一個月前才研究，2016/6/23要講給同事們聽時，便發現DBAccess被Shark吃掉了⋯⋯

DBAccess Shark.png

（繼續閱讀…）

分類：

iOS, 教學

Tagged with:

[iOS] 背景獲取 (Background Fetch)

 

背景獲取 (Background Fetch)可用在：有個情境是想在使用者開啟App前，就將所需要的資料從網路載入完畢，當使用者打開App後就會發現，顯示的資料都是最新的，而不用再重新整理來獲取最新資料。

看前人教學得知有三件事情要做：

step1:

專案Capabilities設定Background Modes打開Background fetch。

背景獲取 (Background Fetch).png

/**
 Theme: Background Fetch
 IDE: Xcode 8
 Language: Objective C
 Date: 106/06/06
 Author: HappyMan
 Blog: https://cg2010studio.wordpress.com/
 */
// step2
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [[UIApplication sharedApplication] setMinimumBackgroundFetchInterval:UIApplicationBackgroundFetchIntervalMinimum];
}
// step3
-(void)application:(UIApplication *)application performFetchWithCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  NSLog(@"performFetchWithCompletionHandler");
}

若要測試是否能運作，在工具列操作Debug的Simulate Background Fetch，點下去後原本App在前景就會強制跑到背景，若有在performFetchWithCompletionHandler設中斷點，就會發現App會執行這函式。

背景獲取 (Background Fetch)2.png

至於觸發時機，就要看系統怎麼判定你的App要多久喚醒一次，若它發現使用者時常在晚上九點開啟你的App，也許系統就會在晚上八點五十五分喚醒你的App，於是你可以執行載入最新資料的動作。

參考：Background Modes Tutorial: Getting Started。

分類：

iOS, 教學

Tagged with:

標籤雲

%d 位部落客按了讚：