incubator-ace-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ma...@apache.org
Subject svn commit: r802728 - in /incubator/ace/trunk/webui: src/org/apache/ace/client/Main.java war/ACE.png war/webui.css war/webui.html
Date Mon, 10 Aug 2009 10:31:32 GMT
Author: marrs
Date: Mon Aug 10 10:31:31 2009
New Revision: 802728

URL: http://svn.apache.org/viewvc?rev=802728&view=rev
Log:
Refactored the client UI code. Instead of a mix of HTML layout and code based layout, every
control is now generated and placed from code. A logo at the top is the only exception. Styling
is done in the CSS, and more styling has been added.

Added:
    incubator/ace/trunk/webui/war/ACE.png   (with props)
Modified:
    incubator/ace/trunk/webui/src/org/apache/ace/client/Main.java
    incubator/ace/trunk/webui/war/webui.css
    incubator/ace/trunk/webui/war/webui.html

Modified: incubator/ace/trunk/webui/src/org/apache/ace/client/Main.java
URL: http://svn.apache.org/viewvc/incubator/ace/trunk/webui/src/org/apache/ace/client/Main.java?rev=802728&r1=802727&r2=802728&view=diff
==============================================================================
--- incubator/ace/trunk/webui/src/org/apache/ace/client/Main.java (original)
+++ incubator/ace/trunk/webui/src/org/apache/ace/client/Main.java Mon Aug 10 10:31:31 2009
@@ -41,9 +41,13 @@
 import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.rpc.AsyncCallback;
 import com.google.gwt.user.client.ui.Button;
+import com.google.gwt.user.client.ui.FlexTable;
+import com.google.gwt.user.client.ui.FlowPanel;
+import com.google.gwt.user.client.ui.HorizontalPanel;
 import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.RootPanel;
 import com.google.gwt.user.client.ui.ScrollPanel;
