02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School
Previous VideoNext Video

XML Nested Elements

One of the main purposes of the development of XML was to enable inter-operability between information and the application that used or managed it. As an application is driven by logic, it is natural that the developer of the application expects data and information to be structured and organized as well. The fundamental unit of an XML document is, as discussed in previous sessions, an element. Any entity that is described as part of an XML document has to be organized as an element. An element can have other elements as part of its content. Content is thus versatile, not just character-encoded constant values such as numbers and alphanumeric strings. Even empty lines are legal content!

A few points need to be made at this point, and these will be followed by an appropriate example. The syntax of an XML document can be described as:

  1. An XML document's contents should be enclosed within a single element at the top level.
  2. An XML document can be viewed as a rooted tree of nodes (each node is an element) and thus has a recursive structure.
  3. Just as parantheses need to be closed properly in a (possibly complex) arithmetic expression, start and end tags of elements that may (or may not) have child nodes as content, should be correctly matched. In particular, overlapping of end tags of different elements must be avoided.
  4. Individual elements of the same category can have different numbers and types of elements as content.

Now is an appropriate time to discuss a real-world example. Suppose a joint family of monkeys living on a banyan tree decide to set up a business, with several adult monkeys having different responsibilities:

<monkey-business>

<venture-name>Simian Platform</venture-name>

<monkey-role>

<title>Production Damager</title>

<name>King Kong</name>

<responsibility>Stop-erations</responsibility>

<subordinates>Jerks</subordinates>

</monkey-role>

<monkey-role>

<title>Deceptionist</title>

<name>Dunston</name>

<responsibility>Curt-essy</responsibility>

</monkey-role>

</monkey-business>

In this snippet of legal XML, you can easily see how rules 1-4 are highlighted.

