Панель Popup In JSF 1.1 - PullRequest
Новая
       46

Панель Popup In JSF 1.1

1 голос
/ 21 июля 2011

Возможно ли иметь всплывающее окно панели в JSF 1.1? Я хотел бы отобразить всплывающее окно, когда я нажимаю кнопку редактирования, а затем хотел бы иметь несколько компонентов во всплывающем окне этой панели.

Я не использую другие JSF, такие как iceface или richfaces, просто JSF 1.1.

Любая помощь очень заметна.

Спасибо

1 Ответ

3 голосов
/ 21 июля 2011

Да, это определенно возможно. Просто добавьте хороший фрагмент JavaScript и / или CSS, чтобы показать / скрыть и оформить всплывающее окно. Это также то, что делает средняя библиотека компонентов, такая как RichFaces, с той лишь разницей, что она заключена в простой компонент JSF.

В простейшем случае вы можете использовать JS window.open() по нажатию кнопки / ссылки. 

<h:commandButton value="Edit" onclick="window.open('edit.jsf?id=#{item.id}'); return false;" />

window.open() позволяет точно настраивать окно, например, размер и панели браузера, которые должны отображаться / скрываться. Прочтите документацию MDN , чтобы узнать о них. Возврат false обязателен для предотвращения ненужной отправки кнопкой формы.

Затем в конструкторе базового компонента, связанного с edit.jsf, вы можете получить элемент с помощью id, который был передан в качестве параметра запроса. 

private Item item;

public EditItemBean() {
    String id = (String) FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("id");
    this.item = someItemService.find(Long.valueOf(id));
}

Неприятно, но это то, что вы получаете с JSF 1.1, который не предлагает аннотацию @PostConstruct с поддержкой JSF 1.2 или тег <f:viewParam> с поддержкой JSF 2.0.

Наконец, в edit.jsf вам нужно добавить какой-то условно отредактированный фрагмент JavaScript, который перезагружает родительское окно (так, чтобы отредактированные данные отображались повторно) и закрывало всплывающее окно. 

<h:form>
    ...
    <h:commandButton value="Save" action="#{editItem.save}" />
</h:form>
<h:panelGroup rendered="#{editItem.success}">
    <script type="text/javascript">
        window.opener.location.reload(true);
        window.close();
    </script>
</h:panelGroup>

Установите логическое значение success в методе действия при успешном сохранении. 

public void save() {
    // ...

    this.success = true;
}

Существуют также решения, использующие так называемое диалоговое окно «Наложение окна», которое в основном представляет собой <div>, которое позиционируется с помощью CSS position: fixed; и охватывает все окно браузера с прозрачным фоном, а затем - еще одно <div>, которое по центру и содержит реальную форму. Это, однако, требует большего JS / CSS. Это также то, чем обычно занимается средняя библиотека компонентов JSF и инфраструктура / плагин JavaScript (такие как jQuery или YUI). Только сложнее заставить его работать без проблем вместе с JSF, поскольку вы, конечно, хотели бы снова отобразить всплывающее окно, когда возникает ошибка проверки во всплывающей форме и тому подобное. Намного проще, если вы используете реализацию / библиотеку JSF с поддержкой ajax.

...