Freitag, 20. Januar 2012

Maintenance Dashboard. Crimson 23 Style

I hate to push pixels!!

After some more testing I finally got the solution. And guess what. I had to change some templates again. So I added some more lines in my Crimson_23.css file.

myButton was changed to display:inline; and to have a margin-right: 4px;

and I added a section

 vertical-align: middle;

to vertically allign the button in the surrounding span. And the result looks quite Ok :)

Source => MaintenanceDashboard, Crimson_23Css

Next step is to disable the Apply Changes button.

To be continued...

Maintenance Dashboard. Implement the new button template...

Now I want to get rid of the hidden Delete Button and use the Disabled Button instead.

I know there are complains about security an disabled buttons, but in this case I only use it for more usability. I think that it is a kind of strange to have a GUI containing checkboxes without having a button or something else to trigger some action. On the other side it is kind of strange to have an enabled button without something to process. So here we go...

Having my ThemeAdmin application in place it should be easy to implement the new buttons.

First I duplicate the Button template. I name the new template Button Disabled as in my last example.
Then I subscribe the two templates to the Reference Master Template with the same name and Theme (Crimson 23) from my ThemeAdmin application.

I use the page template One Level Tabs - No Sidebar within my application, so I have to subscribe to this template in the ThemeAdmin application as well. Unfortunatly I was lazy and have not applied the necessary changes to this template by now. So I update the template in the ThemeAdmin application. I only have to add this two lines of code to the header section:

<link rel="stylesheet" href="#WORKSPACE_IMAGES#Crimson_23.css" type="text/css">
<script src="#IMAGE_PREFIX#themes/theme_23/js/4_1.js"></script>

and publish the template.

And now a first test and...! Sh..., hit by reality again. Looks like the buttons are not in the wanted position :( another Crimson - 23 issue again.

I will sort that out later.

For now I switch back to theme Scarlet - 21 and everything looks fine (After updating the page template).

By now I only change the behaviour of the Delete button on page 3. To do so I only have to change the template to Button Disabled, remove the jQuery code that hides the button from the page load section and change the code of the Checkbox Checked dynamic action.

Source => ThemeAdmin, maintenanceDashboard, Scarlet21Theme, CustomJs

To be continued....

Donnerstag, 19. Januar 2012

A button is not always a button

I'm back to reality. Switching back to theme Crimson - 23 stopped my example from working.
In fact, I started with this theme and that was the main reason to search for soemthing else then the attribute disabled="disabled".

Looking into the html sources shows that a button is defined as an anchor and not as a button in the templates of this theme.

<a href="#LINK#" class="uButton apex_disabled" id="#BUTTON_ID#" #BUTTON_ATTRIBUTES# role="button" disabled="disabled"><span>#LABEL#</span></a>

And the attribute disabled does not work by definition with an anchor!

So I started again to find a solution.

  • First I tried again to bind/unbind dynamic action events with JavaScript. 
  • Then I was close to give up and tell you to forget about theme Crimson - 23.
  • In the end I decided to change the template and make a button out of it.
So lets see how that works.
First I only changed the Button Disabled template to

<button href="#LINK#" class="myButton apex_disabled" id="#BUTTON_ID#" #BUTTON_ATTRIBUTES# role="button" disabled="disabled"><span>#LABEL#</span></button>

and gave it a shot.

The result does not really look nice, but what makes me worry is that the page is refreshed after the dynamic action has finished. So I start to work on the template.

No, wait a minute.

Maybee it is better to copy the template from theme Scarlet - 21 (I simply subscribe to it, refresh and unsubscribe again) and only adust the css class to myButton. It still looks ugly, but no refreshes anymore. So it looks like we are only some CSS styles away from the wanted result.

Remark: "Sounds funny, but editing the shared style within Apex does not work. I have to delete and upload it again to see the effect. The size is far below 32K. So that could not be the reason"

So first I copy all uButton related styles to my Crimson_23.css file and change the type from anchor to button.

Being hit by reality (again). I thought it will be a "piece of cake" to get a button look like the anchor used by apex. So in the end it was not. I had to learn some more CSS and how to work with firebug (thanks for that) to get through. In the end it took several days to come that far (ok, I only have little spare time to work on this). I was even close to give up, when I came across this  link:

BonBon Buttons

showing that there must be a way to achieve my goal.

So now my buttons look like this:

And that is pretty close to the apex uButton. I only have finalized the Button and Button Disabled template. That should give you at least a starting point. If you plan to use the hotbutton feature or any other button template you will have to change the CSS styles yourself.

Sources: ThemeAdmin_4.sql, DisableButtonExample_6.sql, Crimson_23.css, Custom.js

Next I will integrate this button into my DBMS_PROFILER application.