1. Taming form alignment in Theme 25 →

    As more and more applications are being developed using Theme 25, both internally at Oracle and by our customers, I often see the same issues come up regarding form alignment.

    Here’s a reply I just posted on the OTN forums that explains how Theme 25 deals with labels and form fields, and some tweaks on how to get around it for some common use cases.

    Update: Fixed broken link after OTN forums update.

  2. Responsive Web Design in APEX (Updated for NYOUG)

    Download PDF

    Download slides from my session “Responsive Web Design in APEX with HTML5 and CSS3” presented at (New York Oracle User Group) NYOUG on Wednesday, December 12, 2012.

    These slides have been updated since I last presented at Oracle OpenWorld a few months ago.

    Here are the Responsive Design resources from the end of my talk:

  3. Responsive Interactive Reports in Theme 25

    Here’s a small snippet of CSS you can add to your pages in your Theme 25 based application to make Interactive Reports more responsive. I hope to be able to include this in the next APEX patch but here’s a temporary fix for now.

    You can add this to the Inline CSS field of any page that has an Interactive Report that you’d like to make responsive.

    Here’s a quick screenshot of the result:

    Here’s the CSS:

    @media only screen and (max-width:767px){#apexir_WORKSHEET{overflow:auto}
    #apexir_TOOLBAR_CLOSE{height:auto;zoom:1}
    #apexir_TOOLBAR_CLOSE:before,#apexir_TOOLBAR_CLOSE:after{content:"\0020";display:block;height:0;overflow:hidden}
    #apexir_TOOLBAR_CLOSE:after{clear:both}
    #apexir_TOOLBAR_OPEN{border-bottom:none;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0}
    .apexir_BUTTONS{margin:0;position:static;float:none;border:1px solid #AAA;border-top:none;padding:0 8px 8px 8px;background-color:#EAEAEA;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px}
    .apexir_BUTTONS table{width:100% !important}
    .apexir_BUTTONS button{margin:8px 0 0 0 !important;display:block;width:100%}
    .apexir_SAVED_REPORTS,#apexir_SEARCH_BAR_OPTIONS{clear:both}
    .apexir_SAVED_REPORTS:empty,#apexir_SEARCH_BAR_OPTIONS:empty{display:none}
    #apexir_SEARCH_BAR_OPTIONS{padding:8px 8px 0 8px;margin:0;display:table;float:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%}
    #apexir_SEARCH_BAR_OPTIONS a.irr-pill{display:table-cell;float:none;width:auto}
    #apexir_SEARCH_BAR_OPTIONS a.irr-pill span{margin:4px auto}
    .apexir_COLUMN_SELECTOR,#apexir_SEARCH_COLUMN_DROP,.apexir_SEARCH,.apexir_SAVED_REPORTS{margin-bottom:0}
    .apexir_ACTION_MENU{float:none;padding:8px 8px 0 8px;margin:0;clear:both}
    .apexir_ACTION_MENU div.dhtmlMenuLGButton{float:none}
    .apexir_ACTION_MENU button#apexir_ACTIONSMENUROOT{float:none;width:100%}
    div#apexir_CONTROL_PANEL_DROP{overflow:auto;padding:8px}
    }
    @media only screen and (min-width:480px) and (max-width:767px){input#apexir_SEARCH{width:360px}
    }
    @media screen and (min-width:320px) and (max-width:479px){input#apexir_SEARCH{width:200px}
    }
    

  4. Icons in Buttons - Theme 25 / Blue Responsive

    APEX 4.2 ships with a fully responsive application theme, Blue Responsive, often referred to by its numerical identifier, Theme 25. One really cool feature about this theme is that you can easily create buttons that have icons on them.

    Simply choose a button template that has icon in its name. For example, Large Button with Icon:

    Then, in the Button CSS Classes field, enter any of the following classes to get the icon you’d like:

    And that’s it!

    You can also use modifier classes, like iconLeft to position the icon to the left, or leave it out and the icon will show on the right automatically. You can also choose the Icon Only templates if you just want the icon alone.

  5. Download the slides from my talk on Responsive Web Design at Oracle OpenWorld 2012.

The CSS I used in my pages for mobile IRR support:


@media screen and (max-width: 767px) {
    .apex_grid_container #apexir_SEARCH {
        width: 64px;
    }
    .apex_grid_container #apexir_ACTIONSMENUROOT span {
        width: 0;
        text-indent: -9999px;
        padding-right: 14px !important;
    }
    .apex_grid_container .apexir_ACTION_MENU {
        margin-left: 0;
    }

    section.uRegionNoPadding > div.uRegionContent,
    section.uIRRegion {
        overflow: auto !important;
    }
}

    Download the slides from my talk on Responsive Web Design at Oracle OpenWorld 2012.

    The CSS I used in my pages for mobile IRR support:

    @media screen and (max-width: 767px) {
        .apex_grid_container #apexir_SEARCH {
            width: 64px;
        }
        .apex_grid_container #apexir_ACTIONSMENUROOT span {
            width: 0;
            text-indent: -9999px;
            padding-right: 14px !important;
        }
        .apex_grid_container .apexir_ACTION_MENU {
            margin-left: 0;
        }
    
        section.uRegionNoPadding > div.uRegionContent,
        section.uIRRegion {
            overflow: auto !important;
        }
    }
    

  6. Modern Web Development Trends and Application Express →

    Here is a copy of my session on Modern Web Development Trends and Application Express presented at ODTUG KScope 12 in San Antonio, TX.

    Abstract

    HTML5, CSS3, Modernizr, Compass Style + SCSS, Responsive Web Design, Progressive Enhancement, Fluid Grids. These are just some of the emerging trends for modern web development, where your application must be device agnostic and functional on a variety of different platforms, screen sizes, and resolutions. This session will give you a primer on these trends and how to apply them to your existing APEX applications. Learn best practices and see firsthand how you can adopt these emerging trends and technologies.

    Download Session Slides PDF

  7. Links from my APEX UI & Themes Talk

    Just wanted to put up some links from my talk on APEX UI from ODTUG Kscope 11. Hopefully a full blog post is coming soon! ;)

    — compass/scss http://compass-style.org/

    — modernizr http://modernizr.com/

  8. Mastering Custom IRs in APEX 4.0: How you can fully control the look and feel of your Interactive Reports Toolbar

    Mastering Custom IRs in APEX 4.0: How you can fully control the look and feel of your Interactive Reports Toolbar

    One of my favorite undocumented feature of APEX 4.0 is the vastly improved usage of DIVs for laying out many of APEX’s UI components. This move away from table-based layouts gives developers more control and less html markup to futz with. What was very difficult or even impossible in previous iterations of APEX is now possible and very easy to do having just a little HTML and CSS knowledge.

    In this first How To series of my blog, I will go through how Interactive Reports are rendered in APEX 4 and how you can use CSS and image sprites to completely modify the way your IR looks. We’ll take a look at an example that features an extremely customized version of an Interactive Report, and then drill deeper into the code that makes it happen. Let’s begin!

    Read More

  9. Designing APEX

    A new blog from APEX dev team member Shakeeb Rahman.  In this blog you will find out how to customize, modernize, and design your APEX application to look and feel its best.