LoginSignup
1
1

More than 5 years have passed since last update.

@nsuhara

Kony AppPlatformで作成したiOS/Androidアプリのコーディングについて学ぶ

Last updated at Posted at 2018-12-24

はじめに

(Mac環境の記事ですが、Windows環境も同じ手順になります。環境依存の部分は読み替えてお試しください。)

この記事を最後まで読むと、次のことができるようになります。

  • データの引き渡しなど複雑な処理の実装方法について理解する
  • JavaScriptを使って実装する

イメージ画像

Input Output
IMG_0438.PNG >>> IMG_0439.PNG
countUp.js
countUp: function(btn, context) {
    var rowIndex = context.rowIndex;
    var sectionIndex = context.sectionIndex;
    var rowData = context.widgetInfo.data[rowIndex];

    if (Number(rowData.txtCounter.text) + 1 > 20) {
        return;
    }
    rowData.txtCounter.text = Number(rowData.txtCounter.text) + 1;

    context.widgetInfo.setDataAt(rowData, rowIndex, sectionIndex);
}

関連する記事

実行環境

環境 Ver.
macOS Mojave 10.14.1
Kony Visualizer 8.3.10

ソースコード

実際に実装内容やソースコードを追いながら読むとより理解が深まるかと思います。是非ご活用ください。

GitHub

Kony AppPlatformの特徴

簡単な処理はプログラミングレスで開発できますが、複雑な処理はコーディングによる実装が必要となります。クロスプラットフォームを採用しているため、iOSアプリ(Swift)やAndroidアプリ(Java)のプログラミング言語を使用せずJavaScriptで実装します。また、Swiftの内部構成と同様に1つの画面(Form)に対して1つのControllerが自動で割り当てられます。

コーディングの方法

画面(Form)を作成するとControllerとControllerActionsが自動生成されます。コードを書く際はこの2つのControllerに実装します。

自動生成 説明
Controller 汎用的な処理はControllerにコーディングします。作成したFunctionはActionのInvoke Functionから呼び出して使用します。
ControllerActions ActionのAdd Snippetなどでコーディングしたものが自動的に追加されます。ControllerActionsに直接コーディングする事はできません。

スクリーンショット 2018-12-23 0.18.58.png

実装サンプル

  • ボタンを押してテキストボックスの値をカウントアップする
項目名 オブジェクト 説明
lblTitle ラベル タイトル
txtCounter テキストボックス カウント表示
btnCountUp ボタン カウントアップ

画面イメージ

スクリーンショット 2018-12-23 22.06.05.png

Controllerに実装するケース

  1. Controller画面を作成します。Form名はfrmControllerとします。

  2. Projectタブ -> Mobile -> Controllers -> frmControllerControllerをクリックしてdefineの中にカウントアップのコードを書きます。

    frmControllerController.countUp.js
    countUp: function() {
    this.view.txtCounter.text = Number(this.view.txtCounter.text) + 1;
}

  3. Projectタブ -> Mobile -> Forms -> frmController -> btnCountUpをクリックします。次にPropertiesタブ -> ActionたタブのonClickのEditをクリックします。

    スクリーンショット 2018-12-23 21.40.47.png

  4. Functionsの中からInvoke Functionをクリックします。次にFunction NameからcountUpを設定します。

    スクリーンショット 2018-12-23 22.03.39.png

ControllerActionsに実装するケース

  1. ControllerActions画面を作成します。Form名はfrmControllerActionsとします。

  2. Projectタブ -> Mobile -> Forms -> frmControllerActions -> btnCountUpをクリックします。次にPropertiesタブ -> ActionたタブのonClickのEditをクリックします。

    スクリーンショット 2018-12-23 21.40.47.png

  3. Functionsの中からAdd Snippetをクリックします。次にカウントアップのコードを書きます。

    frmControllerActionsControllerActions.js
    self.view.txtCounter.text = Number(this.view.txtCounter.text) + 1;

    スクリーンショット 2018-12-23 22.24.31.png

  4. Projectタブ -> Mobile -> Controllers -> frmControllerActionsControllerActionsをクリックしてdefineの中にSnippetのコードが自動で追加されたことを確認します。

    スクリーンショット 2018-12-23 22.19.25.png

複雑な処理の実装

シナリオ

  • アプリは入力画面と出力画面の2つで構成する
  • 入力画面はリスト一覧を持ち1件ごとに個数のカウントアップ/ダウンを可能とする
  • 出力画面は入力データを引き継ぎデータを結合して表示する

画面イメージ

Input Output
IMG_0438.PNG >>> IMG_0439.PNG

事前準備

各画面を作成してコーディングの準備をします。

  1. 入力画面

    1. リストセクション

      項目名 オブジェクト 説明
      segSection Template テンプレート
      flxSection FlexContainer グループ
      lblName Label タイトル
      txtCounter TextBox カウンター
      btnCountDown Button カウントダウン
      btnCountUp Button カウントアップ

      スクリーンショット 2018-12-23 23.09.43.png

    2. 入力画面

      項目名 オブジェクト 説明
      frmInput Form 入力画面
      flxInput FlexContainer グループ
      lblTitle Label タイトル
      segList Segment リスト
      btnOutput Button 出力ボタン

      スクリーンショット 2018-12-23 23.09.10.png

  2. 出力画面

    項目名 オブジェクト 説明
    frmOutput Form 出力画面
    flxOutput FlexContainer グループ
    lblTitle Label タイトル
    lblResult Label 結果
    btnBack Button 戻るボタン

    スクリーンショット 2018-12-23 23.17.48.png

