B4J Tutorial Simple Layout Designer (SLD) B4J application.

Simple Layout Designer (SLD) B4J application.

In this tutorial you can learn how to create a layout using the Simple Layout Designer application.
sld00.png


You can place labels and panes on the main pane using the components menu.

Each component can be moved to another position. When you hover over the edge or corner of the component (blue edge) then you can click and drag that edge or corner to resize the component.

The order of creating the components is important because the last created component can be placed on top of another component. Labels and panes can be placed on top of a pane or another label.

You can attach labels to a selected pane by clicking on the menu item “Attach” and detach them from the pane when you don’t need the attachment any more. Components can be removed.

The layouts can be saved or loaded. The file extension is *.sld. The content is a plain JSON text (a list of maps) and can be edited outside of the application.

To select a component you just click on it. In the Component info panel you can see and change the property settings for that component.

The main pane or another selected pane can be printed. When you use a PDF printer application then you can select the paper format (A4, A3 or A2) and the orientation (portrait or landscape). When you print on a A2 paper in portrait you get 4 A4 pages! (see the sld_doc example).

The project zip-file is attached.

When you first run the application the documentation file and its images are copied to the layoutfiles and imagefiles folders from the project folder usually under C:/Users/yourname/AppData/Roaming/simple_layout_designer/.
Replace “yourname” with your actual user name.

If you load the sld_doc.sld file in the application you will see that the images do not appear yet. Click on each label, look at the image file name in the component info panel, click on the image select button and select the correct image. After all the modifications are done then you can save the layout file and replace the old sld_doc.sld file. The next time you start the application the documentation should be complete.

Now you have a tool to be creative with layouts. If you think of any improvements that need to be made, just let me know or share your additions. It would be nice if we could work together on this application to make it even better!

And of course you can find an example on how to use the layouts you create in the attached file. Unzip the sld_load_example.zip file to test it out.

Happy coding!
 

Attachments

  • simple_layout_designer.zip
    270.5 KB · Views: 80
  • sld_load_example.zip
    115.4 KB · Views: 71

aeric

Expert
Licensed User
Longtime User
Very nice project. Thank you for sharing this great project.
I think a component tree is a good addition.
 

PaulMeuris

Active Member
Licensed User
I have noticed there is a little bug in the application if you try to attach labels for the second time to the same pane.
A duplicate children error will be raised. To fix this we first detach the labels before attaching them again.

If you insert a call to the detach_node_from_pane subroutine after the test in the attach_node_to_pane subroutine, then this issue will be resolved.
See below line 3 for the code snippet.
bugfix:
Private Sub attach_node_to_pane
    If currnode.IsInitialized Then
        detach_node_from_pane
Sorry for the inconvenience.
 

PaulMeuris

Active Member
Licensed User
In the next release i plan to fix bugs and add some functionalities.
The application will crash if you remove a component after you have attached labels to a pane.
The reason for that is that the node count for the remaining components is no longer accurate.
The next version will contain re-count code.
 

Magma

Expert
Licensed User
Longtime User
💡 an idea, you can have a GRID with dots and automatically snap to grid...
💡 for the properties, you can use b4xpreferencesdialog or a clv (as i am seeing you are "master" of it) - so will be easier to extra properties for different components (Select case, may be a json for every component)
 
Last edited:

PaulMeuris

Active Member
Licensed User
Thank you @aeric and @Magma for the great idea's!
They are added to the todo list.
I'm working on adding drawing components to the components list.
If you want to speed up the resizing of the components then you can set the "gap" variable to a higher value like for instance 5.
You can find this variable in the subroutines resize_label and resize_pane.
The positioning of the components is a little less accurate then.
The "snap to grid" feature will allow you to align the components better.
As always, happy coding!
 

kimstudio

Active Member
Licensed User
Longtime User
Hi Paul, what's the advantage of using this comparing to internal designer? or it is a good code example?

btw, steve has one propertysheet control in forum years ago which I like a lot as it saves to avoid to use fxcontrols jar.
 
Last edited:

Magma

Expert
Licensed User
Longtime User
propertysheet
this: ?

... which... trying to search steve's propertysheet but can't find it... ?



