Лабораторная работа: Работа с данными JSF (часть 2)

Давайте сделаем небольшой примерчик на эту тему.

Уровень 2\Java2-02\Лабы Java2\Ответы\4-JSF\Lab1\WebApplication2

- Откройте проект WebApplication2 в каталоге Лабы Java2/Ответы/4-JSF/Lab1.

- В каталог проекта «Веб-страницы» добавьте новый Составной Компонент JSF. Его имя установите в «clientComp», а имя каталога(Папка) измените на «resources\comp». Нажмите готово.

- Откройте сгенерированною форму clientComp.xhtml и после открывающего тега <cc:interface> создайте две переменных для хранения надписи и значения поля «fname» из Java объекта «Client»:            <cc:attribute name="clientfnameLabel"/>            <cc:attribute name="clientfnameValue"/>

- Создайте аналогичные пары переменных для поля «lname» и «mail». Для поля «discount» надо создать три переменных: для хранения надписи, значения поля и списка значений скидок.

- Откройте форму «editClient.xhtml» и скопируйте в буфер обмена все строки начиная с <h:message и до закрывающего тега </h:panelGrid>.

- Откройте сгенерированною форму clientComp.xhtml и после открывающего тега <cc:implementation> вставьте код из буфера обмена. В скопированном коде замените все четыре тега <h:outputLabel value="firs name"/> на выражения использующее соответствующие созданные переменные: #{cc.attrs.clientfnameLabel}.  В остальных тега в атрибуте «value» измените выражения так, что бы они брали значения из соответствующих созданных переменных с именами оканчивающихся на «....Value».

- Сохраните и закройте файл clientComp.xhtml.

- Откройте форму «editClient.xhtml» и удалите все строки начиная с <h:message и до закрывающего тега </h:panelGrid>. Добавьте в начале файла новое пространство имён xmlns:fc="http://xmlns.jcp.org/jsf/composite/comp" После тега <h:form> добавьте составной элемент управления:                           <fc:clientComp clientfnameLabel="firs name" clientfnameValue="#{client.fname}" /> Задайте значения и для всех оставшихся семи переменных.

- Откройте форму newClient.xhtml и измените её аналогичным образом.

- Запустите приложение.

 

Мы должны добавить новый Составной компонент JSF. Давайте аккуратно это делать вместе. Кликаем правой кнопкой мыши по «Веб-страницы»->«Новый»->«Другое».

Нажимаем «Далее». И вот здесь очень аккуратно. Смотрите, нам надо дать имя файла и папки. Назовем их так, как указано в лабе. Нажимаем «Готово»

Смотрите, у нас появилась папочка «resources». В папочке «resources» появился подкаталог «comp». И вот в нем будут лежать все ваши компоненты, и все они xhtml.

И более того в этой файлике вам помогают и стараются изо всех сил. Видите?

В новом варианте мы видим и interface и implementation. Всю рыбу для нас суже сделали.

А дальше, как раз и идет в разделе interfaceвы создаете переменные для хранения надписей и значений поля fname.

<cc:attributename="clientfnameLabel"/>

<cc:attributename="clientfnameValue"/>

Потому что какая будет надпись? Это определяется каждый раз по разному. А какое будет Value? Оно из разных страниц может браться из разных объектов, поэтому вот эти параметры должны быть заданы и для labelи для value. И надо создать такие параметры, как здесь написано – для lnameи т.д.

Они будут созданы парами. А далее в реализации вместо метки будет атрибут. А inputTextбудет брать значение не из переменной «член класса», а из value. На 28 слайде показано, как будут выглядеть разметки.А вот так у вас будут выглядеть создание всех переменных.

Давайте теперь откроем ответы:

E:\Уровень 2\Java2-02\Лабы Java2\Ответы\4-JSF\Lab2

+ классы Clientи ClientListкоторые не изменились

