In this week , I had to stop working in verilog for a while and get back to do some adjustment and modification to the project web interface. Actually it is really a good thing to break the routine and do something different from time to time :D.
If you still do remember, I was handling the code editor part, the editor so far was running on its minimum capability, it can really be enhanced by adding some more features to it. So in this blog entry I’ll talk mainly about the new features that have been added to our editor to upgrade the user experience.
The editor we are using in the project is CodeMirror. CodeMirror is rich with so many addon , API programming and CSS themes that can be customized to suit different applications. It’s also worth mentioning that various programming languages modes are supported by CodeMirror. So on this week I really had the chance to play with all these features :).
Changing the themes and Modes:
As I mentioned above CodeMirror comes with different themes that can be used to change the appearance of the editor. Previously, the editor was only supported by one theme which was “mdn-like”, but since each user has different style and taste so it would be really great if the user has the ability to change the theme and pick his favorite one. The theme is initially set during the instantiation of the codeMirror in javascript code but it can be later re-configured using the codeMirror function “cm.setOption(option: string, value: any)” . So in our case it would be simply .setOption(‘theme’,’night’); for example.
Similarly, the programming language mode can be reconfigured by using also this functions. For now I just used the Wt::WComboBox witty class to provide the user with the list that he can choose his favorite theme or modes from .
Highlighting the Error Line :
Previously I used to notify the user with the place and the messages of the error using the codemirror function :
doc.addLineWidget(line: integer|LineHandle, node: Element, ?options: object)
Using this method, a line widget will be inserted under the line that contains the error message. (you can refer to my blog entry where I discussed this here). This method has some problem as the it tends to split the the user code. So we were thinking of a better way to do error notification.
Highlighting the line of the error was a proposed technique. Since the browser receives the line number and the error messages from the Backend “server” , the line number can then be passed to the codeMirror function doc.addLineClass(line: integer|LineHandle, where: string, class: string) and then the class can be later adjusted to have certain background color using CSS. For more information about all these functions you can refer to CodeMirror main website. They provide a lengthy description for all these functions.
Plus highlighting the error line I thought it would be great to show small icon on the gutter to indicate that there is an error and then when the the user put the mouse over it it will show an error messages. I tried to do this first by using JavaScript mouseover and mouseout functions but it didn’t work .. hmm I really don’t know why but then implementing this using CSS hover selector was a way easer.
The error icon appears by using the CodeMirror function cm.setGutterMarker(line: integer|LineHandle, gutterID: string, value: Element)
The function will take the line number and the gutterID and the DOM element that it will be placed in the gutter which is in this case is the small error icon.
I encountered some problems regarding the gutter marker as when any changes occurs in the code editor like typing or pressing enter the error icon will disappear although the syntax error is still existed . Unfortunately I didn’t manage to solve this bug.
Finally, this week was a short one, and YEAH we will have a long weekend. I think it’s a good chance for me to organize my thoughts and to prepare for the second half of the internship 🙂
Happy holiday 🙂 enjoy
Here’s is a photo for the new editor interface and error notifying method.
0 Comments