By Jasper de Keijzer
Introduction
Welcome to the first in a series of blogs about code editor enhancements we are implementing within the Uniface IDE. In this series, we will share with you some of the features and improvements that we are working on to make your coding experience more productive and enjoyable. The first thing we are implementing is block commenting. Block commenting allows you to quickly comment out or uncomment a selected block of code with a single keystroke or menu command. This can be especially useful when you want to temporarily disable or enable a section of code for testing or debugging purposes. Block commenting works for ProcScript, JavaScript, HTML and CSS code, and it respects the indentation and syntax of your code. In this blog, we will show you how to use block commenting and how it can save you time and effort.
Supported languages.
The Uniface editor is used for ProcScript, JavaScript, HTML and CSS. All these languages come with their own way of commenting code. This is all taken care of by the editor. It recognizes where you are in the code and decides, based on the language, how to comment and uncomment the code. The position where the cursor is, or the selection starts, defines the language. Selecting the ProcScript keyword “JavaScript” and JavaScript code, makes the editor use the semicolon as the comment character. You simply start the selection in ProcScript and by commenting out the begin marker “JavaScript”, Uniface treats the rest as ProcScript also. Here is a list of what the editor understands:
· ProcScript
· JavaScript in ProcScript
· JavaScript in HTML
· CSS in HTML
· HTML
Smart commenting and uncommenting
When dealing with the task of uncommenting multiline comments, it is not obligatory to meticulously highlight the precise section of commented code. As an illustration, consider being within a fully commented CSS block; you can simply click within the block and opt to uncomment it. The editor is designed to ensure that the entire block is correctly uncommented. This principle is similarly applicable to multiline comments in HTML. A straightforward click within the block initiates the uncommenting process. In the case of single-line comments, such as those in ProcScript, clicking within the commented-out line and choosing to uncomment suffices. Moreover, when multiple lines are selected, the editor meticulously examines and removes comments from each line within the selection. In situations where ProcScript lines are doubly commented, one comment character is removed. Additionally, every instance of commenting or uncommenting can be effortlessly reversed through a single undo command (CTRL+Z).
When attempting to comment within a multiline comment, the editor remains unresponsive. Consequently, in scenarios where the cursor is positioned within a multiline comment within CSS code, opting to right-click and select the “Comment” option yields no action. On the other hand, single-line comments, such as those in ProcScript denoted by a semicolon, are adaptable to multiple comment toggles. This permits users to comment out a block of code, subsequently select a portion of the same block and comment it, and even selectively uncomment portions, all the while preventing the original comments from becoming entangled in the code. This process resembles the meticulous peeling apart of layers in an intricate composition.
Defining your shortcut keys
In the usys.ini file, which is part of this patch the following is defined:
[userkeys]
code.comment=Ctrl+K
code.uncomment=Ctrl+Shift+K
With this update you can use the Ctrl+K or the Ctrl+Shift+K to comment or uncomment code in the editor. Creating comment in the Uniface IDE editor, the uncomplicated way.
In the following chapters we run through some scenarios, so you will understand how it all works in a mixture of languages. Did you know that you can have three different languages in the editor at once. HTML, CSS, and JavaScript all come with their own way of commenting and uncommenting. Hence, let us look at how this works.
JavaScript inside ProcScript
When selection starts inside the JavaScript and EndJavaScript proc keywords, the comment and uncomment handles the selection as JavaScript. This means that the comment characters ‘//’ will be used in front of the JavaScript lines. Following is an example.
|
Javascript
//(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
//new Date().getTime(),event:'gtm.js'}) //f=d.getElementsByTagName(s)[0],
endjavascript
|
When the selection starts before the JavaScript keyword, the selection is a ProcScript selection. The selection starts inside the ProcScript, the JavaScript keyword is commented out, meaning that the code is seen as ProcScript by the compiler.
Example:
|
;javascript
;(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
;new Date().getTime(),event:'gtm.js'});var ;f=d.getElementsByTagName(s)[0]
;endjavascript
|
Commenting CSS inside HTML
When selecting code in the HTML editor which is inside the <STYLE> and </STYLE> tags, the text will be treated as CSS. Commenting in and out is done with /* and */. When the cursor is on one line and the comment action is done, we simply get the following.
|
<style>
/*p.dotted {border-style: dotted;}*/
p.dashed {border-style: dashed;}
</style>
|
When multiple lines are selected, we get the following.
|
<style>
/*p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}*/
</style>
|
The */ closing tag is appended at the end of the line within the chosen selection. In all scenarios, the selection is adjusted to encompass the initial line's beginning and the final line's conclusion. This approach prevents instances where lines remain partially within comments.
Uncommenting CSS inside HTML
When we observe the following situation:
|
<style>
/*p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}*/
</style>
|
Whereby the cursor is in the middle of the commented code. Now clicking in the popup menu, the uncomment, the complete commented out code will be un-commented.
JavaScript inside HTML
JavaScript inside HTML is enclosed by the SCRIPT tags. When a selection is done inside these tags, the editor will use the JavaScript comment characters to comment the code. As an example, observe the following piece of HTML.
|
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
//document.getElementById("demo").innerHTML = "Hello JavaScript!";
//document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
|
Two lines were selected when the popup menu action “comment” was used. Both lines are now commented out with the ‘//’.
When the selection starts at the script tag and ends inside the script area or further down the editor will use the HTML comment out characters. The starting point of the selection defines the way the code is commented out. Let us assume we selected the complete block. The code will look as follows when doing so.
|
<!--<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>-->
|
Uncommenting JavaScript inside HTML
When the cursor is in text inside the SCRIPT tags and the uncomment, action is chosen, the editor tries to uncomment the code according to its syntax. Observe the following:
|
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
//document.getElementById("demo").innerHTML = "Hello JavaScript!";
//document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
|
When placing the cursor on the second comment line, this and only this line will be uncommented. When the selection spans multiple lines the editor will try to uncomment the lines within the selection.
When there is no JavaScript comment found the editor will find out whether you are inside an HTML comment like the following:
|
<!--<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>-->
|
When clicking the uncomment option in the popup menu the complete block will be uncommented. The editor finds the cursor inside comment, hence uncommenting this means that both starting and ending needs to be removed from the code to promote the comment to code.
Conclusion
I hope you like this addition to the Uniface editors, download our latest patch, and make use of this improvement.
#tofp