Был задан правильный и хороший вопрос. А почему что это так странно выглядит? Здесь мы пишем inputText, а здесь мы ничего не пишем. Это как бы атрибут сам по себе. Это работает, но у нас будет просто текст. В нашей таблице Gridбудет просто текст. Если вам нужно, чтобы это был тэг Labelили можно было бы настраивать какие-то стили и т.д., то конечно тогда здесь разумно оставлять, как у нас было в оригинале: <h:outpuLabelvalue = …>. – вот это разумно оставлять. Тогда у вас в Gridбудет Label.

И еще вопрос по поводу: Что вот это за зверь?

Дело в том, что у него хост стоит не правильный. У него вход должен быть для элемента управления, который выдает ошибки. Если у вас элементов управления внизу четыре, значит там должно быть 4 месседжа и infoдолжно быть настроено для каждого отдельно. И вот тогда он будет выводить сообщения об ошибке сверху и цветом, которым вы там написали. А снизу, то что пишется список – это некая системная реакция на ошибки, который обеспечивает вам рендеринг, когда возникают ошибки, он их собирает и вниз отправляет.Но у этого варианта messageочень много параметров. Это надо специально разбираться. Я если честно в этот messageглубоко не влезал. Почитайте отдельно про «информацию об ошибках» на Oracle.

AJAX&JSF

Итак, давайте мы на один шаг сдвинемся вперед. Готовы? Мне кажется, что это все любят.

Ответ из зала: О!!! Я знаю! Это крутая штука! Это прямо бомба!

Ответ препода: Спасибо, что поддержали.

Так вот! Для того чтобы реализовать AJAXвы должны внутри того компонента, который вы хотите сделать AJAXнаписать, что он AJAX. И всё.

Итак, давайте я сначала поясню, кто такой AJAX. Значит, что у нас получается? У нас в браузере инфомрация. Если вы предусмотрели какую-то кнопочку, которую нажимают и вся страничка обновляется, а пользователь хочет видеть какую-то информацию в реальном времени. Вот он сидит и жмет на эту кнопочку – «обновить». Прошло 2 секунды – «Обновить». Что при этом происходит? Запрос на сервере и снова передача данных. А соответственно, на сервере будет создан View – это дерево объектов. Произойдет каждый раз полная обработка, передача страницы по сети и т.д. Это мерцает на экране, трафик сети, загрузка сервера – короче много проблем. А теперь представьте, что у вас страница, почти вся статическая, а информация, которая должна обновляться почти в реальном времени, где-то в одном углу и в другом углу – это маленькая часть экрана. И для того чтобы обновлять этот кусочек страницы, давным-давно в HTTP был разработан некий механизм, который позволяет с браузера асинхронно (т.е. независимо от всей остальной страницы) послать запрос на сервер и сказать: «мне вот тут нужно немножечко данных – пришли пожалуйста, а?». Сервер ответит и вы обновите свой левый угол странички в браузере. Это как часть HTTP. Соответственно, для того чтобы из браузера мы могли этот запрос отправить, нужно в браузере какой-то код выполнить. Правильно? А это JavaScript. Поэтому AJAX, как технология – это асинхронный JavaScript. Это клиентская технология. Вы посылаете запросы из клиента. Активной стороной здесь является клиент. Как вы этот запрос будете отправлять – надо разбираться, потому что вариантов много. Можно кнопочку сделать, которая будет кликами приводить к обновлению не всей страницы, а только частично. Можно повесить какое-то другое событие. У вас JavaScriptна клиенте должно срабатывать, как обычно, по какому-то событию. Какое вы там выберите событие? Да какое хотите! По времени можно сделать, например. Я обычно делаю свой любимый пример – пролетая стрелочкой мышки над временем. J

Главное, чтобы было событие, которое привязывается в клиентской части. Что мы выигрываем? Какие плюсы?

В минус идет точно то, что в клиенте что-то дополнительное нужно писать. А в плюс идет следующее:

· трафик сети меньше, потому что вы обновляете часть информации, соответственно вам не надо требовать с сервера весь объем. Поэтому трафик уменьшается. Это раз.

· Перерисовывается часть экрана. Значит здесь в плане браузера и мерцания все должно быть значительно лучше.

