Scroll HTMLPane to specific anchor in loaded html

[mgbf]

In my application I have a HTMLPane which receives contents from server. The contents is set using the setContents method.

The HTML contents contains some anchor, defined by <a> tags. Eg.: <a name='anchor1'>, <a name='anchor2'> etc.

I'd like to be able to programatically scroll the HTMLPane to specific anchors, according to these names. Is that possible?

Thanks,
Matheus

[Olivercomputing]

I second this question.

[sabhinandan]

I also need similar fuctionality, can you please help.

Basically my app have a form , and the fields on the form are clikable links, which upon clicking should open releated help with those field.
These links points to an anchor in an html file, which i am planning to place in a HTML Pane.

so is there any way to go to the anchored text in html pane upon clicking on the links

[dilip_gupta]

Hi,
I can do that But facing problem as When my Modal Window gets scrolled then parent window also gets scrolled and this Behavior is on IE only, Can any one suggest how to stop parent window to get scroll.

Thanks in Advance
Dilip

[ex70375]

hi isomorphic,

I have to solve the same problem. The user wants to jump through a click in the listgrid to a specific anchor in a HTMLPane.

A method (scrollToAnchor("xyz") or similar) in the HTMLPane I have not found.

I am thankful for every tip.

BR Mirko

[Isomorphic]

If you want to do this you'll need to drop down to low-level DOM techniques - select the anchor element, determine it's offset within the HTML inside the HTMLPane, then once you have that number, call HTMLPane.scrollTo().

Another approach is to just call focus() on the anchor element. Whatever has keyboard focus is scrolled into view automatically.

This whole technique is of course only possible with contentsType:"fragment". With contentsType:"page" there's an intervening iframe.

[ex70375]

thank you for your quick answer.
I'm trying to implement the first suggestion. However, I have a problem with:

When calling the method

htmlPane.getElement().getElementsByTagName("a")

the layout of my app is destroyed.

