Displaying SVG with Oracle HTML DB (aka Application Express)

Derek Scuffell, Syngenta

2

The hoops you have to go through …

What is HTML DB (aka Application Express, Apex) A bit about SVG How Apex uses SVG The how to show your SVGs in HTML DB

3

What is HTML DB?

Quick assembly of reporting and data entry applications

Based on existing tables and views or data from spreadsheets

~ No programming or scripting Instant deployment on the Web Use the full power of Oracle

Database 10g

4

Oracle HTML DB Offers

The Qualities of a Personal Database Productivity Ease of Use Flexibility

The Qualities of an Enterprise Database Security Integrity Scalability Availability Portability

Built for the Web

5

Opportunities with HTML DB

Spreadsheets

Desktop Databases

File ServersAny Browser

HTML DB

6

How it Works

Shared Workgroup Database Service Centrally Deployed & Managed Accessed anywhere via a Browser Declarative development style

Oracle HTML DB

7

ApplicationsApplications

ApplicationsApplications

ApplicationsApplications

Logical Architecture

ApplicationsApplications Schema ASchema A

ApplicationsApplications Schema BSchema B

ApplicationsApplications Schema CSchema C

Discovery

Field Trials

Informatics

Oracle HTML DB

8

HTML DB home page

9

Declarative App Development

10

Scalable Vector Graphics (SVG)

XML– 2D vector graphics

Information rich vs image– Information usable by applications e.g. BkChem

Open Standard – W3C Browser support – plug-in & built-in

11

Why will SVG use increase?

Simplicity– Small no. of tags– Useable by anyone

Inexpensive– Because of simplicity many editors available

e.g. cheap, vi, inkscape, BKChemSlightly more costly Dreamweaver, visio 2003

Dynamic– XML is extensible so can be

developed and extended

Non-proprietary– No vendor lock-in leads to

Greater choice of tools available

12

SVGs in Oracle Apex

Charts– Charts, trees

Rendering– Adobe

– Built-in: Mozilla, Camino

13

Structure definitions in use

SMILES – Daylight Chemical Systems MOL files - MDL CML – Chemical Markup Language INCHI - The IUPAC International Chemical Identifier ?SVG – Well it doesn’t really …

14

Example SVG for ethanol

<?xml version="1.0" encoding="UTF-8"?> <svg height="297.000000mm" version="1.0" viewBox="0 0 792 1121" width="210.000000mm" xmlns="http://www.w3.org/2000/svg"> <g font-family="Helvetica" font-size="12pt" stroke-linecap="round"> <g stroke="#000" stroke-width="1.0"> <line x1="126.89" x2="149.78" y1="66.78" y2="80.0"/> </g> <g stroke="#000" stroke-linecap="butt" stroke-width="1.0"> <line x1="96.0" x2="89.0" y1="75.379641765" y2="71.3368283093"/> </g> <g stroke="#000" stroke-width="1.0"> <line stroke-width="1.0" x1="126.89" x2="128.712731324" y1="66.78" y2="63.624"/> … <line stroke-width="1.0" x1="134.180925295" x2="136.003656619" y1="54.156" y2="51.0"/> </g> <g stroke="#000" stroke-width="1.0"> <line x1="112.0" x2="126.89" y1="75.379641765" y2="66.78"/> </g> <g stroke="#000" stroke-width="1.0"> <line stroke-width="1.0" x1="149.78" x2="151.281616426" y1="80.0" y2="82.6"/> … <line stroke-width="1.0" x1="155.786465706" x2="157.288082132" y1="90.4" y2="93.0"/> </g> <g stroke="#000" stroke-width="1.0"> <polygon fill="#000" points="150.28 80.0 152.28 96.0 147.28 96.0 149.28 80.0" stroke="#000"/> </g> <g stroke="#000" stroke-width="1.0"> <polygon fill="#000" points="126.39 66.78 124.39 47.0 129.39 47.0 127.39 66.78" stroke="#000"/> </g> <g stroke="#000" stroke-width="1.0"> <line x1="149.78" x2="165.0" y1="80.0" y2="71.2097684578"/> </g> <text fill="#000" font-family="helvetica" font-size="12pt" x="166.3" y="69.78">H</text> … <text fill="#000" font-family="helvetica" font-size="12pt" x="120.3" y="43.35">H</text> </g> </svg>

15

Structure tables

DS_STRUCTURES Name Null? Type -------------------------- -------- ------------- STRUCTURE_ID NOT NULL NUMBER(8) REGISTRATION_DATE NOT NULL DATE FORMULA VARCHAR2(700) WEIGHT NUMBER(12,4) STEREO VARCHAR2(40) PROCESS_DATE NOT NULL DATE NO_SEARCH_KEYS VARCHAR2(1) STRUCTURE_CLASS NOT NULL VARCHAR2(15)

DS_STRUCTURE_BLOBSName Null? Type-------------------------- -------- ------------

STRUCTURE_ID NOT NULL NUMBER(8)

BLOB_ID NOT NULL NUMBER

OBJECT_TYPE NOT NULL VARCHAR2(3)

OBJECT_CONTENTS BLOB

MIME_TYPE VARCHAR2(48)

OBJECT_NAME VARCHAR2(30)

16

Loading & Viewing SVG

1. Page to load SVG files– Use default display type “Browse …”– Built-in to HTML DB

2. PL/SQL Procedure to return BLOB content3. Page to view structure summary

– Use default master/detail form– Built-in to HTML DB

4. Page to edit structure detail– The detail page from the master/detail form.

17

SVG Image Display PL/SQL procedure

18

Squeezing SVG into the HTMLDB Report

Embed Tag

Object Tag

Combined

<object data="/alphaDglucose_v1.svg" type="image/svg+xml"

width="300" height="300">

</object>

<embed src="/alphaDglucose_v1.svg" type="image/svg+xml" border="1"

width="200" height="150"

pluginspage="http://www.adobe.com/svg/viewer/install/" />

<object data="/alphaDglucose_v1.svg" type="image/svg+xml"

width="300" height="300">

<embed src="/alphaDglucose_v1.svg" type="image/svg+xml" border="1"

width="200" height="150"

pluginspage="http://www.adobe.com/svg/viewer/install/" />

</object>

19

In HTML DB report

Locate the report attributes definition page Select column to show SVG Alter selection to add tags

<object data= "#OWNER#.svg_image_display?p_image_id=#BLOB_ID#" type="image/svg+xml"

width="400" height="300">

</object>

20

Additional options

Add JMOL applet

<script>

jmolInitialize("../../jmol");

jmolApplet(200, "load #OWNER#.svg_image_display?p_image_id=#BLOB_ID#“ );

</script>

21

In Summary

SVG useful vector graphic display technology Easy to include in HTML DB apps Minimal app produced – quickly to render structure

graphics

22

Useful links

Adobe XSLT document– Convert CML to SVG/CML composite

http://www.adobe.com/svg/examples.html

Structure Code and application– available at apex.oracle.com

Try Apex yourself– http://apex.oracle.com