Merge with Charles changes, move to grid system (http://grids.heroku.com/), first try to add widgets

git-svn-id: https://svn.apache.org/repos/asf/karaf/sandbox/pieber/karaf-webconsole/trunk@1157160 13f79535-47bb-0310-9956-ffa450edef68
diff --git a/core/src/main/java/org/apache/karaf/webconsole/core/BasePage.java b/core/src/main/java/org/apache/karaf/webconsole/core/BasePage.java
index 60e4f92..d15c0b5 100644
--- a/core/src/main/java/org/apache/karaf/webconsole/core/BasePage.java
+++ b/core/src/main/java/org/apache/karaf/webconsole/core/BasePage.java
@@ -1,23 +1,16 @@
 package org.apache.karaf.webconsole.core;
 
+import java.util.Collections;
+import java.util.List;
+
 import org.apache.wicket.ResourceReference;
-import org.apache.wicket.extensions.markup.html.tabs.AbstractTab;
-import org.apache.wicket.extensions.markup.html.tabs.TabbedPanel;
 import org.apache.wicket.markup.html.CSSPackageResource;
 import org.apache.wicket.markup.html.WebPage;
 import org.apache.wicket.markup.html.basic.Label;
 import org.apache.wicket.markup.html.image.Image;
-import org.apache.wicket.markup.html.link.PageLink;
-import org.apache.wicket.markup.html.list.ListItem;
-import org.apache.wicket.markup.html.list.ListView;
-import org.apache.wicket.markup.html.panel.Panel;
-import org.apache.wicket.model.Model;
+import org.apache.wicket.model.util.ListModel;
 import org.ops4j.pax.wicket.api.PaxWicketBean;
 
-import java.util.ArrayList;
-import java.util.LinkedList;
-import java.util.List;
-
 public class BasePage extends WebPage {
 
     @PaxWicketBean(name = "tabs")
@@ -25,49 +18,12 @@
 
     public BasePage() {
         add(CSSPackageResource.getHeaderContribution(BasePage.class, "style.css"));
+        add(CSSPackageResource.getHeaderContribution(BasePage.class, "grid.css"));
 
         add(new Label("footer", "Apache Karaf Console"));
 
-        add(new Image("karafLogo", new ResourceReference(BasePage.class,"images/karaf-logo.png")));
+        add(new Image("karafLogo", new ResourceReference(BasePage.class, "images/karaf-logo.png")));
 
-        add(new ListView<ConsoleTab>("tabs", tabs) {
-            @Override
-            protected void populateItem(ListItem<ConsoleTab> item) {
-                final ConsoleTab tab = item.getModelObject();
-                item.add(new PageLink("moduleLink", tab.getModuleHomePage()).add(new Label("moduleLabel", tab.getLabel())));
-
-                List<String> subItems = new LinkedList<String>(tab.getItems().keySet());
-                item.add(new ListView<String>("topLinks", subItems) {
-                    @Override
-                    protected void populateItem(ListItem<String> item) {
-                        String subItem = item.getModelObject();
-                        item.add(new PageLink("topLink", tab.getItems().get(subItem)).add(new Label("linkLabel", subItem)));
-                    }
-                });
-            }
-        });
-
-        List tabPanels = new ArrayList();
-        tabPanels.add(new AbstractTab(new Model("first tab")) {
-            public Panel getPanel(String panelId) {
-                return new TabPanel1(panelId);
-            }
-        });
-
-        add(new TabbedPanel("tabPanels", tabPanels));
-
-    }
-
-
-    }
-
-    class TabPanel1 extends Panel {
-        public TabPanel1(String id) {
-            super(id);
-        }
-    }
-
-        /*
         add(new NavigationPanel("navigationPanel", new ListModel<ConsoleTab>(tabs)));
 
         List<Class> subPages = getSubPages();
@@ -76,14 +32,10 @@
         } else {
             add(new Label("sidebar").setRenderBodyOnly(true));
         }
-
+    }
 
     protected List<Class> getSubPages() {
         return Collections.emptyList();
     }
 
-        */
-
-
-
 }
