Since there have been so many additions in the latest major release of this best-selling form application builder for DotNetNuke, we thought it would be best to cover them in serial fashion. In this series of blog posts we’re covering the major new features in XMod Pro 4. In this installment let’s look at the brand new code editor.

While XMod Pro makes it easy to quickly build database solutions in DNN with its tools and wizards, the most powerful applications are never built with graphical user interfaces. They’re built with code. Luckily, XMod Pro doesn’t require you to be a programmer to build some pretty cool stuff, but as with most endeavors, the more you know the more you can do.

In previous versions of XMod Pro, we provided a text editor for those who needed it. It was functional – allowing you to use the tab key (no small feat in a textarea control) and providing you a toolbar that would, with a click, provide a minimal skeleton of various tags and tokens.

The Text Editor in version 2 and 3 of XMod Pro:

(click the picture for a larger image)

Now, here’s a look at the same code in XMod Pro 4’s new editor:

Here’s a description of all the new features of the editor:

• Color Syntax Highlighting: The first thing that jumps out at you is the color. We’ve added syntax highlighting to the editor for this release. Now it is much easier to distinguish your tags from their properties and property values.

• Line Numbering: An often requested feature.

• Auto-Formatting: If you look at the code in each of the images above, you’ll notice that the new editor has formatted the code. I didn’t format it myself. Rather, I simply copied from the old editor and pasted it into the new editor. The code was automatically formatted for me.

• Code Completion: Check this out. Type an opening bracket (<) and hit CTRL+SPACE and get a list of available tags:

  
  

  The list you see is contextually based so you’ll only see tags appropriate for where you’re typing at the moment.

  Code completion gets even better, though. After you’ve selected your tag and typed a space, hit CTRL+SPACE again and get a list of properties for that tag:

  

• Tag Designers: If you don’t want to go with code-completion, simply select a Tag from the drop-down list in the toolbar and a designer will pop-up.

  
  

  After saving and closing the designer, the editor will generate your tag for you:

  
  

• Block Indent/Outdent: Auto-formatting of code doesn’t always format things just the way you’d like so the editor also provides you with the ability to select one or more lines and use TAB to indent the code as a block or SHIFT+TAB to outdent it.

• Search and Replace: Every good editor needs the ability to find code and, if necessary, replace it. You can even use regular expressions to find code. While in the editor, type CTRL+F to pop-up the find dialog box:

  
  

  When you’re ready, hit ENTER and the editor will highlight your matches:

  
  

  Here are the keyboard shortcuts for searching and replacing:

  CTRL+F/CMD+F to Search
  CTRL+G/CMD+G to Find Next
  CTRL+SHIFT+F/CMD+OPTION+F Replace
  SHIFT+CTRL+R/SHIFT+CMD+OPTION+F Replace All
  

We’re really excited to provide this new productivity booster to your XMod Pro development. The new code editor is available for creating your DotNetNuke Forms and well as your data views (Templates) and Feeds.