Alex Rivera | Logout

Combined percent+pixel div layout

Asked 2013-07-01T11:28:11.753
9

10 years ago I wrote a GUI layout engine in C++ and I'm curious how its functionality could be best approximated in the browser.

1. C++

In older GUI libraries (like Microsoft Windows'), the position and size of widgets is usually given by four numbers: left, top, width and height. My engine is different in that each of these numbers is doubled, so you have to specify eight numbers: relative left, absolute left; relative top, absolute top; relative width, absolute width; relative height and absolute height. The relative values should be given in percents of the width or height of the parent widget, and the absolute values should be given in pixels. In case of top-level windows, the "parent widget" is the desktop.

Examples:

a) 400 x 300 px window, centered on screen:

const int WINDOW_WIDTH = 400;
const int WINDOW_HEIGHT = 300;
CWindow mainWindow;
mainWindow.setPosition(0.5, -WINDOW_WIDTH / 2, 0.5, -WINDOW_HEIGHT / 2); 
mainWindow.setSize(0.0, WINDOW_WIDTH, 0.0, WINDOW_HEIGHT);

b) 150 px wide button container panel at the right edge of the main window: 

const int PANEL_WIDTH = 150;
CPanel buttonPanel(mainWindow);
buttonPanel.setPosition(1.0, -PANEL_WIDTH, 0.0, 0); 
buttonPanel.setSize(0.0, PANEL_WIDTH, 1.0, 0);

c) Three buttons (New, Open, Save) at the top of the container panel, and one button (Exit) at the bottom:

const int BUTTON_HEIGHT = 30;
CButton newButton(buttonPanel, "New");
newButton.setPosition(0.0, 0, 0.0, 0 * BUTTON_HEIGHT);
newButton.setSize(1.0, 0, 0.0, BUTTON_HEIGHT);
CButton openButton(buttonPanel, "Open");
openButton.setPosition(0.0, 0, 0.0, 1 * BUTTON_HEIGHT);
openButton.setSize(1.0,
javascript css html layout
Edit
Report

1 Answer

2

Short answer :

THIS IS BAD ! NEVER DO THAT.

Long answer :

This is not the way the web is supposed to work. Your application won't perform great because css rules will wait for the js to be downloaded and interpreted ; but this is not the main concern here. The main concerne is about you.

You will never be able to maintain a code like this one. When you build a simple application, you can easily go to a few thousands css rules. Impossible to read if organized this way. And I don't even mention the media queries stuff. The complexity of an app build this way would be way too high.

If you wanna go for the web, you have to embrace the web ; not to try your old desktop pplication developper tricks (which are greats for desktop application). For instance, if you want to put something in the top right corner, your go for : right: 0. Not WINDOW_WIDTH; if your ant to center somethin, you have many ways to do so ; but you don't make math for the position. Never ever do that.

As a webapplication developper, my advice is this one :

Go use compass : http://compass-style.org/

Actually no, go use Yeoman : http://yeoman.io/

Thoses tools are a bit complex to fully understand ; but it worth it soooo much.

Btw, never bind an onresizeevent like that. You have to add a debounce otherwise you will meet serious performances troubles.

answered 2013-07-01T12:22:07.560

Your Answer