Development

I got my hands on a copy of the new book "Developing Web Application with Oracle ADF Essentials" by Sten Vesterli published by Packt Publishing, so I wanted to post a quick review.

There are already multiple books about Oracle ADF out there, but the unique angle for this book is that it focuses on the free version of Oracle ADF - Oracle ADF Essentials. To increase the "Free" angle it also uses the free MySQL database throughout the book which is a nice touch that differs from the regular approach of using an Oracle database.

The book is around 250 pages long and as such it is not aiming for a very deep technical dive, but rather gives a very good overview of the various layers of ADF Essentials to someone who is new to the world of ADF. It covers the Fusion stack including ADF BC, ADF Faces, ADF Controller and ADF Binding. Going beyond the wizards it also covers the basics of adding code in managed beans and the business components layer.

The book starts with setting up your environment including JDev+MySQL and GlassFish, and then uses this environment to build a simple application that you enhance and add features to while going through the various chapters of the book.

Considering the target audience for ADF Essentials (Java purists), it might have been interesting to include in the book a chapter that describe integration with EJBs and POJOs as a source of data for ADF applications. I guess this is something for the next edition...

The book does address establishing a security layer for your ADF Essentials application - something that you get in regular ADF but you need to manually implement in the Essentials packaging.

Sten also goes beyond the basic intro level to cover some of the topics he also covered in his other book about enterprise ADF Development. He includes chapters about debugging, deployment and library usage and also addresses team development - which is a nice touch.

Overall the book can provide a great introduction to ADF for a developer who is completely new to the framework. The fact that is uses a completely free stack should make it even more attractive. For developers who are looking to leverage the free version of ADF this is right now the only book out there to cover that part of the framework (Glassfish configuration etc).

After you read this book, you'll probably want to dig deeper with some of the more in-depth books about ADF to complete the picture.

With the new Oracle Cloud offering you no longer need to install and manage the runtime platform for ADF applications. You can use a hosted instance of Oracle WebLogic and the Oracle Database to host your application.

Deployment to the cloud is quite straightforward, and you can do it directly from inside JDeveloper.

Here is a quick video showing you how to first create your database objects and then deploy your application to the cloud.

One small point, in the demo you don't see it but I also used the option to import the data into the tables.

To do that scroll the cloud cart to the right and check the check box for data.

-- it's just for fun:
SQL> alter system set "_scalar_type_lob_storage_threshold"=32000;

System altered.
SQL> create table t_varchar32000(v varchar2(32000 byte));

Table created.