+import com.google.gwt.user.client.ui.FlexTable.FlexCellFormatter;
 
 /**
  * Entry point for the web UI.
@@ -79,7 +83,8 @@
         ts.getTargets(new AsyncCallback<TargetDescriptor[]>() {
 
             public void onFailure(Throwable caught) {
-                Window.alert("Callback failed, not creating UI...");
+                createUI();
+//                Window.alert("Callback failed, not updating UI...");
             }
 
             public void onSuccess(TargetDescriptor[] result) {
@@ -98,10 +103,8 @@
     }
 
     private void createUI() {
-        // Add the header panels
         Button addBundleButton = new Button("+");
         addBundleButton.addStyleDependentName("add");
-        RootPanel.get("bundlesHeader").add(addBundleButton);
         addBundleButton.addClickHandler(new ClickHandler() {
             public void onClick(ClickEvent event) {
                 new AddBundleDialog(Main.this).show();
@@ -110,7 +113,6 @@
 
         Button addGroupButton = new Button("+");
         addGroupButton.addStyleDependentName("add");
-        RootPanel.get("groupsHeader").add(addGroupButton);
         addGroupButton.addClickHandler(new ClickHandler() {
             public void onClick(ClickEvent event) {
                 m_groupTable.addNew();
@@ -119,7 +121,6 @@
         
         Button addLicenseButton = new Button("+");
         addLicenseButton.addStyleDependentName("add");
-        RootPanel.get("licensesHeader").add(addLicenseButton);
         addLicenseButton.addClickHandler(new ClickHandler() {
             public void onClick(ClickEvent event) {
                 m_licenseTable.addNew();
@@ -127,26 +128,21 @@
         });
         
         // Create some scrollpanels with our tables
-        ScrollPanel scrollPanel = new ScrollPanel(m_bundleTable);
-        scrollPanel.setHeight("30em");
-        scrollPanel.setStyleName("objectTable");
-        RootPanel.get("bundleColumnContainer").add(scrollPanel);
-        scrollPanel = new ScrollPanel(m_groupTable);
-        scrollPanel.setHeight("30em");
-        scrollPanel.setStyleName("objectTable");
-        RootPanel.get("groupColumnContainer").add(scrollPanel);
-        scrollPanel = new ScrollPanel(m_licenseTable);
-        scrollPanel.setHeight("30em");
-        scrollPanel.setStyleName("objectTable");
-        RootPanel.get("licenseColumnContainer").add(scrollPanel);
-        scrollPanel = new ScrollPanel(m_targetTable);
-        scrollPanel.setHeight("30em");
-        scrollPanel.setStyleName("objectTable");
-        RootPanel.get("targetColumnContainer").add(scrollPanel);
+        ScrollPanel bundleScrollPanel = new ScrollPanel(m_bundleTable);
+//        bundleScrollPanel.setHeight("30em");
+        bundleScrollPanel.setStyleName("objectTable");
+        ScrollPanel groupScrollPanel = new ScrollPanel(m_groupTable);
+//        groupScrollPanel.setHeight("30em");
+        groupScrollPanel.setStyleName("objectTable");
+        ScrollPanel licenseScrollPanel = new ScrollPanel(m_licenseTable);
+//        licenseScrollPanel.setHeight("30em");
+        licenseScrollPanel.setStyleName("objectTable");
+        ScrollPanel targetScrollPanel = new ScrollPanel(m_targetTable);
+//        targetScrollPanel.setHeight("30em");
+        targetScrollPanel.setStyleName("objectTable");
         
         // Create the association buttons
         Button b2g = new Button("<->");
-        RootPanel.get("b2gButton").add(b2g);
         b2g.addClickHandler(new ClickHandler() {
             public void onClick(ClickEvent event) {
                 m_assocationService.link(m_bundleTable.getCheckedObject(), m_groupTable.getCheckedObject(),
new AsyncCallback<Void>() {
@@ -161,7 +157,6 @@
         });
         
         Button g2l = new Button("<->");
-        RootPanel.get("g2lButton").add(g2l);
         g2l.addClickHandler(new ClickHandler() {
             public void onClick(ClickEvent event) {
                 GroupDescriptor group = m_groupTable.getCheckedObject();
@@ -177,7 +172,6 @@
             }
         });
         Button l2t = new Button("<->");
-        RootPanel.get("l2tButton").add(l2t);
         l2t.addClickHandler(new ClickHandler() {
             public void onClick(ClickEvent event) {
                 m_assocationService.link(m_licenseTable.getCheckedObject(), m_targetTable.getCheckedObject(),
new AsyncCallback<Void>() {
@@ -191,11 +185,37 @@
             }
         });
         
-        // Put our status label in the lower left corner
-        RootPanel.get("serverStatusLabel").add(m_statusLabel);
-        
-        // Add our checkout panel
-        RootPanel.get("buttonPanel").add(new CheckoutPanel(this));
+        FlexTable rootPanel = new FlexTable();
+        FlexCellFormatter formatter = rootPanel.getFlexCellFormatter();
+        rootPanel.setWidth("100%");
+        rootPanel.setHeight("100%");
+        rootPanel.setHTML(1, 0, "Bundle");
+        formatter.setWidth(1, 0, "25%");
+        rootPanel.setWidget(2, 0, addBundleButton);
+        rootPanel.setWidget(2, 1, b2g);
+        formatter.setStyleName(2, 1, "fixedColumn");
+        rootPanel.setWidget(3, 0, bundleScrollPanel);
+        formatter.setHeight(3, 0, "90%");
+        rootPanel.setHTML(1, 2, "Group");
+        formatter.setWidth(1, 2, "25%");
+        rootPanel.setWidget(2, 2, addGroupButton);
+        rootPanel.setWidget(2, 3, g2l);
+        formatter.setStyleName(2, 3, "fixedColumn");
+        rootPanel.setWidget(3, 2, groupScrollPanel);
+        rootPanel.setHTML(1, 4, "License");
+        formatter.setWidth(1, 4, "25%");
+        rootPanel.setWidget(2, 4, addLicenseButton);
+        rootPanel.setWidget(2, 5, l2t);
+        formatter.setStyleName(2, 5, "fixedColumn");
+        rootPanel.setWidget(3, 4, licenseScrollPanel);
+        rootPanel.setHTML(1, 6, "Target");
+        formatter.setWidth(1, 6, "25%");
+        rootPanel.setWidget(3, 6, targetScrollPanel);
+        rootPanel.setWidget(0, 0, new CheckoutPanel(this));
+        formatter.setColSpan(0, 0, 7);
+        rootPanel.setWidget(4, 0, m_statusLabel);
+        formatter.setColSpan(4, 0, 7);
+        RootPanel.get("body").add(rootPanel);
     }
     
     /**

Added: incubator/ace/trunk/webui/war/ACE.png
URL: http://svn.apache.org/viewvc/incubator/ace/trunk/webui/war/ACE.png?rev=802728&view=auto
==============================================================================
Binary file - no diff available.

Propchange: incubator/ace/trunk/webui/war/ACE.png
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Modified: incubator/ace/trunk/webui/war/webui.css
URL: http://svn.apache.org/viewvc/incubator/ace/trunk/webui/war/webui.css?rev=802728&r1=802727&r2=802728&view=diff
==============================================================================
--- incubator/ace/trunk/webui/war/webui.css (original)
+++ incubator/ace/trunk/webui/war/webui.css Mon Aug 10 10:31:31 2009
@@ -1,64 +1,110 @@
-/** Add css rules here for your application. */
+.header {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    height: 100px;
+    border-bottom-style: groove;
+    border-bottom-width: 2px;
+}
+
+.body {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 100px;
+    bottom: 0px;
+}
+
+.fixedColumn {
+    min-width: 4em;
+    text-align: center;
+}
+
+.objectTable {
+    height: 100%;
+    width: 100%;
+    border-style: inset;
+    border-width: 1px;
+}
+
+.objectTable table {
+    width: 100%;
+}
 
