Creating a simple image application in Apex

Question

select
"IMAGE_ID",
<img src="#OWNER#.deliver_thumbnail?p_image_id='||IMAGE_ID||'"/> thumbnail,
"FILENAME" from "ORDIMAGE_IMAGES"
where
instr(upper("FILENAME"),upper(nvl(:P1_REPORT_SEARCH,"FILENAME"))) >
Its is showing an error
showing only the coding part when i run the application instead of showing image....
can you please help me rectify the error
Edited by: 880021 on 17-Aug-2011 20:58

Answer 1

Creating a simple image application in Apex
Create a new application from scratch. Name it ORDImages_images.
Add a Report and Form Page based on your ORDImage_images table. Ensure that you select a Classic Report (i.e. not Interactive, which is the default). As expected, two pages are created.
Continue to create the application and then run it.
After the login page, there will be spurious entries for image and thumbnail.
This is expected because of the ORDImage columns in the images table.
Edit Page 1 and open the Images Region
The Source entry is
select
"IMAGE_ID",
"IMAGE",
"THUMBNAIL",
"FILENAME"
from "ORDIMAGE_IMAGES"
where
instr(upper("FILENAME"),upper(nvl(:P1_REPORT_SEARCH,"FILENAME"))) > 0
In SQL Developer, create the deliver_images_thumb procedure
CREATE OR REPLACE PROCEDURE deliver_thumbnail(p_image_id IN NUMBER) IS
l_thumbnail ORDSYS.ORDImage;
BEGIN
-- Fetch the thumbnail from the database
SELECT thumbnail
INTO l_thumbnail
FROM ORDImage_images
WHERE image_id = p_image_id;
-- Check update time if browser sent If-Modified-Since header
IF ordplsgwyutil.cache_is_valid( l_thumbnail.getUpdateTime() )THEN
owa_util.status_line( ordplsgwyutil.http_status_not_modified );
RETURN;
END IF;
-- Set the MIME type and deliver the image to the browser.
owa_util.mime_header( l_thumbnail.mimeType, FALSE );
ordplsgwyutil.set_last_modified( l_thumbnail.getUpdateTime() );
owa_util.http_header_close();
IF owa_util.get_cgi_env( 'REQUEST_METHOD' ) <> 'HEAD' THEN
wpg_docload.download_file( l_thumbnail.source.localData );
END IF;
END;
Then
GRANT EXECUTE ON deliver_thumbnail TO PUBLIC;
Return to Apex and change the Source entry to
select
"IMAGE_ID",
'<img src="#OWNER#.deliver_thumbnail?p_image_id='||IMAGE_ID||'"/>' thumbnail,
"FILENAME" from "ORDIMAGE_IMAGES"
where
instr(upper("FILENAME"),upper(nvl(:P1_REPORT_SEARCH,"FILENAME"))) > 0
Apply changes and run the application
You can now search on substrings of filenames. Note that the image_ID is not shown. To rectify this, Edit Page 1 and open Report in Regions.
Edit the image_id and under Column Link, change the Link Text to #IMAGE_ID#. Also change the Heading in the Column Attributes to Image ID.
Apply the changes and re-run.
Clicking on the image_id link takes you to Page 2 – the form for that image.
Page 2 is sparse so reveal the image_id by Editing Page 2 and opening the P2_IMAGE_ID Page Item. Change Display as Hidden to Text Field. Apply changes and re-run.
In Page Items, open and delete the P2_THUMBNAIL item.
Open the P2_IMAGE item.
Under Name, change the Display As entry to Display Image (from the select list).
Under Settings, change the Based On entry to BLOB Column returned by SQL Statement
Enter
SELECT i.image.source.localdata
FROM ORDimage_images i
WHERE image_id = :P2_IMAGE_ID
as the SQL Statement
Apply changes and re-run the application
Making an image clickable
Edit Page 1 and open Report in Regions. Edit THUMBNAIL and under Column Link, insert
<img src="#OWNER#.deliver_thumbnail?p_image_id=#IMAGE_ID#"/>
as Link Text.
Select Page 2 as the Target Page in this Application.
Finally, set Item 1's name to P2_IMAGE_ID and its Value to #IMAGE_ID#
Removing the Spreadsheet link
Under Report Attributes, set Enable CSV Output to No