Jump to content

How to scroll a form by touch?


Recommended Posts

My project works fine on the screen of a PC-Browser, but it needs some scrolling on mobile devices. Sliders are only supported by Opera mobile as far as I’ve seen, so I’ve tried to write a scroll-function following the “large map” example by manipulating the main forms left/top properties. While the approach itself seems to work, I run into the following problems:

 

The screen parts that are scrolled into the screen are not refreshed (left black) and manual refreshing leads to a reset of left/top to zero (of course).

 

The scroll handling overrides the edit-handling of the included components, so they are not useable anymore.

 

So it seems that this is not good approach. So what is the best practice to scroll the viewport of form, that doesn’t fit to screen?

 

Peter

Link to post
Share on other sites
  • Administrators

Is this in version 1.1?

 

The scroll issues have been improved in version 1.1. Like those "prevent default" issues you describe.

 

We need to take a closer look at the things you point out.

If you have a projet we could play with, pleas sent it to support@smartmobilestudio.com.

 

Best regards!

Link to post
Share on other sites

The "controls inside the forms couldn't be handled anymore" problem was due to the approach:

SelfHandle := self.Handle;

SelfHandle['onmousedown'] := @MouseDownHandler;

that I've copied from the LargeMap example. If I use an standard MouseDownHandler and set it like normal by:

self.OnMouseDown := MouseDownHandler;

this part of the problem is gone :) But I didn't found a solution for the form refresh while/after move problem right now. :(

I'll send you a copy of my project as you suggested.

 

Best regards,

Peter

Link to post
Share on other sites
  • 8 months later...
  • Moderators

I tried a bit of a different approach. As a challenge I wanted to see if it is possible to have forms larger than the physical screen and be able to scroll or swipe the viewport. In other words the behaviour just like any website in a browser and with the same speed and responsiveness.

 

First step is to make the form scrollable. Forms are generated as elements with the style parameter 'overflow' set to 'hidden'. This must be changed to 'auto' for scroll bars to be rendered on desktop browsers.

The following code does that :

 

procedure TForm1.FormActivated;

begin

asm

var e = document.getElementsByTagName('*'); //re-activate scrolling

// Loop through elements

for (var i=0, x=e.length; i<x; i++) {

if (e.className == 'TW3Form') { //tw3form

document.getElementById(e.id).style.overflow = 'auto';

}

}

end;

end;

 

The w3_setstyle method (like w3_setstyle(w3panel1.handle,’overflow’,'auto’) is more elegant but i'm not sure it works on the form level. Anyway, the above does the job and it produces scroll bars in all standard desktop browsers if and when the form-size exceeds the physical screen dimensions.

 

This does not solve anything for mobile devices where scrolling is done by touch/swipe rather than by mouse.

The hack I used is not the prettiest of solutions but it works like a charm. Scrolling large forms on mobile devices by swiping in any direction is blindingly fast.

This hack involves manually adding the following functions to the index.html file :

 

<script type="text/javascript">

(function(){

function isTouchDevice(){

try{

document.createEvent("TouchEvent");

return true;

}catch(e){

return false;

}

}

 

function touchScroll(id){

if(isTouchDevice()){ //if touch events exist...

var el=document.getElementById(id);

var scrollStartPos=0;

 

document.getElementById(id).addEventListener("touchstart", function(event) {

scrollStartPos=this.scrollTop+event.touches[0].pageY;

event.preventDefault();

},false);

 

document.getElementById(id).addEventListener("touchmove", function(event) {

this.scrollTop=scrollStartPos-event.touches[0].pageY;

event.preventDefault();

},false);

}

}

 

})();

</script">

 

These functions basically detect whether the device is touch enabled and if so enable scrolling.

I included them right after the css style section.

See background article http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/

 

These functions have to be called in the windows.onload so I changed the standard function into

window.onload = function () { bootstrap(); touchScroll('OBJ3'); }

 

 

As I said, not the prettiest of solutions but works very well

 

Cheers

 

Nico

 

Link to post
Share on other sites
  • 1 year later...

After upgrading to the current version I've retried but still no success. :(  No touch scroll on mobile devices. Even not using Nicos suggestion. Obviously I must be doing wrong something. Anyone around who can give me a working example so I can find out?

BTW: What is that magic 'OBJ3'? Where is the "FormActivated" event coming from? Why are the javascript touch functions decorated with an empty function (function(){ ...})(); ?

Cheers

Peter

Link to post
Share on other sites

If found out the following:

·        “OBJ3” is the ID of the DIV that holds the main form – hope that is documented and not to be changed in future …

·        “OnFormActivated” is not available by the designer but can be overridden anyway

·        The “function (function(){ ...})();“ decoration has to be striped of

Link to post
Share on other sites
  • 2 years later...

I have implemented the method used and outlined by Nico above in my app, but i've run into a bit of a roadblock.

 

When i use Application.GoToForm, it transitions to the last scroll point that the form was at, where as when i want to move between the two forms i want to start at the top of the form every time.

 

I've tried to use js solutions like scrollTop or scrollToView to the document body, but they don't seem to want to work in chrome (firefox is ok though).

 

Any suggestions?

 

 

EDIT:

 

Solved using:

 


var h := Application.FormByName('Form1').handle;
  asm
      var w =@h;
      w.scrollTop = 0;
  end;
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...