The Actipro Blog

All the latest UI control development news from Actipro

SyntaxEditor - Incremental Search

PostBannerSyntaxEditorDevNotes

Another new feature is coming to SyntaxEditor for WPF, WinRT/XAML, and Silverlight in the next maintenance release: incremental search.

What is Incremental Search?

Incremental search is a way for the end user to quickly search for text in a document without needing to interact with search dialogs or panes.  With a couple keyboard strokes, the end user can instantly start searching for text.

How It Works

To start incremental search mode, press Ctrl+I and start typing some characters. The characters will be accumulated into a find text string and used to search the document for the next instance of the find text, which will be selected.

IncrementalSearch

Press Ctrl+I to move to the next match, or Ctrl+Shift+I to move to the previous match. Continue typing characters to append to the find text. Backspace can be used to remove characters from the find text. Esc can be used to deactivate incremental search mode.

The WPF and WinRT versions are capable of showing custom cursors while incremental search is active, enabling the end user to have a visual indicator of the current mode.  Silverlight unfortunately doesn't allow for custom mouse cursors.  It is recommended that all platforms also show some sort of status bar indicator.  In the screenshot above, you can see how the StatusBar is updated as I type to show the current find text.

Summary

Incremental search is already available in SyntaxEditor for WinForms and will now be in the other SyntaxEditor platforms after the next maintenance releases.

TaskDownload TaskLiveDemo TaskBuyNow

SyntaxEditor Adding Multi-Line Editing Features

PostBannerSyntaxEditorDevNotes

We've got an exciting new SyntaxEditor feature to announce that's been desired by a number of customers.  And best of all, it's coming to all our supported platforms:  WPF, Silverlight, WinRT/XAML (coming very shortly), and WinForms.

The new feature is the ability to edit multiple lines when a block selection is active, also known as column editing.  First, let's review block selections.

Block Selection

Block selection occurs when you hold Shift+Alt and press the arrow keys.  For instance if you press the Shift+Alt+Down shortcut a couple times, you create a block selection that in previous versions would end up selecting the entire three lines since its selection was zero-width (no real characters were selected).  If you then pressed Shift+Alt+Right, it would make a rectangular selection that is three lines tall and one character wide.

At this point you could extend the selection further and then copy it, move to a new location in the document, paste it, and the entire block would be pasted in place there.  This is a very handy editing feature in some scenarios.

Changes to Block Selection

In the next SyntaxEditor releases, we have altered how things work when you have the zero-width block selection.  Again this is the scenario where you start with no selection and press Shift+Alt+Down a couple times.  In the updated code, we now no longer show selection over all the lines and instead, render a thin line that displays where the block selection is.

BlockEditing1

In the screenshot above, you can see the blue lines that indicate the location of the zero-width block selection.

BlockEditing2

If we extend the block selection to the right, it become a rectangle that covers the class attributes.  We now can delete that by pressing Del.

Multi-Line Editing

Now let's get onto a demonstration of the new features coming for multi-line editing.

BlockEditing3

Again, I've created a zero-width block selection and now I'll start typing.

BlockEditing4

I've typed in the div tag again but I only did it once.  It automatically entered the characters I typed on each line that was part of the zero-width block selection.  That's pretty neat!

Not only does normal character typing work while doing multi-line editing, but Tab (indent), Shift+Tab (outdent), Del (delete next character), Backspace (delete previous character), Shift+Del (delete to next word start), and Shift+Backspace (delete to previous word start) also do.  For instance if I press Backspace to delete the last character I typed, the result is this:

BlockEditing5

The last character I typed (a >) is now gone in all three lines.

Summary

These sorts for multi-line editing features can really help increase productivity in a number of editing scenarios.  They will be included in the next releases of our WPF, Silverlight, and WinForms controls.  And they will be included in the upcoming WinRT version of SyntaxEditor as well.

SyntaxEditor for WinRT - Ready for Beta Testing

PostBannerSyntaxEditorDevNotes

The WinRT XAML port of our popular SyntaxEditor syntax-highlighting code editor control is now development complete and we're looking for beta testers to help make sure it's production ready for it's launch after Windows 8.1 is released.

