GitBookUI生成処理を別ファイルにするはじめに先程は設定情報だけを別のファイルにする方法を解説しましたが、現実にはこういう形よりも、画面単位で処理を分割するアプローチの方がより使い勝手の良いものになるので具体的にその方法についてサンプルコードを示しながら解説をしてきます。ウィンドウを生成するためのファイルを作成するResources直下に、mainWindow.jsというファイルを新規に作成しします。作成後は以下の様なフォルダ構成になるかと思います。tiapp.xmlそれぞれのファイルの役割は以下のようになります。app.js起動時に必要なファイル群を読み込んで最低限の処理を実施mainWindow.jsTi.UI.TableViewなどの必要な要素を配置したTi.UI.Windowを生成するファイルstyle.jsTi.UIのそれぞれの要素の色、幅、高さなどの設定値を保持してるファイル先ほど作成したstyle.jsはそのまま活用しているのでそちらのソースコードと説明は割愛します。app.jsとmainWindow.jsのコードを示しながら順番に解説します。Mobileの新規プロジェクト作成時に出来上がるひな形となるapp.jsでは1つのフィアル内で色々な処理が実施されていましたが、今回のようにいくつかの処理単位にファイルに分割することで、app.jsは、起動時に必要なファイル群を読み込むだけの最低限の処理を行うだけの役割にします。//(2)win.open();app.jsのソースコード解説Ti.UI.Windowを生成する処理をmainWindow.jsに処理をわけているので、そのファイルを読み込むmainWindow.jsにて定義してるcreateWindow()関数に必要な引数を渡してTi.UI.Windowを生成。生成されたオブジェクトは変数winに格納mainWindow.jsの役割それぞれのUI要素が配置されたTi.UI.Windowを生成して最終的にそのTi.UI.Windowを値とし返してます。いう形にすることで、外部からここで定義された関数を実行することが出来ます。することで、変数winに格納されたTi.UI.Windowを得ることが出来ます。winの一行をいれないと、呼び出し側からは、生成したTi.UI.Windowが得られず、何も表示されなくなるので注意が必要です実行結果iPhone、Androidでの実行結果はそれぞれ以下のようになります。iPhoneでの実行イメージAndroidでの実行イメージまとめUI生成処理を別ファイルにする方法についてまとめました。ソースコードの保守性をあげるためにもう一工夫出来る所があるので、その点について次の項で説明します。