Video of Tech Head Brothers new authoring tool based on Word 2007

An article by Laurent Kempé No Comments

In the following video I present the different features of the new authoring tool for my portal Tech Head Brothers.

First you will see the use of ClickOnce to enable easy installation on the author computer. This will also allow an easy update scenario. A great plus compared to the past.

Then you will see the Word 2007 template using to author the content of an article. It shows:

1. Definition of the Title
2. Definition of the Description
3. Definition of the Keywords
4. Writing of the content of a section of content with bold, italic, list, hyperlink
5. Adding some sample code directly copied from Visual Studio 2008
6. Inserting sample code in a zip
7. Adding a picture captured using SnagIt yo the article
8. Offline preview in Internet Explorer
9. Posting to the Tech Head Brothers web site with Tags selection
10. Online preview of the posted content

Enjoy the video! (Without sound, I couldn’t find a micro at home :()

New step in my authoring tool using Word 2007

An article by Laurent Kempé No Comments

This evening I took the time to implement a new step on the new version of Tech Head Brothers authoring tool.

Now I am able to write an article in Word 2007 and post it using Web Services.

The next picture is the result of posting from Word 2007 on the web site using Web Services:

Here is how it looks like in Word:

To insert some source code sample as you can see on the Word 2007 picture or the web site, it is really easy. Go in Visual Studio, copy the code you want in the clipboard. Switch to Word 2007, then use the Source Code button:

To insert a picture, either use Windows Explorer to copy a file into the clipboard and paste it into the Word 2007 document, or use a tool like SnagIt from TechSmith (Thanks for the license by the way!!), make a screen shot, copy result into the clipboard and paste into Word 2007.

Is that easy!

This tool will make the authoring process on Tech Head Brothers so easy.

Wowwwwww effect of my new Word 2007 authoring tool

An article by Laurent Kempé 1 Comment

I have reached now another step on the new authoring tool for Tech Head Brothers portal by having some authors installing this new version and starting beta testing it. Has you can see, with the following twit, it seems that the tool is on the good way:

From Rédo (french blog)

Just try the new beta tool of publishing for http://www.techheadbrothers... .... that's the Wouawwww effect !!! ... sorry, it's NDA ;p about 23 hours ago

From Jon Galloway (blog)

@laurentkempe Like I said, I'd pay money for it, and I'm very cheap. Very cool. about 15 hours ago from web in reply to laurentkempe

This tool let all authors write articles using a customized Word 2007, preview it offline in Internet Explorer as it will be seen on the portal and finally post the article to the portal directly from Word 2007. It is a replacement of THBAuthoring, my old tool found on CodePlex.

To achieve this goal I am using quite some technologies. First Word 2007, Ribbon, .NET Framework 3.5 SP1, VSTO 3.0, OpenXML, WordML, XML Schema, XSLT. Than for sure C#, Linq to XML, Linq to Object.

For the installation I use ClickOnce. That’s a great improvement! I had so much issues with THBAuthoring.

From an author point of view you are using a almost normal Word 2007 document with different predefined styles, bold, list… There is two exceptions:

1. Source code
2. Zip with sample code

The usage scenario for the inserting Source Code into the Word document is as following:

1. Copy the code into the clipboard from Visual Studio 2008/2005
2. Position the cursor into the Word 2007 document where you want to insert the Source Code
3. Click on the button Source Code on the custom Ribbon
4. That’s it, easy no?

This brings clear text of the source code into the document and colored source code into the HTML preview.

The usage scenario for attaching the Zip with the sample code is also easy:

1. Click on the button Zip in the custom Ribbon
2. In the opening File selector dialog browse to your zip file and select one
3. That’s it, easy no?

Finally there is another usage scenario; inserting pictures:

1. From Windows Explorer copy a picture file
2. Position the cursor in the Word 2007 document
3. Paste
4. That’s it, easy no?

So, how does it work technically!

It works by doing a projection of the WordML to a well formed Tech Head Brothers XML document defined by an XML Schema. Then it uses a XSLT to produce HTML.

I hope to find the time to make a little video soon to demonstrate the way it is used!

Here is a picture of the tool

Tech Head Brothers new authoring tool, step 8

An article by Laurent Kempé No Comments

For three night now I focused on one scenario for the Tech Head Brothers authoring tool:

• As an author I want to be able to copy source code from Visual Studio and insert it into the authored Word document
• As an author I want to preview a document with source code inserted in Internet Explorer

This might not look really difficult at first, but I had some difficulties to fulfill the requirements of those two user story.

The first one was almost already implemented in step 7, using CustomXML capabilities of WordML.

The biggest issue I had was to figure out why when I was inserting CustomXML, the WordML format of the hyperlink was changing. It took me the most time to realize that inserting CustomXML was not the issue. The issue was proofing. Somehow inserting CustomXML was activating the auto proofing and then I got some error like on the following picture. The red underlined Brothers which is a link was the issue. In fact this simple thing change the WordML representation of the hyperlink.

As I had something working I had to find a way other than adding a second way to parse Hyperlinks. I came to the solution of disabling proofing then saving the document before making my projection to Tech Head Brothers XML. Then for sure re-enabling the proofing. Nice and easy!

The next issue was to be able at the time of parsing the WordML to identify that source code was at at the current position in the WordML. I turned and turned the problem, than asked some clever WordML guys (Julien, Pierre) and some generally good advisor (Mitsu, Cyril). Nothing! I finally came to a solution tonight:

1. Getting the Id of the PlainTextContentControl from the WordML
2. Searching for this Control in the Controls collection
3. Finally using the plainTextContentControl.XMLMapping.CustomXMLPart.XML property I had access to my CustomXML

I couldn’t find any way to do that parsing the WordML and honestly tonight I don’t know how it is possible to go from the WordML to the CustomXML.

The result is here!

Copying source code from Visual Studio

Inserting it in Word 2007

Final result in Internet Explorer

There is still a little bug with the spacing that will solved tomorrow or later!

Now the next steps will be:

1. Projection of hyperlink
2. Projection of picture
3. Projection of numbered list and bullet list
4. Fixing bugs found by Sébastien and Rédo
5. Picture caption
6. Giving the possibility to insert source code
7. Projection of the source code
8. Adding the possibility to the author to post the article directly from Word to Tech Head Brothers web site using secured web services made out of WCF
9. Adding all validation of the content

Tech Head Brothers new authoring tool, step 7

An article by Laurent Kempé No Comments

I finally got time to go on with the new Tech Head Brothers publishing tool!

This time I wanted to go on with source code and I reached a quite good status.

The usage scenario is as following:

1. In Visual Studio the author select source code that he wants to publish on his article
2. The author switch to Word 2007 an click on Source Code button and the code is automatically inserted

As you can see on the following pictures!

Behind the scene:

1. I get the code from the clipboard,
2. Build up a XML document with one tag representing the source code in html and inline css and another of pure text
3. Insert a CustomXML part into the Word 2007 document
4. Insert a PlainTextContentControl into the document with read only rights
5. Uses XML mapping to display the text tag into the PlainTextContentControl

Great! I look forward to see the projection of the source code to HTML and preview it into the browser!

So the next steps will be:

1. Projection of hyperlink
2. Projection of picture
3. Projection of numbered list and bullet list
4. Fixing bugs found by Sébastien and Rédo
5. Picture caption
6. Giving the possibility to insert source code
7. Projection of the source code
8. Adding the possibility to the author to post the article directly from Word to Tech Head Brothers web site using secured web services made out of WCF
9. Adding all validation of the content

Tech Head Brothers new authoring tool, step 6

An article by Laurent Kempé No Comments

Another day another step!

Tonight I wanted to work on the list and on the optimization a bit because I did use to much time the parsing of the whole WordML document.

I also tried the deployment through clickonce and two of my fellow tested it. Thanks to Sébastien Pertus and Grégory Renard (alias Rédo) for the quick test.

Here is the result; left window Word 2007 and right window Internet Explorer after clicking on the preview (Pré-visualisation):

As you can see the rendering is quite the same with pictures, bullet list with bold and link! and subection titles.

The preview is done very fast now and works using LINQ to XML to parse the WordML and doing a projection to Tech Head Brothers well formed XML, then a XSLT is run to produce the HTML.

And is fast again now after the optimization.

So the next steps will be:

1. Projection of hyperlink
2. Projection of picture
3. Projection of numbered list and bullet list
4. Fixing bugs found by Sébastien and Rédo
5. Picture caption
6. Giving the possibility to insert source code (but got an idea how to do it now).
7. Projection of the source code
8. Adding the possibility to the author to post the article directly from Word to Tech Head Brothers web site using secured web services made out of WCF

See you in the next post about my trip to a better community publishing tool for my portal Tech Head Brothers using Word 2007, WordML, C#, LINQ, VSTO 3...

Tech Head Brothers new authoring tool, step 5

An article by Laurent Kempé No Comments

Tonight my goal was to be able to view a picture into the web browser!

It is really cool to be able to copy a picture into Word, click on preview and see it in the HTML rendered out of my XML coming from WordML. So cool.

So the next steps will be:

1. Projection of hyperlink
2. Projection of picture
3. Projection of numbered list and bullet list
4. Giving the possibility to insert source code
5. Projection of the source code
6. Adding the possibility to the author to post the article directly from Word to Tech Head Brothers web site using secured web services made out of WCF

Tech Head Brothers new authoring tool, step 4

An article by Laurent Kempé 1 Comment

I took some time this evening to work a bit on the new version of the publishing tool for Tech Head Brothers.

Tonight goal was to be able to have a first preview of the HTML rendering in offline mode.

In this scenario an author launch the Tech Head Brothers Word 2007 template, write the content of his article, then click on preview ("pré-visualisation" on the picture) ribbon button. This is a full offline scenario.

Behind the scene, the C# code associated with the Word 2007 template will do a projection of WordML to my own XML document format using a predefined XML Schema. This projection is done using LINQ to XML. Then it will make a XSLT transformation on that projection result, save the result as a html file and launch Internet Explorer to see the result, as you can see on the picture:

I am still missing some projection code for hyperlink, list, pictures and source code. But it is a very good start after 3-4 evening of work.

So the next steps will be:

1. Projection of hyperlink
2. Projection of picture
3. Projection of numbered list and bullet list
4. Giving the possibility to insert source code
5. Projection of the source code
6. Adding the possibility to the author to post the article directly from Word to Tech Head Brothers web site using secured web services made out of WCF

I really like LINQ (hidden message to a friend at MS ;)

Tech Head Brothers new authoring tool, step 3

An article by Laurent Kempé 5 Comments

I started working on the GUI defining the Ribbon.

Now it was time to work on the mapping of the WordML to my XML Schema.

Here is a first result of a Word document in which I extract the different section, title and paragraph that are injected in a well formed XML document using my XML Schema.

Not bad after only some hours of work!

It is leveraging LINQ to XML to parse the WordML and build my targeted XML Document.

Aurel, Redo: What do you think?

Tech Head Brothers new authoring tool, step 2

An article by Laurent Kempé No Comments

Today I had the time to go on a bit with the new version of Tech Head Brothers, as you can see on the picture.

I decided to use my last article as a test case for the tool.

I went from the Ribbon (Visual Editor) to Ribbon (XML), it is not anymore grahical edition of the Ribbon but I can do more than what I was able to do in the Visual Editor.

I started to implement some parsing logic, I first made a trial with an idea of Sébastien Ros and Fabien Reinle but finally got back to LINQ to XML to parse the WordML.

The general idea is to output a well formed XML document out of the WordML document.

The architecture I decided to use at the moment is to have special Word styles mapped to some part of my target XML structure. Doing so I can easily parse the WordML like this to get all pagaraph with Heading1 style:

var sections = 
    from p in styledPara
    where p.Elements(w + "pPr").Elements(w + "pStyle").First().Attribute(w + "val").Value == "Heading1"
    select p;