PureBasic Forums - English

Posted: **Tue Aug 02, 2022 4:05 pm**

I'm new to this and having difficulty understanding the relationship between the form and my code. I've developed with Visual Basic in the past, which I think stores the coordinates and settings of visual objects within their own file. Does PureBasic's designer store them in this way too?

What confuses me, is that when I add something to a blank form and then switch to the code, it opens a new tab called <New Form>* and tells me not to change that code (see below).

Code: Select all

; This code is automatically generated by the FormDesigner.
; Manual modification is possible to adjust existing commands, but anything else will be dropped when the code is compiled.
; Event procedures needs to be put in another source file.

I'm not sure what exactly can be modified. It says "manual modification is possible to adjust existing commands, but anything else will be dropped". So is it saying that I should add my business logic to another source file? If so, what is the relationship between these two files?

Is there anything such as a tutorial to get me started? I have followed several of the PureProgramming videos but they appear to cover only coding, unless I've missed it. Thanks.

Posted: **Tue Aug 02, 2022 5:22 pm**

Oso wrote: Tue Aug 02, 2022 4:05 pm I'm new to this and having difficulty understanding the relationship between the form and my code. I've developed with Visual Basic in the past, which I think stores the coordinates and settings of visual objects within their own file. Does PureBasic's designer store them in this way too?

Yes.

To start new form, don't write code directly.
Form > New Form
Draw your objects
Save file (as *.pbf)

In the main code, add at the beginning XInclude "xxxxx.pbf"
Then the rest of the code (Procedures and main (unique) loop)

Every time you switch
Form > Switch View/Design Code
The program rereads the ALL code or and fills in the interface or vice versa, it rewrites ALL code according to the interface data.

The only thing you can change directly in the code are the numeric values and the contents of the strings.

