The Actipro Blog - WPF and WinForms Development

First video of SyntaxEditor for Silverlight - Syntax-highlighting code editor control

Bill Henning (Actipro) — Mon, 02 Nov 2009 15:48:00 -1200

A couple months ago we make a post on our blog asking if anyone would be interested in a port of our SyntaxEditor for WPF control over to Silverlight. We’ve had some tremendous feedback, both via comments on that posting and via e-mail, so we’ve moved forward with development on the product.

What is SyntaxEditor for Silverlight?

As many of you know, SyntaxEditor for WPF is the premier syntax-highlighting code editor control for the WPF platform. It is being constructed with a new next-generation object model based on our years of experience with SyntaxEditor for WinForms, the market leader in the WinForms platform. We’ve made a lot of posts about SyntaxEditor for WPF’s features in this blog.

The Silverlight version of SyntaxEditor is essentially a large subset of SyntaxEditor for WPF’s object model. For those who have used SyntaxEditor for WPF, the entire text/parsing library is completely converted to Silverlight. This means all the document, syntax language, parsing, etc. code works in Silverlight exactly the same as in WPF. The UI layer is mostly the same as well. Many of the UI features found in the WPF version are already implemented where possible in the Silverlight version.

What can I use it for?

The possibilities are endless. Want to have a web-based source code browser where you can edit your code from anywhere right in the browser? Want to build a web-based IDE? Want to just use the editor in read-only mode to provide rich visualization of code?

SyntaxEditor for Silverlight would fit right into any of those conceptualizations.

Let’s see the video!

Without further ado, let’s take a look at the first video of SyntaxEditor for Silverlight. In this video, I fire up the editor in an Internet Explorer page and do some typing and selection. Note that syntax highlighting is being driven from a syntax language that was created with our WPF Language Designer application.

I also have the smoke text effect enabled, which shows off the new adornment layers feature we’re currently working on. The smoke text effect is not something you’d normally have enabled in a production application, but it is a neat example of what you can do with our adornment layer framework.

Summary

There still is a lot of work to do on the Silverlight version before it would be production-ready. However we are trying to make some progress on it each day. And as we add any new features to the WPF version going forward, we are adding them to the Silverlight version at the same time.

We don’t have any target release dates at this point, but keep your comments coming and we’ll continue posting more details on the control.

SyntaxEditor for WPF - Testing adornments with text smoke effects

Bill Henning (Actipro) — Wed, 28 Oct 2009 09:21:09 -1200

Lately we’ve been working on starting to add adornment layer capabilities to SyntaxEditor for WPF. Each adornment layer can contain any sort of UIElement-based adornment. For example, in our updated design for version 2009.2, the editor view selection itself is now an adornment layer, where the selection visual is a shape. Custom adornment layers can be created and managed.

They can be inserted anywhere in the z-order of adornment layers too. This means that you can put adornments on top of the text, or you could alternatively choose to show them in between the selection and text layers, etc.

This adornment layer model is a huge extensibility point and will be used as the foundation for many visual features going forward. Once implemented, things like squiggle (wave) lines and collapsed outlining node markers will adornment layers.

Smoke text QuickStart

We wanted to do a neat sample to ensure the layers perform well at run-time. What we came up with is smoke text! :)

Basically, as you type, smoke rings rise out from where the caret is and change location, size, and opacity, thereby creating a neat smoke effect. The static picture doesn’t do the effect justice. Check out a captured video after the break.

Video capture

Here is the video of the smoke text effect in action:

How did we do that?

This sample is pretty simple. It just has a SyntaxLanguage defined that allows a smoke text adornment manager to be defined for any view that attaches to the language. The actual adornment layer in this case is positioned behind the selection layer. This way, the selection, caret, and text always appear in front of the smoke.

The adornment manager listens for text changes and if the view has focus, it makes an animated smoke effect where the caret is. The hardest part of it really was just coming up with the randomized transforms on the animated smoke rings.

Summary

You’ll also want to notice the horizontal gray highlight in the background of the line being modified. That is another adornment prototype that does current line highlighting. It essentially highlights the view line that currently contains the caret.

The adornment layer features are targeted to be part of the WPF Studio 2009.2 release in the next month or two. We still have a lot of work to do on it but this is too neat of a sample not to blog about. As you can see, with our upcoming adornment layer features, the sky is the limit on what you can do within the editor.

WPF Studio 2009.1 build 506 released with many major updates

Bill Henning (Actipro) — Tue, 20 Oct 2009 09:42:46 -1200

Build 506 of WPF Studio 2009.1 is available for download now. It is one of the larger WPF Studio maintenance releases we’ve made. Let me do a quick review of some of the major exciting new features. In addition to this list, there are a lot of other minor enhancements made.

