The file JaxGUI.EXE will run JaxGUI1.exe in WinXP, 2000, ME, 98 and 95. Its a config program that will
change full screen to a Window, set the font to 8x12 Raster and uncheck EditMode,
if it's checked. This setup seems to look good in 800x600 screens.
If you have a Higher Resolution,
you can change the font to larger by editing the JaxGUI.CWC
file with a text editor or Notepad. The Raster fonts looks better, but if you can't
find the Size you want, you can change
BMP to Truetype and change 8x12 to 14 or 16 or 18 or any size supported by Truetype.
This Software is Free, there is no charge for it. I wrote it for myself, but I thought I would share with the rest who wants to give it a try. Its for those who don't already have a RAD type program that outputs the SDK style examples.
Use this software at you own risk,
Jerry Fielden will not be responsible for any
damages.
INTRODUCTION
I don't do enough of this type of programming to remember how it goes, so to keep from having to search through all that material and relearn it again and then apply it in the correct way, I though I would create something that would remind me. I guess I got carried away a little bit with those different shaped windows. A lot of it, I probably will never use again, but its there in case I ever need it.
It was written for PBCC in PBCC.
Some of the selections like different shaped windows, I think will only work in the newer type windows.
JaxGUI is a Sample maker. It makes Samples of A Parent Window
with Child windows using SDK style programming. A person could design their own Window Sample with as many
Controls/Child-Windows on a Parent that it will hold.
You can make a Parent with One Control to see how it looks or you can fill the Window up with Controls, as many as will fit on the Parent. You can leave out the controls to see how a parent would look by itself. The Parent can be as large as the Monitor Screen or as small as a Playing Card. There's a Grid and a selection tool that will aid you in selecting your sizes The size in pixels is displayed at the bottom left.
You can color, make transparent, select different shapes, choose popups, and etc. by Right clicking on the parent's menu Button. Right clicking on Parent also lets you choose a 2 color Gradient that covers the Parent client area. Smaller rectangle Gradients can be added right clicking on the Rectangle button.
It has 3 Menu Makers that makes a Single level drop down Menu, a POPUP menu launched by a Button, and a RightClick PopUp Menu.
You can Preview your Window after each control is installed on the Parent's Grid by Clicking on PreView. You are getting the actual Window with already installed Controls. JaxGUI might have to be in the compiler's directory for Preview to work.
You can Preview the Code by clicking on CodeView . A copy of what you have already done is put in your PBCC editor for your Viewing or Testing.
Each Control Name, except for
Button which has a different kind of Sub Menu, has Sub Menus where you can
Change Background and Foreground Colors, Select fonts, and change Styles.
Clicking the Right Mouse Button on their buttons displays their Sub Menus.
You can decorate the Background
with Circles, Ovals, Round Rectangles,
and hatch lines from their selections on the Bar. It has its Sub Menus also for
Pen style, Pen Color, Pen width, Hatch line styles, Etc.
You can put etched lines on the
Parent by using the Static control's SS Style Menu.
A MessageBox
maker is at the bottom of the screen, it has menus where you can select an icon,
Styles, Select width of Message box, Type the Message in a
Editbox, and type a Caption in a Editbox.
The generated code is put in the Window's Clipboard.
The Bottom Menu Bar also contains
a ProgressBar, a Horizontal TrackBar
and a Vertical TrackBar. Along with the Rectangles,
These controls won't display inside any Frames or frame types.
F1 Key is supported for a Help Menu
Esc Key is supported to end the program without completing its task or
exiting the help menu.
When you click on OK, the Program will close automatically and leave your generated code in the Clipboard. You are also asked if you want to save.
When I say Click on something, what I mean is to use the
Left
Mouse Button. I will sometimes say "Left Click", but a lot of the
times I will say "Click".
When I want you to use the Right Mouse Button to click
on
something, I will always say "Right Click". Right click is
used on most of
the buttons on the Menu to get its extended menu.
Right Click is also used in the Styles menus to get their
descriptions.
Open a Previous Window
If you want to Work on a Previous Window, when the message
box prompts you, Browse to the jExamples
directory and select files with the .SAV extensions in the Open dialog box.
CREATE A PARENT
The Grid on the screen will represent your Monitor screen.
You can select an area of the Grid that will represent the size of a Parent you
want.
Don't try to select the Parent Area by dragging the Mouse over it, just
click on the two corners and click on Parent on the Bar. Even though a frame
will appear after your first click, you still have to do the second click
also.
If you move the Mouse Arrow to the left of the Starting
point, it will unselect the starting point, so you can reselect it. It works the
same way with child windows. You can only do this if you haven't clicked the
second time on the Ending point when selecting an area for a control or
parent.
The grid isn't as large as the Monitor client area so
whatever you select for an area will be larger in window size than what is shown
on the Grid. Pixel size is shown at the bottom left, so you can judge by it.
Coloring the Parent can be done by Right Clicking on the Parent Button, after selecting an area. There's a few colors that you can choose from on the Parents extended menu. Colors like Black, White, Gray, etc can be selected directly from the menu. Those colors can be used when creating the Parent and doen't need to be painted on.
The rest of the colors which can be selected from the color picker below can be painted on by clicking on Color Parent on the same Parent menu.
You can now click on
Preview to see what your
Parent will look like.
When you are through looking at it, click on the system close button in the top right corner. This will take you back to the JaxGUI program.
Gradient Fill uses the same Color Picker above. It lets you pick two different colors. After you pick your first color, it closes when you click on OK and then comes back up so you can pick another color. Although you can pick any color, a dark and light color combination would probably make a better Fill.
There is two different Fills which you can choose. If you chose the Horizontal Gradient fill, it starts from a side and fills to the other side. If you choose the Vertical fill, it starts from the top and fills to the bottom.
POPUPs can
be created by right clicking on the Parent button.
If you use DLG_Frame with your Popups, you can click on the visible parts of the
frame to drag the popup around since it doesn't have a title bar.
Any portion of the window that is not covered by a control
can be used to move a popup
windows around.
If you selected PopUp without a frame, you will have to depend on
visible portions of the parent or static parts to drag it around if you want to
move it. You won't be able to drag it from a Button or other controls. You can
drag it by the static control areas. Areas painted using Rectangles or
Ovals/circles can also be used for moving the Window.
PopUpWindow is available from the Parent's extended menu
by Right
clicking on Parent, and clicking on the POPUPWINDOW or POPUP Selections.
Code to use the Esc Key is automatically added when you
choose any of the POPUP styles, whether it's an Extended menu selection or a selection from the
Styles menu.
Due to the missing Title Bar, code is also added for
dragging the window around with the mouse pointer.
An Example for creating a Popup is included in the Buttons
Section. It
uses the Static Control with graphics on it which will resize the Parent to the
same size of the graphics.
Drop Down Menu
JaxGUI can make a Menu for your Parent in only a few easy
steps.
1. Select the top row of your Parent Grid, or any area for
that matter,
it doesn't make any difference since the area selection will be deleted
when the menu is completed.
2. Click on Menu Button at the bottom of grid.
4. For the first drop, type a Name that goes on
the Bar. If you were making a Menu for an Editor, you would probably Type ‘File’
without the quote marks. Now click on the ‘Insert’ Button, shown
in the Graphics below.
Only do this
when you want to Insert a name on
the Top Bar.
5. Next type
all the selections that would go under File and click on ‘Append’ or Hit Enter after each
one. You would probably type something like this.
Open..........then click on ‘Append’ or
hit Enter
Save............ " " "
Append or hit
Enter
Exit............. ." " "
Append or hit
Enter
6. To add
‘Edit’ that is next to ‘File’ on the Bar, type Edit and click on
‘Insert’ again. This
Inserts Edit on the Bar.
7. Just like
step 4., you would probably enter
Selections like Copy, Cut, Paste, Find, etc... that will be Appended to `Edit' and you would click
on Append or hit Enter
after each one.
8. To put more Names
on the Bar, Type the Name and then Click on Insert and then type all the selections to Append to
it.
9. When you are
finished, click on done.
When entering
names, You will have to be careful
to not click on the wrong Button. You can correct it later in the code that's
generated, or you'll have to end the program and start over.
If you are making a menu for an Edit control, you would want to create your Edit control first so the Menu Maker can get its ID number. When Cut, Copy, Paste, etc. is appended it will use that ID number.
If you appended names like Open, Save, Exit, Undo, Cut, Copy, Paste or Clear, the program will include some example code in the source. The Open and Save examples only gives you a Open/Save dialog, you'll have to write your Open and Save functions to actually load some files. The rest gives you working code that you don't need to add to. This only works for your Program's Drop Down Menu, not the Button launched or RightClick PopUps.
If you forget to put the menu in at the start, you can do it anytime before you click on the OK button to generate the Code. You can also select any Area Even if it over an area already used. You only need to select an Area to get back to the Button selection mode so you can click on Menu.
RightClick Menu
Clicking on Right Click Menu after clicking on the Menu Button at the bottom bar will give you a Box where you can fill in the selections for your menu.
Button Launched Popup Menu
To get a Popup Menu launched by a button, you have to go to the Buttons menu and click on Ex by Enter Name, Type a name to put on your button and hit Enter. The Buttons Extended menu is launched, there you would click on Trigger Popup Menu and a box is provided for you to fill in the Selection Names.
Create Controls
After you have your parent you can now place Controls on
its grid. It's
done the same way as the parent, clicking on TopLeft and Bottom Right corners. You would want to
stay on the parent's Grid though.
When you are through selecting the corners, Click on the Control's name at the
Bottom. You will get the Default when they are Left Clicked.
If you were to Right click on the Control name Button, it
would display its sub menu where you can change Colors and fonts if it's on the
Menu. You
can't change colors on every control, just the ones that has it listed on the
Menu. Most
control’s extended menu are
similar to the one shown in the ListBox section. Some will have more
selection than others. All will mark each selection you have completed so you
won’t do it again.
The Controls that usually occupy one row, like buttons, checkboxes, radiobuttons, etc, areas are marked by hatch marks on the grid when you are selecting only one row for their areas.
If you have selected an area on the grid but haven't
clicked on a control yet, you can click on the grid anywhere except on a
button and that will unselect that area.
Combination Box
After you have a parent grid showing, select an area that will represent
your combo’s width and heights.
It will only occupy 2 rows on the grid after the selection
is made.
If you were to click on Preview,
Only a corner of the preview is shown that contains the
combo box.
Radio Buttons and Checkboxes are similar. You only need to
select one Row for height unless you are doing multiple line text.
We are doing a checkbox shown below. We will left click
on CheckBx to get the default.
If we Right click on CheckBx, we would get its submenu where we
could select to use pushbuttons, flatbuttons, change fonts, and select
different styles.
Next Enter
the text that goes beside the check box.
The parent Grid would show :
And a corner of preview shows
See Buttons below about adding an OK button to generate
code that checks if it is checked.
Like the Combo Box, you would select an area in the similar
fastion. Select your width and
height, and if you want to use the default, Leftclick on the ListBox Button.
ListBox has been upgraded to make multiple selections in version
2.2. You can
drag the mouse cursor down and get several selections at a time or you can pick
at random.
When you Pick
at random, it doesn’t keep all random picks highlighted although they are still
selected. Don’t use the Shift or Control Keys with
The OK Button from the button menu stores the pick info, so
it will need to be created last.
To show you how to do different font and change colors,
we’ll Right click on it to get its menu.
We placed our listbox underneath the combo box.
From the menu below, when you click on change Font, a fontpicker is displayed where you can
pick different fonts in different styles.
Clicking on Background color and Foreground color will produce a colorpicker like the one shown in Parent section
above.
The Buttons has a menu to select commonly used Buttons,
Like ‘Ok’ and ‘Close’…
Etc….
To get to the Button's Extended Menu, click on ‘Ex’. From this menu you can select Flat buttons, Bitmaps in
Buttons, Hidden Buttons in graphic and different Fonts.
By clicking on ‘Resize Image>Button’, you can put a Bitmap on
your Button. It will be stretched or swrink to fit the button. So choose your sizes
carefully, at least the same ratio as the original Bitmap when you select an
area on the Grid or close to it, or it might look kind of funky.
If you click on ‘Resize Button>Image’, it will make the button fit
the Bitmap. So you don't want to use a real large Bitmap, it may not fit on the
Parent or it could crash into other controls that’s in the way.
When you add a CLOSE button, it will generate
code that will close the window.
Adding an OK
Button will add code that will gather text typed in the
Edit Controls and Richedit
Controls. It also adds code that will see which Check box or Radio button is
checked, along with selections from Listview. This OK button must be added Last after any of them before this will work. If
you add the OK button before any of it’s supported controls, it won’t gather
their info and generate the code to do this. All this is displayed in a
Message box from the compiled EXE. Only one Ok button is needed.
This is linked to the Player_Tutor.htm file, when through viewing click on the Back arrow
The Buttons
Menu has 4 buttons used for playing
There's a
html Tutor that can be downloaded seperately that shows how to do it using the
Pixel cordinates mentioned above.
You can choose from 4 different examples, just click on the
one you want.
The topleft
example loads from a FILE. It first writes an example to the file and then loads
from it. If you want to except the
defaults, just hit enter after each one the flashing cursor is located
on.
There's a listview that loads from an ARRAY.
There's one that loads from DATA.
A single wide column one that Loads from a STRING.
New:
You can now add code that will get the text from items that
you clicked on with the Left Mouse button. It also generate code that allows you to Edit Items if you
were to Right
Click on the items. It will generate this extra code when you Right click on
the LView Button and click on Edit/Select
Items.
It works like the Edit control. It doesn't yet have an Extended
Menu.
See Buttons about adding an OK button to generate code that gets it’s text.
Progress Bar
It is handled same as the other controls. You can make it
as tall as your parent if you want. Colors and Range can be changed by Right
clicking on the PBar Button.
Vertical TrackBar
A Vertical TrackBar and a Horizontal TrackBar selection have been added to the Menu.
Alow 4 spaces for the vertical
trackbar width. 4 spaces on the
Grid would look this:
. . . . It
would be 4 dots on the grid
1234
You don't have to make it 5 spaces, you can make it 1 space
wide and the program will select the 5 space width for you. Even if you made it
20 spaces wide, the program would only make it 5 spaces on the Grid because
thats all that's needed.
Just try to keep it 4 spaces away from the Left edge of
another Control or the Right Edge of the Parent Grid to keep it from overlaping.
The depth, you will have to select on the grid yourself.
Horizontal TrackBar
The Horizontal TrackBar only takes up 2 rows for its depth. If you
select 10 rows for it depth, it will only take up 2 on the Grid. Choose any
width you want.
STATIC CONTROL
When you select a Area and Right click on the Static button, you can do
several things to the Static control, like changing its colors, stretching
bitmaps to fit the area selected, changing the size of the static control area to same as
the Bitmaps and changing the Parent size to same as the Static control
that has a Graphic.
Above in BUTTONS is one example for placing graphics on a
Static control. So when you click on objects in a picture thats resides on a static control, a button clicked
message can be sent to the owner.
ETCHED LINES
The Static Control can be used to display etched lines that
can be used for separators, etc.
1. First select a single column or row at any length or
height on the Parent. Even if you select more than a single row or column, it
will revert back to a single.
2. Right Click on the
Static button for its
extended Menu.
3. Click on SS STYLE to get its menu.
4. Click on SS_ETCHEDHORZ in the menu below
if you are doing Horizontal, else click on SS_ETCHEDVERT for Vertical.
5. Click on ~Ok~ to complete it.
The Etched Vertical is done the same way, except select a Vertical area on the parent grid instead.
Rectangles
You can paint portions of your Parent with Rectangles that uses solid colors with or without Pen, or hatch lines, or Gradient Fills.
If you Left click on the Rectangle Button, you will get the default solid color with a black line around it. By right clicking on its button, you can change the Colors, add hatch lines, Pen Color and width.
Gradient Fills in Rectangle
Right Clicking on Rectangle lets you choose 2 types of Gradient fills, which is Horizontal and Vertical.
If you like to see vertical bars on your window, Gradient fill makes the best looking ones around.
1. To make a Vertical Bar, on the Grid you would select 1 or 2 colums and make 1/2 of the bar on the Grid.
2. After Right clicking on Rectangle, you would select Horizontal Fill, since it fills from Left to Right.
3. When the color picker comes, choose a Dark color first and then a choose light one when it comes back the second time. White is a good light color to choose, it goes good with bars.
4. Click on Finish and this complets the first half.
5. Do steps 1 through 4 again, except chose the Light color first this time, using the same 2 colors.
If you do a Horizontal Bar, its done the same way, except you would Select a horizontal bar area on the Grid and a Vertical fill in Rectangles.
If you paint an area with a Gradient Fill and later paint portions of the same area using the Hatch or solid colors from Rectangle menu, Rounded Rectangle menu, or the Oval menu, the gradient fill will cover the rest up when you try to move the window around with the mouse. You can do smaller gradient fills on top of the larger areas alright, and it will stick when you move the window around. It seem like the Gradient Fills get repainted but the regular fills doesn't, when moving.
Round Rectangles
Round Rectangles is done the same way and has the same choices as the Rectangles Except there is no Gradient Fills.
You can change the rounded corners in the Right Click menu.
Circles / Ovals
Circles / Ovals has the same choices as the Rectangle except for the Gradient Fills.
When you select a rectangular area on the Grid, you get an Oval. When you select a square area, you get a Circle.
You can preview what you have already placed on the Parent
Grid by hitting the Enter Key or clicking on the PreView Button. When you are through looking,
click on the Close Button at the top right of your Previewed window. If you are
previewing a POPUP window, hit the Esc
key.
For Preview Window to work you will have to unzip JaxGUI into the Compiler's Directory.
Clicking on CodeView lets you preview your code with CCEDIT, Jfishpro or Notepad. If
none of these IDEs are in the
FBC.EXE directory it will use Notepad.
If you want to work on a window that you’ve completed in
JaxGUI
in one of the IDEs,
you would want to use Save As and rename
it. The temp file that JaxGui uses should be deleted when you
exit the editor.
Styles are located on the extended menus when you Right
click on a Control Button or the Parent Button.
If you add any styles, put back the ones that cause the
window to display. The Default styles are listed just above the Buttons at the
bottom menu bar.
Some controls can have Scroll Bars added, thick frames, etc, just by
changing the styles.
To see style described, after selecting an area on the
Grid, right click on a Control Button and Left click on
one of the
Styles. You would Left click on a style to select it, but to read the
definition; you would right click on it.
Etched Lines, shown above, is an example of using the SS_styles, which is for the Static Control.
SS_SUNKEN is another style used with the Static Control which gives the Static Control a sunken border.
When you click on OK, the Generated code is placed in the Window's clipboard. All you need to do is paste it in an IDE.
Saving / Opening
You can save your created window to a .SAV file by clicking on Yes when asked after clicking on the Ok button. You can reopen this file when you restart up EzyGui again.
The Message Box Maker will let you Create message boxes,
just about the size you want. Message box is separate from the rest, but you use
the grid to select a width for the message box. Height is determined by how much
text is entered into the textbox provided. You can’t create a Window while
making a Message Box and vice versa.
1. Select an Area on the Grid, just the size you want and
then click on MsgBox instead of Parent.
2. Select an Icon and then Select a Button. The default
button is the OK Button, if you don't select one.
3. To insure that the MessageBox get to the Top, Select TOPMOST from the
Flags Menu.
4. Type your message into the Editbox that is provided.
5. If you want, you can now click on Caption and enter
something in the title bar.
6. Message Boxes should work in the console mode also.
7. When you are done, the Program will shut down and the
generated Messagebox will be in
the Window's Clipboard.
Send bug reports to fieldens@excite.com.