Fork: 0
nitta-lab / TraceDebuggerExperiment
Transfer to URL with SHA Find file
Newer
Older
TraceDebuggerExperiment / courseA / JHotDraw_Reverse / problem2 / JHotDraw2_Reverse.html
r-isitani on 19 Sep 2020 23 KB 各実験シナリオのガイドを少し修正した。
Raw Blame History 
  1. <!DOCTYPE HTML>
  2. <html lang = "ja">
  3.     <head>
  4.         <title>課題A4 (アーキテクチャ理解)</title>
  5.         <meta charset = "UTF-8">
  6.         <link rel = "stylesheet" type = "text/css" href = "../../../prettify.css">
  7.     </head>
  8.     <body>
  9.         <h1>課題A4 (アーキテクチャ理解)</h1>
  10.         <p>
  11.             課題A4では, JHotDrawの図形の選択機能について見ていきます.<br>
  12.             JHotDrawはオープンソースの図形描画ツールで, Javaで書かれております.<br>
  13.             ワークスペース内のjhotdraw7が、JHotDrawを構成するプロジェクトです。
  14.         </p>
  15.  
  16.         <hr>
  17.         <h2>前準備</h2>
  18.         <p>
  19.             <p class = "explanation">
  20.                 課題A3が終了した直後は下図のような状態になっているはずです.
  21.                 <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_01.png" class = "threeQuartersSize"></div>
  22.             </p>
  23.             <p class = "explanation">
  24.                 ここで, ステップバックオーバーを2回押してから, ステップオーバーを1回押してください.<br>
  25.                 そのあと, 変数ビュー上で「呼び出し後」を開いて, 戻り値を右クリックしてください.<br>
  26.                 右クリックするとポップアップメニューが現れるので, 「オブジェクトの追加時点に飛ぶ」を選択してください.
  27.                 <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_05.png" class = "threeQuartersSize"></div>
  28.             </p>
  29.             <p class = "explanation">
  30.                 「オブジェクトの追加時点に飛ぶ」を選択すると, selectedFigures に この RectangleFigure クラスのインスタンス (id = 1952912699) が追加された時点である<br>
  31.                 DefaultDrawingView クラスの addToSelection(Figure) メソッドの780行目にまで現在の実行時点が遡ります.<br>
  32.                 下図の状態になっていれば前準備は終了です.
  33.                 <div class = "image"><img src = "./images/images_problem2_pre/JHotDraw_2_pre_06.png" class = "threeQuartersSize"></div>
  34.             </p>
  35.         </p>
  36.  
  37.         <hr>
  38.         <h2>アーキテクチャ理解</h2>
  39.         <p>
  40.             現在の実行時点の行は、図形を選択するたびに実行されます. 
  41.         </p>
  42.  
  43.         <p>
  44.             <p class = "explanation">
  45.                 先ほどの前準備にしたがって進めていくと, 下図のように DefaultDrawingView クラスの<br>
  46.                 addToSelection(Figure) メソッド内の780行目で一時停止している状態になっているはずです.<br>
  47.                 この状態になっていれば, ここから時間計測を開始してください.<br>
  48.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_01.png" class = "threeQuartersSize"></div>
  49.             </p>
  50.             <p class= "explanation">
  51.                 まずは,「実行時点の登録」ビューの追加ボタンをクリックして実行時点の登録を行ってください.<br>
  52.                 ここで, ソースコードと変数ビューを見ると, DefaultDrawingView クラスのインスタンス (id = 150367587) が参照するフィールド selectedFigures へは<br>
  53.                 RectangleFigure クラスのインスタンス (id = 1952912699) が追加されていることがわかります.<br>
  54.                 課題A4では, このオブジェクトの追加に関わっている DefaultDrawingView クラスのインスタンスと RectangleFigure クラスのインスタンスについて見ていきます.<br>
  55.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_02.png" class = "threeQuartersSize"></div>
  56.             </p>
  57.             <p class = "explanation">
  58.                 まずは RectangleFigure がどこから来たのかを見るために, 呼び出しスタック上で1つ呼び出し元をクリックしてください.<br>
  59.                 ここで, ソースコードを見ると, 先ほど呼び出されていた addToSelection(Figure) メソッドは, ローカル変数 view で参照されているインスタンスに対する呼び出しであり,<br>
  60.                 その実引数としてフィールド anchorFigure の値が渡されていることがわかります.<br>
  61.                 また, 変数ビュー上の this を開くと, このフィールドは DefaultDragTracker クラスのインスタンス (id = 758826749) が参照していることがわかります.
  62.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_03.png" class = "threeQuartersSize"></div>
  63.             </p>
  64.             <p  class = "explanation">
  65.                 ここでは, いったんローカル変数 view の値がどこから来たのかを見ていきます.<br>
  66.                 ステップバックオーバーを4回押して98行目に戻ってください.<br>
  67.                 ソースコードを見ると, getView() メソッドの戻り値を ローカル変数 view に代入していることが確認できます.<br>
  68.                 ここで, この戻り値がどうなっているのかを確認するために, ステップインを1回押して getView() メソッドの中に前から入ってください.<br>
  69.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_04.png" class = "threeQuartersSize"></div>
  70.             </p>
  71.             <p class = "explanation">
  72.                 AbstractTool クラスの getView() メソッドに入りました.<br>               
  73.                 ここで, 変数ビュー上の this を開くと, DefaultDragTracker クラスのインスタンス (id = 758826749) が<br>
  74.                 DefaultDraingEditor クラスのインスタンス (id = 1859859960) を参照していることがわかります.<br>
  75.                 これを確認したら, ステップインを3回押して DefaultDrawingEditor クラスの getAcitiveView() メソッドの中に前から入ってください.<br>
  76.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_05.png" class = "threeQuartersSize"></div>
  77.             </p>
  78.             <p class = "explanation">
  79.                 DefaultDrawingEditor クラスの getAcitiveView() メソッドに入りました.<br>
  80.                 ここで, 変数ビュー上の this を開くと, DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が<br>
  81.                 DefaultDrawingView クラスのインスタンス (id = 150367587) を参照していることがわかります.
  82.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_06.png" class = "threeQuartersSize"></div>
  83.             </p>
  84.             <p class = "explanation">
  85.                 先ほどの結果から, DefaultDrawingView クラスのインスタンス (id = 150367587) は<br>
  86.                 DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が参照していることがわかりました.<br>
  87.                 呼び出しスタック上で2つ呼び出し元である DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドをクリックしてください.<br>
  88.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_07.png" class = "threeQuartersSize"></div>
  89.             </p>
  90.             <p class = "explanation">
  91.                 現在は, 呼び出し元である DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドの98行目を見ています.<br>
  92.                 今までの結果から, DefaultDrawingView クラスのインスタンス (id = 150367587) がどのようにして来たのかがわかりました.<br>
  93.                 ここからは, RectangleFigure クラスのインスタンス (id = 1952912699) がどこから来たのかを見ていきます.<br>
  94.                 ここで, 変数ビュー上の this を開き, その中にある anchorFigure を右クリックしてください.<br>
  95.                 右クリックするとポップアップメニューが現れるので, 「値の代時点に飛ぶ」を選択してください.<br>
  96.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_08.png" class = "threeQuartersSize"></div>
  97.             </p>
  98.             <p class = "explanation">
  99.                 「値の追加時点に飛ぶ」を選択すると, DefaulatDragTracker クラスのインスタンス (id = 758826749) に<br>
  100.                 この RectangleFigure クラスのインスタンス (id = 1952912699) が追加された時点である<br>
  101.                 DefaultDragTracker クラスの setDraggedFigure(Figure) メソッドの218行目にまで現在の実行時点が遡ります.<br>
  102.                 まずは, 「実行時点の登録」ビューの追加ボタンをクリックして実行時点の登録を行ってください.<br>
  103.                 ここでは, DefaultDragTracker クラスのフィールド anchorFigure に仮引数 f の値を代入していることが確認できます.<br>
  104.                 仮引数 f の値がどこから来たのかを見るために, 呼び出しスタック上で1つ呼び出し元をクリックしてください.<br>
  105.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_09.png" class = "threeQuartersSize"></div>
  106.             </p>
  107.             <p class = "explanation">
  108.                 現在は, 呼び出し元である SelectionTool クラスの getDragTracker() メソッド見ています. <br>
  109.                 ここで 変数ビュー上の 「呼び出し前」および this を開くと, 先ほどの setDraggedFigure (Figure) メソッドが呼び出されている<br>
  110.                 DefaultDragTracker クラスのインスタンス (id = 758826749) は DelegationSelectionTool クラスのインスタンス (id = 5999587451) が参照していることがわかります.<br>
  111.                 引き続き, 仮引数 f の値がどこから来ているのかを見るために, 呼び出しスタック上でさらに1つ呼び出し元をクリックしてください.<br>
  112.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_10.png" class = "threeQuartersSize"></div>
  113.             </p>
  114.             <p class = "explanation">
  115.                 現在は, 呼び出し元である DelegationSelectionTool クラスの mousePressed(MouseEvent) メソッドを見ています.<br>
  116.                 ここで, ソースコードを見ると, ここではローカル変数 figure の値が実引数として渡されていることが確認できます.<br>
  117.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_11.png" class = "threeQuartersSize"></div>
  118.             </p>
  119.             <p class = "explanation">
  120.                 今度はこのローカル変数 figure の値がどこから来ているのかを見るために, ステップバックオーバーを3回押して270行目に戻ってください.<br>
  121.                 270行目では, ローカル変数 view で参照されるインスタンスに対して findFigure(Point) メソッドが呼び出され, <br>
  122.                 その戻り値がローカル変数 figure に代入されていることが確認できます.<br>
  123.                 この戻り値がどうなっているのかを確認するために, ステップインでこのメソッドの中に前から入ってください.<br>
  124.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_12.png" class = "threeQuartersSize"></div>
  125.             </p>
  126.             <p class = "explanation">
  127.                 DefaultDrawingView クラスの findFigure(Point) メソッドに入りました.<br>
  128.                 ここで, ソースコードを見ると, このメソッドでは getDrawing() メソッドで取得してきたインスタンスに対して,<br>
  129.                 findFigure(Double) メソッドが呼び出され, その戻り値を返していることが確認できます.<br>
  130.                 これを確認したら, ステップインを2回押して, getDrawing() メソッドの中に前から入ってください.<br>
  131.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_13.png" class = "threeQuartersSize"></div>
  132.             </p>
  133.             <p class = "explanation">
  134.                 DefaultDrawingView クラスの getDrawing() メソッドに入りました.<br>
  135.                 ここで, 変数ビュー上の this を開くと, DefaultDrawingView クラスのインスタンス (id = 150367587) が<br>
  136.                 フィールド drawing として QuadTreeDrawing クラスのインスタンス (id = 1583174451) を参照していることがわかります.<br>
  137.                 これを確認したら, ステップリターンを1回押して呼び出し元に戻ってください.
  138.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_14.png" class = "threeQuartersSize"></div>
  139.             </p>
  140.             <p class = "explanation">
  141.                 DefaultDrawingView クラスの findFigure(Point) メソッドに戻ってきました.<br>
  142.                 ここでは, まずステップネクストを1回押して viewToDrawingPoint(Point) メソッドを飛ばし, <br>
  143.                 それから, ステップインを1回押して QuadTreeDrawing クラスの findFigure(Point2D$Double) メソッドの中に前から入ってください.<br>
  144.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_15.png" class = "threeQuartersSize"></div>
  145.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_16.png" class = "threeQuartersSize"></div>
  146.             </p>
  147.             <p class = "explanation">
  148.                 QuadTreeDrawing クラスの findFigure(Point2D$Double) メソッドに入りました.<br>
  149.                 ここでは, ステップインを3回押して QuadTree クラスの findContains(Point2D$Double) メソッドの中に前から入ってください.<br>
  150.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_17.png" class = "threeQuartersSize"></div>
  151.             </p>
  152.             <p class = "explanation">
  153.                 QuadTree クラスの findContains(Point2D$Double) メソッドに入りました.<br>
  154.                 ここで, 変数ビュー上の this を開くとQuadTree クラスのインスタンス (id = 808853315) がフィールド root として<br>
  155.                 QuadTree の内部クラス QuadNode クラスのインスタンス (id = 2120356010) を参照していることがわかります.<br>
  156.                 ここでは, ステップオーバーを1回押して83行目に進んだあと, ステップインを2回押して,<br>
  157.                 QuadTree$QuadNode クラスの findContains(Point2D$Double) メソッドの中に前から入ってください.<br>
  158.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_18.png" class = "threeQuartersSize"></div>
  159.             </p>
  160.             <p class = "explanation">
  161.                 QuadTree$QuadNode クラスの findContains(Point2D$Double) メソッドに入りました.<br>
  162.                 ここで, 変数ビュー上の this を開くと, QuadTree$QuadNode クラスのインスタンスは<br>
  163.                 フィールド objects として HashMap を参照していることがわかります.<br>
  164.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_19.png" class = "threeQuartersSize"></div>
  165.             </p>
  166.             <p class = "explanation">
  167.                 ここでは, ステップオーバーを3回押して226行目まで進んだあと, ステップネクストを2回押してください.<br>
  168.                 ソースコードを見ると, 224行目の拡張for文で 先ほど確認した HashMap から取得してきた要素を用いて, <br>
  169.                 226行目ではそのうちのキー要素だけを取り出して, それを仮引数 result で参照されているセットに追加していることが確認できます.<br>
  170.                 ここで, 変数ビュー上の「呼び出し後」および「呼び出し前」を開くと, <br>
  171.                 実際に RectangleFigure クラスのインスタンス (id = 1952912699) を取得してから追加していることを確認できます.<br>
  172.                 これを確認したら, ステップオーバーを4回押して呼び出し元に戻ってください.
  173.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_20.png" class = "threeQuartersSize"></div>
  174.             </p>
  175.             <p class = "explanation">
  176.                 呼び出し元である QuadTree クラスの findContains(Point2D$Double) メソッドの84行目に戻ってきました.<br>
  177.                 ここでは, ステップオーバーを1回実行し, このメソッド内ではローカル変数 result に何もオブジェクトが追加されず, <br>
  178.                 89行目の return result に現在の実行時点が移ることを確認してください.<br>
  179.                 これを確認したら, 呼び出しスタック上で1つ呼び出し元をクリックしてください.<br>
  180.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_21.png" class = "threeQuartersSize"></div>
  181.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_22.png" class = "threeQuartersSize"></div>
  182.             </p>
  183.             <p class= "explanation">
  184.                 現在は QuadTreeDrawing クラスの findFigure(Point2D$Double) メソッドを見ています.<br>
  185.                 ここでは, まずステップオーバーを2回押して129行目まで進んでください.<br>
  186.                 129行目で「実行時点の登録」ビューの追加ボタンをクリックして実行時点の登録を行ってください.<br>
  187.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_23.png" class = "threeQuartersSize"></div>
  188.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_24.png" class = "threeQuartersSize"></div>
  189.             </p>
  190.             <p class = "explanation">
  191.                 現在は QuadTreeDrawing クラスの findFigure(Point2D$Double) メソッドの129行目にいます.<br>
  192.                 そのあと, ステップネクストを3回実行すると, 現在の実行時点が130行目に移ります.<br>
  193.                 ここで, 変数ビュー上の「呼び出し後」を開き, 戻り値として RectangleFigure クラスのインスタンス (id = 1952912699) があることを確認してください.<br>
  194.                 これを確認したら, 呼び出しスタック上で2つ呼び出し元をクリックしてください.<br>
  195.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_25.png" class = "threeQuartersSize"></div>
  196.             </p>
  197.             <p class = "explanation">
  198.                 ここまでの結果から RectangleFigure クラスのインスタンスに関わる各オブジェクトの関係について, 以下のことがわかりました.<br>
  199.                 <ol>
  200.                     <li>RectangleFigure クラスのインスタンス (id = 1952912699) は QuadTree の内部クラス QuadNode クラスのインスタンス (id = 2120356010) が参照している.</li>
  201.                     <li>QuadTree の内部クラス QuadNode クラスのインスタンス (id = 2120356010) は QuadTree クラスのインスタンス (id = 808853315) が参照している.</li>
  202.                     <li>QuadTree クラスのインスタンス (id = 808853315) は QuadTreeDrawing クラスのインスタンス (id = 1583174451) が参照している.</li>
  203.                     <li>QuadTreeDrawing クラスのインスタンス (id = 1583174451) は DefaultDrawingView クラスのインスタンス (id = 150367587) が参照している.</li>
  204.                 </ol>
  205.                 ここからは, DefaultDrawingView クラスのインスタンス (id = 150367587) がどこから来たのかを見ていきます.<br>
  206.                 現在は, 呼び出し元である SelectionTool クラスの mousePressed(MouseEvent) メソッドの270行目を見ています.<br>
  207.                 ここで, ソースコードを見ると, このDefaultDrawingView クラスのインスタンスはローカル変数 view で参照されていることが確認できます.
  208.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_26.png" class = "threeQuartersSize"></div>
  209.             </p>
  210.             <p class = "explanation">
  211.                 このローカル変数 view の値がどこから来たのかを見るために, ステップバックオーバーを10回押して228行目にまで戻ってください.<br>
  212.                 228行目では, ローカル変数 view に getView() メソッドの戻り値を代入していることが確認できます.<br>
  213.                 ここで, この戻り値がどうなっているのかを確認するために, ステップインを1回押して getView() メソッドの中に前から入ってください.<br>
  214.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_27.png" class = "threeQuartersSize"></div>
  215.             </p>
  216.             <p class = "explanation">
  217.                 AbstractTool クラスの getView() メソッドに入りました.<br>
  218.                 ここで, 変数ビュー上の this を開くと, DelegationSelectionTool クラスのインスタンス (id = 599587451) が<br>
  219.                 DefaultDraingEditor クラスのインスタンス (id = 1859859960) を参照していることがわかります.<br>
  220.                 これを確認したら, ステップインを3回押して DefaultDrawingEditor クラスの getAcitiveView() メソッドの中に前から入ってください.<br>
  221.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_28.png" class = "threeQuartersSize"></div>
  222.             </p>
  223.             <p class = "explanation">
  224.                 DefaultDrawingEditor クラスの getAcitiveView() メソッドに入りました.<br>
  225.                 ここで, 変数ビュー上の this を開くと, DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が<br>
  226.                 DefaultDrawingView クラスのインスタンス (id = 150367587) を参照していることがわかります.
  227.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_29.png" class = "threeQuartersSize"></div>
  228.             </p>
  229.             <p class = "explanation">
  230.                 先ほどの結果から, DefaultDrawingView クラスのインスタンス (id = 150367587) は<br>
  231.                 DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が参照していることがわかりました.<br>
  232.                 呼び出しスタック上で2つ呼び出し元をクリックしてください.<br>
  233.                 ここで, 課題A4は終了です. 時間計測を終了してください.
  234.                 <div class = "image"><img src = "./images/images_problem2/JHotDraw_2_30.png" class = "threeQuartersSize"></div>
  235.             </p>
  236.         </p>
  237.     </body>
  238. </html>