Advanced XML with CSS part12 [w/ subs]



00:00:00 – so far we've seen how to style xml code
00:00:02 – using CSS and have the browser display
00:00:06 – the contents of XML tags instead of the
00:00:09 – xml document tree but the problem that
00:00:12 – we've run into is that we don't have a
00:00:13 – way to put labels in front of the
00:00:17 – content of the xml that's being styled
00:00:19 – and in this exercise we're going to see
00:00:21 – how to do that using CSS to so here in
00:00:26 – the example snippets file I've scroll
00:00:28 – down to the advanced xml with CSS
00:00:30 – section and i'm going to open up the
00:00:33 – business card underscore style
00:00:35 – underscores CSS to dot XML document and
00:00:38 – this is the document we're going to work
00:00:40 – on now you can see I made a couple of
00:00:42 – changes from the previous business card
00:00:45 – example first I've changed the route tag
00:00:47 – to say business cards instead of just
00:00:50 – business card because i want to have a
00:00:52 – container that can hold more than one
00:00:54 – business card and you can see here I've
00:00:56 – copied the first business card and and
00:00:59 – paste it down here at the bottom of the
00:01:00 – document so they have more than one
00:01:02 – business card in the file the third
00:01:06 – change I've made is introduced a new
00:01:08 – attribute called primary and you can see
00:01:11 – that following the rules of xml I've got
00:01:13 – the attribute name equals the name of
00:01:15 – the attribute as the value because i
00:01:17 – can't just simply have primary sitting
00:01:19 – there by itself so what we're going to
00:01:21 – do is write some CSS code that's going
00:01:24 – to put labels in the front of the
00:01:28 – content in the xml file so let's do a
00:01:31 – few things first let's go with snippets
00:01:32 – and let's copy the style sheet
00:01:34 – declaration here this is the processing
00:01:37 – instruction that associate the CSS with
00:01:40 – the xml file and we're going to paste
00:01:42 – that in here
00:01:44 – ok so now this XML document has the
00:01:47 – associated CSS code
00:01:50 – ok and we're going to open up that file
00:01:52 – right here this is business card
00:01:54 – underscore CSS to dot CSS and you can
00:01:57 – see that we've got a business card style
00:02:00 – declaration for each one of the business
00:02:02 – cards in the file so this tag right here
00:02:06 – or class name is going to match up with
00:02:09 – each one of these business card tab
00:02:12 – so let's go back to the snippets and
00:02:15 – what I'm going to do now is copy the
00:02:17 – code that defines the style sheets and
00:02:22 – i'm going to copy that and i'm going to
00:02:24 – paste it into the CSS file here and save
00:02:29 – it
00:02:29 – ok so let's take a trip through the file
00:02:32 – and see what's going on now if you watch
00:02:34 – the last exercise then the style
00:02:37 – declarations for each of the tags will
00:02:38 – look familiar to you all were doing is
00:02:40 – styling the contents of each one of the
00:02:43 – XML tags in the document but you can see
00:02:46 – that we've added a few things so here
00:02:48 – for example in the email style
00:02:51 – declaration i'm using a CSS to selector
00:02:54 – called the before selector to insert
00:02:57 – some content into the document what I'm
00:02:59 – inserting is the email label so by using
00:03:03 – the before pseudo-class this is going to
00:03:06 – put the string email in front of the
00:03:09 – contents of the email tag and similarly
00:03:14 – down here on the phone tag
00:03:17 – I've got the same kind of thing so the
00:03:20 – before pseudo class selector and the
00:03:24 – content is going to be the value of the
00:03:27 – type attribute so i'm using the content
00:03:29 – declaration here and the function adder
00:03:33 – will extract the value of the name of
00:03:36 – the attribute i pass in here which is
00:03:38 – type along with a colon and a space so
00:03:42 – if we go back to the xml document you
00:03:45 – can see that the type attribute has
00:03:46 – various values right there's mobile
00:03:48 – there's work there's facts so what this
00:03:51 – style declaration is going to do is get
00:03:52 – the value of that type attribute and
00:03:54 – then append this string to it and then
00:03:56 – put that in front of the contents of the
00:03:59 – phone tag and then for phone tags that
00:04:03 – have an attribute named primary i'm
00:04:07 – going to use the after pseudo class
00:04:09 – selector to put content after the
00:04:12 – contents of the phone tag and the string
00:04:15 – is going to be a parentheses with the
00:04:18 – value of the primary attribute which is
00:04:21 – just the string primary and a closing
00:04:24 – parenthesis
00:04:25 – so let's save this let's go out to the
00:04:28 – filesystem and now let's bring this
00:04:31 – document up in the browser and you can
00:04:34 – see that what's happening is now I've
00:04:37 – got to business cards both of them are
00:04:39 – being styled and you can see that labels
00:04:41 – are now showing up so in the case of the
00:04:43 – phone tags I've got mobile work and
00:04:45 – facts in the case of the email tag the
00:04:47 – string email and for the phone tag that
00:04:51 – had the primary attribute on it
00:04:53 – in this case it was the mobile one in
00:04:55 – this case it was the WorkOne the word
00:04:56 – primary appears after the content so
00:05:00 – let's go back to the code for a second
00:05:01 – all right just to be fully understand
00:05:03 – what's going on here is the primary
00:05:06 – attribute right here right on this phone
00:05:09 – tag and here it is on the second one
00:05:10 – down here
00:05:11 – ok let's go back to the CSS code so in
00:05:15 – CSS to you have some pretty powerful
00:05:17 – selectors you can apply styles if a
00:05:20 – particular attribute is present you can
00:05:22 – choose to do it either before or after a
00:05:24 – tags content and you can generate
00:05:26 – content based upon the values of the
00:05:29 – attribute so using CSS to we were able
00:05:32 – to apply some pretty advanced styling to
00:05:34 – our xml content so not just the contents
00:05:37 – of the tag but decorating them with
00:05:39 – labels so that the user get some useful
00:05:41 – information out of the content


Video Url:
http://youtu.be/FuRNIlx_4VI

(Visited 2 times, 2 visits today)

Comments

comments