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.

screenshot_pd_title_big

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.

xplug-chrome-v1_2-screenshot_5

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:

apex5-pd-grid-before

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.

apex5-pd-grid-after

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