The SyntaxEditor port includes our LL(*) Parser Framework, as well as shows off the advanced premium language add-ons: .NET Languages Add-on (C# and VB), and the Web Languages Add-on (XML and JavaScript).

Launcher

Note that Visual Studio 2013 RC (or later) and Windows 8.1 are required for this beta.

Please contact us if you would like to assist us by helping to test the control and its add-ons in your Windows 8.1 apps.  In your e-mail to us, give a brief overview of how you intend to use the product.

We look forward to hearing from you!

SyntaxEditor Is Coming to Windows 8.1

PostBannerSyntaxEditorDevNotes

The WinRT XAML port of our popular SyntaxEditor syntax-highlighting code editor control is nearly development complete! 

While the SyntaxEditor control itself has been used as the foundation of our free Code Writer app for a while now, we haven't had the SyntaxEditor control available to our customers yet to use in their own apps.  That's about to change.  The 2013.2 release of our WinRT XAML controls will include all the recent updates to our Charts and Micro Charts, as well as the new SyntaxEditor port and ports of its .NET Languages Add-on and Web Languages Add-ons.

First Look at a Demo

Let's see a screen of the WinRT version of our SDI Code Editor demo:

CodeEditor

Here we have a SyntaxEditor contro showing off the advanced C# language that is part of the .NET Languages Add-on.  With SyntaxEditor you can easily add text and code editing functionality to your Windows 8.1 apps.  It supports custom language creation, and as seen above, has some pre-built languages available with features like automated IntelliPrompt popups.

Beta Testers Wanted

We're really excited to get this finished up and into your hands.  If you are interested in helping us beta test SyntaxEditor for WinRT XAML, please contact our sales team (if you haven't already).  We expect the beta to be ready in the next week or two.

Code Writer App Transitioning to Windows 8.1

BlogPostBanner

We've been anxious to get our hands on Windows 8.1 and were finally able to after Microsoft released the RTM to developers earlier this week!

We've been working on updating our Windows 8 controls and apps to target Windows 8.1.  These updates will be part of the 2013.2 version of our WinRT XAML UI controls.  That version will also be the first to include our syntax highlighting code editor control named SyntaxEditor, which is designed for use in Windows Store apps!

Our SyntaxEditor control is the same core editor used in our free text/code editing app named "Code Writer".

Improving Code Writer App Size Support

One feature we completed today for Code Writer is to have full support of Windows 8.1's new window sizes.  The current Code Writer version on the Store does support "snapped" mode, but while in that mode, app bars and the Advanced Editing gallery are disabled.

CodeWriterSnapped

In the new code updates we made for Windows 8.1, the app properly resizes itself and still allows full access to app bars and the gallery.  See the screenshot above for an example showing how the app bar buttons collapsed down to a compact size, which still providing app functionality.

Summary

The updates above will be published to the Windows Store once Windows 8.1 is publicly released next month.

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

TaskWideLearnMore TaskWideWindowsStore

Filed under: Actipro, In development, Apps

SyntaxEditor - Curly Brace Auto-Indent

PostBannerSyntaxEditorDevNotes

Several weeks ago, we announced a new Delimiter Auto-Complete feature coming to the 2013.2 version of SyntaxEditor for WPF and Silverlight.  This feature is great because it improves typing efficiency by auto-inserting end delimiters when the start delimiter is typed.

We have been wanting to improve the typing experience even more and in today's post, I'd like to announce that curly brace auto-indent is also coming.

What Is Curly Brace Auto-Indent?

When the caret is in the middle of a curly brace pair, pressing Enter normally will move the close curly brace to the next line with the caret right in front of it.  If you have an indent provider for your language, the close curly brace will be indented properly however it's still not an ideal situation because you generally want the caret to be on its own line before the close curly brace's line.

This scenario is where curly brace auto-indent comes in!  This feature injects a new blank line in between the braces, indents one more level, and positions the caret on that line.

Sample Usage

Let's start with a regular JavaScript function declaration.  Note how the caret in in between a curly brace pair.

AutoIndent1

In the past, if you pressed Enter, you'd get this:

AutoIndent2

With the new curly brace auto-indent feature, instead of the above when you press Enter, you will get now this:

AutoIndent3

The end user is immediately able to start typing content for the function.

Summary

These new features will be available in the 2013.2 version of SyntaxEditor, and are built into our advanced C# and JavaScript languages for this version.

They can easily be added to any custom language as well with a few lines of code.

TaskDownload TaskLiveDemo TaskBuyNow

SyntaxEditor - Indentation Guides

PostBannerSyntaxEditorDevNotes

In today's post I'd like to announce another new feature coming to the 2013.2 version of SyntaxEditor for WPF and Silverlight:  indentation guides.

What are Indentation Guides?

Indentation guides are subtle vertical lines that render at each tab stop on lines prior to the first non-whitespace character.  They help visually align the indentation of visible code blocks.

You can see the silver indentation guide lines in the tab stops within this screenshot:

IndentationGuides

Whitespace-only lines are intelligent and render indentation guides based on the tab stop level of surrounding text.

Summary

These new features will be available in the 2013.2 version of SyntaxEditor!

TaskDownload TaskLiveDemo TaskBuyNow

InertiaScrollViewer Control

BlogPostBanner

