Recently we have had a requirement to monitor our webserver traffic in more detail. We considered an off the shelf product but since we’re developers ourselves and have a turbo charged toolset with APEX & FOEX, we decided to build it ourselves in a very short time period.
I started detailing some of the technical aspects on my personal blog about this application we built to monitor webserver traffic.
The purpose of this post is to highlight the mashup usage of APEX and FOEX components. This is how the end result looks:
Looking at the page it’s hard to see what are FOEX or APEX components, so here’s the annotated version:
What we can see in the above screenshot is that APEX provides some great visualizations in the form of Oracle JET charts. The JET charts are child regions of a FOEX pane/layout plugin region.
This means they can be collapsed and refreshed. At the top of the page there is a FOEX toolbar plugin with some filter fields (item plugins) and buttons.
The Summary Statistics region is the “FOEX Big Number” plugin which allows you to have a refreshable/filterable set of KPI’s.
Other than providing the chart/KPI SQL queries there is no custom code involved. Everything is declarative and controlled via simple dynamic actions.
The benefit of using the FOEX Plugin Framework to layout the page over the Universal Theme is that we can have greater control over the sizing and responsiveness of widths/heights of regions. Also our toolbar plugin will automatically overflow all items and buttons into an overflow menu.
There is also more functionality which you can’t see. The “Details” button will open a non-modal FOEX Window plugin with a FOEX Grid plugin inside. Since this window isn’t modal, the filter fields in the main page’s toolbar can still be changed, refreshing both the charts, KPI’s, and the grid’s content.
The window can be resized to your needs and the Grid inside has state saving enabled and will remember your chosen column order, width, sorting, and so on.
The “Admin” button also opens a non-modal FOEX Window, with several FOEX Grids each within a FOEX Tab.
Both of the window/dialogs are non-modal, thus allowing you to open them both at the same time. You have the ability to move/resize them or maximize them.
This is just a simple example of how an application can become more interactive and functional if you have the right tools (ie. FOEX) at your disposal. Here’s a brief video overview of the application:
Summary of benefits by using FOEX in this example:
- Toolbar
An easy way to group Items an Buttons on top of the Page - Layout Manager
Takes care of collapsible regions, responsive layout - Non-Modal Windows
Wrap a Region or an other Page into a Window which can be resized, moved, maximized - Lazy Rendering
Any Region not visible (in a Window, on another Tab, …) isn’t rendered before it actually is needed - Lazy Loading
Already rendered, but still currently not visible, Regions are not refreshed/loaded if not necessary. Once the Region is shown, it will do the last issued and outstanding refresh.
See what you can achieve by using the FOEX Plugin Framework. Sign up for a free trial!