Jump to content
Ricardo

Scroll form

Recommended Posts

Hi.

How to make a high-rise form and scroll with your fingers or the mouse?

It should work on mobile devices and desktop computers (on mobile devices without scroll bars, of course).

The purpose is the introduction of data

Thanks in advance

Share this post


Link to post
Share on other sites

There are a few ways you can do this:

Easiest is to just set NativeScrolling := True on the form. After that it just scrolls the whole form automatically, if the full contents are not visible.

If you don't want the whole form to scroll, you can build all the scrollable contents inside a ScrollBox. Here you have two possibilities: TW3NativeScrollBox or TW3ScrollBox. If you use TW3ScrollBox, make sure to create the contents inside it's content (MyCtrl := TWhatever.Create(ScrollBox.Content) and to call ScrollBox.UpdateControl when content is built and resized.

The difference between the "native" solutions and TW3ScrollBox is, that TW3ScrollBox does all the scrolling with code, which lets you control everything better.

Share this post


Link to post
Share on other sites

i succeeded by following code:

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
  Application.FormByName('form1').NativeScrolling:=true;
end;

with above code, scrolling is fine on windows (firefox and chrome), and swiping is ok on android (chrome and mi browser). But i have two questions

1. There is a big size memo on my form, swiping (scrolling) is ok outside area of this memo, but it is not swiping when i try to swipe over memo, how can i enable swiping-scrolling everywhere?

2. why can't i access to form by directly typing form1.NativeScrolling etc.

 

Share this post


Link to post
Share on other sites
On 5/24/2020 at 2:52 PM, Huseyin SEKER said:

i succeeded by following code:

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
  Application.FormByName('form1').NativeScrolling:=true;
end;

with above code, scrolling is fine on windows (firefox and chrome), and swiping is ok on android (chrome and mi browser). But i have two questions

1. There is a big size memo on my form, swiping (scrolling) is ok outside area of this memo, but it is not swiping when i try to swipe over memo, how can i enable swiping-scrolling everywhere?

2. why can't i access to form by directly typing form1.NativeScrolling etc.

 

As your code is inside Form1 already, you can simply do:

Self.NativeScrolling:=True;

Or even:

NativeScrolling:=True;

The form scrolling is a trickier problem as the memo captures the swipes and uses them to move the cursor or paint text. One way to solve it is to add a transparent control on top of the memo, but it's definitely not an optimal solution:

procedure TForm1.InitializeForm;
begin
  inherited;
  NativeScrolling:=True;

  var ScrollHelper:=TW3CustomControl.Create(Self);
  ScrollHelper.SetBounds(W3Memo1.BoundsRect);
  ScrollHelper.Transparent:=True;

  ScrollHelper.OnClick:=lambda
    W3Memo1.BringToFront;
    W3Memo1.SetFocus;
  end;

  W3Memo1.OnLostFocus:=lambda
    ScrollHelper.BringToFront;
  end;

  W3Memo1.OnResize:=lambda
    ScrollHelper.SetBounds(W3Memo1.BoundsRect);
  end;
end;

Some JS guru could probably tell a better solution.

Share this post


Link to post
Share on other sites

I'm not a js guru :), or maybe :(

Anyway, logically it's either the form or the memo which reacts to scrolling/swiping.

If you want both, you need to be able to distinguish in which situations you want either to happen.

There are various ways to do this, one of them this : as soon as the form scrolls, disable scrolling on the memo altogether. Then you need to determine under which condition you want to re-enable scrolling the memo. One way would be to have a simple onclick handler

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

  self.NativeScrolling := true; 
  self.onscroll := lambda W3Memo1.NativeScrolling := false; end;  

  W3Memo1.OnClick := lambda W3Memo1.NativeScrolling := true; end;

demo here 

Instead of having to click the memo, it would be better to do this automatically when form-scrolling has ended. There is no such thing as a scroll-end event, but you could simulate one by using a timer of say 1000 ms. Reset the timer continuously during form scrolling and re-enable memo scrolling after the timer fires.

This may work for you, but it is hooking into some finely tuned browser actions, so look out for surprises.

 

 

Share this post


Link to post
Share on other sites

Thank you, I tried both codes on windows and android, Jartos codes gave better results on scrolling-swiping. By the way i have two other questions if you may help:

1. is there a timer control? In delphi there is a timer control on system tab.

2. tw3memo control doesn't have lines property. For example if i write 3 lines like this on note pad:

Apple
Banana
Cherry

and copy-paste them to twmemo's text property in only pastes the first line (Apple), how can i fill memo with multi line content?

Share this post


Link to post
Share on other sites

There is a timer control in the system.time unit

memo1.Text := #'Apple
                Banana
                Cherry';

Memo1.Text := 'Apple' + #10 + 'Banana' + ..

Memo1.Add('Apple',true);
Memo1.Add('Banana',true);

all give the same result

 

Share this post


Link to post
Share on other sites

i wanted to add long content by property inspector. What if i want to add 2 pages of text to the memo, how difficult it would be add such text by code.. I think a memo control should get multiline content at design time, that's why it's name is memo. Also i cannot access a line like this w3memo.Lines[3] etc..

Share this post


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