Apex 4.0: SQL in Plugins and seeing Stars.....

This is my first post in a few weeks as I've been a little busy with work recently, which is just criminal as I really just want to play with Apex 4 EA2.  Oh well, bills have to be paid and children fed I suppose.

Anyway, let's cut to the chase.  There is a nice feature of Apex 4 plugins (which I'm pretty sure wasn't working correctly in EA1) where you can create a custom attribute of type 'SQL Query'.  I've added this to the Range Slider plugin I use on my Online Store demo for the min and max default range values, as you can see below:

Anyone using the plugin can write SQL statements for these attributes, and the good part is that they will be parsed when the changes are saved.  You can see in the screenshot below that I have set the Default Range Min Value to the mimimum selling price and the Default Range Max Value to maximum selling price.  I should, of course, set the Minimum Value and Maximum Value to also be 'SQL Query' attribute types and set them to be slightly smaller and large that the min/max selling prices, but I haven't got around to that yet.  Sorry.  The plugin can be found here.

And what does he mean by '....seeing Stars' in the Blog post title, I hear you ask?  Well let me explain.

You may have noticed that I have used a Star Rating on my application, which is taken from Patrick Wolf's excellent sample Plugin application which can be found via this blog post.  I have taken that Star Rating plugin and used some jQuery magic to dynamically update the list of products in a similar manner to the Range Slider and Categories in the Refine Search region.   Click on a star and it will displ;ay products that have at least that rating as a minimum.  So clicking on star 3 will display all products with ratings of 3, 4 or 5 stars.  You can also click on the reset button to the left to set it so that all products are displayed including those without a rating.  If you want to know how to do this in more detail, then please let me know and I try and find the time to explain.

At some point I promise I really, really, really am going to smarten the demo up.   Bye for now.

Apex EA2 update

To see the new style Plugins use this link to the Plugins Application provided by Patrick Wolf:

Plugins Application

I've managed to copy the syntax used in some of these plugins to update those on my Online Store demo.

I've still need to upload some images and it looks like there are a few issue with my schema, but generally the app appears to be working.  So, in general it looks like EA1 apps can be imported into EA2 with little need to change anything.

Apex EA2 is now available

The good news is that it appears that applications exported from Early Adopter Phase 1 import ok in the new EA2.

The bad news is that plugins have had a bit of an overhaul. It looks like the PL/SQL code used to construct a plugin now uses functions rather than procedures. So back to the drawing board for some of my online store demo plugins!

Can anyone from the team shed some light on what I do with 'apex_plugin.t_page_item_render_result' or 'apex_plugin.t_page_item_validation_result', please?

Static Region Id's and Ajax Fun

More Online Store demo shenanigans for you. A bit dry this one I'm afraid.

A couple of days back I decided to export/import my Online Store demo, and whilst viewing the new imported version of the application found it to be completely kaput.  It didn't take long to realise that I had made the mistake of hard coding region id's in some of the Javascript.  Well, I thought this will be easy to fix as I can just utilise Static id's instead in my regions and in place of #REGION_ID# in templates.  So far, so good, but then I realised that the Ajax refreshing of the Products and Shopping Basket regions is done using calls to html_PPR_Report_Page and $a_report, and both these require the internal numeric region id as a parameter.  As far as I know neither recognises the Static id (please correct me if I am wrong).  Doh!

I get around this by creating hidden items (i.e. P1_PRODUCT_REGION_ID) based on a SQL query that uses the Static id to get the 'real' internal numeric ID. The following SQL does the job:

SELECT region_id
FROM   apex_application_page_regions
WHERE  static_id      = 'PRODUCTS_REP_REG'
AND    page_id        = v('APP_PAGE_ID')
AND    application_id = v('APP_ID');

All well and good I thought, but then I found another issue.  In the main Products region if the search is refined so that no rows are returned then instead of displaying the 'When No Data Found Message' wording from Report Attributes section it displayed the whole page embedded within the region.  Double Doh!

Again, it appears I had hard coded the internal region id into the 'When No Data Found Message' section, something like:

 
- No Products Found -

This had worked nicely in the orginal app from which the export came, as in lieu of a 'No Data Found' template, I simply copied the div and table tags that would appear if rows were returned in the Products region. But now it was useless. Therefore, I employed the following instead to fix the problem:

- No Products Found -
 

This simply embeds the value of the P1_PRODUCT_REGION_ID (the internal id of the product region) into the HTML. Voila. It works a treat, and no hard coding of id's in sight.

So, not a lot of visible progress on the store this week. Although, I have managed to make the site look similar and work the same way in IE, FF and Chrome.

Hopefully next week I can start to look at improving the look of the store. I also want to change the templates to be Div based as per the new Apex 4.0 theme.

jQuery Zooming

Many online stores offer potential buyers the choice to view large version of images of products, but increasingly there is a tendancy to allow 'zooming' in on products to see more detail.  Amazon allows this with many of its products, for instance.

There is a plugin for jQuery which does something similar (ish) which I've add to my store demo.  Click on the product name for one of the products, I suggest the iPad or iPod Nano, to view this in action.  In the overlay window, hover over the image and you will see how this works.  Well this nifty little plugin is called jqZoom, but I also found a non-open source alternative that doesn't use jQuery called Magiczoom, which is used on a number of commercial sites.

You will notice that a few of the images are missing from the demo.  With jqZoom, you need to store small and large versions of each product image, although the large image only gets loaded when you hover over the small image.  Each image is stored as a Blob linked to the product.  As I was loading up the images using the application I kept getting a 'ORA-01691: unable to extend lob segment.....' error, so I need to look into this.

Well Fancy that!

I came across a jQuery plugin called FancyBox for creating nice "floating" overlay windows, which I have incorporated into my online store demo.  Just click on the product name and it will display the details in a modal window. 

It doesn't currently work in IE 6, although I'm not sure about later versions, so you're best viewing it in FF.

Range Slider Plugin

I've spent a little time updating my online shop demo recently. I've still a long way to go but initially I am trying to get as much core functionality built into the search page, such as trying not to submit the page at all and do as much with Ajax as I can.  From hereonin I think I shall refer to this as 'Ajaxifying' my application.  Ok maybe not.

You can go to the demo here....Online Store Demo

Something to note.  You can drag and drop the product images into the shopping basket and the basket inventory will update, but this doesn't work with pagination.  If you use the range slider this will reset pagination and it will work again.  Also note, that this page only works properly with Firefox, which I think maybe down to Apex 4 EA not yet being supported in IE (it doesn't work with Chrome either).

You will notice that I have created a new plugin which I have based on Patrick Wolf's slider plugin, but this uses 2 markers on the slider to represent a range of high and low.   You can also specify default high and low values for the slider.  You can get the range slider plugin here. (let me know if this link doesn't work).  As plugins only return a single value, then the value returned will be made up of 2 values separated by a comma (ie '100,4500').  You will of course need to extract each value from the item you base on the plugin if you want to refer to them in a report Where clause.

I will post some more in the next day or so as I make other improvements.

(Thanks to Anthony for help with the live binding of the drag and drop/slider dynamic actions)

UPDATE:  One thing I forgot to mention is that I added a plugin parameter for the range slider that allows you to specify a jQuery theme from a select list.  This is not the most efficient way of applying themes to all jQuery based plugins on a page/application, but it gives you a flavour of what can be done.