Кстати, а inputtext можно сразу по середине экрана или формочку нужно сделать?

Можно.

Она говорит, что-то ты форму не дал. Лажа! Что за ерунда какая-то? Потому что если человек введет имя, то как мы его получим обратно? Это же нужно кнопочка submit, собери данные и отправь?

Ответ из зала: Может быть там JavaScriptкакой-то висит.

Ответ препода: Ааа!! Кстати по поводу JavaScriptпару моментов хочется сказать. Здесь предполагается, что вот эти все элементы позволяют нам писать код используя серверные объекты, сократив тем самым ситуации, когда нужно прибегать к JavaScript.

Форма нужна! Ну что? Трудно сделать форму? Давайте сделаем! Чтобы было правильно. Давайте добьемся чтобы это было правильно. А то у нас раз и не доконца доделано.

Вот! Уже лучше! Конечно, должны быть соответствующие кнопочки. Вот вы можете менять имя. А вот оно управление состоянием. Смотрите!

К тому, что у вас здесь было, кроме titleмы видим формочку. Кстати, обратите внимание, что в формочке был автоматически сгенерирован метод передачи данных на сервер «POST». Кому передаются данные? Этой же странице!

Потом у вас идет input. У вас добавили inputhidden. Видите, какое у него имя? Это состояние. Это его id, а это его value. Вот под этим именем и номером где-то на сервере хранится информация о том тексте, которое было отправлено. И если вы вот этот текст измените, то сразу станет понятно.

Вот некую подобную формочку мы и будем делать завтра, чтобы каждый кусочек, который мы будем смотреть можно было бы попробовать в таком простом варианте синтаксиса, где у вас будет Java-класс, какой-то интерфейс, изменение данных, проверка данных и т.д. Мы конечно сохранять и читать в БД не будем, потому что это мы долго с БД работаем. Мы будет работать на уровне «Запрос-Ответ». И данные будут только в оперативной памяти. Но я думаю, что разумно это будет разбирать завтра. Завтра надо будет создать простенькую формочку, прямо на базе этой программы. Но это уже завтра со свежей головой.

Сегодня мы должны посмотреть две темы: JSFи Веб-сервисы. Писать сам веб-сервис не интересно.

А сейчас мы должны продолжить проект «WebApplication2».

Итак, что мы здесь должны посмотреть и сделать? На примере того кода, который мы напишем, мы будем потихонечку разные технологии изучать. Поэтому нам нужна формочка и данные. Мы не будем гнаться за количеством. Это для нас было бы немного странно. Но допустим такая мелочь, как число, текст, проверка и прочие действия позволят понять, и увидеть, как работают события. Нам нужны кнопки чтобы были события.

Итак поехали!

«HellofromFacelets» пусть останется. Он нас совершенно не смущает. Конечно это не нужный код, ну ладно. Потом у нас идет формочка. Потом у нас идет формочка, а вот внутри формочки, понятно, что много будет элементов. Я предполагаю сделать внутри этой формочки что-нибудь поприличнее. Например, табличное представление данных. Поэтому сюда внутрь тега <h:form>я добавлю еще один <h:PanelGrid>. И весь остальной набор элементов управления будет в <h:PanelGrid>. Давайте посмотрим, что у нас в <h:PanelGrid> есть. А в <h:PanelGrid> есть замечательные настройки. Смотрите.

В данном случае мы должны выбрать параметр “columns”, потому что вы должны задать, сколько у вас будет столбцов. У нас будет 2 столбца: надпись и элемент управления. А строк? Ну сколько осилим.

Итак, давайте осиливать. Вначале должна быть надпись, а потом inputtext.

1	h:inputText Renders a HTML input of type="text", text box.
2	h:inputSecret Renders a HTML input of type="password", text box.
3	h:inputTextarea Renders a HTML textarea field.
4	h:inputHidden Renders a HTML input of type="hidden".
5	h:selectBooleanCheckbox Renders a single HTML check box.
6	h:selectManyCheckbox Renders a group of HTML check boxes.
7	h:selectOneRadio Renders a single HTML radio button.
8	h:selectOneListbox Renders a HTML single list box.
9	h:selectManyListbox Renders a HTML multiple list box.
10	h:selectOneMenu Renders a HTML combo box.
11	h:outputText Renders a HTML text.
12	h:outputFormat Renders a HTML text. It accepts parameters.
13	h:graphicImage Renders an image.
14	h:outputStylesheet Includes a CSS style sheet in HTML output.
15	h:outputScript Includes a script in HTML output.
16	h:commandButton Renders a HTML input of type="submit" button.
17	h:Link Renders a HTML anchor.
18	h:commandLink Renders a HTML anchor.
19	h:outputLink Renders a HTML anchor.
20	h:panelGrid Renders an HTML Table in form of grid.
21	h:message Renders message for a JSF UI Component.
22	h:messages Renders all message for JSF UI Components.

 

