75才からのモバイルアプリ作成

MIT App Inventor 2 を使ったアプリ作成

MIT App Inventor 2で遊ぶ (THE MOVIE DB 9)

2024-07-02 08:36:20 | 日記

バットマンって映画、何本あったっけ。。。という時がある。

今回は、「Batman」で検索すると、過去に上映されたその名前の映画のリストを表示する画面を追加した。

アプリ実行のビデオ:

スクリーンのデザイン:

従来。家のアイコンがあった場所に今回の画面へのボタンを設置。(拡大鏡のアイコン)

右図は、新しいsearchMovieScreenの画面デザイン。

                                            

ブロック・コード:

searchMovieScreenのみ。

1. searchButtonをタップしたら、もしsearchTextboxが空白ではない場合、所定のURLに対しGETリクエスト行う関数makeGETRequestを実行する。searchTextboxが空白の場合は、映画の名前を入力するように促す。

2. 関数makeGETRequest:所定のURLを生成し、GETリクエストを行う。

3. データ取得に成功すれば、Dictionary形式にデコードし、変数dataJSONに格納。

また、総ページ数を変数totalPagesへ、映画のデータを変数resultsJsonh、同データの個数を変数lengthOfDataへそれぞれ格納する。

「現在のページ/総ページ数」をshowNumberOfPagesラベルに表示。

必要なデータを抽出する関数makeDataListおよびそれらデータを統合する関数makeDataforListViewを実行し、その結果をLIstViewに表示。

4. 必要なデータを抽出する関数makeDataList。

映画のデータを格納しているresultsJsonをfor each〜 で各データを抽出しリスト形式で格納していく。

5. 関数makeDataforListView:抽出したデータのリストを一つのリスト形式にまとめ、体裁も整え、変数dataListForListViewに格納。

なお、ポスター画については、もし、ポスター画のファイル名がなくnullが値として入っている場合は、ダミーの画像(NoImage3Trans.png)を表示するように設定。

6. ListViewの行をタップすると、ListViewの画面は非表示となり、VerticlaArrangement2が表示され、該当映画のポスター画が表示される。

XのcloseButtonをタップするとポスター画を表示したVerticalArrangement2は非表示となり、ListViewの画面(VerticalArrangement1)が表示される。

7. ページ送りとページ戻しのボタンの動作設定

8. backButton「X」をタップすると元のメインスクリーンへ戻る。

 

                                         **************************************************************************

前回までのブログ:

MIT App Inventor 2で遊ぶ (THE MOVIE DB 8)

MIT App Inventor 2で遊ぶ (THE MOVIE DB 7)

MIT App Inventor 2で遊ぶ (THE MOVIE DB 6)

MIT App Inventor 2で遊ぶ (THE MOVIE DB 5)

MIT App Inventorで遊ぶ (THE MOVIE DB 4)

MIT App Inventorで遊ぶ (THE MOVIE DB 3)

MIT App Inventorで遊ぶ (THE MOVIE DB 2)

MIT App Inventorで遊ぶ (THE MOVIE DB 1-2)

MIT App Inventorで遊ぶ (THE MOVIE DB 1)

 



コメントを投稿