Fork: 0
nitta-lab / TraceDebuggerExperiment
Transfer to URL with SHA Find file
Newer
Older
TraceDebuggerExperiment / courseB / ArgoUML_Reverse / problem1 / ArgoUML1_Reverse.html
r-isitani on 25 Sep 2020 19 KB Trelloのチケットの作業項目3つと日本語版の画像の差し替えを行った。
Raw Blame History 
  1. <!DOCTYPE HTML>
  2. <html lang = "ja">
  3.     <head>
  4.         <title>課題B3 (機能理解)</title>
  5.         <meta charset = "UTF-8">
  6.         <link rel = "stylesheet" type = "text/css" href = "../../../prettify.css">
  7.     </head>
  8.     <body>
  9.         <h1>課題B3 (機能理解)</h1>
  10.         <p>
  11.             課題B3では, ArgoUMLの図形の削除機能について見ていきます.<br>
  12.             具体的には,
  13.             <blockquote>
  14.                 「選択された図形がArgoUMLのシステム内部でどのように管理され, 削除機能の実行によってどのように取り出されて, 削除されるか?」
  15.             </blockquote>
  16.             ArgoUMLはオープンソースのUMLモデリングツールで, Javaで書かれております.<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.                 <!--
  26.                 <li class = "explanation">
  27.                     デスクトップのEclipseを起動し, 指定されたワークスペースを開いてください.
  28.                     <div class = "image"><img src = "./images/images_problem1_pre/ArgoUML_1_pre_01.png" class = "threeQuartersSize"></div>
  29.                 </li>
  30.                 -->
  31.                 <li class = "explanation">
  32.                     ワークスペース中にあるGEF-0.13.7プロジェクトを選択し, メニューバーの 検索 → Java で Fig というタイプの宣言を検索してください.
  33.                     <div class = "image"><img src = "./images/images_problem1_pre/SearchJava_ArgoUML_AWS_pre.png" class = "threeQuartersSize"></div>
  34.                     <div class = "image"><img src = "./images/images_problem1_pre/SearchJava_ArgoUML_AWS.png" class = "halfSize"></div>
  35.                 </li>
  36.                 <li class = "explanation">
  37.                     Figクラスのソースファイルを開いて743行目 (Fig#removeFromDiagram()) にブレークポイントを入れてください.
  38.                     <div class = "image"><img src = "./images/images_problem1_pre/Breakpoint_ArgoUML_AWS.png" class = "threeQuartersSize"></div>
  39.                 </li>
  40.                 <li class = "explanation">
  41.                     メニューバーの ウィンドウ → パースペクティブ → パースペクティブを開く → その他 → トレースデバッガ(逆方向) でトレースデバッガのパースペクティブを開いてください.
  42.                     <div class = "image"><img src = "./images/images_problem1_pre/OpenPerspective_ArgoUML_AWS.png" class = "threeQuartersSize"></div>
  43.                     <div class = "image"><img src = "./images/images_problem1_pre/OpenPerspective_Reverse_AWS.png" class = "halfSize"></div>
  44.                 </li>
  45.                 <li class = "explanation">
  46.                     開いたトレースデバッガのパースペクティブ右上のブレークポイントビュー上にあるフォルダアイコン(左から1番目)を<br>
  47.                     クリックしてトレースファイル (C:\Users\userXX\runtime-EclipseApplication\argouml\ArgoUMLBenchMarkWithMoreStandardClasses.trace) を開いてください.
  48.                     <div class = "image"><img src = "./images/images_problem1_pre/ArgoUML_1_pre_07.png" class = "threeQuartersSize"></div>
  49.                     <div class = "image"><img src = "./images/images_problem1_pre/ArgoUML_1_pre_08.png" class = "halfSize"></div>
  50.                 </li>
  51.                 <li class = "explanation">
  52.                     トレースファイルの読み込みが終わるまで待ってから, ブレークポイントビュー上にある「ブレークポイントをEclipseから取り入れる」アイコン(左から2番目)を<br>
  53.                     クリックしてトレースデバッガ用のブレークポイントを作成してください.
  54.                     <div class = "image"><img src = "./images/images_problem1_pre/ArgoUML_1_pre_09.png" class = "threeQuartersSize"></div>
  55.                 </li>
  56.                 <li class = "explanation">
  57.                     ブレークポイントビュー上にあるデバッグアイコン(左から3番目)をクリックしてください.<br>
  58.                     トレースデバッガによるデバッグ実行が起動し, ブレークポイントを入れた位置の行が選択された状態で一時停止します.
  59.                     <div class = "image"><img src = "./images/images_problem1_pre/ArgoUML_1_pre_10.png" class = "threeQuartersSize"></div>
  60.                 </li>
  61.             </ol>
  62.         </p>
  63.  
  64.         <hr>
  65.         <h2>機能理解</h2>
  66.         <p>
  67.             Fig クラスはグラフィックエディタ上の図形を表すGEFの内部のクラスです.<br>
  68.             また, FigClass クラスはクラス図上に配置された「クラス」を表す ArgoUML のクラスで, Fig クラスの子孫クラスにあたります.<br>
  69.             ブレークポイントを置いた行は、図形を削除するたびに実行されます.
  70.         </p>
  71.  
  72.         <p>
  73.             <p class = "explanation">
  74.                 先ほどの実行手順にしたがって進めていくと, 下図のように Fig クラスの removeFromDiagram() メソッド内の743行目で一時停止している状態になっているはずです.<br>
  75.                 この状態になっていれば, <font color="red">ここから時間計測を開始</font>してください. 時間計測はできる限り，1分以内の単位での計測をお願いします.<br>
  76.                 ここで, 変数ビューを確認すると, このメソッド実行は FigClass クラスのインスタンス (id = 1675174935) に対する呼び出しだとわかります.<br>
  77.                 この FigClass クラスのインスタンス (id = 1675174935) がどこから来たのかを確認していきます.<br>
  78.                 まずは呼び出しスタック上で1つ呼び出し元をクリックしてください.
  79.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_01.png" class = "threeQuartersSize"></div>
  80.             </p>
  81.             <p class = "explanation">
  82.                 現在は, 呼び出し元である FigNode クラスの removeFromDiagram() メソッドを見ています.<br>
  83.                 ここで, 変数ビューを見ると, このメソッドも同一の FigClass クラスのインスタンス (id = 1675174935) に対して呼び出されていることがわかります.<br>
  84.                 これを確認したら, 呼び出しスタック上でさらに1つ呼び出し元をクリックしてください.<br>
  85.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_02.png" class = "threeQuartersSize"></div>
  86.             </p>
  87.             <p class = "explanation">
  88.                 現在は, 呼び出し元である FigNodeModelElement クラスの removeFromDiagramImpl() メソッドを見ています.<br>
  89.                 ここで, 変数ビューを見ると, このメソッドも先ほどと同様に FigClass クラスのインスタンス (id = 1675174935) によって呼び出されていることがわかります.<br>
  90.                 これを確認したら, 呼び出しスタック上でさらに1つ呼び出し元をクリックしてください.
  91.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_03.png" class = "threeQuartersSize"></div>
  92.             </p>
  93.             <p class = "explanation">
  94.                 現在は, 呼び出し元である FigNodeModelElement クラスの removeFromDiagram() メソッドを見ています.<br>
  95.                 ここで, ソースコードを見ると, ローカル変数 delegate が参照しているインスタンスに対して removeFromDiagramImpl() メソッドが呼び出されていることがわかります.<br>
  96.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_04.png" class = "threeQuartersSize"></div>
  97.             </p>
  98.             <p class = "explanation">
  99.                 このローカル変数 delegate で参照されるインスタンスはどこから来たのかを確認します.<br>
  100.                 ソースコードを見ると, 1965行目に delegate への代入文があることがわかるので,<br>
  101.                 ステップバックオーバーを1回押して, その代入文の実行直前の時点まで戻ってください.<br>
  102.                 1965行目の delegate への代入文の時点まで戻ったら, ステップインを1回押して getRemoveDelegate() メソッドの中に前から入ってください.<br>
  103.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_05.png" class = "threeQuartersSize"></div>
  104.             </p>
  105.             <p class = "explanation">
  106.                 FigNodeModelElement クラスの getRemoveDelegate() メソッドに入りました.<br>
  107.                 ここで, ソースコードを見ると, このメソッドでは return this で自分自身を戻り値として返していることが確認できます.<br>
  108.                 これを確認したら, ステップバックリターンを1回押して呼び出し元へと戻ってください.
  109.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_06.png" class = "threeQuartersSize"></div>
  110.             </p>
  111.             <p class = "explanation">
  112.                 呼び出し元に戻ると, 先ほどの return this の値が delegate に代入されていることがわかります.<br>
  113.                 ここで, 再びステップバックリターンを1回押してさらに呼び出し元に戻ってください.
  114.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_07.png" class = "threeQuartersSize"></div>
  115.             </p>
  116.             <p class = "explanation">
  117.                 呼び出し元である ActionRemoveFromDiagram クラスの actionPerformed() メソッドの89行目に戻ってきました.<br>
  118.                 ここで, 「トレースデバッガ」パースペクティブの右下にある「実行時点の登録」ビューの追加ボタンをクリックしてください.<br>
  119.                 そうすると, 現在の実行時点がこのビュー上に登録されます.
  120.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_08.png" class = "threeQuartersSize"></div>
  121.             </p>
  122.             <p class = "explanation">
  123.                 89行目では,　FigClass クラスのインスタンス (id = 1675174935) のメソッドを呼び出していることがわかります.<br>
  124.                 この FigClass クラスのインスタンスがどこから来たのかを確認するために, ステップバックオーバーを3回押して, 86行目の拡張for文まで戻ってください.<br>
  125.                 ここで FigClass クラスのインスタンスは Figクラスを参照するリストであるローカル変数 figs から拡張for文で取得されてきたことがわかります.<br>
  126.                 ここからは, FigClass クラスのインスタンスを参照していた figs がどこから来たのかと, figs にそのインスタンスがどこで追加されたのかを見ていきます.<br>
  127.                 まずは, ステップバックインを3回押して, 85行目の getFigs() メソッドの中に後ろから入ってください.
  128.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_09.png" class = "threeQuartersSize"></div>
  129.             </p>
  130.             <p class = "explanation">
  131.                 SelectionManager クラスの getFigs() メソッドに後ろから入りました.<br>
  132.                 ここではステップバックオーバーを1回押してください.<br>
  133.                 すると, 363行目にある Vector クラスの addElement(Object) メソッドの呼び出し前の時点に来ます.<br>
  134.                 ここで, 変数ビュー上にある「呼び出し前」を開くと, 引数として FigClass クラスのインスタンスが渡されていることがわかります.<br>
  135.                 また, この時点で「実行時点の登録」ビューの追加ボタンをクリックして実行時点の登録を行ってください.<br>
  136.                 Vector クラスの addElement(Object) メソッドの引数には Selection クラスの getContent() メソッドの戻り値が渡されています.<br>
  137.                 getContent() メソッドの戻り値を確認するために, ステップバックインを1回押して, このメソッドの中に後ろから入ってください.<br>
  138.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_10.png" class = "threeQuartersSize"></div>
  139.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_11.png" class = "threeQuartersSize"></div>
  140.             </p>
  141.             <p class = "explanation">
  142.                 Selection クラスの getContent() メソッドに入りました.<br>
  143.                 ここで, 変数ビュー上の this を開くと, Selection クラスの子孫クラスである SelectionClass クラスのインスタンスが<br>
  144.                 フィールド content として FigClass クラスのインスタンス (id = 1675174935) を参照していることがわかります.<br>
  145.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_12.png" class = "threeQuartersSize"></div>
  146.             </p>
  147.             <p class = "explanation">
  148.                 先ほどの結果から, FigClass クラスのインスタンス (id = 1675174935) は SelectionClass クラスのインスタンス (id = 1672744985) が参照していることがわかりました.<br>
  149.                 次は, この SelectionClass クラスのインスタンスがどこから来たのかを見ていきます.<br>
  150.                 呼び出しスタック上で呼び出し元である SelectionManger クラスの getFigs() メソッドをクリックしてください.<br>
  151.                 ここで, ソースコードを見ると, SelectionClass クラスのインスタンスは selections から取得していることが確認でき,<br>
  152.                 それは SelectionManager クラスのインスタンス (id = 4310438) がフィールドとして参照していることがわかります.<br>
  153.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_13.png" class = "threeQuartersSize"></div>
  154.             </p>
  155.             <p class = "explanation">
  156.                 先ほどの結果から, SelectionClass クラスのインスタンス (id = 1672744985) は<br>
  157.                 SelectionManager クラスのインスタンス (id = 4310438) が参照していることがわかりました.<br>
  158.                 次は, この SelectionManager クラスのインスタンスがどこから来たのかを見ていきます.<br>
  159.                 呼び出しスタック上でさらに呼び出し元である ActionRemoveFromDiagram クラスの actionPerformed(ActionEvent) メソッドをクリックしてください.<br>
  160.                 ここでは, ステップバックインを1回押して Editor クラスの getSelectionManager() メソッドの中に後ろから入ってください.<br>
  161.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_14.png" class = "threeQuartersSize"></div>
  162.             </p>
  163.             <p class = "explanation">
  164.                 Editor クラスの getSelectionManager() メソッドに入りました.<br>
  165.                 ここで, 変数ビュー上の this を開くと, この Editor クラスがフィールド _selectionManager として<br>
  166.                 SelectionManager クラスのインスタンス (id = 4310438) を参照していることがわかります.
  167.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_15.png" class = "threeQuartersSize"></div>
  168.             </p>
  169.             <p class = "explanation">
  170.                 先ほどの結果から, SelectionManager クラスのインスタンス (id = 431048) は<br>
  171.                 Editor クラスのインスタンス (id = 371019845) が参照していることがわかりました.<br>
  172.                 次は, この Editor クラスのインスタンスがどこから来たのかを見ていきます.<br>
  173.                 呼び出しスタック上で呼び出し元をクリックしてください.
  174.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_16.png" class = "threeQuartersSize"></div>
  175.             </p>
  176.             <p class = "explanation">
  177.                 現在は, ActionRemoveFromDiagram クラスの actionPerformed(ActionEvent) メソッドの85行目を見ています.<br>
  178.                 ここで, ソースコードを見ると, この Editor はローカル変数 ce に代入されている値だとわかります.<br>
  179.                 ここでは, このローカル変数 ce の値がどこから来たのかを見ていきます.<br>
  180.                 ステップバックオーバーを2回押して83行目まで戻ってください.<br>
  181.                 83行目ではローカル変数 ce に Globals クラスの curEditor() メソッドの戻り値が代入されています.<br>
  182.                 ステップインを1回押してこのメソッドの中に前から入ってください.<br>
  183.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_17.png" class = "threeQuartersSize"></div>
  184.             </p>
  185.             <p class = "explanation">
  186.                 Globals クラスの curEditor() メソッドに入りました.<br>
  187.                 ここで, ソースコードを見ると, Globalsクラスが static フィールド _curEditor として<br>
  188.                 Editor クラスのインスタンス (id = 371019845) を参照していることがわかります.<br>
  189.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_18.png" class = "threeQuartersSize"></div>
  190.             </p>
  191.             <p class = "explanation">
  192.                 先ほどの結果から, Editor クラスのインスタンス (id = 371019845) は Globals クラスの static フィールド _curEditor から取得していることがわかりました.<br>
  193.                 呼び出しスタック上で呼び出し元をクリックしてください.<br>
  194.                 ここで, 課題B3は終了です. <font color="red">時間計測を終了</font>してください.
  195.                 <div class = "image"><img src = "./images/images_problem1/ArgoUML_1_19.png" class = "threeQuartersSize"></div>
  196.             </p>
  197.             <hr>
  198.             <p>
  199.                 課題B3の機能理解が終了しましたら, 以下のアンケートにお答えください.
  200.                 <div><a href = "https://docs.google.com/forms/d/e/1FAIpQLSfNGfwwFa7A4PHtEn-gEXgNYxG0EoEpyN_V2KjP3tpOAlScWg/viewform" target = "_blank">アンケート回答</a></div>           
  201.             </p>
  202.         <a href="ArgoUML1_Reverse_Delta.html">次へ</a>
  203.         </p>
  204.     </body>
  205. </html>