Carousels (also called sliders) have become very common today and you can see this component on the home pages of most websites displaying rotating images. The Universal Theme in Oracle APEX also comes with a Carousel Container template, which has made the implementation of this component very easy. In Oracle APEX, when you add a region to your page with a couple of sub-regions and set the parent region as a "Carousel Container" template, it turns the regions into a carousel and they start flipping. In this section, I'll demonstrate some typical uses of this interesting component.
Different Views of the Same Data
Here’re the steps:
1. Create a blank page. Provide an appropriate name to the page – for example, Carousel Container.
2. After creating the page, add a Static Content region named Sales Analyses to it. Set the Template of this region to Carousel Container.
3. Add another region under the Sales Analyses region, and set the following properties. This region will display sales data by month. When you set the Parent Region property, a Slides node is added just under the parent region to hold child region(s).
|
Property |
Value |
|
Title |
Sales
Analysis by Month |
|
Type |
Interactive
Report |
|
Location |
Local
Database |
|
SQL Query |
SELECT
p.category type , to_char(o.order_timestamp, 'MON RRRR') month, sum (oi.quantity *
oi.unit_price) sales FROM demo_product_info p, demo_order_items oi,
demo_orders o WHERE
oi.product_id = p.product_id and o.order_id = oi.order_id GROUP
BY p.category, to_char(o.order_timestamp, 'MON RRRR'), to_char(o.order_timestamp,
'YYYYMM') ORDER
BY to_char(o.order_timestamp,
'YYYYMM') |
|
Parent Region |
Sales
Analyses |
|
Template |
Standard |
4.
Create another region. This region will present sales analysis by
customers. Set the following attributes for this region.
|
Property |
Value |
|
Title |
Sales
Analysis by Customers |
|
Type |
Interactive
Report |
|
Location |
Local Database |
|
SQL Query |
SELECT
c.customer_id, c.cust_last_name||', '|| c.cust_first_name
Customer_Name, sum
(decode(p.category,'Accessories',oi.quantity * oi.unit_price,0)) "Accessories",
sum (decode(p.category,'Mens',oi.quantity
* oi.unit_price,0)) "Men", sum
(decode(p.category,'Womens',oi.quantity * oi.unit_price,0)) "Women" FROM
demo_customers c, demo_orders o, demo_order_items oi, demo_product_info p WHERE
c.customer_id = o.customer_id and o.order_id = oi.order_id and oi.product_id = p.product_id
group by c.customer_id, c.cust_last_name, c.cust_first_name order by
c.cust_last_name |
|
Parent Region |
Sales
Analyses |
|
Template |
Standard |
5.
Add the final region to show sales figures by-product:
|
Property |
Value |
|
Title |
Sales
Analysis by Products |
|
Type |
Interactive
Report |
|
Location |
Local
Database |
|
SQL Query |
SELECT
p.product_name||' [$'||p.list_price||']' product, SUM(oi.quantity *
oi.unit_price) sales FROM
demo_order_items oi, demo_product_info p WHERE
oi.product_id = p.product_id GROUP
BY p.product_id, p.product_name, p.list_price ORDER
BY p.product_name desc |
|
Parent Region |
Sales
Analyses |
|
Template |
Standard |
Save your work and run
the page. The first slide will appear showing sales figures by month. Use the Next
and Previous icons or the tiny circles provided at the bottom to switch the views.
Responsive Slideshow
Execute the following steps to explore another use of the Carousel Container template. In this exercise, you will create a responsive slideshow you usually see on many websites. The slideshow comprises three images available in the BookCode\CarouselContainerTemplate folder.
1. Load the three images using Shared Component | Static Application Files. After uploading the files, you will see the following references.
#APP_IMAGES#Slide1.jpg
#APP_IMAGES#Slide2.jpg
#APP_IMAGES#Slide3.jpg
2. Create a blank page and add four Static Content regions to this page - I've called mine Slide Show, Slide 1, Slide2, and Slide 3. Set the Template attribute of the parent Slide Show region to Carousel Container. Also, set the Slide Show region to be the Parent Region for the other three regions.
3. Set the Template property of the three child regions to Blank with Attributes. Ensure that the Output As attribute is set to HTML for the three child regions.
4. Type <img src="#APP_IMAGES#Slide1.jpg"/> image tag in the Text property (under Source) for the Slide1 region. Repeat this step for the other two regions – changing the image references accordingly.
5. Click the Slide Show carousel container region, and click on Template Options. Set the Timer to 5 Seconds, the Animation to Slide, and Header to Hidden. The first two settings automatically flip the images after every 5 seconds, while the third one is set to hide the region header.
6. Click the root node of your page, scroll down to the CSS section, and enter the following code in the Inline box. Since the CSS code will be used on the current page only, we are putting it in the Inline box. If the same CSS is required on multiple pages, consider putting the code into an external file to avoid duplication. When you set the max-width property to 100%, the image will scale down if it has to, but never scale up to be larger than its original size.
img {
width: 100%;
max-width: 100%;
height: auto;
}
7. Apply the above CSS code to your image regions. First, click the Slide1 region, and enter img for the CSS Classes property. Repeat this step for the other two regions.
Run and test your page.
The images should now be responsive and scale up and down when you resize your
browser window.
For Visual Instruction Watch This Video
