Fork: 0
nitta-lab / TraceDebuggerExperiment
Transfer to URL with SHA Find file
Newer
Older
TraceDebuggerExperiment / courseB / JHotDraw_Forward / problem2 / JHotDraw2_Forward_Delta.html
n-nitta on 28 Sep 2020 17 KB 全体を通してチェック、いろいろ修正した。
Raw Blame History 
  1. <!DOCTYPE HTML>
  2. <html lang = "ja">
  3.     <head>
  4.         <title>課題B2 (接近過程抽出)</title>
  5.         <meta charset = "UTF-8">
  6.         <link rel = "stylesheet" type = "text/css" href = "../../../prettify.css">
  7.     </head>
  8.     <body>
  9.         <h1>課題B2 (接近過程抽出)</h1>
  10.  
  11.         <hr>
  12.         <h2>接近過程抽出</h2>
  13.         <p>
  14.             
  15.         </p>
  16.  
  17.         <p>
  18.             <p class = "explanation">
  19.                 課題B2 (機能理解) の終了直後は下図のような状態でデバッグ実行が終了しているはずです.<br>
  20.                 デバッグ実行が終了していることを確認したら, 右上にあるパースペクティブを右クリックし, いったんパースペクティブを閉じてください.<br>
  21.                 ここでは, 課題B2 (機能理解) では使用しなかった逆方向バージョンのある機能を用いて, 課題B2 (機能理解) と同等の内容を理解していくことを目指します. <br>
  22.                 <div class = "image"><img src = "./images/images_problem2_delta_pre/JHotDraw_2_delta_pre_03.png" class = "threeQuartersSize"></div>
  23.             </p>
  24.             <p class = "explanation">
  25.                 ここで, 「<font color="red">トレースデバッガ(逆方向)</font>」のパースペクティブを開いてください.<br>
  26.                 <div class = "image"><img src = "./images/images_problem2_delta_pre/JHotDraw_2_delta_pre_04.png" class = "threeQuartersSize"></div>
  27.             </p>
  28.             <p class = "explanation">
  29.                 その状態のままで, ブレークポイントビュー上にある「ブレークポイントをEclipseから取り入れる」をクリックしてください.<br>
  30.                 ブレークポイントを取り入れたら, DefaultDrawingView クラスの addToSelection(Figure) メソッドの780行目以外のブレークポイントのチェックを外してください.<br>
  31.                 チェックを外したら, デバッグ実行してください.<br>
  32.                 まずは, DefaultDrawingView クラスのインスタンス (id = 150367587) のフィールド selectedFigures が参照している LinkedHashSet のインスタンスに<br>
  33.                 RectangleFigure クラスのインスタンス (id = 1952912699) が追加されるまでの過程を見ていきます.<br>
  34.                 デバッグ実行したら, 再開ボタンを1回押してください.<br>
  35.                 すると, DefaultDrawingView クラスの addToSelection(Figure) メソッド780行目の2回目の実行にまで進みます.<br>
  36.                 ここで, ステップネクストを1回押してください.<br>
  37.                 <div class = "image"><img src = "./images/images_problem2_delta_pre/JHotDraw_2_delta_pre_08.png" class = "threeQuartersSize"></div>
  38.                 <div class = "image"><img src = "./images/images_problem2_delta_pre/JHotDraw_2_delta_pre_09.png" class = "threeQuartersSize"></div>
  39.             </p>
  40.             <p class = "explanation">
  41.                 ここで, 変数ビュー上の「呼び出し前」のメソッド名が Set.add(Object) であることを確認してください.<br>
  42.                 それを確認したら, 変数ビュー上の「呼び出し前」を開いて, 引数を右クリックしてください.<br>
  43.                 右クリックすると, ポップアップメニューが出てくるので, 上の方の LinkedHashSet のインスタンスと RectangleFigure の<br>
  44.                 インスタンスを対象とした「オブジェクトの接近過程抽出」をクリックしてください.<br>
  45.                 <div class = "image"><img src = "./images/images_problem2_delta_pre/JHotDraw_2_delta_pre_11.png" class = "threeQuartersSize"></div>
  46.             </p>
  47.             <p class = "explanation">
  48.                 実際に「オブジェクトの接近過程抽出」を実行すると, 下図のような状態になります.<br>
  49.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_01.png" class = "threeQuartersSize"></div>
  50.             </p>
  51.             <p class = "explanation">
  52.                 「オブジェクトの接近過程」ビュー上の「開始時点」をクリックしてください.<br>
  53.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_02.png" class = "threeQuartersSize"></div>
  54.             </p>
  55.             <p class = "explanation">
  56.                 「オブジェクトの接近過程抽出」ビュー上の「参照先側001」から「参照先側004」までを順番にクリックしてください.<br>
  57.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_03.png" class = "threeQuartersSize"></div>
  58.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_05.png" class = "threeQuartersSize"></div>
  59.             </p>
  60.             <p class = "explanation">
  61.                 「オブジェクトの接近過程抽出」ビュー上の「参照元側001」から「参照元側013」までを順番にクリックしてください.<br>
  62.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_06.png" class = "threeQuartersSize"></div>
  63.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_07.png" class = "threeQuartersSize"></div>
  64.             </p>
  65.             <p class = "explanation">
  66.                 「オブジェクトの接近過程」ビュー上の「参照時点」をクリックしてください.<br>
  67.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_09.png" class = "threeQuartersSize"></div>
  68.             </p>
  69.             <p class = "explanation">
  70.                 ここまでで, DefaultDrawingView クラスのインスタンス (id = 150367587) のフィールド selectedFigures が参照している LinkedHashSet のインスタンスに<br>
  71.                 RectangleFigure クラスのインスタンス (id = 1952912699) が接近する過程を見てきました.<br>
  72.                 抽出した結果を見ると, DefaultDragTracker クラスのインスタンス (id = 758826749) のフィールド anchorFigure に代入されていた<br>
  73.                 RectangleFigure クラスのインスタンスを取得してきていることがわかりましたが, その RectangleFigure クラスのインスタンスの参照が <br>
  74.                 anchorFigure フィールドに代入されるまでの経緯については, この抽出範囲だけではわかりません.<br>
  75.                 そこで, ここからは, DefaultDragTracker クラスのインスタンス (id = 758826749) に RectangleFigure クラスのインスタンス (id = 1952912699) が<br>
  76.                 接近する過程を抽出して見ていきます.<br>
  77.                 まずは, 「オブジェクトの接近過程抽出」ビュー上の「参照先側002」をクリックしてください.<br>
  78.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_10.png" class = "threeQuartersSize"></div>
  79.             </p>
  80.             <p class = "explanation">
  81.                 先ほどの操作によって, 現在は DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドの109行目にいます.<br>
  82.                 ここで, 変数ビュー上の this を開き, フィールド anchorFigure を右クリックしてください.<br>
  83.                 右クリックすると, ポップアップメニューが出てくるので, 「値の代入時点に飛ぶ」をクリックしてください.<br>
  84.                 すると, 現在の実行時点が DefaultDragTracker クラスの setDraggedFigure(Figure) メソッドの218行目に移ります.<br>
  85.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_11.png" class = "threeQuartersSize"></div>
  86.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_12.png" class = "threeQuartersSize"></div>
  87.             </p>
  88.             <p class = "explanation">
  89.                 先ほどの操作によって, 現在は DefaultDragTracker クラスの setDraggedFigure(Figure) メソッドの218行目にいます.<br>
  90.                 ここで, 変数ビュー上の「フィールド代入前」を開いて, 参照先を右クリックしてください.<br>
  91.                 右クリックすると, ポップアップメニューが出てくるので,「オブジェクトの接近過程抽出」をクリックしてください.<br>
  92.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_13.png" class = "threeQuartersSize"></div>
  93.             </p>
  94.             <p class = "explanation">
  95.                 実際に「オブジェクトの接近過程抽出」を実行すると, 下図のような状態になります.<br>
  96.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_14.png" class = "threeQuartersSize"></div>         
  97.             </p>
  98.             <p class = "explanation">
  99.                 「オブジェクトの接近過程」ビュー上の「開始時点」をクリックしてください.<br>
  100.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_15.png" class = "threeQuartersSize"></div>
  101.             </p>
  102.             <p class = "explanation">
  103.                 「オブジェクトの接近過程抽出」ビュー上の「参照先側001」から「参照先側036」までを順番にクリックしてください.<br>
  104.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_16.png" class = "threeQuartersSize"></div>
  105.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_17.png" class = "threeQuartersSize"></div>
  106.             </p>
  107.             <p class = "explanation">
  108.                 「オブジェクトの接近過程抽出」ビュー上の「参照元側001」から「参照元側004」までを順番にクリックしてください.<br>
  109.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_18.png" class = "threeQuartersSize"></div>
  110.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_19.png" class = "threeQuartersSize"></div>
  111.             </p>
  112.             <p class = "explanation">
  113.                 「オブジェクトの接近過程」ビュー上の「参照時点」をクリックしてください.<br>
  114.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_20.png" class = "threeQuartersSize"></div>
  115.             </p>
  116.             <p class = "explanation">
  117.                 ここまでで, DefaultDragTracker クラスのインスタンス (id = 758826749) に RectangleFigure クラスのインスタンス (id = 1952912699) が接近する過程を見てきました.<br>
  118.                 抽出した結果 (「参照先側022」と「参照先側023」) を見ると, QuadTree#findContents(Point2D$Double) のローカル変数 result が参照している<br>
  119.                 HashSet オブジェクトに追加された RectangleFigure クラスのインスタンスを取得してきていることがわかりましたが, <br>
  120.                 その RectangleFigure クラスのインスタンスが HashSet オブジェクトに追加されるまでの経緯は, この抽出範囲だけではわかりません.<br>
  121.                 そこで, ここからは, そのローカル変数 result に RectangleFigure クラスのインスタンス (id = 1952912699) が追加されるまでの過程を見ていきます.<br>
  122.                 まずは, 「オブジェクトの接近過程抽出」ビュー上の「参照先側028」をクリックしてください.<br>
  123.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_21.png" class = "threeQuartersSize"></div>
  124.             </p>
  125.             <p class = "explanation">
  126.                 先ほどの操作によって, 現在は QuadTreeDrawing クラスの findFigure(Point2D$Double) メソッドの129行目にいます.<br>
  127.                 ここで, ステップネクストを1回押して130行目にまで進んでください.<br>
  128.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_22.png" class = "threeQuartersSize"></div>
  129.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_23.png" class = "threeQuartersSize"></div>
  130.             </p>
  131.             <p class = "explanation">
  132.                 先ほどの操作によって, 現在は QuadTreeDrawing クラスの findFigure(Point2D$Double) メソッドの130行目にいます.<br>
  133.                 ここで, 変数ビュー上の「呼び出し後」のメソッド名が Iterator.next() であることを確認してください.<br>
  134.                 それを確認したら, 変数ビュー上の「呼び出し後」を開いて, 戻り値を右クリックしてください.<br>
  135.                 右クリックすると, ポップアップメニューが出てくるので, 「オブジェクトの追加時点に飛ぶ」をクリックしてください.<br>
  136.                 すると, 現在の実行時点が QuadTree$QuadNode クラスの findContains(Point2D$Double, HashSet) メソッドの226行目に移ります.<br>
  137.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_24.png" class = "threeQuartersSize"></div>
  138.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_25.png" class = "threeQuartersSize"></div>
  139.             </p>
  140.             <p class = "explanation">
  141.                 先ほどの操作によって, 現在は QuadTree$QuadNode クラスの findContains(Point2D$Double, HashSet) メソッドの226行目にいます.<br>
  142.                 ここで, 変数ビュー上の「呼び出し前」のメソッド名が HashSet.add(Object) であることを確認してください.<br>
  143.                 それを確認したら, 変数ビュー上の「呼び出し前」を開いて, 引数を右クリックしてください.<br>
  144.                 右クリックすると, ポップアップメニューが出てくるので, 上の方の HashSet のインスタンスと RectangleFigure の<br>
  145.                 インスタンスを対象とした「オブジェクトの接近過程抽出」をクリックしてください.<br>
  146.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_26.png" class = "threeQuartersSize"></div>         
  147.             </p>
  148.             <p class = "explanation">
  149.                 実際に「オブジェクトの接近過程抽出」を実行すると, 下図のような状態になります.<br>
  150.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_27.png" class = "threeQuartersSize"></div>         
  151.             </p>
  152.             <p class = "explanation">
  153.                 「オブジェクトの接近過程」ビュー上の「開始時点」をクリックしてください.<br>
  154.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_28.png" class = "threeQuartersSize"></div>
  155.             </p>
  156.             <p class = "explanation">
  157.                 「オブジェクトの接近過程抽出」ビュー上の「参照先側001」から「参照先側013」までを順番にクリックしてください.<br>
  158.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_29.png" class = "threeQuartersSize"></div>
  159.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_31.png" class = "threeQuartersSize"></div>
  160.             </p>
  161.             <p class = "explanation">
  162.                 「オブジェクトの接近過程抽出」ビュー上の「参照元側001」から「参照元側004」までを順番にクリックしてください.<br>
  163.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_33.png" class = "threeQuartersSize"></div>
  164.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_35.png" class = "threeQuartersSize"></div>
  165.             </p>
  166.             <p class = "explanation">
  167.                 「オブジェクトの接近過程」ビュー上の「参照時点」をクリックしてください.<br>
  168.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_36.png" class = "threeQuartersSize"></div>
  169.             </p>
  170.             <p class = "explanation">
  171.                 ここまでで, QuadTree#findContents(Point2D$Double) のローカル変数 result が参照している HashSet のインスタンスに<br>
  172.                 RectangleFigure クラスのインスタンス (id = 1952912699) が追加されるまでの過程を見てきました.<br>
  173.                 ここで, 課題B2の接近過程抽出は終了です.<br>
  174.                 「オブジェクトの接近過程」ビューを全て閉じ, そのあとデバッグ実行を終了してください.<br>
  175.                 <!--デバッグ実行を終了したら, この「トレースデバッガ(逆方向)」のパースペクティブを閉じてください.<br>-->
  176.                 <div class = "image"><img src = "./images/images_problem2_delta/JHotDraw_2_delta_38.png" class = "threeQuartersSize"></div>
  177.             </p>
  178.             <hr>
  179.             <p>
  180.                 課題B2の接近過程抽出が終了しましたら, 以下のアンケートにお答えください.
  181.                 <div><a href = "https://docs.google.com/forms/d/e/1FAIpQLSf5YK-v1zrm7SE0sqoG9WcxvEYx1mpb21yHIk3lGtrLdR4HLQ/viewform" target = "_blank">アンケート回答</a></div>           
  182.             </p>
  183.         <a href="../../ArgoUML_Reverse/DescriptionArgoUML.html">次へ</a>
  184.         </p>
  185.     </body>
  186. </html>