+.objectTable table td + td {
+    width: 1em;
+}
 
 /** Example rules used by the template application (remove for your app) */
+
 h1 {
-  font-size: 2em;
-  font-weight: bold;
-  color: #777777;
-  margin: 40px 0px 70px;
-  text-align: center;
+    font-size: 2em;
+    font-weight: bold;
+    color: #777777;
+    margin: 40px 0px 70px;
+    text-align: center;
 }
 
 .sendButton {
-  display: block;
-  font-size: 16pt;
+    display: block;
+    font-size: 16pt;
 }
 
 /** Most GWT widgets already have a style name defined */
+
 .gwt-DialogBox {
-  width: 400px;
+    width: 400px;
 }
 
 .dialogVPanel {
-  margin: 5px;
+    margin: 5px;
 }
 
 .serverResponseLabelError {
-  color: red;
+    color: red;
 }
 
 /** Set ids using widget.getElement().setId("idOfElement") */
+
 #closeButton {
-  margin: 15px 6px 6px;
+    margin: 15px 6px 6px;
 }
 
 .serverStatusGood {
-  color: green;
+    color: #666;
+    padding: 2px;
+    border-style: inset;
+    border-width: 1px;
 }
 
 .serverStatusBad {
-  color: red;
+    color: #000;
+    background-color: #faa;
+    padding: 2px;
+    border-style: inset;
+    border-width: 1px;
 }
 
 .objectpanel {
-  background-color: aliceblue;
-  margin: 4px 4px 4px 4px;
+    background-color: #ddd;
+    margin: 4px 4px 4px 4px;
 }
 
 .objectpaneltext-selected {
-  color: white;
+    color: white;
 }
-    
+
 .objectpanel-selected {
-  background-color: blue;
+    background-color: #f34;
 }
 
 .objectpanel-related {
-  background-color: lightblue;
+    background-color: #fde;
 }
 
 /* an 'add' button */
+
 .gwt-Button-add {
-  width: 2em;
-}
+    width: 2em;
+}
\ No newline at end of file

Modified: incubator/ace/trunk/webui/war/webui.html
URL: http://svn.apache.org/viewvc/incubator/ace/trunk/webui/war/webui.html?rev=802728&r1=802727&r2=802728&view=diff
==============================================================================
--- incubator/ace/trunk/webui/war/webui.html (original)
+++ incubator/ace/trunk/webui/war/webui.html Mon Aug 10 10:31:31 2009
@@ -37,31 +37,8 @@
 
     <!-- OPTIONAL: include this if you want history support -->
     <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
-
-    <h1>Apache ACE</h1>
-
-    <table align="center" border="1">
-    <tr><td colspan="7" id="buttonPanel" /></tr>
-    <tr>
-        <th><h3 id="bundlesHeader">Bundles</h3></th>
-        <th id="b2gButton"></th>
-        <th><h3 id="groupsHeader">Groups</h3></th>
-        <th id="g2lButton"/></th>
-        <th><h3 id="licensesHeader">Licenses</h3></th>
-        <th id="l2tButton"/></th>
-        <th><h3>Targets</h3></th>
-    </tr>
-    <tr>
-        <td id="bundleColumnContainer"></td>
-        <td />
-        <td id="groupColumnContainer"></td>
-        <td />
-        <td id="licenseColumnContainer"></td>
-        <td />
-        <td id="targetColumnContainer"></td>
-    </tr>
-    </table>
     
-    <div id="serverStatusLabel" />
+    <div id="header" class="header"><img src="ACE.png" alt="Apache ACE" /></div>
+    <div id="body" class="body"></div>
   </body>
 </html>



Mime
View raw message