diff --git a/core/src/main/java/org/apache/karaf/webconsole/core/DashboardWidget.java b/core/src/main/java/org/apache/karaf/webconsole/core/DashboardWidget.java
new file mode 100644
index 0000000..9961ec2
--- /dev/null
+++ b/core/src/main/java/org/apache/karaf/webconsole/core/DashboardWidget.java
@@ -0,0 +1,9 @@
+package org.apache.karaf.webconsole.core;
+
+import org.apache.wicket.markup.html.panel.Panel;
+
+public interface DashboardWidget {
+
+    Panel getWidgetPanel();
+
+}
diff --git a/core/src/main/java/org/apache/karaf/webconsole/core/internal/DashboardPage.java b/core/src/main/java/org/apache/karaf/webconsole/core/internal/DashboardPage.java
index 8e955a3..adc3e3a 100644
--- a/core/src/main/java/org/apache/karaf/webconsole/core/internal/DashboardPage.java
+++ b/core/src/main/java/org/apache/karaf/webconsole/core/internal/DashboardPage.java
@@ -1,11 +1,22 @@
 package org.apache.karaf.webconsole.core.internal;
 
+import java.util.List;
+
 import org.apache.karaf.webconsole.core.BasePage;
+import org.apache.karaf.webconsole.core.DashboardWidget;
+import org.ops4j.pax.wicket.api.PaxWicketBean;
 
 public class DashboardPage extends BasePage {
 
+    @PaxWicketBean(name = "widgets")
+    private List<DashboardWidget> widgets;
+
 	public DashboardPage() {
-		
+
+	    for (DashboardWidget widget : widgets) {
+	        add(widget.getWidgetPanel());
+	    }
+
 	}
 
 }
diff --git a/core/src/main/resources/OSGI-INF/blueprint/wicket.xml b/core/src/main/resources/OSGI-INF/blueprint/wicket.xml
index c26402e..a730cf3 100644
--- a/core/src/main/resources/OSGI-INF/blueprint/wicket.xml
+++ b/core/src/main/resources/OSGI-INF/blueprint/wicket.xml
@@ -6,6 +6,9 @@
 
   <reference-list id="tabs" interface="org.apache.karaf.webconsole.core.ConsoleTab" availability="optional" />
 
+  <!-- He is not ready yet ... -->
+  <reference-list id="widgets" interface="org.apache.karaf.webconsole.core.DashboardWidget" availability="optional" />
+
   <service auto-export="interfaces">
     <bean class="org.apache.karaf.webconsole.core.internal.SystemConsoleTab" />
   </service>