See our related forum announcement for exact details on what updates were made in each product.

	Docking/MDI for WPF Custom content in docking window tabs Any content can now be placed in docking window tabs. This screenshot shows an animated progress indicator in one tab and a drop-down button in the other tab. Resize slots in a SplitContainer New features have been added making it possible for you to resize the slots of a SplitContainer however you like. This screenshot shows a split container with an even distribution of space for its slots. Cascade and tile tabbed MDI documents You now can cascade, tile horizontally, and tile vertically tabbed MDI documents. This screenshot shows how six tabbed documents are tiled horizontally. New WindowControl features WindowControl has several new options and even allows custom content to be in the title bar. This screenshot shows a small progressbar in the title bar. Close tabs with middle-click An option has been added to allow tabs to close with a middle-click, much like in some popular browsers.
	Editors for WPF Improved min/maximum value support The built-in editors have had support for min/max values improved.
	Navigation for WPF New Windows 7-like expander style A new style has been added that renders similar to the Windows 7 expanders and even has smooth animation. The style is customized for each system and Office theme. Built-in expander styles updated to support all expand directions We’ve updated all our built-in expander styles so that all expand directions are supported: up, down, left and right.
	PropertyGrid for WPF New textbox and dialog button property editor We’ve added a new built-in property editor that uses a TextBox and includes a button that can be used to show a dialog.
	SyntaxEditor for WPF Finalized language definition format This build finalizes the new language project and language definition XML formats. All language samples have been updated to use them instead of the classic SyntaxEditor 4.0 for WinForms dynamic language XML definition format. Language Designer application Very major improvements (several weeks of dev time) have been made to the Language Designer application. It has a number of helpful tools for quickly getting started building a syntax language for use with SyntaxEditor. It now just takes a few minutes to get up and running, even for SyntaxEditor newbies. Automated quick info session processing We’ve added a new quick info provider service that can be added to a language. This service watches for mouse hovers and just asks you what to display in response to hovers over different areas of the editor. Quick info can be displayed for hovers over the text area, or any other part of the editor such as in margins. View mouse hover event A new view mouse hover event has been added. We handle all the processing for determining when to fire it. Caret and selection brush customization You now can completely customize the look of the caret and selection. Don’t like our default settings? Change them however you like! Completion list display when user starts typing a word We’ve added a new feature to make it easy to know if the user is starting to type a new word, so that a completion list can display in response. MGrammar tokens now get assigned a token key We’ve updated tokens generated from the Oslo Dataflow Add-on to provide an IToken.Key value if a TokenKey attribute is specified in the original MGrammar source
	Shared Library for WPF Unique tooltip for PopupButton popup indicator We’ve added a new PopupIndicatorToolTip property to PopupButton, which allows the popup indicator to display a unique tooltip, rather than the tooltip for the main button area.

SyntaxEditor for WPF Language Designer enhancements (part 8)

Bill Henning (Actipro) — Wed, 14 Oct 2009 08:56:51 -1200

In the previous post of this series, the Language Designer generated some C# code for our ECMAScript language that can be used in your applications. In today’s post we’re going to look at the other generation option, which is to output language definition files.

Generating a language definition file

By checking the “output a language definition” checkbox, our code files list changes to only show one file, a file with a .langdef extension.

The EcmaScript.langdef file is intended to be deployed with your application and loaded at run-time. The nice thing about language definitions is that end users can tweak them as needed. This is a lot trickier to do if you have dedicated C#/VB classes for your language.

Let’s take a peek at what was generated…

If you are a SyntaxEditor for WinForms customer, you’ll see a similarity to the dynamic language XML definition format although some of the tag names are tweaked here.

The language definition file can be loaded in one line of code:

        1: editor.Document.Language = 

       2:     new SyntaxLanguageDefinitionSerializer().LoadFromFile(path);

There also is a LoadFromStream option that loads from any Stream, which is useful if you embed the .langdef file as an embedded resource in your application.

Next steps

We hope you have enjoyed our series on the Language Designer. We’re currently finishing up some features in it and are converting over a bunch of language samples to the new language definition format before these updates can be released. We hope to have it all wrapped up in the next several days.

SyntaxEditor for WPF Language Designer enhancements (part 7)

Bill Henning (Actipro) — Tue, 13 Oct 2009 06:24:08 -1200

In the previous post of this series we built the language project in the Language Designer, found that there was an error, and resolved the error. Now that all the errors have been eliminated, we are ready to generate code.

Code generation configuration pane

The code generation configuration pane has fields where we can enter the namespace in which any generated C#/VB code will be placed, along with the output folder in which files are to be created.

There also is an option to output a language definition (.langdef) file instead of C#/VB code files.

For today’s post we’ll output C# code files. Incidentally the Options tab has buttons that let you select the output language for code files.

This pane also shows the list of files that can be generated for our language. With just several minutes of work seen in our previous steps, our ECMAScript language project already has six classes that can be generated.

Let’s take a look at a couple of them.

The EcmaScriptSyntaxLanguage class

The EcmaScriptSyntaxLanguage is a class that inherits SyntaxLanguage and is what you would create an instance of in your application. Once you generate all the files to your hard drive and include them in your project, your language is ready for use with this sort of code:

        1: editor.Document.Language = new EcmaScriptSyntaxLanguage();

Pretty easy, isn’t it?

To see what code is generated for this class, we’ll use the Preview Selected feature:

The code is generated on the fly and opened in a new document window with full syntax highlighting. Note how clean and concise code is written, and how all code is fully commented so that you know what it is doing. Your creator and copyright information (indicated in the General Properties pane) is also inserted in the summary comments of each class generated.

This constructor code auto-registers all the services that have been created in the Language Designer such as a lexer, token classifier factory, and example text provider. More service support will be added in the future as well.

The EcmaScriptLexer class

Next, let’s look at the lexer class that is generated and registered as a service in EcmaScriptSyntaxLanguage. The lexer implements the ILexer interface.

In its constructor it proceeds to build a dynamic lexer via code. The dynamic lexer contains all the states and patterns we previously created using the New Dynamic Lexer Wizard and then later modified using the Lexer pane in the Language Designer.

Some SyntaxEditor 4.0 for WinForms veterans may be wondering what happened to the XML definitions for dynamic lexers. Well those are still available via the checkbox option to generate a language definition file instead of code files.

Generating code to disk

