GUI designing and positioning

[sanzilla]

hi all,
I'm developing a test engine( a system that helps students to
take assignments online). I'm developing this with the direct
win32 API.

Bellow is a screenshot of my test engine QuestionMaker interface.
That is not a dialog window, but is a main window.I have declared
a child window in a structure. which is like this.


http://img710.imageshack.us/img710/7945/question01.png

typedef struct maintagChildWindows
{
  HWND handle;
  char* lpszClassName;
  char* lpszCaption;
  DWORD dwAdditionalStyles;
  int iWindowID;
  int cx;
  int cy;
  int x;
  int y;
} mainChildWindows;

and I'm having these child windows. as an array.

mainChildWindows gChildWindows[]=
{
  NULL,TEXT("static"),TEXT("Question Type:"),WS_VISIBLE,701,105,10,10,11,
  NULL,TEXT("COMBOBOX"),NULL,CBS_DROPDOWNLIST|WS_VISIBLE|WS_TABSTOP|WS_VSCROLL,702,77,100,147,8,
  NULL,TEXT("static"),TEXT("Question Number"),WS_VISIBLE,703,126,9,9,30,
  NULL,TEXT("edit"),TEXT("hi"),ES_LEFT|WS_TABSTOP|WS_VISIBLE|ES_READONLY,704,23,12,147,25,
  NULL,TEXT("static"),TEXT("Question Body Text"),WS_VISIBLE,705,116,9,9,48,
  NULL,TEXT("edit"),TEXT(""),WS_VISIBLE|ES_LEFT|WS_VSCROLL|ES_AUTOVSCROLL|WS_VSCROLL|ES_MULTILINE|WS_TABSTOP,706,186,37,147,46,
  NULL,TEXT("static"),TEXT("Image"),WS_VISIBLE|WS_TABSTOP,707,137,12,6,95,
  NULL,TEXT("edit"),TEXT("Click Here to Add a Image"),WS_VISIBLE|ES_LEFT,708,197,12,147,91,
  NULL,TEXT("static"),TEXT("section"),WS_VISIBLE|SS_CENTER,709,207,22,98,117,
  NULL,TEXT("button"),TEXT(""),BS_CHECKBOX|BS_LEFT|WS_VISIBLE,710,9,12,14,146,
  NULL,TEXT("edit"),TEXT(""),ES_LEFT|WS_VISIBLE|WS_TABSTOP,711,197,12,33,146,
  NULL,TEXT("button"),TEXT(""),BS_LEFT|BS_CHECKBOX|WS_VISIBLE|WS_TABSTOP,712,9,12,13,161,
  NULL,TEXT("edit"),TEXT(""),ES_LEFT|WS_TABSTOP|WS_VISIBLE,713,197,12,33,162,
  NULL,TEXT("button"),TEXT(""),BS_LEFT|BS_CHECKBOX|WS_VISIBLE|WS_TABSTOP,714,9,12,13,178,
  NULL,TEXT("edit"),TEXT(""),ES_LEFT|WS_VISIBLE|WS_TABSTOP,715,197,15,33,178,
  NULL,TEXT("button"),TEXT(""),BS_CHECKBOX|BS_LEFT|WS_TABSTOP|WS_VISIBLE,716,9,12,14,195,
  NULL,TEXT("edit"),TEXT(""),WS_VISIBLE|ES_LEFT|WS_TABSTOP,717,193,15,34,195,
  NULL,TEXT("button"),TEXT(""),BS_CHECKBOX|WS_TABSTOP|BS_LEFT|WS_VISIBLE,718,9,12,14,214,
  NULL,TEXT("edit"),TEXT(""),WS_TABSTOP|BS_LEFT|WS_VISIBLE,719,197,15,34,214,
  NULL,TEXT("button"),TEXT("previous"),BS_PUSHBUTTON|WS_VISIBLE|BS_VCENTER|WS_TABSTOP,720,106,28,41,251,
  NULL,TEXT("button"),TEXT("Next"),BS_PUSHBUTTON|WS_VISIBLE|BS_VCENTER|WS_TABSTOP,721,106,28,183,250,
  NULL,TEXT("button"),TEXT("Save And Exit"),BS_PUSHBUTTON|WS_VISIBLE|BS_VCENTER|WS_TABSTOP,722,106,28,320,250
};

The look of the child windows and their width , height and x,y positions are sucks !
what I want to know whether there are any what you see is what you get designers to
get the x,y,width and height values and styles of the child windows?

Please note that this is not a dialog window. This is a main window.

--Thanks in advance--

[blackcoder41]

I think you are talking about C++ Builder from Borland. I think it is free before and not these days.

[sohguanh]

I don't do WinAPI GUI programming but in all UI based development, hard-coding co-ordinates is risky. If your user PC screen is set to different resolution, some of your UI elements maybe obscured or even clipped off.

So in most GUI SDK, they provide generic parameters when you can specify fill up the space, wrap the UI contents etc. Something like HTML CSS when we code width: 80% etc to indicate we want to use ratio when the browser screen is resized by user. It is 80% of the browser width and not say 80 pixels across.

For my UI based development, I prefer fluid layout over fixed layout for such reasons.

[some random dude]

All I do when editing things is trial and error. It might take some time but if you want a program to be where you want it to be, then it's worth it. Just edit the values by 50, or 100 each time.

Or if you want you can have text be printed to the screen of the x and y axis values, the the height and width of the program. But I don't know how to do that, but I'm 99% sure it is possible.

[blackcoder41]

Or you can just use Image manipulation program like photoshop and gimp or even paint to draw your layout, these programs show the coordinates in the status bar right? We'll it's better than nothing.

[sanzilla]

>>Or you can just use Image manipulation program like photoshop and gimp or even paint to draw your layout, these programs show the coordinates in the status bar right? We'll it's better than nothing.

I have tried this idea before but I want to say that it's not working. The screen coordinates
of win32 are different from the photoshop's image pixel values. But you get a rough idea
about the relative positions and relative with and height of child windows relative to the
main window height and width.

I taught about the non-fixed layout which is dynamic.But I want to specially mention that
I have alrady taken the decision to make this static layout.May be I can use different
x,y and width and height values for different screen resolutions.

By the way,what I asked is a what you see is what you get editor for the win32 GUI
main windows (not dialog windows, a resource editor already have). and perfreence is
a opensource free one.any idea boys?

[happyblade]

call the Win32 function GetCursorPos to get the mouse cords and know where things should go.

If you mean hardcoding is risky because of the different resolutions (eg your going fullscreen) and things can turn out wierd then use

//width
int cx = GetSystemMetrics(SM_CXSCREEN);

// height
   int cy = GetSystemMetrics(SM_CYSCREEN);

that will get the screen cords. After that just divide by them.