APEX-AT-WORK by Tobias Arnhold: Browser issues

Browsing "Older Posts"

Browsing Category "Browser issues"

Image Slider Plugin

Von Tobias Arnhold → 1.11.2012

I'm currently working on a new plug-in based on the jQuery Plug-in S3Slider.

At the moment the plug-in is still under development:
http://apex.oracle.com/pls/otn/f?p=65560:12

It will be a region plug-in where you only set the selection and the options and it will create the nice slider solution on your APEX page. As template I use the cloud plug-in from Carsten Czarski.

The plug-in will be used as an example for a magazine article I will write in the next days.

Issue with packed app and javascript files (text/x-c)

Von Tobias Arnhold → 7.10.2009

I had the pleasure to find either an APEX bug or to find out that I'm unable to create packed applications! :O

After I installed my example application from http://apex.oracle.com/ on my local machine. I got a strange error after I edited an automatic installed javascript file:
The resource from this URL is not text: http://#SERVER_NAME#:8080/apex/wwv_flow_file_mgr.get_file?p_security_group_id=4257722764435732&p_flow_id=12000&p_fname=json.js

I checked the file again and found out that the "mime type" changed to: text/x-c
Normally it is: text/x-js

I uploaded/replaced a couple of installed javascript files to show you the difference:

All installed javascript files got this new mime type and they all worked properly until I changed something inside these files (in APEX).
As you see html and sql files got the right mime type even after the import.

Is this a known issue? Did I export and import something wrong?

I use the newest version of APEX 3.2 inside a XE database.

Browser issues

Own browser check condition in APEX

Von Tobias Arnhold → 3.12.2009

The easiest way to check the browser type for conditional displaying
is to use one of the following conditions:

Client Browser: Mozilla, Netscape 6.x/7x or higher
Client Browser: Microsoft Internet Explorer 5.5,6.0 or higher
Client Browser: Other browsers (or older version)

That way is definitely the easiest one. But in case you have several display conditions you need to check or you want to use that check at another point (for example inside an pl/sql script) then you get some trouble.
I asked in the APEX forum for help and thanks to Andy he gave me a really good hint how to find a solution for that issue.
Forum link: http://forums.oracle.com/forums/message.jspa?messageID=3322457

In my case I wanted to use a condition inside the SQL statement of an updateable report. Because FF and IE displayed the report columns differently.

First I followed the hint from Andy and analyzed the OWA_UTIL output with the function PRINT_CGI_ENV().


BEGIN
OWA_UTIL.PRINT_CGI_ENV();
END;

The result for parameter HTTP_USER_AGENT (with FF) looks like that:


HTTP_USER_AGENT = Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7 (.NET CLR 3.5.30729)

Next step was to get that output text into a variable. Function OWA_UTIL.GET_CGI_ENV('HTTP_USER_AGENT') provides the information.
I created a variable called :P1_BROWSER_TYPE and an initialization process to save the information in my variable.


IF :P1_BROWSER_TYPE NULL THEN
IF OWA_UTIL.GET_CGI_ENV('HTTP_USER_AGENT') LIKE '%MSIE 7.0%' THEN
 :P1_BROWSER_TYPE := 'IE7';
ELSIF OWA_UTIL.GET_CGI_ENV('HTTP_USER_AGENT') LIKE '%MSIE 6.0%' THEN
 :P1_BROWSER_TYPE := 'IE6';
ELSIF OWA_UTIL.GET_CGI_ENV('HTTP_USER_AGENT') LIKE '%Firefox/3%' THEN
 :P1_BROWSER_TYPE := 'FF3';
ELSIF OWA_UTIL.GET_CGI_ENV('HTTP_USER_AGENT') LIKE '%Firefox/2%' THEN 
 :P1_BROWSER_TYPE := 'FF2';
ELSIF OWA_UTIL.GET_CGI_ENV('HTTP_USER_AGENT') LIKE '%Firefox/1%' THEN
 :P1_BROWSER_TYPE := 'FF1';
ELSE
 :P1_BROWSER_TYPE := 'UNKNOWN';
END IF;
END IF;

Now I created my updateable report with a CASE WHEN CHECK inside the SQL statement:


SELECT CASE :P1_BROWSER_TYPE WHEN 'FF3' THEN '<b><div style="width: 289px">Sum:</div></b>'
                           WHEN 'FF2' THEN '<b><div style="width: 289px">Sum:</div></b>'
                           WHEN 'FF1' THEN '<b><div style="width: 289px">Sum:</div></b>'
                           WHEN 'IE7' THEN '<b><div style="width: 247px">Sum:</div></b>'
                           WHEN 'IE6' THEN '<b><div style="width: 247px">Sum:</div></b>'
                           ELSE '<b><div style="width: 247px">Sum:</div></b>' END as "Sum",
        ...

