Fork: 0
nitta-lab / TraceDebuggerExperiment
Transfer to URL with SHA Find file
Newer
Older
TraceDebuggerExperiment / courseB / ArgoUML_Reverse / problem2 / ArgoUML2_Reverse.html
r-isitani on 25 Sep 2020 21 KB ジャンプやデルタ抽出に関わる「呼び出し前」や「呼び出し後」には、そのメソッド名も明記するようにした。
Raw Blame History 
  1. <!DOCTYPE HTML>
  2. <html lang = "ja">
  3.     <head>
  4.         <title>課題B4 (機能理解)</title>
  5.         <meta charset = "UTF-8">
  6.         <link rel = "stylesheet" type = "text/css" href = "../../../prettify.css">
  7.     </head>
  8.     <body>
  9.         <h1>課題B4 (機能理解)</h1>
  10.         <p>
  11.             課題B4では, 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.             <p class = "explanation">
  25.                 課題B3が終了した直後は下図のような状態になっているはずです.<br>
  26.                 <div class = "image"><img src = "./images/images_problem2_pre/ArgoUML_2_pre_00_1.png" class = "threeQuartersSize"></div>
  27.             </p>
  28.             <p class = "explanation">
  29.                 ここで, ステップバックオーバーを1回押してから, ステップオーバーを1回押してください.<br>
  30.                 すると, 下図のように363行目に入った直後の状態になるので, そこから続けてステップネクストを3回押してください.
  31.                 <div class = "image"><img src = "./images/images_problem2_pre/ArgoUML_2_pre_03.png" class = "threeQuartersSize"></div>
  32.             </p>
  33.             <p class = "explanation">
  34.                 <!--ステップネクストを3回押すと, selections の get() メソッドの呼び出し直後に実行時点が変わっているはずです.<br>-->
  35.                 ここで, 変数ビュー上の「呼び出し後」のメソッド名が List.get(int) であることを確認してください.<br>
  36.                 それを確認したら, 変数ビュー上にある「呼び出し後」を開き, 戻り値を右クリックしてください.<br>
  37.                 右クリックするとポップアップメニューが現れるので, 「オブジェクトの追加時点に飛ぶ」を選択してください.
  38.                 <div class = "image"><img src = "./images/images_problem2_pre/ArgoUML_2_pre_04.png" class = "threeQuartersSize"></div>
  39.             </p>
  40.             <p class = "explanation">
  41.                 「オブジェクトの追加時点に飛ぶ」を選択すると, selections に この SelectionClass クラスが追加された時点である<br>
  42.                 SelectionManager クラスの addFig(Fig) メソッドの130行目にまで現在の実行時点が遡ります.<br>
  43.                 下図の状態になっていれば前準備は終了です.
  44.                 <div class = "image"><img src = "./images/images_problem2_pre/ArgoUML_2_pre_05.png" class = "threeQuartersSize"></div>
  45.             </p>
  46.         </p>
  47.  
  48.         <hr>
  49.         <h2>機能理解</h2>
  50.         <p>
  51.             Fig クラスはグラフィックエディタ上の図形を表すGEFの内部のクラスです.<br>
  52.             また, FigClass クラスはクラス図上に配置された「クラス」を表す ArgoUML のクラスで, Fig クラスの子孫クラスにあたります.<br>
  53.             現在の実行時点の行は、図形を選択するたびに実行されます.
  54.         </p>
  55.  
  56.         <p>
  57.             <p class = "explanation">
  58.                 先ほどの前準備にしたがって進めていくと, 下図のように SelectionManager クラスの addFig(Fig) メソッド内の130行目で一時停止している状態になっているはずです.<br>
  59.                 この状態になっていれば, <font color="red">ここから時間計測を開始</font>してください. 時間計測はできる限り，1分以内の単位での計測をお願いします.<br>
  60.                 まずは,「実行時点の登録」ビューの追加ボタンをクリックして実行時点の登録を行ってください.<br>
  61.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_01.png" class = "threeQuartersSize"></div>
  62.             </p>
  63.             <p class = "explanation">
  64.                 ここで, ソースコードと変数ビューを見ると, SelectionManager クラスのインスタンス (id = 4310438) が参照するフィールド selections へは<br>
  65.                 makeSelectionFor(Fig) メソッドの戻り値である SelectionClass クラスのインスタンス (id = 1672744985) が追加されていることがわかります.<br>
  66.                 課題B4では, このオブジェクトの追加に関わっている SelectionManager クラスのインスタンスと SelectionClass クラスのインスタンスについて見ていきます.<br>
  67.                 まずは, SelectioClass クラスのインスタンスの方がどこから来たのかを見ていくために, <br>
  68.                 ステップバックインを1回押して SelectionManager クラスの makeSelectionFor(Fig) メソッドの中に後ろから入ってください.
  69.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_02.png" class = "threeQuartersSize"></div>
  70.             </p>
  71.             <p class = "explanation">
  72.                 SelectionManager クラスの makeSelectionFor(Fig) メソッドの1131行目に入ってきました.<br>
  73.                 ソースコードを見ると, return customSelection でローカル変数 customSelection が参照する値が返されていることがわかります.<br>
  74.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_03.png" class = "threeQuartersSize"></div>
  75.             </p>
  76.             <p class = "explanation">
  77.                 この値がどこから来ているのかを見るために, ステップバックオーバーを1回押して1129行目に戻ってください.<br>
  78.                 1129行目では 仮引数 f で参照されているインスタンスに対して makeSelection() メソッドが呼び出され,<br>
  79.                 その戻り値がローカル変数 customSelection に代入されていることが確認できます.<br>
  80.                 ここで, ステップインを1回押してこのメソッドの中に前から入ってください.<br>
  81.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_04.png" class = "threeQuartersSize"></div>
  82.             </p>
  83.             <p class = "explanation">
  84.                 FigClass クラスの makeSelection() メソッドに入りました.<br>
  85.                 ここでは new SelectionClass(this) で 自分自身を引数に渡して SelectionClass クラスが生成されており,<br>
  86.                 生成された SelectionClass クラスのインスタンスは 引数で渡された FigClass クラスのインスタンス (id = 1675174935) を参照していることがわかります.<br>
  87.                 これを確認したら, 呼び出しスタック上で2つ呼び出し元である SelectionManager クラスの addFig(Fig) メソッドをクリックしてください.
  88.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_05.png" class = "threeQuartersSize"></div>
  89.             </p>
  90.             <p class = "explanation">
  91.                 現在は SelectionManager クラスの addFig(Fig) メソッドの130行目を見ています.<br>
  92.                 ここで, ソースコードを見ると, 先ほどの makeSelectionFor(Fig) メソッドには, 仮引数 f で参照されている<br>
  93.                 FigClass クラスのインスタンス (id = 1675174935) が渡されていることが確認できます.<br>
  94.                 ここからは, この FigClass クラスのインスタンス (id = 1675174935) がどこから来たのかを見ていきます.<br>
  95.                 呼び出しスタック上で1つ呼び出し元である SelectionManager クラスの select(Fig) メソッドをクリックしてください.<br>
  96.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_06.png" class = "threeQuartersSize"></div>
  97.             </p>
  98.             <p class = "explanation">
  99.                 現在は 呼び出し元である SelectionManager クラスの select(Fig) メソッドの180行目を見ています.<br>
  100.                 ここで, ソースコードを見ると, 呼び出し先の addFig(Fig) メソッドには 仮引数 f の値が実引数として渡されていることが確認できます.<br>
  101.                 これを確認したら, 呼び出しスタック上でさらに1つ呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドをクリックしてください.
  102.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_07.png" class = "threeQuartersSize"></div>
  103.             </p>
  104.             <p class = "explanation">
  105.                 呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドの187行に戻ってきました.<br>
  106.                 ここで, ソースコードを見ると, 呼び出し先である SelectinoManager クラスの select(Fig) メソッドには<br>
  107.                 ローカル変数 underMouse の値が実引数として渡されていたことがわかります.<br>
  108.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_08.png" class = "threeQuartersSize"></div>
  109.             </p>
  110.             <p class = "explanation">
  111.                 この underMouse の値がどこから来たのかを見るために, ステップバックオーバーを8回押して163行目まで戻ってください.<br>
  112.                 163行目では, ローカル変数 underMouse が参照するインスタンスが FigGroup にキャストされたあと,<br>
  113.                 それに対して deepSelect(Rectangle) メソッドが呼び出され, その戻り値が改めて underMouse に代入されていることがわかります.<br>
  114.                 ここで, 戻り値がどのようになっているのかを確認するために, FigGroup クラスの deepSelect(Rectangle) メソッドの中に前から入ってください.<br>
  115.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_09.png" class = "threeQuartersSize"></div>
  116.             </p>
  117.             <p class = "explanation">
  118.                 FigGroup クラスの deepSelect(Rectangle) メソッドに入りました.<br>
  119.                 すると, deepSelect(Rectangle) メソッドの中では return this で自分自身を戻り値として返していることがわかります.<br>
  120.                 これを確認したら, ステップバックリターンを1回押して呼び出し元に戻ってください.
  121.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_10.png" class = "threeQuartersSize"></div>
  122.             </p>
  123.             <p class = "explanation">
  124.                 ModeSelect クラスの mousePressed(MouseEvent) メソッドの163行目に戻ってきました.<br>
  125.                 underMouse の値がどこから来ているのかを見るために, ステップバックオーバーを1回押して160行目に戻ってください.<br>
  126.                 160行目では Editor クラスの hit(Point) メソッドが呼び出され, その戻り値がローカル変数 underMouse に代入されていることが確認できます.<br>
  127.                 ここで, ステップインを1回押してこのメソッドの中に前から入ってください.
  128.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_11.png" class = "threeQuartersSize"></div>
  129.             </p>
  130.             <p class = "explanation">
  131.                 Editor クラスの hit(Point) メソッドに入りました.<br>
  132.                 ここでは, ステップオーバーを1回実行したあとに, ステップインを2回押して hit(Rectangle) メソッドの中に前から入ってください.
  133.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_12.png" class = "threeQuartersSize"></div>
  134.             </p>
  135.             <p class = "explanation">
  136.                 Editor クラスの hit(Rectangle) メソッドに入りました.<br>
  137.                 ここでは, ステップインを2回押して getLayerManager() メソッドの中に前から入ってください.<br>                
  138.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_13.png" class = "threeQuartersSize"></div>
  139.             </p>
  140.             <p class = "explanation">
  141.                 Editor クラスの getLayerManager() メソッドに入りました.<br>
  142.                 ここでは, return _layerManager で LayerManager クラスのインスタンスが返されていることが確認でき,<br>
  143.                 変数ビュー上の this を開くと, このEditor クラスのインスタンス (id = 371019845) がフィールド _layerManager として<br>
  144.                 LayerManager クラスのインスタンス (id = 1975264229) を参照していることがわかります.<br>
  145.                 これを確認したら, ステップリターンで呼び出し元に戻ってください.
  146.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_14.png" class = "threeQuartersSize"></div>
  147.             </p>
  148.             <p class = "explanation">
  149.                 Editor クラスの hit(Rectangle) メソッドに戻ってきました.<br>
  150.                 次は, ステップインで LayerManager クラスの hit(Rectangle) メソッドの中に前から入ってください.
  151.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_15.png" class = "threeQuartersSize"></div>
  152.             </p>
  153.             <p class = "explanation">
  154.                 LayerManager クラスの hit(Rectangle) メソッドの中に入りました.<br>
  155.                 ここで, 変数ビューを確認すると, この LayerManager クラスのインスタンス (id = 1975264229) は,<br>
  156.                 フィールド _activeLayer として LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) を参照していることがわかります.<br>
  157.                 また, ソースコードを見ると, このフィールド _activeLayer が参照しているインスタンスに対して hit(Rectangle) メソッドが呼び出されていることが確認できます.<br>
  158.                 ここでは, ステップインを4回押してこのメソッドの中に前から入ってください.
  159.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_16.png" class = "threeQuartersSize"></div>
  160.             </p>
  161.             <p class = "explanation">
  162.                 LayerPerspectiveMutable クラスの hit(Rectangle) メソッドに入りました.<br>
  163.                 ここで, ソースコードを見ると, 231行目で LayerPerspectiveMutable クラスのインスタンスの<br>
  164.                 フィールド contents から get() メソッドで Fig クラスのインスタンスを取得していることが確認できます.<br>
  165.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_17.png" class = "threeQuartersSize"></div>
  166.             </p>
  167.             <p class = "explanation">
  168.                 取得している値を確認するために, ステップオーバーを2回押して232行目まで進んでください.<br>
  169.                 232行目まで進んだら, 変数ビュー上の「呼び出し後」を開くと, 戻り値として FigClass クラスのインスタンス (id = 1675174935) が返されていることが確認でき, <br>
  170.                 したがって, このインスタンスは LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) がリスト内の要素として参照していることがわかります.
  171.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_18.png" class = "threeQuartersSize"></div>
  172.             </p>
  173.             <p class = "explanation">
  174.                 先ほどの結果から, FigClass クラスのインスタンス (id = 1675174935) は<br>
  175.                 LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) が参照していることがわかりました.<br>
  176.                 ここで, ステップオーバーを1回押して, 実行時点が return f に止まることを確認してください.<br>
  177.                 これを確認したら, 呼び出しスタック上で4つ呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドをクリックしてください.<br>
  178.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_19.png" class = "threeQuartersSize"></div>
  179.             </p>
  180.             <p class = "explanation">
  181.                 現在は, ModeSelect クラスの mousePressed(MouseEvent) メソッドを見ています.<br>
  182.                 ここで, 変数ビュー上で this を開くと, Editor クラスのインスタンス (id = 371019845) は<br>
  183.                 ModeSelect クラスのインスタンス (id = 1807431709) が フィールド editor として参照していることがわかります.<br>
  184.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_20.png" class = "threeQuartersSize"></div>
  185.             </p>
  186.             <p class = "explanation">
  187.                 ここまでの結果から, SelectionClass クラスのインスタンスに関わる各オブジェクトの関係について, 以下のことがわかりました.<br>
  188.                 <ol>
  189.                     <li>SelectionClass クラスのインスタンス (id = 1672744985) は Fig クラスのインスタンス (id = 1675174935) を引数に渡して生成している.</li>
  190.                     <li>FigClass クラスのインスタンス (id = 1675174935) は LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) が参照している.</li>
  191.                     <li>LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) は LayerManager クラスのインスタンス (id = 1975264229) が参照している.</li>
  192.                     <li>LayerManager クラスのインスタンス (id = 1975264229) は Editor クラスのインスタンス (id = 371019845) が参照している.</li>
  193.                     <li>Editor クラスのインスタンス (id = 371019845) は ModeSelect クラスのインスタンス (id = 1807431709) が参照している.</li>
  194.                 </ol>
  195.                 課題B4では, オブジェクトの追加に関わっている SelectionManager クラスのインスタンスと SelectionClass クラスのインスタンスについて見ていくのでした.<br>
  196.                 ここからは, SelectionManager クラスのインスタンスの方がどこから来たかを見ていきます.<br>
  197.                 まずは, ステップバックオーバーを1回押して156行目に戻ってください.<br>
  198.                 ソースコードを見ると, Editor クラスの getSelectionManager() メソッドの戻り値がローカル変数 sm に代入されていることがわかります.<br>
  199.                 ここで, ステップインを1回押して このメソッドの中に前から入ってください.<br>
  200.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_21.png" class = "threeQuartersSize"></div>
  201.             </p>
  202.             <p class = "explanation">
  203.                 Editor クラスの getSelectionManager() メソッドに入りました.<br>
  204.                 ここで, 変数ビュー上の thisを開くと, Editor クラスのインスタンス (id = 371019845) が フィールド _selectionManager として<br>
  205.                 SelectionManager クラスのインスタンス (id = 4310438) を参照していることがわかります.
  206.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_22.png" class = "threeQuartersSize"></div>
  207.             </p>
  208.             <p class = "explanation">
  209.                 先ほどの結果から, SelectionManager クラスのインスタンス (id = 4310438) は<br>
  210.                 Editor クラスのインスタンス (id = 371019845) が参照していることがわかりました.<br>
  211.                 呼び出しスタック上で1つ呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドをクリックしてください.<br>
  212.                 ここで, 課題B4は終了です. <font color="red">時間計測を終了</font>してください.
  213.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_23.png" class = "threeQuartersSize"></div>
  214.             </p>
  215.         </p>
  216.         <hr>
  217.         <p>
  218.             課題B4の機能理解が終了しましたら, 以下のアンケートにお答えください.
  219.             <div><a href = "https://docs.google.com/forms/d/e/1FAIpQLSeP5GouNkBmsITcc3thQ-3JFnG4Ih9A1zsXT_ggO9_rjJLEuw/viewform" target = "_blank">アンケート回答</a></div>           
  220.         </p>
  221.         <a href="ArgoUML2_Reverse_Delta.html">次へ</a>
  222.     </body>
  223. </html>