The element "monkey-business" is the top level root element of the "inverted-tree- visualization" of the XML document. The element category "monkey-role" is for labeling employee categories, and each element has several nested elements inside it (same as nested if All start tags are matched correctly with end tags, and we can see that the 2 elements of this category have different numbers and types of nested elements.

It is very logically organized. You can easily observe, if you have any programming experience, that programmed logic in an application can simply extract information from the organization of this document. That's the beauty of XML, and this convenience has led to its humongous presence on the web and in application software.

Video Transcript

00:00Until now our main focus was just creating our first node and at this step out
00:04We want to take a step deeper and actually look into what nested nodes are and to do it
00:10It's quite simple as we said previously to create a node all we have to do is open
00:15You know it's smaller than type the name we're gonna decide that we're gonna call this one a student and then close
00:22Close using a smaller than and then because we created a node and we know it's going to have content
00:28We're not gonna close it up as a as a node that has no content, but in the other hand we're going to
00:34break a line and then enter that same name only followed by
00:39Slash before it letting us know that for all the content between those areas are going to be our content
00:45So our content is right here and although it looks like there's no content actually there is there's an empty line of content
00:51Now we want to put actually something better in there
00:54And that's where really structure comes into XML
00:57Which we've been talking about that XML is really putting structure into your data making it really easy and accessible through code
01:05Well if your data did not have a structure
01:07It would be impossible for your code to know what to fetch and when to fetch it
01:11So our next step is actually to create a node that contains other nodes so until now we saw only nodes
01:17It actually had a copy inside of it, and we haven't seen anything, but that we've seen a node. That's empty
01:23We've seen a node that has some copy inside the next step. Let's create a node
01:26Let's create a student node and then the student know we're gonna put a couple of nodes
01:30Let's start with a math one and a math one
01:35We're gonna close it as well, and we could say let's say put inside of our math node
01:39Let's say 40, so let's say this is the score of that student in math
01:45Now let's take a deeper look at this what we've done right here
01:49So if we take a deeper look and just see the the steps that we've taken in the beginning
01:53We created a new student now when we created a new student
01:57We actually said the student will have now this node will have no information
02:02So now the information inside the student is actually this math cut math line
02:07But really in reality we could have created a lot more than just that math line
02:11So let's say for example
02:13We had a math and English a sports and so on and so forth and they as this line indicates might have had their own
02:20Children as well, so let's say the math wouldn't be just this global score
02:24It could have been that the math would have now all the different scores of all the exams that the student took throughout the year
02:30in math
02:31Alright
02:32Now that's really the basics of an XML node
02:36So it's that simple and that easy and you can see here the tree structure that gets built up as you build up your structure
02:42So right now we have only one student
02:45But obviously in a real application you would have hundreds of students or maybe tens of students
02:50And every student would have a different score
02:52Some of them will take math some of them some of them won't that way it enables you to very easily later on in code fetch
02:58For example all the students that took the math course or take get all the students that have an average
03:04That's higher than a certain score because we have easy access to the content
03:08We could very easily fetch all the students that have a score of a certain amount above math or that actually even have a score
03:15in math
03:17Alright, so that's really the basic core of an XML node
03:21And we really covered the topic of nesting tags now
03:24There isn't really a limit of how many things you could nest
03:27They could nest into a nest into a nest and the end of the day the the big question of the structure is really
03:32How do you want to structure it and how does it make sense for your actual application that you you're building?
03:37What is the structure that will make your code easier?
03:41really
03:41that's what you need to think about as we start connecting the dots and
03:44And bringing this in into a programming language, which we're going to look at a bit later
03:50So the last thing I want to talk about this now that we're ready to establish the fact that nodes could
03:55Elements nodes could have actually children and those children could be other nodes
04:00So this is a node just as much as this whole thing is a node this node contains the math element
04:06Well, this one just contains a simple string or a number
04:11All right
04:11Now there's one more rule for an XML because this is all you really need to know to be able to build already an XML
04:16The last thing you need to know the the point that really wraps the whole thing together is that your full XML document
04:24Your full document must be derived of only one node now
04:28We're gonna look deeper into that as we start building our application and I'm I'm a big fan of let's do this right now
04:34So let me just open up
04:36My editor I'm just editor of choice
04:39I'm just gonna open up a new empty file and in my new empty file
04:43first of all
04:43I have to give a if we start even just with our student one doing it just really quickly
04:48And we're gonna close our student
04:52Just as the same way as we've opened it and this time around and we could put a tab the tabs are fine
04:57You could space it out a bit
04:58I just pressed on my tab button to get a little bit of space
05:01We could have the math topic and our math want to always close whatever we open and it's really important to do that
05:09Let's add 40 in there. Now. Let's look at a couple. So before you move even onwards
05:13It's very important to always close something before you open up another thing
05:18Unless it's something inside of another thing. So another thing. So for example, you wouldn't close your math and
05:25let's say you wouldn't grab this and
05:28Just move it here
05:29You wouldn't close it that way that would be illegal because as soon as I close my student everything inside of it must be closed
05:36as well
05:36So you have to make sure that every and that's true for any node
05:40So you really want to make sure that whenever you open something you close it and if you have to put something inside of it
05:45you're gonna
05:47Again, make sure that whatever node you put into you're gonna open and close it within it and like that
05:51You're not gonna break the rules of XML
05:53Although HTML is a little bit more forgiving and a lot of places XML is not it's gonna break your XML
06:00all right, so the next step if we created math, let's just create let's say English and
06:06Let's just create one more and we're gonna call this sports
06:10So let's imagine in this fixed thick this is a little fictitious school
06:20The student only took took these topics and his English average was 80 and a sports average was 62
06:27All right
06:28So the numerical value now if I wanted to put more students I can't well
06:32I could just come here and copy and put another space here create another student
06:36I have two students only promise as we said previously
06:39We have one fundamental rule is our whole application our whole everything that's inside of our XML
06:45Must be a one unanimous element
06:48In other words, I'll have to create here something that will wrap our students so I could have your school for example
06:55And there we go
06:59And this is our tree structure where our school has two students and our students have three scores
07:06Each student has three scores or there might have been a scenario where maybe one of the students hasn't taken sports this year
07:12And here you go. So our structure is very very flexible. Some students might have specific scores while others
07:19Might not have or maybe we'll have a third student that has a completely different topic
07:23Maybe our second student is learning Spanish and maybe his scores in Spanish are really great
07:32Alright, so really this is the whole
07:35Nutshell of the most critical stuff about XML, which is actually the structure and the next few lessons before we actually start programming
07:42we're gonna look at a little bit more of the
07:45finer details of how to work with XML before we start jumping into a programming language and actually see how we actually
07:52implemented in reality
07:54So hope to see you in the next videos where we're gonna discover and dig a little bit deeper into other possibilities that we have
08:00In XML but at this stage, you know what XML is
08:02You know what the structure is if you're a little feel a bit weak on engine
08:06Stop you to stop the video and go to just your editor simple text editor and start creating some sample XMLs such as a
08:13student body where a school that has 10 students and different students that have different scores of
08:18something of that nature and
08:20Just make sure that you always anything you open you close and you make sure that you don't close you don't open something new
08:27And not close it and then open, you know, I don't mix things up basically
08:31So if you create a math open and close it you create an English open and close it
08:34You create a student make sure that it wraps everything that's inside of it and that everything is closed
08:39But as long as you go through that rule of every time when you open something you immediately close it
08:44It's gonna be very hard for you to make mistakes
08:46Now obviously there are some editors that will do this for you automatically
08:49But I encourage you in the beginning until you get really comfortable with it
08:53Don't use tools that make it automatic because you want to make sure that you understand it
08:57Because you never want to be in a scenario or something small breaks and then you can't fix it
09:01Alright, so that covers it for now and I really encourage you if this is complicated
09:05Take a break. Don't rush it because if you rush it, it's just gonna get more complicated. Just take a break
09:10You could always jump into our community to ask questions and if this all seems easy and quick
09:15So let's jump over to our next topic

Ready to Level Up Your Skills?

Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!

Enroll Now for Free!