· Еще очень важный момент, который реализован уже в Java. Помните первый этап жизненного цикла? У нас поднимается View. А если происходит асинхронный запрос, то инфраструктура понимает, что это асинхронный запрос. И нужно обновлять уже только часть дерева. И соответственно не все дерево создается, а только часть. И соответственно обработчики срабатывают на части. Т.е. на сервере происходит уже больше такая легкая и короткая версия обработки этого запроса из-за того, что не весь Viewдолжен быть поднят. А это уже экономия серверных ресурсов.

Что нужно, чтобы клиент смог асинхронное сообщение отправить? Там должен быть JavaScript, а там и библиотеку нужно передать JavaScript’овскую. Это раз. Это же нужно написать код на JavaScript, который будет срабатывать по какому-то событию. Ну и нужно сказать, что обновлять, потому что вы должны сказать: «вот это обнови!». Куда потом эти данные бросать? Поэтому вот этот вариант он полурабочий. Конечно, это на половину шутка. Но в каких-то ситуациях те остальные параметры, которые здесь не указаны (они на следующем слайде), там ведь по умолчанию есть значения. И в каких-то ситуациях они могут подойти. И даже такая короткая команда окажется корректной. Все дело в том, что этого короткого тега достаточно <f:ajax>, чтобы на клиент было отправлено соответстующие ссылки на скриптовую библиотеку и там будет вся необходимая оснастка, которая нужна.

@this, @all, @none, or @form – допустимые значения для executeandrender

 

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

Вот! Мы видим event. И тогда вы сами четко сами скажете к какому событию привязано эта асинхронная отправка. MouseOver. Видите? Есть же.

Или execute! Какая часть на дереве должна обрабатываться? Обратите внимание. Вы можете не указывать его. Вот видите? this. Кстати, первое тоже можно не указывать. Есть какое-то событие по умолчанию, но надо для каждого элемента смотреть какое для него предусмотрено событие по умолчанию. Так вот, execute. Что обрабатывать на сервере? Что обновлять в браузере, когда придет сообщение? Вот здесь вроде как по умолчанию ничего не написано. Но вы можете поставить обновлять this или форму можно всю. В целом все предусмотрено. Главное, что авторы всех этих FrameWork’ов стараются сделать так, чтобы вот тот серверный код, которым мы сейчас занимаемся, не 100% требовал от нас написания в рукопашную HTMLи JavaScript. Вы видите? Да? Эта технология предполагает только знание Java и знание специального синтаксиса, но не знание этих дополнительных языков. Поэтому весь необходимый код генерируется.

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

Давайте в этой программе найдем какую-то страничку. Где там время нам нужно? Вот! Стартовая страница и в нем будет время!

Давайте я создам где-то текстовое поле. И соответственно там будем показывать время при помощи AJAX. Отлично! Значит, это у нас какая страничка? clientList.

Всё действуем. Я беру страницу clientList. Где-то там в конце после кнопочки Editпосле <br/>я поставлю весь необходимый код. Ну время же в Label должно выводиться, правильно? Поэтому можно взять спокойно заготовочку для Label, сюда ее добавить. Я не буду писать, что это время, ведь это и так понятно. А в качестве значения value, здесь естественно должен появиться (данные должны же с сервера передаваться). И я пишу clientList, точка…

Ну пока нету. Сделаем Time. Всю перерисовку и все изменение на форме я сделал. Я добавил одну строчку: outputLabel

Значит надо getTimeнаписать. Понимаете, она воспринимает имя clientlist.Time, как свойство. Значит geterдолжен быть. Мне нужен только getTime(). Поэтому возвращаюсь в класс clientList.

И где-то здесь перед статическим блоком меня вполне устроит написание publicStringgetTime(). Ну а реализация, какая-нибудь самая простенькая.

Ну вроде как-то так. Ради одного слова Dataя не буду добавлять целый импорт, поэтому напишу просто importjava.util.*. Все. Вот написан getTime. Проверяем. Нажимаем F6.

Во! 25 июля 2017. А если я нажму кнопочку Update, то вся страница будет обновляться вместе с временем.