Ну что? Я, конечно, не хочу что мы создали супер-мега-крутой пользовательский интерфейс, но в конце концов что-то сделали? Уже работает.

Открываем следующий слайд.

@RequestScoped	Bean lives as long as the HTTP request-response lives. It get created upon a HTTP request and get destroyed when the HTTP response associated with the HTTP request is finished.
@NoneScoped	Bean lives as long as a single EL evaluation. It get created upon an EL evaluation and get destroyed immediately after the EL evaluation.
@ViewScoped	Bean lives as long as user is interacting with the same JSF view in the browser window/tab. It get created upon a HTTP request and get destroyed once user postback to a different view.
@SessionScoped	Bean lives as long as the HTTP session lives. It get created upon the first HTTP request involving this bean in the session and get destroyed when the HTTP session is invalidated.
@ApplicationScoped	Bean lives as long as the web application lives. It get created upon the first HTTP request involving this bean in the application (or when the web application starts up and the eager=true attribute is set in @ManagedBean) and get destroyed when the web application shuts down.

 

Возникает вопрос. Ну собственно говоря, с т.з. пользовательского интерфейса мы изучим все элементы управления «<h:>». Мы их будем применять. И создадим пользовательский интерфейс. При наличии дизайнера – это непроблема. Проблема другая. Проблема вот эта! А как это все заставить работать? А очень просто! Вы пишете класс. Он должен быть «implements Serializable» и в этом классе должны быть обычные классические свойства, вот те которые мы с вами видели, как JavaBeansсвойства. Т.е. вещи из JavaFXнам обычные нужны – гетеры и сетеры. И самое важное это будет наличие двух аннотаций сверху. Обратите внимание на первую аннотацию - @ ManagedBean. Она говорит: «когда мы все это запускаем пусть это будет все в виртуальной машине, чтобы она последний параметр создала этот объект, как можно быстрее», т.е. не ждала когда к нему где-то обратятся, а вот начали загружать страницу и сразу создать этот объект. Т.е. “client” – это имя ссылки на объект. А вторая аннотация @ SessionScoped говорит об области видимости. Помните мы делали это в JSPjsp:useBean?

Итак в нашем с вами проекте у нас есть папочка для кода – «Пакеты исходных кодов»

Packageнет. Это не проект. Packageдолжен быть всегда. Создаем новый пакет Java«abc». И в этот пакет мы добавляем класс «Client».Жмем «Готово».

Так «implementsSerializable» наспопросили. Ну уважим.

Как вы думаете, надо ли нам делать конструктор? По умолчанию нас вполне устроит. Дефолтный конструктор нам нужен, иначе как они создадут этот объект? Но по умолчанию он нормальный. Ну а если вы какую-то инициализацию свою собственную задумали, ну тогда уж пожалуйста сделаете свою версию.

АнамдляэтойформочкинужныFirstname, Lastname, Date of Birth, Discount. Четыре свойства нужны. А свойства это что такое? Это getи set. Причем сама переменная в которой хранится значение, она к свойству не имеет никакого отношения. Учтите, что приватная переменная, которая объявляется в классе не является частью стандарта JavaBeans. Вы быть вы сразу в БД читаете или сохраняете. Ну нам-то проще, если мы создадим переменные.

Этобудет:

private String fname, lname; private int year; private int discount;

А теперь делаем 4 гетера и сетера.

Теперь возвращаемся в наш код странички.

Я хочу, чтобы в inputText было написано что-нибудь правильное. Правильное – это значит надо брать из свойства объекта. А он, например, из БД подтянул информацию. Я хочу это видеть здесь. Вот этот специальный синтаксис здесь начинается со знака «$». Далее пишем фигурные скобки {}. А внутри фигурных скобок нам сразу предлагают поставить кучу всего, что видит эта страница.

А нам нужен clientв списке. После client вы ставите точку «.» и она видит те свойства, которые вы сделали. Свойства – это то, что синими квадратиками обозначается.

Поэтому вы выбираете fname.По аналогии подставляем необходимые значения в других полях.

Получилось вот что:

А вот если я измению значение, какого-то поля из этих трех, которые мы видели, то она обратно в переменную положит это значение? Да. Положит.

Когда она читает экран – она использует гетер. А когда данные придут на сервер, она использует сетер, чтобы вызвать соответствующий метод и положить в переменную класса. Т.е. ваш объект по ссылочке он подвязан к этой форме. Мы можем это увидеть в консоли GlassFish.

