Wzorce prezentacji internetowych

Wzorce prezentacji internetowych 1. Model kontrolera widoku (Model View Controller). 2. Kontroler strony (Page Controller). 3. Kontroler fasady (Front Controller). 4. Szablon widoku (Template View). 5. Widok przekształcający (Transform View). 6. Widok dwuetapowy (Two Step View) 7. Kontroler aplikacji (Application Controller). 1

Model View Controller Kontroler Widok Model Obsługa interfejsu użytkownika jest rozdzielona między trzy odrębne elementy (role). 2

Model View Controller Model obiekt reprezentujący dziedzinę. Posiada wszystkie dane i udostępnia operacje nie związane z obsługą interfejsu użytkownika. Widok prezentacja modelu (danych) poprzez interfejs użytkownika. Kontroler odpowiada za interakcje z użytkownikiem pobiera dane i na ich podstawie modyfikuje model. Kluczową kwestią w tym wzorcu projektowym jest rozdzielenie danych od ich prezentacji. Rozdział pomiędzy widokiem a kontrolerem jest wyraźny jedynie w przypadku interfejsu WWW. 3

Page Controller Kontroler strony Widok Model Kontroler strony obsługuje żądania kierowane do konkretnej strony lub funkcji udostępnianej przez serwis internetowy. 4

Page Controller W ramach tego wzorca tworzony jest osobny kontroler dla każdej strony internetowej. Kontroler strony może być zaimplementowany zarówno w formie skryptu (np. cgi, serwlet) jak i strony (JSP, PHP, ASP, itp.). Podstawowe obowiązki kontrolera strony to: dekodowanie adresu URL i pobieranie przesłanych informacji (GET, POST, Cookies, Sessions), utworzenie i wywołanie wszelkich obiektów modelu niezbędnych do przetworzenia danych, Wybór widoku i przekazanie mu wszelkich, uprzednio przygotowanych operacji. 5

