Newer
Older
TraceDebuggerExperiment / courseB / ArgoUML_Reverse / problem2 / ArgoUML2_Reverse.html
<!DOCTYPE HTML>
<html lang = "ja">
    <head>
        <title>課題B4 (アーキテクチャ理解)</title>
        <meta charset = "UTF-8">
        <link rel = "stylesheet" type = "text/css" href = "../../../prettify.css">
    </head>
    <body>
        <h1>課題B4 (アーキテクチャ理解)</h1>
        <p>
            課題B4では, ArgoUMLの図形の選択機能について見ていきます.<br>
            ArgoUMLはオープンソースのUMLモデリングツールで, Javaで書かれております.<br>
            また, ArgoUML内部では, グラフ編集用フレームワークであるGEFが使用されています.<br>
            ワークスペース内のargouml-*が、ArgoUMLを構成するプロジェクトであり, GEF-0.13.7がGEFのプロジェクトです。
        </p>

        <hr>
        <h2>前準備</h2>
        <p>
            <p class = "explanation">
                課題B3が終了した直後は下図のような状態になっているはずです.<br>
                <div class = "image"><img src = "./images/images_problem2_pre/ArgoUML_2_pre_00_1.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                ここで, ステップバックオーバーを1回押してから, ステップオーバーを1回押してください.<br>
                すると, 下図のように363行目に入った直後の状態になるので, そこから続けてステップネクストを3回押してください.
                <div class = "image"><img src = "./images/images_problem2_pre/ArgoUML_2_pre_03.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                ステップネクストを3回実行すると, selections の get() メソッドの呼び出し直後に実行時点が変わっているはずです.<br>
                ここで, 変数ビュー上にある「呼び出し後」を開き, 戻り値を右クリックしてください.<br>
                右クリックするとポップアップメニューが現れるので, 「オブジェクトの追加時点に飛ぶ」を選択してください.
                <div class = "image"><img src = "./images/images_problem2_pre/ArgoUML_2_pre_04.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                「オブジェクトの追加時点に飛ぶ」を選択すると, selections に この SelectionClass クラスが追加された時点である<br>
                SelectionManager クラスの addFig(Fig) メソッドの130行目にまで現在の実行時点が遡ります.<br>
                下図の状態になっていれば前準備は終了です.
                <div class = "image"><img src = "./images/images_problem2_pre/ArgoUML_2_pre_05.png" class = "threeQuartersSize"></div>
            </p>
        </p>

        <hr>
        <h2>アーキテクチャ理解</h2>
        <p>
            Fig クラスはグラフィックエディタ上の図形を表すGEFの内部のクラスです.<br>
            また, FigClass クラスはクラス図上に配置された「クラス」を表す ArgoUML のクラスで, Fig クラスの子孫クラスにあたります.<br>
            現在の実行時点の行は、図形を選択するたびに実行されます.
        </p>

        <p>
            <p class = "explanation">
                先ほどの前準備にしたがって進めていくと, 下図のように SelectionManager クラスの addFig(Fig) メソッド内の130行目で一時停止している状態になっているはずです.<br>
                この状態になっていれば, ここから時間計測を開始してください.<br>
                まずは,「実行時点の登録」ビューの追加ボタンをクリックして実行時点の登録を行ってください.<br>
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_01.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                ここで, ソースコードと変数ビューを見ると, SelectionManager クラスのインスタンス (id = 4310438) が参照するフィールド selections へは<br>
                makeSelectionFor(Fig) メソッドの戻り値である SelectionClass クラスのインスタンス (id = 1672744985) が追加されていることがわかります.<br>
                課題B4では, このオブジェクトの追加に関わっている SelectionManager クラスのインスタンスと SelectionClass クラスのインスタンスについて見ていきます.<br>
                まずは, SelectioClass クラスのインスタンスの方がどこから来たのかを見ていくために, <br>
                ステップバックインを1回押して SelectionManager クラスの makeSelectionFor(Fig) メソッドの中に後ろから入ってください.
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_02.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                SelectionManager クラスの makeSelectionFor(Fig) メソッドの1131行目に入ってきました.<br>
                ソースコードを見ると, return customSelection でローカル変数 customSelection が参照する値が返されていることがわかります.<br>
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_03.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                この値がどこから来ているのかを見るために, ステップバックオーバーを1回押して1129行目に戻ってください.<br>
                1129行目では 仮引数 f で参照されているインスタンスに対して makeSelection() メソッドが呼び出され,<br>
                その戻り値がローカル変数 customSelection に代入されていることが確認できます.<br>
                ここで, ステップインを1回押してこのメソッドの中に前から入ってください.<br>
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_04.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                FigClass クラスの makeSelection() メソッドに入りました.<br>
                ここでは new SelectionClass(this) で 自分自身を引数に渡して SelectionClass クラスが生成されており,<br>
                生成された SelectionClass クラスのインスタンスは 引数で渡された FigClass クラスのインスタンス (id = 1675174935) を参照していることがわかります.<br>
                これを確認したら, 呼び出しスタック上で2つ呼び出し元である SelectionManager クラスの addFig(Fig) メソッドをクリックしてください.
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_05.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                現在は SelectionManager クラスの addFig(Fig) メソッドの130行目を見ています.<br>
                ここで, ソースコードを見ると, 先ほどの makeSelectionFor(Fig) メソッドには, 仮引数 f で参照されている<br>
                FigClass クラスのインスタンス (id = 1675174935) が渡されていることが確認できます.<br>
                ここからは, この FigClass クラスのインスタンス (id = 1675174935) がどこから来たのかを見ていきます.<br>
                呼び出しスタック上で1つ呼び出し元である SelectionManager クラスの select(Fig) メソッドをクリックしてください.<br>
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_06.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                現在は 呼び出し元である SelectionManager クラスの select(Fig) メソッドの180行目を見ています.<br>
                ここで, ソースコードを見ると, 呼び出し先の addFig(Fig) メソッドには 仮引数 f の値が実引数として渡されていることが確認できます.<br>
                これを確認したら, 呼び出しスタック上でさらに1つ呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドをクリックしてください.
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_07.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドの187行に戻ってきました.<br>
                ここで, ソースコードを見ると, 呼び出し先である SelectinoManager クラスの select(Fig) メソッドには<br>
                ローカル変数 underMouse の値が実引数として渡されていたことがわかります.<br>
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_08.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                この underMouse の値がどこから来たのかを見るために, ステップバックオーバーを8回押して163行目まで戻ってください.<br>
                163行目では, ローカル変数 underMouse が参照するインスタンスが FigGroup にキャストされたあと,<br>
                それに対して deepSelect(Rectangle) メソッドが呼び出され, その戻り値が改めて underMouse に代入されていることがわかります.<br>
                ここで, 戻り値がどのようになっているのかを確認するために, FigGroup クラスの deepSelect(Rectangle) メソッドの中に前から入ってください.<br>
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_09.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                FigGroup クラスの deepSelect(Rectangle) メソッドに入りました.<br>
                すると, deepSelect(Rectangle) メソッドの中では return this で自分自身を戻り値として返していることがわかります.<br>
                これを確認したら, ステップバックリターンを1回押して呼び出し元に戻ってください.
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_10.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                ModeSelect クラスの mousePressed(MouseEvent) メソッドの163行目に戻ってきました.<br>
                underMouse の値がどこから来ているのかを見るために, ステップバックオーバーを1回押して160行目に戻ってください.<br>
                160行目では Editor クラスの hit(Point) メソッドが呼び出され, その戻り値がローカル変数 underMouse に代入されていることが確認できます.<br>
                ここで, ステップインを1回押してこのメソッドの中に前から入ってください.
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_11.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                Editor クラスの hit(Point) メソッドに入りました.<br>
                ここでは, ステップオーバーを1回実行したあとに, ステップインを2回押して hit(Rectangle) メソッドの中に前から入ってください.
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_12.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                Editor クラスの hit(Rectangle) メソッドに入りました.<br>
                ここでは, ステップインを2回押して getLayerManager() メソッドの中に前から入ってください.<br>                
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_13.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                Editor クラスの getLayerManager() メソッドに入りました.<br>
                ここでは, return _layerManager で LayerManager クラスのインスタンスが返されていることが確認でき,<br>
                変数ビュー上の this を開くと, このEditor クラスのインスタンス (id = 371019845) がフィールド _layerManager として<br>
                LayerManager クラスのインスタンス (id = 1975264229) を参照していることがわかります.<br>
                これを確認したら, ステップリターンで呼び出し元に戻ってください.
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_14.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                Editor クラスの hit(Rectangle) メソッドに戻ってきました.<br>
                次は, ステップインで LayerManager クラスの hit(Rectangle) メソッドの中に前から入ってください.
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_15.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                LayerManager クラスの hit(Rectangle) メソッドの中に入りました.<br>
                ここで, 変数ビューを確認すると, この LayerManager クラスのインスタンス (id = 1975264229) は,<br>
                フィールド _activeLayer として LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) を参照していることがわかります.<br>
                また, ソースコードを見ると, このフィールド _activeLayer が参照しているインスタンスに対して hit(Rectangle) メソッドが呼び出されていることが確認できます.<br>
                ここでは, ステップインを4回押してこのメソッドの中に前から入ってください.
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_16.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                LayerPerspectiveMutable クラスの hit(Rectangle) メソッドに入りました.<br>
                ここで, ソースコードを見ると, 231行目で LayerPerspectiveMutable クラスのインスタンスの<br>
                フィールド contents から get() メソッドで Fig クラスのインスタンスを取得していることが確認できます.<br>
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_17.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                取得している値を確認するために, ステップオーバーを2回押して232行目まで進んでください.<br>
                232行目まで進んだら, 変数ビュー上の「呼び出し後」を開くと, 戻り値として FigClass クラスのインスタンス (id = 1675174935) が返されていることが確認でき, <br>
                したがって, このインスタンスは LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) がリスト内の要素として参照していることがわかります.
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_18.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                先ほどの結果から, FigClass クラスのインスタンス (id = 1675174935) は<br>
                LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) が参照していることがわかりました.<br>
                ここで, ステップオーバーを1回押して, 実行時点が return f に止まることを確認してください.<br>
                これを確認したら, 呼び出しスタック上で4つ呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドをクリックしてください.<br>
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_19.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                現在は, ModeSelect クラスの mousePressed(MouseEvent) メソッドを見ています.<br>
                ここで, 変数ビュー上で this を開くと, Editor クラスのインスタンス (id = 371019845) は<br>
                ModeSelect クラスのインスタンス (id = 1807431709) が フィールド editor として参照していることがわかります.<br>
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_20.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                ここまでの結果から, SelectionClass クラスのインスタンスに関わる各オブジェクトの関係について, 以下のことがわかりました.<br>
                <ol>
                    <li>SelectionClass クラスのインスタンス (id = 1672744985) は Fig クラスのインスタンス (id = 1675174935) を引数に渡して生成している.</li>
                    <li>FigClass クラスのインスタンス (id = 1675174935) は LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) が参照している.</li>
                    <li>LayerPerspectiveMutable クラスのインスタンス (id = 1248750852) は LayerManager クラスのインスタンス (id = 1975264229) が参照している.</li>
                    <li>LayerManager クラスのインスタンス (id = 1975264229) は Editor クラスのインスタンス (id = 371019845) が参照している.</li>
                    <li>Editor クラスのインスタンス (id = 371019845) は ModeSelect クラスのインスタンス (id = 1807431709) が参照している.</li>
                </ol>
                課題B4では, オブジェクトの追加に関わっている SelectionManager クラスのインスタンスと SelectionClass クラスのインスタンスについて見ていくのでした.<br>
                ここからは, SelectionManager クラスのインスタンスの方がどこから来たかを見ていきます.<br>
                まずは, ステップバックオーバーを1回押して156行目に戻ってください.<br>
                ソースコードを見ると, Editor クラスの getSelectionManager() メソッドの戻り値がローカル変数 sm に代入されていることがわかります.<br>
                ここで, ステップインを1回押して このメソッドの中に前から入ってください.<br>
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_21.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                Editor クラスの getSelectionManager() メソッドに入りました.<br>
                ここで, 変数ビュー上の thisを開くと, Editor クラスのインスタンス (id = 371019845) が フィールド _selectionManager として<br>
                SelectionManager クラスのインスタンス (id = 4310438) を参照していることがわかります.
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_22.png" class = "threeQuartersSize"></div>
            </p>
            <p class = "explanation">
                先ほどの結果から, SelectionManager クラスのインスタンス (id = 4310438) は<br>
                Editor クラスのインスタンス (id = 371019845) が参照していることがわかりました.<br>
                呼び出しスタック上で1つ呼び出し元である ModeSelect クラスの mousePressed(MouseEvent) メソッドをクリックしてください.<br>
                ここで, 課題B4は終了です. 時間計測を終了してください.
                <div class = "image"><img src = "./images/images_problem2/ArgoUML_2_23.png" class = "threeQuartersSize"></div>
            </p>
        </p>
    </body>
</html>