Browser Widgetを使いブラウザ内での画面遷移・更新を行う方法

## 目次

1.はじめに
2.完成イメージ
3.画面UI作成
4.ロジック作成
5.アクション設定
6.まとめ

## はじめに

Browser Widgetでは、
ブラウザ内での画面遷移や画面の更新を行うことのできるメソッドがあります。
その他にもいくつかメソッドあるので、
今回は、簡単なアプリを作りながら各メソッドのご紹介をしたいと思います！

Browser WidgetがどのようなWidgetかわからないという方は、
以下も参考にしてみてくださいね。

https://qiita.com/Kony_Team/items/3293efc1fe33893825ec

早速作っていきましょう！

## 完成イメージ

今回の完成イメージは以下の通りです。

![ezgif-5-b5e077bb64.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/027be5ff-a832-212f-c33d-660882f57288.gif)

ブラウザWidgetを使い、Yahooのページを表示しています。
上部に３つのボタンを配置しており、
戻るボタンで、前の画面に戻る
進むボタンで、次の画面に進む
更新ボタンで、画面の更新を行なっています。

また、
前の画面がある場合は、戻るボタンを表示
次の画面がある場合は、進むボタンが表示されるようになっています。

早速実装方法を紹介していきます！

まずはFormのレイアウトを作成していきましょう。

## 画面UI作成

まず、ブラウザの画面遷移・更新をする上で必要となるWidgetをFormに作成していきます。

今回はこのようにWidgetを配置しました。

![kizi1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d15737b5-b66d-e3f2-5de7-d22e7bb6fd22.png)
![スクリーンショット 2022-10-12 11.27.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3c179218-c9c2-c632-ce89-87a4bdde48d5.png)

ブラウザのURLは、Yahoo（https://www.yahoo.co.jp/） のURLを指定します。
指定指定は、下記のページに説明がありますので、
わからない方は参考にしてみてください👀

https://qiita.com/Kony_Team/items/168102ba29c9501870d2

次に、戻るボタンと進むボタンは初回非表示にしたいので、
右メニューにあるLookタブからVisibleをOFFにしておきましょう。

![スクリーンショット 2022-10-25 11.06.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/45345752-3f2a-770d-1fe9-ac7acae7e669.png)

これで今回のFormが完成しました！

続いて、ロジックとアクションの設定を行なっていきます。

## ロジック作成
今回は下記のようにロジックを作成しました。

```frmSampleController.js
define({ 
  
  onPageStarted : function(){
    var canGoBck = this.view.bwrSample.canGoBack();
    if(canGoBck){
      this.view.btnBack.isVisible = true;
    }else{
      this.view.btnBack.isVisible = false;
    }
    var canGoFwd = this.view.bwrSample.canGoForward();
    if(canGoFwd){
      this.view.btnGo.isVisible = true;  
    }else{
      this.view.btnGo.isVisible = false;
    } 
  },

  onClickBack : function(){
    this.view.bwrSample.goBack();
  },

  onClickGo : function(){
    this.view.bwrSample.goForward();   
  },

  onClickReload : function(){
    this.view.bwrSample.reload();
  }
  
});
```
今回のアプリで使用している、
Browser Widgetのメソッドを順にご紹介します。

### ブラウザの履歴取得

`canGoBack` メソッドは、
ブラウザ内で戻る画面があるかどうかを判定するBrowser Widgetのメソッドになります。
「Browser Widget名.canGoBack」と指定してあげることで、
戻る画面があるかどうかを真偽値で返却してくれます。

if文の中で戻る画面がある場合は、
戻るボタンを表示、
戻る画面がない場合は、
戻るボタンを非表示という処理を行なっています。

`canGoForward`も同様で、
進む画面があるかどうかを判定するメソッドとなります。

### 戻る/進む/画面更新
`goBack`メソッドは、
「Browser Widget名.goBack」と指定することで、
ブラウザで表示している前の画面に戻ることができます。

`goForward`も同様で、
ブラウザで表示している次の画面に進むことができます。

`reload`では、
ブラウザ内の画面の更新を行います。

ブラウザ外に配置したボタンからブラウザ内を制御することができるため、
外部のページを表示したい場合に、これらの機能を知っておくと便利です。

## アクション設定

ロジックが完成したので、
それぞれのボタンにアクションを設定していきましょう。

Browser Widgetを選択した状態で、
Actionタブの`onPageStarted`をクリックします。

![スクリーンショット 0004-11-14 15.54.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2731f326-dbdf-9888-7c7e-4d2aa499e66e.png)

`onPageStarted`は、
ブラウザ内に表示するページの読み込みが開始した時に呼ばれるアクションです。
画面の読み込み時に、戻る/進むボタンを表示するかどうか判定を行いたいので、
このアクションに、Controllerで定義した`onPageStarted`を設定します。

![スクリーンショット 2022-10-13 9.58.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/353e7b38-fe4f-b3cf-af60-a7a96428d407.png)


次に、進む/戻る/更新ボタンにはそれぞれ対応するアクションを設定していきます。

↓戻るボタンクリック時のアクション
![スクリーンショット 2022-10-13 10.02.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/4b87092f-1887-f4a1-271b-6798b5443161.png)

↓進むボタンクリック時のアクション
![スクリーンショット 2022-10-13 10.03.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a297103d-01c1-6a15-0196-83438e61cf7d.png)

↓更新ボタンクリック時のアクション
![スクリーンショット 2022-10-13 10.06.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ee7cfcaa-8823-9bdb-66ad-c6bfd94f94f4.png)


アクションの設定が完了したら早速ビルドして確認してみましょう！

![ezgif-5-b5e077bb64.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/027be5ff-a832-212f-c33d-660882f57288.gif)

完成イメージの通り、
戻る/進む画面があればそれぞれボタンが表示され、
ボタンを押下すると、ブラウザ内での画面遷移、画面更新を行なわれているのがわかるかと思います！


##  最後に

今回紹介したメソッドを使用することで、
ブラウザの画面を自由に遷移、更新することができるので、
是非活用してみてくださいね！


## 参考

https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Content/Browser.htm