Lecture thumbnail 0:00 / 0:00 All right.
So we’re now going to construct an HTML builder so that all of this code is more understandable.
So we’re going to start by defining an HTML element, because that’s what is going to be the building
block of just about everything that we do with HTML.
So I’m going to make a class called HTML Element, and this is going to represent just a single tag
like the P tag here, for example, with some content, maybe some text, but it can also contain other
tags.
So this particular tag can contain other tags.
For example, here we have an unordered list tag which contains a bunch of list item tags.
So we’re going to support this scenario.
Now in the HTML element, I’m going to have a bunch of public fields.
In this case, I’m not going to be doing properties.
It’s too complex for our example, so I’ll just have public fields called name and text.
I’ll also have a list of child elements.
So public list of HTML element called elements and I may as well initialize it straight away.
And we’ll also have perhaps we’ll do indentation because when I run this, you can see that it’s all
output as a single line.
Maybe I want it looking a bit prettier when I output everything nicely formatted, so I’m going to have
an indentation level the size of the indent.
So that’s going to be private const int indent size equal to two, for example.
So we’re going to indent everything by two spaces.
Okay, now let’s make a bunch of constructors.
So I’ll make an empty constructor, but I’ll also make a constructor which initializes the name and
the text.
So let’s go in here and initialize the name and the text as well.
All right.
I’m going to reduce some of these since they can now be simplified in C sharp seven even though Resharper
hasn’t caught up to it yet and still complains about the question mark.
We’re going to disregard this.
So what’s going on now?
Now we want to output this HTML element as a string and we’re going to keep using the string builder
because it’s a nice builder.
It’s convenient way of building up strings.
So what I’m going to do is define private string to string info.
So this is the implementation of two string that we’re subsequently going to output in the official
two string override, but we’re going to have an extra parameter for the indent indent, and that’s
precisely what we’re going to be using when we implement the ordinary two string.
So if I override the ordinary two string, that’s going to return two string input with a starting indentation
of zero seems obvious enough.
So what we’re going to do here is we’re going to make a string builder.
We’re also going to make the current level indentation, and this is going to be interesting.
So we have the indent level.
How many steps have moved from the left margin and we have the indentation size.
I’m going to use spaces to indent.
So what I’m going to do is make a new string where a single space is going to be repeated a certain
number of times and that number of times is obviously indent size multiplied by however many indents
we actually need.
So indent size times indent.
Okay, so now I need to append the opening tag.
So that’s going to be SB dot append and here I’m just going to use string interpolation.
I’ll append the indent, which I have called, I followed by the tag.
So here is the opening and then the tag name.
Closing and then, well, we may as well do append line.
Let’s just put a line break at the end of it.
Okay, So that’s our tag.
Now, the tag may contain some text, so I’m going to say if not string is null or whitespace text,
we’re going to output the text as well.
So here I’m going to append, first of all, an indentation similar to the indentation we have here.
But remember, we’re now outputting text, so we need to indent by one.
So I’m going to copy this over, paste it here.
But this time around it’s going to be indent plus one here.
So that’s the indentation for the text.
Let’s put a semicolon and then I add the text as well.
So SB append text like so.
And then I well, we may as well do append line.
So let’s put a line break at the end of it.
Okay.
So that’s the text.
Now we have the children.
So if this tag contains a bunch of other tags, we can do a for each.
Once again, we can say for each of the elements.
So for each var e in elements we sb dot append and here we just do a recursive call.
So we say we take the element and we do to string info.
So it’s a recursive call with the indentation level of indent plus one, and that’s how you get the
nested indentation for each of the inner HTML elements.
And then of course you have to close the tag.
So this is similar to what we have here, except with the slash like so, so close the tag and we return
SB dot two string.
So we return the overall string.
Okay.
So now we have an HTML element and we may as well build an HTML builder, which is actually a convenient
API for constructing a tree of these HTML elements.
So let’s do that.
So I’m going to have a class called HTML builder like.
So now I’m going to start the HTML builder by specifying the root tag.
And I want the name of the root tag because we’re going to have some kind of root.
So I’ll have HTML element called root here and I’ll initialize it.
Just put a default initialization.
This explains why I made the default constructor so I don’t have to specify anything here, but when
I go ahead and I make my constructor, when I make an HTML builder, what I can do is I can take a string
which specifies the root name.
And then what I can do is I can assign it.
So I can say root dot name equals root name.
But in addition, I might want to store it as a variable.
We’re going to need it in just a moment, so I’ll initialize a field with this parameter as well.
Okay.
So now that I have this kind of API, I can add a method to actually add a child public void, add child
string, child name and string child text.
And this adds a child to whichever object I’m working with.
So I make a new HTML element, new HTML element with child name and child text like so.
And then of course, I take the root element and I take its elements and I say root, dot elements,
dot, add and add.
This particular element seems simple enough.
This approach doesn’t scale very well, by the way, but it’s good for kind of showing an overall design
of the builder.
So now that we have this set up, we need a few more pieces.
Actually, we’re not done yet because we want to output this as a string.
So we implement the two string override here.
Interesting that it doesn’t complete.
There we go.
So here we return and we take the root and just do route dot to string.
That’s how we return the string representation.
We might also want to have an implementation for clearing the entire builder because our builder is
stateful.
It keeps this route, so we may as well clear it in some sort of method.
So I’ll make a method called clear.
And here what we’re going to do is we’re going to reset the route.
So I’m going to say route equals new HTML element, but we want to keep the name.
And that’s why I made a field here called Route name because we want to keep that name.
So I’ll say name equals route name.
There we go.
So we have this clear method and now we can start using the whole thing so we can actually have a similar
construct, an unordered list with two elements, but we’re going to be using an HTML builder.
So I’m going to say var builder equals new HTML builder.
The top level route name is an unordered list Ul and then I’m going to add the children.
So I’m going to say builder dot add child list item called Hello.
And I’ll just duplicate this and put world in here.
So these are the two items.
And then we can once again write line builder dot to string.
Actually, the two string is redundant and if I execute this well, we forgot a closing round bracket
somewhere.
Let’s take a look.
So we have an extra round bracket needed here.
And if we execute this well, you see it’s now much prettier because we added the indentation.
But really the benefit isn’t just the indentation.
The benefit is that we’ve structured it in an object oriented way.
We’ve built up a tree and we essentially made a special construct called an HTML builder, which is
its sole purpose in life, is to build up trees of HTML elements, and this is the result of its output.
Play Play Play Stop Play Play Play Play Play Start Play