Найти элемент и прокрутить форму

[x11]

Приложение - для работы с разного рода объявлениями, поэтому на форме добавления объявления много разных параметров.

Пользователю сложно найти глазами нужный элемент ввода/выбора данных.

Поэтому возникла такая идея.

1. Как программно найти расположение элемента формы, например, TUnimSpinner, TUnimDBLookupComboBox или TUnimEdit?

2. Как программно прокрутить мобильную форму к найденному элементу.

3. Как программно "подсветить" нужный элемент ввода или несколько элементов, которые совпадают со строкой поиска.

Например, вверху формы будет строка ввода, пользователь набирает там "цена" и нужно прокрутить форму и подсветить все TUnimSpinner, у которых в свойстве emptytext (placeholder) или в свойстве hint есть слово "цена". При начале ввода отключить подсветку (эффект свечения) элемента.

 

P.S. элементы лежат не просто на форме. На форме лежит UnimTabPanel, внтури лежит UnimScrollBox, внтури лежат unimFieldContainer, внутри лежат другие unimFieldContainer и элементы ввода/выбора данных.

Буду благодарен за идеи и примеры.

[x11]

Я правильно понимаю, что прокрутить можно с помощью Element.scrollHeight?

https://developer.mozilla.org/ru/docs/Web/API/Element/scrollHeight

document.getElementById(id_attribute_value).scrollHeight;

 

Что подставить вместо id_attribute_value?

Как это всё будет выглядеть в delphi-коде?

[x11]

Как прокрутить - я нашел

procedure ScrollIntoView(FormControl: TUniFormControl);
begin
  FormControl.JSInterface.JSCall('element.dom.scrollIntoView', [True]);
end;

 

[x11]

На счет подсвечивания: метод WebFocus рисует рамочку у элемента. Вроде нормально.

Получилось так:

procedure TfmmForm1.edScrollToElementTriggerEvent(Sender: TUniFormControl; AButtonId: Integer);
Var
  element: TUniFormControl;
begin
// нажатие кнопки у unimEdit
  
  element := FindElement(TunimEdit(sender).Text, self);

  if Assigned(element) then
  begin
    ElementScrollIntoView(element);
    element.WebFocus;
  end;
end;


function FindElement(const txt: string; form: TUnimForm): TUniFormControl;
Var
  i: integer;
  s: string;
begin
// найти элемент формы
  if not Assigned(form) or txt.isEmpty then exit;


  for I := 0 to pred(form.ComponentCount) do
    if form.Components[i] is TUniFormControl then
    begin
      s := TUniFormControl(form.Components[i]).Hint;
      if s.ToLowerInvariant.Contains(txt.ToLowerInvariant) then
      begin
        result := form.Components[i] as TUniFormControl;
        break;
      end;
    end;
end;


procedure ElementScrollIntoView(FormControl: TUniFormControl);
begin
// прокрутить форму до нужного элемента
  FormControl.JSInterface.JSCall('element.dom.scrollIntoView', [True]);
end;

Если у кого-то будет более оптимизированный код, буду благодарен за пример.

 

 

 

[x11]

1 hour ago, x11 said:

метод WebFocus рисует рамочку у элемента

для TUnimToggle не рисует

[Sherzod]

11 minutes ago, x11 said:

для TUnimToggle не рисует

Здравствуйте,

Если есть возможность, прикрепите тестовый случай. Мы проанализируем.

[x11]

а у вас что, рисуется рамка вокруг TUnimToggle?

 

[Sherzod]

1 minute ago, x11 said:

а у вас что, рисуется рамка вокруг TUnimToggle?

Простите, я еще не тестировал Ваш код...

[x11]

После программной прокрутки есть проблема: форму назад, к началу уже прокрутить не получается.

Пример приложил.

1. Запустить и нажмите Войти.

2. На главной форме нажмите третью кнопку со стрелкой вправо. Откроется форма, где много элементов.

3. В самой верхней строке поиска, там, где unimEdit с кнопкой с уваличительным стеклом введите слово "параметр6" и нажмите кнопку.

