www.netsi.dk » XSLT

Controling styles for individual websites on shared CSS

netsi — Thu, 09 Feb 2012 08:49:56 +0000

When working with CMS like Dynamicweb or Syncron VIA, you sometimes share stylesheet files across domains or subdomains. It makes sense to share common CSS codes when you want to some some common styles like fonts, colours or logos.

The same styles… almost…

It is also common that some small differences exists on subdomains, perhaps a campaign site or a site target for a specific group of people. You then need to apply some small changes to those sites. Ofcause you can do this in many ways, and the CMS you use will probertly be a part of your decision on how to implement it. Here is one way to do it:

Add a CLASS to HTML tag with some site related information.

For instance I could add this code to my blog:

<html class="wwwnetsidk"...

The rule should be simple, for instance:

Replace not-valid characters like “.” from the DOMAIN NAME to “nothing”

The reason it should be simpel is that it makes it easy to figure out what it should be for a given domain name. Things which are using the KISS (“Keep It Simple, Stupid!”) principle will more likely be used by people, as (in general) people are lazy (I know! , trust me.)

When this rule have been applied you can add extra lines to your shared CSS file like this:

html.wwwnetsidk {background-color: red;}

The princip is used widely, for instance by http://www.modernizr.com/ which addes a lot of feature related classes to your HTML element telling you for instance which HTML5 features are supported. Just look here at parts of what modernizr adds to your HTML document:

js no-touch postmessage history multiplebgs boxshadow opacity...

XSLT example from Syncron Via CMS

Here are an example of how I have implemented this feature in the Danish CMS system Syncron Via. The system is using XSLT a lot, and the code here is applied to the XSLT template used to render the outer Page data:


...

This is what I do: define the class to be added to the HTML element in a variable and add it to the HTML class attribute.

How to add entities to XSLT templates

netsi — Wed, 18 Jan 2012 12:52:39 +0000

When you work with XSLT you sometimes need special characters like “«” and “»”. You can define “entities” which can then be used in the document. Here is how:


stylesheet [
  
  
  
]>
stylesheet…

You add the lines marked above. They defined a relation between a entity name and a character code. For instance the “laquo” will make it possibel for you to use « when inserting a “«”.

HTML Entities codes

The website “entitycode.com” has a very nice structured overview of HTML Entities Codes. You can see the relation between characters, their entity name, the decimal code and a short description of the character. They are very well organised in categories, go and see it for your self…

Did you remember to exclude namespaces from output?

netsi — Mon, 16 Jan 2012 12:06:40 +0000

When you work with XSLT, transforming XML to for instance the web in some CMS system, you might use some extra namespaces. Perhaps the CMS offers you some utilitiy namespace to handle relevant datastructure or procedures. You add them to your XSLT but perhaps you forgot to tell the XSLT processor not to add the namespaces to the output? Well I do some times…

Namespaces in a XSLT template

Adding namespaces to get extra features in your XSLT templates is easy. You may or may not think about it, but you will allways add at least one namespace “xsl”. Using Microsoft Visual Studio and selecting “New XSLT…” you will probertly also get a MS namespace like this: “msxsl”. I all happens in the beging of the template like this:

stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxsl="urn:schemas-microsoft-com:xslt"
  exclude-result-prefixes="msxsl "
  xmlns:cs="urn:custom-cs"
>

In the above example there are three namespaces:

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:cs="urn:custom-cs"

The first one “xsl” is telling the XSLT processor that we are using XSLT and that the we will be using the XSLT rules defined in 1999 by w3.org.

The next one “msxsl” addes MS custom features and will give you some nice new features, for instance functions to format dates (ms:format-date Function).

The last one I use for adding custom C# code in my XSLT. That is a very powerfull way of extending the XSLT processor with your own custom .NET code. But please take care when doing that!

Removing the namespace from the output

If you use custom namespaces you may end up with the namespaces added to the output elements. In the above code you may observe that there is an attribute “exclude-result-prefixes” on the xsl:stylesheet tag. It is used to tell the XSLT processor which namespaces should not be added to the output elements. I have added “msxsl” but not “cs”. I the example I use XSLT in Dynamicweb CMS to generate HTML, so I may get output looking like this:

That is not what I wanted! To remove the “cs” namespace I simply need to modify the xsl:stylesheet attribute “exclude-result-prefix” to:

I have added the “cs” namespace, so I will now get a tag without the “cs” namespace in my HTML.

XSLT: Insert newline in output

netsi — Fri, 05 Aug 2011 08:54:35 +0000

To insert a linebreak you simply output the unescaped values of carriage return and linebreak, which is CR+LF (char 13 + char 10).

You may read more about newline on wikipedia.

Encode URL in XSLT

netsi — Wed, 02 Feb 2011 11:48:05 +0000

If you need to URL encode something in XSLT, you can use javascript serverside – not perfect, but it gets the job done. Here is the javascript and below you can find link to a simpel XSLT which has the script implemented.

