金子邦彦研究室プログラミングJavaScript による Web プログラミングWindows で RhoConnect アプリケーションを作ってみる

Windows で RhoConnect アプリケーションを作ってみる

このページでは,次のことを行う.

前準備

ビュー

  1. app/test/index.erb をダブルクリック
  2. 「Add link here」の部分を書き換え

    次のプログラムを記述する

    <li>
        <a href="Product">
            <span class="title">Add link here...</span>
        </a>
    </li>
    

    [image]

    実行

    1. ビルド用の設定ファイルは build.yml である

      [image]
    2. プロジェクトを右クリックし、「Run As...」を選び、「Run Configurations...」 を選ぶ

      [image]
    3. RhoMobile アプリケーションを右クリックし、「New」を選ぶ

      [image]
    4. バージョンを指定して、「Apply」をクリック. 引き続き「Run」をクリック

      [image]
    5. シミュレータの画面が現れる

      [image]
    6. 「Add link here...」をクリックしてみる
    7. 「New」をクリックしてみる
    8. 値を入れ、「Create」をクリック
    9. リストに新しいデータ「1」が増えている。 「2」をクリック
    10. データが現れる

    RhoStudio を用いた RhoMobile アプリケーションの作成と起動

    RhoConnect アプリケーションのひな形

    関連する外部ページhttps://en.wikipedia.org/wiki/RhoMobile_Suite

    RhoMobile アプリケーション・プロジェクトの新規作成を行う.

    1. 「File」→ 「New」→ 「Project」と操作する

      [image]
    2. RhoConnect application を選ぶ

      [image]
    3. プロジェクト名の設定

      ◆ この実行例では「RhoconnectApplication1」と設定している

      [image]
    4. プロジェクトが作成できたことの確認

      [image]

      ソース・アダプタの設定

      1. プロジェクトを右クリックし、「Nを選び、「RhoConnect source adapter」 を選ぶ

        [image]
      2. RhoMobile アプリケーションを右クリックし、「New」を選ぶ

        [image]
      3. ソース・アダプタ名を指定して「Finish」をクリック
      4. ソース・アダプタ名が作成できたことの確認

        sourcesの下にファイルができる

        [image]

      実行

      1. ビルド用の設定ファイルは build.yml である
      2. プロジェクトを右クリックし、「New」を選び、「Run Configurations...」 を選ぶ

        [image]
      3. RhoConnect アプリケーションを右クリックし、「New」を選ぶ

        [image]
      4. Run」をクリック

        [image]
      5. 画面が現れる

        [image]

        [image]

        RhoMobile アプリケーションと RhoConnect アプリケーションの連携

        1. RhoMobile アプリケーションの rhoconfig.txt に、次のように設定する
          syncserver = 'http://<RhoConnect を稼働させるマシンの IP アドレス>:9292/application'
          

          [image]
        2. モデルのファイルに「enable: sync」を書き加える

          [image]
        3. プロジェクトを右クリックし、「Run As...」を選び、「Run Configurations...」 を選ぶ

          [image]
        4. RhoMobile アプリケーションの下の設定ファイル(先ほど作成したもの)をクリックし、引き続き「Run」をクリック

          [image]
        5. シミュレータの画面が現れる.

          「Login」ができるようになっている

          [image]
        6. 任意のユーザ名、パスワードでログインできる(設定をしていないので)

          [image]
        7. ログインしたら、 「Add link here ... 」や、画面下の設定ボタンをクリックしてみる。ここでは、まず、 「Add link here ... 」をクリックしてみる。

          [image]
        8. 「New」をクリック

          [image]
        9. 値を入れ、「Create」をクリック

          [image]
        10. 行が増えた

          [image]
        11. 今度は、画面下の設定ボタンをクリックしてみる。すると設定用のメニューが現れる

          [image]