Здравствуйте, fuxx, Вы писали:
Ты забыл про просто HTML.
Как средство layout он работает хорошо.
Вот кстати мой новый проект: Harmonia project —
UI framework для
D который включает HTML engine (Open Source).
Само демо
здесь
Вот так выглядит этот demo внутри:
import harmonia.ui.application;
import harmonia.ui.window;
import harmonia.ui.widget;
import harmonia.ui.events;
import harmonia.ui.controls.editbox;
import harmonia.ui.controls.scrollbar;
import harmonia.ui.controls.listbox;
import harmonia.ui.controls.buttons;
import harmonia.html.view;
import harmonia.gx.images;
//|
//| static module ctor
//|
//| Harmonia way to setup GUI application
//|
static this()
{
Application.onStart =
// Runtime started. Statics were intitalized.
// Voulez-vous dancer?
function void()
{
// create MainWindow here
(new MyWindow()).state = Window.STATE.SHOWN;
};
Application.onStop =
// All windows closed so do graceful quit.
function void()
{
// close files, etc.
};
}
class MyWindow: Window
{
Image im;
HtmlPanel hp;
static Command cmdTest;
static this()
{
cmdTest = new Command("test", "Test", "Tests command button");
}
this()
{
// button on top left corner
Button b = new CommandButton(cmdTest);
this ~= b;
b.place = rect(10,10,80,30);
// listbox below
ListBox lb = new ListBox();
this ~= lb;
lb.place = rect(10,40,80,140);
// fill it by items
static string[] items =
[
"One",
"Two",
"Three",
"Four",
"Five",
"Six Six Six Six Six Six Six Six",
"Seven",
"Eight",
];
lb.addItems( items );
// HTML panel
hp = new HtmlPanel();
this ~= hp;
hp.load
("<HTML>
<H1 padding=3px back-color='edit dialog'>H1:This is <I>HTML text</I> loaded into <B>HTMLPanel</B> - simple non scrollable HTML container.</H1>
<P>Inline image:<IMG src='test.png'/> and <CODE> code example; </CODE></P>
<P height=100% padding=10pt border-width=3px border-style='solid none none none' border-color=dialog-shadow >
This paragraph declared as <CODE><P height=100%></CODE>. This means that it will take 100% of height left from other elements.
This is a major difference from standard HTML - percents here are <I>percents from free space</I>.
<BR/>Notice 3 pixel bar at the left side - it is left border of the paragraph. Such percents are used instead of flex'es in XUL.</P>
<TABLE cellspacing=10px cellpadding=10px padding=10px border-width=1px border-style=solid border-color=dialog-shadow >
<TR>
<TD width=30%>Inline editbox: <INPUT type=text value='hello world' width=100px />
and button:<INPUT type=button value='button' width=60px />
and combobox:
<INPUT type=select width=60px>
<OPTION>One</OPTION>
<OPTION>Two</OPTION>
<OPTION>Three</OPTION>
<OPTION>Four</OPTION>
<OPTION>Five</OPTION>
<OPTION>Six Six Six Six Six Six Six Six</OPTION>
<OPTION>Seven</OPTION>
<OPTION>Eight</OPTION>
<OPTION>Nine</OPTION>
<OPTION>Ten</OPTION>
</INPUT>
</TD>
<TD>two</TD>
<TD width=40 back-color='dialog-light scrollbar' border='1px solid dialog-shadow'>1</TD>
</TR>
<TR>
<TD border='1px solid dialog-shadow' text-align=right>right aligned cell with border</TD>
<TD>four</TD>
<TD back-color='dialog-light scrollbar' border='1px solid dialog-shadow'>2</TD>
</TR>
<TR>
<TD colspan=2 back-color='dialog-light dialog-shadow'>colspan=2, table cells with gradient backgrounds</TD>
<TD back-color='dialog-light dialog-light scrollbar dialog-shadow'>3</TD>
</TR>
</TABLE>
<P>Hyperlink test: <A href='http://terrainformatica.com'>Terra Informatica</A></P>
</HTML>");
hp.place = rect(100,10,220,300);
im = Image.load("pngtest.png");
//assert(im !== null);
}
override void drawContent(Graphics g)
{
super.drawContent(g);
if(im !== null)
{
// draw the Bird - PNG with alpha
auto Graphics ig = new Graphics(im);
rect src = rect(im.dimension);
point dst = place.pointOf(9); // top right corner, see NUM keypad why 9
dst.x -= im.dimension.x;
g.copyRect(dst,src,ig);
}
}
override void doLayout()
{
rect r = hp.place;
r.corner = place.corner - 10;
hp.place = r;
}
bool on(EventCommand evt)
{
if(evt.cmd is cmdTest && evt.exec)
{
Window popw = new Window(TYPE.POPUP, this);
popw.state = STATE.SHOWN;
return true;
}
return false;
} // return true to stop traversing
}
