B4J Tutorial Simple Layout Designer (SLD) B4J application.

PaulMeuris

Active Member
Licensed User
This update contains a new component: button. In the designer it is just a label with an ID of "Button".
In the component info panel some things have changed.
You can now select 2 gradient colors from a named list and specify if the (linear) gradient appears horizontally or vertically.
On top of the component info panel a CustomListView appears when you click on the Select button from the gradient.
Once you set the gradient colors for a component you can't use the plain color setting anymore.
You can however set the 2 gradient colors to the same named color.
This version also contains a bug fix. When a component that is attached is dragged, there is no longer a flickering (the dragging and resizing of the children are disabled.
Some screenshots:




This button is made with a gray pane in the background and a label attached to the pane. The pane is 2 pixels wider and 2 pixel higher.
If you find any bugs, will you let me know?
You can find the source code in the attached zip-file.
Note: you get a free bonus: check out the "colornames.json" file in the assets.
Happy coding!
 

Attachments

  • simple_layout_designer_v6.zip
    287.3 KB · Views: 101

PaulMeuris

Active Member
Licensed User
After a week of testing and programming it is time for a new update of this tool.

The documentation ("sld_documentation.sld") has been updated and is copied the first time you start the application. As before you still have to reconnect the images. This time however you can click on each pane in the treeview and see which image you have to select (Background - Image - Select). The documentation showcases the ability of the application to produce a similar result as a publishing application.
You can find the source code in the attached zip-file.
The images used in the defaults components are copied to the imagefiles folder.
I have added a canvas drawing for a vertical line and renamed the menu items HLine (horizontal line) and VLine (vertical line). This will allow you to make a hierarchy design.
The defaults components have been used in the border_panel_example. Check it out to see how these components can be used.
In the next message i will provide some printing instructions.
Happy coding!
 

Attachments

  • simple_layout_designer_v7.zip
    123.1 KB · Views: 96
  • border_panel_example.zip
    3.9 KB · Views: 97

PaulMeuris

Active Member
Licensed User

Printing instructions using the Simple Layout Designer application.​

If you choose the print menu item then you can print the layout as it is present in the main pane.
A format setting of A4 will print the upper left region from the main pane. This region is limited to the ruler values of 12 horizontally and 17.5 vertically.
A format setting of A3 will print the upper region limited to 17.5 vertically.
A format setting of A2 will print the entire main pane region limited to 35.5 vertically.
If you print in landscape mode then these values change.
When a pane is current or active (by clicking on it directly or in the treeview pane) then this pane and all of its attached children will be printed.
Click in the component info panel Text pane on the Print pane button.
The pane will temporarily be shifted to the upper left corner (0,0) so that it comes in the A4 standard portrait range. You don’t have to change the settings then.
The standard dialog for choosing a printer will appear. In it you can choose a printer or a PDF printer application which allows you to save the printing to a PDF-file.
You can then use a PDF merge tool (for instance the Portable app PDFTKBuilderPortable) to assemble all the individual pages into a single PDF-file.
 

PaulMeuris

Active Member
Licensed User
Diagrams, diagrams, diagrams, ...
A finer grid, additional canvas drawing components, filling setting for drawings...
With this version you can make cool looking diagrams:



You can find the source code in the attached zip-file.
Happy coding!
 

Attachments

  • simple_layout_designer_v8.zip
    124.4 KB · Views: 114

PaulMeuris

Active Member
Licensed User
In this update you can use shortcut keys to cut, copy, paste and duplicate components.
There are also shortcuts for the layouts menu entries. Be careful with the CTRL+N !

These are the new menu's:

The user manual has been updated and is now available in the Help menu. The version from the assets is copied every time you start the application.
You don't need to attach the images any more.
The shortcuts CTRL+X, CTRL+C and CTRL+V are standard keystrokes you can use to be more productive.
You might not be able to copy components from old layout files.
You can find the source code in the attached zip-file.
Happy coding!
 

Attachments

  • simple_layout_designer_v9.zip
    140.5 KB · Views: 100

PaulMeuris

Active Member
Licensed User
A few more shortcuts: CTRL + arrow keys (UP,DOWN,LEFT,RIGHT) that you can use in this minor update.

Thank you @xulihang for your code snippet about moving rotated panes and labels.
With the up and down arrow keys in combination with the CTRL key you can flip a component vertically (see example above).
CTRL+arrow key left allows you to rotate a component counter-clockwise by 5 degrees each time. With CTRL+arrow key right you can rotate the component clockwise by 5 degrees each time.
I think this addition can be very useful in your new design projects.
The source code is in the attached zip-file.
Happy coding!
P.S.: any suggestions for new features in this application are always welcome!
 

Attachments

  • simple_layout_designer_v10.zip
    141.2 KB · Views: 92

PaulMeuris

Active Member
Licensed User
This next update is a "cosmetic" update...
The component info panel has changed a little. When the application starts it has the component panel and the treeview panel expanded. The other panels are collapsed. So when you load a layout file and click on a component the treeview will display the component list. The structure of this list depends on the relations between the components. It will show the parents, children and grandchildren if there are any.

When you click on a component ID in the treeview panel then that component becomes the current and active component. You can verify this in the newly added statusbar.

This fixed information is not in the component panel any more.
When you click with the right mouse button on an ID in the treeview panel than the children of that component are collapsed. Right clicking on the first pane will collapse all its children and grandchildren. Click with the left mouse button on a remaining ID to expand all the children and grandchildren.
Clicking on an ID in the treeview also shows a yellow border in the main pane around that component. This way you can locate the component. You can also use the CTRL+I (info) keystrokes to show the yellow border around the active component. The border should disappear after maximum 2 seconds.

You can find the source code in the attached zip-file.
Happy coding!
 

Attachments

  • simple_layout_designer_v11.zip
    148.9 KB · Views: 95

AnandGupta

Expert
Licensed User
Longtime User

I like the graded color of your statusbar
 

PaulMeuris

Active Member
Licensed User
In this (maybe final) update you can see that the defaults menu has disappeared.
The component info panel has a new panel for the defaults components.

You can click on an item in the list to use that component.
When you make a new component of your own then you can type in a name and click the Add button to save that component to the newly added default files folder.
You can right click on an item to remove it from the list. The default components that come with the application however will be copied every time you start the application.
The user manual has been updated.
You can find the source code in the attached zip-file.
There will be no more updates unless you ask for it and describe what you would like to be added.
Happy coding!
 

Attachments

  • simple_layout_designer_v12.zip
    272.2 KB · Views: 134

Xfood

Expert
Licensed User
just to give an idea, just divide the page into various main sessions, report header, report body, report footer, and use the data management controls, a bit like this example, by now you should be close, and I think it would be very useful to all B4X members

 

PaulMeuris

Active Member
Licensed User
Thank you @Xfood for the support and the new idea. I will give it some thought.
The 2 examples i already provided give you some idea of what you can do with the *.sld files.
 

PaulMeuris

Active Member
Licensed User
With a little bit of coding you can go a long way...
Here's an example of how to use a .sld layout file to produce a simple list (report?).

This is the layout with some font and background settings.
And with this application the result looks like this:

The data can come from any source. In this case it's a CSV-file. I copied the records a few times to make the list longer.
The output is a html string in a webview. The html string contains some inline CSS settings for the alignment of the text, the width of the column, the font family, the font-weight and the gradients. These settings come from the sld-layout file.
You can find the source code in the attached zip file to study.
The complexity of the report depends on the data structures that are being used.
Happy coding!
 

Attachments

  • testenvironment20.zip
    4.7 KB · Views: 115

Xfood

Expert
Licensed User
congratulations, fantastic, as a preview, to send it to print, do you need to generate a pdf?
 
Cookies are required to use this site. You must accept them to continue using the site. Learn more…