Fork: 0
nitta-lab / TraceDebuggerExperiment
Transfer to URL with SHA Find file
Newer
Older
TraceDebuggerExperiment / courseA / JHotDraw_Reverse / problem1 / JHotDraw1_Reverse.html
n-nitta on 28 Sep 2020 14 KB 全体を通してチェック、いろいろ修正した。
Raw Blame History 
  1. <!DOCTYPE HTML>
  2. <html lang = "ja">
  3.     <head>
  4.         <title>課題A3 (機能理解)</title>
  5.         <meta charset = "UTF-8">
  6.         <link rel = "stylesheet" type = "text/css" href = "../../../prettify.css">
  7.     </head>
  8.     <body>
  9.         <h1>課題A3 (機能理解)</h1>
  10.         <p>
  11.             課題A3では, JHotDrawの図形の移動機能について見ていきます.<br>
  12.             具体的には,
  13.             <blockquote>
  14.                 「選択された図形がJHotDrawのシステム内部でどのように管理され，図形移動機能の実行によってどのように取り出されて，移動していくか?」
  15.             </blockquote>
  16.             を理解することを目指して, 以下のようにトレースデバッガを操作していきます.<br>
  17.             ワークスペース内のjhotdraw7が、JHotDrawを構成するプロジェクトです。
  18.         </p>
  19.  
  20.         <hr>
  21.         <h2>実行手順</h2>
  22.         <p>
  23.             <ol>
  24.             <!--
  25.                 <li class = "explanation">
  26.                     デスクトップのEclipseを起動し, 指定されたワークスペースを開いてください.
  27.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_01.png" class = "threeQuartersSize"></div>
  28.                 </li>
  29.             -->
  30.                 <li class = "explanation">
  31.                     ワークスペース中にあるjhotdraw7プロジェクトを選択し, メニューバーの 検索 → Java で DefaultDragTracker というタイプの宣言を検索してください.
  32.                     <div class = "image"><img src = "./images/images_problem1_pre/SearchJava_JHotDraw_AWS_pre.png" class = "threeQuartersSize"></div>
  33.                     <div class = "image"><img src = "./images/images_problem1_pre/SearchJava_JHotDraw_AWS.png" class = "halfSize"></div>
  34.                 </li>
  35.                 <li class = "explanation">
  36.                     DefaultDragTrackerクラスのソースファイルを開いて159行目 (DefaultDragTracker#mouseDragged(MouseEvent)) にブレークポイントを入れてください.
  37.                     <div class = "image"><img src = "./images/images_problem1_pre/Breakpoint_JHotDraw_AWS.png" class = "threeQuartersSize"></div>
  38.                 </li>
  39.                 <li class = "explanation">
  40.                     メニューバーの ウィンドウ → パースペクティブ → パースペクティブを開く → その他 → <font color="red">トレースデバッガ(逆方向)</font> でトレースデバッガのパースペクティブを開いてください.
  41.                     <div class = "image"><img src = "./images/images_problem1_pre/OpenPerspective_JHotDraw_AWS.png" class = "threeQuartersSize"></div>
  42.                     <div class = "image"><img src = "./images/images_problem1_pre/OpenPerspective_Reverse_AWS.png" class = "halfSize"></div>
  43.                 </li>
  44.                 <li class = "explanation">
  45.                     開いたトレースデバッガのパースペクティブ右上のブレークポイントビュー上にあるフォルダアイコン(左から1番目)を<br>
  46.                     クリックしてトレースファイル (C:\Users\userXX\runtime-EclipseApplication\jhotdraw7\jHotDrawBenchMarkWithMoreStandardClasses.trace) を開いてください.
  47.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_07.png" class = "threeQuartersSize"></div>
  48.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_08.png" class = "halfSize"></div>
  49.                 </li>
  50.                 <li class = "explanation">
  51.                     トレースファイルの読み込みが終わるまで待ってから, ブレークポイントビュー上にある「ブレークポイントをEclipseから取り入れる」アイコン(左から2番目)を<br>
  52.                     クリックしてトレースデバッガ用のブレークポイントを作成してください.
  53.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_09.png" class = "threeQuartersSize"></div>
  54.                 </li>
  55.                 <li class = "explanation">
  56.                     ブレークポイントビュー上にあるデバッグアイコン(左から3番目)をクリックしてください.<br>
  57.                     トレースデバッガによるデバッグ実行が起動し, ブレークポイントを入れた位置の行が選択された状態で一時停止します.
  58.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_10.png" class = "threeQuartersSize"></div>
  59.                 </li>
  60.             </ol>
  61.         </p>
  62.  
  63.         <hr>
  64.         <h2>機能理解</h2>
  65.         <p>
  66.             Figure クラスは図形を表す JHotDraw のクラスです.<br>
  67.             また, RectangleFigure クラスは矩形を表す JHotDraw のクラスで, Figure クラスの子孫クラスにあたります.<br>
  68.             ブレークポイントを置いた行は、図形を移動するたびに実行されます.
  69.         </p>
  70.  
  71.         <p>
  72.             <p class = "explanation">
  73.                 先ほどの実行手順にしたがって進めていくと, 下図のように DefaultDragTracker クラスの<br>
  74.                 mouseDragged(MouseEvent) メソッド内の159行目で一時停止している状態になっているはずです.<br>
  75.                 この状態になっていれば, <font color="red">ここから時間計測を開始</font>してください. 時間計測はできる限り，1分以内の単位での計測をお願いします.<br>
  76.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_01.png" class = "threeQuartersSize"></div>
  77.             </p>
  78.             <p class = "explanation">
  79.                 DefaultDragTracker クラスの mouseDragged(MouseEvent) メソッドの159行では,<br>
  80.                 ローカル変数 f で参照されている RectangleFigure クラスのインスタンスに対してメソッドが呼び出されていることが確認できます.<br>
  81.                 まずは, この f の値がどこから来たのかを見るために, ステップバックオーバーを2回押して157行目の拡張for文まで戻ってください.
  82.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_02.png" class = "threeQuartersSize"></div>
  83.             </p>
  84.             <p class = "explanation">
  85.                 先ほどのステップバックオーバーの実行によって157行目まで戻ってきました.<br>
  86.                 ここでは, まずステップネクストを1回押してください.<br>
  87.                 そのあと, 変数ビュー上にある「呼び出し後」 (Iterator.next() の呼び出し後) を開くと, <br>
  88.                 戻り値として RectangleFigure クラスのインスタンス (id = 1952912699) が返されていることがわかります.
  89.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_03.png" class = "threeQuartersSize"></div>
  90.             </p>
  91.             <p class = "explanation">
  92.                 ソースコードを見ると, RectangleFigure クラスのインスタンス (id = 1952912699) は DefaultDragTracker クラスのインスタンス (id = 758826749) の<br>
  93.                 フィールド transFormedFigures が参照しているセットから取得していることがわかります.<br>
  94.                 次は, この transFormedFigures に RectangleFigure クラスのインスタンスがどの実行時点で追加されたのかを見ていきます.<br>
  95.                 ここで, 変数ビュー上の「呼び出し後」のメソッド名が Iterator.next() であることを確認してください.<br>
  96.                 それを確認したら, 変数ビュー上で開いている「呼び出し後」の中にある戻り値を右クリックして「オブジェクトの追加時点に飛ぶ」を選択してください.<br>
  97.                 実行すると, オブジェクトの追加時点である DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドの118行目にまで現在の実行時点が遡ります.
  98.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_04.png" class = "threeQuartersSize"></div>
  99.             </p>
  100.             <p class = "explanation">
  101.                 先ほどの操作によって, DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドの118行目に現在の実行時点が移りました.<br>
  102.                 この118行目では, ローカル変数 f の値が フィールド transFormedFigures が参照している HashSet のインスタンスに追加されていることが確認できます.<br>
  103.                 ここで, 「トレースデバッガ」パースペクティブの右下にある「実行時点の登録」ビューの追加ボタンをクリックしてください.<br>
  104.                 そうすると, 現在の実行時点がこのビュー上に登録されます.
  105.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_05.png" class = "threeQuartersSize"></div>
  106.             </p>
  107.             <p class = "explanation">
  108.                 この f の値がどこから来たのかを見るために, ステップバックオーバーを2回押して116行目の拡張for文に戻ってください.<br>
  109.                 ここで, ソースコードを見ると, この116行目の拡張for文ではローカル変数 view が参照しているインスタンスに対して getSelectedFigures() メソッドが呼び出され,<br>
  110.                 その戻り値として返されたコレクションから先ほどのローカル変数 f の値を取得していることが確認できます.<br>
  111.                 これを確認したら, この戻り値がどうなっているのかを見るために, ステップバックインを3回押して getSelectedFigures() メソッドの中に後ろから入ってください.<br>
  112.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_06.png" class = "threeQuartersSize"></div>
  113.             </p>
  114.             <p class = "explanation">
  115.                 DefaultDrawingView クラスの getSelectedFigures() メソッドに入りました.<br>
  116.                 ここで, ソースコードを見ると, Collections クラスの static メソッドである unmodifiableSet(Set) が呼び出されており,<br>
  117.                 その引数として フィールド selectedFigures が渡されていることが確認できます.<br>
  118.                 この Collections#unmodifiableSet(Set) は引数として渡されたセットを Collections$UnmodifiableSet のインスタンスに変換して返すメソッドです. <br>
  119.                 また, 変数ビュー上の「呼び出し後」および this を開くと, このフィールド selectedFigures は DefaultDrawingView クラスの<br>
  120.                 インスタンス (id = 150367587) のフィールドであることがわかります.<br>
  121.                 これを確認したら, ステップバックリターンを1回押して呼び出し元に戻ってください.
  122.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_07.png" class = "threeQuartersSize"></div>
  123.             </p>
  124.             <p class = "explanation">
  125.                 先ほどの結果から, RectangleFigure クラスのインスタンス (id = 1952912699) は <br>
  126.                 DefaultDrawingView クラスのインスタンス (id = 150367587) が LinkedHashSet の要素として保持していることがわかりました.<br>
  127.                 次は, この DefaultDrawingView クラスのインスタンスがどこから来たのかを見ていきます.<br>
  128.                 ここでは, ステップバックオーバーを5回押して98行目に戻ってください.<br>
  129.                 ソースコードを見ると, getView() メソッドの戻り値を ローカル変数 view に代入していることが確認できます.<br>
  130.                 ここで, この戻り値がどうなっているのかを確認するために, ステップインを1回押してこのメソッドの中に前から入ってください.<br>
  131.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_08.png" class = "threeQuartersSize"></div>
  132.             </p>
  133.             <p class = "explanation">
  134.                 AbstractTool クラスの getView() メソッドに入りました.<br>
  135.                 ここで, 変数ビュー上の this を開くと, DefaultDragTracker クラスのインスタンス (id = 758826749) の editor フィールドが<br>
  136.                 DefaultDrawingEditor クラスのインスタンス (id = 1859859960) を参照していることがわかります.<br>
  137.                 これを確認したら, ステップインを3回押して DefaultDrawingEditor クラスの getActiveView() メソッドの中に前から入ってください.<br>
  138.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_09.png" class = "threeQuartersSize"></div>
  139.             </p>
  140.             <p class = "explanation">
  141.                 DefaultDrawingEditor クラスの getAcitiveView() メソッドに入りました.<br>
  142.                 ここで, 変数ビュー上の this を開くと, DefaultDrawingEditor クラスのインスタンス (id = 1859859960) の<br>
  143.                 フィールド activeView が DefaultDrawingView クラスのインスタンス (id = 150367587) を参照していることがわかります.
  144.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_10.png" class = "threeQuartersSize"></div>
  145.             </p>
  146.             <p class = "explanation">
  147.                 先ほどの結果から, DefaultDrawingView クラスのインスタンス (id = 150367587) は<br>
  148.                 DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が参照していることがわかりました.<br>
  149.                 呼び出しスタック上で2つ呼び出し元である DefaultDragTrackerクラスの mousePressed(MouseEvent) メソッドをクリックしてください.<br>
  150.                 ここで, 課題A3は終了です. <font color="red">時間計測を終了</font>してください.<br>
  151.                 なお, デバッグ実行は終了せずにそのままの状態にしておいてください.<br>
  152.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_11.png" class = "threeQuartersSize"></div>
  153.             </p>
  154.         </p>
  155.         <hr>
  156.         <p>
  157.             課題A3の機能理解が終了しましたら, 以下のアンケートにお答えください.
  158.             <div><a href = "https://docs.google.com/forms/d/e/1FAIpQLScEQkbVbQxmluu8KOTQYjASZU1CiPkNBoEb0nlYPpXMKjBfAA/viewform" target = "_blank">アンケート回答</a></div>           
  159.         </p>
  160.         <a href="JHotDraw1_Reverse_Delta.html">次へ</a>
  161.     </body>
  162. </html>