Т.е. в полях хранятся новые значения. Это можно увидеть через отладчик. Откуда они взялись? А это гетер отработал. А теперь когда вы здесь меняете, то вы нажимаете Save. Кнопочка Save, кстати, тоже реализована. Смотрите, вот, пожалуйста – «submit».

Кнопочка submitи в формочке прописано «action». Когда нажимается кнопочка Submitв этой формочке, происходит отправка данных обратно этой же страничке методом post. Т.е. у нас все есть. Собираются данные из формы и отправляются на сервер. Мы это отрабатываем. Нажимаем. Данные пошли на сервер.

Вы скажете: «а чего это столько всяких настроек за нас кто-то делает?»

Так вы же пользуетесь не HTML, а объектами. Там уже функционал по умолчанию сделан! Куда actionотправлять? Себе же по умолчанию. Если вы хотите поменять, то ради Бога.

Был задан вопрос, а что это за зверь?

Это сделанное хитроумным способом скрытое поле, которое позволяет управлять состоянием, чтобы мы на сервере знали, какие данные были до отправки, а потом чтобы мы могли увидеть произошедшие изменения когда формочка снова придет на сервер. Вот это называется «ViewState» - это информация о состоянии о всех характеристиках (все названия, даты, fname, lname). Вся информация, которая ушла клиенту, она фиксируется на сервере. Когда придет ответ, мы сравним эти две информации, увидим отличие и скажем: «текст изменился!». И на сервере изменился текст.

${10 mod 4} [1,2,3,4].stream().sum()                        //.get() ${header["host"]} #{customer.lName} #{customer.calcTotal}

 

Хорошо, что у нас не хватает? Знаний не хватает вот по этому синтаксису, который мы здесь начали использовать, который начинается со знака «$». Давайте посмотрим, что это такое очень коротенько. Если брать документацию по Enterprise, то там есть глава, которая посвящена ExpressionLanguage. Обратите внимание, что я привел на слайде несколько примеров. Синтаксис, который вы там пишете в своем ExpressionLanguage, он позволяет обращаться к объектам. Вот например, мы обращаемся к объекту Client. А если есть какие-то другие объекты до которых он может добраться, то ради Бога. Например, существуют готовые серверные объекты (понимая, что весь этот ExpressionLanguageкод происходит на сервере). Вот например один из готовых объектов - ${ header[" host"]}. Это заголовки запроса HTTP. А нас еще на сервере объекты, какие-нибудь там, requestи response; или session. Там много серверных объектов. И вы можете с ними работать. А как работать? Как обычно. Вы можете обращаться к их свойствам. Вызывать их методы. В данном случае мы обращаемся, например, в header – он как хеш-таблица, у него есть заголовки с разными номерами, ну а за этими значениями прячутся какие-то имена. Поэтому видите? Синтаксис обращения к элементу, как к элементу хэш-таблицы. ExpressionLanguageв себя включает операции. Вот там написано – арифметические, логические и т.д. Там приличный набор операций.

Они немного отличаются от того, что вы привыкли видеть, допустим в том же Си или Java.Ну это свой язык (ExpressionLanguage).

Вы можете работать с коллекциями. Более того вы можете эту коллекцию получить, ну может написать какой-то у объекта метод. Например, в классе Clientможно написать какой-нибудь метод который возвращает коллекцию. А потом можно сделать, что оттуда будет значение из этой коллекции выбираться.

А в варианте «[1,2,3,4]. stream(). sum()» по сути создается некая коллекция на лету, преобращуется в понятие поток. А там, где есть поток (вспоминаем первый курс по Java) у нас есть что? Есть готовые агрегирующие операции. max(), min(), sum() и т.д.

Я хочу предложить вариант, как работать с массивами. Он (массив) конечно нам не нужен. Я сейчас сделаю код, который будет выводиться не из свойства, а я просто возьму какой-нибудь список и оттуда буду выбирать минимальный элемент, чтобы показать, что это работает.

Итак, я создам метод, который просто будет вызываться. Он будет возвращать коллекцию int’ов. Называться он будет getData(). Я сказал, что будут года? Ну пусть будут годы.

У меня есть метод, который возвращает коллекцию, а вот теперь смотрите. Внутри этого ExpressionLanguageя пишу «client.». Вы видите? Появилась data. И написано, что это массив.

Заношу его туда. Ставлю опять точку. И мы видим новую Java-возможность, которая заключается в следующем. Она понимает, что ты хочешь делать что-то с коллекцией (какие-то преобразования агрегирующие).