Ну а теперь AJAX! Возвращаемся обратно в clientList.xhtml. Сделаем этот тег так, чтобы можно было внутри делать. Открываю скобку, пишу f:ajaxи закрываю его слешом. Всё. Вот он AJAX. Понятно, что здесь eventне определен. Я не знаю, какой там по умолчанию для h:outputLabel. Даже смотреть не собираюсь. Поэтому я выбираю eventиз списка.Ставлю mouseover.Теперь по поводу рендеринга. Давайте попробуем без всего. Просто сказали mouseover.

Неа, не работает. Почему? Обновление стоит в обратную сторону – none. А должно быть this. Его надо обновить – этот самый элемент, который посылал сообщение. Потому что от кого пришло и что нужно рендерить на сервере – это this. А кого обновлять – непонятно. Поэтому давайте мы будем добавлять по одному тегу. eventмы добавили, а теперь добавляем renderс параметром this.

Мы говорим: «обновляй сам себя». Смотрите, я провожу мышкой и всё работает.

Вот я же занимаюсь еще с платформой Microsoft. Там надо обязательно сказать: «на клиента библиотеку отправь. там должны быть JavaScript’ы, которые поддерживают работу AJAX!». И это надо не забыть сделать. А здесь? Это помнить не нужно. Это делается автоматом!

А теперь посмотрим на код Web-страницы. Вот посмотрите наверху. Видите ссылочка?

Видите? Скрипты были переданы – jsf.js. А там где-то внизу должен быть код. Вот пожалуйста – moveover. Тут прочитать невозможно, что происходит, но зато написано this,event,mouseover,0,’@this’. Видите? Вот для этого объекта на сервере произойдет рендеринг и этот объект thisбудет обновлен. Вот она асинхронная обработка и событие mouseover.

Ну вот и всё, что я хотел рассказать вам про AJAX.

MVC

Последнее… Мы видим две ссылочки. Мы периодически проводим семинары. Как-то раз у меня был семинар по MVC. Я сам себе задал вопрос: «простите ребята, а вообще где у нас в современном интерфейсе, которые мы сейчас с вами делали MVCи вообще MVCли это?».

Ответ из зала: Похоже на то.

Ответ препода: Ну что вы говорите такое? Во-первых, я озадачился, что такое MVC. Вот эту первую ссылочку видите? Это известный автор – Мартин Фаулер. Он архитектор. У него отличные статьи на его сайте. Это его конкретно его страничка про MVCначиная с первой и заканчивая последней версией MVC. Там все расписано. Поэтому если кому будет интересно – почитайте. А вторая ссылочка – это статья на Oracle. Когда уже в Oracleозаботились и в сотый раз спросили: «а где у вас MVC?»и они ответили. Поэтому вот он ответ от Oracle.Давайте сейчас этот ответ откроем, потому что здесь есть хороший ответ. Мне он понравился, когда я его читал. В общем ребята молодцы за развернутый ответ. Они говорят: «что вы хотите от нас? MVC? Да, мы сделали MVC». Вот видите, что они говорят? - «UIComponentOrientedMVC == JSF».:D

Но будьте внимательны – это компонентно-ориентированный MVC, т.е. приходит запрос из браузера, движок выступает, как контроллер, и передает запрос к View’шке. View’шка пинает обработчик и работает с данными, которые отдельно лежат. Т.е. у нас получается компонентно-ориентированный MVC, потому что все начинается с View’шки. Но их приперли к стене и сказали: «а вы видели там Spring и другие MVC-фреймворки?». А они говорят: «Да видели мы их не первый день. Да мы понимаем, что существуют библиотеки, которые ориентированы на ActionOrientedMVC» - вот как раз этиSpring, прога от Microsoft, RubyOnRails и т.д. Вот эти MVCработают иначе. Приходит запрос из браузера и он передается (там есть некий диспечер) вашему методу, который будет контроллером. Ваш метод делает, что ему хочется – лезет в БД, формирует какие-то данные с потолка откуда-то и берет их как хочет. И потом он назначает View’шку, которая эти данные отображает. Это другой вариант. А они говорят: «Мы поняли, что вы жить без этого не можете. Мы этим озаботились и сделали для вас это, и это будет у вас вMVC 1.0 вJava 8».

