Samstag, 7. Januar 2012

How to import my examples...

I just created a new workspace to see how my examples will work on your side.
You definatly have to upload the stylesheets as shared components to make it work.

you will have to (re)subscribe the templates if you decide to use the ThemesAdminb or another application to
manage your themes.

Freitag, 6. Januar 2012

Taming the button. Layout, a 2nd theme...

Fine, it works with one theme now. To really proof the flexibility I will add a secon theme to my application and use it with the disabled button here as well.

So first I switch the theme of my DisableButtonExample application to Scarlet - 21 (You will have to install it if it is not already there). Then I run my application and got the following (unexpected) result.

Ok, a quick look into firebug shows that I (accidently) have as well subscribed the button of theme 21 to the button of theme 23 in my ThemesAdmin application. After fixing this, or if you have a clean installation of theme 21, it will look like this.

The button looks like usual and is not disabled on startup, because the template Button Disabled is missing.

So lets start the work. Of course I will do all the themes related stuff within my ThemesAdmin application. First I create a Cascading Style Sheet file with the obvious name Scarlet_21.css
An investigation of the button with firebug shows that the style is based on the image sButtons.png. First I try to copy the code from the original css style.

background: url("../images/sButtons.png") no-repeat scroll right -50px

but that does not work. Looks like I'm in the wrong path.

Help: "Send me a mail, comment or whatever, if you know a way to reference the original button image in a custom css file!

So for now I copy the original Image from theme 21, rename it to Scarlet_21_sButtons.png and upload it as shared Workspace (not associated to any application) component. I can reference it in my CSS file now.

I got hit by reality. First I made some really good progress, but than I encountered some graphical issues (my button looks ugly, some parts missing hovering does not really work). It took me several hours to find the root cause for my problems. First I had a really hard time. Then I learned how to toggle the hover and active state of my button and to toggle style elements with firebug. Finally  encountered that I don't have to set the background image in my stylesheet. So forget about copying and uploading that image. But me request for help is still valid :)

I could have removed the text from this post, but the point is that this blog is more or less a log of my progress and it often takes more time for me (as a newbie to many of this technologies) to find my way than it takes to read this posts (to justify the blog title).

So the final stylesheet looks like this

button.button-default.apex_disabled,button.button-default.apex_disabled:hover
{
cursor:default;
opacity:0.4;
background-position:right -50px;
padding: 0 11px 0 0;
}

button.button-default.apex_disabled:active,button.button-default.apex_disabled:focus
{
outline:0 none #000;
}

button.button-default.apex_disabled span,button.button-default.apex_disabled:hover span
{
background-position:0 0;
}

The only thing left is to reference the stylesheet in the page templates I use and to create the Button Disabled template simular to the last post. Did I mention that I use a separate application named ThemesAdmin to develop my themes and subscribe the templates in my actual application to the changed templates in the ThemesAdmin application? I only tweak the, and subscribe to the tweaked templates I plan to use to avoid unnecessary effort.

The final result looks like this:

Sources:

Ps.: I got some feedback from a workmate. He mentioned that it would be better to hide the functionality that is covered by the condition on the dynamic action for now. He don't like that the developer still has to change some code manually to make it work. I already have some ideas, but let see how it works.

To be continued....

Donnerstag, 5. Januar 2012

Taming the button. Layout, the better way.

Ok it works, so I will focus on a little bit more professional way to solve the layout problem now. The actual solution only works for one page and if I change the theme there will be some drawbacks.
Either there will not be a definition for .apex_disabled class because the button has a different class then uButton or even worse, the style will not fit to the new theme at all.
I will stick with the conditional dynamic actions because it seems to be straight forward to me.

I was googling to find some integration on CSS in relation to APEX the other day when I popped into this webpage. So I decided to use this approach to have a better grep on my styles, templates and themes.
I first I create a new empty Application with the Crimson - 23 Theme and the name ThemesAdmin.

Now I create a textfile with the name Crimson_23.css and copy the style from the header section it.

a.uButton.apex_disabled span, a.uButton.apex_disabled span:hover, a.uButton.apex_disabled span:active{
  cursor: default;
  color: #464545;
  font-weight: 200;
  background-color:#F5F5F0;
  background-image:-moz-linear-gradient(top, #F5F5F0,#F5F5F0);
  box-shadow:0 0 0 rgba(0, 0, 0, 0.25) inset;   
}
I upload the css file as shared component into my ThemesAdmin application. Now I change the Page themes of the Crimson - 23 theme and add the line

<link rel="stylesheet" href="#WORKSPACE_IMAGES#Crimson_23.css" type="text/css"/>


to all of them (Ok for now I only change the No Tabs - No Sidebar template because I'm a little lazy and this is my default page template). Now I don't have to add the entry to the header section of each page anymore.
I also create a copy of the button template with the name Button Disabled that already contains the CSS class apex_disabled. Now I should be able to create already disabled buttons from scratch.

Next I subscribe the page template and the button template in the DisableButtonExample application to the corresponding templates of the ThemesAdmin application (Edit Template => Subscription => Reference Master Template Form). This allows me to maintain themes in a single place and publish the changes at once to all applications.

Last but not least I remove the style code from Pages HTML Header section and change the template of the P1_TOGGLED button to the Button Disabled template.

Starting the application will show the following (expected) result:


ThemesAdmin_1.sql, DisableButtonExample.sql, Crimson_23.css

I have no idea on how to export the shared stylesheets as well, so you will have to import the file Crimson_23.css manually for now.

To be continued...

Taming the button. Layout, the dirty hack

Last time I started my disable template based buttons journey. I finished with a conditional button toggled based on the presence of a CSS Class. Even if the button is disabled it still does not look like that. So today I will start to change the style of the button.

I will do this quick and dirty by now, just to proof that the basic concept works.

First I have to find out what makes the layout change when the button is hovered, activated or focused. I use firebug to investigate element and find out that the definition can be found in the file 4_1.css located in the themes css directory.
I don't want to change original the css file, so I have to create a style that oversteers the changed values with the original ones. So for now I place the style in the HTML Header sction of my page. My style looks like this:

<style type="text/css">

  a.uButton.apex_disabled span, a.uButton.apex_disabled span:hover, a.uButton.apex_disabled span:active{
    cursor: default;
    color: #464545;
    font-weight: 400;
    background-color:#F5F5F0;
    background-image:-moz-linear-gradient(top, #F5F5F0,#F5F5F0);
    box-shadow:0 0 0 rgba(0, 0, 0, 0.25) inset;    
  }
  
</style>

My Application looks like this if the button P1_TOGGLED is disabled.


Being not a pixel pusher that should be fair enough.

Source

To be continued...

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...