Build Your First Component
So far we saw how components’ are specified in HTML and, they are stitched in a page to form a scenario. We also saw how to transition to different scenarios.
But a component is more than HTML in a real life. It has data and it has behavior. Our example “tasks.htm” can have the following specification:
- “tasks.htm” will get the list of tasks from the server and display as a table.
- When the user clicks on the title of the task, it will pop up a dialog showing the details of the task.
- When the user clicks on the complete checkbox, the task will be marked completed in the server.
A component with data and behavior, as described above, is implemented using model, view, and controller (MVC) pattern. The MVC is followed by all frameworks in some form. In our framework, they are specified as follows:
- View: a view is specified in HTML. It has an associated JS file to render its dynamic parts. JS code is provided by the framework. You have the flexibility to extend the framework class. In 99% of cases, the framework code suffices without any change.
- Controller: the controller JS class manages UI events and also supports the application specific logic. In our design, an application specific controller extends a framework class. A controller also receives all life cycle callbacks and they can be overridden. These callbacks are such as “modelAvailable”, “preSetup”, “previewViewShow”, “postViewShow”, etc.
The following table shows how much of the UI code you would write in a typical application.