Ставим после этого опять точку. И здесь появляются разные агрегирующие варианты.

Я говорю: «О! Давайка мне минимум!». Помоему после min, он просто так не заработает. Там еще надо дописать кое что в продолжение. После minставятся круглые скобки «()», потом ставится точка и вызывается метод get().

Нажимаем F6.

Видите? Он взял минимальное значение.

Т.е. существует возможность прочитать данные из коллекции, обработать эти данные. Это легко реализуемо с помощью этого специального синтаксиса. Поэтому ваша задача – это написать свои классы, в свои классы поместить любые свойства, любые методы, и они отсюда вызываются.

P.S.: Комментарий в JSFпишется вот так:

Так! Идем дальше! Сдвигаемся на шаг вперед. Значит у нас есть теперь страница, у нас есть код, который с ней связан и все это сделано за счет аннотаций. Сегодня это стандартный вариант программирования. Вся технология EnterpriseJavaBeansбудет построена на аннотациях. Вы напишите класс, а потом его подключите. Скажете: «Вот этот класс мне, пожалуйста, дайте». И укажете его имя. Вы никогда не будете создавать объект. Вы будете имя ему указывать, а кто-то вам его создаст. Кто его создаст? Ну не знаю. Считайте – виртуальная машина.

Еще очень важная позиция – это навигация. Я не думаю, что у вас будет сайт из одной страницы. Их будет 10-15, а может и больше. Поэтому должна быть какая-то схема перехода. Естественно, в идеале это будет какой-то для навигации специальный элемент управления. Но нас здесь интересует логика. Есть ли какие-то варианты для упрощения? Значит первый вариант – мы посмотрим в лабораторной работе, когда я ее открою. Я там специально это реализовал. Есть возможность добавить в проект файл. Он называется faces.config.xml. И там можно сконфигурировать логику перехода со страницы на страницу. Причем там даже логика перехода может зависеть от какого-то параметра. Т.е. у меня вызывается какая-нибудь функция, она вычисляет что-то и это определяет страницу, по которой происходит переход. Но это конфигурируется в xml-файле. Это рабочий вариант, но старый. Это было в версии 2.0.

А у нас сейчас версия 2.2. У нас появилась навигация по умолчанию. Смотрите, как это красиво. Вы пишете commonButton. У него есть какой-нибудь valueна который вы кликаете. А можно задать еще один параметр action. Это и будет имя странички, на которую произойдет переход. Т.е. value – это надпись кнопки, а action – имя страницы на которую происходит переход.

Причем сам движок веб-сервера просто ищет страницу с именем homeи естественно расширение xhtml. Но оно должно быть, иначе будет ошибка. Если вы считаете, что просто тупо выбирать имя страницы методом «hardcoded» - это не самый лучший вариант, то вы пишете специальный метод у себя в классе. Тогда для того чтобы вычислить куда осуществляется переход, вызывается метод moveTo. В вашей бизнес-логике выполняется вычисление и метод moveToвозвращает текст. Это будет имя страницу, на которую нужно выполнить переход.

Не знаю, выбирать вам. Здесь можно сделать, чтобы вот этот метод moveTo, чтобы он на вход получал какие-то параметры. Ведь понимаете, что метод moveToможет вызываться с разных страниц, поэтому он должен знать, в каком контексте он работает и можно здесь сделать еще параметр, который будет передаваться на вход этого moveTo, это будет анализироваться и т.д. Т.е. в принципе навигацию вы можете продумать достаточно интересную. Все это здесь возможно.

Давайте что-нибудь отправим куда-то.

Ну давайте начнем с простого варианта. Для того чтобы мы могли что-то куда-то отправлять, для начала давайте откроем проект. Открываем веб-страницы. Убедимся, что у нас один файлик.

Добавим еще одну страничку. на «Веб-страницы» правой кнопочкой. «Новый»->«Другое»->«Страница JSF»

Имя даем «home» и нажимаем «Готово». Вот наша страничка появилась.

Я не буду ничего делать на страничке home.xhtml. Мы просто будем переключаться с index.xhtmlна home.xhtml.

Но вопрос все-равно остается открытым. Почему появляется эта ошибка при переходе на страницу Home, когда у нас стоит такой параметр <h:inputText id="id3" value="${client.data.stream().min().get()}"/>?

Давайте посмотрим, что у нас происходит с т.з. этих чисел, которые мы здесь пересылаем. Я сейчас в этом окошке поменяю число на 89. И нажму «GoToHome».

Видите?

