Jump to content
IElite

Touch versus scroll

Recommended Posts

Still trying to get my touch vs scroll to work on non desktop browsers. (e.g. my androind phone). Everytime I go to scroll my lists, it thinks I am touching/selecting an item in the list.

 

Demo

 

Code

 

Shane

 

Share this post


Link to post
Share on other sites

Hi Shane

 

Your demo clearly shows the problem you have

 

I had a quick look at your code, but nothing jumps out

 

except the use of SmartCL.scroll

I have never used this unit, instead always relying on either native scrolling or iScroll

 

and as in quite similar applications I have not had your problem, I suspect there is something wrong in either the scroll unit or the use of it

 

I'm a fan of native scrolling as it is built into the browser and as such works fine on any device, any OS - it doesn't require any effort whatsoever

(Smart disables scrolling by default, just have to enable it again)

 

but iScroll works fine too

 

there are a couple of posts in the forum under 'scroll' which may be of help ?

Share this post


Link to post
Share on other sites

> Still trying to get my touch vs scroll to work on non desktop browsers. (e.g. my androind phone). Everytime I go to scroll my

> lists, it thinks I am touching/selecting an item in the list.

 

You're using Tw3ListBox right? I think problem is within control itself.

I never managed to make it work fine with scrolling and touching, but since place where I need it is not too important I left it as is. Try to make some custom control, perhaps just using standard unordered html list or list of divs.

 

If you have access to new SMS, try it there, perhaps it's fixed there.

If I remember it correctly in new SMS you'll be able to select what kind of scrolling mechanism you want for your control.

Share this post


Link to post
Share on other sites

Yes, I use the Tw3ListBox

 

I can't imagine using anything different will yield a different result......still need to be able to distinguish a touch and scroll when a finger touches the screen.

 

I will give it a try though and see.

 

 

> Still trying to get my touch vs scroll to work on non desktop browsers. (e.g. my androind phone). Everytime I go to scroll my

> lists, it thinks I am touching/selecting an item in the list.

 

You're using Tw3ListBox right? I think problem is within control itself.

I never managed to make it work fine with scrolling and touching, but since place where I need it is not too important I left it as is. Try to make some custom control, perhaps just using standard unordered html list or list of divs.

 

If you have access to new SMS, try it there, perhaps it's fixed there.

If I remember it correctly in new SMS you'll be able to select what kind of scrolling mechanism you want for your control.

Share this post


Link to post
Share on other sites

any recommendations on how I would go about making a list of items with an icon to the left of each item - and make it scroll-able and select-able?

 

for example, a UL. Can we do scroll and touch? Can we have a image to left? I can't see to do these things using the following syntax

 

<ul>

  <li style = "list-style-image: url(' + 'res\item.png')" onclick=" "> Item1</li>
  <li style = "list-style-image: url(' + 'res\item.png')" onclick=" "> Item2</li>
  <li style = "list-style-image: url(' + 'res\item.png')" onclick=" "> Item3</li>
</ul>

Share this post


Link to post
Share on other sites

 

any recommendations on how I would go about making a list of items with an icon to the left of each item - and make it scroll-able and select-able?

 

for example, a UL. Can we do scroll and touch? Can we have a image to left? I can't see to do these things using the following syntax

 

<ul>

  <li style = "list-style-image: url(' + 'res\item.png')" onclick=" "> Item1</li>
  <li style = "list-style-image: url(' + 'res\item.png')" onclick=" "> Item2</li>
  <li style = "list-style-image: url(' + 'res\item.png')" onclick=" "> Item3</li>
</ul>

 

 

When you say touch, do you mean select item? Selecting and scrolling will be all fine, I would suggest to use system scrolling, it works great on Android and iOS and on Window you get a standard scrollbar.

About how to represent items, try to use div inside li and then img, like <li><div><img> or don't use ul/li at all and just use list of divs.

Share this post


Link to post
Share on other sites

Yes! I mean select an item.  The minute your finger touches the screen, it can't differentiate whether you are selecting an item are scrolling

 

 

 

 

When you say touch, do you mean select item? Selecting and scrolling will be all fine, I would suggest to use system scrolling, it works great on Android and iOS and on Window you get a standard scrollbar.

About how to represent items, try to use div inside li and then img, like <li><div><img> or don't use ul/li at all and just use list of divs.

Share this post


Link to post
Share on other sites

I just have compiled your APKProfile demo with the new alpha RTL_2.3

 

a. W3HeaderControl is not working as expected; there're some weird unexpected controls on the screen.

b. I'm getting the annoying flicker page (this is a fast "black background while loading the project"),

c. The final bundle main.js is huge (791,820 bytes), anyway, it's alpha release, it requires some clean up in the uses clause on many units;

d. your demo does not work properly using the RTL_2.3 for me using FF.

 

... about the issue "Can we do scroll and touch", I would prefer "native scrolling" or "iScroll" or "betterScroll"

 

for instance, in this demo, I'm using the betteScroll(inspired by iscroll, and it has a better scroll perfermance).

Share this post


Link to post
Share on other sites
TW3Listbox

I had a quick look at the TW3ListBox component.

I think the problem is that instead of the 'OnSelected' event the 'OnClick' event needs to be used

When I do that and populate a listbox with 300 entries it does scroll on desktop and mobile without triggering the 'clicks'

Desktop scrolling is quick, however mobile scrolling speed is abysmally slow

 



 

 

There are a couple of alternatives besides using TW3ListBox for both scroll and touch/click handling

 

