Archive

Archive for April 8, 2015

Patching the Smart Mobile Studio RTL

April 8, 2015 Leave a comment

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!

Smart Mobile Studio For Business

April 8, 2015 1 comment

This is a topic which surfaces from time to time. I completely understand that people whole are new to Smart Mobile Studio, people who havent had time to get into the whole HTML5 “shift” in technology that has occurred for the past 6 years have to ask. And I am very happy to answer such questions, it’s why we made the product to begin with – to help Delphi and Lazarus developers preserve their hard-earned knowledge and use their skillset on a new and exciting platform: namely HTML5 and the cloud.

So is Smart Mobile Studio up for the challenge of business apps? Let’s have a look.

The application

Wilma, screenshot from application

Wilma, screenshot from application

While we have several customers who use and work exclusively with Smart Mobile Studio as their primary development platform, the first and most obvious example for me has to be StarSoft. StarSoft OY is a company from Finland, one of Norway’s neighbours (The Smart Company is Norwegian). One of its developers is Jarto Tarpio which I have had the good fortune of talking with on several occasions. I must admit that Jarto is not an average programmer, his insight into both Delphi and Smart Mobile Studio and the speed at which he adopted the technology demonstrates that he has a solid grasp of both native and virtual environments. So as far as case studies goes, Jarto cannot be called a complete beginner.

StarSoft has produced their latest application, simply called Wilma, written from scratch in Smart Mobile Studio. It’s an application which targets the Finnish school system, and can be downloaded from Google Store and Apple Appstore. The application has around 100.000 downloads and is a good example of what can be achieved using Smart Mobile Studio alone.

You can view the application here (Google AppStore)

Wilma

In Jarto’s own words “When it comes to feedback, we’ve got a lot of good feedback, but there are also a lot of 1-ratings from kids who hate going to school” which is to be anticipated I guess for an app that empowers teachers and parents with access to the public school system, with real-time messaging if someone has skipped class among the features 🙂

Jarto was nice enough to write a few words in response to a Facebook debate, here is a verbatim copy of his reply about Smart Mobile Studio:

“let me tell my reasons for going with SMS instead of Delphi when it came to mobile apps: I didn’t like Delphi’s slow compiler in mobile development. I also fought a long time to get Delphi to recognize my Android device to be able to debug on it – and failed. I didn’t like the way everything needed to be set up for iOS development. SMS was a lot simpler and faster. I also noticed, that app speeds were about the same, so there was no clear advantage of using Delphi compared to SMS. I also did a test of filling a TListBox with a 1k lines on Delphi and noticed that it took a lot of time on Android, so I figured that I needed to write my own listboxes no matter which tool I used. And the last reason is my goal of using the same codebase for iOS, Android and Windows Phone. We already do use 100% same source code with SMS on iOS and Android, but haven’t started to use it on Windows Phone yet. The app itself has about 100k total downloads. There have been problems with really old Android phones, but otherwise it has worked well. When it comes to feedback, we’ve got a lot of good feedback, but there are also a lot of 1-ratings from kids who hate going to school” -Source: Jarto Tarpio, StarSoft OY

Snapshots

Below are some snapshots from Google Store. As you can see Jarto and the team at StarSoft have used Smart Mobile Studio exactly as it was supposed to be used. With a rich CSS style made for the app, custom controls written and adapted for the solution and focus on code which delivers on all platforms. The application is available for both Android and iOS from the same codebase with a Microsoft Phone version in the pipeline.

Wilma, screenshot from application

Wilma, screenshot from application

Wilma, screenshot from application

Wilma, screenshot from application

Wilma, screenshot from application

Wilma, screenshot from application