feat: make tabs bookmarkable by binding routes to them

Close #5

Author: paodb

src/main/java/com/flowingcode/vaadin/addons/demo/RouteTabs.java

@@ -0,0 +1,47 @@
+package com.flowingcode.vaadin.addons.demo;
+
+import java.util.LinkedHashMap;
+import java.util.Map;
+import java.util.Optional;
+import com.vaadin.flow.component.tabs.Tab;
+import com.vaadin.flow.component.tabs.Tabs;
+import com.vaadin.flow.router.BeforeEnterEvent;
+import com.vaadin.flow.router.BeforeEnterObserver;
+import com.vaadin.flow.router.HighlightConditions;
+import com.vaadin.flow.router.RouterLink;
+
+/**
+ * Extension of Tabs in order to allow to bind tabs with Routes.
+ * 
+ * @see https://cookbook.vaadin.com/tabs-with-routes/a
+ */
+public class RouteTabs extends Tabs implements BeforeEnterObserver {
+
+  private final Map<RouterLink, Tab> routerLinkTabMap = new LinkedHashMap<>();
+
+  public void add(RouterLink routerLink) {
+    routerLink.setHighlightCondition(HighlightConditions.sameLocation());
+    routerLink.setHighlightAction((link, shouldHighlight) -> {
+      if (shouldHighlight)
+        setSelectedTab(routerLinkTabMap.get(routerLink));
+    });
+    routerLinkTabMap.put(routerLink, new Tab(routerLink));
+    add(routerLinkTabMap.get(routerLink));
+  }
+
+  @Override
+  public void beforeEnter(BeforeEnterEvent event) {
+    // In case no tabs will match
+    setSelectedTab(null);
+  }
+
+  public Map<RouterLink, Tab> getRouterLinkTabMap() {
+    return routerLinkTabMap;
+  }
+
+  public RouterLink getFirstRoute() {
+    Optional<RouterLink> first =
+        routerLinkTabMap.entrySet().stream().map(Map.Entry::getKey).findFirst();
+    return first.isPresent() ? first.get() : null;
+  }
+}

src/main/java/com/flowingcode/vaadin/addons/demo/TabbedDemo.java

@@ -19,34 +19,35 @@
  */
 package com.flowingcode.vaadin.addons.demo;
 
+import java.util.Optional;
 import com.flowingcode.vaadin.addons.GithubLink;
 import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.HasElement;
 import com.vaadin.flow.component.checkbox.Checkbox;
 import com.vaadin.flow.component.dependency.StyleSheet;
+import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.component.splitlayout.SplitLayout.Orientation;
-import com.vaadin.flow.component.tabs.Tab;
-import com.vaadin.flow.component.tabs.Tabs;
+import com.vaadin.flow.router.BeforeEnterEvent;
+import com.vaadin.flow.router.BeforeEnterObserver;
 import com.vaadin.flow.router.PageTitle;
-import java.util.HashMap;
-import java.util.Map;
-import java.util.Optional;
+import com.vaadin.flow.router.Route;
+import com.vaadin.flow.router.RouterLayout;
+import com.vaadin.flow.router.RouterLink;
 
 @StyleSheet("context://frontend/styles/commons-demo/shared-styles.css")
 @SuppressWarnings("serial")
