Основная идея - это просто расширение объектно-ориентированного проектирования: разделите проблемы вашей программы. Точно так же, как вы можете сделать несколько разных сценариев PERL и связать их вместе для выполнения работы, мы создадим несколько разных компонентов JSF и сошлем их вместе для выполнения работы.
Давайте возьмем простую регистрационную форму в качестве примера. Я хочу знать ваше имя, дату вашего рождения, ваш адрес и отправить все это на сервер для выполнения работы.
Первое, что нам нужно сделать, это разбить вашу форму на логические части. Если бы мы знали, что собираемся повторно использовать эту точную форму во многих разных местах, возможно, сама эта форма была бы логичной частью. В этом случае мы можем создать компонент, который будет визуализировать всю эту форму и привязать ее к бину типа «Контакт». Таким образом, в любое время, когда вам нужно было использовать форму, вы можете сбросить ее, привязать к компоненту Contact (как это будет зависеть от вашей структуры) и перейти оттуда. Но это сделало бы это довольно скучным примером. :)
Из моей оценки я вижу имя, дату рождения и адрес как три отдельные логические единицы. Имя, вероятно, будет простым. Просто стандартный ввод текста. Таким образом, мы можем использовать элемент h: inputText или предпочитаемую версию вашего фреймворка и связать его с полем имени вашего компонента.
Во-вторых, у нас есть дата рождения. В самом простом случае мы можем создать поле h: inputText и добавить элемент f: converter, чтобы при привязке его к компоненту получалась дата. Вы можете масштабировать это, чтобы быть полностью интерактивным виджетом календаря, в комплекте с Java Script, а что нет. Проверьте IceFaces и RichFaces для некоторых хороших примеров. Но остается та же основная концепция: один компонент, который вы привязываете к объекту даты.
В-третьих, у нас есть адрес. Это отличный выбор для компонента, потому что, скорее всего, вам нужно будет знать адреса на разных страницах. Это также намного сложнее, чем один вход. Вам нужно будет объединить несколько входов, проверок и забавных вещей ajaxy, чтобы создать единое целое. Однако разработчику, который его использует, будем надеяться,
<foo:address value="#{BarBean.address}"/>
возможно с парой других опций.
Это разделение проблем лежит в основе не только компонентного веб-дизайна, но и самого объектно-ориентированного программирования. Есть много инструментов, чтобы сделать это проще! Facelets - отличный пример. Вы можете разделить ваш базовый макет на отдельный лист, просто вставляя полезный контент через элементы ui: define. Вы можете создавать составные компоненты, которые позволяют быстро создавать более полезные компоненты, не углубляясь в каркас компонентов JSF; пример адреса будет очень просто сделать с компонентом композиции Facelets. IceFaces - еще один хороший пример. Он обрабатывает всевозможные вводы, перерисовки и обновления типа AJAXy, и мне не нужно беспокоиться о том, как все это работает (по большей части;), что позволяет мне сосредоточиться на том, что должна выполнить форма, а не на том, как выполнить форму.
Это только царапает поверхность, но самые широкие штрихи похожи на любую большую программу: определите самые маленькие, логические части и постройте их, прежде чем использовать их для создания больших частей.