Jump to content


Photo

Touch versus scroll

touch scroll list

  • Please log in to reply
11 replies to this topic

#1 ielite

ielite
  • Members
  • 691 posts

Posted 11 May 2017 - 02:45 AM

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

 



#2 Nico Wouterse

Nico Wouterse
  • Moderators
  • 230 posts
  • LocationAustralia

Posted 11 May 2017 - 01:55 PM

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 ?


Nico Wouterse

#3 Igor Savkic

Igor Savkic
  • Members
  • 164 posts

Posted 11 May 2017 - 03:58 PM

> 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.



#4 ielite

ielite
  • Members
  • 691 posts

Posted 12 May 2017 - 04:12 PM

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.



#5 ielite

ielite
  • Members
  • 691 posts

Posted 12 May 2017 - 04:22 PM

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>


#6 Igor Savkic

Igor Savkic
  • Members
  • 164 posts

Posted 12 May 2017 - 07:36 PM

 

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.



#7 ielite

ielite
  • Members
  • 691 posts

Posted 13 May 2017 - 07:20 PM

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.



#8 Laksekjønn

Laksekjønn
  • Members
  • 418 posts

Posted 15 May 2017 - 02:08 AM

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).



#9 Nico Wouterse

Nico Wouterse
  • Moderators
  • 230 posts
  • LocationAustralia

Posted 30 May 2017 - 01:12 PM

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
 
see a general description on http://forums.smartm...hack#entry15005
 
 
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
see  http://forums.smartm...ponents</span>/ and website building posts
 
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)

Nico Wouterse

#10 ielite

ielite
  • Members
  • 691 posts

Posted 30 May 2017 - 03:44 PM

I tried your example

 

 
 
Not only is it slow to scroll, but for some reason, it takes for ever to populate the listbox   too!  (On Mobile only)


#11 ielite

ielite
  • Members
  • 691 posts

Posted 31 May 2017 - 02:11 AM

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.

  • Nico Wouterse likes this

#12 ielite

ielite
  • Members
  • 691 posts

Posted 03 June 2017 - 09:21 PM

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.






Also tagged with one or more of these keywords: touch, scroll, list

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users