Today I'd like to reveal a new control coming to our WPF and Silverlight Views products in the 2013.2 version:  InertiaScrollViewer.

Overview

The InertiaScrollViewer control is a drop-in replacement for the native WPF/Silverlight ScrollViewer control but allows you to scroll content using touch, similar to what you're used to on Windows 8 and mobile devices.

It reacts to dragging, flicking, mouse wheel, and normal mouse operation via the scrollbars. You can adjust properties like EasingFunction, VelocityTimeRatio, and VelocityDistanceRatio to fully control how inertia scrolling looks and feels.

SampleBrowser

In the screenshot above, you can see how our main Sample Browser pages have been updated with InertiaScrollViewer, allowing full touch interaction and navigation within them.

With a deluge of new touch-enabled Windows PCs entering the market, you'll be able to update your WPF and Silverlight apps with InertiaScrollViewer and take full advantage of this new hardware.

Summary

InertiaScrollViewer will available in the 2013.2 version of Views for WPF and Silverlight.  We've also added a new related QuickStart to our Sample Browser application.

TaskDownload TaskLiveDemo TaskBuyNow

SyntaxEditor Delimiter Auto-Complete

PostBannerSyntaxEditorDevNotes

One great thing about having our free Code Writer Windows 8 text/code editing app out is that we now get a lot of feedback directly from end users of the SyntaxEditor control.  Normally we only receive feedback from our own customers, who are developers integrating SyntaxEditor and our other UI controls into their own apps.

What is Delimiter Auto-Complete?

A common request we've received is to support delimiter auto-complete.  Delimiter auto-complete is where the user types a start delimiter and a related end delimiter is auto-inserted after the caret.  This is especially helpful when working on mobile tablets like a Surface since it means less overall typing is required to output the same code.

The 2013.2 version of SyntaxEditor for WPF and Silverlight includes a built-in implementation of delimiter auto-complete via a language service that can be customized and assigned to any syntax language.

Sample Usage

In this example, we'll use our new advanced JavaScript language, also coming in the 2013.2 version and described further in this post.

First, we'll type a ( character:

Delimiter1

You can see how the related end ) is also auto-completed and the caret remains in the middle of the two delimiters. 

Now if I type a ) character, it recognizes that this end delimiter was auto-completed, and instead of making another text change, skips right over the previously auto-completed end delimiter.

Delimiter2

Now if I type another ), it will insert a new character since it recognizes we are now outside of the auto-completed delimiter range.

Delimiter3

Let's delete that extra end delimiter and type an open curly brace to see the resulting auto-completed close brace:

Delimiter4

Say I made a mistake and wish to quickly delete the pair.  If I press Backspace then it recognizes I'm backspacing over a delimiter that created an auto-complete and it removes the completed end brace as well. 

Delimiter5

That's neat stuff!

Summary

These new features will be available in the 2013.2 version of SyntaxEditor!

TaskDownload TaskLiveDemo TaskBuyNow

JavaScript Language Add-on - Feature Summary

PostBannerSyntaxEditorDevNotes

In our last post, we revealed that a new advanced implementation of the JavaScript language is being added to the Web Languages Add-on in the 2013.2 version.

JavaScript

In this post we'll look at which features will be part of the language's first release.

Syntax Highlighting

As with all our other syntax languages, a lexer tokenizes the code and allows for colorization of items such as keywords, comments, strings, etc.  This makes code much easier to read.

Parsing

A full parser that conforms to the ECMAScript 5.1 standard is included.  The parser runs in a worker thread, and even handles things such as implicit semi-colon insertion.

AST Generation

The parser outputs a complete abstract syntax tree (AST) of the document.  This AST is stored with the document and can be traversed to view the JavaScript code structure.

Syntax Error Reporting

Errors in syntax are returned by the parser and can be displayed in error lists.  In addition, squiggle lines are rendered under the errors and mouse hovers over the squiggles reveals the error description.

Code Outlining

All JavaScript functions are code outlined so that they may be collapsed (folded).  The outlining margin helps the end user by providing some visual structure to the code.

Smart Indent

Pressing Enter at the end of a line indents properly on the next line.

Text Formatting

A text formatter is included that beautifies JavaScript code.

Code Block Selection

Use Ctrl+Num+ and Ctrl+Num- to expand and collapse the text selection over the ancestor statement/block/function hierarchy.  This sort of functionality is described in detail in this post.

Delimiter Auto-Complete

A new feature (being added in 2013.2 with support for all languages) allows for delimiter auto-complete.  For example, this means that when you type a ( character, the end ) character is inserted immediately after the caret for you.

Summary

The advanced JavaScript language will be added to the Web Languages Add-on in the 2013.2 version of SyntaxEditor!

TaskDownload TaskLiveDemo TaskBuyNow