Advanced Web Technology - Java Server Faces

Transcription

1 Berne University of Applied Sciences Advanced Web Technology - Java Server Faces Dr. E. Benoist Bibliography: Mastering Java Server Faces B.Dudney et al. - Wiley November

2 Table of Contents Model View Controler and Java Server Faces Motivations 3/4 tier architecture MVC Swing Struts Jakarta Struts Java Server Faces Example: Hello Boss 2

3 Motivations Servlet Near to Java, but far away from design JSP Pure JSP (aka. Model 1): a spagetti of java and HTML Taglibs Pure XML files but a lot of incompatible libraries. Struts Widely used framework for developping web sites Developed by the Apache Fondation (jakarta project) Not usable with developping tools. Model View Controler and Java Server Faces: Motivations 3

4 Java Server Faces JSF is a standarized API Developed by a large consortium: People behind Jakarta Struts, Oracle Application Server, Sun Java Stuio, IBM WebSphere Studio,... Java delivers a Reference Implementation Web development with Swing ideas UI Component tree Possible to develop using tools. Model View Controler and Java Server Faces: Motivations 4

5 Three-tier JSF configuration Java Virtual Machine Browser HTML/HTTP JSP JSF Servlet Application Logic (POJO) JDBC Database (POJO= Plain old Java objects) Model View Controler and Java Server Faces: 3/4 tier architecture 5

6 Four-tier JSF configuration Single JVM Single JVM Browser HTML/ HTTP JSP JSF Servlet Event Handler Classes Application Logic EJB CMP or BMP Database Model View Controler and Java Server Faces: 3/4 tier architecture 6

7 MVC: Model View Controler An architecture for separating business logic from layout View part is the most volatil Has to be addapted when changing OS, firm,... Highly coupled applications are difficult to maintain MVC Pattern To have different representations of the same application To provide different look and feels for a user interface To reuse one or more user interface components independently of the application data. Model View Controler and Java Server Faces: MVC 7

8 Model View Controler Model Representation of application data (or state) And Functional logic It is the core of the application View Representations of application data This is the participant that a user directly interacts with Controler Processes user-driven events It may updatae the Model or direct manipulation of the View Model View Controler and Java Server Faces: MVC 8

9 Model View Controler (Cont.) Changes to data in the Model may require user interface components in the View to update themeselves Model The Controler may translate some user driven events to changes in model data User interface components in the view may request data from the Model Changes to the Model data may affect the behaviour of a Controler View Controler receives events resulting from user inferaction User driven events may require manipulation of the View (changing one or more interface components or creating new ones) Controler Model View Controler and Java Server Faces: MVC 9

10 Model 2: MVC for the web Request Controler Browser Servlet Updates Model Java Beans Forward Response View JSP XML HTML etc Displays (Model 1 = JSP handling almost everything: forms, logic, sessions variables,... ) Model View Controler and Java Server Faces: MVC 10

11 Swing Collapsed MVC Strategy Component Model View Controller UI Manager UI Delegate Model View Controler and Java Server Faces: Swing 11

12 Swing: Model I public class SimpleList extends JFrame { ArrayListListModel model; JList list; JScrollPane sp; public SimpleList() { java.util.list al = new ArrayList(); for(int i=0; i<items.length;i++){ al.add( item +i); } model = new ArrayListListModel(al); list = new JList(model); sp = new JScrollPane(list); Container contentpane = getcontentpane(); contentpane.setlayout(new FlowLayout()); contentpane.add(sp); model.add( test 11 ); model.add( test 12 ); } Model View Controler and Java Server Faces: Swing 12

13 Swing: Model II public static void main(string args[]) { SimpleList f = new SimpleList(); f.setdefaultcloseoperation(jframe.exit ON CLOSE); f.pack(); f.setvisible(true); f.model.add( test 13 ); f.model.add( test 14 ); f.model.add(1, New number 1 ); f.model.add(10, New number 10 ); } } Model View Controler and Java Server Faces: Swing 13

