Tulipでアプリを作成する際に、一から画面レイアウトを作成すると時間がかかりますが、TulipのUIテンプレートアプリを使うと作りたい画面レイアウトをコピー&ペーストで作ることができるため、効率的にアプリを作成できます。
本記事では、TulipライブラリにあるUIテンプレートアプリをインポートし、画面レイアウトをコピー&ペーストする手順をご案内します。
UIテンプレートのインポート手順
- お客様のTulipのインスタンスにアクセスします。
- 画面右上にある「アプリ作成」ボタンをクリックします。
- 下記のようなモーダル画面が表示されます。
- 画面右中段にある検索ボックスに、「Tulip UI」と入力して少し待つと「Tulip UI Template」というおすすめアプリが表示されます。
- Tulip UI Templateアプリをクリックして選択し、「作成」ボタンをクリックします。
- Tulip UI Templateアプリが作成されます。
新規アプリの作成手順
次に、UIテンプレートアプリを使用するアプリを新規に作成します。
- お客様のTulipのインスタンスにアクセスします。
- 画面右上にある「アプリ作成」ボタンをクリックします。
- テキストボックスに任意のアプリ名を入力し、「作成」ボタンをクリックします。
- 新規アプリが作成されます。
画面レイアウトのコピー&ペースト手順
最後に、Tulip UI Templateの画面レイアウトを新規アプリにコピー&ペーストします。
- 先ほどインポートした「Tulip UI Template」のベースレイアウトを開きます。
※ベースレイアウトは全てのステップに共通の画面レイアウトとなります。 - ベースレイアウトが表示されている状態で、Ctrl + Aキーを押下します。ベースレイアウトに配置されている全てのウィジェットが選択された状態となります。
- 次にCtrl + Cキーを押下し、さきほど作成した新規アプリのベースレイアウトに移動します。
- Ctrl + Vキーを押下し、さきほどコピーしたウィジェットを貼り付けます。
- 左ペインの表示されている「無題のステップ」をクリックし、貼り付けしたウィジェットが表示されることを確認します。
- Tulip UI Templateには他にも様々な画面レイアウトが用意されているので、作りたいアプリのイメージに近い画面レイアウトを同じようにコピー&ペーストして使ってください。
以上