Saturday, June 30, 2012

Kscope '12 and the Rodeo Special Event


Just arrived back home in New York after a great week at the ODTUG Kscope ’12 conference in San Antonio, TX. It was great meeting many members of our ever growing APEX community again, seeing several outstanding presentations on APEX and other topics and being able to present to our customers what’s new in Oracle Application Express 4.2 and introducing the mobile features we’ve been working on over the past couple of month.

If you've been to our sessions and want to try out for yourself what's new, or if you're just curious what APEX is all about, please sign up for our Early Adopters hosted site at:

https://apexea.oracle.com 

And thank you Kscope for organizing yet another amazing special event Wednesday night, I truly enjoyed the Rodeo, certainly something you don’t see every day in New York City. I’ve put together a few scenes of the event and loaded the up on YouTube, please check out the video here:



Thursday, June 21, 2012

Application Express 4.2 Early Adopter and Kscope 12


Today we released the first Early Adopter version of Oracle Application Express 4.2 – right in time for ODTUG KScope12. You can sign up and give it a try:


One of our focus areas in this release of course has been Mobile. And while we’re still actively developing many of the new features in APEX 4.2, you’ll find that you can already build pretty nice looking and usable mobile applications.

With KScope starting this weekend, I thought what better way to illustrate some of the capabilities in APEX 4.2, than to publish a very simple KScope scheduler, highlighting the sessions that are going to be presented by members of the Oracle Application Express development team:


I recommend opening this link on your mobile phone. And if you’re reading my Blog on your desktop (people still use those?), then here’s a handy QR code to save you the hassle of typing in the URL:
I list all the sessions with a simple search box and you can also drill down by presenter, or day. And if you feel like letting us know that you’ll be attending some of these sessions, feel free to leave you name and email for your session(s) of choice.

And lastly, you may have noticed I felt a bit inspired by the conference location, and colorized my app accordingly. If you’re building you apps with the APEX 4.2 EA, you’ll find you currently only have a choice of blue with different shades of gray. But jQuery Mobile offers very easy ways to customize your look & feel to your or your users’ taste. So if you want to learn more about that, and want to see mobile development in APEX 4.2 in action, stop by my session on Wednesday at 9:45am:




Thursday, February 23, 2012

Dynamic Images in PDF - What 32k Limit?

Looks like it's time to follow up on a Blog posting I wrote in 2008 about including dynamic images in PDF reports. After being called out on that good old 32k limit in a recent Blog posting by Roel Hartman, and reading through the recent OTN Forum posts and tweets on that topic, it would be rude not to respond ;-)

While I did state that we were looking to lift this 32k limit, this has not yet made it in, i.e. the limit is still in place. However in my posting I was also saying that if the XML data is generated by some other way, and the PDF rendering is done using the print API, then the use of larger images would be possible. And that is certainly the case, so let's take a look at how this could be done.

The key piece is our Print API (apex_util.download_print_document and apex_util.get_print_document), with this API you can generate PDF and other documents through a simple PL/SQL API call. This API is taking care of all the communication with BI Publisher or FOP for you. The apex_util.get_print_document API can be called to generate and retrieve the print document as a BLOB in the database for further processing, like storing the document in tables, etc. The apex_util.download_print_document API can be called in an APEX page process to generate and download the print document straight to your client. Both APIs have three different signatures, they allow for programmatically downloading report queries while dynamically associating stored report layouts at runtime, downloading report queries with custom templates stored in your own tables, and generating PDF based on your own custom XML using your own custom templates.

This last scenario is what we want to use for our dynamic images sample, i.e. we're going to generate the report data in XML format ourselves, thus getting around that 32k limit and store the report data in a CLOB. We're then also going to store our report layouts in our own tables, and query them up dynamically at runtime. The API for this looks as follows (for further details, reference the Oracle Application Express API Reference):

-- -----------------------------------------------------------------------------------------------
procedure download_print_document (
--
-- This procedure initiates the download of a print document using XML based report data and RTF or XSL-FO based report layout.
--
-- Arguments:
-- p_file_name Defines the filename of the print document
-- p_content_disposition: Specifies whether to download the print document or display inline ("attachment", "inline")
-- p_report_data: XML based report data
-- p_report_layout: Report layout in XSL-FO or RTF format
-- p_report_layout_type: Defines the report layout type, that is "xsl-fo" or "rtf"
-- p_document_format: Defines the document format, that is "pdf", "rtf", "xls", "htm", or "xml"
-- p_print_server: URL of of the print server. If not specified, the print server will be derived from preferences
-- example: http://myserver.mydomain.com:8888/xmlpserver/convert
--
p_file_name in varchar,
p_content_disposition in varchar default 'attachment',
p_report_data in clob,
p_report_layout in clob,
p_report_layout_type in varchar2 default 'xsl-fo',
p_document_format in varchar2 default 'pdf',
p_print_server in varchar2 default null
);


