NDjango Editor

From NDjango
Jump to: navigation, search

NDjango Editor is an extension of the standard Visual Studio editor. Visual Studio text editor can be used to work with any sort of text including html, plain text, xml, etc. and any one of these files can be turned into a NDjango template by embedding in it some NDjango constructs. NDjango Editor helps in creating NDjango templates by providing for NDjango constructs services similar to the ones provided by the Visual Studio .aspx editor for embedded code, including syntax colorization, tooltips, code completion, and as-you-type diagnostics.

The screenshot below shows you some of these features:

File:DiagPopup.png

As you can see the markers indicating the tags and variables are highlighted in yellow. Also some of the constructs are underlined with a red squiggly line. This is an indication that there is a problem attributed to this particular NDjango construct. Placing mouse cursor over the construct in question will bring up a tooltip with a diagnostic message explaining what's wrong. You can see an example of such diagnostic message on the screenshot. It was displayed in response to mouse cursor placed over the block tag. The same diagnostic message will also show up in the Visual Studio error list. The messages in the error list are linked back to the source - double clicking on an error message will take you to the line in the source code causing the error.

File:ErrorList.png

Another useful feature is code completion. Code completion is provided for both tag names as well as filter names. As soon as you type '%' following '{' the editor assumes that you intend to enter a new tag and shows you a dropdown to choose the name of the tag:

File:Completion dropdown.PNG

This dropdown contains a list of all tags registered with the designer. Depending on the context it will also include all tags which can be used to close unclosed nested tags. The picture above shows a dropdown containing else and endif tags in addition to the list of the standard tags. This is due to the fact that the if tag on top of the screen does not have closing tags. Also the same dropdown is displayed when you type a character while caret is where a tag name can be. The value selected from the dropdown is inserted as a new tag name.

The same functionality is available for filters. The filter name code completion is triggered by typing | where a filter can be or by typing any character while caret is inside of a filter name.

Additionally NDjango Editor provides you a code completion for variables. With model tag you can define the model variable and a model class associated with this variable. This variable and all its public members will be shown in a completion dropdown.

File:Model completion.PNGFile:Model.png

This dropdown also contains some standard global variables, depending on the web application framework you use. For ASP.NET MVC these global variables are the Session variables.

File:Session.png

And finally tag content highlighting helps with nested tags:

File:Nested tags.PNG

Place caret on a tag name and all content of the tag is highlighted in gray. The tag name for both tag you selected and its closing tags will be highlighted with darker gray while all its nested tags will be highlighted in light gray

How to install

Just download and install the latest NDjango 0.9.9.0 release for Visual Studio 2010.The same package can be found in the Visual Studio Gallery(using,for example,VS 2010 Extension Manager Online Gallery Search)