1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    39
    Vote Rating
    0
    rmulcha is on a distinguished road

      0  

    Default Unanswered: FormPanel UI Binder Example

    Unanswered: FormPanel UI Binder Example


    Hello there..,

    Is there any FormPanel UI Binder Example and also is there any book or documentation that I can refer on how to layout the GXT components in UI Binder.

    Thank you

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Vote Rating
    90
    Answers
    109
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Moved to Q&A.

    Couple of thoughts to get the discussion going: The FormPanel class is just a ContentPanel with an html form tag, same as in 2.x, and shouldn't often be your first choice unless you are interacting with server components that expect regular html forms. Examples of this include file upload, legacy server components that need urlencoded, multipartencoded data, requests to a different origin (but where the client doesnt need to read the response), and initiating file download.

    So in most of those cases, ContentPanel is sufficient. Fields can be added individually, or wrapped in a FieldLabel to give them labels and a uniform offset.

    A few examples build forms with uibinder, check out http://www.sencha.com/examples/#Exam...%28uibinder%29 and http://www.sencha.com/examples/#Exam...%28uibinder%29 to get started.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    39
    Vote Rating
    0
    rmulcha is on a distinguished road

      0  

    Default


    These are not sufficient Colin. Can you please see if you can help me with http://www.sencha.com/forum/showthre...et.core.client

  4. #4
    Sencha User PhiLho's Avatar
    Join Date
    Nov 2011
    Location
    Near Paris, France
    Posts
    140
    Vote Rating
    1
    Answers
    2
    PhiLho is on a distinguished road

      0  

    Default Example for uploading a file

    Example for uploading a file


    I have a form defined with UiBinder, indeed made precisely to upload a file. Actually, most fields except the FileUploadField are managed like in any other dialog, and the upload servlet only manage the upload field, ignoring the other ones (but it could handle them as well, of course).

    I defined the layout using GWT's HTMLPanel, it allows me to use CSS for precise layout, it is more natural (and a bit less verbose) for me than VerticalLayout and similar. To each their own.

    UiBinder:
    Code:
    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:g="urn:import:com.google.gwt.user.client.ui"
        xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"
        xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container"
        xmlns:form="urn:import:com.sencha.gxt.widget.core.client.form"
        xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button"
        ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
        ui:generateLocales='default'
        >
    
      <ui:with field="res" type="com.mycom.vtisdk.client.resource.IconResources"/>
    
      <ui:style>
      #M-ImportForm
      {
        padding-top: 8px;
      }
    
      .field
      {
        margin: 4px 8px;
      }
    
      .bar
      {
        margin-top: 16px;
      }
      </ui:style>
    
      <gxt:Window ui:field="dialog" modal="true" blinkModal="true"
          headingText="Import Settings" focusWidget="{datasources}"
          bodyStyle="padding: 8px">
        <ui:attribute key='importDialogTitle' name='headingText' description='Title of the metadata import dialog'/>
    
        <form:FormPanel ui:field="form">
          <g:HTMLPanel>
            <div id="M-ImportForm">
    
              <form:FieldLabel text="Datasource choice" labelWidth="150" addStyleNames="{style.field}">
              <ui:attribute key='datasourceChoice' name='text' description='Label for choosing a datasource'/>
              <form:widget>
                <form:ComboBox ui:field="datasources" width="200"
                      editable="false" allowBlank="false" forceSelection="true" triggerAction="ALL" tabIndex="1"/>
                </form:widget>
              </form:FieldLabel>
              <form:FieldLabel text="File" labelWidth="150" addStyleNames="{style.field}">
                <ui:attribute key='file' name='text' description='Label for selecting a file'/>
                <form:widget>
                  <form:FileUploadField ui:field="uploadedFile" name="metadataFile" width="260" tabIndex="2"/>
                </form:widget>
              </form:FieldLabel>
              <form:FieldLabel text="Kind" labelWidth="150" addStyleNames="{style.field}">
                <ui:attribute key='kind' name='text' description='Label for choosing a kind of attribute'/>
                <form:widget>
                  <form:ComboBox ui:field="kind" width="200"
                      editable="false" allowBlank="false" forceSelection="true" triggerAction="ALL" tabIndex="3"/>
                </form:widget>
              </form:FieldLabel>
              <!-- And more -->
    
              <button:ButtonBar spacing="8" addStyleNames="{style.bar}">
                  <button:TextButton ui:field="okButton" text="OK" tabIndex="10">
                    <ui:attribute key='okImport' name='text' description='Text on the OK button'/>
                </button:TextButton>
                  <button:TextButton ui:field="cancelButton" text="Cancel" tabIndex="11">
                  <ui:attribute key='cancel' name='text' description='Text on the Cancel button'/>
                </button:TextButton>
                  <button:TextButton ui:field="helpButton" text="Help" tabIndex="12">
                  <ui:attribute key='help' name='text' description='Text on the Help button'/>
                </button:TextButton>
              </button:ButtonBar>
              
            </div>
          </g:HTMLPanel>
        </form:FormPanel>
    
      </gxt:Window>
    
    </ui:UiBinder>
    and in the related class:
    Code:
      private final Window dialog;
    
      @UiField(provided = true)
      final FormPanel form = new FormPanel();
    
      @UiField(provided = true)
      final ComboBox<DatasourceDto> datasources = new ComboBox<DatasourceDto>(dsStore, dsProps.name());
    // Etc.
    
      @UiField
      FileUploadField uploadedFile;
    
      @UiField
      TextButton okButton;
    
      @Inject
      public ImportMetadataDialog(
          @Named("uploadUrl") final String uploadUrl,
          IconResources res, NavBarConstants msg)
      {
        icons = res;
        messages = msg;
    
        dialog = (Window) uiBinder.createAndBindUi(this);
        dialog.getHeader().setIcon(icons.settings());
    
        form.setAction(uploadUrl);
        form.setEncoding(FormPanel.Encoding.MULTIPART);
        form.setMethod(FormPanel.Method.POST);
        form.addSubmitCompleteHandler(new SubmitCompleteHandler()
        {
          @Override
          public void onSubmitComplete(SubmitCompleteEvent event)
          {
            // We got back the result of the POST request in the dialog, we can now hide it
            dialog.hide();
            // And do the import request
            presenter.doImport(datasources.getValue(), fileName, event.getResults(),
                kind.getValue(), keyField.getValue(), type.getValue(), checkMergeOption.getValue());
          }
        });
    // [...]
      }
    
      /** OK. */
      @UiHandler("okButton")
      public void onOK(SelectEvent evt)
      {
        fileName = uploadedFile.getValue();
        if (fileName.length() == 0)
        {
          // The button isn't active unless we have a file to import
          return;
        }
        form.submit();
        uploadedFile.reset();
      }

Thread Participants: 2