Now of course the question is, how do we get our data into XML format, if we don't have APEX take care of that for us, and where do we get the images from and how to we include them in this API call? Getting our data into XML format is the easy part, let's say you want to generate XML data for this query:

select * from emp

You could simply call dbms_xmlgen.getxml, supply the query and retrieve the XML back as a CLOB:

select dbms_xmlgen.getxml('select * from emp') xml_data from dual

Now assuming you have your images stored in a BLOB column, you would need to convert the images into base64 encoded data in order to include them in your XML. I have a blob2clobase64 function included in my sample application, which basically does just that. It should be noted though, that ultimately our API call is going to reach out to BI Publisher via utl_http, meaning you're going to do send your XML data via http to another service, which requires certain characters to be encoded, you can find more information on this here:

http://en.wikipedia.org/wiki/Base64

APEX typically takes care of this for you, in our scenario though, you generate the XML yourself, so you need to encode the base64 data on your own. I have taken care of this in blob2clobase64 function that ships with my sample app.

create or replace function blob2clobase64 (
p_blob in blob,
p_escape in char default 'N'
) return clob is
l_pos pls_integer := 1;
l_buffer varchar2 (32767);
l_res clob;
l_lob_len integer := dbms_lob.getlength (p_blob);
begin
dbms_lob.createtemporary (l_res, true);
dbms_lob.open (l_res, dbms_lob.lob_readwrite);
loop

l_buffer := utl_raw.cast_to_varchar2 (
utl_encode.base64_encode (
dbms_lob.substr (p_blob, 48, l_pos)
)
);
if (p_escape = 'Y') then
l_buffer := replace(l_buffer,'+','%2B');
l_buffer := replace(l_buffer,'/','%2F');
l_buffer := replace(l_buffer,'=','%3D');
end if;

if length (l_buffer) > 0 then
dbms_lob.writeappend (l_res, length (l_buffer), l_buffer);
end if;
l_pos := l_pos + 48;

exit when l_pos > l_lob_len;

end loop;
return l_res;

end blob2clobase64;

So in my example, using a table called eba_pdfimg_images, that includes the data and images I want to print, the XML generation would look like this:
   -- generate XML data
