Enhancing the Windows Workflow Designer

by Avatar Bill Henning (Actipro) - 3 comments
Monday, August 26, 2013 at 9:24am

BlogPostBanner

Last week we had a customer write us who was rehosting the Windows Workflow Designer in their own WPF application.  See these MSDN notes for documentation on how to do so.

The customer wanted to be able to use SyntaxEditor to create a custom VB Expression editor since it would allow them to have features like syntax highlighting and automated IntelliPrompt capabilities (via SyntaxEditor's .NET Languages Add-on).

In addition, the customer asked about being able to use our Docking/MDI product to add docking windows to host the designer's ToolBox and Properties windows.

We spent a few minutes and modified the Microsoft sample for rehosting the Windows Workflow Designer to integrate Actipro controls into it, and here's what we came up with:

Workflow

You can see how tool windows (fully dockable) host the ToolBox and Properties views and the designer is hosted in the tabbed MDI area.  In addition, SyntaxEditor (in single-line mode and with the .NET Languages Add-on) is used to provide automated IntelliPrompt features for editing expressions. 

This really improves the UI experience for end users.  If you are rehosting the Windows Workflow Designer in your own WPF app and would like the full source of our integration example, please write us and we'll be happy to send it to you.

UPDATE:  Check out this newer blog post showing off enhancements for automated variable IntelliPrompt features.

TaskDownload TaskLiveDemo TaskBuyNow

Code Writer v2.0 Released

by Avatar Bill Henning (Actipro) - 2 comments
Tuesday, August 13, 2013 at 9:18am

Informative Live Tile

In the past, Code Writer had a plain tile, which is still the case when no documents are open.

LiveTile1

For version 2.0 we wanted to make the live tile really useful.  Now the live tile will list the documents you have open:

LiveTile2

In this screenshot, there are five documents open, sorted by the order in which they were last accessed.  A checked box means that the document is unmodified.  An unchecked box means that the document has pending changes that need to be saved.  Also, as in previous versions, the number at the bottom right corner indicates the total number of unsaved documents that are open.

The tile is also very intelligent and updates its display based on how big it is and how many documents are open.  If in the above screenshot only four documents were open, it would switch back to a single column display mode so that longer filenames could be visible.

LiveTile3

In this screenshot, we've switched to a smaller tile.  Since there are five documents open, not all of them can be listed on the four available lines.  Thus we show the last three that were accessed, along with a "+ 2 more" to let you know that you have five total documents open.

With all this information, you have a heads-up display right on your Windows start screen about what you're working on in the app.  We love this new feature!

Document Print Support

End users have asked for printing support and we've delivered it in v2.0.  You can print a document by opening the Windows 8 Devices charm or simply by pressing Ctrl+P.

Printing

Once a printer is selected, a flyout will display that shows a preview of what will be printed.  Numerous options are also available, such as the ability to turn off syntax highlighting, show/hide line numbers, or show/hide whitespace markers.

Since Windows 8 allows you to print to an XPS Document Writer, you can print right to an .OXPS file (similar to a PDF) and send it to other colleagues or review it later on other machines.

Block Auto-Indent

Block auto-indent has been added, which kicks in when Enter is pressed within a curly brace pair for the C, C++, C#, CSS, Java, JavaScript, Lua, Perl, PHP, PowerShell, Python, and Ruby file types.

image(40)

With the caret in between the curly braces in this JavaScript code, Enter is pressed.

image(41)

The result is that the text after the caret moves two lines down and the caret indents on the middle line.  This really helps typing efficiency.  For some more detail, see the related SyntaxEditor post.

Nested CSS and JavaScript Editing Improvements

Block auto-indent, delimiter highlighting, and delimiter auto-complete have been added to CSS and JavaScript sections that are nested in HTML, ASP, ASP.NET, and PHP file types.

Twilight Background Theme

The Add Document, Help, and Release History screens have always been rather spartan:

DocumentAddPlain

This look remains the default when you first start Code Writer.  While this is great and adheres to the Metro principles, we wanted to spruce things up by adding a new optional Twilight theme:

AddDocumentTwilight

The twilight theme still keeps focus on the content as every good Windows Store app should, however it renders a night sky with a star field at the top, and multiple cloud layers at the bottom.  Best of all, if you scroll the screen, you'll encounter parallax scrolling of the theme's elements.

The Twilight background theme option can be activated on the General flyout via the app's Settings charm.

Improved Copy and Share

Past versions of Code Writer supported clipboard copy and sharing via the Windows Share charm.  In v2.0, we improved these areas further.

Share

Here we see the Share charm flyout, where I've shared the document I'm editing.  Notice how now the text that is added to the message is fully syntax highlighted and line breaks are passed correctly, both of which are part of the v2.0 improvements.

Copying text to the clipboard and pasting in other apps such as OneNote will also retain syntax highlighting.

Code Writer is smart in that if you have a dark editor theme active, all the syntax highlighting used for sharing and copying will be done in the light background theme so that it shows up properly in other apps.

Protocol Activation

This version adds protocol activation support.  This means that you can enter codewriter:// in your browser to open Code Writer.

Commands can also be passed to Code Writer:

  • codewriter://add - Opens the Add Document screen.
  • codewriter://help - Opens the Help screen.
  • codewriter://open?path=c:\document.txt - Opens the document at local path "c:\document.txt".  Note that due to Window Store app security, the file will not be accessible unless you have previously opened the document in Code Writer using the Browse dialog.

All of the protocol-based commands listed above can be easily executed from PowerShell by using the Start-Process cmdlet. This example shows how to open a local file (be aware of security notes above):

  • Start-Process "codewriter://open?path=c:\document.txt"

Tutorial Overlays

In past versions, Code Writer would display a mostly textual introduction screen the first time you used it.  We never really liked that concept and wanted a more visual tutorial.  In v2.0, when you first visit the Add Document and Editor screens, you are now presented with a single page tutorial overlay that gives some quick tips on how to use the page.

Tutorial

The screenshot above shows the Add Document screen tutorial.

Miscellaneous

Numerous miscellaneous improvements have also been made:

  • The mouse back button now simulates clicks on page back buttons.
  • A Help button to access app documentation has been added to the Add Document screen's app bar.
  • Minor user interface improvements have been made such as subtle outlines to the Add Document screen's items.
  • Updated document save code to reduce memory usage for large documents.
  • Fixed a bug where JavaScript sections in HTML weren't being syntax highlighted.

Summary

As you can see, this release adds a ton of great new features.  Be sure to grab it.

Go to the Windows Store to download Code Writer, and help us by tweeting about the app!

TaskWideLearnMore TaskWideWindowsStore

WPF Controls 2013.1 Build 583 Released

by Avatar Bill Henning (Actipro)
Wednesday, August 7, 2013 at 12:45pm