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 25 Sep 2020 13 KB コースAおよびBのすべての課題を繋げた。
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.             JHotDrawはオープンソースの図形描画ツールで, Javaで書かれております.<br>
  13.             ワークスペース内のjhotdraw7が、JHotDrawを構成するプロジェクトです。
  14.         </p>
  15.  
  16.         <hr>
  17.         <h2>実行手順</h2>
  18.         <p>
  19.             <ol>
  20.             <!--
  21.                 <li class = "explanation">
  22.                     デスクトップのEclipseを起動し, 指定されたワークスペースを開いてください.
  23.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_01.png" class = "threeQuartersSize"></div>
  24.                 </li>
  25.             -->
  26.                 <li class = "explanation">
  27.                     ワークスペース中にあるjhotdraw7プロジェクトを選択し, メニューバーの Search → Java で DefaultDragTracker という型の宣言を検索してください.
  28.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_02.png" class = "threeQuartersSize"></div>
  29.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_03.png" class = "quarterSize"></div>
  30.                 </li>
  31.                 <li class = "explanation">
  32.                     DefaultDragTrackerクラスのソースファイルを開いて159行目 (DefaultDragTracker#mouseDragged(MouseEvent)) にブレークポイントを入れてください.
  33.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_04.png" class = "threeQuartersSize"></div>
  34.                 </li>
  35.                 <li class = "explanation">
  36.                     メニューバーの Window → Perspective → Open Perspective → Other... → トレースデバッガ(逆方向) でトレースデバッガのパースペクティブを開いてください.
  37.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_05.png" class = "threeQuartersSize"></div>
  38.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_06.png" class = "quarterSize"></div>
  39.                 </li>
  40.                 <li class = "explanation">
  41.                     開いたトレースデバッガのパースペクティブ右上のブレークポイントビュー上にあるフォルダアイコン(左から1番目)を<br>
  42.                     クリックしてトレースファイル (jHotDrawBenchMarkWithMoreStandardClasses.trace) を開いてください.
  43.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_07.png" class = "threeQuartersSize"></div>
  44.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_08.png" class = "halfSize"></div>
  45.                 </li>
  46.                 <li class = "explanation">
  47.                     トレースファイルの読み込みが終わるまで待ってから, ブレークポイントビュー上にある「ブレークポイントをEclipseから取り入れる」アイコン(左から2番目)を<br>
  48.                     クリックしてトレースデバッガ用のブレークポイントを作成してください.
  49.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_09.png" class = "threeQuartersSize"></div>
  50.                 </li>
  51.                 <li class = "explanation">
  52.                     ブレークポイントビュー上にあるデバッグアイコン(左から3番目)をクリックしてください.<br>
  53.                     トレースデバッガによるデバッグ実行が起動し, ブレークポイントを入れた位置の行が選択された状態で一時停止します.
  54.                     <div class = "image"><img src = "./images/images_problem1_pre/JHotDraw_1_pre_10.png" class = "threeQuartersSize"></div>
  55.                 </li>
  56.             </ol>
  57.         </p>
  58.  
  59.         <hr>
  60.         <h2>機能理解</h2>
  61.         <p>
  62.             ブレークポイントを置いた行は、図形を移動するたびに実行されます.
  63.         </p>
  64.  
  65.         <p>
  66.             <p class = "explanation">
  67.                 先ほどの実行手順にしたがって進めていくと, 下図のように DefaultDragTracker クラスの<br>
  68.                 mouseDragged(MouseEvent) メソッド内の159行目で一時停止している状態になっているはずです.<br>
  69.                 この状態になっていれば, ここから時間計測を開始してください.<br>
  70.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_01.png" class = "threeQuartersSize"></div>
  71.             </p>
  72.             <p class = "explanation">
  73.                 DefaultDragTracker クラスの mouseDragged(MouseEvent) メソッドの159行では,<br>
  74.                 ローカル変数 f で参照されている RectangleFigure クラスのインスタンスに対してメソッドが呼び出されていることが確認できます.<br>
  75.                 まずは, この f の値がどこから来たのかを見るために, ステップバックオーバーを2回押して157行目の拡張for文まで戻ってください.
  76.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_02.png" class = "threeQuartersSize"></div>
  77.             </p>
  78.             <p class = "explanation">
  79.                 先ほどのステップバックオーバーの実行によって157行目まで戻ってきました.<br>
  80.                 ここでは, まずステップネクストを1回押してください.<br>
  81.                 そのあと, 変数ビュー上にある「呼び出し後」を開くと, <br>
  82.                 戻り値として RectangleFigure クラスのインスタンス (id = 1952912699) が返されていることがわかります.
  83.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_03.png" class = "threeQuartersSize"></div>
  84.             </p>
  85.             <p class = "explanation">
  86.                 ソースコードを見ると, RectangleFigure クラスのインスタンス (id = 1952912699) は DefaultDragTracker クラスのインスタンス (id = 758826749) が<br>
  87.                 フィールド transFormedFigures の要素として参照していることがわかります.<br>
  88.                 次は, この transFormedFigures に RectangleFigure クラスのインスタンスがどの実行時点で追加されたのかを見ていきます.<br>
  89.                 変数ビュー上で開いている「呼び出し後」の中にある戻り値を右クリックして「オブジェクトの追加時点に飛ぶ」を選択してください.<br>
  90.                 実行すると, オブジェクトの追加時点である DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドの118行目にまで現在の実行時点が遡ります.
  91.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_04.png" class = "threeQuartersSize"></div>
  92.             </p>
  93.             <p class = "explanation">
  94.                 先ほどの操作によって, DefaultDragTracker クラスの mousePressed(MouseEvent) メソッドの118行目に現在の実行時点が移りました.<br>
  95.                 この118行目では, ローカル変数 f の値が フィールド transFormedFigures に追加されていることが確認できます.<br>
  96.                 ここで, 「トレースデバッガ」パースペクティブの右下にある「実行時点の登録」ビューの追加ボタンをクリックしてください.<br>
  97.                 そうすると, 現在の実行時点がこのビュー上に登録されます.
  98.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_05.png" class = "threeQuartersSize"></div>
  99.             </p>
  100.             <p class = "explanation">
  101.                 この f の値がどこから来たのかを見るために, ステップバックオーバーを1回押して116行目の拡張for文に戻ってください.<br>
  102.                 ここで, ソースコードを見ると, この116行目の拡張for文では, ローカル変数 view が参照しているインスタンスに対して getSelectedFigures() メソッドが呼び出され,<br>
  103.                 戻り値として返された Collections$UnmodifiableSet クラスのインスタンスから先ほどのローカル変数 f の値を取得していることが確認できます.<br>
  104.                 これを確認したら, この戻り値がどうなっているのかを見るために, ステップバックインを4回押して getSelectedFigures() メソッドの中に後ろから入ってください.<br>
  105.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_06.png" class = "threeQuartersSize"></div>
  106.             </p>
  107.             <p class = "explanation">
  108.                 DefaultDrawingView クラスの getSelectedFigures() メソッドに入りました.<br>
  109.                 ここで, ソースコードを見ると, Collections クラスの static メソッドである unmodifiableSet(Set) が呼び出されており,<br>
  110.                 その引数として フィールド getSelectedFigures が渡されていることが確認できます.<br>
  111.                 また, 変数ビュー上の「呼び出し後」および this を開くと, このフィールド getSelectedFigures は<br>
  112.                 DefaultDrawingView クラスのインスタンス (id = 150367587) が参照していることがわかります.<br>
  113.                 これを確認したら, ステップバックリターンを1回押して呼び出し元に戻ってください.
  114.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_07.png" class = "threeQuartersSize"></div>
  115.             </p>
  116.             <p class = "explanation">
  117.                 先ほどの結果から, RectangleFigure クラスのインスタンス (id = 1952912699) は <br>
  118.                 DefaultDrawingView クラスのインスタンス (id = 150367587) が セットの要素として参照していることがわかりました.<br>
  119.                 次は, この DefaultDrawingView クラスのインスタンスがどこから来たのかを見ていきます.<br>
  120.                 ここでは, ステップバックオーバーを5回押して98行目に戻ってください.<br>
  121.                 ソースコードを見ると, getView() メソッドの戻り値を ローカル変数 view に代入していることが確認できます.<br>
  122.                 ここで, この戻り値がどうなっているのかを確認するために, ステップインを1回押してこのメソッドの中に前から入ってください.<br>
  123.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_08.png" class = "threeQuartersSize"></div>
  124.             </p>
  125.             <p class = "explanation">
  126.                 AbstractTool クラスの getView() メソッドに入りました.<br>
  127.                 ここで, 変数ビュー上の this を開くと, DefaultDragTracker クラスのインスタンス (id = 758826749) が<br>
  128.                 DefaultDraingEditor クラスのインスタンス (id = 1859859960) を参照していることがわかります.<br>
  129.                 これを確認したら, ステップインを3回押して DefaultDrawingEditor クラスの getAcitiveView() メソッドの中に前から入ってください.<br>
  130.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_09.png" class = "threeQuartersSize"></div>
  131.             </p>
  132.             <p class = "explanation">
  133.                 DefaultDrawingEditor クラスの getAcitiveView() メソッドに入りました.<br>
  134.                 ここで, 変数ビュー上の this を開くと, DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が<br>
  135.                 DefaultDrawingView クラスのインスタンス (id = 150367587) を参照していることがわかります.
  136.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_10.png" class = "threeQuartersSize"></div>
  137.             </p>
  138.             <p class = "explanation">
  139.                 先ほどの結果から, DefaultDrawingView クラスのインスタンス (id = 150367587) は<br>
  140.                 DefaultDrawingEditor クラスのインスタンス (id = 1859859960) が参照していることがわかりました.<br>
  141.                 呼び出しスタック上で2つ呼び出し元である DefaultDragTrackerクラスの mousePressed(MouseEvent) メソッドをクリックしてください.<br>
  142.                 ここで, 課題A3は終了です. 時間計測を終了してください.
  143.                 <div class = "image"><img src = "./images/images_problem1/JHotDraw_1_11.png" class = "threeQuartersSize"></div>
  144.             </p>
  145.         </p>
  146.         <hr>
  147.         <p>
  148.             課題A3の機能理解が終了しましたら, 以下のアンケートにお答えください.
  149.             <div><a href = "https://docs.google.com/forms/d/e/1FAIpQLScEQkbVbQxmluu8KOTQYjASZU1CiPkNBoEb0nlYPpXMKjBfAA/viewform" target = "_blank">アンケート回答</a></div>           
  150.         </p>
  151.         <a href="JHotDraw1_Reverse_Delta.html">次へ</a>
  152.     </body>
  153. </html>