javaserver faces

JavaServer FacesJavaServer Faces

Цветелин АндреевЦветелин АндреевЦветелин АндреевЦветелин АндреевDreamix LtdDreamix LtdDreamix LtdDreamix Ltd

c.andreev_AT_dreamix.euc.andreev_AT_dreamix.euc.andreev_AT_dreamix.euc.andreev_AT_dreamix.eu

http://academy.devbg.org/

http://fmi.uni-sofia.bg/


СъдържаниеСъдържаниеСъдържаниеСъдържание

• Технологията Технологията JavaServer FacesJavaServer Faces

• JSF – JSF – защо и какзащо и как??

• JSF – JSF – поглед отвътрепоглед отвътре

• Програмиране и разширяване на Програмиране и разширяване на JSFJSF

• Използване на сложни компонентиИзползване на сложни компоненти

• Създаване на собствени валидатори, Създаване на собствени валидатори, конвертери и компонентиконвертери и компоненти

• Стъпка по стъпка - Стъпка по стъпка - JSF JSF форум форум

• Технологията Технологията JavaServer FacesJavaServer Faces

• JSF – JSF – защо и какзащо и как??

• JSF – JSF – поглед отвътрепоглед отвътре

• Програмиране и разширяване на Програмиране и разширяване на JSFJSF

• Използване на сложни компонентиИзползване на сложни компоненти

• Създаване на собствени валидатори, Създаване на собствени валидатори, конвертери и компонентиконвертери и компоненти

• Стъпка по стъпка - Стъпка по стъпка - JSF JSF форум форум

ВъведениеВъведение 1/2 1/2ВъведениеВъведение 1/2 1/2

• Какво е Какво е JSF?JSF?

• Част от Част от JEEJEE

• Фреймуърк за уеб приложенияФреймуърк за уеб приложения

• Базиран на Базиран на JSP JSP и и Java ServletsJava Servlets

• История на История на JSFJSF

• 2001 2001 г. – JSR 127г. – JSR 127

• 2004 г. – 2004 г. – JSF 1.0 JSF 1.0 и 1.1и 1.1

• 2004 г. – 2004 г. – JSR 252JSR 252

• 2006 г. – 2006 г. – JSF 1.2JSF 1.2

• Какво е Какво е JSF?JSF?

• Част от Част от JEEJEE

• Фреймуърк за уеб приложенияФреймуърк за уеб приложения

• Базиран на Базиран на JSP JSP и и Java ServletsJava Servlets

• История на История на JSFJSF

• 2001 2001 г. – JSR 127г. – JSR 127

• 2004 г. – 2004 г. – JSF 1.0 JSF 1.0 и 1.1и 1.1

• 2004 г. – 2004 г. – JSR 252JSR 252

• 2006 г. – 2006 г. – JSF 1.2JSF 1.2

ВъведениеВъведение 2/2 2/2ВъведениеВъведение 2/2 2/2

• Поддържа се от Apache Foundation, Поддържа се от Apache Foundation, IBM, Oracle, Sun MicrosystemsIBM, Oracle, Sun Microsystems

• Състои се основно от две частиСъстои се основно от две части

• API за представяне на HTML API за представяне на HTML компоненти, валидатори, обработка на компоненти, валидатори, обработка на събития и т.н.събития и т.н.

• Две таг-библиотеки за изграждане на Две таг-библиотеки за изграждане на UIUI

• Поддържа се от Apache Foundation, Поддържа се от Apache Foundation, IBM, Oracle, Sun MicrosystemsIBM, Oracle, Sun Microsystems

• Състои се основно от две частиСъстои се основно от две части

• API за представяне на HTML API за представяне на HTML компоненти, валидатори, обработка на компоненти, валидатори, обработка на събития и т.н.събития и т.н.

• Две таг-библиотеки за изграждане на Две таг-библиотеки за изграждане на UIUI

Защо JSF? Защо JSF? (Преимущества)(Преимущества)Защо JSF? Защо JSF? (Преимущества)(Преимущества)

• Имплементира Имплементира Model-View-ControllerModel-View-Controller

• Третира Третира HTTP HTTP заявка като събитие за заявка като събитие за дадена компонентададена компонента

• Позволява ясно разделение на Позволява ясно разделение на отговорностите в един екипотговорностите в един екип

• Позволява използване на средства за Позволява използване на средства за визуално програмиране (RAD, визуално програмиране (RAD, WYSIWYG) подобно на ASP.NETWYSIWYG) подобно на ASP.NET

• Наподобява Наподобява Swing Swing програмиранепрограмиране

