Modern Markup Languages and Their Application

Iteration

Iteration 02: XSL transformations, XPath


In this task, we will continue with the domain of Spotify - but this time with some transformations. We will transform an XML file to an HTML file - don't worry if you are not familiar with HTML yet.

In the `iteration-02` folder, you can find following folders/files:

  • `assets` folder => contains images and styles, do not change its content
  • `mock` folder => contains an image of the result, just to help you compare your output with the expected one
  • `data.xml` => the XML document to be transformed with XSLT => do not change this file
  • `app.xsl` => the template for your XSL transformation files; you can change this file as you need.

Your task is to complete the `app.xsl` file so that the output is an HTML file, looking like this:
Writing HTML elements will be very similar to writing XML elements. You should not see a difference now. Appropriate element tags are indicated for you in the `data.xml` document - each element has either:

  • a `tag` attribute => value of `tag` is the tag to be used in the transformation for a given element
  • doesn't have any `tag` attribute => then it's, by default, a `div` tag
For example:
will be written in XSL as:
and its HTML output will look like this:
since the value of `tag` is equal to `span`. The tag value is the only thing you can manually "copy" from the XML to the XSL document. Everything else needs to be handled with a proper XSL and XPath expressions.

For attributes in the `data.xml`, it holds that each attribute has the same name as the attribute on the transformed element. In other words, let's look at the example above again and notice that:
  • `playlist-title` element has a `class` attribute
  • `span` element has also a `class` attribute and the value is the same as in the `playlist-title` element
There are only two exceptions for attributes in `data.xml`:
  • the `active` attribute on `list-item` elements => this one is not supposed to appear as an attribute in the transformation, but its value determines the class value:
  • `active == true` => `class` value is `nav__item nav__item--active`
  • `active == false` => `class` value is only `nav__item`
  • the `tag` attribute, its purpose is purely to help you with HTML tags
A final recommendation is to break the whole transformation into multiple files.

After you have your transformation complete, check your output `html` file => it should be easy to open the file in your browser. If you're satisfied with your solution, please submit all the `.xsl` files. Do not submit the `html` output though - we will generate it automatically.

If anything is unclear, please ask in our discord server or directly ask your tutor - we can help you if you're stuck.

[Monday, 15:35] UPDATE: If you have already downloaded the iteration, please check that in the `app.xsl`, the `head` section looks exactly like this:
Snippet removed, not actual any more - please see the latest update.

If not, change it to the above - either pull it from the `upstream/iteration-02` branch or change it manually.

[Tuesday, 14:54] UPDATE: There is no `src` folder, so it was renamed to `iteration-02` in the assignment => no need to update the repository, this was a bug of the assignment only.

[Wednesday, 13:55] UPDATE: Please check that the `app.xsl` template part looks like this:

```xml

    <xsl:template match="/">
        <xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html&gt;</xsl:text>
        <html lang="en">
            <head>
                <!-- metadata and fonts/styles linking -->
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <title>Spoti Welcome</title>
                <link rel="preconnect" href="https://fonts.gstatic.com" />
                <link rel="preconnect" href="https://cdnjs.cloudflare.com" />
                <link rel="preconnect" href="https://fonts.googleapis.com" />
                <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300" rel="stylesheet" />
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
                <link rel="stylesheet" href="assets/css/style.css" />
            </head>
            <body>
                <!-- our app -->
                <main class="application">
                    <!-- TODO: Continue with the task -->
                </main>
            </body>
        </html>
    </xsl:template>

```

Finally, good luck!
Předchozí
Následující