To generate this code to disk, we simply click the Generate All button back on the code generation configuration pane. All the files are written to disk and can be included in your project for immediate use.

The classes are all partial classes so that they can be extended in other files without worry of your enhancements being overwritten the next time you generate code.

Next steps

In the next post, we’ll select the option to generate a language definition instead of code files and will see how to load it at run-time.

SyntaxEditor for WPF Language Designer enhancements (part 6)

Bill Henning (Actipro) — Mon, 12 Oct 2009 09:25:03 -1200

In the previous post of this series, we looked at the dynamic lexer that was generated from the New Dynamic Lexer Wizard. Today we’re going to examine the validation and error checking features provided by the Language Designer.

Building the project

If we click the Build Project button in the ribbon, the Language Designer examines all aspects of the language project that is loaded and reports back any errors, warnings or messages that it thinks of. This can be anything from you forgetting to enter a required field, to a classification key for a lexical pattern group being invalid.

If we build the project for our ECMAScript language project, we are presented with one error.

Note the error in the Error List tool window telling us that we need to set an output folder path.

Fixing the error

When we double-click the error in the list, the Code Generation pane is opened and the focus moves to the control we need to update. We’ve included features like this to make it easy for you to jump directly to the problem that was recognized so that you can spend your time fixing the issue rather than trying to hunt down where the issue is. This is a real time-saver.

The status bar

When doing builds, the status bar always indicates if the build was successful or failed and the time at which it was performed. If there are any messages from the build, the count is also displayed.

Next steps

We’ve now seen how to build a project to make sure there are no errors. Once a project is error-free, code can be generated for it.

In the next post, we’ll look at the code generation configuration pane, where we’ll output some code for our language.

SyntaxEditor for WPF Language Designer enhancements (part 5)

Bill Henning (Actipro) — Fri, 09 Oct 2009 07:26:15 -1200

In the previous post of this series we looked at how the New Dynamic Lexer Wizard generated a lexer for us that we could live test immediately. In today’s post, we’ll look more in-depth at the dynamic lexer that was generated.

What is a dynamic lexer?

A dynamic lexer is a lexer that uses patterns to determine how to tokenize text. Patterns can be explicit, which mean the pattern matches the exact characters in the pattern. Patterns can also use regular expressions. This allows for incredible flexibility that you won’t find in other products. And remember that dynamic lexers are only one type of lexer that are supported in SyntaxEditor.

The wizard results in-depth

We use the treeview on the left to navigate the parts of the lexer. In this screenshot, we have selected the Lexical States node.

All of the lexical states defined in the lexer are listed. One or more can be selected and have its properties be edited directly in the property grid on the right. Note that our wizard generated a default state along with states for strings and comments.

The ribbon contains several buttons that may be used for modifying list selections. In the screenshot above we have the mouse cursor over the Move Down button. The Move Up and Move Down buttons allow you to reorder items in a list. Ordering states and patterns properly in dynamic lexers is very important.

Now let’s click the Add button.

The Add Dynamic Lexical States dialog appears. A similar dialog appears when adding other features like lexical macros. In the dialog you enter one state key for each new lexical state you wish to create. Pressing OK adds new states with the specified keys and then you use the property grid to configure them.

Now let’s cancel and click the Child States node of the Default state.

Here we see a list of references to other states that can be transitioned to from the default state. Scopes are used to determine when states transition. For instance, a string state will transition when a double-quote character is seen.

Next, let’s click on Pattern Groups. This is where the meat of a lexer is. Each pattern group defines one or more patterns that can be recognized. The group can be designated as an explicit or regular expression pattern. Whenever a pattern is matched against text, a specified token ID/key are assigned to the token that is created. This token is also assigned a classification type key, which is used to drive syntax highlighting.

Pattern groups also can set their case sensitivity option (or inherit from parent) and can set various look-ahead and look-behind patterns that must be true for a pattern in the group to be matched.

Let’s right-click the Operator pattern group, which opens the Dynamic Lexical Patterns dialog.

This dialog gives us some high-level info about the pattern group being edited and lets us modify all its patterns. You simply enter one pattern on each line and click OK to save.

Next let’s click on the Scopes node of the PrimaryString state.

Here we see the scope for the PrimaryString state. It has a start and end pattern group. The start pattern group says that this state is entered when a double quote is seen. The end pattern group says this state is exited when a double-quote or line feed are seen. This state also has its own other pattern groups we could modify by going to its Pattern Groups node. Those pattern groups define how to tokenize text that is within the two double-quotes.

Next steps

Now that we have looked through what the wizard generated, our next post will focus on doing a project build, which does some really nice robust validation of our language project settings.

SyntaxEditor for WPF Language Designer enhancements (part 4)

Bill Henning (Actipro) — Thu, 08 Oct 2009 05:18:54 -1200

In the previous post of this series we used the handy New Dynamic Lexer Wizard in the Language Designer app to quickly configure a dynamic lexer for our ECMAScript language.

A glimpse at the dynamic lexer result

It took about a minute to enter the data in the wizard and the result is a very good start on our lexer. You can see from the following screenshot that the Dynamic Lexer appears in the tree on the left, along with its structure.

The wizard created five lexical states based on the information we entered. We’ll get into some of the details of what was created in the next post. For now though, let’s check out another really neat feature of the Language Designer… live test!

Live test

By clicking on the Live Test button in the ribbon, we open the Live Test pane. This pane contains a SyntaxEditor control. A language is built on-the-fly using the lexer and classification information defined in the project. The language is assigned to the SyntaxEditor and voila, we have a live test of your language!

