各問題を確認し、回答に必要な資料への解説をまとめます。
この試験のサンプル問題は、2021/11時点では英語のみ。
全部で8問で、この記事では1問目-4問目が対象。
Front-End Developer Specializationのサンプル問題について解説 2/2(#5-#8)
サンプル問題は、
https://www.outsystems.com/learn/certifications/
の、「Front-end Developer Specialist」項目のリンク「Exam Details」でダウンロードできる資料から。「Sample Exam」がついている方のファイルが該当します。
1 Architecture Canvasとパターン
カスタム作成したPattern (概ねWidgetのこと）を、Architecture Canvasでいうどのレイヤーに配置すべきかという問題。
Architecture CanvasはOutSystemsが推奨するアーキテクチャ設計用の図法かつ、それを利用した設計方法のことです。
モジュールを役割によって、3つのレイヤーに分類します。
レイヤーとサブレイヤーより、
- End-User Moduleレイヤー：再利用可能な部品は含まない。エンドユーザーに直接機能を提供する、UIとプロセス
- Core Moduleレイヤー（問題の選択肢ではCore Services）：再利用可能な部品。業務仕様を含むもの
- Foundation Moduleレイヤー：再利用可能な部品。業務仕様を含まないもの
OutSystemsでは、パターンは再利用性の高い一般的なUI部品を指しているため、正解は選択肢AのFoundation Moduleです。
なお、OutSystemsのアーキテクチャ設計を解説する動画コースの1つTypical Module Elementsの1:44あたりにも「UI Patterns or blocks」はFoundation Modulesの典型的な要素として挙げられています。
2 CSSの適用順序
OutSystemsでは以下の場所にCSSを設定できる。
CSSの詳細度より
- グリッドのContainerウィジェットのシステムスタイルシート
- ブロックスタイルシート
- 基本テーマを含むテーマスタイルシート（指定された場合）
- 画面またはメールスタイルシート
- グリッド設定がThemeプロパティに定義されているテーマエクストラスタイルシート
- スタイルエディタ使用時にService Studioによって生成されるスタイル
- AttributesまたはExtended Propertiesで定義したインラインスタイル
適用順序は、上記の数字の低い方から。よってCSSの適用ルールから、数字が大きいものほど優先される。
細かい部分は無視して大まかにCSSの適用順序を考えると、Block > Theme > Screen > Style Editor（優先順位は逆）。
問題の画像を見ると、同じclassが、Block/Theme/Screenで記述されています。
- background-color: Blockからred -> Themeからblue -> Screenからblackが適用されるので、後勝ちのルールに従い、black
- color: Blockからblue -> Themeからwhiteが適用されるので、後勝ちのルールに従い、white
これに該当するのは、選択肢D「Background color will be black and the text color will be white.」
3 Service Studioプレビュー用のclass
この問題については1点注意があり、試験公開直後にダウンロードできたSample ExamのPDFには間違った回答が載っていました（現在は修正済み）。問題を解いて見るときは、新しいファイルをダウンロードしてください。
styleは通常、ブラウザでも、Service Studioでプレビューしたとき（UIのエディタで開いたとき）でも適用されます。
ところが、属性に「-servicestudio」というプレフィックスをつけたときは、その設定はService Studioでプレビューしたときにしか適用されません。
問題の設定を見ると（選択肢がborderばかり気にしているのでそこだけ抜粋）
.align-center {
border-style: dashed;
-servicestudio-border-width: 4px;
}
であるため
- ブラウザ： border-style: dashed; border-widthは指定無し
- borderの幅は、デフォルト値があるようなので破線が表示される
- Service Studio： border-style: dashed; かつ border-width: 4px;
- 幅4pxの破線が表示される
それぞれスクリーンショット（一部）で確認してみます。
ブラウザ：
Service Studio：
よって、ブラウザでもService Studioのプレビューでもborderが表示されているため、選択肢A「 The Container will have a border when rendered in the browser and in the Service Studio preview.」が正解。
4 CSSのロード順
Block, Screen, ThemeのStyle Sheetのロード順を問う問題。
2の引用の通り、Block > Theme > Screenの順でロードされます。
よって最後にロードされるのは、選択肢B「The Screen's Style Sheet」が正解。
他のSpecialization試験のサンプル問題
Architecture Specializationのサンプル問題についてメモ 1/2(#1-#5)
Architecture Specializationのサンプル問題についてメモ 2/2
Mobile Developer Specializationのサンプル問題について解説 1/2(#1-#4)
Mobile Developer Specializationのサンプル問題について解説 2/2(#5-#8)