Category Archives: Xplug

Xplug – How to do minor tweaks to style (contrast enhancement)

The release of Xplug v1.2 was quite a success.  The possibility to add a “dark” style and customize it via a configuration dialog seems to be something many APEX developers appreciate.

But what if you just want to do a small modification like changing the background color of the properties group header? Until now that was hard -if not -impossible- to do, because the CSS that is injected by Xplug is focussing on a dark style.


Continue reading Xplug – How to do minor tweaks to style (contrast enhancement)

Extending APEX 5.0 Page Designer with custom style

One of the things I wanted to do for the Xplug browser plugin, is to check if I can somehow change the Page Designer colors and come up with a custom look-and-feel (style) and
perhaps add some more contrast along the way. In particular I was excited to do a “darker” style. Something you would use at night while you are working on your next fantastic APEX application.

Note that I’m not calling it a theme, because then it could be confused with an APEX theme which definitely is not the case here.
I do am planning on adding a configuration dialog, so you can change colors yourself. Would be cool if these could then be exported as JSON and put online in a gallery.

Anyway, what I find kinda cool is that there’s a button that let you switch between “daylight” and “moonlight” mode.
The daylight/moonlight feature will definitely be part of the next Xplug release (along with some other goodies).

Before that happens I have to refactor the code and work on the “moonlight” mode some more. Adjust colors work on the tabs style, etc.
I definitely need a javascript build system. I haven’t used one before, but I’m currently looking at Grunt and Gulp. So will see how that goes.

If you want to take a peek. Here’s a quick Youtube video I did that shows some of the features. Have to apologize for the bad quality. Will need to find a good screen recorder.


Grid layout too wide in Page Designer 5.0 ?

I’ve been playing with the grid layout in APEX 5.0 Page Designer.

One thing I personally don’t like that much, is that the regions get “stretched” to full-width of the grid pane. This kinda makes it visually hard to get a good overview.

Look at the below image for an example:


I checked if I could make the regions not stretch to full width and stick a background image to the grid pane.

I like the result so far. It kinda makes the grid pane stand out. The below is not a mockup. Just a few lines of javascript code.


Planning on adding this functionality to the next Xplug version and make it configurable. What do you think?

Turn off tooltips in APEX 5.0 Page Designer

Even though I like the idea of getting some additional details by hovering over an element in APEX 5.0 Page Designer; if you are working on the same page for a longer time and going back and forth between the tree and properties editor, a tooltip can be distracting.

It may overlay part of the content you wanted to look at in the first place.

Continue reading Turn off tooltips in APEX 5.0 Page Designer

Switch panes in APEX 5.0 Page designer – Part 3

It’s time for the third and final part of my hack-a-tronik series on switching panes in the APEX 5.0 Page Designer.

This is also the longest article so far. Please bear with me, I’ll try to make it interesting 😉

Remember that in part 2 of the series I mentioned the goal was to build a real (Google Chrome) browser extension, which I named Xplug.


In todays article I’m going to show you how I accomplished just that, what steps were necessary and what challenges I had to tackle.

On a side note; I have more plans for Xplug, so I decided I’ll be spending an own webpage where I’ll be adding more stuff and ideas for Page Designer.

Continue reading Switch panes in APEX 5.0 Page designer – Part 3

Switch panes in APEX 5.0 Page Designer – Part 2

ok, it’s time for another hack-a-tronik. I’ve managed to add a bit more functionality to the pane switcher and it’s now actually starting to look like a plugin (but we ain’t there quite yet).

First off all, I’d like to point to the excellent hardlikesoftware blog by John Snyders. There’s tons of good APEX 5 information there.
You might want to check out his blog post on APEX 5.0 custom menus.

(I’m also very keen finding out if John’s work on the Javascript implementation of the StringTemplate framework will perhaps find some good use in a future APEX version).

Now, back to our hack-a-tronik. Basically I refactored the code of part 1 and named it Xplug. The idea is that Xplug will contain a collection of small enhancements to the APEX 5.0 Page Designer.

Continue reading Switch panes in APEX 5.0 Page Designer – Part 2

Switch panes in APEX 5.0 Page Designer – Part 1

This is the first in my hack-a-tronik series. Lately I’ve been playing around with the APEX 5.0 Page Designer. In particular I was interested in seeing how some of its internals worked.

I love the new page designer, but something that was kinda bothering me is that you have to do quite some “mouse-kilometres” while working on an apex application.
What I mean by that is that you move the mouse between the left pane (navigation tree for rendering/dynamic actions, …) and right pane (properties editor) a lot.

So it would be great, if I could swap panes to make it look more like:

Page Designer with panes swapped.

Continue reading Switch panes in APEX 5.0 Page Designer – Part 1