Note that the example text we defined in the General Properties is pulled in. We can see that the comments are being colored, along with keywords, strings, and numbers. Again all this was created by spending a minute entering information in the New Dynamic Lexer Wizard. It doesn’t get any easier than that.

The status bar also tells us the lexical state and token that the caret is at. If the caret is at the start of a token, an asterisk (*) appears after the word token. The line, column, and character positions of the caret are indicated on the right.

Right now the Live Test just shows syntax highlighting, but as we add more feature areas into the SyntaxEditor product and the Language Designer, we plan on more enhancements to this pane.

This pane provides the ideal place to test out your language, right in the application in which you are creating the language. To refresh the live test with changes you make in other panes, simply rebuild your project.

Next steps

In the next post, we’ll jump back to the Lexer tab to look more in-depth at what the wizard created and how we can modify the dynamic lexer.

As always, we’d love to get your feedback. Like what you see? Have some ideas to improve things even more? Please post your comments!

SyntaxEditor for WPF Language Designer enhancements (part 3)

Bill Henning (Actipro) — Wed, 07 Oct 2009 02:44:53 -1200

In the previous post of this series we started the Language Designer and entered some high-level general properties about the language we’re going to create, which is ECMAScript. Today we’re going to use a wizard to quickly create a dynamic lexer for our language. With the features described below, we have specifically tried to make the generation of a new language as easy as possible for new customers.

Selecting a lexer type

A new language project doesn’t have a lexer defined. When we click the Lexer button in the ribbon, the Lexer pane is opened. We are presented with a Lexer Type sub-pane that allows us to choose the type of lexer to use.

For our ECMAScript language sample, we’ll use a Dynamic lexer so select Dynamic in the radio button list and click the Change Lexer Type button. This opens the New Dynamic Lexer Wizard.

The New Dynamic Lexer Wizard

The New Dynamic Lexer Wizard is the fastest way to create a new lexer for a language. It asks you a series of questions about your language and it generates a lexer for you. This takes most of the guesswork out of creating a lexer from scratch and gets you a working lexer in minutes.

