Динамическая замена внутреннего текста DIV в GWT

Я ищу возможности, которые GWT, SmartGWT предлагают с точки зрения динамического изменения внутреннего HTML-текста элемента.

Отпустим пример :

У меня есть текст lorem ipsum в элементе DIV следующим образом:

<div id="text">
    Lorem <span style="background-color:red">ipsum </span>
    dolor sit amet, consectetur adipiscing elit. 
    Duis convallis iaculis 
    <span style="background-color:red">ipsum </span>
    magna sagittis vel. Lorem
    <span style="background-color:red">ipsum </span> dolor sit amet.
</div>

Желаемая функциональность:

Я хочу, чтобы пользователю было разрешено решать во время runtime, какой текст "помечен" (красным цветом). Это влияние в двух вещах:

  • Возможность удалить элемент span, таким образом заменив
<span style="background-color:red">ipsum </span>

by 

ipsum
  • Возможность добавить элемент span (сделав наоборот)

Как только пользователь выбрал текст, который он хочет «отметить», я использую что-то вроде

RootPanel.get("text").getElement().
setInnerHTML("html content with some new spans tags");

чтобы обновить код HTML с помощью нового выбора (для этого у меня есть некоторый класс GWT, который отслеживает отмеченный текст).

Это кажется мне немного жестоким, потому что я часто обновляю внутренний HTML-код.

Есть ли способ использовать GWT (в тесном сотрудничестве с DOM) или SmartGWT, чтобы добиться этого менее насильственным способом?


gwt smartgwt
person Jean-Michel Garcia    schedule 19.06.2012    source источник
comment
мне это кажется брутальным, ведь чтобы изменить 1% html кода, надо менять весь. Это заставляет браузер выполнять ненужные вычисления рендеринга.   -  person Jean-Michel Garcia    schedule 19.06.2012
comment
Да, но вы можете редактировать только те части, которые вам нужны. Итак, вы редактируете только этот 1%, который хотите. RootPanel.get(the_div_you_want)   -  person mariosk89    schedule 19.06.2012
comment
Я могу ошибаться, но разве вы не можете заключить нужную часть в ‹div id=x›‹/div›? Я думаю, что можно окружить все div. Я говорю: попробуйте указать идентификатор той части, которую вы хотите. вы можете сделать это с помощью div или любым другим способом   -  person mariosk89    schedule 19.06.2012

Ответы (1)


arrow_upward
4
arrow_downward

Чтобы получить доступ к DOM вашей страницы, вы можете вызвать Document.get(), у которого есть удобный метод для поиска элемента по его идентификатору Document.get().getElementById("test");

Конечно, вы должны сохранить ссылку на этот элемент, чтобы не искать в DOM каждый раз, когда вы хотите получить к нему доступ, потому что это жестоко.

private Element testDiv = Document.get().getElementById("test");
...

testDiv.setInnerHTML("Some html");
...
testDiv.setInnerHTML("Some other html");

Но когда у вас есть ссылка на этот элемент, вызов setInnerHTML — самый эффективный способ сделать то, что вы хотите. Не понимаю, почему вы считаете это жестоким. Это, вероятно, даже более эффективно, чем когда вы вызываете метод для виджета, чтобы изменить его содержимое, например, setText(" ...") для TextBox, потому что эти методы обычно проверяют значение, переданное в качестве параметра для безопасности.

Безопасность также может быть проблемой для вас, в зависимости от того, что может делать пользователь. Но обычно, если пользователь может изменить HTML на вашей странице, это вызывает беспокойство. Возможно, вам стоит взглянуть на функцию GWT SafeHTML.

Если вам нужны компоненты RichText, вы можете просмотреть RichTextArea GWT например. Но этот тип компонента обычно не поддерживается всеми браузерами и требует больше ресурсов, чем то, что вы уже делаете, поэтому я не рекомендую его.

person jonasr    schedule 19.06.2012
comment
RichTextArea GWT — хороший пример функциональности, которую я пытаюсь реализовать. Мой DIV похож на область приложения CanEdit. Я объяснил, почему я считаю это жестоким в комментариях к моему вопросу. - person Jean-Michel Garcia; 19.06.2012
comment
Каждый раз, когда вы видите, что что-то меняется на веб-странице, модифицируется DOM страницы. Обойти это невозможно, но современные браузеры неплохо справляются с рендерингом. Изменение innerHTML одного div не должно вызывать проблем, даже если вы делаете это довольно часто. Виджеты, такие как RichTextArea, в конечном итоге также вызывают setInnerHTML для div, но до этого они выполняют гораздо больше работы, поэтому, если вы хотите установить диапазоны только вокруг некоторого текста, ваше решение будет более эффективным. - person jonasr; 19.06.2012
comment
Главный вопрос, который я задаю себе: Как лучше? 1. Сохраняет в классах GWT отслеживание выбора диапазона и запускает setInnerHTML каждый раз, когда происходит изменение. Или, 2. Выполнить все модификации на уровне DOM, изменяя только затронутые элементы (для этого я должен окружить даже не отмеченный текст с помощью спанов). - person Jean-Michel Garcia; 19.06.2012
comment
Это зависит от вашей проблемы. Может ли текст внутри div измениться? Может ли пользователь выбрать любую его часть? Может ли пользователь выбрать столько частей, сколько он хочет, или только одну, или две. В зависимости от этих ограничений вы можете разделить свой текст на более мелкие div и span и изменить только содержимое соответствующих. На мой взгляд, если ваш div содержит простой HTML (только текст и промежутки) и не слишком велик, просто постоянно меняйте весь его innertHTML. - person jonasr; 19.06.2012
comment
Текст не может измениться, пользователь может выбрать столько частей, сколько захочет (точно так же, как RichTextArea), он может выбрать любую часть. Я могу иметь более 300 отмеченных текстов в тексте из 500 слов. Буду иметь в виду все ваши советы. - person Jean-Michel Garcia; 19.06.2012