Fork: 0
nitta-lab / TraceDebuggerExperiment
Transfer to URL with SHA Find file
Newer
Older
TraceDebuggerExperiment / courseB / JHotDraw_Forward / problem1 / JHotDraw1_Forward.html
r-isitani on 18 Sep 2020 15 KB デルタ抽出のシナリオを追加し、コース毎に課題1～課題4の順に進められるよう各課題の繋がりを修正した。
Raw Blame History 
  1. <!DOCTYPE HTML>
  2. <html lang = "ja">
  3.     <head>
  4.         <title>課題B1 (JHotDraw)</title>
  5.         <meta charset = "UTF-8">
  6.         <link rel = "stylesheet" type = "text/css" href = "../../../prettify.css">
  7.     </head>
  8.     <body>
  9.         <h1>課題B1</h1>
  10.         <p>
  11.             課題B1では, JHotDrawの図形の移動機能について見ていきます.<br>
  12.             JHotDrawはオープンソースの図形描画ツールで, Javaで書かれております.<br>
  13.             ワークスペース内のjhotdraw7が、JHotDrawを構成するプロジェクトです。
  14.         </p>
  15.  
  16.         <hr>
  17.         <h2>実行手順</h2>
  18.         <p>
  19.             <ol>
  20.                 <li class = "explanation">
  21.                     デスクトップのEclipseを起動し, 指定されたワークスペースを開いてください.
  22.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_01.png" class = "threeQuartersSize"></div>
  23.                 </li>
  24.                 <li class = "explanation">
  25.                     ワークスペース中にあるjhotdraw7プロジェクトを選択し, メニューバーの Search → Java で DefaultDragTracker というタイプの宣言を検索してください.
  26.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_02.png" class = "threeQuartersSize"></div>
  27.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_03.png" class = "quarterSize"></div>
  28.                 </li>
  29.                 <li class = "explanation">
  30.                     DefaultDragTrackerクラスのソースファイルを開いて159行目 (DefaultDragTracker#mouseDragged(MouseEvent)) にブレークポイントを入れてください.
  31.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_04.png" class = "threeQuartersSize"></div>
  32.                 </li>
  33.                 <li class = "explanation">
  34.                     メニューバーの Window → Perspective → Open Perspective → Other... → トレースデバッガ(順方向) でトレースデバッガのパースペクティブを開いてください.
  35.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_05.png" class = "threeQuartersSize"></div>
  36.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_06.png" class = "halfSize"></div>
  37.                 </li>
  38.                 <li class = "explanation">
  39.                     開いたトレースデバッガのパースペクティブ右上のブレークポイントビュー上にあるフォルダアイコン(左から1番目)を<br>
  40.                     クリックしてトレースファイル(jHotDrawBenchMarkWithMoreStandardClasses.trace)を開いてください.
  41.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_07.png" class = "threeQuartersSize"></div>
  42.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_08.png" class = "halfSize"></div>
  43.                 </li>
  44.                 <li class = "explanation">
  45.                     トレースファイルの読み込みが終わるまで待ってから, ブレークポイントビュー上にある「ブレークポイントをEclipseから取り入れる」アイコン(左から2番目)を<br>
  46.                     クリックしてトレースデバッガ用のブレークポイントを作成してください.
  47.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_09.png" class = "threeQuartersSize"></div>
  48.                 </li>
  49.                 <li class = "explanation">
  50.                     ブレークポイントビュー上にあるデバッグアイコン(左から3番目)をクリックしてください.<br>
  51.                     トレースデバッガによるデバッグ実行が起動し, ブレークポイントを入れた位置の行が選択された状態で一時停止します.
  52.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_10.png" class = "threeQuartersSize"></div>
  53.                 </li>
  54.             </ol>
  55.         </p>
  56.  
  57.         <hr>
  58.         <h2>課題B1</h2>
  59.         <p>
  60.             <!--
  61.             Fig クラスはグラフィックエディタ上の図形を表すGEFの内部のクラスです.<br>
  62.             また, FigClass クラスはクラス図上に配置された「クラス」を表す JHotDraw のクラスで, Fig クラスの子孫クラスにあたります.<br>
  63.             -->
  64.             ブレークポイントを置いた行は、図形を移動するたびに実行されます.
  65.         </p>
  66.  
  67.         <p>
  68.             <p class = "explanation">
  69.                 先ほどの実行手順にしたがって進めていくと, 下図のように DefaultDragTracker クラスの<br>
  70.                 mouseDragged(MouseEvent) メソッド内の159行目で一時停止している状態になっているはずです.<br>
  71.                 この状態になっていれば, ここから時間計測を開始してください.<br>
  72.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_01.png" class = "threeQuartersSize"></div>
  73.             </p>
  74.             <p class = "explanation">
  75.                 DefaultDragTracker クラスの mouseDragged(MouseEvent) メソッドの159行では,<br>
  76.                 ローカル変数 f で参照されているインスタンスに対してメソッドが呼び出されていることが確認できます.<br>
  77.                 ここで, 変数ビュー上の「呼び出し前」を開いてレシーバのIDを見ると, これは RectangleFigure クラスのインスタンス (id = 1952912699) であることがわかります.<br>
  78.                 また, ソースコードを見ると, このローカル変数 f の値は, 157行目の拡張for文でフィールド transformedFigures が取得してきたものだと確認できます.
  79.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_02.png" class = "threeQuartersSize"></div>
  80.             </p>
  81.             <p class = "explanation">
  82.                 次は, フィールド transformedFigures に RectangleFigure クラスのインスタンス (id = 1952912699) を実際に追加しているのはどこなのかを見ていきます.<br>
  83.                 ソースコード中の157行目の transformedFigures にカーソルを入れ, そのフィールドに対してオブジェクトを追加している全ての行にブレークポイントを入れてください.<br>
  84.                 今回は DefaultDragTracker クラスの118行目のみです。
  85.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_03.png" class = "threeQuartersSize"></div>
  86.             </p>
  87.             <p class = "explanation">
  88.                 ここで, いったんデバッグ実行を終了してから, ブレークポイントビュー上にある「ブレークポイントを取り入れる」ボタンを押してください.<br>
  89.                 そのあと, 再びデバッグ実行すると今度は118行目に止まります.<br>
  90.                 ステップインを2回押してから変数ビュー上の「呼び出し前」を開いて引数のオブジェクトのIDを確認してください.<br>
  91.                 すると, 先ほど確認した RectangleFigure クラスのインスタンス (id = 1952912699) がここで追加されていることがわかります.<br>
  92.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_05.png" class = "threeQuartersSize"></div>
  93.             </p>
  94.             <p class = "explanation">
  95.                 ここで, 最初にブレークポイントを入れた地点である159行目に実行が進むかどうかを確認します.<br>
  96.                 再開ボタンを1回押すと, すぐには159行目に移らず, 同じ118行目に再び止まります.<br>
  97.                 先ほどと同様に変数ビューを開いて引数のオブジェクトのIDを確認してください.<br>
  98.                 すると, ここでも同じ RectangleFigure クラスのインスタンス (id = 1952912699) が追加されていることがわかります.<br>
  99.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_06.png" class = "threeQuartersSize"></div>
  100.             </p>
  101.             <p class = "explanation">
  102.                 再び再開ボタンを押すと, 今度は159行目に止まります.<br>
  103.                 ここで, 変数ビューの「呼び出し前」を開いてレシーバのIDを見ると, 先ほどの RectangleFigure クラスのインスタンス (id = 1952912699) と同一であることが確認できます.<br>
  104.                 したがって, ここでは直前に止まっていた2回目の118行目で追加した RectangleFigure を取得していることがわかります.<br>
  105.                 それを確認したら, ここでいったんデバッグ実行を終了してください.
  106.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_07.png" class = "threeQuartersSize"></div>
  107.             </p>
  108.             <p class = "explanation">
  109.                 ソースコードを見ると, 116行目の拡張for文で DrawingView クラスの getSelectedFigures() を呼び出し, <br>
  110.                 その戻り値のコレクションから取得してきた RectangleFigure クラスのインスタンスを, 118行目で selectedFigures に追加していることがわかります.<br>
  111.                 そこで, 次はこの view がどこから来たのかと, getSelectedFigures() メソッドの戻り値がどうなっているのかを見ていきます.<br>
  112.                 98行目と116行目にブレークポイントを入れ, ブレークポイントビュー上にある「ブレークポイントを取り入れる」ボタンを押してください.<br>
  113.                 そのあと, 再びデバッグ実行すると, まずは98行目で止まることをを確認してください.
  114.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_08.png" class = "threeQuartersSize"></div>
  115.             </p>
  116.             <p class = "explanation">
  117.                 先ほどの実行によって, 現在は98行目に止まっているはずです.<br>
  118.                 この状態で再開ボタンを押していくと, 現在の実行時点が 116行目 → 118行目 → 98行目 → 116行目 → 118行目と移り変わることを確認してください.<br>
  119.                 この操作によって, 98行目と116行目と118行目はそれぞれ2回ずつ実行されていることが確認でき, したがって, 2回目に止まった方が直前に実行されたものだとわかります.<br>
  120.                 ここでいったんデバッグ実行を終了して下さい.
  121.             </p>
  122.             <p class = "explanation">
  123.                 そのままの状態で再びデバッグ実行し, 再開ボタンを3回押して2回目の98行目に止まって下さい.<br>
  124.                 ここで, ステップインを1回押して getView() メソッドの中に入ってください.
  125.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_09.png" class = "threeQuartersSize"></div>
  126.             </p>
  127.             <p class = "explanation">
  128.                 AbstractTool クラスの getView() メソッドに入りました.<br>
  129.                 ここで, 変数ビュー上の this を開くと, DefaultDragTracker クラスのインスタンス(id = 758826749) が<br>
  130.                 フィールド editor として DefaultDrawingEditor クラスのインスタンス (id = 1859859960) を保持していることがわかります.<br>
  131.                 これを確認したら, ステップインを3回押して getActiveView() メソッドの中に入ってください.
  132.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_10.png" class = "threeQuartersSize"></div>
  133.             </p>
  134.             <p class = "explanation">
  135.                 DefaultDrawingView クラスの getActiveView() メソッドに入りました.<br>
  136.                 ここで, 変数ビュー上の this を開くと, DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が<br>
  137.                 フィールド activeView として DefaultDrawingView クラスのインスタンス (id = 150367587) を保持していることがわかります.<br>
  138.                 これを確認したら, ステップリターンを1回押して呼び出し元に戻ってください.<br>
  139.                 (このとき, 2つ呼び出し元である DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドまで戻ることに注意してください)
  140.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_11.png" class = "threeQuartersSize"></div>
  141.             </p>
  142.             <p class = "explanation">
  143.                 先ほどの操作によって, 現在の実行時点は DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドの106行目になっているはずです.<br>
  144.                 ここでは, ステップオーバーを4回押して116行目まで進んでください.<br>
  145.                 116行目まで進んだら, 変数ビュー上の「呼び出し前」を開いて, レシーバのオブジェクトのIDを見ると, <br>
  146.                 先ほど取得してきた DefaultDrawingView クラスのインスタンス (id = 150367587) に対して getSelectedFigures() メソッドが呼び出されていることがわかります.<br>
  147.                 これを確認したら, ステップインを1回押して, このメソッドの中に入ってください.
  148.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_12.png" class = "threeQuartersSize"></div>
  149.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_13.png" class = "threeQuartersSize"></div>
  150.             </p>
  151.             <p class = "explanation">
  152.                 DefaultDrawingView クラスの getSelectedFigures() メソッドの中に入りました.<br>
  153.                 ここで, 変数ビュー上の this を開くと, DefaultDrawingView クラスのインスタンス (id = 150367587) が<br>
  154.                 フィールド selectedFigures として LinkedHashSet を保持していることがわかります.<br>
  155.                 また, ソースコードを見ると, Collections クラスの static メソッドである unmodifiableSet(Set) が呼び出されており,<br>
  156.                 その引数として フィールド getSelectedFigures が渡されていることが確認できます.<br>
  157.                 これを確認したら, 呼び出しスタック上で1つ呼び出し元をクリックしてください.
  158.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_14.png" class = "threeQuartersSize"></div>
  159.             </p>
  160.             <p class = "explanation">
  161.                 現在は DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドの116行目を見ています.<br>
  162.                 ここで課題B1は終了です. 時間計測を終了してください.
  163.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_15.png" class = "threeQuartersSize"></div>
  164.             </p>
  165.         </p>
  166.     </body>
  167. </html>