• Имплементира Имплементира Model-View-ControllerModel-View-Controller

• Третира Третира HTTP HTTP заявка като събитие за заявка като събитие за дадена компонентададена компонента

• Позволява ясно разделение на Позволява ясно разделение на отговорностите в един екипотговорностите в един екип

• Позволява използване на средства за Позволява използване на средства за визуално програмиране (RAD, визуално програмиране (RAD, WYSIWYG) подобно на ASP.NETWYSIWYG) подобно на ASP.NET

• Наподобява Наподобява Swing Swing програмиранепрограмиране


• Използва Използва JSP JSP и ползволява и ползволява интеграция с други технологии – интеграция с други технологии – JSTL, StrutsJSTL, Struts

• Позволява смяна на Позволява смяна на View View без без промяна на промяна на ModelModel

• Преизползване на логика. Пример: Преизползване на логика. Пример: UICommandUICommand

• Различна визуализация за различни Различна визуализация за различни клиенти (клиенти (Web browser, PDA Web browser, PDA ))

• Използва Използва JSP JSP и ползволява и ползволява интеграция с други технологии – интеграция с други технологии – JSTL, StrutsJSTL, Struts

• Позволява смяна на Позволява смяна на View View без без промяна на промяна на ModelModel

• Преизползване на логика. Пример: Преизползване на логика. Пример: UICommandUICommand

• Различна визуализация за различни Различна визуализация за различни клиенти (клиенти (Web browser, PDA Web browser, PDA ))


• Предлага архитектура заПредлага архитектура за

• Управление на състоянието на Управление на състоянието на компонентите и техните данни компонентите и техните данни

• Прихващане на съответните им Прихващане на съответните им събитиясъбития

• Валидация на данни от потребителяВалидация на данни от потребителя

• Всичко може да се разширява и Всичко може да се разширява и настройванастройва

• Предлага архитектура заПредлага архитектура за

• Управление на състоянието на Управление на състоянието на компонентите и техните данни компонентите и техните данни

• Прихващане на съответните им Прихващане на съответните им събитиясъбития

• Валидация на данни от потребителяВалидация на данни от потребителя

• Всичко може да се разширява и Всичко може да се разширява и настройванастройва

Структура на Структура на JSF JSF приложениеприложениеСтруктура на Структура на JSF JSF приложениеприложение

• Набор от JSP странициНабор от JSP страници

• Набор от backing beansНабор от backing beans

• JSF конфигурационен файл (faces-JSF конфигурационен файл (faces-config.xml) config.xml)

• Деплоймънт дескриптор (web.xml)Деплоймънт дескриптор (web.xml)

• Собствени валидатори, конвертери, Собствени валидатори, конвертери, компоненти и обработчици на събитиякомпоненти и обработчици на събития

• JSF JSF таг библиотекитетаг библиотеките

• Набор от JSP странициНабор от JSP страници

• Набор от backing beansНабор от backing beans

• JSF конфигурационен файл (faces-JSF конфигурационен файл (faces-config.xml) config.xml)

• Деплоймънт дескриптор (web.xml)Деплоймънт дескриптор (web.xml)

• Собствени валидатори, конвертери, Собствени валидатори, конвертери, компоненти и обработчици на събитиякомпоненти и обработчици на събития

• JSF JSF таг библиотекитетаг библиотеките

Пример за Пример за JSF JSF приложениеприложениеПример за Пример за JSF JSF приложениеприложение

• Стъпки:Стъпки:• Мапване на FacesServlet в web.xml.Мапване на FacesServlet в web.xml.

• Създаване на страниците използвайки Създаване на страниците използвайки основните JSF тагове и тези за HTML основните JSF тагове и тези за HTML компонентите.компонентите.

• Свързваме данните от първата Свързваме данните от първата страница с backing bean.страница с backing bean.

• Дефинираме навигацията между Дефинираме навигацията между страниците във faces-config.xml.страниците във faces-config.xml.

• Построяваме backing beans и ги Построяваме backing beans и ги декларираме във faces-config.xml.декларираме във faces-config.xml.

• Стъпки:Стъпки:• Мапване на FacesServlet в web.xml.Мапване на FacesServlet в web.xml.

• Създаване на страниците използвайки Създаване на страниците използвайки основните JSF тагове и тези за HTML основните JSF тагове и тези за HTML компонентите.компонентите.

• Свързваме данните от първата Свързваме данните от първата страница с backing bean.страница с backing bean.

• Дефинираме навигацията между Дефинираме навигацията между страниците във faces-config.xml.страниците във faces-config.xml.