for c2 in (
select dbms_xmlgen.getxml('
select
id,
file_name,
mime_type,
description,
blob2clobase64(image,''Y'') image
from eba_pdfimg_images
') xml_data from dual
) loop
l_xml_data := c2.xml_data;
end loop;

Once I query up my report layout, converted that to a CLOB, and generated my XML data with images as outlined above, I can simply call our API:
    apex_util.download_print_document (
p_file_name => 'image_demo',
p_content_disposition => 'ATTACHMENT',
p_report_data => l_xml_data ,
p_report_layout => l_print_layout,
p_report_layout_type => 'rtf',
p_document_format => :P1_FORMAT
);
This will generate a file called image_demo, and based on whether you choose to generate Word or PDF, you'll get ‘.rtf' or ‘.pdf' file back.

So that's it. You can generate your RTF templates with the BI Publisher Word Plug-In as you normally would. And you can take your report query SQL and wrap it into a dbms_xmlgen.getxml call, and then you'll be able to include much larger images in your PDF dynamically. Want to give it a try? Here's my update sample app (logon as demo/demo123):

Dynamic Images in PDF Reports

I uploaded three images, and two report layouts. If you're trying out your own images or templates, I ask that you please remove when done, and report back if you encounter any issues. Also, if you want to try this out locally, you can download the app (sample_pdf_with_images.sql) along with the RTF layouts and images here:

Download Sample App

Please note, this app requires BI Publisher to be configured as your print server, and the current release of APEX 4.1.1 (my sample is an APEX 4.1.1 export, but you should be able to use the same technique on APEX 4.0 and above).

Monday, February 6, 2012

Mobile APEX Apps – Next Steps

It's been a few weeks since my last Blog posting on mobile development, or any topic for that matter. I've been busy doing Cloud development and talking about it at UKOUG and NYOUG. Then there's the ongoing work on APEX 4.1.1, which actually won't ship with jQuery Mobile bundled in, mainly due to jQuery Mobile's minimum requirement of jQuery 1.6.4 while APEX 4.1 includes jQuery 1.6.2, and a patch release won't be the right time to move that up. But as my previous mobile samples and especially the mobile version of the Oracle Learning Library show, it's certainly possible to use jQuery Mobile in APEX 4.1 today. So the full integration of jQuery Mobile with APEX, incl. declarative / wizard-driven support for building mobile web applications is currently planned for APEX 4.2, which actually was the subject of some recent meetings in Vienna, Austria.

While we wait for (and work on) APEX 4.2, I'm planning to continue blogging about what can be done with jQuery Mobile and APEX today, publish some ideas and gather feedback from our users on what they'd like to see in terms of mobile support in APEX 4.2. And one area that I found increasingly cumbersome in my mobile development efforts was to quickly try out my latest mobile creations on my iPhone and iPad. I kept sending emails to myself with the URL to my mobile APEX apps, bookmarked those URLs, but then ended up constantly creating new apps, requiring new boomarks. I also tried to just cloud-sync my bookmarks between my MacBook and mobile devices, but that wasn't ideal either.

Then I thought if I have these difficulties while developing, end users might have similar issues. For example, some of our new Cloud-based productivity applications will have a link that takes the user to the mobile version of a page or app. And that's great if they're already on a mobile device, but what if for example, a users sits at his desks, runs some analysis, and then needs to run to a meeting and he wants to take the results with him on his mobile device? Well, one possibility would be to just display a QR code on the desktop version of his report, and then allow him to scan that QR Code with his mobile device, which would then take him straight to the mobile version of that report.

Sounds like a good idea? Here's how this could look like, just open the following page on your desktop or laptop:


It's a very simple Interactive Report on the EMP table, and right next to it, in the sidebar, I show a QR code, which can be scanned with one of the many bar-code readers available for smartphones, like RedLaser.

Once scanned, you will typically be prompted by your smartphone whether you want to go to the URL, and if you proceed, your mobile browser opens and takes you to this page:


To generate the QR Code I wrote a very simple QR Code Generator APEX Region Plug-In that takes in the text your want to encode, and the width and height of the QR Code image and then calls out to Google to have the actual image generated.

If you would like to take a look at the app, see how it's done and use some ideas for your own apps, you can download the application here:



Thursday, November 17, 2011

Getting Started with Mobile in APEX - Part 2

jQuery Mobile 1.0 Final was released today! Time to take it for a spin. As outlined in my previous post, jQuery Mobile is available for download on the jquerymobile.com web site:

Alternatively, if you were referencing the CDN, you could of course also simply update your jQuery Mobile enabled templates and remove the "RC2" or "RC3" suffix from your file references:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

Then just re-run your pages, and you'll be up and running using the shiny, new final release of jQuery Mobile 1.0!

Now running my original "Hello World!" sample with jQuery Mobile 1.0 would be a bit boring. So here's a new sample application, this one should be more interesting. It's a very basic message board application. Point your mobile device (or desktop browser) to this URL:

You'll get a home page showing recent messages, along with the title, author and create date and time. When you click on a message, you'll get to a read-only view of the message details. When you click on the create button on the home page, you can enter a new message, with your name, email and message title. Give it a try, leave me some feedback and comments, and if you like the app, it's available for download as well. It comes with the underlying database objects bundled in as supporting objects, i.e. they're created when you install the application.

For the most part, this is a standard APEX application, nothing too fancy or out of the ordinary. The only relevant templates are those containing "mobile" in their names. The home page was built as a standard classic report page, using a customized named-column report template. The form page is a standard APEX form, which is omitting the form table-grid using the corresponding region template attribute and using the new label template field container attributes. The buttons use simple anchor tags, and illustrate how you can have different button colors, using the new "hot" attribute for buttons. And for the back button, I used a jQuery Mobile button icon, which can be easily included using the HTML data- attributes, data-icon in this case.

So try out the application, and leave your comments in the message board. I'll follow up with additional details on some of the more advanced concepts in upcoming posts.

Friday, November 11, 2011

Getting Started with Mobile in APEX - Part 1

With jQuery Mobile moving closer to production, I finally started working on my paper documenting how to develop mobile applications with APEX 4.1 We've put a lot of changes into APEX 4.1 that make the integration of frameworks like jQuery Mobile easier. Full mobile support, with mobile templates and components that are optimized for mobile devices, is currently planned for APEX 4.2. But that doesn't mean that you couldn't start building mobile apps with APEX today. It'll just be a bit more manual work for now. So while working on the paper, I've figured I'll start blogging about this as well, taking you step by step through the process of enabling mobile development in APEX 4.1, integrating the jQuery Mobile library and building your first mobile app.

So let's get started. The first thing you'll need to do is set a system preference in APEX that enables mobile development, to do this, logon as SYS and run the following:

exec apex_040100.wwv_flow_platform.set_preference('MOBILE_DEVELOPMENT_ENABLED','Y') ;
Don't worry, this will have no effect on any of your existing applications. What this system preference does is that in a number of places in APEX, you'll now see a select list that lets you choose between a "Desktop" and "Mobile" mode. The most important place where that's relevant is when editing a page template, i.e. you can now define that page template to be a mobile page template or a full-size / desktop page template. Once we have jQuery Mobile fully integrated, currently targeted for APEX 4.2, this will trigger the inclusion of the jQuery Mobile library, and the omission of some JavaScript and CSS references that are not needed for mobile. For the time being though, all this is doing is that it makes APEX render form elements on your mobile pages without a table grid. This gives you better control over the HTML generated by APEX, which allows the generation of HTML code that follows to jQuery Mobile syntax. Having a mobile page template in your current theme also triggers the mobile option in the create page wizards. So you can choose to build a mobile page, which hides page types from the wizard that don't yet work well on mobile, like e.g. Flash charts. And as you step through the wizard, the wizard will pick up your default mobile templates, instead of the standard templates, but only if you have actually set your mobile defaults for your theme.

Next you'll need to install or reference the jQuery Mobile libraries. These libraries are not yet bundled into APEX because jQuery Mobile is not yet production software. However you can download the libraries directly from jquerymobile.com or even easier, reference the CDN-hosted libraries in your page template. To reference the CDN, simply include the following in your page template:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>

If you prefer downloading and installing jQuery Mobile in your APEX instance, go to this URL and download the ZIP File from there:

http://jquerymobile.com/download/

Then extract the contents of this ZIP file and load them into your APEX images directory. When using the APEX Listener or Apache/mod_plsql, you can simply copy the files to the images directory. When using the Embedded Gateway, you will need to connect to your database via WebDAV or FTP and upload the files into XML DB. To follow the folder structure that APEX uses for other jQuery libraries, make sure to copy the files to a folder you create as \i\libraries\jquery-mobile\1.0rc2\ (that's assuming your downloading the Release Candidate 2 of jQuery Mobile). The JS and CSS files should be copied directly in this folder, the images directory one below. Once installed, you can include the following in your page template:
<link rel="stylesheet" href="#IMAGE_PREFIX#libraries/jquery-mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="#IMAGE_PREFIX#libraries/jquery/1.6.1/jquery-1.6.1.js""></script>
<script src="#IMAGE_PREFIX#libraries/jquery-mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>

And then you're ready to get started with Mobile development. To create a minimalist mobile page template, use the following code samples:

Header:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>#TITLE#</title>
#HEAD#
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body #ONLOAD#>
#FORM_OPEN#
Body:
<div data-role="page" id="#TITLE#">

<div data-role="header" data-theme="b" data-position="fixed">
<h1>#TITLE#</h1>
</div>

<div data-role="content">
#BOX_BODY#
</div>

<div data-role="footer" class="ui-bar" data-position="fixed">
#REGION_POSITION_08#
</div>

</div>

Footer:
#FORM_CLOSE#  
</body>
</html>
After that, create a new page, choosing the newly created mobile template, and include e.g. a HTML region with some static text, like "Hello World". Then open that page in your mobile device. You should see something like this:

You can download this sample app here (this is an updated version, in my previous version I used an application alias that caused the app to not work if it was installed more than once on an instance like apex.oracle.com), just import into your own workspace and run:

Please note that this demo references the CDN, if you want to reference your locally installed jQuery Mobile files, please modify your page template as outlined above.

This concludes my first "Getting Started with Mobile" blog post. Next time I'll cover the jQuery Mobile syntax and how you would go about structuring your mobile APEX pages.


Thursday, November 10, 2011

Oracle Database Cloud Service

Learn all about Oracle's Database Cloud Service at my upcoming presentations in New York and Birmingham, UK. Announced at Oracle Open World 2011, the Oracle Public Cloud is a set of integrated services that provide access to Oracle Fusion Applications, Oracle Fusion Middleware, and the Oracle Database. The focus of my sessions will be on the Database Cloud Service, which includes Oracle Application Express, access to the Oracle Database using RESTful Web Services and a set of business productive application, which are based on Oracle Application Express and can be installed with just a few clicks.

UKOUG, Birmingham, UK, 12/06/2011