Fork: 0
nitta-lab / TraceDebuggerExperiment
Transfer to URL with SHA Find file
Newer
Older
TraceDebuggerExperiment / courseB / ArgoUML_Reverse / problem2 / ArgoUML2_Reverse.html
n-nitta on 28 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.             を理解することを目指して, 以下のようにトレースデバッガを操作していきます.<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.             現在の実行時点の行は, 図形を選択するたびに実行されます. <br>
  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.                 ここで, ソースコードと変数ビューの List.add(Object) の呼び出し前を見ると, SelectionManager クラスのインスタンス (id = 4310438) の<br>
  65.                 フィールド selections へは, makeSelectionFor(Fig) メソッドの戻り値である SelectionClass クラスのインスタンス (id = 1672744985) が<br>
  66.                 追加されていることがわかります.<br>
  67.                 課題B4では, このオブジェクトの追加に関わっている SelectionManager クラスのインスタンスと SelectionClass クラスのインスタンスについて見ていきます.<br>
  68.                 まずは, SelectionClass クラスのインスタンスの方がどこから来たのかを見ていくために, <br>
  69.                 ステップバックインを1回押して SelectionManager クラスの makeSelectionFor(Fig) メソッドの中に後ろから入ってください.
  70.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_02.png" class = "threeQuartersSize"></div>
  71.             </p>
  72.             <p class = "explanation">
  73.                 SelectionManager クラスの makeSelectionFor(Fig) メソッドの1131行目に入ってきました.<br>
  74.                 ソースコードを見ると, return customSelection でローカル変数 customSelection が参照する値が返されていることがわかります.<br>
  75.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_03.png" class = "threeQuartersSize"></div>
  76.             </p>
  77.             <p class = "explanation">
  78.                 この値がどこから来ているのかを見るために, ステップバックオーバーを1回押して1129行目に戻ってください.<br>
  79.                 1129行目では 仮引数 f で参照されているインスタンスに対して makeSelection() メソッドが呼び出され,<br>
  80.                 その戻り値がローカル変数 customSelection に代入されていることが確認できます.<br>
  81.                 ここで, ステップインを1回押してこのメソッドの中に前から入ってください.<br>
  82.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_04.png" class = "threeQuartersSize"></div>
  83.             </p>
  84.             <p class = "explanation">
  85.                 FigClass クラスの makeSelection() メソッドに入りました.<br>
  86.                 ここでは new SelectionClass(this) で 自分自身を引数に渡して SelectionClass クラスが生成されており,<br>
  87.                 生成された SelectionClass クラスのインスタンスは 引数で渡された FigClass クラスのインスタンス (id = 1675174935) を参照していることがわかります.<br>
  88.                 これを確認したら, 呼び出しスタック上で2つ呼び出し元である SelectionManager クラスの addFig(Fig) メソッドをクリックしてください.
  89.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_05.png" class = "threeQuartersSize"></div>
  90.             </p>
  91.             <p class = "explanation">
  92.                 現在は SelectionManager クラスの addFig(Fig) メソッドの130行目を見ています.<br>
  93.                 ここで, ソースコードを見ると, 先ほどの makeSelectionFor(Fig) メソッドに実引数として渡されていた FigClass クラスのインスタンス (id = 1675174935) は, <br>
  94.                 この SelectionManager クラスの addFig(Fig) メソッド内において, 仮引数 f で渡されてきた値であることがわかります<br>
  95.                 ここからは, この 仮引数 f で参照されている FigClass クラスのインスタンス (id = 1675174935) がどこから来たのかを見ていきます.<br>
  96.                 呼び出しスタック上で1つ呼び出し元である SelectionManager クラスの select(Fig) メソッドをクリックしてください.<br>
  97.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_06.png" class = "threeQuartersSize"></div>
  98.             </p>
  99.             <p class = "explanation">
  100.                 現在は 呼び出し元である SelectionManager クラスの select(Fig) メソッドの180行目を見ています.<br>
  101.                 ここで, ソースコードを見ると, 呼び出し先の addFig(Fig) メソッドには 仮引数 f の値が実引数として渡されていることが確認できます.<br>
  102.                 これを確認したら, 呼び出しスタック上でさらに1つ呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドをクリックしてください.
  103.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_07.png" class = "threeQuartersSize"></div>
  104.             </p>
  105.             <p class = "explanation">
  106.                 呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドの187行に戻ってきました.<br>
  107.                 ここで, ソースコードを見ると, 呼び出し先である SelectinoManager クラスの select(Fig) メソッドには<br>
  108.                 ローカル変数 underMouse の値が実引数として渡されていたことがわかります.<br>
  109.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_08.png" class = "threeQuartersSize"></div>
  110.             </p>
  111.             <p class = "explanation">
  112.                 この underMouse の値がどこから来たのかを見るために, ステップバックオーバーを8回押して163行目まで戻ってください.<br>
  113.                 163行目では, ローカル変数 underMouse が参照するインスタンスが FigGroup にキャストされたあと,<br>
  114.                 それに対して deepSelect(Rectangle) メソッドが呼び出され, その戻り値が改めて underMouse に代入されていることがわかります.<br>
  115.                 ここで, 戻り値がどのようになっているのかを確認するために, ステップインを1回押して, FigGroup クラスの deepSelect(Rectangle) メソッドの中に前から入ってください.<br>
  116.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_09.png" class = "threeQuartersSize"></div>
  117.             </p>
  118.             <p class = "explanation">
  119.                 FigGroup クラスの deepSelect(Rectangle) メソッドに入りました.<br>
  120.                 すると, deepSelect(Rectangle) メソッドの中では return this で自分自身を戻り値として返していることがわかります.<br>
  121.                 これを確認したら, ステップバックリターンを1回押して呼び出し元に戻ってください.
  122.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_10.png" class = "threeQuartersSize"></div>
  123.             </p>
  124.             <p class = "explanation">
  125.                 ModeSelect クラスの mousePressed(MouseEvent) メソッドの163行目に戻ってきました.<br>
  126.                 underMouse の値がどこから来ているのかを見るために, ステップバックオーバーを1回押して160行目に戻ってください.<br>
  127.                 160行目では Editor クラスの hit(Point) メソッドが呼び出され, その戻り値がローカル変数 underMouse に代入されていることが確認できます.<br>
  128.                 ここで, ステップインを1回押してこのメソッドの中に前から入ってください.
  129.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_11.png" class = "threeQuartersSize"></div>
  130.             </p>
  131.             <p class = "explanation">
  132.                 Editor クラスの hit(Point) メソッドに入りました.<br>
  133.                 ここでは, ステップオーバーを1回押したあとに, ステップインを2回押して hit(Rectangle) メソッドの中に前から入ってください.
  134.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_12.png" class = "threeQuartersSize"></div>
  135.             </p>
  136.             <p class = "explanation">
  137.                 Editor クラスの hit(Rectangle) メソッドに入りました.<br>
  138.                 ここでは, ステップインを2回押して getLayerManager() メソッドの中に前から入ってください.<br>                
  139.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_13.png" class = "threeQuartersSize"></div>
  140.             </p>
  141.             <p class = "explanation">
  142.                 Editor クラスの getLayerManager() メソッドに入りました.<br>
  143.                 ここで, 変数ビュー上の this を開くと, この Editor クラスのインスタンス (id = 371019845) のフィールド _layerManager が<br>
  144.                 LayerManager クラスのインスタンス (id = 1975264229) を参照していることがわかります.<br>
  145.                 これを確認したら, ステップリターンを1回押して, 呼び出し元に戻ってください.
  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.                 次は, ステップインを1回押して, 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(int) メソッドで 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行目まで進んだら, 変数ビュー上の「呼び出し後」 (List.get(int) の呼び出し後) を開くと, <br>
  170.                 戻り値として FigClass クラスのインスタンス (id = 1675174935) が返されていることが確認できます. <br>
  171.                 また, 変数ビューの this を開くと, LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) の<br>
  172.                 contents フィールドが参照しているのは, ArrayList のインスタンス (id = 30009673) であることがわかります.
  173.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_18.png" class = "threeQuartersSize"></div>
  174.             </p>
  175.             <p class = "explanation">
  176.                 先ほどの結果から, FigClass クラスのインスタンス (id = 1675174935) は, LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) の<br>
  177.                 contents フィールドが参照している ArrayList のインスタンスによって管理されていることがわかりました.<br>
  178.                 ここで, ステップオーバーを1回押して, 実行時点が return f に止まることを確認してください.<br>
  179.                 これを確認したら, 呼び出しスタック上で4つ呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドをクリックしてください.<br>
  180.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_19.png" class = "threeQuartersSize"></div>
  181.             </p>
  182.             <p class = "explanation">
  183.                 現在は, ModeSelect クラスの mousePressed(MouseEvent) メソッドを見ています.<br>
  184.                 ここで, 変数ビュー上で this を開くと, Editor クラスのインスタンス (id = 371019845) は, <br>
  185.                 ModeSelect クラスのインスタンス (id = 1807431709) のフィールド editor によって参照されていることがわかります.<br>
  186.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_20.png" class = "threeQuartersSize"></div>
  187.             </p>
  188.             <p class = "explanation">
  189.                 ここまでの結果から, SelectionClass クラスのインスタンスに関わる各オブジェクトの関係について, 以下のことがわかりました.<br>
  190.                 <ol>
  191.                     <li>SelectionClass クラスのインスタンス (id = 1672744985) が生成されるとき, Fig クラスのインスタンス (id = 1675174935) が引数に渡されている.</li>
  192.                     <li>FigClass クラスのインスタンス (id = 1675174935) は, LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) にリストで管理されている.</li>
  193.                     <li>LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) は LayerManager クラスのインスタンス (id = 1975264229) が参照している.</li>
  194.                     <li>LayerManager クラスのインスタンス (id = 1975264229) は Editor クラスのインスタンス (id = 371019845) が参照している.</li>
  195.                     <li>Editor クラスのインスタンス (id = 371019845) は ModeSelect クラスのインスタンス (id = 1807431709) が参照している.</li>
  196.                 </ol>
  197.                 課題B4では, オブジェクトの追加に関わっている SelectionManager クラスのインスタンスと SelectionClass クラスのインスタンスについて見るところから始めました.<br>
  198.                 ここからは, SelectionManager クラスのインスタンスの方がどこから来たかを見ていきます.<br>
  199.                 まずは, ステップバックオーバーを1回押して156行目に戻ってください.<br>
  200.                 ソースコードを見ると, Editor クラスの getSelectionManager() メソッドの戻り値がローカル変数 sm に代入されていることがわかります.<br>
  201.                 ここで, ステップインを1回押して このメソッドの中に前から入ってください.<br>
  202.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_21.png" class = "threeQuartersSize"></div>
  203.             </p>
  204.             <p class = "explanation">
  205.                 Editor クラスの getSelectionManager() メソッドに入りました.<br>
  206.                 ここで, 変数ビュー上の this を開くと, Editor クラスのインスタンス (id = 371019845) の フィールド _selectionManager が<br>
  207.                 SelectionManager クラスのインスタンス (id = 4310438) を参照していることがわかります.
  208.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_22.png" class = "threeQuartersSize"></div>
  209.             </p>
  210.             <p class = "explanation">
  211.                 先ほどの結果から, SelectionManager クラスのインスタンス (id = 4310438) は<br>
  212.                 Editor クラスのインスタンス (id = 371019845) が参照していることがわかりました.<br>
  213.                 呼び出しスタック上で1つ呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドをクリックしてください.<br>
  214.                 ここで, 課題B4は終了です. <font color="red">時間計測を終了</font>してください.
  215.                 <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_23.png" class = "threeQuartersSize"></div>
  216.             </p>
  217.         </p>
  218.         <hr>
  219.         <p>
  220.             課題B4の機能理解が終了しましたら, 以下のアンケートにお答えください.
  221.             <div><a href = "https://docs.google.com/forms/d/e/1FAIpQLSeP5GouNkBmsITcc3thQ-3JFnG4Ih9A1zsXT_ggO9_rjJLEuw/viewform" target = "_blank">アンケート回答</a></div>           
  222.         </p>
  223.         <a href="ArgoUML2_Reverse_Delta.html">次へ</a>
  224.     </body>
  225. </html>