images/mvc-flow.drawio.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="829px" height="422px" viewBox="-0.5 -0.5 829 422" content="&lt;mxfile host=&quot;&quot; modified=&quot;2020-06-20T07:28:38.047Z&quot; agent=&quot;5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Code/1.45.1 Chrome/78.0.3904.130 Electron/7.2.4 Safari/537.36&quot; etag=&quot;tPPx95WnE4cIxvpaaAG0&quot; version=&quot;13.1.3&quot;&gt;&lt;diagram id=&quot;6hGFLwfOUW9BJ-s0fimq&quot; name=&quot;Page-1&quot;&gt;7Vpbc9o4FP41zKQvGV8wOI+FpE1n0k0n2W7bR2ErRhvZ8sgyhP31e2RLtmyZhFBoOkx5YKwj63a+79wEI3+ePn3kKF9+ZjGmI8+Jn0b+5cjzwkkI31KwqQVB4NeChJO4Frmt4J78h5XQUdKSxLjovCgYo4LkXWHEsgxHoiNDnLN197UHRrur5ijBluA+QtSWfiOxWKpjedNWfo1JstQru5OLuidF+mV1kmKJYrY2RP7VyJ9zxkT9lD7NMZW603qpx33Y0ttsjONM7DLAqwesEC3V2T7fXl7dqM2JjT4xZ2UWYznIHfmz9ZIIfJ+jSPauAWKQLUVKVbe9CbWvFeYCPxkitamPmKVY8A28onp9pR9FEH+q2utW3a7W4dJQtR6HFMJJM3OrBHhQehjWiW/pZH771993tzc3V3dvrxi3qxnX/4WaGVua+efT1bc318nEeUO2BJZOLH3gLH4vvQ60MpaBcBajYtkoyFAGfiLiu/H8A56d80C1LuV5Hd3Y6EYGO/5uNoxRstkOq1p63FbFF6zkkfZ02r0inmDRYQGOO07SRsfQfjCgfC3jmCJBVl3XOoSIWuELI7Dh1iDGPfC9Hqj1cdQo0xX2J7roTuRNexPVOrAmqgjSHHsnzkxexZmIoqIg0TBTWnb8MHpeYIrbYcoheOLbNPH+0OQnaTI9AE2GncMLkO9Drn1p8nt5E6+HruvuSZNxLyZ54dFoon20GZYJXsu1oggXBWTKoPIlHnkTlMromy2KvELMSVVmvijl1llGN1UqXekRxXqYEyOBLOpBcBZdshWCs0c8Z5TxNtQ9EEp7IkRJkknGAlUwyGcy1BNIr9+rjpTEsVxmMHdos4tnabd7+uD1XcM0sNKHBj6Tc30Xsk/64NoZ+CnlD55t8Jquv4nFu0EP/TDYz+KtLLQ/0QEt3i5R7nBCCrAmaesw05LFhTblhTRhsC6K48rIG4N20lKA6qTkZG27V0g2/t0sDdxn2PVTtm3XS6+DaVW7cbwCBcj3zr5+ktNLzaJIAvfudJEbO+OXkRsq6g6CnF3VqZBKshVoU4IRMXCHDODiHSx3BO4c2nNzhjWpdiAJIDef55zlnCCBjTDdrvLA5BgiThj/MOxmYqGNP/jcI+FvV2j6EnM3AvQc7KvQVuTpg12nYgVK8QmC/iYg2/XVNSqatLnxywx20tpgk0XX3w1eEyohWABSk0Q+nQFeHAN0tVvPGurUUBIJaV4uKFRsDdYn7M69wOuY8xDQ/uRIQIcW0JaiZTZ6r5pKg10dDBbV50Hod7Nmx5eCf7EQG/W7BSqBRv6McYA4YRmiN4zlg2COIFtxZj6oQffoXxc8iTH4j86b8iPXKtO8t3O7YADJB+ly6rMUkIqK50qKoTpih7ulbdcJsvUFcwLISSr+6vsC1zlMqTDuFYruxb6XA/2fN5zjXQ5cHIv7Ju/dU+D8PrWuyUz/7ZgZ9vg0me5HTKsY7l9/HY6YOnXvELMOoiXVQVRLKNGSyyqxqqWwRNux7VWjyHUoS6pwe9bG251mumbssckHqCzgMt0yZj+T2dwCRY8VnrLO47qL5apae2Y5EJoHH04Edo3+hsUOhfetuQCDngda2cgSZHBOvRcr1A/Yw9a8rrkNNcP9UNnt9j3hPvHesy9Ed6FWVaP1KdLWWhkRBNEKW3CNnGTJrvSpJi7z+Ig0rJY4KwvM343MuvMPJbclpMH0ouPqBik6Dg9DUWi2/+monWX7xxj/6n8=&lt;/diagram&gt;&lt;/mxfile&gt;">
    <defs/>
    <g>
        <rect x="30" y="290" width="120" height="30" rx="4.5" ry="4.5" fill="#ffffff" stroke="#000000" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 305px; margin-left: 31px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                MODEL
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="90" y="309" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    MODEL
                </text>
            </switch>
        </g>
        <rect x="310" y="50" width="120" height="30" rx="4.5" ry="4.5" fill="#ffffff" stroke="#000000" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 65px; margin-left: 311px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                CONTROLLER
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="370" y="69" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    CONTROLLER
                </text>
            </switch>
        </g>
        <rect x="600" y="290" width="120" height="30" rx="4.5" ry="4.5" fill="#ffffff" stroke="#000000" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 305px; margin-left: 601px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                VIEW
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="660" y="309" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    VIEW
                </text>
            </switch>
        </g>
        <path d="M 520 305 L 600 305" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
        <path d="M 370 80 L 154.61 285.6" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 150.81 289.23 L 153.46 281.86 L 154.61 285.6 L 158.29 286.93 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 370 80 L 595.3 285.71" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"/>
        <path d="M 599.17 289.25 L 591.65 287.11 L 595.3 285.71 L 596.36 281.94 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <rect x="240" y="295" width="280" height="20" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 278px; height: 1px; padding-top: 305px; margin-left: 241px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                View accesses the  model but only to read the data
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="380" y="309" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    View accesses the  model but only to read the...
                </text>
            </switch>
        </g>
        <path d="M 150 305 L 240 305" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/>
        <rect x="230" y="210" width="110" height="50" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 235px; margin-left: 231px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Registers methods to be called on data mutation
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="285" y="239" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Registers methods...
                </text>
            </switch>
        </g>
        <rect x="404" y="210" width="120" height="50" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 235px; margin-left: 405px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Registers methods to be called on view events (UI interaction)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="464" y="239" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Registers methods to...
                </text>
            </switch>
        </g>
        <rect x="488" y="100" width="260" height="50" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 258px; height: 1px; padding-top: 125px; margin-left: 489px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                View invokes controller methods on view events (UI interaction). Controller will call appropriate model methods for it
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="618" y="129" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    View invokes controller methods on view eve...
                </text>
            </switch>
        </g>
        <rect x="0" y="100" width="260" height="50" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 258px; height: 1px; padding-top: 125px; margin-left: 1px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Model invokes controller methods on data mutation. Controller will call appropriate view methods for the same
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="130" y="129" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Model invokes controller methods on data mu...
                </text>
            </switch>
        </g>
        <rect x="252" y="0" width="236" height="50" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 234px; height: 1px; padding-top: 25px; margin-left: 253px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                Has access to both model &amp; view
                                <br/>
                                (therefore can invoke their public methods)
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="370" y="29" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Has access to both model &amp; view...
                </text>
            </switch>
        </g>
        <path d="M 430 80 L 669.96 290.99" fill="none" stroke="#00b336" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="6 6" pointer-events="stroke"/>
        <path d="M 80 287 L 310 80" fill="none" stroke="#00b336" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="6 6" pointer-events="stroke"/>
        <rect x="0" y="320" width="210" height="100" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 208px; height: 1px; padding-top: 370px; margin-left: 2px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 96px; overflow: hidden; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                <ul>
                                    <li>
                                        Data
                                    </li>
                                    <li>
                                        Data mutation logic (methods)
                                    </li>
                                    <li>
                                        Hooks to listen to mutation (callback registration option)
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="2" y="374" fill="#000000" font-family="Helvetica" font-size="12px">
                    DataData mutation logic (methods)Ho...
                </text>
            </switch>
        </g>
        <rect x="579" y="320" width="248" height="100" fill="none" stroke="none" pointer-events="all"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-start; width: 246px; height: 1px; padding-top: 370px; margin-left: 581px;">
                        <div style="box-sizing: border-box; font-size: 0; text-align: left; max-height: 96px; overflow: hidden; ">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                <ul>
                                    <li>
                                        UI logic (methods for initial rendering)
                                    </li>
                                    <li>
                                        UI updation logic (methods)
                                    </li>
                                    <li>
                                        Hooks to listen to UI (user) events (callback registration option)
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="581" y="374" fill="#000000" font-family="Helvetica" font-size="12px">
                    UI logic (methods for initial rendering)U...
                </text>
            </switch>
        </g>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
        <a transform="translate(0,-5)" xlink:href="https://desk.draw.io/support/solutions/articles/16000042487" target="_blank">
            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
                Viewer does not support full SVG 1.1
            </text>
        </a>
    </switch>
</svg>