please have a look at this screenshots and testcase (click button jump to):

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NodeList;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.types.SelectionStyle;
import com.smartgwt.client.types.SortArrow;
import com.smartgwt.client.util.KeyCallback;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.HTMLPane;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.grid.events.RecordClickEvent;
import com.smartgwt.client.widgets.grid.events.RecordClickHandler;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VStack;
import com.smartgwt.client.widgets.viewer.DetailViewer;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class BuiltInDS implements EntryPoint {
	private ListGrid boundList;
	private DynamicForm boundForm;
	private IButton saveBtn;
	private DetailViewer boundViewer;
	private IButton newBtn;
	private HTMLPane htmlPane;
	/**
	 * This is the entry point method.
	 */
	@Override
	public void onModuleLoad() {
		KeyIdentifier debugKey = new KeyIdentifier();
		debugKey.setCtrlKey(true);
		debugKey.setKeyName("D");

		Page.registerKey(debugKey, new KeyCallback() {
			@Override
			public void execute(String keyName) {
				SC.showConsole();
			}
		});


		htmlPane = new HTMLPane();
		htmlPane.setContents("" +
				"<a id=\"zeile1\" href=\"#zeile1\"><h1>zeile1</h1>" +
				"<a id=\"zeile2\" href=\"#zeile2\"><h1>zeile2</h1>" +
				"<a id=\"zeile3\" href=\"#zeile3\"><h1>zeile3</h1>" +
				"<a id=\"zeile4\" href=\"#zeile4\"><h1>zeile4</h1>" +
				"<a id=\"zeile5\" href=\"#zeile5\"><h1>zeile5</h1>" +
				"<a href=\"#zeile6\"><h1>zeile6</h1>" +
				"<a href=\"#zeile7\"><h1>zeile7</h1>" +
				"<a href=\"#zeile8\"><h1>zeile8</h1>" +
				"<a href=\"#zeile9\"><h1>zeile9</h1>" +
				"<a href=\"#zeile1\"><h1>zeile1</h1>" +
				"<a href=\"#zeile11\"><h1>zeile11</h1>" +
				"<a href=\"#zeile12\"><h1>zeile12</h1>" +
				"<a href=\"#zeile13\"><h1>zeile13</h1>" +
				"<a href=\"#zeile14\"><h1>zeile14</h1>" +
				"<a href=\"#zeile15\"><h1>zeile15</h1>" +
				"<a href=\"#zeile16\"><h1>zeile16</h1>" +
				"<a href=\"#zeile17\"><h1>zeile17</h1>" +
				"<a href=\"#zeile18\"><h1>zeile18</h1>" +
				"<a href=\"#zeile19\"><h1>zeile19</h1>" +
				"<a href=\"#zeile20\"><h1>zeile20</h1>" +
				"<a href=\"#zeile21\"><h1>zeile21</h1>" +
				"<a href=\"#zeile22\"><h1>zeile22</h1>" +
				"<a href=\"#zeile23\"><h1>zeile23</h1>" +
				"<a id=\"zeile24\" href=\"#zeile24\"><h1>zeile24</h1>" +
				"<a href=\"#zeile25\"><h1>zeile25</h1>" +
				"<a href=\"#zeile26\"><h1>zeile26</h1>" +
				"<a href=\"#zeile27\"><h1>zeile27</h1>" +
				"");



		IButton button = new IButton("jump", new ClickHandler() {

			@Override
			public void onClick(ClickEvent event) {

				getAllAnchors(htmlPane.getElement());

			}
		});

		IButton button2 = new IButton("jump to", new ClickHandler() {

			@Override
			public void onClick(ClickEvent event) {
				htmlPane.getElement().getElementsByTagName("a");

			}
		});


		ListGrid grid = new ListGrid();
		grid.setLeft(20);
		grid.setTop(75);
		grid.setWidth(130);
		grid.setLeaveScrollbarGap(false);
		grid.setShowSortArrow(SortArrow.NONE);
		grid.setCanSort(false);
		grid.setFields(new ListGridField("dsTitle", "Select a DataSource"));
		grid.setData(new ListGridRecord[]{
				new DSRecord("Payment Info", "paymentInfoDMI"),
				new DSRecord("Animals", "animals"),
				new DSRecord("Office Supplies", "supplyItem"),
				new DSRecord("Employees", "employees")}
				);
		grid.setSelectionType(SelectionStyle.SINGLE);
		grid.addRecordClickHandler(new RecordClickHandler() {
			@Override
			public void onRecordClick(RecordClickEvent event) {
				DSRecord record = (DSRecord) event.getRecord();
				bindComponents(record.getDsName());
			}
		});

		grid.draw();

		VStack vStack = new VStack();
		vStack.setLeft(175);
		vStack.setTop(75);
		vStack.setWidth("70%");
		vStack.setMembersMargin(20);


		vStack.addMember(button);
		vStack.addMember(button2);
		vStack.addMember(htmlPane);

		Label label = new Label();
		label.setContents("<ul>" +
				"<li>select a datasource from the list at left to bind to these components</li>" +
				"<li>click a record in the grid to view and edit that record in the form</li>" +
				"<li>click <b>New</b> to start editing a new record in the form</li>" +
				"<li>click <b>Save</b> to save changes to a new or edited record in the form</li>" +
				"<li>click <b>Clear</b> to clear all fields in the form</li>" +
				"<li>click <b>Filter</b> to filter (substring match) the grid based on form values</li>" +
				"<li>click <b>Fetch</b> to fetch records (exact match) for the grid based on form values</li>" +
				"<li>double-click a record in the grid to edit inline (press Return, or arrow/tab to another record, to save)</li>" +
				"</ul>");
		vStack.addMember(label);

		boundList = new ListGrid();
		boundList.setHeight(200);
		boundList.setCanEdit(true);

		boundList.addRecordClickHandler(new RecordClickHandler() {
			@Override
			public void onRecordClick(RecordClickEvent event) {
				Record record = event.getRecord();
				boundForm.editRecord(record);
				saveBtn.enable();
				boundViewer.viewSelectedData(boundList);
			}
		});
		vStack.addMember(boundList);

		boundForm = new DynamicForm();
		boundForm.setNumCols(6);
		boundForm.setAutoFocus(false);
		vStack.addMember(boundForm);

		HLayout hLayout = new HLayout(10);
		hLayout.setMembersMargin(10);
		hLayout.setHeight(22);

		saveBtn = new IButton("Save");
		saveBtn.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				boundForm.saveData();
				if (!boundForm.hasErrors()) {
					boundForm.clearValues();
					saveBtn.disable();
				}
			}
		});
		hLayout.addMember(saveBtn);

		newBtn = new IButton("New");
		newBtn.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				boundForm.editNewRecord();
				saveBtn.enable();
			}
		});
		hLayout.addMember(newBtn);

		IButton clearBtn = new IButton("Clear");
		clearBtn.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				boundForm.clearValues();
				saveBtn.disable();
			}
		});
		hLayout.addMember(clearBtn);

		IButton filterBtn = new IButton("Filter");
		filterBtn.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				boundList.filterData(boundForm.getValuesAsCriteria());
				saveBtn.disable();
			}
		});
		hLayout.addMember(filterBtn);

		IButton fetchBtn = new IButton("Fetch");
		fetchBtn.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				boundList.fetchData(boundForm.getValuesAsCriteria());
				saveBtn.disable();
			}
		});
		hLayout.addMember(fetchBtn);

		vStack.addMember(hLayout);

		boundViewer = new DetailViewer();
		vStack.addMember(boundViewer);

		vStack.draw();
	}


	/**
	 * Find all anchor tags and if any point outside the site, 
	 * redirect them to a "blocked" page.
	 */
	private void getAllAnchors(Element elt) {

		NodeList<Element> nodeList = elt.getElementsByTagName("a");
		for (int i = 0; i < nodeList.getLength(); i++){
			System.out.println(nodeList.getItem(i).getPropertyString("id") + " -- " + nodeList.getItem(i).getAbsoluteTop() + " -- " + nodeList.getItem(i).getOffsetTop());

			htmlPane.scrollTo(0, nodeList.getItem(i).getOffsetTop());
		}


	}

	//	/**
	//	 * Find all child elements that are anchor tags,
	//	 * assign a unique id to them, and return a list of
	//	 * the unique ids to the caller.
	//	 * 
	//	 * 
	//	 *  link.id = ("uid-a-" + i);
	//	 */
	//	private native void putElementLinkIDsInList(Element elt, ArrayList list) /*-{
	//	      var links = elt.getElementsByTagName("a");
	//
	//	      for (var i = 0; i < links.length; i++ ) {
	//	        var link = links.item(i);
	//
	//	        list.@java.util.ArrayList::add(Ljava/lang/Object;) (link.id);
	//	      }
	//	    }-*/;

	private void bindComponents(String dsName) {
		DataSource ds = DataSource.get(dsName);
		boundList.setDataSource(ds);
		boundViewer.setDataSource(ds);
		boundForm.setDataSource(ds);
		boundList.fetchData();
		newBtn.enable();
		saveBtn.disable();
	}
}

tested with Isomorphic SmartClient/SmartGWT Framework (SNAPSHOT_v9.0d_2013-05-16/PowerEdition Deployment 2013-05-16) and Firefox 22 and gwt 2.5.0

Is this a gwt Bug?

Best Regards

[Isomorphic]

We've looked into this and see the problem on our end.
The issue is that getElement() is having this unexpected side effect -- but more fundamentally we realize this isn't really the correct API for you to use.
The gwt setElement() / getElement() pair of methods are not really compatible with a SmartGWT component drawn via the standard "draw()" method.

We're adding a pair of methods to explicitly retrieve the outer DOM element (canvas.getOuterElement()) and the content DOM element (canvas.getContentEleent()) for a SmartGWT Canvas. These will be present in the next nightly build, dated Aug 7 or above.
Note that you should not modify the DOM structure created by SmartGWT components directly - this would cause the Java widget instances to be essentially decoupled from their live DOM elements and lead to all kind of problems, both obvious and subtle. However you can make use of the result of a getContentElement() call for this kind of thing where you want to simply interrogate the DOM tree starting at a certain point to determine information about the content, etc.

Regards
Isomorphic Software