4. Форма прокрутиться вниз к самой последней компоненте UnimEdit1 (там hint := ''параметр6').

5. А теперь попробойте прокрутить форму в самое начало, вверх и вы увидите, что форма как бы застрянет.

Подскажите, как исправить проблему?

UniGUI_Touch_ERR_Scroll.zip

[x11]

up

[Sherzod]

On 7/29/2020 at 12:35 PM, x11 said:

После программной прокрутки есть проблема: форму назад, к началу уже прокрутить не получается.

Ok, я проверю. 

[Sherzod]

On 7/29/2020 at 12:35 PM, x11 said:

5. А теперь попробойте прокрутить форму в самое начало, вверх и вы увидите, что форма как бы застрянет.

А в самом начале, прокрутка вниз работает должным образом (без поиска)?

[x11]

Да, работает, но как я уже ранее не раз писал - приходится добавлять костыли в код. Т.е. без костылей нормально не работает, я же писал об этом.

2 костыля:

1. добавляю в самый низ пустую панель.

2. Размер формы увеличиваю примерно вот так

  UnimScrollBox1.Height := UnimScrollBox1.Height + 250;
  Self.Height := Self.Height + 600;

 

И ещё. Обратите внимание на 2 снимка экрана - это низ формы.

1. До поиска.

2. После поиска. Т.е. после поиска и прокрутки форма как бы ещё увеличивается.

 

[Sherzod]

On 7/29/2020 at 12:35 PM, x11 said:

Подскажите, как исправить проблему?

Попробуйте такой подход:

UnimScrollBox1.ClientEvents.ExtEvents ->

function painted(sender, eOpts)
{
    sender.bodyElement.dom.setAttribute('style', 'overflow-y:auto !important'); 
    sender.bodyElement.select('.x-dock .x-dock-vertical').setStyle('overflow-y', 'auto');
}

 

[x11]

Спасибо, помогло.

Я так понял, что эти костыли можно убрать?

 

UnimScrollBox1.Height := UnimScrollBox1.Height + 250;
Self.Height := Self.Height + 600;

 

[x11]

On 7/31/2020 at 5:07 PM, Sherzod said:

Попробуйте такой подход:

 

а как быть, если компоненты на UnimScrollBox1 создаются динамически?

Прокрутка не работает.

Дерева с чекбоксами у вас нету

приходится самому что-то выдумывать

Так вот, в onShow мобильной формы

procedure TfmmSelTree2.CreateTreeChecks;
Var
 check: TUnimCheckbox;
begin
  qSel.Close;
  try
    qSel.Open;

    if qSel.RecordCount <= 0 then
    begin
      qSel.close;
      exit;
    end;

    qSel.First;

    //UnimFieldContainer1.BeginUpdate;

    while not qSel.Eof do
    begin
      check := TUnimCheckbox.Create(self);

      check.Parent := UnimScrollBox1;
      check.Caption := qSelNAME.Value;
      check.FieldLabelAlign := laRight;
      check.FieldLabelWidth := 90;
      check.OnChangeValue := UnimCheckBoxChangeValue;

      check.Tag := qSelID.Value;

      qSel.Next;
    end;

  finally
    qSel.Close;
    //UnimFieldContainer1.EndUpdate;
  end;
end;

 

 

В итоге, на UnimScrollBox1 лежит 25 чекбоксов, но видны только 10 и прокрутки нет

[x11]

up

[Sherzod]

21 hours ago, x11 said:

а как быть, если компоненты на UnimScrollBox1 создаются динамически?

Прокрутка не работает.

Я проверю.

(Если у Вас есть тестовый пример, пожалуйста прикрепите...)

[x11]

50 minutes ago, Sherzod said:

Если у Вас есть тестовый пример, пожалуйста прикрепите...

На форме логина нажмите Войти, а потом кнопку с чекбоксом.

Откроется форма fmmSelect1 и на ней UnimScrollBox1 заполниться 50 элементами TUnimCheckbox, но прокрутки не будет.

 

UniGUI_UnimScrollBox.zip

[Sherzod]

42 minutes ago, x11 said:

UniGUI_UnimScrollBox.zip

Спасибо.

42 minutes ago, x11 said:

На форме логина нажмите Войти, а потом кнопку с чекбоксом.

Откроется форма fmmSelect1 и на ней UnimScrollBox1 заполниться 50 элементами TUnimCheckbox, но прокрутки не будет.

function painted(sender, eOpts)
{
    sender.bodyElement.dom.setAttribute('style', 'overflow-y:auto !important'); 
    sender.bodyElement.select('.x-dock .x-dock-vertical').setStyle('overflow-y', 'auto');
    
    if (sender.floating) {
        sender.floating.element.setStyle('height', 'auto');
    }
}

 

[x11]

Спасибо, помогло