• Построяваме backing beans и ги Построяваме backing beans и ги декларираме във faces-config.xml.декларираме във faces-config.xml.

Пример за Пример за JSF JSF приложениеприложениеПример за Пример за JSF JSF приложениеприложение

ДемонстрацияДемонстрация

Среди за разработкаСреди за разработкаСреди за разработкаСреди за разработка

• NetBeansNetBeans

• Visual Web PackVisual Web Pack

• EclipseEclipse

• WTPWTP

• MyEclipseMyEclipse

• JDeveloperJDeveloper

• IntelliJ IDEA IntelliJ IDEA

• NetBeansNetBeans

• Visual Web PackVisual Web Pack

• EclipseEclipse

• WTPWTP

• MyEclipseMyEclipse

• JDeveloperJDeveloper

• IntelliJ IDEA IntelliJ IDEA

Среди за разработкаСреди за разработкаСреди за разработкаСреди за разработка

Демонстрация Демонстрация с с JDeveloperJDeveloper

JSF Hello - JSF Hello - продължениепродължениеJSF Hello - JSF Hello - продължениепродължение

• Добавяне на валидация и съобщения Добавяне на валидация и съобщения за грешкиза грешки

• <<h:message … >h:message … >

• required="true"required="true"

• <f:validateLength minimum="3"/><f:validateLength minimum="3"/>

• Използване на стандартните Използване на стандартните конвертери за данниконвертери за данни

• convertDateTime convertDateTime

• Добавяне на валидация и съобщения Добавяне на валидация и съобщения за грешкиза грешки

• <<h:message … >h:message … >

• required="true"required="true"

• <f:validateLength minimum="3"/><f:validateLength minimum="3"/>

• Използване на стандартните Използване на стандартните конвертери за данниконвертери за данни

• convertDateTime convertDateTime

JSF отвътреJSF отвътреJSF отвътреJSF отвътре

• JSF компонентен моделJSF компонентен модел

• Набор от класове за манипулиране и Набор от класове за манипулиране и определяне на състоянието на HTML определяне на състоянието на HTML компонентитекомпонентите

• Модел за рендериране на Модел за рендериране на компонентитекомпонентите

• Събитиен модел за прихващане на Събитиен модел за прихващане на събития за специфични компонентисъбития за специфични компоненти


• Набор от класове за манипулиране и Набор от класове за манипулиране и определяне на състоянието на HTML определяне на състоянието на HTML компонентитекомпонентите


• Събитиен модел за прихващане на Събитиен модел за прихващане на събития за специфични компонентисъбития за специфични компоненти

JSF отвътреJSF отвътреJSF отвътреJSF отвътре


• Конвертен модел за преобразуване на Конвертен модел за преобразуване на типове данни от HTML компонентата типове данни от HTML компонентата към Java кода и обратнокъм Java кода и обратно

• Валидационнен модел за валидиране Валидационнен модел за валидиране на съответните компонентина съответните компоненти


• Конвертен модел за преобразуване на Конвертен модел за преобразуване на типове данни от HTML компонентата типове данни от HTML компонентата към Java кода и обратнокъм Java кода и обратно

• Валидационнен модел за валидиране Валидационнен модел за валидиране на съответните компонентина съответните компоненти

JSF отвътре - JSF отвътре - UIComponent класовеUIComponent класовеJSF отвътре - JSF отвътре - UIComponent класовеUIComponent класове

• Всяка HTML компонента има Всяка HTML компонента има съответния клас, наследяващ съответния клас, наследяващ UIComponentBase.UIComponentBase.

Пример: Пример:

UICommand – h:commandButton иUICommand – h:commandButton и h:commandLink h:commandLink

UIOutput – h:outputText и h:outputLabel UIOutput – h:outputText и h:outputLabel

• Всяка HTML компонента има Всяка HTML компонента има съответния клас, наследяващ съответния клас, наследяващ UIComponentBase.UIComponentBase.

Пример: Пример:

UICommand – h:commandButton иUICommand – h:commandButton и h:commandLink h:commandLink

UIOutput – h:outputText и h:outputLabel UIOutput – h:outputText и h:outputLabel

JSF отвътре - JSF отвътре - UIComponent класовеUIComponent класовеJSF отвътре - JSF отвътре - UIComponent класовеUIComponent класове

• Всяка HTML компонента може да бъде Всяка HTML компонента може да бъде свързана с обект от съответния и тип свързана с обект от съответния и тип посредством атрибута binding. посредством атрибута binding.

Пример:Пример:

