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