Category Archives: Page Designer

The MVC design pattern in Page Designer – Part 1

Today, I’d like to talk about the “Model, View, Controller”-Design pattern and how all this is reflected in APEX Page Designer.

Picture source: xkcd Flowchart comic
Picture source: xkcd Flowchart comic

This is the first part of a series of blog posts where I’ll share my knowledge on Page Designer internals I gained while working on the Xplug browser add-on.

Disclaimer: I’m not part of the APEX development team and there’s a lot of undocumented stuff. Most of my knowledge I acquired by trial and error and by looking at the APEX javascript source code.
I apologize in advance for any errors my blog posts may contain.
Perhaps some good advice first: don’t take anything for granted and always double-check yourself.

That being said, I’m a speaker at APEX Connect 2016 and the MVC-topic is part of a presentation I’m currently preparing for the Web Technologies track.  It’s called  “Lernen vom Page Designer – Auf den Spuren von Jules Vernes” .

Please bare with me. It’s going to be a rather long and somewhat theoretical blog post.  I’ll do my very best to keep it interesting.

Continue reading The MVC design pattern in Page Designer – Part 1

Page Designer: Know where you are

Work has been a killer lately, and unfortunately that did not include any programming whatsoever. Luckily this evening I finally got some spare time to play with APEX Page Designer again.

When I do am doing development stuff I have many browser tabs open or even multiple browsers at the same time.

I thought it would be cool if you could see the current application and page id in the browser tab.


Continue reading Page Designer: Know where you are

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