Example app: http://apex.oracle.com/pls/otn/f?p=28737:7
Documentation link for the OWA_UTIL package: http://download-west.oracle.com/docs/cd/B12037_01/appdev.101/b10802/w_util.htm#997271

Browser issues

Set up column width in an APEX report (for Firefox)

Von Tobias Arnhold → 2.13.2009

Most of you would say: "Why is that so special? Just go to
Report Attributes>Column Attributes>Column Formatting>CSS Style and add for example: width:100px"

Like the help says:
"Use this attribute to apply a style to a column value. For example, setting this attribute to 'color:#FF0000;' will result in the following html being generated:
<span style="color:#FF0000">Sample Data</span>
This will change the text color of the column to red."

You all are right but there is a problem with Firefox which is ignoring this setting.
Why? Take a look here:
http://www.velocityreviews.com/forums/t163666-firefox-ignores-the-style-width-attribute-in-the-span-tag.html

How to fix that now? I use the div tag in my sql statement for the report:


SELECT '<b><div style="width: 150px; text-align: left">Employee no.: ' || "EMP"."EMPNO" ||
       '</div></b>' as "EMPNO",
       '<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 150px; background-color: rgb(225, 225, 225); text-align: center">' ||
       "EMP"."ENAME" || '</div>' as "ENAME",
       '<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 100px; background-color: rgb(225, 225, 225); text-align: center">' ||
       "EMP"."HIREDATE" || '</div>' as "HIREDATE",
       '<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 100px; background-color: rgb(225, 225, 225); text-align: center">' ||
       "EMP"."SAL" || '</div>' as "SAL",
       '<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; width: 100px; background-color: rgb(225, 225, 225); text-align: center">' ||
       "EMP"."COMM" || '</div>' as "COMM"
  FROM "EMP"
-- </div> - div tag is needed to create the css style attributes
-- "width: 150px;" - for column width
-- "text-align: left" - for text alignment
-- "background-color: rgb(225, 225, 225)" - for column background color
-- "border: 1px solid rgb(204, 204, 204)" - for border color
-- "padding: 2px" - for empty place between text and border

Example application in action: http://apex.oracle.com/pls/otn/f?p=25472:30

Forum entry to it: http://forums.oracle.com/forums/thread.jspa?forumID=137&threadID=854151

Honestly I think there is another way to fix this issue which I don't know yet but I would really appreciate to get to know about it. :D

To all: Enjoy the weekend, have fun and DON'T think about the world economic crisis. :)

Browser issues

Focus problem with IE6 and APEX_ITEM.SELECT_LIST_FROM_LOV

Von Tobias Arnhold → 2.12.2009

If you are using the SELECT_LIST_FROM_LOV item in your apex reports you may have noticed that you can get some trouble with the Internet Explorer 6.

For example your report includes 100 rows which are all displayed on one page and you must scroll up and down to reach all items. In case you have the focus on one of your select list items and set it from value x to y and immediately after that you want to scroll down. The cursor stays in the item and scrolls inside instead of outside the page.

This behavior just appears with IE6 all newer browser works after a standard behavior. After you selected an item value and you start scrolling, the page scrolls after your mouse movement.

How to fix this issue with IE6? You need to edit your SQL select statement for your report:


-- select statement with IE6 problems
select
    b_id as "Book number",
    '<b>'||b_name||'</b>' ||
    ' (' || b_description || ') '  as "Book name"
    apex_item.SELECT_LIST_FROM_LOV(
    1,                           -- p_idx
    b_category_id,               -- p_value
    'LOV_BOOK_CATEGORIES',       -- p_lov
    '',                          -- p_attributes
    'YES',                       -- p_show_null
    '',                          -- p_null_value
    'no book category selected', -- p_null_text
    '',                          -- p_item_id
    ''                           -- p_item_label) 
       as "Book category"
from books;

-- fixed select statement with attribute for wrong focus behavior
select
    b_id as "Book number",
    '<b>'||b_name||'</b>' ||
    ' (' || b_description || ') '  as "Book name"
    apex_item.SELECT_LIST_FROM_LOV(
    1,                           -- p_idx
    b_category_id,               -- p_value
    'LOV_BOOK_CATEGORIES',       -- p_lov
    'onChange="body.focus()"',   -- p_attributes
    'YES',                       -- p_show_null
    '',                          -- p_null_value
    'no book category selected', -- p_null_text
    '',                          -- p_item_id
    ''                           -- p_item_label) 
       as "Book category"
from books;

You need to use onChange="body.focus()" in the attribute section.

Of course you can also use this functionality in a normal select list item.
Go Edit Page Item>Element>HTML Form Element Attributes
and add: onChange="body.focus()"