LessThanDot Site Logo

LessThanDot

A Technical Community for IT Professionals

Less Than Dot is a community of passionate IT professionals and enthusiasts dedicated to sharing technical knowledge, experience, and assistance. Inside you will find reference materials, interesting technical discussions, and expert tips and commentary.

LTD Social Sitings

Lessthandot twitter Lessthandot Linkedin Lessthandot facebook Lessthandot rss

Note: Watch for social icons on posts by your favorite authors to follow their postings on these and other social sites.

Highly Rated Users

Forum
No Posts Rated

Top 50
Given
Received

Links

Wiki
Blog

Forum Statistics

Users
Members:
1879
Members Online:
1
Guests Online:
47

Total Post History
Posts:
81451
Topics:
18716

7-Day Post History
New Posts:
0
New Topics:
0
Active Topics:
0

Our newest member
mwojcik

Other

FAQ
All times are UTC [ DST ]

XML + XSLT = HTML

Please wait...

XML + XSLT = HTML

Postby kantboy on Wed Jun 13, 2012 11:15 am

Hello peeps,

I'm currently trying to teach myself xml/xsl transformation.

I've started off by using Google's secret weather API:

http://www.google.com/ig/api?weather=London+uk

I am currently at the very basic stage with the following XSL, but it doesn't seem to be returned the values from the XML, just the html. Can anyone tell me where I'm going wrong? I've read countless articles and tutorials and am no wiser....

  1. <?xml version="1.0" encoding="ISO-8859-1"?>
  2. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  3. <xsl:output method="html"/>
  4. <xsl:template match="weather">
  5.     <div id="WeatherWidget">
  6.         <xsl:for-each select="forecast_information">
  7.             <div id="header" title="City">
  8.                 <h1><xsl:value-of select="city"/></h1>
  9.             </div>
  10.             <div id="Date">
  11.                 <xsl:value-of select="forecast_date"/>
  12.             </div>
  13.         </xsl:for-each>
  14.         <xsl:for-each select="current_conditions">
  15.             <div id="Conditions">
  16.                 <div id="Current">
  17.                     <div id="ConditionDescription"><xsl:value-of select="condition"/></div>
  18.                     <div id="Icon"><img id="CurrentIcon" alt="" src="{icon}" /></div>
  19.                     <div id="Temperature"><xsl:value-of select="temp_c"/></div>
  20.                     <div id="Humidity"><xsl:value-of select="humidity"/></div>
  21.                     <div id="Wind"><xsl:value-of select="wind_condition"/></div>
  22.                 </div>
  23.             </div>
  24.         </xsl:for-each>
  25.     </div>
  26. </xsl:template>
  27.    
  28. </xsl:stylesheet>


I've tried various different versions but can't get it to work.

Also, is there an easier way of doing this, i.e. some software that tells me where the syntax is wrong etc. I'm currently coding it in Notepad++, saving as XSL, using MS Word (yes!) to open the api URL and then applying the XSL.

Eventually, when I get the hang of it, I'll be using this in SharePoint.

Cheers :thumright:
kantboy
Apprentice
Apprentice
LTD Bronze - Rating: 11
 
Posts: 28
Joined: Wed Jul 14, 2010 5:27 pm
Unrated

Re: XML + XSLT = HTML

Postby kantboy on Wed Jun 13, 2012 11:51 am

It's ok folks, panic over!

It seems the way google have the XML file, e.g. <condition data="Partly Cloudy"/>

I have to use /@data after the field name to get the data back. E.g.

<xsl:value-of select="condition/@data"/>


Sorted.... Onward and upwards. :D
kantboy
Apprentice
Apprentice
LTD Bronze - Rating: 11
 
Posts: 28
Joined: Wed Jul 14, 2010 5:27 pm

Re: XML + XSLT = HTML

Postby kantboy on Wed Jun 13, 2012 12:27 pm

Here's the final transformation if anyone wants it.

It's still not working in SharePoint though - the webpart timed out. Will have to look into that next...

  1. <?xml version="1.0" encoding="ISO-8859-1"?>
  2. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  3. <xsl:output method="html" encoding="ISO-8859-1"/>
  4.     <xsl:template match="xml_api_reply">
  5.         <div id="WeatherWidget">
  6.             <xsl:apply-templates />
  7.         </div>
  8.     </xsl:template>
  9.     <xsl:template match="weather">
  10.         <div id="WeatherHeader">
  11.             <xsl:for-each select="forecast_information">
  12.                 <div id="WeatherCity"><h1><xsl:value-of select="city/@data" disable-output-escaping="yes" /></h1></div>
  13.                 <div id="WeatherDate"><xsl:value-of select="forecast_date/@data" disable-output-escaping="yes" /></div>
  14.             </xsl:for-each>
  15.         </div>
  16.         <div id="WeatherMain">
  17.             <xsl:for-each select="current_conditions">
  18.                 <div id="WeatherConditions">
  19.                     <div id="CurrentCondition">
  20.                         <div id="ConditionDescription"><xsl:value-of select="condition/@data" disable-output-escaping="yes" /></div>
  21.                         <div id="WeatherIcon">
  22.                             <img>
  23.                                 <xsl:attribute name="src">http://www.google.com<xsl:value-of select="icon/@data" disable-output-escaping="yes" />
  24.                                 </xsl:attribute>
  25.                             </img>
  26.                         </div>
  27.                         <div id="Temperature">Temperature: <xsl:value-of select="temp_c/@data" disable-output-escaping="yes" />°</div>
  28.                         <div id="Humidity"><xsl:value-of select="humidity/@data" disable-output-escaping="yes" /></div>
  29.                         <div id="Wind"><xsl:value-of select="wind_condition/@data" disable-output-escaping="yes" /></div>
  30.                     </div>
  31.                 </div>
  32.             </xsl:for-each>
  33.         </div>
  34.     </xsl:template>
  35. </xsl:stylesheet>
kantboy
Apprentice
Apprentice
LTD Bronze - Rating: 11
 
Posts: 28
Joined: Wed Jul 14, 2010 5:27 pm
Unrated

Re: XML + XSLT = HTML

Postby kantboy on Wed Jun 13, 2012 4:14 pm

Guess what... I'm back!

After lots of searching and reading I found that someone has done exactly (almost) what I was attempting to do:

http://www.tomvangaever.be/blog/index.p ... 017-200726

Only better I guess because he's styled it and everything.... v. nice Tom.

He's even created a SharePoint webpart you can download and install for the lazy among us!

Only problem is - that's OK if you live in one place... In my company we have offices in several different cities, so here's another problem you all might be able to help with.

I have installed SPServices jQuery plugin and referenced it on the master page, which means on the page I'm able to pick up the office location and put it in the variable thisUserLocation.

Does anyone know how I can reference this variable in the XMLLink line of Tom's DWP, or directly into the SharePoint XML Viewer using my own XSL, so that the XML returned from the Google weather API is for the city in which the active user is located?

http://www.google.com/ig/api?weather=[Location Variable]

If I find out first, I'll let you all know :D
kantboy
Apprentice
Apprentice
LTD Bronze - Rating: 11
 
Posts: 28
Joined: Wed Jul 14, 2010 5:27 pm