构建能够产生优雅用户体验的JSF应用程序时的最佳实践

我正在为我的JSF应用程序使用PrimaFaces和Mojarra实现。当我组合应用程序时，我使用公司/应用程序徽标和primefaces小部件（小部件本身看起来很棒！），它们具有jQuery的外观和感觉。问题是，应用程序最终看起来非常相似，有点像框式外观——文本框、数据表等，其外观和感觉与html/css设计师/开发人员手工编码的应用程序相比是无与伦比的

---

当您开发企业JSF应用程序时，您使用哪些最佳实践来确保用户友好、美观的ui？

我不太确定您想要的是什么，但在开发速度和外观之间有一个折衷。也就是说，在我们的商店里，我们使用PrimeFaces，并且有开发人员让页面“工作”。然后，xhtml/css设计师会对页面和控件的外观进行清理。如果还没有，请查看样式部分。更改控件的外观有相当大的灵活性。当然，它们仍然是分层的、预定义的控件

编辑：可以使用css设置控件各个部分的样式。例如，我们在这里更改标题栏的外观：

.bottomViewItem .ui-panel-titlebar{ 
    background: none;
    border: none;
    box-shadow: none;
    padding: 5px;
    margin: 0.1em 16px 0.2em 0;
}

在这里，我们更改标题外观：

.bottomViewItem .ui-panel-titlebar span.ui-panel-title{
    color: #E27C4C !important;
    font-family: Rockwell, Georgia, Arial !important;
    font-size: 18px !important;
    margin: 0.1em 16px 0.2em 0;
    text-shadow: none;
}

---

让我举一个例子来帮助澄清。在我的例子中，我正在采取的一种做法是尽可能地减少或跳过小部件功能，以支持手工编码的html/css/jQuery。例如，不使用面板附带的标题，而是使用css对标题进行编码和设置样式。当你的开发者把它交给设计师的时候，我猜他们可能会添加一个很好的html/css样式组合。是的，我们的设计师正在添加一个很好的css。他们正在用css修改PF小部件，而不是替换功能。我用一个我们如何设计面板的例子来扩展我的答案。听起来你在用不同的方式做同样的事情。设置控件样式的优点是可以在应用程序中重新使用样式。这允许您自定义面板和面板标题的外观，并且仍然使用PF方面。如果您想在多个应用程序中应用相同的外观，您甚至可以创建一个主题jar文件，如PF文档末尾所述。