GWT CellList; программная прокрутка между параметрами элементов

#gwt #scroll

#gwt #прокрутка

Вопрос:

Я хотел бы понять, какие опции доступны для прокрутки к определенному элементу в CellList? В настоящее время у меня есть 100 элементов в списке, и мне нужно «перепрыгивать» через элементы одним нажатием кнопки, но, похоже, я не могу найти какие-либо методы в списке ячеек (или в коде), которые предоставляют эту функцию.

Есть идеи?

Заранее большое спасибо,

Ян.

**РЕДАКТИРОВАТЬ

пример рабочего кода ниже;

 public class CellListTest implements EntryPoint {

private CellList<String> cellList;
private SingleSelectionModel<String> stringSingleSelectionModel;

/**
 * This is the entry point method.
 */
public void onModuleLoad() {
    cellList = new CellList<String>(new TextCell());
    cellList.setRowData(buildStringList(200));


    cellList.setKeyboardSelectionPolicy(HasKeyboardSelectionPolicy.KeyboardSelectionPolicy.BOUND_TO_SELECTION);

    Button byTen = new Button("Jump Forward 10");
    stringSingleSelectionModel = new SingleSelectionModel<String>();
    cellList.setSelectionModel(stringSingleSelectionModel);
    byTen.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {
            jumpForward(10);
        }
    });
    byTen.setHeight("30px");
    HTMLPanel htmlPanel = new HTMLPanel("");
    VerticalPanel verticalPanel = new VerticalPanel();
    cellList.setHeight("600px");
    ScrollPanel scrollPanel = new ScrollPanel(cellList);
    verticalPanel.add(byTen);
    verticalPanel.add(scrollPanel);
    htmlPanel.add(verticalPanel);
   RootLayoutPanel.get().add(htmlPanel);
}

final Random random = new Random();
private List<String> buildStringList(int numberToCreate) {
    final ArrayList<String> randomValues = new ArrayList<String>();
    for (int i = 0; i < numberToCreate; i  ) {
        randomValues.add(String.valueOf(random.nextInt()));
    }
    return randomValues;
}

private int currentPosition = 0;
private void jumpForward(int toJump) {
    Element rowElement = cellList.getRowElement(currentPosition  = toJump);
    rowElement.scrollIntoView();
}
  

}

Ответ №1:

Я не думаю, что CellList имеет прямой метод для вашей цели.

Что вы можете сделать, так это использовать метод scrollIntoView элемента. Этот метод настраивает свойства scrollLeft и scrollTop каждого прокручиваемого элемента, чтобы гарантировать, что указанный элемент полностью виден. Чтобы использовать этот метод, вам нужно получить элемент, содержащий ячейку, которую вы хотите отобразить. Один из способов добиться этого — использовать общедоступный getRowElement CellList (int indexOnPage).

Я не пробовал это, но я считаю, что следующий код должен работать:

 //Ensures cell 22 on page is shown
Element element = myCellList.getRowElement(22);
element.scrollIntoView();
  

Комментарии:

1. Большое спасибо; Не знал о методе scrollIntoView () и выглядел многообещающе, но не прокручивался при вызове; пытался также вызвать «фокус» после события (и повторно открыть список), но безрезультатно…

2. Размещается ли список ячеек внутри прокручиваемого элемента, такого как ScrollPanel?

3. Нет; Просто стандартный список ячеек, который вводит список с возможностью прокрутки, когда размер элемента> видимый диапазон.. на самом деле из дальнейшего исследования — это действительно перемещает окно просмотра, но в верхнюю часть; а не к элементу, для которого была вызвана функция scrollIntoView()..

4. Для работы scrollIntoView список ячеек должен иметь прокручиваемого предка. Обычно вы размещаете панель прокрутки и список ячеек внутри нее. Также обратите внимание, что getRowElement получает indexOnPage, который может отличаться от абсолютного индекса ячейки, если у вас несколько страниц.

5. Спасибо, Хавьер — мне удалось заставить это работать по вашему совету — разместив небольшой демонстрационный код, чтобы помочь другим…

Ответ №2:

Прокрутка элемента в поле зрения — это одно; изменение фокуса клавиатуры на конкретный элемент — совсем другое. После долгих исследований я обнаружил, что лучший способ добиться этого — запускать собственные события для имитации нажатия клавиш пользователем.

 private void hitKeyOnList(int keyCode) {
  NativeEvent keyDownEvent = Document.get().createKeyDownEvent(
    false, false, false, false, keyCode);
  list.getElement().dispatchEvent(keyDownEvent);
}
  

В приведенном выше фрагменте list переменная является ссылкой на CellList .

Итак, чтобы переместить курсор в конец списка, сделайте это:

 hitKeyOnList(KeyCodes.KEY_END);
  

для перемещения курсора к следующему элементу вниз от того, который в данный момент находится в фокусе клавиатуры:

 hitKeyOnList(KeyCodes.KEY_DOWN);
  

Этот подход должен работать для всех этих ключей, которые обрабатываются AbstractHasData :

 KeyCodes.KEY_DOWN
KeyCodes.KEY_UP
KeyCodes.KEY_PAGEDOWN
KeyCodes.KEY_PAGEUP
KeyCodes.KEY_HOME
KeyCodes.KEY_END