Announcement

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

    Hover for DynamicForm?

    I want to show a hover, similar to the hover of the left treeGrid in the showcase (the white hover!), for each formField, showing a description of the field when the user places the mouse pointer inside the field (or in a "?" icon right/left of the field?? this would be even better).

    I cannot use .setHint() (like in http://www.smartclient.com/smartgwt/...ntrols_various) because the descriptions are very long and this doesn't look good in my forms.

    I saw that DynamicForm has setCanHover() and setShowHover(), but no setHoverCustomizer(). And, if I call setCanHover(true) and setShowHover(true), I cannot see anything when I point the field.. so something is not working.

    Is this supported, or how to do this?
    Using smartgwt 5.0p eval 27.01.

    #2
    Take a look at the (many) hover APIs on FormItem. Hovers are handled on an item-by-item basis for forms, including different hovers for different parts of each FormItem, because that's what you'd want; you don't want to, for instance, constantly be popping up explanatory hovers as someone tries to interact with the input elements of a ComboBoxItem, DateItem, etc.

    Comment


      #3
      I am calling

      Code:
      formItem.setItemValueHoverFormatter(new FormItemHoverFormatter() {
      				
      				@Override
      				public String getHoverHTML(FormItem item, DynamicForm form) {
      					return "this is a text";
      				}
      			});
      But I see nothing in the fieldForms. I also call
      Code:
      singleFieldForm.setCanHover(true);
      			singleFieldForm.setShowHover(true);
      where singleFieldForm is a DynamicForm.

      Comment


        #4
        Have you looked over the complete hover API? You should start by doing that.

        The valueHover is for hover over statically displayed values only. If you want an explanatory blurb, you probably want titleHover.

        Comment


          #5
          "The FormItemHoverFormatter should return the HTML to display in a hover canvas when the user holds the mouse pointer over this item's value and the value is clipped. Return null to suppress the hover canvas altogether."

          ... and the value is clipped ?

          I need a hover which is always shown when pointing with the mouse, not only when the value is clipped.
          If the value is clipped, I am indeed seeing the hover, but this is not what I need.

          Comment


            #6
            I am NOT showing the titles of the forms.

            I am only showing the formItems. The titles are shown as simple labels.

            So I think the titleHover will not work here, since I am not showing the title ..

            Comment


              #7
              Originally posted by Isomorphic View Post
              Have you looked over the complete hover API? You should start by doing that.
              What do you mean by "the complete hover API"? I am looking at the formItem API and looking for the word "hover".

              Comment


                #8
                So you're using a DynamicForm to display a read-only set of values, with no titles?

                The built-in hover behaviors may not work well for this, but the question here is why would you use a DynamicForm for this at all?

                Comment


                  #9
                  Originally posted by Isomorphic View Post
                  So you're using a DynamicForm to display a read-only set of values, with no titles?

                  The built-in hover behaviors may not work well for this, but the question here is why would you use a DynamicForm for this at all?
                  No, I am creating a DynamicForm (not read-only!) depending on DB-values for position, size, text, etc, i.e. hightly dynamic. For the dynamicForm I use:
                  Code:
                  singleFieldForm.setItemLayout(FormLayoutType.ABSOLUTE);
                  because I need total control of the layout.
                  In the docs:
                  Code:
                  titles, which normally take up an adjacent cell, are not shown. Use StaticTextItems to show titles
                  that's why I am using Labels for showing the titles. These labels are also db-driven.

                  I just need a component right/left of the FormItems, where the user gets an explanation of the field, when putting the mouse on this component. Ideally, a "?" . If not, a simple hover would work.

                  Comment


                    #10
                    I just saw this: http://www.smartclient.com/smartgwt/showcase/#form_details_hovers I will take a look at this.

                    Comment


                      #11
                      Ok, setPrompt("text") seems right.

                      Is it possible to customize it , so it looks like the hover elements in your showcase (the white ones at the left treeGrid)?

                      Comment


                        #12
                        Code:
                        formItem.setPrompt("<b>this</b><br /> is a text this is a very long text this is a very long text even longer");
                        doesn't look good, because the hover width is very small.
                        If I set the hover width (dynamicForm.setItemHoverWidth()), then it is fix and doesn't look good for small texts.
                        How to make this dynamic, and, as I said, to customize it as your white hovers ? This would be perfect.
                        Last edited by edulid; 2 Feb 2015, 00:51.

                        Comment


                          #13
                          Isomorphic?

                          As I explained, I think my use case is valid, since it is documented that when using FormLayoutType.ABSOLUTE you must create the labels. So, titleHover doesn't work here (for a valid use). The only thing that works until now is setPrompt("text") , but, as I said, it is not customizable.

                          Comment


                            #14
                            Could be similar (definitely not the same) to my request here. This one is about dynamic URLs for a TextItem subclass (LinkItem). They have "add some dynamic for FormItem-properites" in common.

                            Best regards,
                            Blama

                            Comment


                              #15
                              If we're reading your requirements correctly, you should be able to use 'itemHoverFormatter' and 'setHoverStyle'
                              Code:
                              package com.smartgwt.sample.client;
                              
                              import com.google.gwt.core.client.EntryPoint;
                              import com.smartgwt.client.widgets.form.DynamicForm;
                              import com.smartgwt.client.widgets.form.FormItemHoverFormatter;
                              import com.smartgwt.client.widgets.form.fields.FormItem;
                              import com.smartgwt.client.widgets.form.fields.StaticTextItem;
                              
                              public class ItemHover implements EntryPoint {
                              	public void onModuleLoad () {
                              		DynamicForm testForm = new DynamicForm();
                              		
                              		StaticTextItem testItem = new StaticTextItem();
                              		testItem.setWrap(false);
                              		testItem.setShowTitle(false);
                              		testItem.setValue("Hover Over Me!");
                              		testItem.setItemHoverFormatter(new FormItemHoverFormatter() {
                              			
                              			@Override
                              			public String getHoverHTML(FormItem item, DynamicForm form) {
                              				return "<b>THIS</b> is some custom HTML";
                              			}
                              		});
                              		// borrow a style from ListGrid cells...
                              		testItem.setHoverStyle("cellOver");
                              		
                              		testForm.setItems(testItem);
                              		testForm.setBorder("1px solid black");
                              		testForm.draw();
                              	}
                              
                              }
                              Please let us know if this isn't what you're after

                              Thanks
                              Isomorphic Software

                              Comment

                              Working...
                              X