B4J Question [B4X] How To Implement Desktop Dashboard UI

cklester

Well-Known Member
Licensed User
I built an app in B4J using B4XPages. It uses multiple windows.

Right now, an initial window has a set of buttons. Once one of these is clicked, a new window pops up displaying the layout for that functionality. Once that is closed, we return to the main window.

We are now considering using a "dashboard" UI instead of the current multiple forms/windows. This way, all the buttons will be seen on the left of the window, and the currently selected contents will be displayed to the right... using the same window. Typical dashboard UI/UX.

Converting to a dashboard-like interface seems to require placing all the window functionality inside the dashboard window class. That's a lot of confusing work for me.

Anybody have any hints, tips, or tricks in building a dashboard UI for a desktop app using B4XPages? I'm actually leaning toward not converting to the dashboard paradigm, but I think the dashboard UX would be better for the end-user. Not sure...

Any thoughts and opinions are welcome!
 

FrostCodes

Active Member
Licensed User
Hi, I don't use b4xpages so I don't know much about it but here is a way I would have done it.

For the separate pages in the dashboard, I would put them into their own separate custom view, that way you can handle each page's events neatly and also use them as a class.
On the main page with the dashboard UI, on click of a page, I would either create a new instance or reuse an instance of the custom view page and add it to the right side inside maybe a panel. Also, I would remove the last view added there so definitely you would need to keep track of the last added view inside a variable and remove it when you need to add another one.

Just the way I would have done it in normal b4x layout as I said I don't know much about b4xpages :)
 
Last edited:
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
1. It doesn't really matter if you use B4XPages or not.
2. You don't need to build custom views though it is possible.

Simple example:

1615790545647.png


The main page code:
B4X:
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    Dim tbl As ContentTable
    tbl.Initialize
    LeftList.AddTextItem("Table", tbl)
    Dim chart As ContentChart
    chart.Initialize
    LeftList.AddTextItem("Chart", chart)
End Sub

Private Sub B4XPage_Resize (Width As Int, Height As Int)
    If ContentEmpty = False Then
        MainPanel.GetView(0).SetLayoutAnimated(0, 0, 0, MainPanel.Width, MainPanel.Height)
    End If
End Sub

Private Sub LeftList_ItemClick (Index As Int, Value As Object)
    If ContentEmpty = False Then MainPanel.GetView(0).RemoveViewFromParent
    CallSub2(Value, "Show", MainPanel)
End Sub

Private Sub ContentEmpty As Boolean
    Return MainPanel.NumberOfViews = 0
End Sub

Note that the content is lazy loaded.
 

Attachments

  • Project.zip
    14.3 KB · Views: 337
Upvote 0

cklester

Well-Known Member
Licensed User
@Erel The sample project you provided is great! Works really well. Thank you!

1. It doesn't really matter if you use B4XPages or not.

I forgot to mention: my intention is to build the app for mobile devices as well, so wouldn't B4XPages matter?

However, I don't expect to use the dashboard interface for the mobile devices, so this should be an interesting project. The desktop UI will be a dashboard, but the mobile UI will be standard full-screen pages with a back button or maybe menu bar on the side or bottom.

2. You don't need to build custom views though it is possible.

What do you mean by this?
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
I forgot to mention: my intention is to build the app for mobile devices as well, so wouldn't B4XPages matter?
You should of course use B4XPages, especially in a cross platform solution.
What I meant is that the same concept will work in non-B4XPages as well.

What do you mean by this?
@FrostCodes made a fine suggestion to create custom views classes: https://www.b4x.com/android/forum/threads/62488/#content
It is possible but not mandatory, as demonstrated in the example I've uploaded.
 
Upvote 0

RushilD

Member
Licensed User
1. It doesn't really matter if you use B4XPages or not.
2. You don't need to build custom views though it is possible.

Simple example:

View attachment 109684

The main page code:
B4X:
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    Dim tbl As ContentTable
    tbl.Initialize
    LeftList.AddTextItem("Table", tbl)
    Dim chart As ContentChart
    chart.Initialize
    LeftList.AddTextItem("Chart", chart)
End Sub

Private Sub B4XPage_Resize (Width As Int, Height As Int)
    If ContentEmpty = False Then
        MainPanel.GetView(0).SetLayoutAnimated(0, 0, 0, MainPanel.Width, MainPanel.Height)
    End If
End Sub

Private Sub LeftList_ItemClick (Index As Int, Value As Object)
    If ContentEmpty = False Then MainPanel.GetView(0).RemoveViewFromParent
    CallSub2(Value, "Show", MainPanel)
End Sub

Private Sub ContentEmpty As Boolean
    Return MainPanel.NumberOfViews = 0
End Sub

Note that the content is lazy loaded.

HI Erel,

I download the project.zip but I see some things are missing. Do I need to do anything ? I simply extracted the project.zip folder and open the BRA/ dashboard file.

Thank you

1650703900890.png
 
Upvote 0

FrostCodes

Active Member
Licensed User
However, I don't expect to use the dashboard interface for the mobile devices, so this should be an interesting project. The desktop UI will be a dashboard, but the mobile UI will be standard full-screen pages with a back button or maybe menu bar on the side or bottom.
Take a look at this project, it had b4xpages implantation and makes use of the custom view method.

https://www.b4x.com/android/forum/t...ext-vpn-project-at-a-price-of-a-cuppa.132378/



My advice is you use custom view so you can load depending in the platform the right layout but your code essentially remains the same. This way on desktop you can load the main dashboard UI and on mobile you can either load it as a tabbed dashboard like the project above or a menu bar supported UI or you can create an adapter b4xpage that loads the custom view into it root panel and you can now have the whole back button navigation working easily.
 
Upvote 0
Top