• Всяка HTML компонента може да бъде Всяка HTML компонента може да бъде свързана с обект от съответния и тип свързана с обект от съответния и тип посредством атрибута binding. посредством атрибута binding.

Пример:Пример:<h:inputText binding="#{PersonBean.input}" />

JSF отвътре – реднер JSF отвътре – реднер моделмоделJSF отвътре – реднер JSF отвътре – реднер моделмодел


• Всеки таг се свързва с Всеки таг се свързва с Renderer Renderer определящ изгледаопределящ изгледа

• Render kit включва набор от Renderer Render kit включва набор от Renderer класове за всяка компонентакласове за всяка компонента

• JSF JSF позволява смяна на целия позволява смяна на целия Render Render KitKit


• Всеки таг се свързва с Всеки таг се свързва с Renderer Renderer определящ изгледаопределящ изгледа

• Render kit включва набор от Renderer Render kit включва набор от Renderer класове за всяка компонентакласове за всяка компонента

• JSF JSF позволява смяна на целия позволява смяна на целия Render Render KitKit

JSF отвътре - JSF отвътре - Конвертен Конвертен моделмоделJSF отвътре - JSF отвътре - Конвертен Конвертен моделмодел

• Конвертния модел на JSF предоставя Конвертния модел на JSF предоставя лесен начин за постигане на лесен начин за постигане на съответствие между данните в модела съответствие между данните в модела и визулания изглед на даннитеи визулания изглед на данните

Пример: UISelectBoolean представлява Пример: UISelectBoolean представлява checkbox и JSF позволява тази HTML checkbox и JSF позволява тази HTML компонента да бъде свързана с данни компонента да бъде свързана с данни от тип Booleanот тип Boolean

• Конвертния модел на JSF предоставя Конвертния модел на JSF предоставя лесен начин за постигане на лесен начин за постигане на съответствие между данните в модела съответствие между данните в модела и визулания изглед на даннитеи визулания изглед на данните

Пример: UISelectBoolean представлява Пример: UISelectBoolean представлява checkbox и JSF позволява тази HTML checkbox и JSF позволява тази HTML компонента да бъде свързана с данни компонента да бъде свързана с данни от тип Booleanот тип Boolean

JSF отвътре - JSF отвътре - Събитиен Събитиен моделмоделJSF отвътре - JSF отвътре - Събитиен Събитиен моделмодел

• Състои Състои се се от две части – събития от две части – събития (events) и обработчици (listeners)(events) и обработчици (listeners)

• Event обектът идентифицира Event обектът идентифицира компонентата, от която е възникнал и компонентата, от която е възникнал и носи информация за конкретното носи информация за конкретното събитие. събитие.

• За да бъде уведомено за конкретно За да бъде уведомено за конкретно събитие, приложението трябва да събитие, приложението трябва да предостави Listener класпредостави Listener клас

• Предоставя Предоставя action, value-change и action, value-change и data-model eventdata-model event

• Състои Състои се се от две части – събития от две части – събития (events) и обработчици (listeners)(events) и обработчици (listeners)

• Event обектът идентифицира Event обектът идентифицира компонентата, от която е възникнал и компонентата, от която е възникнал и носи информация за конкретното носи информация за конкретното събитие. събитие.

• За да бъде уведомено за конкретно За да бъде уведомено за конкретно събитие, приложението трябва да събитие, приложението трябва да предостави Listener класпредостави Listener клас

• Предоставя Предоставя action, value-change и action, value-change и data-model eventdata-model event


• Обработвици на събития се ‘закачат’ Обработвици на събития се ‘закачат’ по два начина:по два начина:

• Имплементиране на ActionListener или Имплементиране на ActionListener или ValueChangeListener и добавяне ValueChangeListener и добавяне нна а вътрешен таг за съответната вътрешен таг за съответната компонента (actionListener или компонента (actionListener или valueChangeListener)valueChangeListener)

• Обработвици на събития се ‘закачат’ Обработвици на събития се ‘закачат’ по два начина:по два начина:

• Имплементиране на ActionListener или Имплементиране на ActionListener или ValueChangeListener и добавяне ValueChangeListener и добавяне нна а вътрешен таг за съответната вътрешен таг за съответната компонента (actionListener или компонента (actionListener или valueChangeListener)valueChangeListener)


• Обработвици на събития се ‘закачат’ Обработвици на събития се ‘закачат’ по два начина: по два начина:

• Имплементиране на метод на backing Имплементиране на метод на backing bean и достъпване на този метод чрез bean и достъпване на този метод чрез атрибута actionListenerатрибута actionListener

