Welcome to the Learning Center

The Guide | Knowledge Base | FAQ

Browse it all or refine your selection using the filters below on the left.

XMod Pro 4.0.0 - Let There Be...

...Color and Designers and More, Oh My. In this article let’s look at the brand new code editor.

By: Kelly Ford On: 05/02/2012

Link to this Article
https://dnndev.com/Learn/Guide/Article/XMod-Pro-4_0-Released

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:

FormEditor_v03.00.00

(click the picture for a larger image)

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

FormEditor_v04.00.00

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:

    FormEditor_v04.00.00_CodeComplete_TagSelection_AddImage

    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:

    FormEditor_v04.00.00_CodeComplete_PropertySelection_AddImage
  • 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.

    FormEditor_v04.00.00_TagDesigner_DropDownList

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


    FormEditor_v04.00.00_TagDesigner_DropDownList_InsertedCode
  • 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:

    FormEditor_v04.00.00_SearchDialog

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

    FormEditor_v04.00.00_SearchDialog_Results

    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.