Front-end Developer Specialization (OutSystems 11)試験

2021/11に追加された新試験。

UIに関する様々な問題（テーマ、UI部品、CSS、JavaScript）が出題される。

Table of Contents

公式情報

OutSystemsのサイトのCertificationsのページで、Front-end Developer Specialistの枠内に「Exam Details」というリンクがある。

リンクをクリックするとzipファイルがダウンロードできる。

中身は

試験内容の解説ファイル（Detail Sheet）
サンプル試験問題のファイル（Sample Exam）

最近は、どの試験情報も英語の他に日本語版が準備されているが、2021/11/11時点ではこの試験には英語のファイルしか含まれていなかった。

概要

前提：Associate Reactive Developer合格済

合格ライン/問題数：18/25問（70%の得点率で合格）

試験時間：90分

オンラインか、プロメトリックの会場で受験可能。CertificationのページでPre-Registerのボタンクリックで申し込める。

会場受験を今日（2021/11/11）申し込んでみたが、Mobile Developer Specialistでは聞かれた言語選択がなかった気がする。

出題範囲

テーマのアーキテクチャ (Theme Architecture)

OutSystemsにおいて、全体的な見栄えを定義し、アプリケーション間で共有するのがTheme。

このThemeとモジュールをどの様に関係付けるか、というカテゴリ。

ThemeはPublicにでき、他のPublicなThemeをBase Themeとして継承し、それをカスタマイズして独自のThemeを作る。

例えば、ある会社で

最も基本となるOutSystems UIの標準Themeをベースに
全社で共通となる基本スタイルを定義する会社Themeを作り
更にそれをベースにポータルサイトのTheme
ポータルサイト内の特定のアプリケーションのためのTheme

というように階層的に複数のThemeを用意するなど。

CSS

OutSystemsでCSSを利用して見た目を調整する方法。

Theme
Screen（画面）とEmail
Block（UI部品）

などには独自のCSSを定義することができる（ダイアログ）。

JavaScriptの使用 (Using JavaScript Code)

MobileとReactiveではJavaScript要素（Action Flowにドラッグ＆ドロップでき、JavaScriptを記述／実行できるもの）がある。

$resolve/$rejectを使うJavaScriptコードはPromiseを返すようにラップされ、非同期に実行される。

パターンとウィジェット (Patterns and Widgets)

OutSystems UIに含まれる各Patternが出題範囲のよう。

Patternというのは要するに、OutSystems UIに含まれている各Widgetのこと。

実際の開発でも頻繁に使うので、どんなものがあるかはざっと把握しておくと、車輪の再開発を防ぐ意味でも役立つ。

ブロック（Blocks）

OutSystemsにおけるBlockは要するにUI部品のこと。

PublicなBlockを用意すれば、複数のConsumerで同じUIをドラッグ＆ドロップで埋め込める。

画面構成を決定するLayoutもBlock（各ScreenのルートにLayout Blockを配置する）。Layoutを共通部品として用意しておけば、各アプリケーションに共通の画面構成を提供可能。

Blockと配置先のScreen間のやり取りはちょっと制限があり、

Screen -> Block：BlockのInput Parameterを設定することで値を渡す。このときOn Parameter Changedイベントが発生するため、Blockはそのイベントを処理することで渡された値に反応する
Block -> Screen：BlockにEventを定義する。すると、Blockが発生させたイベントを配置先のScreenでHandleできるようになる

テーマとテンプレート (Themes and Templates)

Themeについては上で書いたとおり。

他の話題は、Layout BlockとApplication Template。

Layout BlockはScreenのルートに配置するBlockで、画面の構造を決めるもの。

Block作成時に、Placeholderを配置した場所は、ScreenにBlockを配置したときにカスタマイズできる場所になる（Screen側で任意のWidgetを配置できる）。また、Placeholder以外の場所に共通部品を置くことで、同じLayout Blockを使う画面に必ず同じ部品があるように矯正する。

Application Templateは、LifeTimeやService Studioで新しいアプリケーションを作るときに選択するテンプレートのこと。自分で作ることもできる（Custom Application Template）。

スタイルシート (Style Sheets)

WidgetのProperties (WidgetをService Studioで選択すると右下に出てくる）の右のタブがStyles Editor。GUIを使ってスタイルの調整（フォントサイズなど一部に限られる）・スタイルの直接設定・classの適用ができる。Styles Editorにはダイアログもあり、そちらでは、Base Theme > アプリケーションのTheme > Screenのスタイルをそれぞれ別のタブで表示できる（Screenのスタイルは編集可能）。

OutSystems UIのThemeをBase Theme（Theme継承のルートという意味の様子）として使っていると、Theme EditorというダイアログでPrimary ColorなどいくつかのスタイルをGUIで変更できる。この変更は、Styles Editorダイアログで「テーマ名（Theme Editor）」というタブに独立して表示される。