diff --git a/core/src/main/resources/org/apache/karaf/webconsole/core/BasePage.html b/core/src/main/resources/org/apache/karaf/webconsole/core/BasePage.html
deleted file mode 100644
index c51e7bd..0000000
--- a/core/src/main/resources/org/apache/karaf/webconsole/core/BasePage.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <title>Karaf wicket console</title>
-</head>
-
-<body>
-    <div id="container">
-        <table>
-            <tr>
-                <td align="left"><img wicket:id="karafLogo" alt="karaf-logo" height="70" width="150"/></td>
-                <td align="right">Administration console</td>
-            </tr>
-            <!--
-            <tr>
-            <div wicket:id="navigationPanel">Navigation goes here</div>
-            <div wicket:id="sidebar">Sidebar goes here</div>
-            </tr>
-            -->
-            <tr>
-                <td colspan="2">
-                    <div wicket:id="tabPanels" class="tabpanel">[tabbed panel will be here]</div>
-
-                    <div id="topmenu">
-                        <ul>
-                            <li wicket:id="tabs">
-                                <a wicket:id="moduleLink">
-                                    <span wicket:id="moduleLabel">Category</span>
-                                </a>
-
-                                <ul>
-                                    <li wicket:id="topLinks">
-                                        <a wicket:id="topLink">
-                                            <span wicket:id="linkLabel">Label</span>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td colspan="2">
-                    <div id="content">
-                        <wicket:child/>
-                    </div>
-                </td>
-            </tr>
-            <tr>
-                <td colspan="2">&nbsp</td>
-            </tr>
-            <tr>
-                <td colspan="2">
-                    <div id="footer" align="right">
-                        <div wicket:id="footer">Footer</div>
-                    </div>
-                 </td>
-            </tr>
-        </table>
-    </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/core/src/main/resources/org/apache/karaf/webconsole/core/grid.css b/core/src/main/resources/org/apache/karaf/webconsole/core/grid.css
new file mode 100644
index 0000000..62f81c6
--- /dev/null
+++ b/core/src/main/resources/org/apache/karaf/webconsole/core/grid.css
@@ -0,0 +1,343 @@
+/*
+    Variable Grid System (Fluid Version).
+    Learn more ~ http://www.spry-soft.com/grids/
+    Based on 960 Grid System - http://960.gs/ & 960 Fluid - http://www.designinfluences.com/
+
+    Licensed under GPL and MIT.
+*/
+
+
+/* Containers
+----------------------------------------------------------------------------------------------------*/
+.container_12 {
+    width: 92%;
+    margin-left: 4%;
+    margin-right: 4%;
+}
+
+/* Grid >> Global
+----------------------------------------------------------------------------------------------------*/
+
+.grid_1,
+.grid_2,
+.grid_3,
+.grid_4,
+.grid_5,
+.grid_6,
+.grid_7,
+.grid_8,
+.grid_9,
+.grid_10,
+.grid_11,
+.grid_12 {
+    display:inline;
+    float: left;
+    position: relative;
+    margin-left: 1%;
+    margin-right: 1%;
+}
+
+/* Grid >> Children (Alpha ~ First, Omega ~ Last)
+----------------------------------------------------------------------------------------------------*/
+
+.alpha {
+    margin-left: 0;
+}
+
+.omega {
+    margin-right: 0;
+}
+
+/* Grid >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+
+.container_12 .grid_1 {
+    width:6.333%;
+}
+
+.container_12 .grid_2 {
+    width:14.667%;
+}
+
+.container_12 .grid_3 {
+    width:23.0%;
+}
+
+.container_12 .grid_4 {
+    width:31.333%;
+}
+
+.container_12 .grid_5 {
+    width:39.667%;
+}
+
+.container_12 .grid_6 {
+    width:48.0%;
+}
+
+.container_12 .grid_7 {
+    width:56.333%;
+}
+
+.container_12 .grid_8 {
+    width:64.667%;
+}
+
+.container_12 .grid_9 {
+    width:73.0%;
+}
+
+.container_12 .grid_10 {
+    width:81.333%;
+}
+
+.container_12 .grid_11 {
+    width:89.667%;
+}
+
+.container_12 .grid_12 {
+    width:98.0%;
+}
+
+
+
+/* Prefix Extra Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+
+.container_12 .prefix_1 {
+    padding-left:8.333%;
+}
+
+.container_12 .prefix_2 {
+    padding-left:16.667%;
+}
+
+.container_12 .prefix_3 {
+    padding-left:25.0%;
+}
+
+.container_12 .prefix_4 {
+    padding-left:33.333%;
+}
+
+.container_12 .prefix_5 {
+    padding-left:41.667%;
+}
+
+.container_12 .prefix_6 {
+    padding-left:50.0%;
+}
+
+.container_12 .prefix_7 {
+    padding-left:58.333%;
+}
+
+.container_12 .prefix_8 {
+    padding-left:66.667%;
+}
+
+.container_12 .prefix_9 {
+    padding-left:75.0%;
+}
+
+.container_12 .prefix_10 {
+    padding-left:83.333%;
+}
+
+.container_12 .prefix_11 {
+    padding-left:91.667%;
+}
+
+
+
+/* Suffix Extra Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+
+.container_12 .suffix_1 {
+    padding-right:8.333%;
+}
+
+.container_12 .suffix_2 {
+    padding-right:16.667%;
+}
+
+.container_12 .suffix_3 {
+    padding-right:25.0%;
+}
+
+.container_12 .suffix_4 {
+    padding-right:33.333%;
+}
+
+.container_12 .suffix_5 {
+    padding-right:41.667%;
+}
+
+.container_12 .suffix_6 {
+    padding-right:50.0%;
+}
+
+.container_12 .suffix_7 {
+    padding-right:58.333%;
+}
+
+.container_12 .suffix_8 {
+    padding-right:66.667%;
+}
+
+.container_12 .suffix_9 {
+    padding-right:75.0%;
+}
+
+.container_12 .suffix_10 {
+    padding-right:83.333%;
+}
+
+.container_12 .suffix_11 {
+    padding-right:91.667%;
+}
+
+
+
+/* Push Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+
+.container_12 .push_1 {
+    left:8.333%;
+}
+
+.container_12 .push_2 {
+    left:16.667%;
+}
+
+.container_12 .push_3 {
+    left:25.0%;
+}
+
+.container_12 .push_4 {
+    left:33.333%;
+}
+
+.container_12 .push_5 {
+    left:41.667%;
+}
+
+.container_12 .push_6 {
+    left:50.0%;
+}
+
+.container_12 .push_7 {
+    left:58.333%;
+}
+
+.container_12 .push_8 {
+    left:66.667%;
+}
+
+.container_12 .push_9 {
+    left:75.0%;
+}
+
+.container_12 .push_10 {
+    left:83.333%;
+}
+
+.container_12 .push_11 {
+    left:91.667%;
+}
+
+
+
+/* Pull Space >> 12 Columns
+----------------------------------------------------------------------------------------------------*/
+
+
+.container_12 .pull_1 {
+    left:-8.333%;
+}
+
+.container_12 .pull_2 {
+    left:-16.667%;
+}
+
+.container_12 .pull_3 {
+    left:-25.0%;
+}
+
+.container_12 .pull_4 {
+    left:-33.333%;
+}
+
+.container_12 .pull_5 {
+    left:-41.667%;
+}
+
+.container_12 .pull_6 {
+    left:-50.0%;
+}
+
+.container_12 .pull_7 {
+    left:-58.333%;
+}
+
+.container_12 .pull_8 {
+    left:-66.667%;
+}
+
+.container_12 .pull_9 {
+    left:-75.0%;
+}
+
+.container_12 .pull_10 {
+    left:-83.333%;
+}
+
+.container_12 .pull_11 {
+    left:-91.667%;
+}
+
+
+
+
+/* Clear Floated Elements
+----------------------------------------------------------------------------------------------------*/
+
+/* http://sonspring.com/journal/clearing-floats */
+
+.clear {
+    clear: both;
+    display: block;
+    overflow: hidden;
+    visibility: hidden;
+    width: 0;
+    height: 0;
+}
+
+/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
+
+.clearfix:after {
+    clear: both;
+    content: ' ';
+    display: block;
+    font-size: 0;
+    line-height: 0;
+    visibility: hidden;
+    width: 0;
+    height: 0;
+}
+
+.clearfix {
+    display: inline-block;
+}
+
+* html .clearfix {
+    height: 1%;
+}
+
+.clearfix {
+    display: block;
+}
\ No newline at end of file
diff --git a/core/src/main/resources/org/apache/karaf/webconsole/core/internal/DashboardPage.html b/core/src/main/resources/org/apache/karaf/webconsole/core/internal/DashboardPage.html
index a6f4868..12d7e3e 100644
--- a/core/src/main/resources/org/apache/karaf/webconsole/core/internal/DashboardPage.html
+++ b/core/src/main/resources/org/apache/karaf/webconsole/core/internal/DashboardPage.html
@@ -7,7 +7,68 @@
 <body>
 
     <wicket:extend>
