Improving the Code Editor

After two weeks of work absence, I am finally back. This week, I worked together with my colleague Peter to debug the product and also improve on its functions. A weird thing happened although we were using the same codes, which is:-

  1. Wt.emit in browser unload event

Peter seemed to be able to emit a signal to the WApplication during the browser unload event which was 100% unsuccessful for me. The only thing working for me was an ajax request. The only difference we have is the Chromium browser version, so perhaps we could test out the same browser version in the future. Even so, there is a problem with the unload event that we both encounter, that is unloading events are not always successful. Unload event, being unreliable as it is, is enough reason for us not to use it. Hence, it should only be used as a backup.

 

Since the browser unload was initially used to ‘save’ some contents and send it to another back-end, a new mechanism had to be implemented to perform the ‘saving’. The solution must not be as simple as adding a ‘save’ button because it is a coward’s way of solving the problem.

For now, I would be performing the ‘save’ when there are changes to the code contents, which is done by creating a function in CodeMirror’s “change” signal.

Notifying the user

There must be means to let the user know some things occurring in the background that do not require the use of lengthy explanation. For example, the user would have a peace of mind if he/she were to know that the application’s contents are correctly ‘saved’. For this purpose, I have added two things:-

  • Highlighting unsaved changes in Code Editor

When the user adds/removes content in the editor, the line is highlighted. Only after the contents are ‘saved’, that the highlight is removed.

  • A loading GIF to show background processes

All Wt applications come with a default loading indicator, which appears when  “a response from the server is pending or JavaScript is being evaluated”.  So I figured it would be nice to add my own indicator at some convenient corner. After fumbling around, I found out that a GIF can actually be added using WImage. By setting the absolute position and z-index in CSS, a satisfactory result is obtained.

You may also like...

Leave a Reply