＜追記＞
スーバーバッジの名称が「Lightning Component Framework Specialist」から「Aura Components Specialist」に変更になりました。
ですが、内容は前のLightning Component Framework Specialistと同じですので、そのまま読み替えていただいて構いません。
ここからは中盤戦。
イベントがバンバン飛び交うので、道に迷わないように注意！
>2018/12/18 追記
コンポーネント構成図を追加しました。
Step5 選択したボートをハイライト表示する
問題
（原文）
Highlight the selected boat
Fire a new BoatSelect event when a BoatTile is clicked, which sets the selectedBoatId on BoatSearchResults and in turn toggles the selected attribute on the right BoatTile, triggering the addition of a CSS class that shows a dark blue border around the selected boat as shown in the requirements.Do this by defining a click handler on the BoatTile’s lightning:button that invokes controller function onBoatClick, and raises the BoatSelect event, as laid out in the business requirements.
（翻訳）
選択したボートをハイライト表示する
BoatTileをクリックすると新しいBoatSelectイベントが発生し、選択されたボートをBoatSearchResultsに設定し、右のBoatTileの選択した属性を切り替えて、選択したボートの周囲にダークブルーの境界線を表示するCSSクラスを追加します。
これを行うには、BoatTileのlightning：buttonでクリックハンドラを定義し、コントローラ機能onBoatClickを呼び出し、BoatSelectイベントをビジネス要件に合わせて発生させます。
攻略のヒント
ここでは、ボートが選択された時のハイライト表示を実装します。
一見、BoatTileコンポーネント内だけで対応できそうですが、それらを抱える親のBoatSearchResultsコンポーネントに、選択状態のボートIDを伝えないといけないので、やはりイベントを使用します。
BoatTile発のBoatSearchResults受という構図になるので、子から親への伝達ということでコンポーネントイベントで処理します。
ということで、対応内容。
BoatSelect.evt
・コンポーネントイベントで新規作成、選択したboatId1(String)を引数とする
BoatSearchResults.cmp
・BoatSelectイベント受信用のハンドラーを定義し、onBoatSelectを呼び出す
・選択されたBoatIdを保持するアトリビュートを定義
・BoatTileコンポーネントを配置するときに、選択中か否かを渡す（前述のBoatIdと一致しているかの判定を入れる）
BoatSearchResultsController.js
・onBoalSelectメソッドで選択中boatIdを更新する処理を追加
BoatTile.cmp（+css）
・選択中か否かを表すアトリビュート(Boolean型)を定義する
・cssファイルに選択中の場合のハイライトのスタイルを定義する
・lightning:buttonタグのクラスを選択中とそれ以外で、スタイルを変更する（選択中であれば前述のスタイルを追加で適用する）
BoatTileController.js
・onBoatClickメソッドを作成、選択状態の切り替えをし、BoatSelectイベントを送信する
Step6 ボートの詳細を表示する
問題
（原文）
Display boat details
Create two new components—BoatDetails and BoatDetail—as well as a new event BoatSelected. Raise the new event from BoatTile, and leverage Lightning Data Service to output boat details. Deploy the BoatDetails component in the top right corner of the Lightning page.
（翻訳）
ボートの詳細を表示する
2つの新しいコンポーネント（BoatDetailsとBoatDetail）と新しいイベントBoatSelectedを作成します。 BoatTileから新しいイベントを発生させ、Lightning Data Serviceを利用してボートの詳細を出力します。 Lightningページの右上隅にBoatDetailsコンポーネントを配置します。
攻略のヒント
ここからはBoatの詳細情報を表示します。
今まではBoatSearchコンポーネント内で解決しましたが、これからはBoatDetailsコンポーネントとBoatSearchとは親子関係にない場所での表示になっていくので、ここで使用するイベントもアプリケーションイベントとして処理する必要があります。
表示するコンポーネントも新しい領域に表示していくので、ここでは結構作るものが多くなっています。
BoatSelected.evt
・アプリケーションイベントで新規作成、引数はboat(Boat__c)
BoatTile.cmp
・BoatSelectedイベントを登録
BoatTileController.js
・onBoatClickメソッド内でBoatSelectedイベントを送信する処理を追加
BoatDetail.cmp
・コンポーネントを新規作成、要件にしたがってボート情報を表示する
・Full Detailsボタンを配置し、onFullDetailsアクションを呼び出す
BoatDetailController.js
・onFullDetailsメソッドを定義し、レコードの詳細ページを表示
（具体的にはe.force.navigationToSObjectイベントを送信）
BoatDetails.cmp
・コンポーネントを新規作成
・force:recordDataタグを使用して、レコードデータを取得
・タブを３つ（Details、Reviews、Add Review）作成し、DetailsタブにBoatDetailコンポーネントを埋め込む、Reviews、Add Reviewの中身は空でOK
（対象データのBoatが定義されていることを、aura:ifタグを使用してチェックする処理を入れること）
・BoatSelectedの受信ハンドラ作成し、onBoatSelectedメソッドを呼び出す
BoatDetailsController.js
・onRecordUpdatedメソッドを作成（処理部分は空の状態でOK）
・ボートIDをイベントの引数から取得し、更新する
FriendswithBoats.app
・BoatDetailsコンポーネントを配置
Friend with Boatアプリケーションページ
・BoatDetailsコンポーネントを配置
Step7 ボートレビューを追加
問題
（原文）
Add boat reviews
Instantiate an AddBoatReview component inside the Add Review tab and display the form. When a user clicks Submit, save the record using Lightning Data Service and fire a BoatReviewAdded event that the BoatDetails parent component listens for so that it can switch the active tab to Reviews. Don’t worry about displaying the reviews yet.
（翻訳）
ボートレビューを追加
Add Reviewタブの中でAddBoatReviewコンポーネントをインスタンス化し、フォームを表示します。 ユーザーが[Submit]をクリックすると、Lightning Data Serviceを使用してレコードを保存し、BoatDetailsの親コンポーネントがリッスンするBoatReviewAddedイベントを発生させて、アクティブなタブをレビューに切り替えることができます。 まだレビューを表示することについて心配しないでください。
攻略のヒント
次はボートのレビューをします。
BoatReviewオブジェクトと絡ませる処理が入ります。
ここではレビューを書いてデータに登録するまでがミッションで表示は次のところでやります。
AddBoatReview.cmp
・新規作成、タイトル（テキスト）とコメント（リッチテキスト）の入力欄を作る
・Rating（５つ星）の入力・表示はこの時点では不要
・Submitボタンを作成し、onSaveアクションを実行
AddBoatReviewController.js
・onInitメソッドを作成し、ヘルパーのdoInitメソッドを呼び出す
・onSaveメソッドを作成し、BoatReviewAddedイベントを送信
AddBoatReviewHelper.js
・doInitメソッドを作成し、BoatReview__cレコードの作成処理を入れる
（getNewRecordメソッドを使用）
BoatReviewAdded.evt
・コンポーネントイベントで作成、渡す情報は不要
BoatDetails.cmp
・BoatReviewAddedイベントの受信ハンドラーを指定
・Add ReviewタブにAddBoatReviewコンポーネントを配置
BoatDetailsController.js
・onBoatReviewAddedメソッドを作成、タブの選択状態を変える
（追加したレビューの反映はこの時点では不要）
今回はここまで
Stepも半分以上クリアし、スーパーバッチ獲得もあと少しとなりました。
だんだんアプリケーションらしくなっきたのではないでしょうか？
それと同時にLightningの扱い方も段々身になってきた頃だと思います。
峠は超えたところで、Step8以降も今まで使ってきたことの組み合わせがほとんどなので、ラストスパート頑張ってください。
コメント