ICEfaces 1.8: Next Generation Enterprise Web Development

Hello all people interested in ICEfaces world. I've just read "ICEfaces 1.8: Next Generation Enterprise Web Development" and now I present in this post the most important notes that I have written about it. I hope this is useful for you.



Index

Chapter 1: Next Generation Java Development.
Chapter 2: Development Environment.
Chapter 3: User Interface Design.
Chapter 4: Components For Navigation and Layout.
Chapter 5: Components For Feedback and Behaviour.
Chapter 6: Components For Data Presentation and Multimedia.
Chapter 7: Components For Data Creation and Selection.
Chapter 8: User Interfaces Customization.
Chapter 9: Reusable Facelets Components.
Chapter 10: Push Technology.

Chapter 1: Next Generation Java Development

• ICEfaces
• Icesoft defines ICEfaces as an AJAX extension of JavaServer Faces.

Chapter 2: Development Environment

• JEE Development Stack
• AppFuse (or Edoras) + ICEfaces Support → ICEfusion → ICECube

• Spring Framework
• Dependency Injection
  • Spring beans instead of JSF beans → implements Backing Bean Concept
• Used in all layers
• Transaction Management & persistence
  • Hibernate → Object Relational Mapping → through annotations
• Spring Security
  • Protect Web Access → login, remember me, logout...
• Hibernate
• POJOs → managing persistence
• AppFuse framework → automated generation of hibernate artifacts during build process.
• Apache tomahawk
  • JSF components that extend JSF specification.
  • 100% compatible with the Sun JSF 1.1 Reference Implementation (RI / mojarra) or any other JSF 1.1 compatible implementation
  • For further information on compatibility between Tomahawk and other frameworks/libraries, please see the relevant wiki page

Chapter 3: User Interface Design.

• User Interfaces Design
• An important part of the user interface design is the page layout.
• web applications that mimic desktop behavior
• desktop metaphor in the Web context mixed with user habits based on the first decade of the Web
• shift your mind to components and events
• Software ergonomics
  • ISO standard 9241, Ergonomics of Human System Interaction (http://en.wikipedia.org/wiki/ISO_9241)? This standard describes how a system has to be designed to be human-engineered. The most important part of ISO 9241 for software developers is part 110, dialog principles,
  • Suitability for the task
  • Suitability for learning
  • Suitability for individualization
  • Conformity with user expectations
  • Self-descriptiveness
  • Controllability
  • Error tolerance
• The technical limitations that derive from your framework decisions can be additionally frustrating.
• Occam's razor: “everything should be made as simple as possible, but not simpler”.
• User interface design principles
  • Suitability for the task: the functionality of a web application seldom delivers what the user requires to fulfill his needs.
  • Self-descriptiveness: what is the context I am working in at the moment?, what is the next possible step?
  • Controllability: the user must be able to stop his/her work at any time. For example, for a lunch break or telephone call, without any disadvantages.
  • Conformity with user expectations: cultural background, similar socialization, use of words of the target language, standardization, single implementation for each context that is reused in different web pages.
  • Error tolerance: allow mishandling of the application. dialog boxes presenting corresponding error information.
  • Suitability for individualization: If you add more flexibility to the user interface, keep in mind that it becomes more complex. Finding the right balance is a process. So, do not stop with the first iteration.
  • Suitability for learning: the user chooses the trial and error process to learn a new application. For this, the application has to be intuitive in its usage.
• Interface Layout
  • The layout design: Defines the logical output sections of a web application.
  • The navigation design: Defines how to use the web application.
  • The skin design: Defines how a web application looks.
• Create drafts with a mockup tool
• The web page is separated into:
  • Header: a graphic that covers the complete section that is an integral part of brand recognition.
  • Main navigation: saving space.
  • Content: use dialogs with a caption. Content is used for everything that has to be presented to the use,
    • Forms to manipulate data of the backend; for example, for administration purposes.
    • Informational pages that show, for example, tables of data records for certain system objects.
    • More complex and interactive components that may allow a prompt result, such as a GoogleMap presentation.
  • Footer: status information, copyright, privacy policy, the terms of use, or a link to an about page.
• Facelets templating
  • Facelets templating is used to implement the layout design. It is officially a part of the JSF specification since release 2.0.
  • The page template
    • File | New | Other | Web | HTML Page → page-template.xhtml for File name → choose New ICEfaces Facelets.xhtml File (.xhtml).
    • Eclipse → Select File → Open with → Web Page Editor.
    • Tags introduced: <ui:insert name=””>, <ui:include src=””>
    • We need a reference to one of the ICEfaces default skins in the <head> tag to get a correct menu presentation.
  • Using the template
    • Including CSS, Javascript or FavIcon.
    • We need a reference to the page template so that the templating knows that it has to manage the page. As the page template defines the page structure, we no longer need a <head> tag definition.
    • Facelets has a look at the complete code base and matches pairs of corresponding name attribute definitions between <ui:insert name="..."> and <ui:define name="..."> tags.
    • <ui:insert name="..."> tag allows us to set defaults that are used if we do not definesomething for replacement.
    • <ui:composition template=””>, <ui:define>
• The templating in ICEfusion
  • Delivers a standardized templating based on experiences from productive development.
  • Maven 2 conventions
  • folder names follow the AppFuse conventions
  • The new tags are managed via a Facelets tag library. We use the icefusion namespace to reference the tags
  • <ui:component> tag describes where the code for a Facelets tag starts and stops. Everything outside this tag is ignored
  • With ICEfusion, we get a production-ready templating implementation that can be used for the creation of ICEcube. ICEcube can then be extended with the code examples from the chapters that follow.