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 27 Sep 2020 16 KB ウォークスルーで見つかったミスを修正した。
Raw Blame History 
  1. <!DOCTYPE HTML>
  2. <html lang = "ja">
  3.     <head>
  4.         <title>課題B1 (機能理解)</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.             具体的には,
  13.             <blockquote>
  14.                 「選択された図形がJHotDrawのシステム内部でどのように管理され，図形移動機能の実行によってどのように取り出されて，移動していくか?」
  15.             </blockquote>
  16.             JHotDrawはオープンソースの図形描画ツールで, Javaで書かれております.<br>
  17.             ワークスペース内のjhotdraw7が、JHotDrawを構成するプロジェクトです。
  18.         </p>
  19.  
  20.         <hr>
  21.         <h2>実行手順</h2>
  22.         <p>
  23.             <ol>
  24.                 <li class = "explanation">
  25.                     デスクトップのEclipseを起動し, 指定されたワークスペースを開いてください.
  26.                     <div class = "image"><img src = "./images/images_problem1_pre/ec2_6.jpg" class = "threeQuartersSize"></div>
  27.                 </li>
  28.                 <li class = "explanation">
  29.                     ワークスペース中にあるjhotdraw7プロジェクトを選択し, メニューバーの 検索 → Java で DefaultDragTracker というタイプの宣言を検索してください.
  30.                     <div class = "image"><img src = "./images/images_problem1_pre/SearchJava_JHotDraw_AWS_pre.png" class = "threeQuartersSize"></div>
  31.                     <div class = "image"><img src = "./images/images_problem1_pre/SearchJava_JHotDraw_AWS.png" class = "halfSize"></div>
  32.                 </li>
  33.                 <li class = "explanation">
  34.                     DefaultDragTrackerクラスのソースファイルを開いて159行目 (DefaultDragTracker#mouseDragged(MouseEvent)) にブレークポイントを入れてください.
  35.                     <div class = "image"><img src = "./images/images_problem1_pre/Breakpoint_JHotDraw_AWS.png" class = "threeQuartersSize"></div>
  36.                 </li>
  37.                 <li class = "explanation">
  38.                     メニューバーの ウィンドウ → パースペクティブ → パースペクティブを開く → その他 → <font color="red">トレースデバッガ(順方向)</font> でトレースデバッガのパースペクティブを開いてください.
  39.                     <div class = "image"><img src = "./images/images_problem1_pre/OpenPerspective_JHotDraw_AWS.png" class = "threeQuartersSize"></div>
  40.                     <div class = "image"><img src = "./images/images_problem1_pre/OpenPerspective_Forward_AWS.png" class = "halfSize"></div>
  41.                 </li>
  42.                 <li class = "explanation">
  43.                     開いたトレースデバッガのパースペクティブ右下のブレークポイントビュー上にあるフォルダアイコン(左から1番目)を<br>
  44.                     クリックしてトレースファイル (C:\Users\userXX\runtime-EclipseApplication\jhotdraw7\jHotDrawBenchMarkWithMoreStandardClasses.trace) を開いてください.
  45.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_07.png" class = "threeQuartersSize"></div>
  46.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_08.png" class = "halfSize"></div>
  47.                 </li>
  48.                 <li class = "explanation">
  49.                     トレースファイルの読み込みが終わるまで待ってから, ブレークポイントビュー上にある「ブレークポイントをEclipseから取り入れる」アイコン(左から2番目)を<br>
  50.                     クリックしてトレースデバッガ用のブレークポイントを作成してください.
  51.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_09.png" class = "threeQuartersSize"></div>
  52.                 </li>
  53.                 <li class = "explanation">
  54.                     ブレークポイントビュー上にあるデバッグアイコン(左から3番目)をクリックしてください.<br>
  55.                     トレースデバッガによるデバッグ実行が起動し, ブレークポイントを入れた位置の行が選択された状態で一時停止します.
  56.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_10.png" class = "threeQuartersSize"></div>
  57.                 </li>
  58.             </ol>
  59.         </p>
  60.  
  61.         <hr>
  62.         <h2>機能理解</h2>
  63.         <p>
  64.             ブレークポイントを置いた行は、図形を移動するたびに実行されます.
  65.         </p>
  66.  
  67.         <p>
  68.             <p class = "explanation">
  69.                 先ほどの実行手順にしたがって進めていくと, 下図のように DefaultDragTracker クラスの<br>
  70.                 mouseDragged(MouseEvent) メソッド内の159行目で一時停止している状態になっているはずです.<br>
  71.                 この状態になっていれば, <font color="red">ここから時間計測を開始</font>してください. 時間計測はできる限り，1分以内の単位での計測をお願いします.<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.                 ここで, いったんデバッグ実行を終了してから, ブレークポイントビュー上にある「ブレークポイントをEclipseから取り入れる」アイコンを押してください.<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.                 先ほどと同様に, ステップインを2回押してから, 変数ビュー上の「呼び出し前」を開いて引数のオブジェクトの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行目にブレークポイントを入れ, ブレークポイントビュー上にある「ブレークポイントをEclipseから取り入れる」アイコンを押してください.<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.                 DefaultDrawingEditor クラスの 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.                 その引数として フィールド selectedFigures が渡されていることが確認できます.<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は終了です. <font color="red">時間計測を終了</font>してください.<br>
  163.                 また, 終了アイコンを押して, デバッグ実行を終了しておいてください.<br>
  164.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_15.png" class = "threeQuartersSize"></div>
  165.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_16.png" class = "threeQuartersSize"></div>
  166.             </p>
  167.             <hr>
  168.             <p>
  169.                 課題B1の機能理解が終了しましたら, 以下のアンケートにお答えください.
  170.                 <div><a href = "https://docs.google.com/forms/d/e/1FAIpQLSd9o6_xeN-X4LvKyOu0o-n_-1eMvNmVyNOif9fDmzLVYd2x9Q/viewform" target = "_blank">アンケート回答</a></div>           
  171.             </p>
  172.         <a href="JHotDraw1_Forward_Delta.html">次へ</a>
  173.         </p>
  174.     </body>
  175. </html>