Fork: 0
nitta-lab / TraceDebuggerExperiment
Transfer to URL with SHA Find file
Newer
Older
TraceDebuggerExperiment / courseA / ArgoUML_Forward / problem1 / ArgoUML1_Forward.html
r-isitani on 25 Sep 2020 25 KB Trelloのチケットの作業項目3つと日本語版の画像の差し替えを行った。
Raw Blame History 
  1. <!DOCTYPE HTML>
  2. <html lang = "ja">
  3.     <head>
  4.         <title>課題A1 (機能理解)</title>
  5.         <meta charset = "UTF-8">
  6.         <link rel = "stylesheet" type = "text/css" href = "../../../prettify.css">
  7.     </head>
  8.     <body>
  9.         <h1>課題A1 (機能理解)</h1>
  10.         <p>
  11.             課題A1では, ArgoUMLの図形の削除機能について見ていきます.<br>
  12.             具体的には,
  13.             <blockquote>
  14.                 「選択された図形がArgoUMLのシステム内部でどのように管理され, 削除機能の実行によってどのように取り出されて, 削除されるか?」
  15.             </blockquote>
  16.             を理解することを目指して, 以下のようにトレースデバッガを操作していきます.<br>
  17.             なお, ArgoUML内部では, グラフ編集用フレームワークであるGEFが使用されています.<br>
  18.             ワークスペース内のargouml-*が、ArgoUMLを構成するプロジェクトであり, GEF-0.13.7がGEFのプロジェクトです.
  19.         </p>
  20.  
  21.         <hr>
  22.         <h2>実行手順</h2>
  23.         <p>
  24.             <ol>
  25.                 <li class = "explanation">
  26.                     デスクトップのEclipseを起動し, 指定されたワークスペースを開いてください.
  27.                     <div class = "image"><img src = "./images/images_problem1_pre/ec2_6.jpg" class = "threeQuartersSize"></div>
  28.                 </li>
  29.                 <li class = "explanation">
  30.                     ワークスペース中にあるGEF-0.13.7プロジェクトを選択し, メニューバーの 検索 → Java で Fig というタイプの宣言を検索してください.
  31.                     <div class = "image"><img src = "./images/images_problem1_pre/SearchJava_ArgoUML_AWS_pre.png" class = "threeQuartersSize"></div>
  32.                     <div class = "image"><img src = "./images/images_problem1_pre/SearchJava_ArgoUML_AWS.png" class = "halfSize"></div>
  33.                 </li>
  34.                 <li class = "explanation">
  35.                     Figクラスのソースファイルを開いて743行目 (Fig#removeFromDiagram()) にブレークポイントを入れてください.
  36.                     <div class = "image"><img src = "./images/images_problem1_pre/Breakpoint_ArgoUML_AWS.png" class = "threeQuartersSize"></div>
  37.                 </li>
  38.                 <li class = "explanation">
  39.                     メニューバーの ウィンドウ → パースペクティブ → パースペクティブを開く → その他 → トレースデバッガ(順方向) でトレースデバッガのパースペクティブを開いてください.
  40.                     <div class = "image"><img src = "./images/images_problem1_pre/OpenPerspective_ArgoUML_AWS.png" class = "threeQuartersSize"></div>
  41.                     <div class = "image"><img src = "./images/images_problem1_pre/OpenPerspective_Forward_AWS.png" class = "halfSize"></div>
  42.                 </li>
  43.                 <li class = "explanation">
  44.                     開いたトレースデバッガのパースペクティブ右上のブレークポイントビュー上にあるフォルダアイコン(左から1番目)を<br>
  45.                     クリックしてトレースファイル (C:\Users\userXX\runtime-EclipseApplication\argouml\ArgoUMLBenchMarkWithMoreStandardClasses.trace) を開いてください.
  46.                     <div class = "image"><img src = "./images/images_problem1_pre/ArgoUML_1_pre_07.png" class = "threeQuartersSize"></div>
  47.                     <div class = "image"><img src = "./images/images_problem1_pre/ArgoUML_1_pre_08.png" class = "halfSize"></div>
  48.                 </li>
  49.                 <li class = "explanation">
  50.                     トレースファイルの読み込みが終わるまで待ってから, ブレークポイントビュー上にある「ブレークポイントをEclipseから取り入れる」アイコン(左から2番目)を<br>
  51.                     クリックしてトレースデバッガ用のブレークポイントを作成してください.
  52.                     <div class = "image"><img src = "./images/images_problem1_pre/ArgoUML_1_pre_09.png" class = "threeQuartersSize"></div>
  53.                 </li>
  54.                 <li class = "explanation">
  55.                     ブレークポイントビュー上にあるデバッグアイコン(左から3番目)をクリックしてください.<br>
  56.                     トレースデバッガによるデバッグ実行が起動し, ブレークポイントを入れた位置の行が選択された状態で一時停止します.
  57.                     <div class = "image"><img src = "./images/images_problem1_pre/ArgoUML_1_pre_10.png" class = "threeQuartersSize"></div>
  58.                 </li>
  59.             </ol>
  60.         </p>
  61.  
  62.         <hr>
  63.         <h2>機能理解</h2>
  64.         <p>
  65.             Fig クラスはグラフィックエディタ上の図形を表すGEFの内部のクラスです.<br>
  66.             また, FigClass クラスはクラス図上に配置された「クラス」を表す ArgoUML のクラスで, Fig クラスの子孫クラスにあたります.<br>
  67.             ブレークポイントを置いた行は、図形を削除するたびに実行されます.
  68.         </p>
  69.  
  70.         <p>
  71.             <p class = "explanation">
  72.                 先ほどの実行手順にしたがって進めていくと, 下図のように Fig クラスの removeFromDiagram() メソッド内の743行目で一時停止している状態になっているはずです.<br>
  73.                 この状態になっていれば, <font color="red">ここから時間計測を開始</font>してください. 時間計測はできる限り，1分以内の単位での計測をお願いします. <br>
  74.                 ここで, 変数ビューを確認すると, このメソッド実行は FigClass クラスのインスタンス (id = 1675174935) に対する呼び出しだとわかります.<br>
  75.                 この FigClass クラスのインスタンス (id = 1675174935) がどこから来たのかを確認していきます.<br>
  76.                 まずは, 呼び出しスタック上で1つ呼び出し元をクリックしてください.<br>
  77.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_01.png" class = "threeQuartersSize"></div>
  78.             </p>
  79.             <p class = "explanation">
  80.                 現在は, 呼び出し元である FigNode クラスの removeFromDiagram() メソッドを見ています.<br>
  81.                 ここで, 変数ビューを見ると, このメソッドも同一の FigClass クラスのインスタンス (id = 1675174935) に対して呼び出されていることがわかります.<br>
  82.                 これを確認したら, 呼び出しスタック上でさらに1つ呼び出し元をクリックしてください.<br>
  83.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_02.png" class = "threeQuartersSize"></div>
  84.             </p>
  85.             <p class = "explanation">
  86.                 現在は, 呼び出し元である FigNodeModelElement クラスの removeFromDiagramImpl() メソッドを見ています.<br>
  87.                 ここで, 変数ビューを見ると, このメソッドも先ほどと同様に FigClass クラスのインスタンス (id = 1675174935) によって呼び出されていることがわかります.<br>
  88.                 これを確認したら, 呼び出しスタック上でさらに1つ呼び出し元をクリックしてください.
  89.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_03.png" class = "threeQuartersSize"></div>
  90.             </p>
  91.             <p class = "explanation">
  92.                 現在は, 呼び出し元である FigNodeModelElement クラスの removeFromDiagram() メソッドを見ています.<br>
  93.                 ここで, ソースコードを見ると, ローカル変数 delegate が参照しているインスタンスに対して removeFromDiagramImpl() メソッドが呼び出されていることがわかります.<br>
  94.                 ここでは, ローカル変数 delegate の値がどこから来たのかを見ていきます.<br>
  95.                 FigNodeModelElement クラスの removeFromDiagram() メソッドの1965行目にブレークポイントを入れ, <br>
  96.                 ブレークポイントビュー上の「ブレークポイントをEclipseから取り入れる」アイコンを押してください.<br>
  97.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_04.png" class = "threeQuartersSize"></div>
  98.             </p>
  99.             <p class = "explanation">
  100.                 ここで, いったんデバッグ実行を終了してから, 再びデバッグ実行してください.<br>
  101.                 すると, FigNodeModelElement クラスの removeFromDiagram() メソッドの1965行目で実行が止まります.<br>
  102.                 ここで, 最初にブレークポイントを入れた地点である Fig クラスの removeFromDiagram() メソッドの743行目に実行が進むかどうかを確認します.<br>
  103.                 再開ボタンを1回押すと, 実際に Fig クラスの removeFromDiagram() メソッドの743行目に実行時点が進むことが確認できます.<br>
  104.                 
  105.             </p>
  106.             <p class = "explanation">
  107.                 先ほどの確認が終わったら, いったんデバッグ実行を終了して, 再びデバッグ実行してください.<br>
  108.                 FigClassModelElement クラスの removeFromDiagram() メソッドの1965行目に止まります.<br>
  109.                 ここでは, ステップインを2回押して getRemoveDelegate() メソッドの中に入ってください.
  110.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_05.png" class = "threeQuartersSize"></div>
  111.             </p>
  112.             <p class = "explanation">
  113.                 FigNodeModelElement クラスの getRemoveDelegate() メソッドに入りました.<br>
  114.                 ここで, ソースコードを見ると, このメソッドでは return this で自分自身が戻り値として返されていることがわかります.<br>
  115.                 これを確認したら, 呼び出しスタック上で1つ呼び出し元をクリックしてください.
  116.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_06.png" class = "threeQuartersSize"></div>
  117.             </p>
  118.             <p class = "explanation">
  119.                 現在は, 呼び出し元である FigNodeModelElement クラスの removeFromDiagram() メソッドを見ています.<br>
  120.                 ここで, 呼び出しスタック上でさらに1つ呼び出し元をクリックしてください.
  121.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_07.png" class = "threeQuartersSize"></div>
  122.             </p>
  123.             <p class = "explanation">
  124.                 現在は, 呼び出し元である ActionRemoveFromDiagram() クラスの actionPerformed(ActionEvent) メソッドの89行目を見ています.<br>
  125.                 ここで, 変数ビュー上で 「呼び出し前」を開いて, レシーバのIDを確認してください.<br>
  126.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_08.png" class = "threeQuartersSize"></div>
  127.             </p>
  128.             <p class = "explanation">
  129.                 ソースコードを見ると, ローカル変数 f の値は, 86行目の拡張for文で ローカル変数 figs から取得した要素を代入していることが確認できます.<br>
  130.                 ここからは, ローカル変数 figs の値がどこから来たのかを見ていきます.<br>
  131.                 すぐ上にある85行目にブレークポイントを入れてから, ブレークポイントビュー上の「ブレークポイントをEclipseから取り入れる」アイコンを押してください.
  132.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_09.png" class = "threeQuartersSize"></div>
  133.             </p>
  134.             <p class = "explanation">
  135.                 いったんデバッグ実行を終了してから, 再びデバッグ実行してください.<br>
  136.                 すると, まずは ActionRemoveFromDiagram() クラスの actionPerformed(ActionEvent) メソッドの85行目に止まります.<br>
  137.                 ここで, 先ほどブレークポイントを入れていた箇所に実行が進むかどうかを見ていきます.<br>
  138.                 再開ボタンを1回押すと, FigNodeModelElement クラスの removeFromDiagram() メソッドの1965行目に現在の実行時点が移ることが確認できます.<br>
  139.                 もう一度再開ボタンを押すと, 今度は Fig クラスの removeFromDiagram() メソッドの743行目に現在の実行時点が移ることが確認できます.<br>
  140.             </p>
  141.             <p class = "explanation">
  142.                 いったんデバッグ実行を終了してから, 再びデバッグ実行してください.<br>
  143.                 ActionRemoveFromDiagram() クラスの actionPerformed(ActionEvent) メソッドの85行目に止まります.<br>
  144.                 ソースコードを見ると, ここでは ローカル変数 ce で参照されているインスタンスに対して getSelectionManager() メソッドが呼び出され, <br>
  145.                 その戻り値に対して getFigs() メソッドが呼び出され, getFigs() メソッドの戻り値として返されたリストが, ローカル変数 figs に代入されていることが確認できます.<br>
  146.                 ここで, まずはステップインを1回押して Editor クラスの getSelectionManager() メソッドの中に入ってください.
  147.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_10.png" class = "threeQuartersSize"></div>
  148.             </p>
  149.             <p class = "explanation">
  150.                 Editor クラスの getSelectionManager() メソッドに入りました.<br>
  151.                 ここで, 変数ビュー上の this を開くと, Editor クラスのインスタンス (id = 371019845) が<br>
  152.                 フィールド _selectionManager として SelectionManager クラスのインスタンス (id = 4310438) を参照していることがわかります.<br>
  153.                 これを確認したら, ステップリターンを1回押して呼び出し元に戻ってください.
  154.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_11.png" class = "threeQuartersSize"></div>
  155.             </p>
  156.             <p class = "explanation">
  157.                 呼び出し元である ActionRemoveFromDiagram クラスの actionPerformed(ActionEvent) メソッドに戻ってきました.<br>
  158.                 ここでは, ステップイン1回押して, getSelectionManager クラスの getFigs() メソッドの中に入ってください.
  159.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_12.png" class = "threeQuartersSize"></div>
  160.             </p>
  161.             <p class = "explanation">
  162.                 SelectionManager クラスの getFigs() メソッドに入りました.<br>
  163.                 ソースコードを見ると, 360行目ではローカル変数 figs を生成し, それが366行目では return figs で戻り値として返されていることが確認できます.<br>
  164.                 ここで, ステップオーバーを2回押して363行目に進んでください.
  165.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_13.png" class = "threeQuartersSize"></div>
  166.             </p>
  167.             <p class = "explanation">
  168.                 現在は SelectionManager クラスの getFigs() メソッドの363行目にいます.<br>
  169.                 ソースコードを見ると, フィールド selections から get() メソッドで取り出した要素に対して,<br>
  170.                 さらに getContent() メソッドを呼び出し, その戻り値をローカル変数 figs に追加していることが確認できます.<br>
  171.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_14.png" class = "threeQuartersSize"></div>
  172.             </p>
  173.             <p class = "explanation">
  174.                 ここで, まずはステップインを3回押してください.<br>
  175.                 すると, selections に対する get() メソッドの実行が終了し, その戻り値に対して getContent() メソッドを呼び出す直前の時点にまで現在の実行時点が進みます.<br>
  176.                 ここで, ステップインを1回押して, SelectionClass クラスの getContent() メソッドの中に入ってください.
  177.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_15.png" class = "threeQuartersSize"></div>
  178.             </p>
  179.             <p class = "explanation">
  180.                 SelectionClass クラスの getContent() メソッドの中に入りました.<br>
  181.                 ここで, 変数ビュー上の this を開くと SelectionClass クラスのインスタンス (id = 1672744985) が<br>
  182.                 フィールド content として FigClass クラスのインスタンス (id = 1675174935) を参照していることがわかります.<br>
  183.                 これを確認したら, ステップリターンを1回押して呼び出し元に戻ってください.
  184.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_16.png" class = "threeQuartersSize"></div>
  185.             </p>
  186.             <p class = "explanation">
  187.                 SelectionManager クラスの getFigs() メソッドに戻ってきました.<br>
  188.                 ここで, 変数ビュー上の「呼び出し前」を開いて引数のIDを確認してください.<br>
  189.                 すると, 先ほど取得してきた FigClass クラスのインスタンス (id = 1675174935) をローカル変数 figs に追加することがわかります.<br>
  190.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_17.png" class = "threeQuartersSize"></div>
  191.                 
  192.             </p>
  193.             <p class = "explanation">
  194.                 ここで, ステップオーバーを1回押して, ローカル変数 figs にそれ以上何も追加されずに<br>
  195.                 そのまま366行目の return figs まで進むことを確認してください.<br>
  196.                 これを確認したら, ステップオーバーを1回押して呼び出し元に戻ってください.
  197.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_18.png" class = "threeQuartersSize"></div>
  198.             </p>
  199.             <p class = "explanation">
  200.                 呼び出し元である ActionRemoveFromDiagram クラスの actionPerformed(ActionEvent) メソッドに戻ってきました.<br>
  201.                 ここで, ステップオーバーを1回押して, 87行目に進んでください.<br>
  202.                 そのあと, 変数ビュー上の「呼び出し後」を開いて戻り値のIDを確認してください.<br>
  203.                 すると, 先ほどの FigClass クラスのインスタンス (id = 1675174935) を取得していることがわかります.<br>
  204.                 これを確認したら, ステップオーバーを2回押して89行目に進んでください.
  205.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_19.png" class = "threeQuartersSize"></div>
  206.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_20.png" class = "threeQuartersSize"></div>
  207.             </p>
  208.             <p class = "explanation">
  209.                 現在は ActionRemoveFromDiagram クラスの actionPerformed(ActionEvent) メソッドの89行目にいます.<br>
  210.                 ここで, ステップインを1回押すと, 変数ビュー上に「呼び出し前」が新たに表示されます.<br>
  211.                 この「呼び出し前」を開いてレシーバのIDを確認してください.<br>
  212.                 すると, ここでは, 先ほどの FigClass クラスのインスタンス (id = 1675174935) に対して removeFromDiagram() メソッドを呼び出していることがわかります.<br>
  213.                 これを確認したら, ステップインをもう1回押して FigClass クラスの removeFromDiagram() メソッドの中に入ってください.
  214.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_21.png" class = "threeQuartersSize"></div>
  215.             </p>
  216.             <p class = "explanation">
  217.                 FigClass クラスの removeFromDiagram() メソッドに入りました.<br>
  218.                 ここでは, 変数ビューを見て this の ID を確認してください.<br>
  219.                 これを確認したら, 呼び出しスタック上で1つ呼び出し元をクリックしてください.
  220.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_22.png" class = "threeQuartersSize"></div>
  221.             </p>
  222.             <p class = "explanation">
  223.                 今までの結果から, FigClass クラスのインスタンス (id = 1675174935) に関連するオブジェクトについて, 以下のことがわかりました.<br>
  224.                 <ol>
  225.                     <li>FigClass クラスのインスタンス (id = 1675174935) は SelectionClass クラスのインスタンス (id = 1672744985) が参照している. </li>
  226.                     <li>SelectionClass クラスのインスタンス (id = 1672744985) は SelectionManager クラスのインスタンス (id = 4310438) が参照している.</li>
  227.                     <li>SelectionManager クラスのインスタンス (id = 4310438) は Editor クラスのインスタンス (id = 371019845) が参照している.</li>
  228.                 </ol>
  229.                 ここからは, Editor クラスのインスタンス (id = 371019845) について見ていきます.<br>
  230.                 Editor クラスのインスタンスは, 85行目でローカル変数 ce の値として参照されていることがわかっています.<br>
  231.                 したがって, ここでは, ローカル変数 ce の値がどこから来たのかを探していきます.<br>
  232.                 すぐ上の83行目にブレークポイントを入れてから, ブレークポイントビュー上の「ブレークポイントをEclipseから取り入れる」アイコンを押してください.
  233.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_23.png" class = "threeQuartersSize"></div>
  234.             </p>
  235.             <p class = "explanation">
  236.                 いったんデバッグ実行を終了してから, 再びデバッグ実行してください.<br>
  237.                 すると, まずは ActionRemoveFromDiagram クラスの actionPerformed() メソッドの83行目に止まることが確認できます.<br>
  238.                 この状態で再開ボタンを押していくと, 現在の実行時点が 85行目 → 1965行目 → 743行目と移り変わることを確認してください.
  239.             </p>
  240.             <p class = "explanation">
  241.                 先ほどの流れが確認できたら, いったんデバッグ実行を終了してから, 再びデバッグ実行してください.<br>
  242.                 ActionRemoveFromDiagram クラスの actionPerformed() メソッドの83行目に止まっています.<br>
  243.                 この83行目では, Globals クラスの static メソッドである curEditor() メソッドが呼び出され, <br>
  244.                 その戻り値がローカル変数 ce に代入されていることが確認できます.<br>
  245.                 ここで, ステップインを2回押してこのメソッドの中に入ってください.
  246.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_24.png" class = "threeQuartersSize"></div>
  247.             </p>
  248.             <p class = "explanation">
  249.                 Globals クラスの static メソッドである curEditor() メソッドに入りました.<br>
  250.                 ここで, ソースコードを見ると, Globals クラスが static フィールド _curEditor として Editor クラスのインスタンスを参照していることがわかります.<br>
  251.                 これを確認したら, 呼び出しスタック上で1つ呼び出し元をクリックしてください.
  252.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_25.png" class = "threeQuartersSize"></div>
  253.             </p>
  254.             <p class = "explanation">
  255.                 現在は 呼び出し元である ActionRemoveFromDiagram クラスの actionPerformed() メソッドを見ています.<br>
  256.                 ここで, 課題A1は終了です. <font color="red">時間計測を終了</font>してください.
  257.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_26.png" class = "threeQuartersSize"></div>
  258.             </p>
  259.         </p>
  260.         <hr>
  261.         <p>
  262.             課題A1の機能理解が終了しましたら, 以下のアンケートにお答えください.
  263.             <div><a href = "https://docs.google.com/forms/d/e/1FAIpQLSdp_hfXk85Y6t7vCVZugrx89BmcpHQ59BUflu8XtgIzA-35PA/viewform" target = "_blank">アンケート回答</a></div>           
  264.         </p>
  265.         <a href="ArgoUML1_Forward_Delta.html">次へ</a>
  266.     </body>
  267. </html>