<!DOCTYPE HTML> <html lang = "ja"> <head> <title>課題B4 (機能理解)</title> <meta charset = "UTF-8"> <link rel = "stylesheet" type = "text/css" href = "../../../prettify.css"> </head> <body> <h1>課題B4 (機能理解)</h1> <p> 課題B4では, ArgoUMLの図形の選択機能について見ていきます.<br> ArgoUMLはオープンソースのUMLモデリングツールで, Javaで書かれております.<br> また, ArgoUML内部では, グラフ編集用フレームワークであるGEFが使用されています.<br> ワークスペース内のargouml-*が、ArgoUMLを構成するプロジェクトであり, GEF-0.13.7がGEFのプロジェクトです。 </p> <hr> <h2>前準備</h2> <p> <p class = "explanation"> 課題B3が終了した直後は下図のような状態になっているはずです.<br> <div class = "image"><img src = "./images/images_problem2_pre/ArgoUML_2_pre_00_1.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> ここで, ステップバックオーバーを1回押してから, ステップオーバーを1回押してください.<br> すると, 下図のように363行目に入った直後の状態になるので, そこから続けてステップネクストを3回押してください. <div class = "image"><img src = "./images/images_problem2_pre/ArgoUML_2_pre_03.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> ステップネクストを3回実行すると, selections の get() メソッドの呼び出し直後に実行時点が変わっているはずです.<br> ここで, 変数ビュー上にある「呼び出し後」を開き, 戻り値を右クリックしてください.<br> 右クリックするとポップアップメニューが現れるので, 「オブジェクトの追加時点に飛ぶ」を選択してください. <div class = "image"><img src = "./images/images_problem2_pre/ArgoUML_2_pre_04.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> 「オブジェクトの追加時点に飛ぶ」を選択すると, selections に この SelectionClass クラスが追加された時点である<br> SelectionManager クラスの addFig(Fig) メソッドの130行目にまで現在の実行時点が遡ります.<br> 下図の状態になっていれば前準備は終了です. <div class = "image"><img src = "./images/images_problem2_pre/ArgoUML_2_pre_05.png" class = "threeQuartersSize"></div> </p> </p> <hr> <h2>機能理解</h2> <p> Fig クラスはグラフィックエディタ上の図形を表すGEFの内部のクラスです.<br> また, FigClass クラスはクラス図上に配置された「クラス」を表す ArgoUML のクラスで, Fig クラスの子孫クラスにあたります.<br> 現在の実行時点の行は、図形を選択するたびに実行されます. </p> <p> <p class = "explanation"> 先ほどの前準備にしたがって進めていくと, 下図のように SelectionManager クラスの addFig(Fig) メソッド内の130行目で一時停止している状態になっているはずです.<br> この状態になっていれば, ここから時間計測を開始してください.<br> まずは,「実行時点の登録」ビューの追加ボタンをクリックして実行時点の登録を行ってください.<br> <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_01.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> ここで, ソースコードと変数ビューを見ると, SelectionManager クラスのインスタンス (id = 4310438) が参照するフィールド selections へは<br> makeSelectionFor(Fig) メソッドの戻り値である SelectionClass クラスのインスタンス (id = 1672744985) が追加されていることがわかります.<br> 課題B4では, このオブジェクトの追加に関わっている SelectionManager クラスのインスタンスと SelectionClass クラスのインスタンスについて見ていきます.<br> まずは, SelectioClass クラスのインスタンスの方がどこから来たのかを見ていくために, <br> ステップバックインを1回押して SelectionManager クラスの makeSelectionFor(Fig) メソッドの中に後ろから入ってください. <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_02.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> SelectionManager クラスの makeSelectionFor(Fig) メソッドの1131行目に入ってきました.<br> ソースコードを見ると, return customSelection でローカル変数 customSelection が参照する値が返されていることがわかります.<br> <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_03.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> この値がどこから来ているのかを見るために, ステップバックオーバーを1回押して1129行目に戻ってください.<br> 1129行目では 仮引数 f で参照されているインスタンスに対して makeSelection() メソッドが呼び出され,<br> その戻り値がローカル変数 customSelection に代入されていることが確認できます.<br> ここで, ステップインを1回押してこのメソッドの中に前から入ってください.<br> <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_04.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> FigClass クラスの makeSelection() メソッドに入りました.<br> ここでは new SelectionClass(this) で 自分自身を引数に渡して SelectionClass クラスが生成されており,<br> 生成された SelectionClass クラスのインスタンスは 引数で渡された FigClass クラスのインスタンス (id = 1675174935) を参照していることがわかります.<br> これを確認したら, 呼び出しスタック上で2つ呼び出し元である SelectionManager クラスの addFig(Fig) メソッドをクリックしてください. <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_05.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> 現在は SelectionManager クラスの addFig(Fig) メソッドの130行目を見ています.<br> ここで, ソースコードを見ると, 先ほどの makeSelectionFor(Fig) メソッドには, 仮引数 f で参照されている<br> FigClass クラスのインスタンス (id = 1675174935) が渡されていることが確認できます.<br> ここからは, この FigClass クラスのインスタンス (id = 1675174935) がどこから来たのかを見ていきます.<br> 呼び出しスタック上で1つ呼び出し元である SelectionManager クラスの select(Fig) メソッドをクリックしてください.<br> <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_06.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> 現在は 呼び出し元である SelectionManager クラスの select(Fig) メソッドの180行目を見ています.<br> ここで, ソースコードを見ると, 呼び出し先の addFig(Fig) メソッドには 仮引数 f の値が実引数として渡されていることが確認できます.<br> これを確認したら, 呼び出しスタック上でさらに1つ呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドをクリックしてください. <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_07.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> 呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドの187行に戻ってきました.<br> ここで, ソースコードを見ると, 呼び出し先である SelectinoManager クラスの select(Fig) メソッドには<br> ローカル変数 underMouse の値が実引数として渡されていたことがわかります.<br> <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_08.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> この underMouse の値がどこから来たのかを見るために, ステップバックオーバーを8回押して163行目まで戻ってください.<br> 163行目では, ローカル変数 underMouse が参照するインスタンスが FigGroup にキャストされたあと,<br> それに対して deepSelect(Rectangle) メソッドが呼び出され, その戻り値が改めて underMouse に代入されていることがわかります.<br> ここで, 戻り値がどのようになっているのかを確認するために, FigGroup クラスの deepSelect(Rectangle) メソッドの中に前から入ってください.<br> <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_09.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> FigGroup クラスの deepSelect(Rectangle) メソッドに入りました.<br> すると, deepSelect(Rectangle) メソッドの中では return this で自分自身を戻り値として返していることがわかります.<br> これを確認したら, ステップバックリターンを1回押して呼び出し元に戻ってください. <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_10.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> ModeSelect クラスの mousePressed(MouseEvent) メソッドの163行目に戻ってきました.<br> underMouse の値がどこから来ているのかを見るために, ステップバックオーバーを1回押して160行目に戻ってください.<br> 160行目では Editor クラスの hit(Point) メソッドが呼び出され, その戻り値がローカル変数 underMouse に代入されていることが確認できます.<br> ここで, ステップインを1回押してこのメソッドの中に前から入ってください. <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_11.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> Editor クラスの hit(Point) メソッドに入りました.<br> ここでは, ステップオーバーを1回実行したあとに, ステップインを2回押して hit(Rectangle) メソッドの中に前から入ってください. <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_12.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> Editor クラスの hit(Rectangle) メソッドに入りました.<br> ここでは, ステップインを2回押して getLayerManager() メソッドの中に前から入ってください.<br> <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_13.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> Editor クラスの getLayerManager() メソッドに入りました.<br> ここでは, return _layerManager で LayerManager クラスのインスタンスが返されていることが確認でき,<br> 変数ビュー上の this を開くと, このEditor クラスのインスタンス (id = 371019845) がフィールド _layerManager として<br> LayerManager クラスのインスタンス (id = 1975264229) を参照していることがわかります.<br> これを確認したら, ステップリターンで呼び出し元に戻ってください. <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_14.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> Editor クラスの hit(Rectangle) メソッドに戻ってきました.<br> 次は, ステップインで LayerManager クラスの hit(Rectangle) メソッドの中に前から入ってください. <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_15.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> LayerManager クラスの hit(Rectangle) メソッドの中に入りました.<br> ここで, 変数ビューを確認すると, この LayerManager クラスのインスタンス (id = 1975264229) は,<br> フィールド _activeLayer として LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) を参照していることがわかります.<br> また, ソースコードを見ると, このフィールド _activeLayer が参照しているインスタンスに対して hit(Rectangle) メソッドが呼び出されていることが確認できます.<br> ここでは, ステップインを4回押してこのメソッドの中に前から入ってください. <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_16.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> LayerPerspectiveMutable クラスの hit(Rectangle) メソッドに入りました.<br> ここで, ソースコードを見ると, 231行目で LayerPerspectiveMutable クラスのインスタンスの<br> フィールド contents から get() メソッドで Fig クラスのインスタンスを取得していることが確認できます.<br> <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_17.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> 取得している値を確認するために, ステップオーバーを2回押して232行目まで進んでください.<br> 232行目まで進んだら, 変数ビュー上の「呼び出し後」を開くと, 戻り値として FigClass クラスのインスタンス (id = 1675174935) が返されていることが確認でき, <br> したがって, このインスタンスは LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) がリスト内の要素として参照していることがわかります. <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_18.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> 先ほどの結果から, FigClass クラスのインスタンス (id = 1675174935) は<br> LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) が参照していることがわかりました.<br> ここで, ステップオーバーを1回押して, 実行時点が return f に止まることを確認してください.<br> これを確認したら, 呼び出しスタック上で4つ呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドをクリックしてください.<br> <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_19.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> 現在は, ModeSelect クラスの mousePressed(MouseEvent) メソッドを見ています.<br> ここで, 変数ビュー上で this を開くと, Editor クラスのインスタンス (id = 371019845) は<br> ModeSelect クラスのインスタンス (id = 1807431709) が フィールド editor として参照していることがわかります.<br> <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_20.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> ここまでの結果から, SelectionClass クラスのインスタンスに関わる各オブジェクトの関係について, 以下のことがわかりました.<br> <ol> <li>SelectionClass クラスのインスタンス (id = 1672744985) は Fig クラスのインスタンス (id = 1675174935) を引数に渡して生成している.</li> <li>FigClass クラスのインスタンス (id = 1675174935) は LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) が参照している.</li> <li>LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) は LayerManager クラスのインスタンス (id = 1975264229) が参照している.</li> <li>LayerManager クラスのインスタンス (id = 1975264229) は Editor クラスのインスタンス (id = 371019845) が参照している.</li> <li>Editor クラスのインスタンス (id = 371019845) は ModeSelect クラスのインスタンス (id = 1807431709) が参照している.</li> </ol> 課題B4では, オブジェクトの追加に関わっている SelectionManager クラスのインスタンスと SelectionClass クラスのインスタンスについて見ていくのでした.<br> ここからは, SelectionManager クラスのインスタンスの方がどこから来たかを見ていきます.<br> まずは, ステップバックオーバーを1回押して156行目に戻ってください.<br> ソースコードを見ると, Editor クラスの getSelectionManager() メソッドの戻り値がローカル変数 sm に代入されていることがわかります.<br> ここで, ステップインを1回押して このメソッドの中に前から入ってください.<br> <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_21.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> Editor クラスの getSelectionManager() メソッドに入りました.<br> ここで, 変数ビュー上の thisを開くと, Editor クラスのインスタンス (id = 371019845) が フィールド _selectionManager として<br> SelectionManager クラスのインスタンス (id = 4310438) を参照していることがわかります. <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_22.png" class = "threeQuartersSize"></div> </p> <p class = "explanation"> 先ほどの結果から, SelectionManager クラスのインスタンス (id = 4310438) は<br> Editor クラスのインスタンス (id = 371019845) が参照していることがわかりました.<br> 呼び出しスタック上で1つ呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドをクリックしてください.<br> ここで, 課題B4は終了です. 時間計測を終了してください. <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_23.png" class = "threeQuartersSize"></div> </p> </p> <hr> <p> 課題B4の機能理解が終了しましたら, 以下のアンケートにお答えください. <div><a href = "https://docs.google.com/forms/d/e/1FAIpQLSeP5GouNkBmsITcc3thQ-3JFnG4Ih9A1zsXT_ggO9_rjJLEuw/viewform" target = "_blank">アンケート回答</a></div> </p> <a href="ArgoUML2_Reverse_Delta.html">次へ</a> </body> </html>