Значит у меня здесь получается, что у моей формочки стоит action. Результат работы формы получает моя страница index.xhtml. Она его получает. Мой сетер же сработал! А потом уже когда обратно отправляется клиенту страницу, то отправляется та страница, по какой кнопочке вы кликнули. Т.е. получается, что обе кнопочки – они же submit. Они приводят к тому, что результат работы формы отправляется index.xhtml, а уже т.к. вы кликнули по кнопочке у которой был actionс другим именем, клиенту обратно отрендерилась страница.

Еще народ кричал, что в URL остается старый вариант. Кричали? Да, он остается. По умолчанию переход на новую страницу реализовывается по механизму forward. И URL поэтому не меняется.

А вы скажете: «Ой! А я не люблю forward». Я хочу чтобы URLпоменялся. Ну ради Бога! Попросите об этом! Скажите: «Пожалуйста! Поменяй URL!». Вы должны поставить здесь «знак вопроса» и написать faces- redirect= true

Вопрос из зала: Это что за магия?

Ответ препода: Это не магия, а слово «пожалуйста». Мы выбираем механизм не forward, а redirect.

Это все описано в стандарте EnterpriseEditionVersion 7. Там все параметры расписаны.

Идем дальше. Следующий кусочек называется «конвертор».

Все дело в том, что вот сейчас у нас программа вроде как работает, но мы не обращаем внимания на простейшие вещи. Например, как происходит передача этого числа в вашу переменную «Year», который имеет тип integer? Ведь всё, что на экране – это текст. Если сейчас программу запустить, и поставить в графе «Year»букву «а», то произошла ошибка преобразования. И вам вернули эту страничку и сказали: «друг, ну это ты как-то не правильно набрал».

Обратите внимание, что есть стандартная инфраструктура, которая уже пытается конвертировать из строки в число. И если это не получается сделать, то она выдает сообщение об ошибке. У нас же не на сервере все рухнуло. Это все сработало. Помните жизненный цикл? Сработали конверторы. И они говорят: «я этот знак не могу преобразовать в число». И всё – до свидания.

Значит они есть? Да. Есть набор стандартных конверторов. Вот одна работа из таких стандартных конверторов мы сейчас с вами и видим. И если на слайде посмотреть, то стандартных конверторов естественно не так много.

Class	Converter Id
BigDecimalConverter	javax.faces.BigDecimal
BigIntegerConverter	javax.faces.BigInteger
BooleanConverter	javax.faces.Boolean
ByteConverter	javax.faces.Byte
CharacterConverter	javax.faces.Character
DateTimeConverter	javax.faces.DateTime
DoubleConverter	javax.faces.Double
EnumConverter	javax.faces.Enum
FloatConverter	javax.faces.Float
IntegerConverter	javax.faces.Integer
LongConverter	javax.faces.Long
NumberConverter	javax.faces.Number
ShortConverter	javax.faces.Short

Это далеко не весь список. Что могут преобразовывать стандартные конверторы? Числа, Boolean, Дата, Время.

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

Первый пункт: автоматическое срабатывание я вам показал. У нас преобразуется текст в число.

А если вам не нравится тот автоматический конвертор, мы хотим другой назначить – не вопрос. Вы должны тогда внутри поля inputдобавить подэлемент «converter». И в качестве id написать то значение, которые вы видите в таблице в правом столбике.

Вопрос: В чем отличие между «#» и «$»?

Ответ: Кстати лучше ставить «#». Это более универсальный синтаксис. Наоборот, как раз «$»идет с ограничением. В каких-то ситуациях «$» воспринимается, как только для чтения. Так что более общий вариант – это «#».

Ну и конечно, самое серьезное – это свой конвертор. Потому что бывает нестандартная ситуация, вам пользователь вводит какие-то данные, а вы должны конвертировать это не в число, не в строку, а в объект. В зависимости от того, какие были введены данные, вы создадите объект и инициализируете его этими значениями. Поэтому здесь показан пример, где вы видите, что вводится номер карты и происходит преобразование в объект.

Реализация своего собственного конвертора абсолютно не сложна. Вот посмотрите. Вы пишете класс, ваш класс реализует служебный интерфейс под названием Convertor. Вы видите в этом интерфейсе два метода – преобразовать «в» и «из». Нам нужно на экран отправить данные – метод getAsString, который из вашего объекта сделает строку, чтобы отобразить это на клиенте. И в обратную сторону. Вам пришлют какие-то данные, а вы должны их преобразовать в методе getAsObject.

Конвертору вы должны дать имя. Для этого есть специальная аннотация. Обратите внимание, конвертор можно назначить. Есть специальный атрибут в объектах, которые мы используем (которые начинаются с «<h:») там есть возможность сказать converter = "имя". Всё. Тогда соответственно, этот код сработает.