Веб-сервисы.

Последняя наша тема. Давайте ее посмотрим. Она, как AJAX. Там все сделано. Только нужно буквы правильно в нужном месте написать и все заработает. Потому что эту богатую идею попытались довести до экстримально легкой эксплуатации. Что это за идея? Вот представьте себе, что вы написали замечательную функцию, и по своей природной доброте вы решили, что эту функцию могли бы бесплатно вызывать все люди во всем мире. Какие проблемы вас на этом пути поджидают?

Ответ из зала: Компьтеров в Африке нет.

Ответ препода: Компьютеров в Африке нет? У кого-то нет в Африке компютеров! Нет, они не смогут обратиться. Им мы говорим «до свидания».

Ответ из зала: Платформы разные.

Ответ препода: У нас разные ОС – это раз. На этих разных ОС у нас разные ЯП – это два. А в разных ЯП разные типы данных – это три. И вам придется решить проблему, как конвертировать тип данных из одной в другую. Вот это проблема. Понимаете, да? Потому что вызов функции – вы туда передали параметр и обратно вернули результат (тоже тип данных). И как это сделать – абсолютно не понятно.

И ребята-разработчики потихонечку стали этот клубок распутывать. Они сказали: «ну хорошо! На сервер мы код можем выложить? Можем. К серверу можно обратиться? Можно. Как? HTTP. А что передается по HTTP? Просто текст». И если я напишу письмо на сервер, там смогут вызвать для меня функцию с четырьмя параметрами? Если письмо напишу, то не смогут. Я напишу: «здравствуй, сервер! пишет тебе…». Ну не вызовет он функцию с четырьмя параметрами, потому что как это распарсить и понять – абсолютно нереально. Но нашлось идеальное решение – вот оно - XML!

Что такое XML? Это текстовый файл. Ради Бога! Сколько хотите передавайте по HTTP. XML позволяет передавать не только данные сами по себе, но и структуру (описание данных). Оно может содержать описание, как внутри, так и снаружи. Там все уже придумано. И главное, что XML содержит свои собственные типы данных. И тогда эта проблема решилась. Мне достаточно придумать, как конвертировать свои типы данных в XML, и это на каждой платформе и на каждой реализации в каждом ЯП решается.

Когда на каком-либо курсе спрашивают: «Ой! А как они это поймут?». Они XMLбудут парсить. Как их сторона поймет, так и распарсит. Так и будет у них все выглядеть. И проблема решилась. Передал XML, кто-то прочитал из XML. А что он понял – зависит от их платформы. Но какие-то коллекционные данные передаются в таблицы легко.

Тогда остается договориться о чем? Если мы можем передавать это в текстовом и структурированном виде информацию, то надо договориться о наборе команд. Протокол надо выработать. Не вопрос. Надо? Выработаем. Вот он – SOAP.

И прежде чем вы сможете написать клиента, вы должны прежде чем вы сможете по HTTPи XMLотправить правильно отформатированный запрос, то наверно вы понимаете, что вы должны получить описание, что этот сервис из себя представляет? Какие там в нем функции? Их имена? Сколько параметров? Какие типы? Что вы получите как результат? Вам же нужна эта информация, иначе вы не напишете клиента.

Вот по этому, прежде чем вы начнете общаться с сервисом, вы должны почитать у него описание – вот это и есть WSDL (WebServiceDescriptionLanguage). Естественно, это тоже XML-файл, тоже некий стандарт существует. Вы обращаетесь к сервису и говорите: «давай описание!». Тебе раз и сливают файл. И всё. И исходя из этого описания вы можете генерировать теперь правильные запросы и будете понимать, что вам ответят в каждом конкретном случае.

Осталось только дело за малым. Вы должны знать где и на какой сервер вы будете обращаться, т.е. знать URL.