Tip:
Highlight text to annotate it
X
このレッスンではページ上の要素のレイアウト方法を説明します。
Dashbordを開きましょう。
前のレッスンで作成したIssuesリストをGridを使って横に並べてみましょう。
Gridとは仮想的に作られた列(column)のことで
その仮想列(column)に沿って要素を配置したり、 位置を合わせたり、スペースも作れ、
WebScreenのデザインを簡単に魅力的にすることができます。
containerのサイズを決める単位は、一般的にpixelや%がありますが、
Gridを使ってcontainerのサイズを決める場合は、columnという単位を使います。
それでは青い四角をクリックし、ハンドルを選択し動かしてみましょう。
サイズを変更しようとすると、仮想列(column)が初めて表示され、
このWebScreenには12columnあることが分かります。
containerを12columnの半分のサイズにしたいので、
ちょうど6columnのところにドラッグしてみましょう。
Issuesリストのレイアウトを作るために このcontainerの隣に別のcontainerを追加してみましょう。
containerアイコンをドラッグして配置します。
下ではなく隣にドロップしましょう。
すると、OutSystems Platformがすでにこの containerを残りの6columnのサイズにしてくれます。
marginがここに、containerの間に作られます。
これらの2つのcontainerとこのmarginは
Grid上で定義されます。
columnとcolumnの間のグレーのエリアはmarginとして扱われ、
隣接するcolumnにObjectを配置する際、Object間の溝(margin)として使われています。
では、これらの2つのcontainerに
WebScreen上のこれらのcontainerを含むレイアウトをします。
この作業を支援するWidgetTreeを使ってみましょう。
このHeadingとこのIssuesリストを含むcontainerを
Shiftキーを押しながら選択します。
これらのcontainerの両方を
このcontainerに入れましょう。
これらのcontainerのWidthを6columnに設定していませんが、
それらはこの親のcontainerの6columnを占有しています。
というのもそれらのWidthは特別な値をもっているからです。
"fill parent"の意味は
このcontainerにある要素がそれを含む親要素に対して できるだけ多くのスペースを取るということです。
OK、"Low Priority Issues"についても同じことをやってみましょう。
Shiftキーを使って両方のcontainerを選択し、 このcontainerの内部にドラッグ&ドロップします。
Issuesリストは横に並んで表示されました。
ブラウザでどのように表示されるか、 Publishして確かめてみましょう。
OK、High PriorityとLow Priority IssuesのDashbloadがこの通り、
並んで配置されています。
次のレッスンでは、cssを使ったさらなる アプリケーションのカスタマイズ方法をご紹介しましょう。