Home > CSS, Delphi, JavaScript, Object Pascal, OP4JS, Smart Mobile Studio > Patching the Smart Mobile Studio RTL

Patching the Smart Mobile Studio RTL

With the Smart Mobile Studio update around the corner (with the tip of the nose visible around the corner actually) there is going to be a lot of new and cool things to play with. But before you get you hands on it, you can actually patch the old RTL quite easily.

In this example I am going to implement a true HTML5 disable/enable functionality. This may sound odd, what do I mean? Enable disable? Dont all controls have a Enabled property?

Well yes, but for a browser Enabled only makes sense for input boxes, combo-boxes and buttons. Setting Enabled:=False on a panel for instance, which is essentially a run-time created DIV element, has absolutely no meaningful purpose what so ever.

Figuring things out

But part of being a programmer is to figure things out, so I have made a really cool solution to this problem. For just stop and think for a moment — what should happen when you set Enabled to false? Let’s say you disable a panel with 100 child components on it – what exactly do you want to happen?

That final touch makes all the difference

That final touch makes all the difference

Truth is there is only one way to deal with this and that is to recursively tell all the child controls that they should not accept any mouse, keyboard or touch interaction. But that would be a horrible solution because – just think of all that stack activity! A control can have quite a few child controls – so the number of elements that have to suddenly take height for the new state can be overwhelming (read: slow as syrup).

So how did I solve this? Easy: cascading styles!

Cascades of awesomeness

Ever wondered why CSS is short for cascading style sheets? Like where exactly does the “cascade” part come into play? An element can actually have more than one style assigned to it. You can make 100 different styles and assign them all to the same elements actually — which would be a fantastic mess, but it would be perfectly legal.

The browser would simply try to merge the styles together, and the colors, images and whatever decoration you have assigned to it would be merged. This final “merged” product is what is known as the calculated style. This is the style which the browser renders to the screen.

Using more than one style

So how do we truly disable an element without performing a recursive callback suicide? We define a style which disables all mouse and touch interaction – and also alter the visible style of a control to appear different. Preferably ghost-like to ensure that the user regards the element as disabled.

Secondly, we patch the RTL to add this style to any control which get’s the Enabled property set to false, and subsequently remove the style again when Enabled is set to true.

So in SmartCL.Components we find the method SetEnabled() as a member of TW3CustomControl. We simply modify that like this:

procedure TW3CustomControl.SetEnabled(aValue: Boolean);
begin
  Handle.disabled := not aValue;
  if aValue then
  Begin
    if w3_hasClass(handle,'disabledState') then
    w3_removeClass(handle,'disabledState');
  end else
  w3_addClass(handle,'disabledState');
end;

And then we add the following CSS to our stylesheet (note: if you dont have a CSS file in your project you are using a default theme. Simply go into project options -> linker and check the “use custom theme” option. This will create a CSS file for you with all the styles from the default stylesheet).

Simply add this to the top of the CSS-file:

.disabledState {
  background-color: #FFFFFF;
  -webkit-pointer-events: none !important;
     -moz-pointer-events: none !important;
      -ms-pointer-events: none !important;
       -o-pointer-events: none !important;
          pointer-events: none !important;
  cursor: no-drop !important;
}

.disabledState *{
	opacity: 0.70 !important;
}

The first style (.disabledState) simply disables pointer interaction (pointer here meaning mouse, touch etc. responses), and also it changes the mouse cursor.

The second style is a bit special, the * character means “all” just like in SQL, so what we say here is that if an element has the disabledState class, all it’s children will attain the properties in that style. In this case we alter the opacity of child controls to 70%.

And with that — you have a fully working Enable / Disable patched RTL!

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: