B4J Question [B4X] How To Implement Desktop Dashboard UI

cklester · Mar 14, 2021

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 · Mar 14, 2021

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

Erel · Mar 15, 2021

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:

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.

cklester · Mar 15, 2021

@Erel The sample project you provided is great! Works really well. Thank you!

Erel said:
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.

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

What do you mean by this?

Erel · Mar 16, 2021

cklester said:
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.

cklester said:
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.

RushilD · Apr 23, 2022

Erel said:

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

FrostCodes · Apr 23, 2022

cklester said:
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.

JohnJ · Apr 23, 2022

Have a look at this video by leafecodes.com, they did a great job on this.

B4J Question [B4X] How To Implement Desktop Dashboard UI

cklester

Well-Known Member

FrostCodes

Active Member

Erel

B4X founder

Attachments

cklester

Well-Known Member

Erel

B4X founder

RushilD

Member

FrostCodes

Active Member

JohnJ

Member

Similar Threads

B4J Question [B4X] How To Implement Desktop Dashboard UI

Well-Known Member

Active Member

B4X founder

Attachments

Well-Known Member

B4X founder

Member

Active Member

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency