Mittwoch, 4. Januar 2012

Taming the button, conditional execution

Even after some weeks of googling I have still not found a way to disable/enable a template based button in a smooth way. So finally I had to come up with some basic idea myself.

First I devided the task to disable/unable a button into two parts:

  1. let the button look like disabled (No reaction when focused, activated or hovered above).
  2. stop the button from doing something when disabled
I could have tweaked the attributes of the button during runtime, but I found out that CSS classes are a much better way to achieve what I want. In fact the javascript call

$x_disableItem('P1_TOGGLED',true);


adds the class apex_disabled to the button. Unfortunatly

$x('#P1_TOGGLE').disabled=true;

does not have the same effect. Unfortunatly the class .apex_disabled is only referenced in the stylesheet apex_4_1.css so far, but I will keep the name.

Being not a pixel pusher, I will start with the second part of the show.

The Sandbox

First I create a really, really simple Apex application to evaluate my idea. This application will only contain a region with 2 buttons to keep the focus. I use Crimson - 23 as starting Theme for the application, because I like the modern HTML5/CSS look and I don't have to deal with Images for now.
Button P1_TOGGLE is used to disable/enable the button button P1_TOGGLED.


I use firebug to examine the sourcecode


and attributes


of our toggled button. I will come back to the attributes later. For now it is important to know that the button has the id P1_TOGGLED and the class uButton.

I define a dynamic action on the click event of the P1_TOGGLE button with the following jQuery code

$('#P1_TOGGLED').toggleClass('apex_disabled');

that will toggle the css-class. I could have used the pure Javascript code, but I prefer the jQuery approach. Firebug shows that the class section of the P1_TOGGLED button is toggled from

class="uButton apex_disabled" to class="uButton"

and back if I click the P1_TOGGLE button. Nothing else has changed so far.

To stop the P1_TOGGLED button from executing any code I create a conditional dynamic action with the JavaScript expression

!$('#P1_TOGGLED').hasClass('apex_disabled')

that returns true if button P1_TOGGLED has no class apex_disabled. The code defined in the true action will only be executed if the button is enabled (not disabled). To make this behaviour visible I have added a JavaScript true action showing an alert with the text: "P1_TOGGLED is not disabled".
As shown, this will even work if the theme does not contain any style with the name apex_disabled at all.

Achievement => CSS Class apex_disabled toggled eventbased, execution based on presence of CSS Class apex_disabled.

Source

To be continued...

Keine Kommentare:

Kommentar veröffentlichen