Archive

Archive for June 10, 2016

For those about to scroll, we salute you

June 10, 2016 1 comment

Came up with a better solution to the scrolling problem for Smart Mobile Studio. While I hate having to write code for Internet Explorer, it is nice to have a system that works everywhere. But that means more abstraction and “drivers” type classes.

The scrolling model

TW3Scrollbox and it’s variation(s) implement different types of scrolling. TW3Scrollbox has a very fast non-momentum scroll, making it perfect for displaying detailed information. But it would be nice if we could choose right?

The model I have come up with is super simple, especially in the upcoming RTL where we finally have non-visual components. I give you – TW3ScrollController

scroll_model

In the present model, TW3Scrollbox deals with scrolling directly. Actually the scrolling is implemented in the TW3ScrollContent control, mapping touch and mouse events directly. This turned out to be a remarkably fast way of moving things around. I really did not expect IE to keep up, but it’s perfectly pristine!

In the momentum-scroll example I posted, control of scrolling is handled by the container rather than content. This is very fast on webkit, and I also tried it on Microsoft mobile and Windows 10 mobile – and it’s very fast there. But for some reason the desktop Internet Explorer is slow and the content jitters a bit.

The culprit is not my code or approach, it’s actually something else. Internet Explorer and Edge are the only browsers that implements OnReSize() events. No other browser has this. In the SMS RTL we have to manually figure out when to call ReSize (based on the BeginUpdate, AddControlState, EndUpdate methods).

In the momentum scroller I use SetBounds() to keep the content within the horizontal bounds of the control. This causes an extra call to Resize every time the content moves even a pixel (even though it shouldnt, because the size doesnt change). So yeah, fixing that will make all the difference. I’m going to nail this thing once and for all, just like I did with font measurements way back.

TW3ScrollController

But isolating the code that actually deals with scrolling in separate, non visual components that you can attach to the TW3ScrollBox makes sense. Rather than hardcoding everything into a huge, spaghetti monster unit — we can now isolate different scroll methods in their own units (keeping those bytes down).
Normal per-pixel scrolling, momentum scrolling, CSS3 animation based scrolling, tween based (cpu) scrolling. It gives us some options – and allows you to implement your own variations if you find mine lacking.

I’m also giving the browser driver a much deserved overhaul. Getting the browser type and version info should be easy (and humanly readable). And since you may want to pick different scroll methods depending on the browser type — being able to check if your running on Edge for the desktop, or IE on a mobile device… well, it should be there. End of story.

iScroll

I really want iScroll to be the standard scroll library for Smart Mobile Studio, but since people feel it’s hard to use and adapt to — I may end up doing the unthinkable and re-write it in object pascal from scratch. But iScroll5 really is so much better. It has been developed and tested on a plethora of devices for six years now.

It even does things the built-in browser scrolling (for the browsers that allows this, yeah im looking at you Safari!) doesn’t deal with.

But I have enough on my plate right now, so iScroll porting will have to wait.

IE 10, 11 and Edge patch for Smart Mobile Studio

June 10, 2016 2 comments

Last week I posted a momentum scrolling base-control for Smart Mobile Studio. It was meant as an example only, written for the new RTL which wont hit the userbase just yet.

It was a bit unfair perhaps, but in all honesty – adapting it to the present RTL is child’s play, and one of the forum members did just that and got it working more or less instantly.

Sadly, it didnt work at all under Internet Explorer. While I am shocked that people actually use Internet Explorer in this day and age – not to mention Edge (or any of Microsoft browsers), I took a few minutes to check out what the fuzz was about.

Microsoft IE strikes again

ie-devil_03Turns out Microsoft has altered the vendor information quite radically the past 4 years. This also means that the Smart Mobile Studio startup code was unable to determine the browser above IE version 10 – and in such a case we always fall back on Mozilla.

But ofcourse, IE wont accept “moz” prefixed CSS3 instructions, so while the visual controls does indeed work – they produced no visual scroll feedback due to the wrong driver.

Patching the RTL to recognize IE, Trident and Edge builds

All you have to do is to replace a function in SmartCL.System.pas called w3_getIsInternetExplorer(). With the new code in place, your SMS applications should start to behave as normal under Microsoft’s browsers:

  • Create a blank new visual project
  • Right-click on SmartCL.System in your main-form’s uses clause
  • Select “open file at cursor” from the pop-up menu
  • Press CTRL + H to open up the search dialog
  • Enter “w3_getIsInternetExplorer” to locate the function
  • Delete the old function and paste in this code
function  w3_getIsInternetExplorer: Boolean;
var
  ua: variant;

  function IE_10_Or_Older: boolean;
  var
    msie: variant;
  begin
    asm
      @msie = (@ua).indexOf('MSIE ');
      @result = (@msie > 0);
    end;
  end;

  function IE_11: boolean;
  var
    trident: variant;
  begin
    asm
      @trident = (@ua).indexOf('Trident/');
      @result = (@trident > 0);
    end;
  end;

  function IE_Edge: boolean;
  var
    edge: variant;
  begin
    asm
      @edge = (@ua).indexOf('Edge/');
      @result = (@edge > 0);
    end;
  end;

begin
  asm
    @ua = window.navigator.userAgent;
  end;
  result := IE_Edge or IE_11 or IE_10_Or_Older;
end;

A small shim for older IE

In some IE builds (8 and 9 I seem to remember) there is also a problem with “element.addEventListner()”. Where both Firefox, Chrome, Safari, Opera and the myriad of webkit clones expects the plain event-name, IE expects the event names to be prefixed with “on”. This flies straight in the face of what every other browser vendor supports (Microsoft always have to screw up like this, sorry but I just think they act like spoiled, retarded children at times).

You might want to add this shim to the Initialization section of your application unit, just to be on the safe side:

initialization
begin
  asm
  if (typeof Element.prototype.addEventListener === 'undefined') {
    Element.prototype.addEventListener = function (e, callback) {
      e = 'on' + e;
      return this.attachEvent(e, callback);
    };
  }
  end;
end;