Wednesday, March 19, 2014

Join me at KScope 14 in Seattle

kscope14_seattle

My first ODTUG Kaleidoscope conference was Monterey in 2009. I was very impressed with the speaker lineup and managed to convince my manager to fund trip and conference. The conference was great in every aspect: Lots of good quality sessions, perfect food and lots of people to talk too. What I like most about KScope: it’s all focused on us developers; making us feel comfortable and creating an atmosphere, almost like you are a part of one big family. Speakers, fellow developers, Oracle development teams, everybody comes for the same reason: share knowledge. I was so impressed with the conference format and got to meet so many people, I decided to come back again. Another thing I learned: Being an Oracle developer for many years, I too have knowledge, people are interested in hearing and learning from. When the Call-for-Papers for KScope 10 was opened a few months later, I submitted 2 abstract. Unfortunately these didn’t get accepted and being busy starting up my own business in 2010, I had to miss that year’s conference. KScope 11 (Longbeach, CA), 12 (San Antonio, TX) and 13 (New Orleans, LA) I managed to participate again, this time as a presenter myself. Again, the events were perfectly organized and I went home with my luggage full of inspiration and ideas.

I’m already looking forward to present at KScope 14 in Seattle this year. It feels like a family reunion. I still think: this is one of the best conferences to learn, meet, expand your network and have fun at the same time, worth the money and 12 hour flight. It pays off for me, definitely.

Don’t forget: ODTUG is organizing an APEX Theming Competition his year. Winners will be announced during the conference. I was asked to take a seat in the committee to judge the submitted themes, alongside with Jorge Rimblas and Shakeeb Rahman. BTW: you don’t have to be in Seattle to qualify for submitting your work.

Visit the KScope site for information about the event.

 

 

kscope14

Friday, March 7, 2014

Declarative ReFlow Table Reports in Theme 25


reflow_table_01
A while ago, at KScope 14 in New Orleans, I presented on Responsive Web Design with APEX Theme 25. One of the topics of my presentation was the lack of responsiveness of standard reports in Oracle Application Express. Meanwhile there were several attempts/solutions to make Theme 25 reports more responsive.
One approach is to add custom CSS code for those columns to hide on specific device sizes, using @media queries:

rwdtables_01
Major disadvantage of this approach is, that the user is getting less information on smaller devices. Instead of just hiding the data, it would be much nicer to present the data in a different, appropriate way, like rearranging the data in a fashion it fit on the small screen and/or displaying it optionally (on user demand). One technique to realize this is called “Reflow Tables”.

A reflow table works by collapsing the table columns into a stacked presentation that looks like blocks of label/data pairs for each row. One particular nice implementation of this technique is the FooTable jQuery plugin.

Recently Dimitri Gielis published a solution/demo based on this jQuery plugin. Using his approach, you will have to add a custom report template for each report you want to responsify. The problem with the FooTable plugin is: the definition of which column to “reflow” on a specific resolution has to be placed in the table header, which is not accessible in APEX by means of declarative parameterization (hu????). Plus, the plugin expects the report table to be a direct child element of a DIV element, which does not apply for standard APEX report templates, where the actual data table is enclosed by another table, that is used for positioning pagination elements and buttons. So I see the point in creating a separate report template, as Dimitri did, but you are losing a lot of the standard APEX functionality like this.

I tried a different approach: modify the FooTable JavaScript and CSS, so it will work with the standard APEX report template. My main goal was, to be able to declaratively configure any (Theme 25) classic report to be responsive, which means:

  • add a possibility to use the Report Attributes > Layout and Pagination > Report Attribute Substitution to indicate/trigger that a table uses the reflow mechanism
  • possibility to add classes to Report Attributes > Column Attributes > Column Formatting > CSS Class to hide/reflow columns depending on device/screen width (remember: the Theme 25 grid is basically a number of fixed width grid definitions)
  • provide/initialize the FooTable plugin with the Theme 25 grid steps and define appropriate class names for these
Here is the result (live demo):

rwdtables_02


How it works

Warning: this solution does not work with Partial Page Refresh enabled (out-of-the-box). This could be done using an dynamic action to reinitialize the ApexFooTable each time a PPR occurs for the report region, calling the JavaScript function initFoo();

