Hyperlink Anchors in EWB

I was recently coding a program which can contain a very large number of large tables on one scrollable screen, and it seemed like a good idea to have a set of hyperlinks from the top of the screen instantly jump to all the various tables

This is easy to do.

You just need to have an anchor

  <a id='anchor'>

and a hyperlinke

  <a href='#anchor'>hyperlink to anchor</a>

In EWB, you can emit HTML in a THTMLLabel.

So, here’s the code. First set your surface to be Veritclaly scollable (doable on a TForm or a TScrollBox).

This code creates the TBasicPanels dynamically and inserts the Anchors and Titles for each box.

It also demonstrates:

  • how to dynamically add labels and boxes in code
  • how to use Response Design - you don’t give absolute positions, but rather relative positions
unit hypelink;

interface

uses WebCore, WebUI, WebForms, WebCtrls, WebLabels, WebCtnrs;

type

   TForm1 = class(TForm)
      procedure Form1Show(Sender: TObject);
   private
      { Private declarations }
      htmllabel1 : THTMLLabel;
      hrefnum : integer;
      procedure AddTable( name : string );
   public
      { Public declarations }
   end;

var
   Form1: TForm1;

implementation


procedure TForm1.AddTable( name : string );
var
  groupbox : TBasicPanel;
  title : TLabel;
  html : THTMLLabel;

begin
  groupbox := TBasicPanel.Create( self );
  groupbox.Parent := self;
  groupbox.Layout.Position := lpTopLeft;
  groupbox.Layout.Consumption := lcBottom;
  inc( hrefnum ); // 1...
  html := THTMLLabel.Create( groupbox );
  html.parent := groupbox;
  html.Content := '<a id="'+Inttostr( hrefnum )+'"><h2>'+name+'</h2>';
  htmllabel1.Content := htmllabel1.Content + '<li><a href="#'+ IntToStr( hrefnum)+'">'+name+'</a>';
end;

procedure TForm1.Form1Show(Sender: TObject);
begin
  htmllabel1 := THTMLLabel.Create( self );
  HTMLLabel1.Parent := self;
  htmlLabel1.Layout.Position := lpTopLeft;
  htmlLabel1.Layout.Consumption := lcBottom;
  htmllabel1.Background.Fill.Color := clYellow;
  htmllabel1.AutoSize.Height := True;
  htmllabel1.Content := 'Jump to:<ul>';

  AddTable( 'sample #1' );
  AddTable( 'sample #2' );
  AddTable( 'sample #3' );
  AddTable( 'sample #4' );
  AddTable( 'sample #5' );
  AddTable( 'sample #6' );
  // for completeness, close the unordered list
  htmllabel1.Content := htmllabel1.Content + '</ul>';

end;

end.