B4J Question Help with design/implementation Graphical Software

[Xandoca]

Hi all,

My client asks to create a software with user interface like Talend Studio or Bizagi (or B4J Layout Designer). I'm thinking about using B4J to build it but I don't have (good) ideas on how to implement the core graphical functionalities like:
1) Grid where you can drag and drop objects. You can zoom in or zoom out.
2) Links between objects (draw and erase)

I've tried using ImageView and draw lines using canvas but it seems not the best approach. I could move ImageView (drag event).
I also think about using X2 (Games). Other thought was putting everything in a map or xml file and draw everything every time user changes something.

Any thoughts or suggestions? Anyone already implemented something like that using B4J?

Thank you very much

Talend:

Bizagi:

 

[William Lancee]

This is a challenging but interesting task. I have done something similar also using a combination of views and canvas.
The key is to have superimposed layers (B4XView drawing area sized panels).
One layer is the connections drawn by B4XCanvas. Another layer is a layout of draggable labels.
I have a third (base layer) that has a background image.

 

[Xandoca]

Thank you William.
Let me go into details .
For each line you've create a panel?

 

[William Lancee]

Given drawing area W x H, three B4XView panels size W x H, positioned on top of each other.

Panel0 = the circle.png drawn as bitmap by B4XCanvas, annotations added with cv.drawText
Panel1 = points as anchors/marks, panel cleared and redrawn when changed, connecting lines are computed and drawn by canvas
Panel2 = contains as bull's eye pointer drawn in a B4XView (not shown on screen shot), the point can be moved by mouse/finger
when mouse up, the pointer will add a anchor point on panel1, new lines computed, and panel1 is redrawn

There are obviously more elements but this is the general idea. The specifics are dependent on your App's requirement.
I always do all coding (using customs classes suited to my style) in B4J (B4XPages) and then, if needed, use B4A (B4XPages)
to adjust layout, font, and event handlers.

In the MoodTracking App the user moves the bull's eye pointer and drops a point (here a white circle with the current time inside).
The point is automatically connected with a line to the previous point, direction is indicated by a small offset from starting point.

There are time entry elements (just visible on the image), that change the time in the circle.
Everything is dynamic, the user can move the white circle on the screen and the connecting line will be recalculated and redrawn.

When the user is finished with the new entry they click on an exit icon at the bottom of the screen. Some logic determines whether the
change in mood from one point to another is notable. If so, a two staged series of about 10 questions classifies the context in which the change occurred.
After a week of tracking an analysis of mood changes/contexts leads to a report. This is where expertise in that particular knowledge domain is required.

I would urge you to abstract the objects in your app as classes with methods that are natural to your requirements.
I my case I have a "ArtElement" class that has layers of canvases, and methods for connecting points with different types of arrows.
This class also does all the dragging/dropping stuff. Start small and expand when things are working as you like it.

More advice would require knowledge of your target App, and other forum members would likely have relevant experience.

 

[Xandoca]

Given drawing area W x H, three B4XView panels size W x H, positioned on top of each other.

Panel0 = the circle.png drawn as bitmap by B4XCanvas, annotations added with cv.drawText
Panel1 = points as anchors/marks, panel cleared and redrawn when changed, connecting lines are computed and drawn by canvas
Panel2 = contains as bull's eye pointer drawn in a B4XView (not shown on screen shot), the point can be moved by mouse/finger
when mouse up, the pointer will add a anchor point on panel1, new lines computed, and panel1 is redrawn

There are obviously more elements but this is the general idea. The specifics are dependent on your App's requirement.
I always do all coding (using customs classes suited to my style) in B4J (B4XPages) and then, if needed, use B4A (B4XPages)
to adjust layout, font, and event handlers.

In the MoodTracking App the user moves the bull's eye pointer and drops a point (here a white circle with the current time inside).
The point is automatically connected with a line to the previous point, direction is indicated by a small offset from starting point.

There are time entry elements (just visible on the image), that change the time in the circle.
Everything is dynamic, the user can move the white circle on the screen and the connecting line will be recalculated and redrawn.

When the user is finished with the new entry they click on an exit icon at the bottom of the screen. Some logic determines whether the
change in mood from one point to another is notable. If so, a two staged series of about 10 questions classifies the context in which the change occurred.
After a week of tracking an analysis of mood changes/contexts leads to a report. This is where expertise in that particular knowledge domain is required.

I would urge you to abstract the objects in your app as classes with methods that are natural to your requirements.
I my case I have a "ArtElement" class that has layers of canvases, and methods for connecting points with different types of arrows.
This class also does all the dragging/dropping stuff. Start small and expand when things are working as you like it.

More advice would require knowledge of your target App, and other forum members would likely have relevant experience.

Amazing William.
I will follow your advice: "Start small and expand when things are working as you like it."
Thank you very much for your time.