• Обработвици на събития се ‘закачат’ Обработвици на събития се ‘закачат’ по два начина: по два начина:

• Имплементиране на метод на backing Имплементиране на метод на backing bean и достъпване на този метод чрез bean и достъпване на този метод чрез атрибута actionListenerатрибута actionListener

<h:commandLink ... actionListener="#{someBean.someMethod}">

JSF отвътре - JSF отвътре - Валидационен моделВалидационен моделJSF отвътре - JSF отвътре - Валидационен моделВалидационен модел

• Два начина за извършване на Два начина за извършване на собствена валидация – чрез собствена валидация – чрез имплементиране на класа Validator и имплементиране на класа Validator и чрез използване на атрибута validator чрез използване на атрибута validator за референсване на метод на backing за референсване на метод на backing bean.bean.

• Два начина за извършване на Два начина за извършване на собствена валидация – чрез собствена валидация – чрез имплементиране на класа Validator и имплементиране на класа Validator и чрез използване на атрибута validator чрез използване на атрибута validator за референсване на метод на backing за референсване на метод на backing bean.bean.

<h:inputText ... validator="#{someBean.validateSometing}>

JSF отвътре -JSF отвътре -навигационен моделнавигационен моделJSF отвътре -JSF отвътре -навигационен моделнавигационен модел

• Два начинаДва начина

• Статичен – както в демотоСтатичен – както в демото

• Динамичен – с Динамичен – с actionaction методи методи

• Два начинаДва начина

• Статичен – както в демотоСтатичен – както в демото

• Динамичен – с Динамичен – с actionaction методи методи

<h:commandLink action="#{SomeBean.navigate}" value="Submit"/>

Навигация с Навигация с action action методметодНавигация с Навигация с action action методметод


JSF отвътре - backing JSF отвътре - backing bean моделbean моделJSF отвътре - backing JSF отвътре - backing bean моделbean модел

• Динамична навигацияДинамична навигация

• ВалидацияВалидация

• КонвертиранеКонвертиране

• Обработване на събития,Обработване на събития,

• Свързване на текуща стойност на Свързване на текуща стойност на HTML HTML компонентакомпонента

• Свързване на Свързване на HTML HTML компонента към компонента към UIComponent UIComponent клас за манипулация на клас за манипулация на състоянието и.състоянието и.







Binding Binding на компонентана компонентаBinding Binding на компонентана компонента


JSF отвътре - backing JSF отвътре - backing bean моделbean моделJSF отвътре - backing JSF отвътре - backing bean моделbean модел













JSF жизнен цикълJSF жизнен цикълJSF жизнен цикълJSF жизнен цикъл

• Restore View Phase за създаване на Restore View Phase за създаване на дърво от компонентидърво от компоненти

• Apply Request Values Phase за Apply Request Values Phase за извличане на новите стойности на извличане на новите стойности на компонентите.компонентите.

• Process Validations Phase за Process Validations Phase за валидиране на извлечените стойности валидиране на извлечените стойности на компонентите.на компонентите.

• Restore View Phase за създаване на Restore View Phase за създаване на дърво от компонентидърво от компоненти

• Apply Request Values Phase за Apply Request Values Phase за извличане на новите стойности на извличане на новите стойности на компонентите.компонентите.

• Process Validations Phase за Process Validations Phase за валидиране на извлечените стойности валидиране на извлечените стойности на компонентите.на компонентите.

JSF жизнен цикълJSF жизнен цикълJSF жизнен цикълJSF жизнен цикъл

• Update Model Values Phase за Update Model Values Phase за свързване на компонентите от свързване на компонентите от дървото с техните валидни стойностидървото с техните валидни стойности

• Invoke Application Phase за извикване Invoke Application Phase за извикване на всички обработчици за на всички обработчици за възникналите събития, възникналите събития, навигационните методи и т.н.навигационните методи и т.н.

• Render Response Phase за Render Response Phase за рендериране на рендериране на JSP JSP страницатастраницата

• Update Model Values Phase за Update Model Values Phase за свързване на компонентите от свързване на компонентите от дървото с техните валидни стойностидървото с техните валидни стойности

• Invoke Application Phase за извикване Invoke Application Phase за извикване на всички обработчици за на всички обработчици за възникналите събития, възникналите събития, навигационните методи и т.н.навигационните методи и т.н.

• Render Response Phase за Render Response Phase за рендериране на рендериране на JSP JSP страницатастраницата

Въпроси?Въпроси?Въпроси?Въпроси?

JavaServer FacesJavaServer FacesJavaServer FacesJavaServer Faces


javaserver faces

Documents