-    
+        <h1>Welcome in hell</h1>
+
+        <div class="grid_3 widget">
+            <h3>Title</h3>
+            This is widget 1.
+        </div>
+
+        <div class="grid_3 widget">
+            <h3>Title</h3>
+            This is widget 2.
+        </div>
+
+        <div class="grid_3 widget">
+            <h3>Title</h3>
+            This is widget 3.
+        </div>
+
+        <div class="grid_3 widget">
+            <h3>Title</h3>
+            This is widget 4.
+        </div>
+
+        <div class="grid_3 widget">
+            <h3>Title</h3>
+            This is widget 5.
+        </div>
+
+        <div class="grid_3 widget">
+            <h3>Title</h3>
+            This is widget 6.
+        </div>
+
+        <div class="grid_3 widget">
+            <h3>Title</h3>
+            This is widget 7.
+        </div>
+
+        <div class="grid_3 widget">
+            <h3>Title</h3>
+            This is widget 8.
+        </div>
+
+        <div class="grid_3 widget">
+            <h3>Title</h3>
+            This is widget 9.
+        </div>
+
+        <div class="grid_3 widget">
+            <h3>Title</h3>
+            This is widget 10.
+        </div>
+
+        <div class="grid_3 widget">
+            <h3>Title</h3>
+            This is widget 11.
+        </div>
+
+        <div class="grid_3 widget">
+            <h3>Title</h3>
+            This is widget 12.
+        </div>
+
     </wicket:extend>
 
 </body>