-public class TabbedDemo extends VerticalLayout {
+public class TabbedDemo extends VerticalLayout implements RouterLayout, BeforeEnterObserver {
 
-  private Tabs tabs;
+  private RouteTabs tabs;
   private HorizontalLayout footer;
   private SplitLayoutDemo currentLayout;
-  private Map<Tab, Component> demos;
   private Checkbox orientationCB;
   private Checkbox codeCB;
 
   public TabbedDemo() {
-    tabs = new Tabs();
-    demos = new HashMap<>();
+    tabs = new RouteTabs();
     tabs.setWidthFull();
 
     // Footer
@@ -68,22 +69,10 @@ public TabbedDemo() {
     footer.setWidthFull();
     footer.setJustifyContentMode(JustifyContentMode.END);
     footer.add(codeCB, orientationCB);
-
-    tabs.addSelectedChangeListener(
-        e -> {
-          removeAll();
-          Component currentDemo = demos.get(tabs.getSelectedTab());
-          this.add(tabs, currentDemo);
-          if (currentDemo instanceof SplitLayoutDemo) {
-            currentLayout = (SplitLayoutDemo) currentDemo;
-            this.add(footer);
-            updateSplitterPosition();
-            updateSplitterOrientation();
-          } else {
-            currentLayout = null;
-          }
-        });
-
+        
+    this.add(tabs);
+    this.add(new Div());
+    this.add(footer);
     setSizeFull();
   }
 
@@ -118,26 +107,60 @@ public void addDemo(Component demo) {
 
   /**
    * @param demo the demo instance
-   * @param name the demo name (tab label)
+   * @param label the demo name (tab label)
    * @param sourceCodeUrl the url of the demo, <b>null</b> to not show source code section.
    */
+  @Deprecated
   public void addDemo(Component demo, String label, String sourceCodeUrl) {
-    if (!demo.getId().isPresent()) {
-      demo.setId("content");
-    }
-    Tab tab = new Tab(label);
-    if (sourceCodeUrl != null) {
-      demos.put(tab, new SplitLayoutDemo(demo, sourceCodeUrl));
-    } else {
-      demos.put(tab, demo);
+    this.addDemo(demo.getClass(), label, sourceCodeUrl);
+  }
+
+  public void addDemo(Class<? extends Component> clazz, String label, String sourceCodeUrl){   
+    if(!clazz.isAnnotationPresent(Route.class)) {
+      throw new IllegalArgumentException(clazz + " must be annotated as Route");
     }
+    RouterLink tab = new RouterLink(label, clazz);
     tabs.add(tab);
   }
 
   public void addDemo(Component demo, String label) {
     addDemo(demo, label, null);
   }
 
+  @Override
+  public void showRouterLayoutContent(HasElement content) {
+    Component demo = (Component)content;
+    if (!demo.getId().isPresent()) {
+      demo.setId("content");
+    }
+
+    DemoSource demoSource = demo.getClass().getAnnotation(DemoSource.class);
+    String sourceCodeUrl = null;
+    if (demoSource != null) {
+      sourceCodeUrl = demoSource.value();
+      if (sourceCodeUrl.equals(DemoSource.GITHUB_SOURCE)) {
+        sourceCodeUrl = Optional.ofNullable(this.getClass().getAnnotation(GithubLink.class))
+            .map(githubLink -> githubLink.value() + "/blob/master/src/test/java/"
+                + demo.getClass().getName().replace('.', '/') + ".java")
+            .orElse(null);
+      }
+      content = new SplitLayoutDemo(demo, sourceCodeUrl);
+      currentLayout = (SplitLayoutDemo) content;
+      updateSplitterPosition();
+      updateSplitterOrientation();
+      this.footer.setVisible(true);
+    } else {
+      currentLayout = null;
+      this.footer.setVisible(false);
+    }    
+    this.getElement().insertChild(1, content.getElement());
+  }
+  
+  @Override
+  public void removeRouterLayoutContent(HasElement oldContent) {
+    this.getElement().removeChild(1);
+  }
+  
   private void updateSplitterPosition() {
     boolean b = codeCB.getValue();
     if (b) {
@@ -157,4 +180,15 @@ private void updateSplitterOrientation() {
       currentLayout.setOrientation(Orientation.VERTICAL);
     }
   }
+
+  @Override
+  public void beforeEnter(BeforeEnterEvent event) {
+    if(TabbedDemo.class.isAssignableFrom(event.getNavigationTarget())) {
+      RouterLink first = tabs.getFirstRoute();
+      if(first != null) {
+        event.forwardTo(first.getHref()); 
+      }       
+    }
+  }
+ 
 }

src/test/java/com/flowingcode/vaadin/addons/demo/Demo.java

@@ -20,34 +20,16 @@
 package com.flowingcode.vaadin.addons.demo;
 
 import com.flowingcode.vaadin.addons.GithubLink;
-import com.vaadin.flow.component.orderedlayout.VerticalLayout;
-import com.vaadin.flow.component.textfield.TextField;
 import com.vaadin.flow.router.Route;
+import com.vaadin.flow.router.RouteAlias;
 
 /** Hello world! */
 @Route("")
+@RouteAlias("demo")
 @GithubLink("https://github.com/FlowingCode/CommonsDemo")
 public class Demo extends TabbedDemo {
 
   public Demo() {
-    final String sourceCodeUrl =
-        "https://github.com/FlowingCode/CommonsDemo/blob/master/src/test/java/com/flowingcode/vaadin/addons/demo/Demo.java";
-    VerticalLayout vl = new VerticalLayout();
-    VerticalLayout vl2 = new VerticalLayout();
-    VerticalLayout vl3 = new VerticalLayout();
-    vl.setSizeFull();
-    vl.add(new TextField("Hello"));
-
-    addDemo(vl, "Demo 1", sourceCodeUrl);
-
-    vl2.add(new TextField("Hi"));
-    addDemo(vl2, "Demo 2", sourceCodeUrl);
-
-    TextField tf = new TextField("Demo Without Source Code");
-    tf.setWidthFull();
-    vl3.add(tf);
-    addDemo(vl3, "Demo Without Source Code");
-
     addDemo(new SampleDemo());
     addDemo(new SampleDemoDefault());
   }

src/test/java/com/flowingcode/vaadin/addons/demo/SampleDemo.java

@@ -22,9 +22,10 @@
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
 
+@Route(value = "demo/demo4", layout = Demo.class)
 @PageTitle("Demo 4")
-@DemoSource("https://github.com/FlowingCode/CommonsDemo/blob/master/src/test/java/com/flowingcode/vaadin/addons/demo/SampleDemo.java")
 public class SampleDemo extends Div {
 
   public SampleDemo() {

src/test/java/com/flowingcode/vaadin/addons/demo/SampleDemoDefault.java

@@ -22,7 +22,9 @@
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
 
+@Route(value = "demo/demo5", layout = Demo.class)
 @PageTitle("Demo 5")
 @DemoSource
 public class SampleDemoDefault extends Div {