a) use the standard rtl but re-introduce native scrollling

The rtl actively disables native scrolling but there is a way to enable it again without interfering with anything else

Not everyone will like it, it is a bit of a hack, but it does work quite well, and doesn't need any additional libraries or other dependencies

 



 

 

b . use the standard rtl and use iScroll for scrolling



 

c) use the new HTMLElements instead of the normal rtl, which has native scrolling built in


 

d) use the scroll-unit


 

also based on iscroll but at least you can put your visual components on a TForm as per usual rather than on a scroll-content

(needs to be adapted for the new 2.3 version as the basic inheritance hierarchy has changed)

 

 

At the end of the day there are multiple ways to do what you want to do

Personally I would go for native (a)

or iScroll (b or d)

or, if you're feeling adventurous, for native c)

Share this post


Link to post
Share on other sites

I was able to get this example to work in alright

 

 

unit Form1;
 
{Example of how a TW3ListBox's items onclick event works with scrolling in
 a non-desktop environment (e.g. mobile). Instead of TListBox's OnSelected event}
 
interface
 
uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application,
  SmartCL.Controls.ListBox, SmartCL.Controls.Label;
 
type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    fListBox: TW3ListBox;
  protected
    procedure DoClick(Sender: TObject);
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
  end;
 
implementation
 
{ TForm1 }
 
procedure TForm1.DoClick(Sender: TObject);
begin
 ShowMessage(intToSTr(TW3CustomControl(Sender).TagValue));
end;
 
procedure TForm1.InitializeForm;
var
 I, Index: Integer;
begin
  inherited;
  // this is a good place to initialize components
   for I:= 1 to 25 do
  begin
   Index:= fListBox.Add('Item ' + intToStr(I));
   fListBox.Items[index].OnClick:= DoClick;
   fListBox.Items[index].TagValue:= I;
  end;
end;
 
procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  fListBox:= TW3ListBox.Create(self);
end;
 
procedure TForm1.Resize;
begin
  inherited;
  fListBox.SetBounds(0,0,ClientWidth, ClientHeight);
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

Share this post


Link to post
Share on other sites

So i did some tests using SmartCL.Scroll today and here is what I found.  

 

The code below works good for scrolling the items, but when I un-comment the onClick (HandleItemClick) for the items (TW3Labels), the OnClick does not work.  In addition, if I un-comment this line:

window.addEventListener('devicemotion', @Resize, false);

, the scrolling doesn't work properly.

 

on my mobile device after building with PhoneGap

 

unit Form1;


interface


uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Scroll,
  SmartCL.Controls.Label;


const
 COUNT = 50;
 ITEMHEIGHT = 32;
 SPACER = 1;


type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    W3Scroll1: TW3ScrollControl;
    procedure HandleItemClick(Sender: TObject);
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
  public
    procedure UpdateContent;
    procedure ClearContent;
  end;


   //function window: variant; external 'window' property;


implementation


{ TForm1 }


procedure TForm1.HandleItemClick(Sender: TObject);
begin
 if sender is TW3Label then
 ShowMessage('Item ' + inttostr(TW3Label(Sender).TagValue))
 else
 ShowMessage('Just a click');
end;


procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
end;


procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}


  //window.addEventListener('devicemotion', @Resize, false);


   W3Scroll1:= TW3ScrollControl.Create(self);
   W3Scroll1.Handle.style.setProperty('background-color', 'white');
   W3Scroll1.Content.SetBounds(W3Scroll1.ClientRect);
end;


procedure TForm1.Resize;
begin
  inherited;
  if not (Handle.Valid and (csReady in ComponentState)) then
  Exit;


  W3Scroll1.SetBounds(Self.ClientRect);
  W3Scroll1.Content.SetBounds(W3Scroll1.ClientRect);
  UpdateContent;
end;


procedure TForm1.UpdateContent;
var
 i, y: integer;
 W3Label: TW3Label;
begin
 ClearContent;
 y:= SPACER;
 for i:= 1 to COUNT do
 begin
  W3Label:= TW3Label.Create(W3Scroll1.Content);
  W3Label.Caption:= 'Itemz ' + intToStr(i);
  W3Label.Handle.style.setProperty('border-style', 'solid');
  W3Label.Handle.style.setProperty('border-width', '2px');
  W3Label.Handle.style.setProperty('border-color', 'black');
  W3Label.Handle.style.setProperty('text-indent', '10px');
  W3Label.TagValue:= i;
  //W3Label.OnClick:= HandleItemClick;


  W3Label.SetBounds(0, y, W3Scroll1.Content.width, ITEMHEIGHT);
  inc(y, ITEMHEIGHT + SPACER);
 end;
  W3Scroll1.Content.Height:= ((COUNT + 1) * ITEMHEIGHT) + (SPACER * COUNT);
end;


procedure TForm1.ClearContent;
begin
  W3Scroll1.Content.EnumChildren(lambda (child)
     if child is TW3Label then
     begin
      if (child.Owner) then
          child.RemoveFrom;
    end;
     end);
end;


initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

Share this post


Link to post
Share on other sites

In the next RTL there will be a new implementation of TW3ListBox. The original one did not work with mobile devices and if you had a lot of lines, it was unusably slow.

 

The new one supports momentum scrolling and draws lines on demand. So you can have thousands of items in the list and it's still fast. You will also be able to override the creation and drawing of lines to customize it. Hence, the contents of a single line can be anything you want.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×