SQL> insert into t_varchar32000
  2  select rpad(rownum,31999) || `x' str from dual connect by level<=1000;

1000 rows created.

SQL> commit;

Commit complete.

SQL> create index ix_t_varchar32000 on t_varchar32000(v) tablespace users;
create index ix_t_varchar32000 on t_varchar32000(v) tablespace users
                                  *
ERROR at line 1:
ORA-01450: maximum key length (6398) exceeded


SQL> create index ix_t_varchar32000 on t_varchar32000(v) tablespace ts_32k;
create index ix_t_varchar32000 on t_varchar32000(v) tablespace ts_32k
                                  *
ERROR at line 1:
ORA-01450: maximum key length (26510) exceeded

-- tablespace for big varchars:
SQL> alter system set DB_32K_CACHE_SIZE=100M;

System altered.

SQL> CREATE TABLESPACE TS_32K DATAFILE '/u01/app/oracle/oradata/xtsql/pdb1/ts_32k_1.dbf' SIZE 150M
  2   EXTENT MANAGEMENT LOCAL UNIFORM SIZE 1M
  3   BLOCKSIZE 32K;

Tablespace created.

SQL> create table t_varchar16000(v varchar2(16000 byte)) tablespace ts_32k;

Table created.

SQL> insert into t_varchar16000
  2  select rpad(rownum,15999,'x' ) || 'y' from dual connect by level<=1000;

1000 rows created.

SQL> create index ix_t_varchar16000 on t_varchar16000(v) tablespace ts_32k;

Index created.

SQL> begin
  2     dbms_stats.gather_table_stats(
  3       ownname    => user
  4      ,tabname    => 'T_VARCHAR16000'
  5      ,method_opt => 'for all columns size auto'
  6      ,cascade => true
  7     );
  8  end;
  9  /

PL/SQL procedure successfully completed.

SQL> @stats/tab t_varchar16000

OWNER           TABLE_NAME                     PARTITION_NAME          # ST_LOCK STALE_STA GLOBAL_ST USER_STAT   NUM_ROWS     BLOCKS EMPTY_BLOCKS AVG_ROW_LEN  AVG_SPACE LAST_ANALYZED
--------------- ------------------------------ -------------------- ---- ------- --------- --------- --------- ---------- ---------- ------------ ----------- ---------- ---------------
XTENDER         T_VARCHAR16000                                                   NO        YES       NO              1000       3016            0       16001          0 14-NOV-13


OWNER           INDEX_NAME                       NUM_ROWS DISTINCT_KEYS     BLEVEL LEAF_BLOCKS  CL_FACTOR LAST_ANALYZED   GLOBAL_ST USER_STAT
--------------- ------------------------------ ---------- ------------- ---------- ----------- ---------- --------------- --------- ---------
XTENDER         IX_T_VARCHAR16000                    1000          1000          1        1000       1000 14-NOV-13       YES       NO

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
| column_name                   | num_distinct| low_value         | high_value        | num_nulls | num_bucket| last_analyzed       | sample_size| globa| user_| avg_c| histogram           |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
| V                             | 1000        | 1000xxxxxxxxxxxxxx| 9xxxxxxxxxxxxxxxxx| 0         | 1         | 2013-11-14 21:11    | 1000       | YES  | NO   | 16001| NONE                |
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Responsive web applications are a common pattern for designing web pages that adjust their UI based on the device that access them. With the increase in the number of ADF applications that are being accessed from mobile phones and tablet we are getting more and more questions around this topic.

Steven Davelaar wrote a comprehensive article covering key concepts in this area that you can find here. The article focuses on what I would refer to as server adaptive application, where the server adapts the UI it generates based on the device that is accessing the server.

However there is one more technique that is not covered in that article and can be used with Oracle ADF - it is CSS manipulation on the client that can achieve responsive design. I'll cover this technique in this blog entry. The main advantage of this technique is that the UI manipulation does not require the server to send over a new UI when a change is needed. This for example allows your page to change immediately when you change the orientation of your device.

(By the way this example was developed for one of the seminars in the upcoming Oracle ADF OTN Virtual Developer Day).

In the demo that you'll see below you'll see a single page that changes the way it is displayed based on the orientation of the device. Here is the page with the tablet in landscape and portrait:

To achieve this I'm using a CSS media query in my page template that changes the display property of a couple of style classes that are used in my page.

The media query has this format:

@media screen and (max-width:700px) {
            .narrow {
                display: inline;
            }
            .wide {
                display: none;
            }
            .adjustFont {
                font-size: small;
            }
            .icon-home {
                font-size: 24px;
            }
        }

This changes the properties of the same styleClasses that are defined in my application's skin.

Here is a quick demo video that shows you the full application and explains how it works.

Update - since running this demo I found out that in 12.1.2 you get better results if everything relating to the style is defined just in your template and not spread in your skin file too (as shown in the video)

So For those looking to replicate this, here are the basic files:

<?xml version='1.0' encoding='UTF-8'?>
<af:pageTemplateDef xmlns:af="http://xmlns.oracle.com/adf/faces/rich" var="attrs" definition="private"
                    xmlns:afc="http://xmlns.oracle.com/adf/faces/rich/component">
    <af:xmlContent>
        <afc:component>
            <afc:description>A template that will work on phones and desktop</afc:description>
            <afc:display-name>ResponsiveTemplate</afc:display-name>
            <afc:facet>
                <afc:facet-name>main</afc:facet-name>
            </afc:facet>
        </afc:component>
    </af:xmlContent>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <af:resource type="css">

.wide {
    display: inline;
}

.narrow {
    display: none;
}

.adjustFont {
    font-size: large;
}
.icon-home {
        font-family: 'UIShellUGH';
    -webkit-font-smoothing: antialiased;
        font-size: 36px;
        color: #ffa000;
}
@media screen and (max-width:700px) {
            .narrow {
                display: inline;
            }
            .wide {
                display: none;
            }
            .adjustFont {
                font-size: small;
            }
            .icon-home {
                font-size: 24px;
            }
        }

@font-face {
            font-family: 'UIShellUGH';
            src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AA..removed code here...AzV6b1g==)format('truetype');
            font-weight: normal;
            font-style: normal;
        }

    </af:resource>
    <af:panelGroupLayout id="pt_pgl4" layout="vertical" styleClass="sizeStyle">
        <af:panelGridLayout id="pt_pgl1">
            <af:gridRow marginTop="5px" height="40px" id="pt_gr1">
                <af:gridCell marginStart="5px" width="100%" marginEnd="5px" id="pt_gc1">
                    <af:panelGroupLayout id="pt_pgl3" halign="center" layout="horizontal">
                        <af:outputText value="h" id="ot2" styleClass="icon-home"/>
                        <af:outputText value="HR System" id="ot3" styleClass="adjustFont"/>
                    </af:panelGroupLayout>
                </af:gridCell>
            </af:gridRow>
            <af:gridRow marginTop="5px" height="auto" id="pt_gr2">
                <af:gridCell marginStart="5px" width="100%" marginEnd="5px" id="pt_gc2" halign="stretch">
                    <af:panelGroupLayout id="pt_pgl2" layout="scroll">
                        <af:facetRef facetName="main"/>
                    </af:panelGroupLayout>
                </af:gridCell>
            </af:gridRow>
            <af:gridRow marginTop="5px" height="20px" marginBottom="5px" id="pt_gr3">
                <af:gridCell marginStart="5px" width="100%" marginEnd="5px" id="pt_gc3">
                    <af:panelGroupLayout id="pt_pgl5" layout="vertical" halign="center">
                        <af:separator id="pt_s1"/>
                        <af:outputText value="Copyright Oracle Corp. 2013" id="pt_ot1" styleClass="adjustFont"/>
                    </af:panelGroupLayout>
                </af:gridCell>
            </af:gridRow>
        </af:panelGridLayout>
    </af:panelGroupLayout>
</af:pageTemplateDef>

Example from the page:

                        <af:gridRow id="gr3">
                            <af:gridCell id="gc7" columnSpan="2">
                                <af:panelGroupLayout id="pgl8" styleClass="narrow">
                                    <af:link text="Menu" id="l1">
                                        <af:showPopupBehavior triggerType="action" popupId="p1" align="afterEnd"/>
                                    </af:link>
                                </af:panelGroupLayout>
                                <af:panelGroupLayout id="pgl7" styleClass="wide">
                                    <af:navigationPane id="np1" hint="buttons">
                                        <af:commandNavigationItem text="Departments" id="cni1"/>
                                        <af:commandNavigationItem text="Employees" id="cni2"/>
                                        <af:commandNavigationItem text="Salaries" id="cni3"/>
                                        <af:commandNavigationItem text="Jobs" id="cni4"/>
                                        <af:commandNavigationItem text="Services" id="cni5"/>
                                        <af:commandNavigationItem text="Support" id="cni6"/>
                                        <af:commandNavigationItem text="Help" id="cni7"/>
                                    </af:navigationPane>
                                </af:panelGroupLayout>
                            </af:gridCell>
                        </af:gridRow>

Previously i wrote beautifier in perl, but it was not so good, so i decided to write it in java using popular BlancoSQLFormatter library.
So you can download it now: http://orasql.org/scripts/SQLBeautifier.jar
Usage:

java -jar SQLBeautifier.jar your_file.sql

or

echo select * from dual | java -jar SQLBeautifier.jar

You certainly can conveniently use it within sql*plus with script like that:

set timing off head off termout off
col qtext format a150
prompt ################################  Original query text:  ################################################;
#spool &_SPOOLS/to_format.sql
spool to_format.sql
select
    coalesce(
        (select sql_fulltext from v$sqlarea a where a.sql_id='&1')
    ,   (select sql_text from dba_hist_sqltext a where a.sql_id='&1' and dbid=(select dbid from v$database))
    ) qtext
from dual
;
spool off

prompt ################################  Formatted query text #################################################;
#host perl inc/sql_format_standalone.pl &_SPOOLS/to_format.sql
host java -jar SQLBeautifier.jar to_format.sql
prompt ################################  Formatted query text End #############################################;
set termout on head on

Example:

Links:

• Download SQLBeautifier.jar
• Source
• BlancoSQLFormatter library
• SQL*Plus script example