リストデータ初期化

  1. Projectタブ -> Mobile -> Controllers -> frmInputControllerをクリックしてdefineの中にデータを初期化するコードを書きます。

    frmInputController.initData.js
    initData: function() {
    this.view.segList.setData([
        {
            lblName: {
                text: "Data1"
            },
            txtCounter: {
                text: 0
            },
            btnCountDown: {
                onClick: this.countDown.bind(this)
            },
            btnCountUp: {
                onClick: this.countUp.bind(this)
            }
        },
        {
            lblName: {
                text: "Data2"
            },
            txtCounter: {
                text: 0
            },
            btnCountDown: {
                onClick: this.countDown.bind(this)
            },
            btnCountUp: {
                onClick: this.countUp.bind(this)
            }
        },
        {
            lblName: {
                text: "Data3"
            },
            txtCounter: {
                text: 0
            },
            btnCountDown: {
                onClick: this.countDown.bind(this)
            },
            btnCountUp: {
                onClick: this.countUp.bind(this)
            }
        },
        {
            lblName: {
                text: "Data4"
            },
            txtCounter: {
                text: 0
            },
            btnCountDown: {
                onClick: this.countDown.bind(this)
            },
            btnCountUp: {
                onClick: this.countUp.bind(this)
            }
        },
        {
            lblName: {
                text: "Data5"
            },
            txtCounter: {
                text: 0
            },
            btnCountDown: {
                onClick: this.countDown.bind(this)
            },
            btnCountUp: {
                onClick: this.countUp.bind(this)
            }
        }
    ]);
},

countDown: function(btn, context) {
    alert("rowIndex=" + context.rowIndex);
},

countUp: function(btn, context) {
    alert("rowIndex=" + context.rowIndex);
}

  2. Projectタブ -> Mobile -> Forms -> frmInputをクリックします。次にPropertiesタブ -> ActionたタブのinitのEditをクリックします。

    スクリーンショット 2018-12-23 23.31.26.png

  3. Functionsの中からInvoke Functionをクリックします。次にFunction NameからinitDataを設定します。

    スクリーンショット 2018-12-23 23.48.28.png

カウント処理

  1. Projectタブ -> Mobile -> Controllers -> frmInputControllerをクリックしてdefineの中にカウントダウンのコードを書きます。

    frmInputController.countDown.js
    countDown: function(btn, context) {
    var rowIndex = context.rowIndex;
    var sectionIndex = context.sectionIndex;
    var rowData = context.widgetInfo.data[rowIndex];

    if (Number(rowData.txtCounter.text) - 1 < 0) {
        return;
    }
    rowData.txtCounter.text = Number(rowData.txtCounter.text) - 1;

    context.widgetInfo.setDataAt(rowData, rowIndex, sectionIndex);
}

  2. 同様にdefineの中にカウントアップのコードを書きます。

    frmInputController.countUp.js
    countUp: function(btn, context) {
    var rowIndex = context.rowIndex;
    var sectionIndex = context.sectionIndex;
    var rowData = context.widgetInfo.data[rowIndex];

    if (Number(rowData.txtCounter.text) + 1 > 20) {
        return;
    }
    rowData.txtCounter.text = Number(rowData.txtCounter.text) + 1;

    context.widgetInfo.setDataAt(rowData, rowIndex, sectionIndex);
}

出力処理

  1. Projectタブ -> Mobile -> Controllers -> frmInputControllerをクリックしてdefineの中に出力処理のコードを書きます。frmOutputをインスタンス化して、navigateで画面遷移とリストデータ(JSON)の引き渡しを実装します。

    frmInputController.viewOutput.js
    viewOutput: function() {
    var frmOutput = new kony.mvc.Navigation("frmOutput");
    frmOutput.navigate({data: this.view.segList.data});
}

  2. Projectタブ -> Mobile -> Controllers -> frmOutputControllerをクリックしてdefineの中に出力処理のコードを書きます。onNavigateで画面遷移のイベントを受け取り、引き渡されたデータ(JSON)を加工して出力します。

    frmOutputController.onNavigate.js
    onNavigate: function(params) {
    this.view.lblResult.text = "none";
    for (var data of params.data) {
        if (Number(data.txtCounter.text) === 0) {
            continue;
        }
        if (this.view.lblResult.text == "none") {
            this.view.lblResult.text = data.lblName.text;
        } else {
            this.view.lblResult.text += "\n" + data.lblName.text;
        }
        this.view.lblResult.text += "\t : " + data.txtCounter.text;
    }
}

  3. Projectタブ -> Mobile -> Forms -> frmInput -> btnOutputをクリックします。次にPropertiesタブ -> ActionたタブのonClickのEditをクリックします。

    スクリーンショット 2018-12-23 21.40.47.png

  4. Functionsの中からInvoke Functionをクリックします。次にFunction NameからviewOutputを設定します。

    スクリーンショット 2018-12-24 21.16.59.png

  5. Projectタブ -> Mobile -> Forms -> frmOutput -> btnBackをクリックします。次にPropertiesタブ -> ActionたタブのonClickのEditをクリックします。

    スクリーンショット 2018-12-23 21.40.47.png

  6. Navigationの中からNavigate to Formをクリックします。次にfrmInputを設定します。

    スクリーンショット 2018-12-24 21.35.07.png

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1