所谓的「自订JSF元件」是一个概略的称呼，事实上，一个JSF元件包括了三个部份：Tag、Component 与Renderer。

　Tag即之前一直在使用的JSF标签，类似于HTML标签，JSF标签主要是方便网页设计人员进行版面配置与资料呈现的一种方式，实际的处理中，JSF标签的目的在于设定Component属性、设定验证器、设定资料绑定、设定方法绑定等等。

　Component的目的在于处理请求，当请求来到伺服端应用程式时，每一个Component都有机会根据自己的client id，从请求中取得属于自己的值，接着Component可以将这个值作处理，然后设定给绑定的bean。

　当请求来到Web应用程式时，HTTP中的字串内容可以转换为JSF元件所需的值，这个动作称之为解码（decode），相对的，将JSF 元件的值转换为HTTP字串资料并送至客户端，这个动作称之为编码（encode），Component可自己处理编码、解码的任务，也可以将之委托给 Renderer来处理。

　当您要自订Component时，您可以继承UIComonent或其相关的子类别，这要根据您实际要自订的元件而定，如果您要自订一个输出元件，可以继承UIOutput，如果要自订一个输入元件，则可以继承UIInput，每一个标准的JSF元件实际上都对应了一个 UIComponent的子类别，下图为一个大致的类别继承架构图：

　实际上要自订一个元件是复杂的一件工作，您首先要学会的是一个完整的自订元件流程，实际上要自订一个元件时，您可以参考一下网路上的一些成品，例如 Apache MyFaces http://myfaces.apache.org/ ，接下来后面的几个主题所要介绍的，将只是一个自订元件的简单流程。

　Renderer是一个可替换的元件，您的Component可以搭配不同的Renderer，而不用自行担任绘制回应或解码的动作，这会让您的Component可以重用，当您需要将回应从HTML转换为其它的媒介时（例如行动电话网路），则只要替换Renderer就可以了，这是一个好处，或者您可以简单的替换掉一个Renderer，就可以将原先简单的HTML回应，替换为有JavaScript功能的Renderer。

　当您开始接触自订元件时，您会开始接触到JSF的框架（Framework），也许有几个类别会是您经常接触的：

• javax.faces.component.UIComponent

　自订Component所要继承的父类别，但通常，您是继承其子类别，例如UIInput、UIOutput等等。

• javax.faces.webapp.UIComponentTag

　自订JSF标签所要继承的父类别，继承它可以帮您省去许多JSF标签处理的细节。

• javax.faces.context.FacesContext

　包括了JSF相关的请求资讯，您可以透过它取得请求物件或请求参数，或者是 javax.faces.application.Application物件。

• javax.faces.application.Application

　包括了一个应用程式所共享的资讯，像是locale、验证器、转换器等等，您可以透过一些 工厂方法 取得相关的资讯。