Revision: 6800 Author: j...@google.com Date: Tue Nov 10 10:17:06 2009 Log: Various tweaks to the Mail sample: - Fixed stretchy tasks on IE6. - Changed tasks and contacts to no longer use VerticalPanel. - Moved global css into a CssResource. Review by: bobv (desk check) http://code.google.com/p/google-web-toolkit/source/detail?r=6800
Added: /trunk/samples/mail/src/com/google/gwt/sample/mail/client/Tasks.ui.xml /trunk/samples/mail/src/com/google/gwt/sample/mail/client/global.css Deleted: /trunk/samples/mail/war/Mail.css Modified: /trunk/samples/mail/src/com/google/gwt/sample/mail/Mail.gwt.xml /trunk/samples/mail/src/com/google/gwt/sample/mail/client/Contacts.java /trunk/samples/mail/src/com/google/gwt/sample/mail/client/Contacts.ui.xml /trunk/samples/mail/src/com/google/gwt/sample/mail/client/Mail.java /trunk/samples/mail/src/com/google/gwt/sample/mail/client/MailList.ui.xml /trunk/samples/mail/src/com/google/gwt/sample/mail/client/Tasks.java /trunk/samples/mail/war/Mail.html ======================================= --- /dev/null +++ /trunk/samples/mail/src/com/google/gwt/sample/mail/client/Tasks.ui.xml Tue Nov 10 10:17:06 2009 @@ -0,0 +1,24 @@ +<ui:UiBinder + xmlns:ui='urn:ui:com.google.gwt.uibinder' + xmlns:g='urn:import:com.google.gwt.user.client.ui' + xmlns:mail='urn:import:com.google.gwt.sample.mail.client'> + + <ui:style> + .tasks { + padding: 0.5em; + } + + .item { + display: block; + } + </ui:style> + + <g:FlowPanel styleName='{style.tasks}'> + <g:CheckBox styleName='{style.item}'>Get groceries</g:CheckBox> + <g:CheckBox styleName='{style.item}'>Walk the dog</g:CheckBox> + <g:CheckBox styleName='{style.item}'>Start Web 2.0 company</g:CheckBox> + <g:CheckBox styleName='{style.item}'>Write cool app in GWT</g:CheckBox> + <g:CheckBox styleName='{style.item}'>Get funding</g:CheckBox> + <g:CheckBox styleName='{style.item}'>Take a vacation</g:CheckBox> + </g:FlowPanel> +</ui:UiBinder> ======================================= --- /dev/null +++ /trunk/samples/mail/src/com/google/gwt/sample/mail/client/global.css Tue Nov 10 10:17:06 2009 @@ -0,0 +1,54 @@ +body, table { + font-size: small; +} +body { + font-family: Helvetica, Arial, sans-serif; + color: #000; + background: #fff; +} +a:link, a:visited, a:hover, a:active { + color: #000; + text-decoration: none; +} + +/* Dialog boxes */ +.dialogTopLeftInner, .dialogMiddleLeftInner, .dialogBottomLeftInner, +.dialogTopRightInner, .dialogMiddleRightInner, .dialogBottomRightInner { + display: none; +} +.gwt-DialogBox { + background-color: white; + border: 1px solid #666; +} +.gwt-DialogBox .Caption { + background: #d3d6dd url(gradient_bg_th.png) repeat-x bottom left; + font-weight: bold; + text-shadow: #fff 0 2px 2px; + cursor: default; + padding: 5px 10px; + border-bottom: 1px solid #999; + text-align: left; +} +.gwt-DialogBox .dialogContent { +} +.gwt-DialogBox .gwt-Button { + margin: 10px; +} +.gwt-PopupGlass { + background-color: #000; + opacity: 0.3; + filter: literal("alpha(opacity=30)"); +} + +/* GWT Tree */ +.gwt-Tree { +} +.gwt-Tree .gwt-TreeItem { + padding: 0; + cursor: hand; + cursor: pointer; + display: block !important; +} +.gwt-Tree .gwt-TreeItem-selected { + background: #ccc; +} ======================================= --- /trunk/samples/mail/war/Mail.css Mon Nov 9 10:52:41 2009 +++ /dev/null @@ -1,54 +0,0 @@ -body, table { - font-size: small; -} -body { - font-family: Helvetica, Arial, sans-serif; - color: #000; - background: #fff; -} -a:link, a:visited, a:hover, a:active { - color: #000; - text-decoration: none; -} - -/* Dialog boxes */ -.dialogTopLeftInner, .dialogMiddleLeftInner, .dialogBottomLeftInner, -.dialogTopRightInner, .dialogMiddleRightInner, .dialogBottomRightInner { - display: none; -} -.gwt-DialogBox { - background-color: white; - border: 1px solid #666; -} -.gwt-DialogBox .Caption { - background: #d3d6dd url(gradient_bg_th.png) repeat-x bottom left; - font-weight: bold; - text-shadow: #fff 0 2px 2px; - cursor: default; - padding: 5px 10px; - border-bottom: 1px solid #999; - text-align: left; -} -.gwt-DialogBox .dialogContent { -} -.gwt-DialogBox .gwt-Button { - margin: 10px; -} -.gwt-PopupGlass { - background-color: #000; - opacity: 0.3; - filter: alpha(opacity=30); -} - -/* GWT Tree */ -.gwt-Tree { -} -.gwt-Tree .gwt-TreeItem { - padding: 0; - cursor: hand; - cursor: pointer; - display: block !important; -} -.gwt-Tree .gwt-TreeItem-selected { - background: #ccc; -} ======================================= --- /trunk/samples/mail/src/com/google/gwt/sample/mail/Mail.gwt.xml Mon Nov 9 10:52:41 2009 +++ /trunk/samples/mail/src/com/google/gwt/sample/mail/Mail.gwt.xml Tue Nov 10 10:17:06 2009 @@ -13,6 +13,11 @@ <!-- limitations under the License. --> <module rename-to="mail"> - <inherits name='com.google.gwt.user.User'/> - <entry-point class='com.google.gwt.sample.mail.client.Mail'/> + <inherits name='com.google.gwt.user.User' /> + + <!-- This will give us shorter obfuscated CSS class names. We guarantee + that there will be no class names that will conflict with /M.+/ --> + <set-configuration-property name="CssResource.obfuscationPrefix" value="M" /> + + <entry-point class='com.google.gwt.sample.mail.client.Mail' /> </module> ======================================= --- /trunk/samples/mail/src/com/google/gwt/sample/mail/client/Contacts.java Tue Oct 6 14:10:56 2009 +++ /trunk/samples/mail/src/com/google/gwt/sample/mail/client/Contacts.java Tue Nov 10 10:17:06 2009 @@ -19,6 +19,7 @@ import com.google.gwt.dom.client.Element; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; +import com.google.gwt.resources.client.CssResource; import com.google.gwt.uibinder.client.UiBinder; import com.google.gwt.uibinder.client.UiField; import com.google.gwt.uibinder.client.UiTemplate; @@ -69,6 +70,10 @@ } interface Binder extends UiBinder<Widget, Contacts> { } + interface Style extends CssResource { + String item(); + } + private static final Binder binder = GWT.create(Binder.class); private Contact[] contacts = new Contact[] { @@ -82,6 +87,7 @@ new Contact("John von Neumann", "j...@example.com")}; @UiField ComplexPanel panel; + @UiField Style style; public Contacts() { initWidget(binder.createAndBindUi(this)); @@ -94,6 +100,7 @@ private void addContact(final Contact contact) { final Anchor link = new Anchor(contact.name); + link.setStyleName(style.item()); panel.add(link); // Add a click handler that displays a ContactPopup when it is clicked. ======================================= --- /trunk/samples/mail/src/com/google/gwt/sample/mail/client/Contacts.ui.xml Tue Oct 6 14:10:56 2009 +++ /trunk/samples/mail/src/com/google/gwt/sample/mail/client/Contacts.ui.xml Tue Nov 10 10:17:06 2009 @@ -3,15 +3,17 @@ xmlns:g='urn:import:com.google.gwt.user.client.ui' xmlns:mail='urn:import:com.google.gwt.sample.mail.client'> - <ui:style> + <ui:style field='style' + type='com.google.gwt.sample.mail.client.Contacts.Style'> + .contacts { padding: 0.5em; } + + .item { + display: block; + } </ui:style> - <!-- We need to apply padding to an outer panel because VerticalPanel is a - table, and applying padding to a table behaves strangely on IE6/7. --> - <g:FlowPanel styleName='{style.contacts}'> - <g:VerticalPanel ui:field='panel'/> - </g:FlowPanel> + <g:FlowPanel styleName='{style.contacts}' ui:field='panel'/> </ui:UiBinder> ======================================= --- /trunk/samples/mail/src/com/google/gwt/sample/mail/client/Mail.java Tue Nov 3 14:14:13 2009 +++ /trunk/samples/mail/src/com/google/gwt/sample/mail/client/Mail.java Tue Nov 10 10:17:06 2009 @@ -19,6 +19,9 @@ import com.google.gwt.core.client.GWT; import com.google.gwt.dom.client.Element; import com.google.gwt.dom.client.Style.Overflow; +import com.google.gwt.resources.client.ClientBundle; +import com.google.gwt.resources.client.CssResource; +import com.google.gwt.resources.client.CssResource.NotStrict; import com.google.gwt.uibinder.client.UiBinder; import com.google.gwt.uibinder.client.UiField; import com.google.gwt.user.client.Window; @@ -33,6 +36,13 @@ public class Mail implements EntryPoint { interface Binder extends UiBinder<DockLayoutPanel, Mail> { } + + interface GlobalResources extends ClientBundle { + @NotStrict + @Source("global.css") + CssResource css(); + } + private static final Binder binder = GWT.create(Binder.class); @UiField TopPanel topPanel; @@ -45,6 +55,10 @@ * controls and hooking up event handler. */ public void onModuleLoad() { + // Inject global styles. + GWT.<GlobalResources>create(GlobalResources.class).css().ensureInjected(); + + // Create the UI defined in Mail.ui.xml. DockLayoutPanel outer = binder.createAndBindUi(this); // Get rid of scrollbars, and clear out the window's built-in margin, ======================================= --- /trunk/samples/mail/src/com/google/gwt/sample/mail/client/MailList.ui.xml Mon Nov 9 10:52:41 2009 +++ /trunk/samples/mail/src/com/google/gwt/sample/mail/client/MailList.ui.xml Tue Nov 10 10:17:06 2009 @@ -13,8 +13,9 @@ cursor: hand; } - .header { - background: #d3d6dd url(gradient_bg_dark.png) repeat-x bottom left; + @sprite .header { + gwt-image: 'gradient'; + background-color: #d3d6dd; table-layout: fixed; width: 100%; height: 100%; ======================================= --- /trunk/samples/mail/src/com/google/gwt/sample/mail/client/Tasks.java Tue Sep 22 14:34:43 2009 +++ /trunk/samples/mail/src/com/google/gwt/sample/mail/client/Tasks.java Tue Nov 10 10:17:06 2009 @@ -15,24 +15,20 @@ */ package com.google.gwt.sample.mail.client; -import com.google.gwt.user.client.ui.CheckBox; +import com.google.gwt.core.client.GWT; +import com.google.gwt.uibinder.client.UiBinder; import com.google.gwt.user.client.ui.Composite; -import com.google.gwt.user.client.ui.VerticalPanel; +import com.google.gwt.user.client.ui.Widget; /** * Composite that represents a collection of <code>Task</code> items. */ public class Tasks extends Composite { + interface Binder extends UiBinder<Widget, Tasks> { } + private static final Binder binder = GWT.create(Binder.class); + public Tasks() { - VerticalPanel list = new VerticalPanel(); - list.add(new CheckBox("Get groceries")); - list.add(new CheckBox("Walk the dog")); - list.add(new CheckBox("Start Web 2.0 company")); - list.add(new CheckBox("Write cool app in GWT")); - list.add(new CheckBox("Get funding")); - list.add(new CheckBox("Take a vacation")); - initWidget(list); - setStyleName("mail-Tasks"); + initWidget(binder.createAndBindUi(this)); } } ======================================= --- /trunk/samples/mail/war/Mail.html Tue Oct 13 16:57:19 2009 +++ /trunk/samples/mail/war/Mail.html Tue Nov 10 10:17:06 2009 @@ -17,7 +17,6 @@ <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> - <link type="text/css" rel='stylesheet' href='Mail.css'> <title>Mail App</title> <script type="text/javascript" language='javascript' src='mail/mail.nocache.js'></script> </head> --~--~---------~--~----~------------~-------~--~----~ http://groups.google.com/group/Google-Web-Toolkit-Contributors -~----------~----~----~----~------~----~------~--~---