Working design of SpellingSandboxDialog

src/gwt/src/org/rstudio/studio/client/common/spelling/view/SpellingSandboxDialog.java

@@ -19,20 +19,25 @@
 import org.rstudio.studio.client.common.SimpleRequestCallback;
 import org.rstudio.studio.client.common.spelling.model.SpellingServerOperations;
 
+import com.google.gwt.core.client.GWT;
 import com.google.gwt.core.client.JsArrayString;
-import com.google.gwt.dom.client.Style.Unit;
 import com.google.gwt.event.dom.client.ChangeEvent;
 import com.google.gwt.event.dom.client.ChangeHandler;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiFactory;
+import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.user.client.ui.ListBox;
 import com.google.gwt.user.client.ui.TextArea;
-import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.google.inject.Inject;
 
 public class SpellingSandboxDialog extends ModalDialogBase
 {
+
+   interface Binder extends UiBinder<Widget, SpellingSandboxDialog>{}
+
    @Inject
    public SpellingSandboxDialog(GlobalDisplay globalDisplay, 
                                 SpellingServerOperations server)
@@ -55,44 +60,31 @@ public void onClick(ClickEvent event)
    @Override
    protected Widget createMainWidget()
    {
-      VerticalPanel mainPanel = new VerticalPanel();
-      mainPanel.setWidth("300px");
-
-      txtWord_ = new TextArea();
-      txtWord_.setVisibleLines(2);
-      txtWord_.setWidth("100px");
-      txtWord_.getElement().getStyle().setMarginBottom(7, Unit.PX);
-      mainPanel.add(txtWord_);    
+      Widget mainPanel = uiBinder.createAndBindUi(this);
 
-      ThemedButton btnCheck = new ThemedButton("Check", new ClickHandler() {
+      changeButton_.addClickHandler(new ClickHandler() {
          @Override
          public void onClick(ClickEvent event)
          {
             checkSpelling(txtWord_.getText().trim());
          }
       });
-      mainPanel.add(btnCheck);
 
-      ThemedButton btnSuggest = new ThemedButton("Suggest", new ClickHandler() {
+
+      changeAllButton_.addClickHandler(new ClickHandler() {
          @Override
          public void onClick(ClickEvent event)
          {
             suggestionList(txtWord_.getText().trim());
          }
       });
-      mainPanel.add(btnSuggest); 
 
-      listBox_ = new ListBox(false);
-      listBox_.setVisibleItemCount(5);
-      listBox_.setWidth("100px");
-      listBox_.getElement().getStyle().setMarginBottom(7, Unit.PX);
       listBox_.addChangeHandler(new ChangeHandler() {
          public void onChange(ChangeEvent event) 
          {
             txtWord_.setText(listBox_.getValue(listBox_.getSelectedIndex()));
          }
       });
-      mainPanel.add(listBox_);
 
       return mainPanel;
    } 
@@ -139,8 +131,18 @@ private void showResponse(String request, String response)
       txtWord_.setFocus(true);
    }
 
-   private TextArea txtWord_;
-   private ListBox listBox_;
+   @UiFactory ThemedButton makeThemedButton()
+   {
+	   return new ThemedButton("");
+   }
+
+   private static Binder uiBinder = GWT.create(Binder.class);
+   @UiField TextArea txtWord_;
+   @UiField ListBox listBox_;
+   @UiField ThemedButton changeButton_;
+   @UiField ThemedButton changeAllButton_;
+   @UiField ThemedButton ignoreButton_;
+   @UiField ThemedButton ignoreAllButton_;
    private final GlobalDisplay globalDisplay_;
    private final SpellingServerOperations server_;
 

src/gwt/src/org/rstudio/studio/client/common/spelling/view/SpellingSandboxDialog.ui.xml

@@ -0,0 +1,53 @@
+<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
+             xmlns:g="urn:import:com.google.gwt.user.client.ui"
+             xmlns:rs="urn:import:org.rstudio.core.client.widget">
+   <ui:style>
+      .bottomBorder {
+      	border-bottom: 1px solid #bcc1c5;
+      	padding-bottom: 10px;
+      }
+      .label {
+      	padding: 2px;
+      }
+      .dirtyText {
+         width: 100%;
+         height: 100%;
+         box-sizing: border-box;
+         -moz-box-sizing: border-box;
+         -webkit-box-sizing: border-box;
+         -ms-box-sizing: border-box;
+         resize: none;	
+  		}
+      .textPanel {
+         width: 450px;
+         height: 75px;
+      }
+  	   .buttonPanel {
+  	   	/* width: 100px; */
+      }
+   </ui:style>
+
+   <g:VerticalPanel styleName="{style.bottomBorder}">
+      <g:Label text="Not in dictionary:" styleName="{style.label}"/>
+      <g:HorizontalPanel>
+         <g:HTMLPanel styleName="{style.textPanel}">
+            <g:TextArea ui:field="txtWord_" styleName="{style.dirtyText}" />
+         </g:HTMLPanel>
+         <g:VerticalPanel styleName="{style.buttonPanel}">
+            <rs:ThemedButton ui:field="ignoreButton_" text="Ignore"/>
+            <rs:ThemedButton ui:field="ignoreAllButton_" text="Ignore All" />
+         </g:VerticalPanel>
+      </g:HorizontalPanel>
+      <g:Label text="Suggestions:" styleName="{style.label}"/>
+      <g:HorizontalPanel>
+         <g:HTMLPanel styleName="{style.textPanel}">
+            <g:ListBox ui:field="listBox_" styleName="{style.textPanel}"
+                       visibleItemCount="5" multipleSelect="false" />
+         </g:HTMLPanel>
+         <g:VerticalPanel styleName="{style.buttonPanel}">
+            <rs:ThemedButton ui:field="changeButton_" text="Change" />
+            <rs:ThemedButton ui:field="changeAllButton_" text="Change All" />
+         </g:VerticalPanel>
+      </g:HorizontalPanel>
+   </g:VerticalPanel>
+</ui:UiBinder>