www.netsi.dk

"The internet is just a layer on the real world" (don't forget that!)

Category Archives: XSLT

How to add entities to XSLT templates

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

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet [
  <!ENTITY laquo "&#171;">
  <!ENTITY raquo "&#187;">
  <!ENTITY hellip "&#8230;">
]>
<xsl: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 &laquo; 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…

 

Links

Share

Did you remember to exclude namespaces from output?

When you work with , transforming XML to for instance the web in some CMS system, you might use some extra namespaces. Perhaps the CMS offers you some utilitiy 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 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:

<xsl: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:

<ul xmlns:cs="urn:custom-cs">

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

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

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

Share

Encode URL in XSLT

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

   1:    <script language="javascript" xmlns="urn:schemas-microsoft-com:xslt" implements-prefix="js">
   2:      <![CDATA[ 
   3:       This will return a URI encoded string
   4:      function encodeURL(sUrl) {
   5:        sUrl.MoveNext();
   6:        sUrl = sUrl.Current.Value;
   7:        return (sUrl);
   8:      }
   9:      ]]>
  10:    </script>

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

Share

XPath evaluation in Visual Studio 2010: TTXPathNavigatorVSIX

My daily tool for creating webpages is (VS2010), but one thing which I think it lacks in are XML/ related tools. One such thing is related, is the one of the building blocks of 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:

This is how the tool appears in the online gallery found under Extention Manager in your Visual studio 2010

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.

This is a screenshoot taken by the tool creator

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)

    You find the debug window under Debug - Windows - Output

  • 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.

    image

  • 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! Smiley

Share

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

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 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 , 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 –

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!image

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!

 

The intellisence works perfect

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.

 

”Dropdown filelist simplified

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 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!

Using the surround with snippet

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.

Intelligence sugestions are related to the type of your variable...

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.

Here goes your excuse for not documenting your javascript code anymore! XML Comments in javascript.

 

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!

 

Links


Share
					

		

			
			
		

		

	
								






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

			
		

			
In my daily work as frontend developer at www.bleau.dk I do a lot of  “programming” –  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 . 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:




<?xml version="1.0" encoding="utf-8"?>
<people>
  <group type="frontEnd">
    <person name="Sten" />
  </group>
  <group type="backend">
    <person name="Sten" />
  </group>
</people>


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. 


Links



Share