Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Please provide a sample code to write a Custom FormItem to display a dialog

    Using v10.0p_2015-02-25/PowerEdition Deployment (built 2015-02-25)

    We have a ListGrid and set setShowFilterEditor(true);
    The grid has a datetime column. When the column is clicked we are getting a dialog with Start and End Times. I have several questions here.
    1. Is there a convenient way of disabling the items that show up in the
    dropdowns that alow relative days as input?
    2. I did try the following
    ListGridField timeField = new ListGridField("time", "Time");
    timeField .setFilterEditorProperties(new DateRangeItem());
    But it doesn't provide the date and time. Also, this would need
    multiple rows display for filter which I don't want to allocate.
    3. If we want to write a custom formitem with a custom, would you
    please point me to a sample code perhaps? I did look in the
    showcase.

    Thanks in advance

    #2
    1. see the docs: MiniDateRangeItem has an AutoChild rangeDialog, which has an AutoChild rangeItem, etc - the customization is allowed all the way down via the AutoChild system

    2. that's not a good idea, since the control won't fit directly in a FilterEditor, so a dialog should be used. But as far as time controls not appearing, that's most likely because your field is declared as type "date" and would need to be type "datetime" to support time-based filtering

    3. just start with StaticTextItem and add a FormItemIcon. Launch the dialog from a ClickHandler on the FormItemIcon.

    Comment


      #3
      I did the following and it works for me. Posting a reply just in case
      some one else is in a similar situation as me.
      Code:
      	MiniDateRangeItem range = new MiniDateRangeItem();
      	range.setDateDisplayFormat(DateDisplayFormat.TOUSSHORTDATETIME);
      	range.setAttribute("allowRelativeDates", Boolean.FALSE);
      	range.setAttribute("autoValidate", Boolean.TRUE);
      	MiniDateRangeItem.setDefaultProperties(range);
      	time.setFilterEditorProperties(new MiniDateRangeItem());
      Couple of observations. If I don't set the format, (i.e., without the
      following line)
      Code:
      	range.setDateDisplayFormat(DateDisplayFormat.TOUSSHORTDATETIME);
      the calendar widget does allow us to specify date and time, but when
      OK is clicked, only date is taken into account (without time).
      I'd like to see if we can have getter/setter methods instead of
      having us call the setAttribute() method to change 'allowRelativeDates' property.
      Finally, the downside of a static method (i.e., MiniDateRangeItem.setDefaultProperties(range);) would, in theory, may cause problems if we have two date/time widgets and we wanted to have two different set of properties set separately.
      Thanks for your quick and timely support.

      Comment


        #4
        adding one more point. In order to have both date and "time" picked up by the criteria, I had to set the DateDisplayFormat.
        range.setDateDisplayFormat(DateDisplayFormat.TOUSSHORTDATETIME);
        I wish we had a generic DateDisplayFormat.DATE_AND_TIME (i.e., without us specifying US) so that
        the International formats work fine also. If I used
        range.setDateDisplayFormat(DateDisplayFormat.TOSERIALIZEABLEDATE),
        then the validate is unable to parse this string and fail (and a red icon would show up).

        Comment


          #5
          Formatting in the MiniDateRangeItem (and other date-range-related controls) is automatically chosen based on the data type provided via either FormItem.setType() or ListGridField.setType() or the DataSourceField.type (depending on the context). You should not have to make any changes to the defaults, since it will pick up the system-wide formatters that you can configure via DateUtil (but which you should not have to configure per-locale, since that's automatic).

          If this doesn't seem to be happening automatically, please show a complete test case in which you have attempted to provide the data type.

          A documentation glitch prevented a valid setAllowRelativeDates() method from appearing. We'll fix this.

          To set autoValidate, you can call setAutoValidate(); no need for a setAttribute() call.

          Comment


            #6
            The bug related to the allowRelativeDates property was fixed, and the setAllowRelativeDates() method will be available as of tomorrow, (April 14).

            Regards,
            Isomorphic Software

            Comment


              #7
              Originally posted by Isomorphic View Post
              The bug related to the allowRelativeDates property was fixed, and the setAllowRelativeDates() method will be available as of tomorrow, (April 14).

              Regards,
              Isomorphic Software
              Thanks folks... You are awesome...

              Comment


                #8
                Originally posted by Isomorphic View Post
                Formatting in the MiniDateRangeItem (and other date-range-related controls) is automatically chosen based on the data type provided via either FormItem.setType() or ListGridField.setType() or the DataSourceField.type (depending on the context). You should not have to make any changes to the defaults, since it will pick up the system-wide formatters that you can configure via DateUtil (but which you should not have to configure per-locale, since that's automatic).

                If this doesn't seem to be happening automatically, please show a complete test case in which you have attempted to provide the data type.
                This is not happening. The definition in the ds.xml is as shown below.
                <field name="createtime" type="datetime" title="Created At" hidden="false" width="12%" initSortColumn="true" customCriteriaExpression="(createtime #if ($criteriaOperator == 'greaterOrEqual') &gt;= #else &lt;= #end UNIX_TIMESTAMP($criteriaValue))" />

                I have attempted to further specify the following.
                createtime.setType(ListGridFieldType.DATETIME);
                With or without the above line, the behavior is the same; the calendar widget comes up and allows us to specify Time (screenshot). So, this is evident that Type is specified as DATETIME. Howevre, when the values are populated to the StaticTextArea, it is only populating date (and not time).
                Attached Files

                Comment


                  #9
                  Originally posted by leeyuiwah View Post
                  This is not happening. The definition in the ds.xml is as shown below.
                  <field name="createtime" type="datetime" title="Created At" hidden="false" width="12%" initSortColumn="true" customCriteriaExpression="(createtime #if ($criteriaOperator == 'greaterOrEqual') &gt;= #else &lt;= #end UNIX_TIMESTAMP($criteriaValue))" />

                  I have attempted to further specify the following.
                  createtime.setType(ListGridFieldType.DATETIME);
                  With or without the above line, the behavior is the same; the calendar widget comes up and allows us to specify Time (screenshot). So, this is evident that Type is specified as DATETIME. Howevre, when the values are populated to the StaticTextArea, it is only populating date (and not time). Please that I added timeField and set the filterEditorProperties
                  Here's the complete test case.
                  I took the "Date Range Filtering" example from your showcase and added createtime column.
                  Retained your original code for WorldXmlDS.java as is (in the code below, masking the import line)
                  Code:
                  import com.smartgwt.client.types.ListGridFieldType;
                  import com.smartgwt.client.widgets.Canvas;  
                  import com.smartgwt.client.widgets.form.fields.MiniDateRangeItem;
                  import com.smartgwt.client.widgets.grid.ListGrid;  
                  import com.smartgwt.client.widgets.grid.ListGridField;  
                  import com.....WorldXmlDS;  
                  import com.google.gwt.core.client.EntryPoint;  
                    
                  public class GridFilterSample implements EntryPoint {  
                    
                      public void onModuleLoad() {  
                    
                          final ListGrid countryGrid = new ListGrid();  
                          countryGrid.setWidth(500);  
                          countryGrid.setHeight(300);  
                          countryGrid.setDataSource(WorldXmlDS.getInstance());  
                    
                          ListGridField countryCodeField = new ListGridField("countryCode", "Code", 50);  
                          ListGridField nameField = new ListGridField("countryName", "Country");  
                          ListGridField capitalField = new ListGridField("capital", "Capital");  
                          ListGridField continentField = new ListGridField("continent", "Continent");
                          ListGridField timeField = new ListGridField("createtime", "Create Time");
                    
                          timeField.setType(ListGridFieldType.DATETIME);
                  		MiniDateRangeItem range = new MiniDateRangeItem();
                  		range.setAttribute("allowRelativeDates", Boolean.FALSE);
                  		range.setAutoValidate(true);
                  		MiniDateRangeItem.setDefaultProperties(range);
                  		MiniDateRangeItem mdr = new MiniDateRangeItem();
                  		timeField.setFilterEditorProperties(mdr);
                  
                          countryGrid.setFields(countryCodeField, nameField, capitalField, continentField, timeField);  
                    
                          countryGrid.setAutoFetchData(true);  
                          countryGrid.setShowFilterEditor(true);  
                   
                          countryGrid.draw();  
                      }  
                    
                  }
                  Then I modified the data file and added, kept only 2 entries.
                  Code:
                  <List>
                  <country>
                      <continent>North America</continent>
                      <countryName>Bermuda</countryName>
                      <countryCode>BD</countryCode>
                      <area>50</area>
                      <population>62099</population>
                      <gdp>1700</gdp>
                      <government>dependent territory of the UK</government>
                      <capital>Hamilton</capital>
                      <createtime>1429039215</createtime>
                  </country>
                  <country>
                      <continent>North America</continent>
                      <countryName>United States</countryName>
                      <countryCode>US</countryCode>
                      <area>9372610</area>
                      <population>266476278</population>
                      <gdp>7247700</gdp>
                      <independence>1776-07-04</independence>
                      <government>federal republic</government>
                      <capital>Washington</capital>
                      <createtime>1429039000</createtime>
                  </country>
                  </List>
                  When you run the application, you will see Create Time and the Date icon allows specifying the date and time but the text area doesn't contain time. The interesting observation is that if I don't do
                  MiniDateRangeItem range = new MiniDateRangeItem();
                  range.setAttribute("allowRelativeDates", Boolean.FALSE);
                  range.setAutoValidate(true);
                  MiniDateRangeItem.setDefaultProperties(range);
                  the behavior is correct. It seems that invoking setDefaultProperties seems to be the culprit.
                  If I comment out the line
                  MiniDateRangeItem.setDefaultProperties(range);
                  I do not notice this behavior. But that call is needed to disable relative dates dropdowns...
                  Last edited by leeyuiwah; 14 Apr 2015, 11:57.

                  Comment


                    #10
                    This code is broken in a few different ways:

                    1. the DataSource doesn't have a createtime field, so the filterEditor would not be expected to work in general - it only works with DataSource fields.

                    2. setDefaultProperties() changes the defaults for a class system-wide. This API should be called strictly before *any* components are created, and it doesn't make sense to use this API under this circumstance or for this purpose at all.

                    Let us know if you can produce a new test case that suggests a framework bug.

                    Comment


                      #11
                      Originally posted by Isomorphic View Post
                      This code is broken in a few different ways:

                      1. the DataSource doesn't have a createtime field, so the filterEditor would not be expected to work in general - it only works with DataSource fields.

                      2. setDefaultProperties() changes the defaults for a class system-wide. This API should be called strictly before *any* components are created, and it doesn't make sense to use this API under this circumstance or for this purpose at all.

                      Let us know if you can produce a new test case that suggests a framework bug.
                      I'm Sorry, I did copy the WorldXmlDS.java and added the line
                      Code:
                              DataSourceDateTimeField timeField = new DataSourceDateTimeField("createtime", "Date");
                      So, the 'createtime' field is there. I did try this several times and I'm still not getting it to work correctly.
                      Please tell me whether the following code should work correctly or not (correctly meaning when widget shows up, it allows the user to specify date and time. When the calendar widget "OK" button is pressed, we do see both date and time in the text area. Also, what do you expect to happen when I un-comment the line below and invoke setDateDisplayFormat? (the behavior I am seeing is that time is being converted to UTF. But when I click the Date icon again, it is showing an entirely different time. The documentation doesn't say anything about applying timezones here.
                      Code:
                      		ListGridField timeField = new ListGridField("createtime", "Date and Time");
                      		timeField .setType(ListGridFieldType.DATETIME);
                      		MiniDateRangeItem mdr = new MiniDateRangeItem();
                      		mdr.setAllowRelativeDates(false);
                      		mdr.setAutoValidate(true);
                      		// mdr.setDateDisplayFormat(DateDisplayFormat.TOSERIALIZEABLEDATE);
                      		timeField .setFilterEditorProperties(mdr);
                      		grid.setFields(..., timeField);
                      Even the sample program I wrote exhibits the same behavior.
                      Code:
                      $ cat src/main/java/com/client/Test.java
                      package com.client;
                      import com.smartgwt.client.util.SC;
                      import com.smartgwt.client.types.ListGridFieldType;
                      import com.smartgwt.client.widgets.Canvas;
                      import com.smartgwt.client.widgets.form.fields.MiniDateRangeItem;
                      import com.smartgwt.client.widgets.grid.ListGrid;
                      import com.smartgwt.client.widgets.grid.ListGridField;
                      import com.smartgwt.client.data.DataSource;
                      import com.google.gwt.core.client.EntryPoint;
                      
                      public class Test implements EntryPoint {
                      
                          public void onModuleLoad() {
                      
                              final ListGrid grid = new ListGrid();
                              grid.setWidth(500);
                              grid.setHeight(300);
                              DataSource dataSource = DataSource.get("TestDS");
                              /* DataSource dataSource = TestXmlDS.getInstance(); */
                              SC.say("datasource=" + dataSource);
                              grid.setDataSource(dataSource);
                      
                              ListGridField timeField = new ListGridField("createtime", "Create Time");
                      
                              timeField.setType(ListGridFieldType.DATETIME);
                              MiniDateRangeItem mdr = new MiniDateRangeItem();
                              mdr.setAllowRelativeDates(false);
                              mdr.setAutoValidate(true);
                              timeField.setFilterEditorProperties(mdr);
                      
                              grid.setFields(timeField);
                      
                              grid.setShowFilterEditor(true);
                      
                              grid.draw();
                          }
                      
                      }
                      
                      ///////////// Contents of TestDS.ds.xml
                      $  cat target/ds/TestDS.ds.xml
                      <DataSource
                          ID="TestDS"
                          serverType="sql"
                          tableName="tbl"
                      >
                          <fields>
                              <field name="createtime" type="datetime" title="Date Time"  hidden="false"  width="100%" />
                          </fields>
                      </DataSource>

                      Comment


                        #12
                        This code will work in the sense that the MDRI will now offer a filtering interface that includes both date and time.

                        Adding toSerializeableDate as a formatter doesn't make any sense for a user, and would be expected to totally break the control until you add a corresponding parser, because the default parser will be expecting to handle normal user input.

                        Comment


                          #13
                          Originally posted by Isomorphic View Post
                          This code will work in the sense that the MDRI will now offer a filtering interface that includes both date and time.

                          Adding toSerializeableDate as a formatter doesn't make any sense for a user, and would be expected to totally break the control until you add a corresponding parser, because the default parser will be expecting to handle normal user input.
                          I'm sorry, I still need an answer. I gave you the code. Let's forget the toSerializeableDate for a moment and take a look at my post. I'm asking what's wrong with the code and why am I not getting the time (and I'm only getting the date)?

                          Comment


                            #14
                            Sorry, we misunderstood you to say that you *are* seeing date and time being shown in the DateRangeItem, which is what our tests are showing.

                            Can you check on two things:

                            1. are you running this in a clean project, with no other code? You could break the default behavior via system-wide settings applied via DateUtil, or via calls to setDefaultProperties() on various components

                            2. if you do not try to apply any customization via setFilterEditorProperties(), do you then see that the default interface shows both date and time?

                            Comment


                              #15
                              Originally posted by Isomorphic View Post
                              Sorry, we misunderstood you to say that you *are* seeing date and time being shown in the DateRangeItem, which is what our tests are showing.

                              Can you check on two things:

                              1. are you running this in a clean project, with no other code? You could break the default behavior via system-wide settings applied via DateUtil, or via calls to setDefaultProperties() on various components

                              2. if you do not try to apply any customization via setFilterEditorProperties(), do you then see that the default interface shows both date and time?
                              1. Yes, I have tried with a clean project several times.
                              In your reply #5 (13th Apr 2015, 15:08) you do mention that the
                              defaults should work fine without us having to invoke
                              setDefaultProperties().
                              2. If I don't invoke setFilterEditorProperties, the behavior is correct
                              (screen shot attached in the attached zip file. File name is
                              default.png. Incorrect behavior screen shot is in the file,
                              withMiniDateRangeItem.png).


                              I've attached a jar file, Test.jar. If you extract the contents of the jar, you will have a test environment. If you run ant, it should launch the test client/server in superdev mode. Please note that I have made all the smartgwt*.jar and isomorphic*.jar files 0 length just so I don't give away the licensed software. So, you will have to copy those files over to libs directory before running ant. I'm using SmartClient Version: v10.0p_2015-04-15/PowerEdition Deployment (built 2015-04-15) and we have purchased software...

                              BTW I've tried uploading the Test.jar file but the upload is failing with the message "Your submission could not be processed because a security token was missing."... How else can I send the attachment?

                              Thanks in advance for your help...

                              Comment

                              Working...
                              X