If you find a code on forum and want to modify it with the form designer:
! if you copy code to a blank file and save it as .pbf, IDE will not use it as form (can't switch).
You need to create form and then empty it.
- Form > New Form
- Switch to code view
- Select all (CTRL+A)
- Delete it
- Copy your code
- Save it (as *.pbf)
- Switch to visual mode
- Edit what you want

The FD works like some interface generators (in C) it is used to draw the interface but does not take care of the code.
It also has other advantages
- Generate menus (but not popups)
- Create and fill lists and tables
- Manage nested objects (tabs and splitters)
- Create the code to include image files (Form > Image Manager)
- Create procedure to resize objects according to anchors

Remember to right click on the objects to access the options.

This FD works very well (yes, take time to understand it)
I only know three shortcomings:
- The status bar does not use a variable (why?) so it always has ID 0 which is annoying when you have several windows.
- The button bar does not manage the new size of possible icons 24x24
- It does not manage popup menus (but it must be very complicated, I think)

Posted: **Wed Aug 03, 2022 12:21 am**

Marc56us wrote: Tue Aug 02, 2022 5:22 pm To start new form, don't write code directly.
Form > New Form
Draw your objects
Save file (as *.pbf)

Thanks for this. It's taking a bit of getting used to, but it's exciting stuff. From what I can see, Form Designer's object coordinates and other data describing each object are stored as programme code. So it isn't quite the same as Visual Basic, which stores coordinates and other data as simple parameters in an associated configuration file.

What confused me is that when I drew some objects in FD, then pressed F5 to run it, it actually displayed a working window. However, it seems that we shouldn't do that, from what you say. Rather, we should create and run another source code file with the .pb suffix, with XINCLUDEFILE to the .pbf.

What is the minimum that the .pb file should contain? Is the below correct which I figured out myself (and which seems to work okay)?

Code: Select all

XIncludeFile "formtest1.pbf"
OpenWindow_0()
Repeat
  event = WaitWindowEvent()
Until event = #PB_Event_CloseWindow

I noticed that I don't need to put any parameters in the call to OpenWindow_0(). I guessed that the parameters in the .pbf file are defaults...

Code: Select all

Procedure OpenWindow_0(x = 0, y = 0, width = 600, height = 400)

Marc56us wrote: Tue Aug 02, 2022 5:22 pm Remember to right click on the objects to access the options.

I assume from the above you're referring to the below options, i.e. from the designer?
- Delete
- Cut
- Copy
- Paste
- Align selected gadgets to the left... etc.

Posted: **Wed Aug 03, 2022 8:06 am**

Oso wrote: Wed Aug 03, 2022 12:21 am ...From what I can see, Form Designer's object coordinates and other data describing each object are stored as programme code.

Yes, the FD generate code as well as you do it if you want to type it yourself. He puts this code in a single file for edit it later (and so he can't mix it with the reste of code)

Oso wrote:What confused me is that when I drew some objects in FD, then pressed F5 to run it, it actually displayed a working window.

Pressing F5 in a single file will preview at real position it and you can test some functions like auto-rezise gadgets. You also see real skin (FD was not updated and show skin of Windows 8, not 10/11).
Il you set windows with #PB_Window_SizeGadget and change anchor of some gadgets to other than defaults (top, left), you can verify that gadgets do not overlap others.
But!
If you works in Project Mode, F5 does not Preview, but then compile and run the project.

Oso wrote:What is the minimum that the .pb file should contain? Is the below correct which I figured out myself (and which seems to work okay)?
Code: Select all
XIncludeFile "formtest1.pbf"
OpenWindow_0()
Repeat
  event = WaitWindowEvent()
Until event = #PB_Event_CloseWindow

Yes.
When you have a small program, you can even generate the code with the FD and then cut and paste the code into the main code file instead of XInclude (but if you wand to edit with FD them, you need to cut/copy to a .pbf)

Oso wrote:I noticed that I don't need to put any parameters in the call to OpenWindow_0(). I guessed that the parameters in the .pbf file are defaults...

Yes. Like any other Procedure if set with some Defaults values, you can omits its when calling.

Oso wrote: I assume from the above you're referring to the below options, i.e. from the designer?
- Delete
- Cut
- Copy
- Paste
- Align selected gadgets to the left... etc.

Yes, but some of them have others options
- ComboBox, ListView, Editor, Panel, TreeView: Edit Items
You can fill it with values, so you don't need to create procedure AddItem...
- ListIcon: Edit Items, EditColumns
Same and you can add colums and size of them, so you can easy (re)set defaut columns size and see its.

Posted: **Wed Aug 03, 2022 2:49 pm**

Marc56us wrote: Wed Aug 03, 2022 8:06 am Yes, the FD generate code as well as you do it if you want to type it yourself. He puts this code in a single file for edit it later (and so he can't mix it with the reste of code)

Many thanks @Marc56us I appreciate you explaining all this to me. This is clear to me now. It seems logical once it's understood. The splitting of the .PBF allows separation of the screen definitions from the main code logic. This is of course a good thing, to keep them separate and is more like the concept of MVC (model view controller).

Incidentally, I also followed the very well-written tutorial at https://www.purebasic.fr/english/viewtopic.php?t=64684 originally by @TI-994A It helped to read this also, but I mention for others who might be new to this, that one of the examples doesn't work quite the same now, because the designer no longer puts the event loop into the .PBF code.

In the example .PBF, it shows this...

Code: Select all

; Event procedures needs to be put in another source file.
;
Global Window_0
Global Button_0, Text_0, String_0
Declare buttonEvent(EventType)

Procedure OpenWindow_0(x = 0, y = 0, width = 300, height = 200)
  Window_0 = OpenWindow(#PB_Any, x, y, width, height, "My Window", #PB_Window_SystemMenu | #PB_Window_MinimizeGadget | #PB_Window_MaximizeGadget | #PB_Window_SizeGadget | #PB_Window_ScreenCentered)
  Button_0 = ButtonGadget(#PB_Any, 50, 120, 200, 30, "Click Me")
  Text_0 = TextGadget(#PB_Any, 50, 30, 200, 30, "This is a label...")
  String_0 = StringGadget(#PB_Any, 50, 70, 200, 30, "")
EndProcedure

Procedure Window_0_Events(event)
  Select event
    Case #PB_Event_CloseWindow
      ProcedureReturn #False
    Case #PB_Event_Menu
      Select EventMenu()
      EndSelect
    Case #PB_Event_Gadget
      Select EventGadget()
        Case Button_0
          buttonEvent(EventType())          
      EndSelect
  EndSelect
  ProcedureReturn #True
EndProcedure

OpenWindow_0()
Repeat
  event = WaitWindowEvent()
Until Window_0_Events(event) = #False
End

As the designer no longer creates the part of the code above beginning with OpenWindow_0(), you have to put this into the .PB main code, which will then be...

Code: Select all

XIncludeFile "MyForm.pbf"
Procedure buttonEvent(eventType.i)
  ;get the text from the text box (identifier = String_0)
  text$ = GetGadgetText(String_0)
  ;and place it in the label (identifier = Text_0)
  SetGadgetText(Text_0, text$)  
EndProcedure

OpenWindow_0()
Repeat
  event = WaitWindowEvent()
Until Window_0_Events(event) = #False
End

Posted: **Wed Aug 03, 2022 3:07 pm**

Oso wrote: Wed Aug 03, 2022 2:49 pm
Incidentally, I also followed the very well-written tutorial at https://www.purebasic.fr/english/viewtopic.php?t=64684 originally by @TI-994A

Hi Oso.
Since you are new here and looking into form design, you might want to check out ChrisR's 'IceDesign' form designer: https://www.purebasic.fr/english/viewtopic.php?t=74711

It suits me very well.

Posted: **Wed Aug 03, 2022 3:34 pm**

blueb wrote: Wed Aug 03, 2022 3:07 pm Hi Oso. Since you are new here and looking into form design, you might want to check out ChrisR's 'IceDesign' form designer: https://www.purebasic.fr/english/viewtopic.php?t=74711 It suits me very well.

Hi @blueb thanks for the link. I've read through some of the beginning of that thread and the more recent too. I noticed your comment "This will bring a modern look to our programs" at the top of page 23. Does IceDesign actually change the look and design of the compiled end result? As I see it, PureBasic generates its gadgets programmatically in code from what we drop onto the grid, for example...

Button_0 = ButtonGadget(#PB_Any, 40, 170, 150, 50, "Click Me")

So the visual result and style is presumably down to what is created by the PureBasic compiler? How does IceDesign change the look of that?

Posted: **Wed Aug 03, 2022 5:34 pm**

blueb wrote: Wed Aug 03, 2022 3:07 pm Since you are new here and looking into form design, you might want to check out ChrisR's 'IceDesign' form designer:
It suits me very well.

And don't forget PureVision Form Designer as another option

https://reelmedia.org/purevision/

Posted: **Wed Aug 03, 2022 10:22 pm**

Paul wrote: Wed Aug 03, 2022 5:34 pm
And don't forget PureVision Form Designer as another option
https://reelmedia.org/purevision/

Yes, absolutely the best.

PureBasic Forums - English

Understanding the relationship between the form and PureBasic code

Understanding the relationship between the form and PureBasic code

Re: Understanding the relationship between the form and PureBasic code

Re: Understanding the relationship between the form and PureBasic code

Re: Understanding the relationship between the form and PureBasic code

Re: Understanding the relationship between the form and PureBasic code

Re: Understanding the relationship between the form and PureBasic code

Re: Understanding the relationship between the form and PureBasic code

Re: Understanding the relationship between the form and PureBasic code

Re: Understanding the relationship between the form and PureBasic code