Page Controller class BasketController...{ public init(httpservletrequest request){ Basket b = null; try{ bid = Integer.parseInt(request.getParameter("bid")); b = BasketHelper.findOrCreate(bid); catch(nullpointerexception ex){ b = BasketHelper.createNew(); request.setattribute("basket", b); public doget(httpservletrequest request, HttpServletResponse response) throws IOException, ServletException this.init(request); RequestDispatcher dispatcher = this.getservletcontext(). getrequestdispatcher("basket.jsp"); dispatcher.forward(request, response); 6

Page Controller Kontrolerem może być tez strona JSP, która następnie wyświetli przygotowany wynik. W takim przypadku zwykle przygotowanie danych powierza się klasom pomocniczym, aby nadmiernie nie komplikować scriptlet'ów umieszczonych w kodzie strony. <jsp:usebean id="helper" class="controller.basketcontroller" /> <% helper.init(request); %> Bardziej eleganckim rozwiązaniem jest implementacja własnego tagu. <helper:init name="controller.basketcontroller" /> 7

Page Controller public class HelperTag extends TagSupport{ public static final String HELPER = "helper"; protected Object getproperty(string s) throws JspException{ Object helper = this.gethelper(); try{ Method m = helper.getclass(). getmethod(this.getter(s), null); return m.invoke(helper, null); catch(exception ex){ throw new JspException("..."); private String getter(string s) { return "get"+s.substring(0, 1).toUpperCase()+ s.substring(1); private Object gethelper() throws JspException { Object helper = this.pagecontext.getattribute(helper); if (helper==null) throw new JspException("..."); return helper; 8

Page Controller class HelperInitTag extends HelperTag{ private String sclass; public void setname(string s){ this.sclass = s; @Override public int dostarttag() throws JspException { HelperController helper = null; try { helper = (HelperController) Class.forName(this.sClass).newInstance(); catch (Exception ex) { throw new ApplicationException("..."); this.inithelper(helper); this.pagecontext.setattribute(helper, helper); return SKIP_BODY; 9

Page Controller private void inithelper(helpercontroller helper){ HttpServletRequest request = (HttpServletRequest) this.pagecontext.getrequest(); HttpServletResponse response = (HttpServletResponse) this.pagecontext.getresponse(); helper.init(request, response); Wszystkie własne tagi muszą być zadeklarowane w odpowiednim deskryptorze tld (Tag Library Descriptor). W kodzie strony musi znaleźć się też odpowiednia dyrektywa, np. <%@ taglib uri="/web-inf/tlds/helpertags.tld" prefix="helper" %> 10

Page Controller class HelperGetTag extends HelperTag{ private String sproperty; public void setproperty(string s){ this.sproperty = s; public int dostarttag() throws JspException{ try { this.pagecontext.getout(). print(this.getproperty(sproperty)); catch (IOException e) { throw new JspException("..."); return SKIP_BODY; Przy okazji definiujemy tag wyświetlający własności. <helper:get property="total" /> 11

Front Controller Kontroler fasady Akcja abstrakcyjna doget() dopost() Akcja 1 Akcja 2 Akcja 3 Kontroler fasady obsługuje wszystkie żądania kierowane do serwisu. Po analizie parametrów wejściowych wywoływane są odpowiednie polecenia. 12

Front Controller Zalety w stosunku do Page Controller: prostsza konfiguracja serwera WWW. Dodawanie nowych akcji nie wymaga zmian w konfiguracji, obiekty akcji są tworzone niezależnie dla każdego żądania brak problemów z wielowątkowością, chyba że inne obiekty (np. obiekty dziedziny) są współdzielone, naturalna realizacja kodu wspólnego, który byłby realizowany przez wszystkie kontrolery stron (np. obsługa błędów, autoryzacji, itp.), łatwa rozbudowa dzięki dekoratorom (wzorzec Intercepting Filter). 13

Front Controller W poniższym przykładzie kontroler fasady tworzy obiekt command na podstawie danych zawartych w żądaniu a następnie przekierowuje do niego sterowanie. public class FrontServlet extends HttpServlet{ public void doget(httpservletrequest request, HttpServletResponse response) throws IOException, ServletException{ FrontCommand command = this.getcommand(request); command.init(this.getservletcontext(), request, response); command.process(); 14

Front Controller private FrontCommand getcommand(httpservletrequest request) throws ApplicationException{ Class c; String sclass = "frontcontroller." + request.getparameter("command") + "Command"; try { c = Class.forName(sClass); catch (ClassNotFoundException e) { c = UnknownCommand.class; try { return (FrontCommand)c.newInstance(); catch (Exception ex) { throw new ApplicationException("..."); 15

Front Controller public abstract class FrontCommand { protected ServletContext context; protected HttpServletRequest request; protected HttpServletResponse response; public void init(servletcontext ctx, HttpServletRequest req, HttpServletResponse res){ this.context = ctx; this.request = req; this.response = res; abstract public void process() throws ServletException, IOException; protected void forward(string s) throws ServletException, IOException { RequestDispatcher dispatcher = this.context. getrequestdispatcher(s); dispatcher.forward(this.request, this.response); 16

Front Controller class BasketCommand extends FrontCommand{ @Override public void process() throws ServletException, IOException { Basket b = null; try{ int bid = Integer.parseInt( request.getparameter("bid")); b = BasketHelper.findOrCreate(bid); catch(exception ex){ b = BasketHelper.createNew(); request.setattribute("basket", b); this.forward("/basket.jsp"); class UnknownCommand extends FrontCommand{ @Override public void process() throws ServletException, IOException { this.forward("/unknown.jsp"); 17

Template View Dynamiczna strona HTML jest projektowana tak jakby była stroną statyczną. Dodatkowe informacje, generowane na podstawie żądania klienta są umieszczone w kodzie HTML dzięki specjalnym znacznikom. Tak przygotowany szablon jest przetwarzany w trakcie przygotowania odpowiedzi przez serwer. Znaczniki zostają wtedy zastąpione wynikami obliczeń, informacjami pobranymi z bazy danych, itp. Wzorzec ten jest stosowany przez wiele różnych narzędzi (PHP, JSP, ASP,...), dlatego w praktyce nie istnieje potrzeba jego implementacji a jedynie umiejętnego wykorzystania. Podstawowa zaleta szablonów to brak wymagań dotyczących znajomości języka programowania przez osoby projektujące interfejs HTML. 18

Template View Wskazówki dotyczące korzystania ze wzorca Template View: nie stosujemy scriptletów prowadzi to do wymieszania logiki aplikacji z widokiem. W razie potrzeby należy stosować obiekty pomocnicze, unikamy wyrażeń warunkowych: <if "isbestseller"><b></if> <property name="price"> <if "isbestseller"></b></if> w miarę możliwości zastępujemy przez: <condition "isbestseller" decoration="bold"> <property name="price"> </condition> 19

Transform View Model przekształcenie HTML Widok jest tworzony poprzez przekształcenie obiektu dziedziny w dokument HTML. Najczęściej model reprezentuje się w formie XML'a przekształcanego za pomocą XSLT. 20

Transform View Wybór pomiędzy Template View a Transform View jest uwarunkowany preferencjami programistów oraz dostępnością narzędzi. Podstawowe zalety Transform View: niezależność od platformy (technologii) internetowej, naturalna współpraca z danymi w formacie XML, brak logiki aplikacji w widoku, łatwiejsze testowanie niż Template View (nie potrzeba serwera www). Problemy: trudno zmienić ogólny wygląd strony. 21

Two Step View Model przekształcenie 1 HTML Ekran logiczny przekształcenie 2 Widok dwuetapowy tworzy kod HTML w dwóch krokach. W pierwszym, na podstawie obiektów dziedziny tworzony jest logiczny obraz strony, który następnie jest przetwarzany do dokumentu HTML. 22

Two Step View Widok dwuetapowy ułatwia globalną zmianę wszystkich stron w serwisie internetowym. Najczęstsze implementacje: podwójne przekształcenie XSLT. Pierwsze tworzy dokument XML opisujący stronę, drugie generuje kod HTML. opis logicznej strony przez zbiór klas, która następnie jest przekształcana do HTML'a (w calości bądź poprzez przekształcenia każdej z klas składowych), logiczny ekran opisany poprzez wzorzec Template View nie zawierający znaczników HTML (zwykle prowadzi to do dokumentu w formacie XML). Przekształcenia szablonu prowadzą do strony HTML. 23

Application Controller Kontroler aplikacji ma na celu zcentralizowanie zarządzania dostępnymi kontrolerami i widokami. Wzorzec ten jest wykorzystywany, gdy chcemy implementować logikę aplikacji polegającą na prezentacji sekwencji stron www prowadzącej do zrealizowania określonego celu. (np. złożenie zamówienia, ankieta, test, wypełnianie zaawansowanych formularzy, itp.) 24

Application Controller class FrontServlet... public void service(httpservletrequest request, HttpServletResponse response){ ApplicationController controller = this.getapplicationcontroller(request); String scommand = request.getparameter("command"); DomainCommand com = controller.getdomaincommand(scommand, request.getparametermap()); com.run(request.getparametermap()); String sview = "/" + controller.getview(scommand, request.getparametermap()) + ".jsp"; this.forward(sview, request, response); 25

Podsumowanie Zaprezentowane wzorce przedstawiają najczęstsze metody projektowania warstwy prezentacji internetowych. Jedną z istotnych cech przedstawionych wzorców jest to, że można je stosować równolegle. Umożliwia to elastyczne dostosowanie rozwiązań informatycznych do potrzeb poszczególnych modułów aplikacji internetowych. 26