Click here to Skip to main content
15,867,308 members
Articles / Programming Languages / XML

Code Edit

Rate me:
Please Sign up or sign in to vote.
1.67/5 (2 votes)
6 Sep 2018CPOL7 min read 11.4K   590   6   4
Text editor control with syntax coloring, line numbering, auto-complete, and syntax tooltip

Image 1

Introduction

CodeEdit is a light-weight code-editor control and is provided with basic editing functionalities, except, it's supported with syntax coloring, line numbering, auto-complete, and syntax tooltip..

Background

Some software needs to provide its user an interface to input codes/scripts to be processed, like a console window or anything else. The control must be easy to handle by the developer, and easy to use by the user. But, there is no such control that is free to use out there (in my knowledge, cmiiw).

Using the Code

CodeEdit control is developed under Ai.Control namespace, and directly inherit from System.Windows.Forms.Control class. There are several public classes, enum, events, properties, and functions that are provided within CodeEdit control to support its operation:

Classes and enum

  • AutoCompleteEventArgs
  • LineChangedEventArgs
  • SyntaxSetting
  • SyntaxSettingCollection
  • SyntaxUsage
  • SyntaxWord
  • SyntaxWordCollection

Events

  • LineAdded
  • LineChanged
  • LineRemoved
  • ShowAutoComplete

Properties

  • CaretPosition
  • IgnoreCase
  • LineNumbers
  • Lines
  • SeparatorChars
  • ShowDescription
  • Syntaxes
  • TabLength
  • UseAutoCompleteSupports

Functions

  • appendLine
  • ensureVisible
  • insertLine
  • getLine
  • getSelected
  • getWords
  • setLine
  • setLineBackColor
  • showAutoCompleteWindow

Description

AutoCompleteEventArgs

The AutoCompleteEventArgs class is a class derived from System.EventArgs class that is used to provide data for ShowAutoComplete event. You can decide whether to show the auto-complete window by setting the Show property of this class. You can also provide the list of syntax that will be shown in the auto-complete window by setting the value of CustomSyntaxes property of this class. The Usage property allows you to decide the syntaxes source that will be shown in the auto-complete window.

LineChangedEventArgs

The LineChangedEventArgs class is a class derived from System.EventArgs class that is used to provide data for LineAdded, LineChanged, and LineRemoved event. The LineIndex property provides the index of the line where the line is added, changed, or removed. The OldValue property provides the previous value of the line before its changed or removed, when added, the old value is always empty string. The NewValue property provides the current value of the line after its added or changed, when removed, the new value is always empty string.

SyntaxSetting

The SyntaxSetting class is a class to provide support for syntax coloring and styling.

Events
No. Name Arguments
1. FontStyleChanged EventArgs
  Occurs when font style property has been changed.
2. SyntaxColorChanged EventArgs
  Occurs when syntax color property has been changed.
3. WordsChanged EventArgs
  Occurs when syntax words has been changed.
Properties
No. Name Type
1. FontStyle FontStyle
  Gets or sets the font style used to draw the syntax-words in the CodeEdit control.
2. Name string
  Gets or sets the name of the syntax.
3. SyntaxColor Color
  Gets or sets the color used to draw the syntax-words in the CodeEdit control.
4. Words SyntaxWordCollection
  Gets a collection containing all words in the syntax setting.
Functions
No. Name Type
1. getWordDescription string
 
Description
Returns the description of a word given in the SyntaxWord object.
Parameters
No. Name Type
1. word string
  The word as the key to search for the description.
2. ignoreCase bool
  Specifies whether case-insensitive should be used when comparing the word.

SyntaxSettingCollection

The SyntaxSettingCollection class is a class inherited from CollectionBase that represent a collection of SyntaxSetting object.

SyntaxUsage

The SyntaxUsage enum specifies the usage of the syntaxes shown in auto complete window.