14 Swing: Change UI public class ACustomJButton extends JApplet { public void init() { // Define the original JButton JButton button = new JButton( Punch!!!, new ImageIcon( punch.gif ));... // Set new Button User Interface button.setui(new MyButtonUI()); // Add JButton into JApplet content pane Container contentpane = getcontentpane(); contentpane.setlayout(new FlowLayout()); contentpane.add(button); // Action listener button.addactionlistener(new ActionListener() { public void actionperformed(actionevent e) {... }}); } Model View Controler and Java Server Faces: Swing 14

15 Swing: Define UI for a Button private class MyButtonUI extends BasicButtonUI { private ImageIcon icon, scaledicon; // Install new Button UI public void installui(jcomponent comp) {...} // Define JComponent preferred Size public Dimension getpreferredsize(jcomponent comp) {...} // Checks if the mouse pointer is inside the JComponent public boolean contains(jcomponent comp, int x, int y) {...} // Customized paint method public void paint(graphics g, JComponent comp) {...} private void handlepressed(graphics g, JButton b) {...} private void handlerollover(graphics g, JButton b) {...} } Model View Controler and Java Server Faces: Swing 15

16 Struts Part of the Apache Software Fundation Used to be part of the Jakarta project (Together with Tomcat, Ant, Axis,... ) Now a Stand alone project (like log4j) action/page driven architecture To each page, correspond one action to be executed Forms are validated and passed to this action The action referes to which JSP has to be displayed Model View Controler and Java Server Faces: Struts 16

17 Jakarta Struts Request Response Controler STRUTS Model View resquest object response object session beans Business Logic Model View Controler and Java Server Faces: Jakarta Struts 17

18 Struts, How does it work? Request Response STRUTS Servlet strutsconfig.xml forward: OK=good.jsp Forward to "OK" ActionForm Validate input Action good.jsp Business Logic Session Beans Model View Controler and Java Server Faces: Jakarta Struts 18

19 Role of the different actors The controller is the Struts servlet Is already programmed Is declared in web.xml (application descriptor) Is configured in strutsconfig.xml The Model is played by java programs ActionForms classes parse and verify the input given to forms Action classes interact with the ActionForms and the business logic, The view part is done by JSPs They do not contain any scriptlet They contain special taglibs Model View Controler and Java Server Faces: Jakarta Struts 19

20 Java Server Faces Event / Component Framework Application contains a component tree Action Handlers and Event Listeners interract with these components JSF = Swing for the web Components are composable (a set of components can form one big component) Components are event-driven They can change their apparence to fit common look and feel Model View Controler and Java Server Faces: Java Server Faces 20

21 JSF Model-2 Request Faces Servlet Controler config Action Handlers & Event Listeners Response Component Tree Component Model Java Beans Delegates Converters Validators Renderers Business Objects EJB JDO JavaBeans/ JDBC View Resources Java Beans Propery Files XML Model Model View Controler and Java Server Faces: Java Server Faces 21

22 Example: Hello Boss One page for login, the user types username and password This is stored in a ManagedBean called LoginBean How does it work: display page login.jsp Populate to the bean LoginBean Execute method login() If the answer is success go to hello.jsp If the answer is failure go to login.jsp Model View Controler and Java Server Faces: Example: Hello Boss 22

23 LoginBean } public final class LoginBean{ private String password; private String userid; public String getpassword(){ return password; } public void setpassword(string s){ password=s; } public String getuserid(){ return userid; } public void setuserid(string u){ userid=u; } public String login(){ if((userid==null) (userid.length()<1)) return failure ; if ((password == null) (password.length()<1)) return failure ; UserSecurityService service = new UserSecurityService(); User user = service.login(userid,password); if(user == null) return failure ; return success ; } Model View Controler and Java Server Faces: Example: Hello Boss 23

24 faces-config.xml: Navigation Rule(s) <navigation rule> <from view id>/login.jsp</from view id> <navigation case> <from outcome>success</from outcome> <to view id>/home.jsp</to view id> </navigation case> <navigation case> <from outcome>failure</from outcome> <to view id>/login.jsp</to view id> </navigation case> </navigation rule> Model View Controler and Java Server Faces: Example: Hello Boss 24

25 faces-config.xml: Managed Bean <managed bean> <managed bean name>login</managed bean name> <managed bean class>ch.bfh.jsf.loginbean</managed bean cla <managed bean scope>request</managed bean scope> <managed property> <property name>userid</property name> <null value/> </managed property> <managed property> <property name>password</property name> <null value/> </managed property> </managed bean> Model View Controler and Java Server Faces: Example: Hello Boss 25

26 View: login.jsp <!doctype html public //w3c//dtd html 4.0 transitional//en > <html> <head> <title>login</title> taglib uri= prefix= f %> <%@ taglib uri= prefix= h %> </head> <body> Log in with your User ID and your password.<br/> <f:view> <h:form> <h:outputlabel for= userid > <h:outputtext value= User ID /> </h:outputlabel> <h:inputtext id= userid value= #{login.userid} /><br/> <h:outputlabel for= password > <h:outputtext value= password /> </h:outputlabel> <h:inputsecret id= password value= #{login.password} /><br/> <h:commandbutton action= #{login.login} value= Login /> </h:form> </f:view> </body></html> Model View Controler and Java Server Faces: Example: Hello Boss 26

27 View: home.jsp <html> <head> <title>welcome Home</title> taglib uri= prefix= f %> <%@ taglib uri= prefix= h %> </head> <body> <f:view> <h1>welcome Home <h:outputtext value= #{login.userid} /></h1> </f:view> </body> </html> Model View Controler and Java Server Faces: Example: Hello Boss 27

28 JSF is event driven Two types of events Value Changed (javax.faces.event.valuechangeevent) observes changes to the user interface component property Expanding a tree, changing the text of a field Action (javax.faces.event.actionevent) Observes the activation of a descendent of a UICommand buttons hyperlinks Example I: Value Changed listener on an input text field <h:inputtext id= userid value= #{login.userid} > <f:valuechangedlistener type= ch.bfh.jsf.userloginchanged <h:/inputtext> Example II: Action event listener on a command button <h:commandbutton id= login commandname= login > <f:actionlistener type= ch.bfh.jsf.loginactionlistener /> </h:commandbutton> Model View Controler and Java Server Faces: Example: Hello Boss 28

29 Java Server Faces Partialy page oriented JSF is a descendant of Struts Value returned and navigation rules Core: Event and Component driven JSF has the same parents than Swing and belongs to the same familly. Model View Controler and Java Server Faces: Example: Hello Boss 29