6.9.4 Editing User Interface Attributes
Use the User Interface page to determines the default characteristics of the application and optimize the display.
Parent topic: Managing Application Attributes
6.9.4.1 Accessing the User Interface Page
To access the User Interface page:
Parent topic: Editing User Interface Attributes
6.9.4.2 User Interface Page
The User Interface page is divided into the following sections: General, Logo, Favicon, Attributes, Navigation Menu, Navigation Bar, JavaScript, Cascading Style Sheet, and Concatenated Files.
Tip:
To learn more about the attributes on this page, see field-level Help.
- General
- Logo
- Favicon
- Attributes
- Navigation Menu
- Navigation Bar
- JavaScript
- Cascading Style Sheets
- Concatenated Files
Parent topic: Editing User Interface Attributes
6.9.4.2.1 General
Use the attributes under General to define basic characteristics of the application user interface.
Table 6-14 User Interface, General Properties
Attribute | Description |
---|---|
Static File Prefix |
Determines the virtual path the Web server uses to point to the static files when using the Do not specify anything to reference files which are stored with your application definition in the database. For performance reasons you can also store your application files on your Web Server. Use any valid URL to reference them. Examples:
|
Image Prefix |
Determines the virtual path the web server uses to point to the images directory distributed with App Builder. During installation, the virtual path is configured as When embedding an image in static text (for example, in page or region headers or footers), you can reference an image using the substitution string <img src="#IMAGE_PREFIX#go.gif">
Note: If the entered image prefix is equal to the instance image prefix, then the application-level attribute will always be null. This easily facilities the movement of an application across different instances that may have different image prefixes. See Also: "IMAGE_PREFIX" |
Media Type |
Enter the Internet media type. An Internet media type is two-part identifier for file formats on the internet. A Media Type is composed of at least two parts: a type, a subtype, and one or more optional parameters. This Media Type is used in the Content-Type HTTP header when rendering the page. The page-level Media Type overrides the application-level Media Type. The default value for this attribute is |
Parent topic: User Interface Page
6.9.4.2.2 Logo
Use Logo attributes to define an application logo. An application logo can be an image, text, image and text, or based on custom markup.
Table 6-15 User Interface, Logo
See Also:
Parent topic: User Interface Page
6.9.4.2.3 Favicon
In Favicon HTML, enter Favicon HTML code to create a favicon
(or shortcut icon). To use this feature, your page template must include the
#FAVICONS#
substitution string. Example:
<link rel="shortcut icon" href="/i51/favicon.ico">
<link rel="icon" sizes="16x16" href="/i51/favicon-16x16.png">
<link rel="icon" sizes="32x32" href="/i51/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/i51/favicon-180x180.png">
Parent topic: User Interface Page
6.9.4.2.4 Attributes
Table 6-16 Attributes
Attribute | Description | To Learn More |
---|---|---|
Enable End Users to choose Theme Style |
If set to On, end users can choose a Theme Style for their sessions within a customization dialog. Only Theme Styles marked as Public are eligible for selection. |
|
Add "Built with APEX" to Footer |
If set to On, Oracle Application Express will add the text "Built with ♥ using Oracle APEX" to the footer of every page. |
n/a |
Auto Detect |
Select whether the user interface should be automatically detected. If auto-detection is enabled, the user will be redirected to the corresponding login page or home page. |
n/a |
Home URL |
Specify the home page of the application. |
n/a |
Login URL |
Specify the login page of the application. |
n/a |
Theme |
Shows the theme currently associated with the user interface. |
See "Switching Themes" |
Theme Style |
Select a theme style. This option only displays for newer themes that support theme styles. |
|
Global Page |
If defined, displays the global page for the application. |
See "Creating a Global Page to Display Components on Every Page" |
Parent topic: User Interface Page
6.9.4.2.5 Navigation Menu
Applications using newer themes, such as Universal Theme - 42, provide navigation with navigation menus.
Table 6-17 Navigation Menu
See Also:
"Managing Navigation Menus"Parent topic: User Interface Page
6.9.4.2.6 Navigation Bar
Applications using newer themes, such as Universal Theme - 42, include navigation bar lists. Navigation Bar settings enable you to select list and list templates. Selecting classic implementation uses tabs instead of a list. Navigation Bar attributes only display with newer themes.
Table 6-18 Navigation Bar
See Also:
"Managing Navigation Bar Lists"Parent topic: User Interface Page
6.9.4.2.7 JavaScript
Use these attributes to control or modify how an application handles JavaScript.
Table 6-19 JavaScript
Parent topic: User Interface Page
6.9.4.2.8 Cascading Style Sheets
In File URLs, enter Cascading Style Sheet file URLs to be loaded on every page. Each URL has to be written into a new line. If you provide a minified version of your file you can use the substitution string #MIN#
to include .min
or #MIN_DIRECTORY#
to include minified/
in your file URL for a regular page view and an empty string if the page is viewed in debug mode. You also have access to the substitution string #APP_VERSION#
if you want to include the application's version in the file URL.
File URLs you enter here will replace the #APPLICATION_CSS# substitution string in the page template.
Note: You do not need to include opening or closing link
tags. Just include the file URL.
Examples:
-
Standard file reference.
/mycss/main.css
-
Standard file reference which loads the minified file
main.min.css
from/mycss/minified/
for regular page views andmain.css
from/mycss/
in debug mode./mycss/#MIN_DIRECTORY#main#MIN#.css
-
Conditional media query.
[media="only screen and (max-device-width: 480px)"]/mycss/smartphone.css
-
File reference using a query string in the URL referencing the application version, such that when the application is upgraded (and the version is incremented), the browser is instructed to always load the new file and ignore any previously cached files.
/mycss/main.css?version=#APP_VERSION#
Parent topic: User Interface Page
6.9.4.2.9 Concatenated Files
Using a concatenated file can increase the performance of loading your page because instead of issuing multiple HTTP requests for each single file, the browser only loads one file. This approach gives you the option to use smaller, more modular files during development and to use a single concatenated file when running the application outside of the Application Express development environment.
To create a concatenated file, click Concatenated File and follow the on-screen instructions. To learn more and view examples, see field-level Help.
Parent topic: User Interface Page
6.9.4.3 Defining an Application Logo
To define an application logo:
Tip:
You can also reference an image uploaded to the static file repository using a substitution string. See "Referencing Static Application Files" and "About Referencing Static Workspace Files."
See Also:
Parent topic: Editing User Interface Attributes