Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Themes and Theme Testing

I've created an application here that lists out all the themes contained in APEX along with a thumbnail. Each image links to a copy of our theme testing application running that particular theme, the theme testing application is just the regular sample application with extra pages to cover different template and item types.

When we build out themes for APEX we build very generically and the theme testing application is what we use to test against. Feel free to download the theme testing application and use to test your own themes or theme variations against.

Vikas used to host applications showcasing the themes but I figured we (APEX team) should take the time update them with every version change and Theme Testing Application change. Like I've stated before I have almost no moral issues with 'borrowing' a good idea , but I did contact Vikas and ask first ;).

If you think we are missing a use case in that application please drop a line in the comments, or better yet comp one out on apex.oracle.com and put a link in the comments. Remember we build very generically so the themes can handle as many data and usage variations as possible.

This is a small feature but fixes something that has always bugged me.

In Application Express there is the Start Stop Table item. Which is very useful for form layout especially when building forms with large textarea's.

The problem was there was no way easy way access the Start Stop Table itself with javascript or CSS since it didn't have any discerning attributes. Well that has all changed in APEX 3.1 as the Start Stop Table gets some of the same attributes as a regular item does.

Start Stop Table's will get the id attribute set to the Item Name just like regular items , Start Stop Tables will also insert attributes from HTML Form Element Attributes property , agian just like a regular APEX item.

You can see a very simple usage example here http://apex.oracle.com/pls/otn/f?p=11933:137.

I can definitely see this being used for some more dynamic and just plain prettier forms and layouts, there are a few spots in the APEX builder slated to get some treatment from this.

As with my last few posts , and my next couple, this isn't the most WizBang feature but the impact if properly used can be huge.

Extra polish

Well if there is one thing I know in a web application many times it's the details that count.

So here are two quick links to help out with some of the smaller graphic details that sometimes make a difference, especially when your like me and are graphically challenged.

1. Create your AJAX loading graphic http://www.ajaxload.info/

A nice loading graphic for your AJAX requests customized for you applications look and feel is always nice.


2. Create Striped Backgrounds
http://www.stripegenerator.com/

Striped backgrounds (for page or region headers usually) are nice because they are fairly small graphics which equals fast downloads. While you can end up with some pretty garish designs used properly you can get a nice look for minimal page weight.

So I had a couple comments on my Accordion Implementation I whipped up the other day.

http://carlback.blogspot.com/2007/06/is-for-apex-and-accordion.html

Plus someone wanted to be able to initialize with a certain pane open and also to create the Accordion based off of regions not a report. So I took all that to heart and rewrote my implementation a bit plus some extras I wanted and you get.

Report Based Accordion
http://apex.oracle.com/pls/otn/f?p=11933:130

and Region Based Accordion
http://apex.oracle.com/pls/otn/f?p=11933:131

The onmouseover interaction now has a 1/2 second delay.

The object initialization is now a bit more robust with more options. Most of them have pretty normal defaults. The one I recommend setting everytime is OpenMaxHeight as it gives a more consistent user experience.


function pg_Init(){
pAccordian = new Accordion('accordion');
/* optional */
pAccordian.OpenType = 'onmouseover'; //onclick or onmouseover default = onclick
pAccordian.OpenMaxHeight = 150; // optional but recommended max height of opened pane
pAccordian.OpenPane = 1; // open Accordian pane on init 1 based array
pAccordian.class_Item = 'item'; // set the class to collect item item nodes
pAccordian.class_Title = 'title'; // set the class that collects title nodes
pAccordian.class_Title_Current = 'title_current'; // set the class to set current title
pAccordian.class_Content = 'content': // set the class that collects content nodes
/*init object*/
pAccordian._Init(pAccordian);

}


I'll probably be playing with this some more but I wouldn't be surprised if you saw a slightly altered version end up in product, declarative of course ;) , it seems like a good fit.

Now all I have to do is figure out how to type as fast as this guy plays a real Accordion and I could get some real work done.

Fun With Report Templates

Customized report templates are one of the often overlooked tools in Application Express. While most people are happy with just the standard report templates with minor changes. But in some cases a standard report won't do the trick as in this post here were the poster wanted to show information on 50 different columns , one record at a time.

One solution I've used before is to provide a customized named row template, as in this example here http://apex.oracle.com/pls/otn/f?p=11933:108

While this solution shows a simple layout very complex layouts can be created with fully customizable HTML / CSS / IMAGES and using the conditional row display logic differences based on data returned can provide even another level of customization.