Values
No. Name Description
1. DefaultOnly Only syntaxes that have been assigned to the control will be used.
2. CustomOnly Only syntaxes provided in AutoCompleteEventArgs object will be used.
3. Both Both default and custom syntax will be shown.

SyntaxWord

The SyntaxWord class is a class that is used to provide data for each syntax word and its information.

Properties
No. Name Type
1. Word string
  Gets or sets the syntax word.
2. Description string
  Gets or sets syntax description that will be shown in the syntax tooltip window.

SyntaxWordCollection

The SyntaxWordCollection class is a class inherited from CollectionBase that represent a collection of SyntaxWord object.

Events

No. Name
1.
LineAdded
Description:
Occurs when a line has been added.
Parameter: 
LineChangedEventArgs
2.
LineChanged
Description:
Occurs when a line has been changed.
Parameter:
LineChangedEventArgs
3.
LineRemoved
Description:
Occurs when a line has been removed.
Parameter:
LineChangedEventArgs
4.
ShowAutoComplete
Description:
Occurs when auto-complete window will be shown.
Parameter:
AutoCompleteEventArgs

Properties

No. Name Type
1. CaretPosition point
  Gets or sets a value indicating current caret position in the editor.
2. IgnoreCase bool
  Indicating whether case-insensitive comparison should be used when comparing syntax words. Default value is false.
3. LineNumbers bool
  Gets or sets a value indicating the line numbers should be shown. Default value is false.
4. Lines string[]
  Gets or sets the lines of text in a code edit control.
5. SeparatorChars string
  Gets or sets a value containing characters used as separator between words. Default value is "~!@#$%^&*()+`-={}|[]\:;"'<>?,./ ".
6. ShowDescription bool
  Indicating that the description window should be shown when mouse pointer os hovering over a syntax word. Default value is true.
7. Syntaxes SyntaxSettingCollection
  Gets a collection of SyntaxSetting objects.
8. TabLength int
  Gets or sets the number of spaces to draw the tab character. Default value is 4.
9. UseAutoCompleteSupports bool
  Gets or sets a value indicating whether auto complete supports should be used. Default value is true.

Functions

No. Name Type
1. appendLine void
 
Description:
Appends a string value to the end of the line array. The string value will be split into lines using return char.
Parameters:
No. Name Type
1. value string
  A string value to be added at the end of the line array.
2. ensureVisible void
 
Description:
Ensures that the caret is visible, when the control is focused.
Parameters:
No. Name Type
-
3. insertLine void
 
Description:
Inserts a string value at the specified index in the array. The string value will be split into lines using return char.
Parameters:
No. Name Type
1. index int
  The index in the array where the value will be inserted.
2. value string
  A string value to be inserted in the array at the specified index.
4. getLine string
 
Description:
Gets a string value at a specified index.
Parameters:
No. Name Type
1. index int
  A zero based index indicating the index of the line.
5. getSelected string[]
 
Description:
Returns an array of string that represents current selected lines.
Parameters:
No. Name Type
-
6. getWords string[]
 
Description:
Gets an array of string that represent all words within a line at specified index.
Parameters:
No. Name Type
1. index int
  The index of the line inside the array.
7. setLine void
 
Description:
Sets a line value at a specified index.
Parameters :
No. Name Type
1. index int
  A zero based index indicating the index of the line.
2. value string
  The value of the line.
8. setLineBackColor void
 
Description:
Sets the line's background-color.
Parameters:
No. Name Type
1. index int
  A zero based index indicating the index of the line.
2. backcolor Color
  The background-color of the line.
9. showAutoCompleteWindow string
 
Description:
Shows auto-complete window on current caret position, using specified syntax-setting collection, and specifies the word to be highlighted.
Parameters:
No. Name Type
1. ssc SyntaxSettingCollection
  A SyntaxSettingCollection object to be shown in the auto-complete window.
2. selectedWord string
  A word to highlight in the auto-complete window.

Example

Create a new WinForms Application project, and adds CodeEdit control into Form1, and name it as codeEdit1. Sets the syntax in the form's constructor like this:

C#
public Form1() {
	InitializeComponent();
	Ai.Control.CodeEdit.SyntaxSetting ss = new Ai.Control.CodeEdit.SyntaxSetting();
	ss.Name = "Reserved Word";
	ss.SyntaxColor = Color.Blue;
	ss.Words.Add("public", "The public keyword is an access modifier for types and type members.
    \nPublic access is the most permissive access level.\nThere are no restrictions on accessing 
    public members.");
	ss.Words.Add("this", "The this keyword refers to the current instance of the class and 
    is also used as a modifier of the first parameter of an extension method.");
	ss.Words.Add("base", "The base keyword is used to access members of the base class from 
    within a derived class.");
	ss.Words.Add("true", "Represents the boolean value true.");
	ss.Words.Add("false", "Represents the boolean value false.");
	ss.Words.Add("int", "The int keyword denotes an integral type that stores values 
    according to the size and range shown in the following table.");
	ss.Words.Add("null", "The null keyword is a literal that represents a null reference, 
    one that does not refer to any object. null is the default value of reference-type variables.");
	codeEdit1.Syntaxes.Add(ss);
	ss = new Ai.Control.CodeEdit.SyntaxSetting();
	ss.Name = "Classes";
	ss.SyntaxColor = Color.Teal;
	ss.Words.Add("ControlStyles");
	ss.Words.Add("Color");
	ss.Words.Add("Cursors");
	ss.Words.Add("Font");
	ss.Words.Add("FontStyle");
	ss.Words.Add("StringAlignment");
	codeEdit1.Syntaxes.Add(ss);
	// Add lines to the CodeEdit control.
	codeEdit1.appendLine("public CodeEdit() : base() {");
	codeEdit1.appendLine("\tthis.SetStyle(ControlStyles.AllPaintingInWmPaint, true);");
	codeEdit1.appendLine("\tthis.SetStyle(ControlStyles.OptimizedDoubleBuffer, true);");
	codeEdit1.appendLine("\tthis.SetStyle(ControlStyles.ResizeRedraw, true);");
	codeEdit1.appendLine("\tthis.SetStyle(ControlStyles.Selectable, true);");
	codeEdit1.appendLine("\tthis.SetStyle(ControlStyles.UseTextForAccessibility, true);");
	codeEdit1.appendLine("\tthis.Cursor = Cursors.IBeam;");
	codeEdit1.appendLine("\t_defaultSyntax.SyntaxColor = Color.Black;");
	codeEdit1.appendLine("\tbase.BackColor = Color.White;");
	codeEdit1.appendLine("\tbase.Font = new Font("Consolas", 8, FontStyle.Regular);");
	codeEdit1.appendLine("}");
	// Sets LineNumbers property to true.
	codeEdit1.LineNumbers = true;
	// Sets background color of the line number 3 to yellow.
	codeEdit1.setLineBackColor(3, Color.Yellow);
}

Further Development

There are several abilities needed for further development:

  • Code folding, that allows the user to selectively hide and display – "fold" – sections of a currently-edited file as a part of routine edit operations.
  • Word wrap, that breaks a long line that exceeds the width of page, into lines such that it will fit in the available width of page.
  • Auto indent, that automatically adds indents to a newly created line adjusted to previous line.
  • Supports any font family, not only monospaced font family.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Ai Software
Indonesia Indonesia
Keep moving ...
Learn the different ...
Get the advantages ...

And ... knowing everything ...

Comments and Discussions

 
QuestionUnicode characters Pin
Trusty7-Sep-18 11:56
Trusty7-Sep-18 11:56 
BugBugs found Pin
Member 24433066-Sep-18 20:38
Member 24433066-Sep-18 20:38 
QuestionBroken link Pin
kabdolla6-Sep-18 9:06
professionalkabdolla6-Sep-18 9:06 
AnswerRe: Broken link Pin
red_moon6-Sep-18 11:38
red_moon6-Sep-18 11:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.