adaloで画面遷移部分を作ってみた

adaloでアプリを作成する時に気になる部分として、自分で作った画面をどういう風に遷移させていくか?があります。 今回はその画面遷移部分の解説をしていきます。

こんにちは、普段はゲーム開発に携わるフリーランスプログラマのエルと言います。

前回adaloで、データベース周りに変更を加えてみる記事を書いていました。
今回はアプリ作成で一番見た目に関わる画面部分を作成し、実際に遷移出来るように対応してみたいと思います。
作成する画面はリスト表示のものにして、データベースに入っているユーザー名を表示してみます。

 

新規画面の作成

それでは始めに新規に画面を作成してみます。

一番最初にadaloの説明記事を上げた際に、仮で作成していましたが、一度消して新たに作成していきます。
adaloの画面左にScreenの項目があります。そこを押すと今用意されている画面の一覧が出てきます。その一番ADD SCREENを押すことで、新規の画面を作成出来ます。
ここで新たに開ける画面は、左上にある+ボタンからも開く事が出来ます。

ここでも用意されているテンプレートがあります。

  • Simple
  • Info
  • Intro
  • List
  • Mist

とあります。今回はListの項目に用意されている、Simple Listを使い画面を作成します。

選択後、画面名を入力し、CREATE SCREENを押すことで新規作成完了となります。
今回は「DataDispList」と入力しておきます。

新しく画面が追加されたのが確認できます。

 

遷移出来るように対応

では、次に新規作成した画面に遷移出来るようにしていきます。
今回はチェックを簡単にするために、ログイン画面にボタンを用意し、そのボタンを押したら遷移出来るようにしてみます。

ADD COMPONENTから、Buttonの欄にある「Action Button」を選択します。すると任意の位置に置く事が出来るので、Login画面の左下に置いてみます。

そのボタンには押した時の動作を設定出来るため、置いたボタンを選択し動作を追加します。
選択するとADD ACTIONの項目が出てきますので、押したのちLINKの項目を押します。すると、現在用意している画面の名前の一覧+WebSiteの選択が出てきますので、先ほど新規作成したDataDispListを選択します。

追加すると、ボタンの情報が表示されます。Transitionの項目からボタンに対してどの操作をしたら適応されるかを変更できます。
今回はデフォルトのままPushに、押されたら遷移するようにします。
実際にPREVIEWから見てみると、遷移するのが確認できます。

 

データベースのデータを表示

では次に、肝心のデータを表示する部分を対応します。
DataDispList画面のリスト部分を選択し、「What is this a list of?」と記載されているところで、Userを選択します。

すると、この画面に遷移した際に、今データベースに登録されているUsersにあるデータが一覧で表示されます。とても簡単ですね!
表示される数を制限したり、表示される順番をソートしたりも設定から可能です。
設定項目が多く、ソートの設定も細かく出来るようです。全部紹介すると煩雑になりすぎるため、是非この部分はご自分で確認頂ければと思います。

 

まとめ

今回はリスト表示させる画面を新規に作成し、そのリストで登録されているユーザーを表示してみました。
基本的にボタンの要素を追加したら、そのボタンを選択した際に出来ることが表示されるため、そこを見ていくだけでも十分に作っていくことが出来ます。
保存する必要もないため、変更を加えたらすぐにPREVIEWからチェックしても、反映されているのは良い点です。保存し忘れて反映されていないということがないため、時間のロスも少なくなります。
用意されている様々な機能を使っていくことで、この機能で何が出来るのか?が把握しやすくなりますので、是非一度自分でアプリを作成してみてください!

Adaloリンク

 

 

 

私が参加しているギルドプロジェクトでは、こういったadaloのようなシステム・サービスの導入や、サービス間を連携するプログラムの作成などを通して業務効率化を行っており、様々な効率化事例から業務効率化を代行する「カワリニ」というサービスを展開しています。

お問い合わせは無料で対応させていただいております。
今職場にITの担当者がいらっしゃらず、業務フローに無駄を感じている場合、お気軽にお問い合わせください。
カワリニチームが全力でサポートさせていただきます!