diff --git a/core/src/main/resources/org/apache/karaf/webconsole/core/style.css b/core/src/main/resources/org/apache/karaf/webconsole/core/style.css
index 63e631b..58bb9b0 100644
--- a/core/src/main/resources/org/apache/karaf/webconsole/core/style.css
+++ b/core/src/main/resources/org/apache/karaf/webconsole/core/style.css
@@ -16,8 +16,7 @@
 }
 
 div.widget {
-    float: left;
-    width: 250px;
+    border: 1px dotted black;
 }
 
 #container {
@@ -124,3 +123,4 @@
   color:#333;
   padding-bottom:5px;
 }
+
diff --git a/osgi/src/main/java/org/apache/karaf/webconsole/osgi/internal/OsgiWidget.java b/osgi/src/main/java/org/apache/karaf/webconsole/osgi/internal/OsgiWidget.java
new file mode 100644
index 0000000..fd685ed
--- /dev/null
+++ b/osgi/src/main/java/org/apache/karaf/webconsole/osgi/internal/OsgiWidget.java
@@ -0,0 +1,23 @@
+package org.apache.karaf.webconsole.osgi.internal;
+
+import org.apache.karaf.webconsole.core.DashboardWidget;
+import org.apache.wicket.markup.html.basic.Label;
+import org.apache.wicket.markup.html.link.BookmarkablePageLink;
+import org.apache.wicket.markup.html.panel.Panel;
+import org.osgi.framework.BundleContext;
+
+public class OsgiWidget extends Panel implements DashboardWidget {
+
+    public OsgiWidget(BundleContext context) {
+        super("none");
+
+        add(new Label("bundleCount", "" + context.getBundles().length));
+
+        add(new BookmarkablePageLink<HomePage>("osgiLink", HomePage.class).add(new Label("osgiLinkLabel", "Manage")));
+    }
+
+    public Panel getWidgetPanel() {
+        return this;
+    }
+
+}
diff --git a/osgi/src/main/resources/OSGI-INF/blueprint/wicket.xml b/osgi/src/main/resources/OSGI-INF/blueprint/wicket.xml
index cea1b2d..b79ee3d 100644
--- a/osgi/src/main/resources/OSGI-INF/blueprint/wicket.xml
+++ b/osgi/src/main/resources/OSGI-INF/blueprint/wicket.xml
@@ -11,4 +11,12 @@
     
     <reference id="featuresService" interface="org.apache.karaf.features.FeaturesService"/>
 
+    <!-- he is not ready yet ;-)
+    <service interface="org.apache.karaf.webconsole.core.DashboardWidget">
+        <bean class="org.apache.karaf.webconsole.osgi.internal.OsgiWidget">
+            <argument ref="blueprintBundleContext" />
+        </bean>
+    </service>
+    -->
+
 </blueprint>
diff --git a/osgi/src/main/resources/org/apache/karaf/webconsole/osgi/internal/OsgiWidget.html b/osgi/src/main/resources/org/apache/karaf/webconsole/osgi/internal/OsgiWidget.html
new file mode 100644
index 0000000..704fd53
--- /dev/null
+++ b/osgi/src/main/resources/org/apache/karaf/webconsole/osgi/internal/OsgiWidget.html
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Karaf wicket console</title>
+</head>
+<body>
+
+    <wicket:panel>
+        You have
+        <span wicket:id="bundleCount">130</span> bundles installed.
+
+        <a href="#" wicket:id="osgiLink">
+            <span wicket:id="osgiLinkLabel">Go to OSGi management</span>
+        </a>
+    </wicket:panel>
+
+</body>
+</html>
\ No newline at end of file