SyntaxEditor Delimiter Auto-Complete

by Avatar Bill Henning (Actipro)
Wednesday, May 29, 2013 at 12:16pm

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

by Avatar Bill Henning (Actipro)
Tuesday, May 28, 2013 at 10:34am

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

JavaScript Language Add-on is Coming to SyntaxEditor

by Avatar Bill Henning (Actipro) - 7 comments
Tuesday, May 21, 2013 at 2:45pm

PostBannerSyntaxEditorDevNotes

Great news… a new language add-on for JavaScript, specifically the ECMAScript 5.1 standard, is coming to SyntaxEditor.  Let's take a first look:

JavaScript

In this screenshot, you can see features like syntax error reporting and code outlining active.  This new language will allow you to instantly plug in an advanced JavaScript editing experience to your apps that use SyntaxEditor.

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

TaskDownload TaskLiveDemo TaskBuyNow

Chart Features - Grouped Axis

by Avatar Bill Henning (Actipro)
Tuesday, May 14, 2013 at 7:51am

ChartsBlogPostBanner

In the latest WPF and Silverlight controls maintenance releases, we've added some important functionality to our Charts product. In the initial release, we could chart quantifiable values (such as numerics and DateTime) on a Cartesian axis. Now we've added the ability to chart strings and other complex types using our new XYGroupedAxis.

Grouped Axis Example

Take this complex type as an example:

class Transaction {
    public double Price { get; set; }
    public string SalesPersonName { get; set; }
}

Given we have a collection of Transaction objects on our data context...

public ObservableCollection<Transaction> Transactions;

...then we can bind our BarSeries.ItemsSource to the collection of Transactions. The primary axis is our numeric value (Price), and the secondary axis is our string (SalesPersonName). Those are specified using YPath and XPath, respectively.

<XYChart>
    <XYChart.Series>
        <BarSeries ItemsSource={Binding Transactions} 
                    XPath="SalesPersonName" YPath="Price"/>
    </XYChart.Series>
</XYChart>

If our transaction data looks like this:

SalesPersonName

Price

Mary

300

Marcus

100

Steve

250

Marcus

200

Mary

50

Mary

100

Marcus

50

Now our chart will look like so:

Chart1

Notice how on the x-axis, the strings are grouped by equality. So all transactions for Marcus, Mary, and Steve are grouped into single bars. Also notice how on the primary axis, the numeric values are summed together for each group. So for Mary, who had transactions of 300 + 50 + 100, the grouped value becomes 450.

Further Customization

There are several customization options -- you can change how items are grouped by setting XYGroupedAxis.GroupingFunc. XYGroupedAxis.LabelFunc controls how groups are labeled, and XYGroupedAxis.SortingFunc controls how groups are sorted. Using these, we can take the data above and group by the first letter of the name:

Chart2

Here, notice that grouping is done by comparing the first letter of the name, rather than equality of the entire string. LabelFunc has been specified to show the first letter. Note how the values for Mary and Marcus get summed together on the Y axis.

Summary

XYGroupedAxis allows you to provide custom logic to chart complex types easily. Download the free trials of our WPF or Silverlight controls and check it out!

This same functionality will also be coming to the WinRT XAML version of Charts in its next release.

TaskDownload TaskLiveDemo TaskBuyNow

Code Writer v1.7 Released

by Avatar Bill Henning (Actipro)
Friday, May 10, 2013 at 7:17am

CWBlogPostBanner

We just published v1.7 of Code Writer, our free text/code editor app, to the Windows Store. 

Markdown File Type

This version adds a new Markdown file type. 

Markdown

Markdown is used to provide simple markup formatting to regular text files.

Auto-Case Correct

Auto-case correct (described here) is a feature that just made its way into our latest WPF and Silverlight SyntaxEditor releases.  Basically as you edit certain file types like Visual Basic, VBScript, or PowerShell, when you move off a line, the keywords on the line will auto-case themselves to the proper casing.

AutoCaseCorrectOption

An Editor settings option has been added to allow configuration of whether this feature is active.

Code Block Selection

Code block selection (described here) is a feature where the editor selection can be expanded to include containing code blocks, and then later contracted all the way back down to the caret as appropriate.  This feature has been added to XML and XAML file types in this version.  It is accessible via the Ctrl+= and Ctrl+- hotkeys.

If the caret is in an attribute name, expanding selection will select the full attribute (name and value).  Expanding again selects all attributes in the tag.  Expanding again selects the tag.  Then the containing tag block's content, the entire tag block, and so on up the XML element hierarchy.  It's a really handy feature.

Line Ends

In the past, all files were saved with CR/LF line ends.  This made it difficult to work on files from other operating systems, like Unix or Mac.  In this latest version, we now attempt to detect which line end is being used in a file.  And we save it back out the same way.

LineEndsDocProps

You can override the setting on a per-document basis from the Document Properties pane.

LineEndsOption

There also is a new Editor settings option for designating which line end to use by default for new documents.

Miscellaneous

Several other handy features have been added:

  • .rss and .atom extensions for the XML file type.
  • Auto-fill the find text from editor selection when the Find/Replace Pane opens.
  • Rearchitected internal file management to better support future features.
  • Improved text rendering performance.

Summary

Auto-case correct and line end customization were features requested by our users.  Please keep the suggestions coming and enjoy this new version.

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

TaskWideLearnMore TaskWideWindowsStore