Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Picker outside screen

    I have a staticFormItem with a customized picker. I move the picker to the icon position using picker.moveTo(iconRect.getLeft(), iconRect.getTop());. This works fine, but when the formItem is near the right corner of the screen, a part of the picker is not visible (outside the screen). How is it possible to detect this to move the picker to a better position in this case?
    Same for the bottom corner of the screen.

    Using smartGwt 4.1p.
    Tags: None
    #2
    The Canvas.showNextTo() utility method can handle this for you.

    Comment

      #3
      Originally posted by Isomorphic View Post
      The Canvas.showNextTo() utility method can handle this for you.
      And if the element is not a Canvas? I need it next to the icon of a formItem. Of course, a dynamicForm is a canvas, but the dynamicForm may have more than one elements...

      I basically want to do what you have here:
      http://www.smartclient.com/smartgwt/showcase/#form_category_custom_picker

      But without letting the picker to go outside the screen. showNextTo() would be perfect if a formItem would be a canvas ..

      Comment

        #4
        Right now we don't have a publicly documented method that would allow you to place something next to an arbitrary rectangle while staying on screen.

        A quick workaround for this situation is just to create a Canvas that has the dimensions of the rectangle you want to place something near (the FormItemIcon's rect in this case) and call showNextTo() using that Canvas.

        This will have a negligible performance impact for this use case.

        Comment

          #5
          The workaround is not working correctly:

          When I click on the searchPicker the picker is appearing in the center of the screen.


          Code:
          public class TestingModule implements EntryPoint {

	ListGrid lg = new ListGrid();

	public void onModuleLoad() {

		VLayout vlayout = new VLayout();

		DynamicForm df = new DynamicForm();
		df.setIsGroup(true);
		df.setGroupTitle("Group");
		df.setNumCols(4);
		df.setColWidths(200, 400, 200, 400);
		
		TextItem tfi = new TextItem();
		tfi.setWidth(300);
		tfi.setRequired(true);
		
		final MyFormItem mfi = new MyFormItem();
		mfi.setWidth(300);
		mfi.setRequired(true);

		df.setFields(mfi,tfi);

		vlayout.addMember(df);
		
		vlayout.setWidth(500);
		vlayout.setHeight(500);
		vlayout.draw();
	}

	private class MyFormItem extends StaticTextItem {

		private MyDialog picker;

		MyFormItem() {

			PickerIcon clearPicker = new PickerIcon(PickerIcon.CLEAR,
					new FormItemClickHandler() {
						public void onFormItemClick(FormItemIconClickEvent event) {
							clearValue();
						}
					});

			PickerIcon searchPicker = new PickerIcon(PickerIcon.SEARCH,
					new FormItemClickHandler() {
						public void onFormItemClick(FormItemIconClickEvent event) {
							Rectangle iconRect = getIconPageRect(event
									.getIcon());

							picker = new MyDialog();
							picker.reset();
							//picker.show();
							//picker.moveTo(iconRect.getLeft(), iconRect.getTop());
							Canvas buttonCanvas = new Canvas();
							buttonCanvas.setLeft(iconRect.getLeft());
							buttonCanvas.setTop(iconRect.getTop());
							buttonCanvas.setWidth(iconRect.getWidth());
							buttonCanvas.setHeight(iconRect.getHeight());
							//buttonCanvas.draw();
							picker.showNextTo(buttonCanvas);
						}
					});

			setIcons(clearPicker, searchPicker);

		}

		@Override
		public MyDialog getPicker() {
			return picker;
		}

	}

	public class MyDialog extends Dialog {
		TreeGrid employeeTreeGrid;

		MyDialog() {
			setWidth(700);
			setHeight(470);
			setAutoCenter(true);
			setIsModal(true);
			setShowHeader(false);
			setShowEdges(false);
			setEdgeSize(10);
			setShowToolbar(false);

			addCloseClickHandler(new CloseClickHandler() {

				@Override
				public void onCloseClick(CloseClickEvent event) {
					markForDestroy();
				}
			});

			VLayout vlayout = new VLayout(10);

			employeeTreeGrid = new TreeGrid();
			employeeTreeGrid.setWidth(500);
			employeeTreeGrid.setHeight(400);
			employeeTreeGrid.setNodeIcon("icons/16/person.png");
			employeeTreeGrid.setFolderIcon("icons/16/person.png");
			employeeTreeGrid.setAutoFetchData(false);
			
			employeeTreeGrid.setShowOpenIcons(false);
			employeeTreeGrid.setShowDropIcons(false);

			employeeTreeGrid.setShowSelectedStyle(true);
			employeeTreeGrid.setShowPartialSelection(false);
			employeeTreeGrid.setCascadeSelection(false);
			employeeTreeGrid.setCanSort(false);
			employeeTreeGrid.setShowConnectors(true);
			employeeTreeGrid.setShowHeader(false);
			employeeTreeGrid.setLoadDataOnDemand(false);
			employeeTreeGrid.setSelectionType(SelectionStyle.SINGLE);
			employeeTreeGrid.setOverflow(Overflow.AUTO);
			
			employeeTreeGrid.setShowAllRecords(true);

			vlayout.addMember(employeeTreeGrid);
			employeeTreeGrid.setDataSource(EmployeeXmlDS.getInstance());
			employeeTreeGrid.fetchData(null, new DSCallback() {
				
				@Override
				public void execute(DSResponse dsResponse, Object data, DSRequest dsRequest) {
					employeeTreeGrid.getTree().openAll();
				}
			});

			HLayout buttonLayout = new HLayout(5);

			IButton okButton = new IButton("Fetch tree");
			okButton.addClickHandler(new ClickHandler() {

				@Override
				public void onClick(ClickEvent event) {
					employeeTreeGrid.setDataSource(EmployeeXmlDS.getInstance());
					employeeTreeGrid.fetchData(null, new DSCallback() {
						
						@Override
						public void execute(DSResponse dsResponse, Object data, DSRequest dsRequest) {
							employeeTreeGrid.getTree().openAll();
						}
					});
				}
			});

			buttonLayout.addMember(okButton);

			IButton closeButton = new IButton("Close");
			closeButton.addClickHandler(new ClickHandler() {

				@Override
				public void onClick(ClickEvent event) {
					markForDestroy();
				}
			});

			buttonLayout.addMember(closeButton);
			vlayout.addMember(buttonLayout);

			addItem(vlayout);
		}

		public void reset() {
			employeeTreeGrid.setData(new ListGridRecord[] {});
		}
	}

}
          Last edited by edulid; 6 Oct 2014, 07:39.

          Comment

            #6
            It looks like you've commented out a call to buttonCanvas.draw(). You will need to call this as the coordinates can't be determined when we don't know where the component will be placed (whether it has a parent, etc). You should in fact be seeing warnings about this in your Developer Console.

            Also, set the buttonCanvas to overflow:"hidden" to avoid the default (overflow:visible) behavior of auto-sizing to contents, which could impose a minimum size larger than the icon.

            Comment

              #7
              Originally posted by Isomorphic View Post
              It looks like you've commented out a call to buttonCanvas.draw().
              No, I just wanted to show you that I also tried with this calling draw() and that it also doesn't work.
              Here is my actual code, which, as I told you, doesn't work. The overflow=hidden code didn't work either, as I always see the picker in the middle of the screen.

              I don't have warnings in the developer console. So please just try my code and you will see that it doesn't work, as the picker is always shown in the middle of the screen. It is based on your showcase samples.

              Also, not the whole "search" button is clickable, but only one section of it. I think because of the drawn canvas -> it is hidding the button somehow, such that it is not clickable everywhere.

              Code:
              public class TestingModule implements EntryPoint {

	ListGrid lg = new ListGrid();

	public void onModuleLoad() {

		VLayout vlayout = new VLayout();

		DynamicForm df = new DynamicForm();
		df.setIsGroup(true);
		df.setGroupTitle("Group");
		df.setNumCols(4);
		df.setColWidths(200, 400, 200, 400);
		
		TextItem tfi = new TextItem();
		tfi.setWidth(300);
		tfi.setRequired(true);
		
		final MyFormItem mfi = new MyFormItem();
		mfi.setWidth(300);
		mfi.setRequired(true);

		df.setFields(mfi,tfi);

		vlayout.addMember(df);
		
		vlayout.setWidth(500);
		vlayout.setHeight(500);
		vlayout.draw();
	}

	private class MyFormItem extends StaticTextItem {

		private MyDialog picker;

		MyFormItem() {

			PickerIcon clearPicker = new PickerIcon(PickerIcon.CLEAR,
					new FormItemClickHandler() {
						public void onFormItemClick(FormItemIconClickEvent event) {
							clearValue();
						}
					});

			PickerIcon searchPicker = new PickerIcon(PickerIcon.SEARCH,
					new FormItemClickHandler() {
						public void onFormItemClick(FormItemIconClickEvent event) {
							Rectangle iconRect = getIconPageRect(event
									.getIcon());

							picker = new MyDialog();
							picker.reset();
							//picker.show();
							//picker.moveTo(iconRect.getLeft(), iconRect.getTop());
							Canvas buttonCanvas = new Canvas();
							buttonCanvas.setLeft(iconRect.getLeft());
							buttonCanvas.setTop(iconRect.getTop());
							buttonCanvas.setWidth(iconRect.getWidth());
							buttonCanvas.setHeight(iconRect.getHeight());
							buttonCanvas.setOverflow(Overflow.HIDDEN);
							buttonCanvas.draw();
							picker.showNextTo(buttonCanvas);
						}
					});

			setIcons(clearPicker, searchPicker);

		}

		@Override
		public MyDialog getPicker() {
			return picker;
		}

	}

	public class MyDialog extends Dialog {
		TreeGrid employeeTreeGrid;

		MyDialog() {
			setWidth(700);
			setHeight(470);
			setAutoCenter(true);
			setIsModal(true);
			setShowHeader(false);
			setShowEdges(false);
			setEdgeSize(10);
			setShowToolbar(false);

			addCloseClickHandler(new CloseClickHandler() {

				@Override
				public void onCloseClick(CloseClickEvent event) {
					markForDestroy();
				}
			});

			VLayout vlayout = new VLayout(10);

			employeeTreeGrid = new TreeGrid();
			employeeTreeGrid.setWidth(500);
			employeeTreeGrid.setHeight(400);
			employeeTreeGrid.setNodeIcon("icons/16/person.png");
			employeeTreeGrid.setFolderIcon("icons/16/person.png");
			employeeTreeGrid.setAutoFetchData(false);
			
			employeeTreeGrid.setShowOpenIcons(false);
			employeeTreeGrid.setShowDropIcons(false);

			employeeTreeGrid.setShowSelectedStyle(true);
			employeeTreeGrid.setShowPartialSelection(false);
			employeeTreeGrid.setCascadeSelection(false);
			employeeTreeGrid.setCanSort(false);
			employeeTreeGrid.setShowConnectors(true);
			employeeTreeGrid.setShowHeader(false);
			employeeTreeGrid.setLoadDataOnDemand(false);
			employeeTreeGrid.setSelectionType(SelectionStyle.SINGLE);
			employeeTreeGrid.setOverflow(Overflow.AUTO);
			
			employeeTreeGrid.setShowAllRecords(true);

			vlayout.addMember(employeeTreeGrid);
			employeeTreeGrid.setDataSource(EmployeeXmlDS.getInstance());
			employeeTreeGrid.fetchData(null, new DSCallback() {
				
				@Override
				public void execute(DSResponse dsResponse, Object data, DSRequest dsRequest) {
					employeeTreeGrid.getTree().openAll();
				}
			});

			HLayout buttonLayout = new HLayout(5);

			IButton okButton = new IButton("Fetch tree");
			okButton.addClickHandler(new ClickHandler() {

				@Override
				public void onClick(ClickEvent event) {
					employeeTreeGrid.setDataSource(EmployeeXmlDS.getInstance());
					employeeTreeGrid.fetchData(null, new DSCallback() {
						
						@Override
						public void execute(DSResponse dsResponse, Object data, DSRequest dsRequest) {
							employeeTreeGrid.getTree().openAll();
						}
					});
				}
			});

			buttonLayout.addMember(okButton);

			IButton closeButton = new IButton("Close");
			closeButton.addClickHandler(new ClickHandler() {

				@Override
				public void onClick(ClickEvent event) {
					markForDestroy();
				}
			});

			buttonLayout.addMember(closeButton);
			vlayout.addMember(buttonLayout);

			addItem(vlayout);
		}

		public void reset() {
			employeeTreeGrid.setData(new ListGridRecord[] {});
		}
	}

}
              Last edited by edulid; 6 Oct 2014, 12:49.

              Comment

                #8
                My exact version is v9.1p_2014-09-25/PowerEdition Deployment (built 2014-09-25)

                Comment

                  #9
                  Your MyDialog subclass is calling setAutoCenter(true). Change that to false to avoid it centering itself. If you want to re-use this dialog elsewhere, where it needs to be centered, call centerInPage() as needed instead.

                  When placing the buttonCanvas, use setPageTop/Left(), and not setTop/Left() - that will place it properly.

                  After you call showNextTo(), destroy the temporary buttonCanvas - that will fix the search button being obscured.

                  Comment

                    #10
                    Thanks, works great.

                    Comment

                    Previous template Next
                    Working...
                    X