View Classes - ldco2016/microurb_web_framework GitHub Wiki

Now is time to work on the View side or the HTML that will get rendered to the screen.

To approach this problem, a very common approach used in React or Angular is to create individual classes that are responsible for showing very discreet segments of my app:

For this test application I will segment this thing into different classes. Showing the text user detail and information about a particular user is going to be the responsibility of a class called UserShow.

The responsibility of all the HTML for the form will go to a class called UserForm.

To ensure I can show both, I am going to somehow nest these inside another class called UserEdit.

So in this particular case I would end up with a hierarchy that looks like this:

Inside this hierarchy is UserEdit at the top and inside of it I will show a UserForm and a UserShow.

Let's get into specifics:

Each of these different classes I will review to as a View or View Class. Every View Class must produce some HTML and display it on the screen. I have to be able to nest one View class's HTML inside another so I can show UserForm and UserShow inside of UserEdit.

Inside of each of these View classes I will have to have some way of handling user events, in other words, handling the case where a user clicks on one of the buttons or selects the text input and types in some new text.

I am probably going to have some type coupling between different views and some models.

Looking at UserShow its very clear that I will have to show information about a very particular user and that user is provided to UserShow by the User model, so definitely going to be a tight coupling between the model and views of this application.

At some point in time I will want to be able to reach into the HTML produced by the View, for example, anytime a user types in the name input, I want the ability to reach into the HTML and read out the new text the user has entered inside there.

I am going to implement one class called UserForm, get it working well and then extract some reusable logic from it and use it to implement UserEdit and UserShow as well.