* Having a designer... is something that help many developers... for example create custom printer forms for their apps... or "custom" apps using the design you will create custom... or a DTP Program :)... the uses are unlimited... :)
 

Magma

Expert
Licensed User
Longtime User
...before some years... had a try...


but i am not having the time to continue that...
 

PaulMeuris

Active Member
Licensed User
what's the advantage of using this comparing to internal designer? or it is a good code example?
Let's say that its going to be a practical coding example that can be used to create layouts of all kinds (B4X layout, magazine layout, forms layout, document layout, pamflet layout, simple drawing, ...).
Initially i had this idea from a question i saw from @aeric on the forum about embedding a layout designer in a custom application.
So the layout you create can be used in a B4X application as the example shows but it's not a replacement for the great internal designer in the B4X IDE's.
 

PaulMeuris

Active Member
Licensed User
A first update of the SLD application...
I have added a few canvas components. You can put a bitmap, circle, line, rectangle or text in your layout. These components are not yet saved to the layout file.
An example:
1674791095796.png

Each drawing is placed on a canvas that is linked to a pane. By resizing the pane the drawing is resized as well. Color and border properties are used.
The opacity of the background color can be used to hide the color of give it a touch of visibility.
The re-count code is present in this version.
Enjoy and happy coding!
See the attached file for the source code.
 

Attachments

  • simple_layout_designer_v2.zip
    271.3 KB · Views: 19

aeric

Expert
Licensed User
Longtime User
Let's say that its going to be a practical coding example that can be used to create layouts of all kinds (B4X layout, magazine layout, forms layout, document layout, pamflet layout, simple drawing, ...).
Initially i had this idea from a question i saw from @aeric on the forum about embedding a layout designer in a custom application.
So the layout you create can be used in a B4X application as the example shows but it's not a replacement for the great internal designer in the B4X IDE's.

One of the use case is to design a table layout for your Restaurant Point of Sales. I took an example from an existing software.

1674798600684.png


Another one is Report Designer for Receipt or Kitchen Order Ticket
1674799173824.png


There are commercial components like Crystal Reports or DevExpress but for B4J development, we are quite limited. Only option I can think of for report designer is jasperReports but it is also a paid product.
 

aeric

Expert
Licensed User
Longtime User
One suggestion, instead of putting all the code in Main module, I think it is better to use Class or Code module. Then you can create a CustomView or B4X XUI view library.
 

PaulMeuris

Active Member
Licensed User
Yes, @aeric as the application grows it will be better to have classes for each major component: a label class, a pane class, a canvas class, ...
This will be one of the next steps in the development process...
Thank you.
 

PaulMeuris

Active Member
Licensed User
A minor update...
In this update the components will be "snapped" to the grid.
The grid has changed a little bit and each square of the grid is 20 by 20 pixels (2.5 = 100 pixels, 12.5 = 500 pixels).
The grid will not be printed as it is not connected to the main pane.
See the attached file for the source code.
Happy coding!
 

Attachments

  • simple_layout_designer_v3.zip
    271.4 KB · Views: 26

PaulMeuris

Active Member
Licensed User
And here is the next update...
todo20230130.PNG

As you can see i have added some functionalities.
The source code is now in 4 modules: main, label_module, pane_module and component_info_module.
The component panel on the right contains a CustomListView and in each item there is a panel.
1675134544288.png

If you click on a blue header the panel will expand or collapse (when clicked a second time). You can also click on the white space or the labels from the panel.
The next update will contain a treeview in the component panel.
If you are using the application and find some bugs, just let me know and i will fix them.
Happy coding!
 

Attachments

  • simple_layout_designer_v4.zip
    279.3 KB · Views: 9

PaulMeuris

Active Member
Licensed User
With this new update you can do some more testing...
todo20230202.png
attached.png
component.png

See the attached zip-file for the source code.
Old layout files might cause some problems when loading.
The attachments are reset after loading.
If you change the settings of a canvas component then the changes will be visible when you move the component.
Clicking on a component will refresh the treeview.
Happy coding!
 

Attachments

  • simple_layout_designer_v5.zip
    281.9 KB · Views: 5
Top