For our ECMAScript language, we’ll use some specifications found on the Mozilla web site for ECMAScript (http://www.mozilla.org/js/language/E262-3.pdf).

Overview

The first page that opens in the wizard is an overview. It allows you to select whether to walk through the wizard to create a lexer or whether to just make an empty lexer instead.

For this walkthrough we’ll choose the first option.

Line terminators and identifiers

This page asks whether line terminators are significant and asks for a general guideline on identifier syntax.

For ECMAScript we’ll choose that line terminators are significant and we’ll use standard identifier syntax. Note that the output from this wizard is completely modifiable after the wizard completes.

Keywords

On this page, we paste in the list of keywords for the language and indicate their case sensitivity.

The wizard uses whitespace to delimit the keywords in the textbox. This makes it easy to paste keywords directly from a table in a web page or PDF language specification. The wizard will also auto-sort the keywords following completion.

Operators

On this page, operators for the language are pasted in. A button can be used to auto-insert the most common operators used in most languages. Also check which delimiters have special meaning in the language.

For ECMAScript, we’ve pasted in the operators listed in the language specification and marked that parenthesis, curly and square braces are all significant.

Strings (primary syntax)

On this page, we indicate the primary string syntax.

For ECMAScript, we select double quotes with backslash escapes as the primary syntax.

Strings (alternate syntax)

On this page, we indicate the alternate string syntax.

For ECMAScript, we select single quotes with backslash escapes as the alternate syntax.

Numbers

On this page we choose which number literal types to support.

For ECMAScript, we choose all integer, real, and hex numbers.

Comments

On the final wizard page, we input the syntax for comments.

For ECMAScript, we choose // to start single-line comments and /* */ to be the multi-line comment delimiters.

Next steps

When we press the Finish button, a new dynamic lexer is initialized for us based on the language profile information we entered. In the next post, we’ll examine what was created. Stay tuned!

SyntaxEditor for WPF Language Designer enhancements (part 2)

Bill Henning (Actipro) — Tue, 06 Oct 2009 01:39:40 -1200

This post is the second post in our series on upcoming enhancements to the SyntaxEditor for WPF Language Designer application. The previous post gave a high-level over view of the application and talked about language projects and definitions.

One of the more common questions we receive related to SyntaxEditor is: How do I get started creating a new language definition? The updates we’re doing to the Language Designer right now are attempting to directly address that question.

First opening the application

When you first open the Language Designer, no language project (.langproj file) is loaded so you are presented up-front with several Start Actions.

The Start Actions include a number of items also found on the ribbon’s application menu: New Language Project, Open Language Project (with links to recently-opened projects), and Import SE4 Definition.

The New Language Project action (highlighted above) will create a new blank language project. Open Language Project allows us to search our hard drive for a previously-created language project. Clicking on a recently-opened .langproj filename reopens it. Finally, the Import SE4 Definition action allows us to import a SyntaxEditor 4.0 for WinForms dynamic language XML definition file, and use it to create a new language project.

We’ll pick the New Language Project action so that we can start with a blank language project.

General properties

As soon as a new language project is created, the General Properties pane is opened. This pane allows you to configure the high-level properties of the language.

In our sample, let’s create a language definition for ECMAScript. Anytime the Language Designer asks for a “key,” that key should be assumed that it may be used in code generation. Thus is must comply to the identifier naming guidelines for C# and VB. We’ll set our language key to EcmaScript and our language description to ECMAScript. We’ll also set our company name as the Creator and an appropriate Copyright. Finally we’ll set some example text for the language that we can use to test our syntax highlighting later on.

Next steps

In the next post of this series, we’ll use a wizard to quickly create a lexer for our ECMAScript language.

SyntaxEditor for WPF Language Designer enhancements (part 1)

Bill Henning (Actipro) — Mon, 05 Oct 2009 03:23:53 -1200

Many customers of our WinForms and WPF SyntaxEditor controls have asked for an easy way to get started building language definitions. Languages definitions can be confusing when you are new to the product. As we have been working on our next generation SyntaxEditor framework (used in the WPF version), we decided that having a robust Language Designer application would be extremely useful for customers. The Language Designer is intended to be the ideal place to go when building a language definition for use with SyntaxEditor.

First builds

Up until now, the Language Designer (included with the WPF SyntaxEditor) was very simplistic and only allowed you to generate several classes that could be used with programmatic lexers. It is and always has been our goal to add a lot more functionality to the app as we move forward and the next WPF Studio maintenance release will make a big step towards that goal.

Language projects and definitions

Also of note is that up until now, the WPF version of SyntaxEditor has been able to load the SyntaxEditor for WinForms dynamic language XML definitions directly. We had that code in place as a stub until we could finalize a newer more flexible XML format that would work for all kinds of languages, not just ones with dynamic lexers.

In the next WPF Studio build, we have created language project files (.langproj) and language definition files (.langdef). Language project files are what can be loaded and edited by the Language Designer app. The Language Designer app can import a SyntaxEditor for WinForms dynamic language XML definition to create a new language project based on it.

The language project stores a lot of information about your language such as lexer configuration, classification types, etc. We still have a lot of other language-related features that we want to make editable via the Language Designer and won’t make the cut for this next build. But these other features will be added in the future.

The Language Designer then can let you generate code based on your language project. The generated code may include C#/VB code, and/or a language definition file. The language definition is a file that can be loaded at run-time to auto-configure a language for use. Think of it as the replacement for the WinForms dynamic language XML definitions.

Features in-depth

Over the coming days, we’ll blog with some screenshots showing the numerous enhancements we’ve recently made to the Language Designer. These updates will be in the next maintenance release of WPF Studio, which will be released as soon as the Language Designer updates are complete and documented.

The next post will describe running the app for the first time and how to get started creating a new language project.

SyntaxEditor for WPF – Auto-showing a completion list when typing a new word

Bill Henning (Actipro) — Fri, 02 Oct 2009 02:43:39 -1200

One feature that has been requested from several customers is the ability to show a completion list in response to starting to type a new word. This functionality can be seen in Visual Studio 2008. It can be thought of the same as typing in a letter that is a new word, and clicking on the VS 2008 “Display an object member list” button.

Displaying a completion list in response to a language-specific character

A previous build already added a property into the document text changed event arguments called e.TypedText that is filled in only if the text change was caused due to a single typing operation, in which case it contains the text that was typed by the end user. This allows you to handle that scenario (either via the SyntaxEditor.DocumentTextChanged event or via an IEditorDocumentTextChangeEventSink service implementation) and show a completion list when characters like “.” or “<” are typed. Of course the characters you respond to depend on the language in use.

Here is a sample of how to display an JavaScript completion list in one of those handlers in response to a “.” character being typed:

        1: switch (e.TypedText) {

       2:     case "<":

       3:         // Open completion list session here

       4:         break;

       5: }

Note that the completion list code (defined elsewhere) is responsible for knowing what to show and when. These features are already available in the current build.

Displaying a completion list automatically when a new word is starting to be typed

We were thinking how could we make it easy so that customers can also optionally have their languages show a completion list when a new word is starting to be typed. The event args already give you all the information you need to determine if a new word is being typed, however it does involve a few lines of tedious text scanning. So we wrapped it all up into one handy property. Here is the code you’d add to your switch statement above if you wish to support automatic display of the completion list for word starts:

       1: switch (e.TypedText) {

       2:     case "<":

       3:         // Open completion list session here

       4:         break;

       5:     default:

       6:         // If the text that was typed is a letter char that starts a word... 

       7:         if (e.IsTypedWordStart) {

       8:             // If no completion session is currently open...

       9:             if (!editor.IntelliPrompt.Sessions.Contains(

      10:                 IntelliPromptSessionTypes.Completion)) {

      11:                 // Open the completion list session here

      12:             }

      13:         }

      14:         break;

      15: }

The new e.IsTypedWordStart property is only true when a single letter character is typed and that letter is starting a new word. The word determination code uses the IWordBreakFinder service defined for your language too.

This new feature will be included in the next WPF Studio 2009.1 maintenance release.

Actipro Blog 2009 Q3 posting summary

Bill Henning (Actipro) — Thu, 01 Oct 2009 15:40:55 -1200

What we accomplished

In Quarter 3 of 2009 we focused on adding some significant value to our existing products while adding some new DataGrid support.

SyntaxEditor for WPF saw the implementation of the multi-threaded syntactic/semantic parsing framework, integration with ANTLR parsers via a new add-on, AST construction and error reporting features for the MGrammar add-on, and robust hit testing.

DataGrid for WPF was introduced as a new free product for our customers. It is a couple of add-ons that provide behavior extensions, new themes, and Editors for WPF integration with the open source Microsoft WPF DataGrid control.

Docking/MDI for WPF added tab tinting, standard MDI window icons, and magnetism features.

What’s coming next

Right now we’re doing some very major enhancements to the SyntaxEditor Language Designer tool, so that it will be very easy to create language definitions used by SyntaxEditor for WPF. Once these enhancements are complete and documented, we’ll publish what will probably be the final WPF Studio 2009.1 maintenance release. More information will be posted soon on the updates we’re doing.

Following the final 2009.1 release, we will be working on some big updates for a WPF Studio 2009.2 version that shouldn’t be too far behind. One cornerstone feature of 2009.2 will be floating documents like those found in VS 2010. We have some other surprises planned as well.

Blog post list

Here is a quick categorized list of blog postings made in this quarter.

SyntaxEditor for WPF

DataGrid for WPF

WPF Studio integrates with and adds features to the official Microsoft WPF DataGrid

Docking/MDI for WPF

Editors for WPF

New WPF Studio maintenance release adds numerous Editors improvements

Windows Forms

Latest UIStudio and SyntaxEditor for WinForms builds help prevent memory leaks

General

VS 2010-like floating document features coming soon to Docking/MDI for WPF

Bill Henning (Actipro) — Thu, 24 Sep 2009 02:06:17 -1200

We’ve been hard at work on some very major new Docking/MDI for WPF features that will be coming in the WPF Studio 2009.2 release. In this post I’d like to give a quick preview of some enhancements: floating documents, maximizing rafting windows, and custom rafting window chrome.

Here is a screenshot showing the new enhancements:

VS 2010-like floating documents

The biggest new feature is the ability for tabbed documents to be able to be dragged outside of the MDI area into a floating state, where they can be placed on a second monitor if desired. In the screenshot, the WelcomeDocument.rtf docking window is a document window. It can be docked anywhere in the tabbed MDI area or can be floated such as it is shown. Note the document’s icon even appears in its titlebar.

Maximizing rafting windows

Rafting windows are containers for docking windows that are in a floating state. Now all rafting windows can have the ability to toggle between maximized and restored states. You can see the maximized button on each of the rafted windows in the screenshot.

Custom chrome for rafting windows

All rafting window titlebars and borders in version 2009.2 will have a custom chrome that matches the current application theme. In the 2009.1 version, rafting windows let the system draw the titlebars and borders. By having the rafting windows be themed, they truly match the application’s theme. This is especially useful for our built-in themes like the Office blue, silver, and black ones. The rafting window in the screenshot that contains the Solution Explorer and Class View shows the new chrome, in this case for Aero theme.

Release timeframe

We have one more WPF Studio 2009.1 maintenance release planned for the coming weeks. After that we will prepare for the first WPF Studio 2009.2 release, which will contain all the functionality described here.

Remember that if you purchase WPF Studio 2009.1 now, you will get the 2009.2 version free when it is released since all WPF Studio license purchases come with a year of free upgrades to new versions.

Next SyntaxEditor for WPF build gets mouse hover and IntelliPrompt quick info providers

Bill Henning (Actipro) — Thu, 10 Sep 2009 02:43:59 -1200

One highly requested feature for SyntaxEditor for WPF is the ability to be notified when a mouse hover occurs so that IntelliPrompt quick info tips can be displayed in response. Since WPF doesn’t include a mouse hover event, we implemented one ourselves that fires for editor views.

We didn’t stop there though. We wanted to make it simple for a language to provide quick info popups in response to mouse hover events. Thus we came up with the new IQuickInfoProvider service. This service can be registered with a language. It has three methods on it:

        1: object GetContext(IHitTestResult hitTestResult);

       2: object GetContext(IEditorView view, int offset);

       3: void RequestSession(IEditorView view, object context, bool canTrackMouse);

We offer a QuickInfoProviderBase abstract class that should be used as a base class for any implementations of IQuickInfoProvider that you create. QuickInfoProviderBase fully implements mouse tracking such that when a mouse hover occurs over an editor view, it calls the GetContext overload that accepts an IHitTestResult. The IHitTestResult comes from our previously-discussed hit testing feature. The default implementation of this overload is to call the other GetContext overload if the hit is over a character in the text area.

The GetContext methods should return some object that gives detail about what is at the specified hit or offset, or a null reference if it is not important. This could be some object as simple as an IToken or some more complex context object. The important part is that it supports value equality (Equals method implementation) since as the mouse moves, the context returned by GetContext is compared against the context of any already-open quick info session to see if the existing session should be closed or kept open.

By using GetContext, the quick info provider knows when the mouse moves outside of the the region that is appropriate to an already-open quick info session, and when to open a new quick info session. Once a new quick info session is needed, the RequestSession method is called. It is passed the editor view instance, the context object returned by GetContext, and whether the mouse should be tracked (false when quick info is displayed in response to a toolbar button click for example).

Your RequestSession implementations are expected to create a new quick info session, store the passed context in the session, generate content for the quick info popup, and open the session (display the popup).

By using this new provider mechanism, it’s very easy for languages to automatically support quick info display with a minimal amount of work. All the mouse handling is done for you. This feature will be in the next build and we’ve updated our quick info sample to show how easy it is to use.

Next SyntaxEditor for WPF build gets configurable caret and selection brushes

Bill Henning (Actipro) — Thu, 03 Sep 2009 05:14:39 -1200

The next build of SyntaxEditor for WPF will have a number of new properties added to the SyntaxEditor control that let you configure the caret and selection brushes used in the control:

CaretBrush
SelectionBackgroundActive
SelectionBorderActiveBrush
SelectionBackgroundInactive
SelectionBorderInactiveBrush

We’ve also built a new QuickStart showing how easy it is to change colors and give your editor a truly unique look.

These sort of features will also be available in the upcoming Microsoft .NET 4.0 release for common controls such as TextBox too. See this post for caret brush details and this post for selection brush details.

With these new features in SyntaxEditor, you’ll be able to ensure your SyntaxEditor caret and selection brushes match those of the other native WPF controls, even when you create custom themes.

Is there interest in a syntax-highlighting code editor control (SyntaxEditor) for Silverlight?

Bill Henning (Actipro) — Mon, 31 Aug 2009 02:43:12 -1200

We’ve had several people e-mail us asking if our SyntaxEditor for WPF product will be ported to Silverlight. Our efforts in this area will depend on how much interest there is in such a product.

SyntaxEditor for WPF is the premier syntax-highlighting code editor control for WPF. A potential Silverlight version could contain a large subset of the features found in the WPF version.

We want to know what all you Silverlight devs out there think! Please post some comment replies here or e-mail us and answer as many of the questions below as you can. Your feedback will help determine if we move forward on a SyntaxEditor for Silverlight or not.

Questions

The biggest question… is a syntax-highlighting code editor control something you would actually purchase and use in your Silverlight applications?
Please rank in priority order the required features you would need at a minimum to make the control worth purchasing.
Please rank in priority order the optional features that you’d like to see, but wouldn’t be absolutely necessary.
If the information isn’t confidential, please give a general description of what you would be doing with the control and how specifically you’d be using it in your Silverlight applications.

Thanks for your comments!

WPF Studio integrates with and adds features to the official Microsoft WPF DataGrid

Bill Henning (Actipro) — Thu, 27 Aug 2009 09:45:00 -1200

In the most recent WPF Studio 2009.1 builds, we've integrated with and enhanced Microsoft's open source WPF DataGrid.

The WPF DataGrid (from the WPF Toolkit) comes packed with lots of features and has very active and helpful community forums. Actipro has built two add-ons for the WPF DataGrid and added a variety of samples.

Actipro WPF DataGrid Contrib

The Actipro WPF DataGrid Contrib is an open-source project, which is a collection of DataGrid attached behaviors, commands, and extensions. In addition, we've added the ThemedDataGrid, which is simply a restyled version of the WPF DataGrid. We've tweaked the system themes to look more professional out of the box and added three sharp Office 2007 themes (blue, black, and silver). The themes are also integrated into our Shared Library's ThemeManager, which allows the theme to easily be changed dynamically during runtime.

This project is hosted on CodePlex (http://actipro.codeplex.com) and is freely available for anyone to use. A compiled version of this assembly is included in the WPF Studio installer, so it's easy to get started. We will be continually adding features to Actipro WPF DataGrid Contrib and would love to hear your thoughts and requests.

Actipro Editors/DataGrid Interop

When we released our Editors for WPF product we included two interoperability assemblies, which make it extremely easy to use the Editors' controls in our PropertyGrid for WPF and Ribbon for WPF products. Now Actipro Editors/DataGrid Interop makes using the Editors' controls in the WPF DataGrid just as easy. It includes derivations of DataGridColumn that leverage the Editors' controls and can be added to the DataGrid.Columns collection. Several common properties of the controls are exposed by the DataGridColumn derivations, making it easy to configure.

Columns are included for the following controls:

BrushEditBox
ColorEditBox
DateTimeEditBox
DoubleEditBox
GuidEditBox
Int32EditBox
Int32RectEditBox
MaskedTextBox
PointEditBox
RectEditBox
SizeEditBox
TimeSpanEditBox
VectorEditBox

This assembly is provided for free to anyone who has a license to the Editors for WPF product.

Summary

The WPF DataGrid is packed full of features, is highly customizable, and is backed by Microsoft and a very active community. The add-ons provided for free by Actipro make using the WPF DataGrid easier. Download WPF Studio today and get started.

SyntaxEditor for WPF adds robust hit testing features

Bill Henning (Actipro) — Wed, 26 Aug 2009 10:07:10 -1200

The lastest build of SyntaxEditor for WPF added a very robust hit testing feature. This is something that has been in the WinForms version for SyntaxEditor for a while and has been highly requested by our WPF customers.

The feature allows you to provide a Point (generally a mouse location) and SyntaxEditor returns detailed information about what is under the Point. You can get offsets, text positions (line/col), text, tokens, etc.

How does it work?

A hit test can be performed by first obtaining a Point relative to the SyntaxEditor's coordinates and then calling the SyntaxEditor.HitTest method. This method returns an object of type IHitTestResult.

        1: IHitTestResult result = editor.HitTest(Mouse.GetPosition(editor));

The hit test result

The IHitTestResult object contains information about exactly what is at the location being hit tested. It has a Type property that provides a high-level categorization about the result, such as does the result specify the location was over a character in the text area, over a margin, over a splitter or scrollbar, etc.

A VisualElement property provides a reference to the FrameworkElement that was used as the result. So if the location was over a ScrollBar, that is what would be returned in this property.

When the location is over an IEditorView, that view is returned in the View property. If the location is over a margin in the view, the related IEditorViewMargin is returned in the Margin property.

If the location is over a character in a view’s text area, the Offset and Position properties are filled in with the exact position of the character within the view’s Snapshot (also made available in the result). If the location is not directly over a character (such as when it is over a margin), the Offset and Position of the closest character is returned. The Type property can be used to determine if the location was over a character or not.

There also is a helpful GetReader method that returns an ITextSnapshotReader initialized to the Offset. This allows you to instantly get the character at the offset, or get the token there. You can navigate around the Snapshot’s text/tokens using the reader.

The new hit testing QuickStart

We’ve added a QuickStart to demo the new hit testing feature. As you move the mouse over anything in the SyntaxEditor instance (splitters, scollbars, margins, text area, etc.), the TextBox below it displays details about the hit test result.

In the screenshot above, the mouse cursor is over the r in the word QuickStart on line #7. The hit test information is telling us the snapshot version at the time of the hit test, which view it’s over, the offset and text position (both zero-based), the character, and information about the token that contains the offset.

Summary

As you can see, we’ve built this hit testing mechanism so that the result gives you everything you need to know about what is at a particular location. It is extremely useful for reacting to mouse move or hover events.

SyntaxEditor for WPF’s MGrammar add-on adds AST construction and error reporting features

Bill Henning (Actipro) — Tue, 25 Aug 2009 10:11:00 -1200

SyntaxEditor for WPF, our syntax-highlighting code editor control, has just made some big improvements to the Oslo Dataflow (MGrammar) Add-on. The enhancements include the ability to asynchronously parse text and return AST and syntax error results. These updates appear in the latest WPF Studio build.

What is the Oslo Dataflow (MGrammar) Add-on?

The add-on is a free component that any SyntaxEditor for WPF customer can use. It allows you to easily integrate parsers created via MGrammar with SyntaxEditor. Previously, the add-on supported tokenization (lexing) and was able to drive syntax highlighting within the editor, all with just a few lines of code, as described in this previous post.

Parsing, AST construction, and error reporting

The add-on now includes a new DataflowParser class that implements IParser. When registered with your language, documents using the language that are changed (generally by user typing) automatically log a request to have parsing done. The parsing requests are queued and call back to the IParser on a worker thread. At this point the IParser performs a parsing operation. In the case of DataflowParser, the parsing operation is a call to Oslo’s DynamicParser. Our DataflowParser then returns an object of type IDataflowParseData, which has a property containing the AST graph node result along with a list of IParseError objects, if any. The IParseError objects indicate syntax errors that occurred during the parse.

The screenshot above shows the updated sample included with WPF Studio. It now listens to the document’s ParseDataChanged event, which is an event that fires whenever the document’s ParseData property is updated. From this event, we write out the AST in the pane on the right and list the errors, if any, on the bottom.

Again, the parsing operation takes place on a worker thread, courtesy of our advanced parsing framework, and the result is returned asynchronously to the document’s ParseData property. This ensures that the parsing doesn’t block the UI thread.

Enabling the new parsing features

One line of code added to the code described in this previous post enables all the multi-threaded functionality to parse your documents and update the ParseData property asynchronously:

   1: language.RegisterService<IParser>(new DataflowParser(parser));

What this does is register a new DataflowParser object as an IParser service with the language being used. The parser variable in the code above is assumed to contain a DynamicParser instance, which is what is loaded from your MGrammar image.

Summary

With these recent updates, your MGrammar-based parsers can completely drive SyntaxEditor’s lexing, syntax highlighting, parsing, AST construction, and error reporting, all with just a few lines of code. It’s now easier than ever to add a code editor to your WPF applications that integrate with your MGrammar DSLs.

The Actipro Blog - WPF and WinForms Development

First video of SyntaxEditor for Silverlight - Syntax-highlighting code editor control

What is SyntaxEditor for Silverlight?

What can I use it for?

Let’s see the video!

Summary

SyntaxEditor for WPF - Testing adornments with text smoke effects

Smoke text QuickStart

Video capture

How did we do that?

Summary

WPF Studio 2009.1 build 506 released with many major updates

Docking/MDI for WPF

Custom content in docking window tabs

Resize slots in a SplitContainer

Cascade and tile tabbed MDI documents

New WindowControl features

Close tabs with middle-click

Editors for WPF

Improved min/maximum value support

Navigation for WPF

New Windows 7-like expander style

Built-in expander styles updated to support all expand directions

PropertyGrid for WPF

New textbox and dialog button property editor

SyntaxEditor for WPF

Finalized language definition format

Language Designer application

Automated quick info session processing

View mouse hover event

Caret and selection brush customization

Completion list display when user starts typing a word

MGrammar tokens now get assigned a token key

Shared Library for WPF

Unique tooltip for PopupButton popup indicator

SyntaxEditor for WPF Language Designer enhancements (part 8)

Generating a language definition file

Next steps

SyntaxEditor for WPF Language Designer enhancements (part 7)

Code generation configuration pane

The EcmaScriptSyntaxLanguage class

The EcmaScriptLexer class

Generating code to disk

Next steps

SyntaxEditor for WPF Language Designer enhancements (part 6)

Building the project

Fixing the error

The status bar

Next steps

SyntaxEditor for WPF Language Designer enhancements (part 5)

What is a dynamic lexer?

The wizard results in-depth

Next steps

SyntaxEditor for WPF Language Designer enhancements (part 4)

A glimpse at the dynamic lexer result

Live test

Next steps

SyntaxEditor for WPF Language Designer enhancements (part 3)

Selecting a lexer type

The New Dynamic Lexer Wizard

Overview

Line terminators and identifiers

Keywords

Operators

Strings (primary syntax)

Strings (alternate syntax)

Numbers

Comments

Next steps

SyntaxEditor for WPF Language Designer enhancements (part 2)

First opening the application

General properties

Next steps

SyntaxEditor for WPF Language Designer enhancements (part 1)

First builds

Language projects and definitions

Features in-depth

SyntaxEditor for WPF – Auto-showing a completion list when typing a new word

Displaying a completion list in response to a language-specific character

Displaying a completion list automatically when a new word is starting to be typed