From mboxrd@z Thu Jan  1 00:00:00 1970
X-Spam-Checker-Version: SpamAssassin 3.4.4 (2020-01-24) on polar.synack.me
X-Spam-Level: 
X-Spam-Status: No, score=0.5 required=5.0 tests=BAYES_00,TO_NO_BRKTS_PCNT
	autolearn=no autolearn_force=no version=3.4.4
X-Received: by 10.183.3.43 with SMTP id bt11mr7448821obd.7.1421432086970;
        Fri, 16 Jan 2015 10:14:46 -0800 (PST)
X-Received: by 10.182.216.235 with SMTP id ot11mr13849obc.28.1421432086767;
 Fri, 16 Jan 2015 10:14:46 -0800 (PST)
Path: 
 eternal-september.org!reader01.eternal-september.org!reader02.eternal-september.org!news.eternal-september.org!mx02.eternal-september.org!feeder.eternal-september.org!news.glorb.com!border1.nntp.dca1.giganews.com!border2.nntp.dca1.giganews.com!nntp.giganews.com!h15no4255438igd.0!news-out.google.com!db6ni86igc.0!nntp.google.com!h15no4255436igd.0!postnews.google.com!glegroupsg2000goo.googlegroups.com!not-for-mail
Newsgroups: comp.lang.ada
Date: Fri, 16 Jan 2015 10:14:46 -0800 (PST)
Complaints-To: groups-abuse@google.com
Injection-Info: glegroupsg2000goo.googlegroups.com;
 posting-host=2602:306:3784:5b10:dab:62f7:989a:f7e8;
 posting-account=yiWntAoAAAC1KqC_shmxJYv07B9l6LNU
NNTP-Posting-Host: 2602:306:3784:5b10:dab:62f7:989a:f7e8
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <09c99540-710e-421b-af3a-40068e41cd2e@googlegroups.com>
Subject: Example of using HTML with Gnoga for UI layouts
From: David Botton <david@botton.com>
Injection-Date: Fri, 16 Jan 2015 18:14:46 +0000
Content-Type: text/plain; charset=ISO-8859-1
Xref: news.eternal-september.org comp.lang.ada:24595
Date: 2015-01-16T10:14:46-08:00
List-Id: <comp.lang.ada>

Since it came up earlier on CLA abaout using any HTML editor as a GUI editor for Gnoga. I wanted to give a quick example of using HTML together with Gnoga.

This example will create a classic IDE type UI with a top, bottom, left and fill panel.

As a bonus, the left panel is even resizable and a little icon shows in the bottom right of the left panel for dragging.

I'm working on various new layout views since ideally no one should "have to" use HTML. But certainly one can and to advantage.

David Botton



with Gnoga.Application.Singleton;
with Gnoga.Gui.Base;
with Gnoga.Gui.Element;
with Gnoga.Gui.Window;
with Gnoga.Gui.View;
with Gnoga.Types.Colors;

procedure HTML_Bind_Example is
   use Gnoga.Gui.Element;
   use Gnoga.Types.Colors;

   Main_Window : Gnoga.Gui.Window.Window_Type;
   Main_View   : Gnoga.Gui.View.View_Type;

   Display_Table : Gnoga.Gui.Element.Element_Type;
   Top_Panel     : Gnoga.Gui.View.View_Type;
   Left_Panel    : Gnoga.Gui.View.View_Type;
   Fill_Panel    : Gnoga.Gui.View.View_Type;
   Status_Panel  : Gnoga.Gui.View.View_Type;

begin
   Gnoga.Application.Open_URL;

   Gnoga.Application.Singleton.Initialize (Main_Window);
   
   Main_View.Put_HTML ("<table>" &
                         "<tr><td id='top_panel' colspan=2 />" &
                         "<tr>" &
                         "<td id='left_panel' />" &
                         "<td id='fill_panel' />" &
                         "</tr>" &
                         "<tr>" &
                         "<td id='left_panel2'>x</td>" &
                         "<td id='fill_panel2'>y</td>" &
                         "</tr>" &
                         "<tr><td id='status_panel' colspan=2 />" &
                         "</table>",
                       ID => "display_table");

   Display_Table.Attach_Using_Parent (Main_View, "display_table");
   Top_Panel.Attach_Using_Parent (Main_View, "top_panel");
   Left_Panel.Attach_Using_Parent (Main_View, "left_panel");
   Fill_Panel.Attach_Using_Parent (Main_View, "fill_panel");
   Status_Panel.Attach_Using_Parent (Main_View, "status_panel");

   Display_Table.Minimum_Width ("100%");
   Display_Table.Minimum_Height ("100%");

   Top_Panel.Height (50);
   Top_Panel.Background_Color (Orange);

   Left_Panel.Width (100);
   Left_Panel.Background_Color (Pink);
   Left_Panel.Overflow (Auto);
   Left_Panel.Resizable (Horizontal);
   
   Fill_Panel.Background_Color (Yellow_Green);

   Status_Panel.Height (50);
   Status_Panel.Background_Color (Green);

   Gnoga.Application.Singleton.Message_Loop;
end HTML_Bind_Example;