Use Plugin Code Editor - Part 4/4: Retrospect

I this post, I will retrospect my work on this and share lessons learnt.

Please click TOC link on right side to jump to specific section or

See more

• Use Plugin Code Editor - Part 1/4: Demo
• Use Plugin Code Editor - Part 2/4: Intro
• Use Plugin Code Editor - Part 3/4: Custom
• Use Plugin Code Editor - Part 4/4: Retrospect

Know Issues

• button title, there are 7 js errors  for each plugin in console when rendering
• native page, Code Editor in native demo page sometimes occupies the whole page width
• sql syntax check, in the pages using item binding syntax validation, can not return detailed error info like ORA-xxx
• message, in the pages using item binding syntax validation, can just go to inline with field or in notification area.
• Query Builder, can be enabled but does not work

Testing

No tests no bugs. If you find, please feel free to leave your comments here or in github repo.

Technical Support

Now Oracle APEX provides official release for these two plugins with APEX itself. As far as I know, there is no official documents for these two plugins from Oracle since it just for Oracle APEX internal team. I am glad to see they would provide support in future, or open source.

Note: it's easy and possible for Oracle APEX team to restrict the usage of these internal stuff. So if you plan to use them in your commercial application, please evaluate risks in advance (including license risk).

However, I can and will provide technical support for my demo applications for study purpose. Or if you have any question about Code Editor, please use the comment below.

Lessons Learnt

It is worthwhile to have a try if you want to study front-end stuff. Because most of code in my demo is related to JavaScript.

I would like to share something I learnt from this study.

Debugging 

I suppose that you have already known Level9 from Debugging chapter by Doug Gault in book Expert Oracle Application Express. Actually, there are lots of useful debugging api in that chapter.

Here I would like to recommend another browser extension Visual Event for front-end development, which will help you to "Know what event is bound on each dom element". It's hacker-level tool for me.

JavaScript RegExp

If you want to use RegExp in JavaScript, read this first. 

I used RegExp one time in my code for extracting original Code Editor initialization code. But it took me about 4 hours to figure out the right RegExp. 

// re-generate plugin
function reGeneratePlugin(widget) {
    // get script contain ajaxIdentifier
    var scriptStr = apex.jQuery("script:not([src]):contains('ajaxIdentifier')").text();
    // set regexp to match plugin initialization code
    var re = new RegExp(widget + "'\\,\\s*?\\{[\\S\\s]*?\\}", "ig");
    var reArr = scriptStr.match(re);

    // store original options to object
    var widgetObj = JSON.parse(reArr[0].substring(reArr[0].indexOf("{")));

The issue was I log out the original js code to console and browser converted "\u002F" to "/". Then I tested RegExp in console and it looked right. But when I used it into code, I couldn't get right result back.

"\S\s" is the right RegExp to match what I wanted.

setTimeout and setInterval

I used setTimeout and setInterval many times in my demo. Just note here to remind me to clearInterval after setInterval. 

Object, Array and JSON

Just note the links here for reference.

bind and unbind event

I added extra event to trigger specific action, like click, resize. After using Visual Event extension I mentioned above, I noticed there were many duplicated events if I didn't do unbinding at proper timing.

            $("#" + itemID + "_widget").dialog({
                close: function() {
                    ...
                    $('#' + itemID + '_widget_settings').off("click.myMenuOffset");
                },
                create: function() {
                    ...
                    // adjust offset of pop-menu
                    $('#' + itemID + '_widget_settings').on("click.myMenuOffset",
                        function(event) {
                            var menuTop = $(this).offset().top + 32;
                            var menuLeft = $(this).offset().left - 121;
                            $('#' + itemID + '_widget_settingsMenu').one("focusin.myMenuOffset",
                                function(event) {
                                    $(this).offset({
                                        'top': menuTop,
                                        'left': menuLeft,
                                    });
                                });
                        });
                },

Here .one() = .on() + .off()

Conclusion

I did this mainly for study purpose and I hope you like my posts.

----------------------------------------------------------------------------------------

OK. If you have already been here, please allow me to ask a feedback question: which demo page do you prefer?

• Native
• Native - Migrated
• Hybrid
• Hybrid - Migrated
• Editor to Textarea