1:

Find example XSLT here: http://dl.dropbox.com/u/3260327/xslt/js_encodeURL.xslt

XPath evaluation in Visual Studio 2010: TTXPathNavigatorVSIX

netsi — Sun, 28 Nov 2010 21:53:28 +0000

My daily tool for creating webpages is Visual studio 2010 (VS2010), but one thing which I think it lacks in are XML/XSLT related tools. One such thing is XPath related, XPath is the one of the building blocks of XSLT which I use often during my work with Dynamicweb CMS.

I found a free addin for VS2010 TTXPathNavigatorVSIX which I tried to download. The way you should install it is by:

Open Extention Manager and Select “Online Gallery”, now type “TTXPathNavigator” in the search field. You should get something like this:

Now click “Download” and after having accepted something the plugin is installed into your VS2010. You must restart VS2010 in order to make the plugin work, so do that. You simply press restart.

Using the plugin

After VS2010 has restarted you now have a new XPath query field as shown here below.

So off you go! XPathing away! Happy XPathing…

Or so I though.. I might have guessed by the lacking documentation on the page where I initially found the plugin, that I needed to do some trying out before I could start to use this very simple plugin. So to save your time here is what I found out:

Before using it you should know that it is a simple plugin:
- no highlighting of XPath results in the XML tree
- results are only presented in the output window. So you need to open (and pin) the output window. So open the debug window and pin it (so that it stays open)
In the output window you wil have to select to see the output from XPath navigator, and you might have to execute a XPath navigator before the option is there in the “Show output from” selectbox.
It only handles results which return a node-set, which is, well a limitation IMHO. What this means is that you cannot get a result from say this XPath:
count(//Page[string-length(@Icon)>0])
The good news!
You can actually double click on the output to goto the line containing the found element! Very nice!

My wish – an XPath generator!

To make things work perfectect in VS2010 it would be so nice to have a XPath generator! As you have when you debug XSLT in the watch area. I would love to be able to select an element or an attribute and right click to get the option: “Generate XPath” – wow, please someone create such a plugin and I will buy you a beer!

Improvements in Microsoft Visual Studio 2010, from a frontend webdevelopers point of view, part 1: javascript

netsi — Wed, 22 Sep 2010 21:48:39 +0000

Sometimes I have wondered just what the h**l they were thinking over at Microsoft: their flagship development tool just didn’t perform and deliver what you would expect from a tool of that caliber. That was before the Microsoft Visual Studio 2010 (VS 2010)! I will try to write about features in VS 2010 which makes me happy as a frontend web developer, hoping that you will gain something from it – and please do comment and share your experiences.

The background: What I missed…

I have during my 15 years career as web developer tried various development tools, and have touched the “backend” development side of web applications also. It seems that many rich development tools focus on the heavier backend development part of web application development with things like intellisense, snippets and so on. I have often wondered: Why should it be so difficult and not possible – especially in VS – to automate things, processes which is done many times every day? Rich development tools RDTs should support the “web craftsmen” trying to produce quality work. In real life “real” tools for craftsmen like a carpenter have evolved. Quality tools make the fundament for quality work! Anyway, we might just have got a piece of quality tool in VS 2010!

The new features – javascript

In this part I focus on javascript in VS 2010.

Javascript intellicence

jQuery embedded from local “standard” API javascript file.

It is near perfect now! The intellisense engine in VS 2010 seems to “think” nearly perfect. Say you want to use jQuery. If you include your jQuery API using a local version, you will get basic intellisense – that is objects inside the jQuery API will appear as you start typing. You will get relevant methods shown together with basic information about which parameters you can use. Okay, but it gets better!

Microsoft minimised version of jQuery still has intellisence

jQuery embedded from Microsoft at: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js
Using the MS CDN to get even a minified version of jQuery, you still get extensive intellisence!

Note:
After you have added any external script file you can update the javascript intellisense using [Shift]+[Ctrl]+J. For big APIs like jQuery this might take perhaps 20 seconds.

jQuery plug-ins handled as well in intelisence

Extra jQuery plug-ins added will also get intellisense, as expected, but also at the correct place
below you can see that I have added a script reference to the jQuery Cycle plug-in for jQuery. The “cycle” method now exists after I have used a jQuery selector $(‘#test’). The description of the method “cycle” however is not very useful – but that is because that the jquery.cycle.all.min.js file does not contain JavaScript documentation (more about that later).

If you think about it – VS 2010 is quit smart! It scans the cycle plug-in and sees that it extends the jQuery API. That is how it can figure out – I guess – that the cycle method fits in as a method on a found elements of the “$” (or jQuery) method. Nice feature!

Dropdown filelist simplified

Automatic dropdown file list when adding HTML code like “script”. Previously you had to click the “Pick URL…” and then point to the file which you wanted to use in your HTML document. Now you simply click on the file, if it is located at the same place as the current document. Nice.

”

Snippets – finally!!

I have written about snippets in Visual Studio in a previous post: Find Visual Studio Snippets ready for download on my DropBox folder, but it is first in VS 2010 that it is actually possible to execute snippets in HTML mode! (Why, why, why?). Anyway you can now! And VS 2010 comes with a few snippets installed.

Snippet types “Surround with” and “Insert snippet”
If you do not know how to activate them try the “surround with snippet” by pressing [Ctrl]-K, [Ctrl]-S. By doing that you get the chance to automate things like creating a JavaScript function using just two keyboard clicks and a mouse click. The Insert snippet can be archived using [Ctrl]-K, [Ctrl]-X. And remember: You can always create your own!

Just discovered that in fact Microsoft has not made it possibel to use snippets within CSS… Why, why, why???

Intellisence will execute your code dynamically to give better suggestions

Say you define a string “effect” and assign it a string value. This will make VS 2010 execute the assignment and then “guess” that your variable is of the type String. So at a late point in your code you try to use the variable, the suggestions given by intellisense will be relevant to that type (string). Look at the example below. To the left a variable “effect” and to the right an “int”, the suggestions are not the same. Smart! and you can do some pretty nice things when your code is dynamically executed – try visiting the JavaScript Intellisense Improvements with VS 2010 – on ScottGu’s Blog and have a look at those examples.

Your own intellisence using XML comments!

Now there is no excuse why you do not document your JavaScript code! VS 2010 offers easy documentation using snippets and XML comments! It is so easy, simply press [Ctrl]+K, [Ctrl]+X, choose “XML Comments” and what type of comment you want to insert. After having done and (of cause) filling out the marked fields, your code will be providing intellisense and suggestions when other people use it! Cool!

You can see below a simple function called “myhide”, The 3 lines below the function have been inserted using the above mentioned XML comments snippet. I defined a summary, a return definition and a param description. Voila! My function now has intellisense and build in help – which will without doubt be useful for me and others at a later state. You can make this part quit advanced with references to documentation files, assemblies and more.

Various small changes

You can zoom the work area as you can in your browser. Just hold down [Ctrl]while rolling the wheel of you mouse up and down. Guess that woud be nice for elderly people like me
All these improvements also apply to the free Visual Web Developer 2010 Express!

Find Visual Studio Snippets ready for download on my DropBox folder

netsi — Thu, 05 Aug 2010 10:52:35 +0000

I will be sharing future Snippets for use in Microsoft Visual Studio on my public dropbox here: http://db.tt/3p5Sav

At the time of writing only one is out there – it is “Surround in CDATA”. You may also read about that particular one here: Article on Stack Overflow: Can I define custom “surround with” templates in Visual Studio 2008?

Using XPath operator “//” aka “descendant-or-self” in XSLT

netsi — Tue, 08 Jun 2010 20:36:58 +0000

In my daily work as frontend developer at www.bleau.dk I do a lot of XSLT “programming” – XPath is one of the things you need to master most. With the focus mainly set on closing tasks I have not had the time to test a – well nice to know thing with the “//” XPath operator. Tonight I finally found out what had been a question in my mind for at long period:

The “//” (decendant-or-self) XPath operator: Can it be used relative inside a full XPath? Will it “search” from the Document top, or start where it is placed inside the XPath selector?

An example XML:

The two XPaths

//person[@name='Sten'] – Returns a nodeset containing 2 elements

//group[@type="frontEnd"]//person[@name='Sten'] – Returns a nodeset containing only 1 element

So as you can see the first one looked from the root (/People) and anywhere inside the document. The second one had the “//” inside a XPath, which in made the “//” operator look from the spot it was and below.

Conclusion

Well, I just got a litle wiser as I learned that I actually can use the “//” operator inside XPath selectors.

www.netsi.dk » XSLT

Controling styles for individual websites on shared CSS

The same styles… almost…

Add a CLASS to HTML tag with some site related information.

XSLT example from Syncron Via CMS

How to add entities to XSLT templates

HTML Entities codes

Links

Did you remember to exclude namespaces from output?

Namespaces in a XSLT template

Removing the namespace from the output

XSLT: Insert newline in output

Encode URL in XSLT

XPath evaluation in Visual Studio 2010: TTXPathNavigatorVSIX

Using the plugin

So off you go! XPathing away! Happy XPathing…

My wish – an XPath generator!

Improvements in Microsoft Visual Studio 2010, from a frontend webdevelopers point of view, part 1: javascript

The background: What I missed…

The new features – javascript

Javascript intellicence

Microsoft minimised version of jQuery still has intellisence

jQuery plug-ins handled as well in intelisence

Dropdown filelist simplified

Snippets – finally!!

Intellisence will execute your code dynamically to give better suggestions

Your own intellisence using XML comments!

Various small changes

Links

Find Visual Studio Snippets ready for download on my DropBox folder

Using XPath operator “//” aka “descendant-or-self” in XSLT

An example XML:

The two XPaths

Conclusion

Links