Rendur.com: Speedy HTML Preview

This tool isn’t related to ApEx specifically but I’ve found it to be useful from time to time. Essentially, it gives you a large, resizable text area into which you can type HTML and CSS which it renders on the page as you type. Nothing hugely complex but for hacking about at the odd bit of HTML it’s certainly quicker than firing up a text editor, saving your file and previewing it in a browser.

Find it at:

http://www.rendur.com/

“Return” and “Print” links on Printer Friendly pages

A Printer Friendly version of any ApEx page can be viewed by accessing a URL of the form:

http://.../f?p=1002:460:2122245186391314::NO::::YES

where the YES at the end of the URL tells ApEx that we want to view the page in Printer Friendly mode. This causes the page to be displayed using the Printer Friendly page template. This removes lots of the bits and pieces from the screen (such as navigation lists, breadcrumbs etc.) that we have no interest in printing. The user can then click the File menu in their browser and click “Print” to actually print the page. They can then click the “Back” button in their browser to return to the application proper. Great.

But wouldn’t it be nice if we could put our very own buttons/links on the Printer Friendly page to allow the user to print the page and then “go back” without having to use the browser’s File Menu or Back Button? Well, we can…

1) In Application Builder, Select Shared Components > User Interface > Templates
2) Find and click the “Printer Friendly” page template.
3) In the HEADER text area, add the following just before the </head> closing tag:

<style>
@media print
{
.screenOnly {display:none;}
}
</style>

This creates a CSS class called screenOnly which causes those HTML elements to which it is applied not to be rendered when printing.

4) Add the following to the very top of the BODY text area:


<!-- Display PRINT and GO BACK links -->
<BR/>
<a href="javascript:history.go(-1);" class="screenOnly">
<img src="&IMAGE_PREFIX.prev_arrow.gif" align="absmiddle" hspace="2">
Click here to return to the application
</a>

<a href="javascript:window.print();" class="screenOnly">
<img src="&IMAGE_PREFIX.print02.gif" align="absmiddle" hspace="2">
Click here to print this page
</a>
<hr class="screenOnly"/>
<!--End display of PRINT and GO BACK links -->

Click “Apply” to save your changes.

5) Now run any of your pages in Printer Friendly mode. You’ll see a bar at the top of the page looking like this:

Clicking the Print icon will open your browser’s print dialog. Clicking the Go Back link will take you back to your application. And, what’s more, when you print this page neither of these links or the the Horizontal Rule that’s just below them will appear on the printed page spoiling the layout (this is achieved through the screenOnly CSS class applied to the <a> and <hr> tags).

As an example, go to any page in my sample app (such as here: http://apex.oracle.com/pls/otn/f?p=666666:4) and click the Print link in the top right of the page.