+ working category selection

pom.xml

@@ -125,6 +125,28 @@
             <version>20180813</version>
         </dependency>
 
+        <dependency>
+            <groupId>javax.xml.bind</groupId>
+            <artifactId>jaxb-api</artifactId>
+            <version>2.2.11</version>
+        </dependency>
+        <dependency>
+            <groupId>com.sun.xml.bind</groupId>
+            <artifactId>jaxb-core</artifactId>
+            <version>2.2.11</version>
+        </dependency>
+        <dependency>
+            <groupId>com.sun.xml.bind</groupId>
+            <artifactId>jaxb-impl</artifactId>
+            <version>2.2.11</version>
+        </dependency>
+        <dependency>
+            <groupId>javax.activation</groupId>
+            <artifactId>activation</artifactId>
+            <version>1.1.1</version>
+        </dependency>
+
+
         <dependency>
             <groupId>org.mariadb.jdbc</groupId>
             <artifactId>mariadb-java-client</artifactId>

src/main/java/de/hsel/itech/jsf/BookBean.java

@@ -1,30 +1,28 @@
 package de.hsel.itech.jsf;
 
-import de.hsel.itech.db.Database;
 import de.hsel.itech.db.pojo.Author;
 import de.hsel.itech.db.pojo.Book;
+import lombok.Getter;
+import lombok.Setter;
 
 import javax.faces.bean.ManagedBean;
+import javax.faces.bean.ManagedProperty;
 import javax.faces.bean.ViewScoped;
 import java.util.ArrayList;
 import java.util.List;
 
-//JSF Bean for bookinfo
+@ManagedBean
-@ManagedBean(name="bookInfo")
 @ViewScoped
-public class BookInfo {
+public class BookBean {
+
+    @Getter
+    @Setter
+    @ManagedProperty("#{categoryBean.book}")
     private Book book;
 
-    public BookInfo(){
+    public String select() {
-        book = Database.getInstance().getBooks().get(2);
-    }
 
-    public Book getBook(){
+        return "/bookinfo.jsf";
-        return book;
-    }
-
-    public void setBook(Book book){
-        this.book = book;
     }
 
     public String getPrice(){

src/main/java/de/hsel/itech/jsf/CategoryBean.java

@@ -3,6 +3,8 @@ package de.hsel.itech.jsf;
 import de.hsel.itech.db.Database;
 import de.hsel.itech.db.pojo.Book;
 import de.hsel.itech.db.pojo.Category;
+import lombok.Getter;
+import lombok.Setter;
 
 import javax.faces.bean.ManagedBean;
 import javax.faces.bean.ViewScoped;
@@ -13,15 +15,21 @@ import java.util.List;
 @ViewScoped
 public class CategoryBean implements Serializable {
 
+    @Getter
+    @Setter
     private Category category;
 
-    public Category getCategory() {
+    @Getter
-        return category;
+    @Setter
+    private Book book;
+
+    public String select() {
+        return "";
     }
 
-    public void setCategory(Category category) {
+    public String back() {
-        this.category = category;
+        category = null;
-
+        return "";
     }
 
     public List<Category> getCategories() {

src/main/webapp/category.xhtml

@@ -5,23 +5,59 @@
         xmlns:h="http://xmlns.jcp.org/jsf/html"
         xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
         xmlns:f="http://xmlns.jcp.org/jsf/core">
-<h:head>
+<f:view>
-    <title>Amazon light</title>
-</h:head>
 
-<h:body>
+    <ui:composition template="template.xhtml">
 
+        <ui:define name="content">
+            <h:form>
+                <h:commandLink action="#{categoryBean.back}" value="zurück zur Auswahl"
+                               rendered="#{not empty categoryBean.category}"/>
 
+                <h:panelGroup layout="block" styleClass="m-row" rendered="#{empty categoryBean.category}">
+                    <h1 class="m-text-center">Kategorien</h1>
                     <ui:repeat value="#{categoryBean.categories}" var="category">
-        <h:outputText value="#{category.name}"/><br/>
+                        <div class="m-col-t-3">
+                            <h:commandLink action="#{categoryBean.select}">
+                                <figure class="m-figure">
+                                    <f:setPropertyActionListener target="#{categoryBean.category}" value="#{category}"/>
+                                    <h:graphicImage value="https://source.unsplash.com/#{category.image}/900x900"/>
+                                    <figcaption class="m-text-center">
+                                        #{category.name}
+                                    </figcaption>
+                                </figure>
+                            </h:commandLink>
+                        </div>
+                    </ui:repeat>
+                </h:panelGroup>
+
+                <h:panelGroup layout="block" styleClass="m-row" rendered="#{not empty categoryBean.category}">
+                    <h1 class="m-text-center">#{categoryBean.category.name}</h1>
+                    <!--<h:graphicImage value="https://source.unsplash.com/#{categoryBean.category.image}/100x100"/>-->
+
+                    <ui:repeat value="#{categoryBean.books}" var="book">
+                        <div class="m-col-t-3">
+                            <h:commandLink action="#{bookBean.select}">
+                                <figure class="m-figure">
+                                    <f:setPropertyActionListener target="#{categoryBean.book}" value="#{book}"/>
+                                    <h:graphicImage value="https://source.unsplash.com/#{book.image}/900x900"/>
+                                    <figcaption class="m-text-center">
+                                        #{book.title}
+                                    </figcaption>
+                                </figure>
+                            </h:commandLink>
+                        </div>
+
                     </ui:repeat>
 
+                </h:panelGroup>
+            </h:form>
 
-    <ui:repeat value="#{categoryBean.books}" var="book" rendered="not empty #{categoryBean.category}">
+
-        <h:outputText value="#{book.title}"/>
+        </ui:define>
-        <h:graphicImage value="https://source.unsplash.com/#{book.image}/150x150"/>
+
-        <br/>
+    </ui:composition>
-    </ui:repeat>
+
-</h:body>
+</f:view>
 
 </html>

src/main/webapp/template.xhtml

@@ -74,7 +74,9 @@
     </nav>
 </header>
 
-<ui:insert name="content"/>
+<div class="m-container">
+    <ui:insert name="content"/>
+</div>
 
 <footer>
     <nav>