Installation:
  • Download the zip containing all necessary resources here
  • Unzip the content and place the apexfootable folder somewhere on your server
  • add the following URL references to your page, or even better, your page template:

rwdtables_03
rwdtables_04

Configuration:

Create your classic report (or take any existing classic report) and configure the reflow functionality by adding “data-reflow” to the report’s Layout and Pagination property:

rwdtables_05

Add one of the defined “hide-” classes to every column you want to hide for a certain screen size (see reference table below):

rwdtables_06

Available ApexFooTable hide- classes are (derived from Theme 25 grid @media queries):

Class Name breakpoints/screensize when column will be hidden
hide-all column will always be hidden and information placed in reflow row
hide-desktop-l < 1900 px
hide-desktop-m < 1660 px
hide-desktop-s < 1420 px
hide-desktop-xs < 1260 px
hide-tablet, hide tablet-l < 1025 px (iPad/tablet Landscape)
hide-tablet-p < 960 px (tablet Portrait)
hide-phone, hide-phone-l < 768 px (smartphone Landscape)
hide-phone-p < 480 px (smartphone Portrait)

That’s it. Give it a try. If you encounter any problems, let me know.


themes4apex

Monday, December 2, 2013

Pure CSS3 Org-Tree with APEX List

employees-tree
I found this little CSS3 snippet gem on TheCodePlayer.com: nested HTML unordered lists styled as a hierarchical tree structure just by applying some (very nifty) CSS selectors. Naturally I had to try this in APEX. With some minor modifications in the CSS and creating a simple List Template, the code works great for visualizing hierarchical data, like for the Employee/Manager relationship used in the demo.
Here the step-by-step tutorial to implement this solution in Application Express:

Nested List Template

If you have a look at the original code snippet, you will see a DIV container enclosing a simple nested list:


<div class="tree">
    <ul>
        <li>
            <a href="#">Parent</a>
            <ul>
                <li>
                    <a href="#">Child</a>
                    <ul>
                        <li>
                            <a href="#">Grand Child</a>
                        </li>
                    </ul>
                </li>
                <li>
                …
                …
                </li>
            </ul>
        </li>
    </ul>
</div>
Nested lists can easily be implemented with a List Template. I created a new template (name: Org Tree) from scratch with the following definition:

Before List Entry:

<div class="tree">
<ul>

Template Definition

List Template Current <li><a href="#LINK#">#TEXT#</a></li>
List Template Noncurrent <li><a href="#LINK#">#TEXT#</a></li>

Before Sublist Entry

<ul>

Sublist Entry

Sublist Template Current
<li><a href="#LINK#">#TEXT#</a></li>
Sublist Template Noncurrent
<li><a href="#LINK#">#TEXT#</a></li>

After Sublist Entry

</ul>

After List Entry

</ul>
</div>

The List

That’s it. Now define a hierarchical SQL query (I took the EMP example from the “Create List Wizard”) and create a List Shared Component:
list-tree01

The Page

The page is where the list and the List Template come together in a region. Use the “Create Region” wizard to add a region to your page using the list en template we just defined:
list-tree03

The CSS

I copied the original CSS snippet from TheCodePlayer.com and placed this into the Inline CSS property of my page. I had to make a minor modification, because when resizing the page (I’m using Theme 25 here) the tree structure would break. So here is the final CSS code as used in my demo page:
.tree {
  overflow-x: auto;
}
.tree ul {
  padding-top: 20px;
  position: relative;
  white-space: nowrap;
}
.tree li {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  margin: 0 -2px;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before,.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 20px;
}
.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}
/*We need to remove left-right connectors from elements without any siblings*/
.tree li:only-child::after,.tree li:only-child::before {
  display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child {
  padding-top: 0;
}
/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before,.tree li:last-child::after {
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
  border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 20px;
}
.tree li a {
  border: 1px solid #ccc;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,.tree li a:hover+ul li a {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,.tree li a:hover+ul li::before,.tree li a:hover+ul::before {
  border-color: #94a0b4;
}


themes4apex