B4J Tutorial SithasoDaisy TailwindCSS UI Toolkit: Q & A

Hi there

NB: Where possible, please include a simple project that demonstrates your use case.

Do you have any questions about SithasoDaisy UI Toolkit?

You can shoot it here and we will oblige.

Thanks in advance?


Join on Telegram


Check $5 WebApps

 
Last edited:

Enrico Fuoti

Active Member
Licensed User
Longtime User
Hi, Please include any errors in console log.

Which version of PocketBase are you using? Did you migrate to the latest version?

The only thing updated are the js files for pocketbase.

Thx..
My pocketbase version was 0.9.0. i now updated to the latest 0.11.04 and started working again.
Thank you very much Mashiane! 👍:)
 

MichalK73

Well-Known Member
Licensed User
Longtime User
In pgIndex we have

B4X:
'NB: use this to add pages that are not added to the side nav bar
Sub AddPages
    'example
    'app.AddPage(pgHome.name, pgHome)
End Sub

However, the ver 1.19 library has a different syntax for app.AddPage than the one given in the example.
How to add in this case a new page that is not used in DrawerMenu or NavBar ?
1675070655369.png


Is there an mCallBack facility for the new site? As it adds possible I have that the types do not match.

2. if I don't want to use DrawerMenu and it is not in 'baselayout' pgIndex is it necessary to add this ???
B4X:
'NB: use this to add pages that are not added to the side nav bar
Sub AddPages
    'example
    'app.AddPage(pgHome.name, pgHome)
    app.AddPageView '<-- Needed ???
End Sub
 

MichalK73

Well-Known Member
Licensed User
Longtime User
Thanks a lot, but it doesn't work for me :(
I did not change anything in the code you gave and I have a blank page.
Browser cleared, demo earlier with Drawbar and Navibar works.

1675100711399.png


1675100734542.png
 

MichalK73

Well-Known Member
Licensed User
Longtime User
@MichalK73

Not sure why not, what's happening in your b4j logs? Is there anything there.

View attachment 138691
Wh
B4X:
Reading B4J INI in C:\Users\Lapek\AppData\Roaming\Anywhere Software\B4J to find Additional Libraries folder...
Found Additional Libraries folder: C:\b4x\library
Starting to transpile...
Building C:\laragon\www\sithasofree\scripts\app.js
Loading layout adblanklayout...
Loading layout page1layout...
Loading layout page2layout...
Processing b4xlib: sithasodaisy
java.io.FileNotFoundException: D:\banano\Sithaso 21 syczen\2pages\B4J\Objects\b4xlibs_BANano\sithasodaisy\B4J\manifest.txt (System nie może odnaleźć określonej ścieżki)
    at java.base/java.io.FileInputStream.open0(Native Method)
    at java.base/java.io.FileInputStream.open(FileInputStream.java:219)
    at java.base/java.io.FileInputStream.<init>(FileInputStream.java:157)
    at java.base/java.io.FileInputStream.<init>(FileInputStream.java:112)
    at java.base/java.io.FileReader.<init>(FileReader.java:60)
    at com.ab.banano.BANano.ProcessB4XLib(Unknown Source)
    at com.ab.banano.BANano.a(Unknown Source)
    at com.ab.banano.BANano.a(Unknown Source)
    at com.ab.banano.BANano.Build(Unknown Source)
    at b4j.example.main._appstart(main.java:161)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.base/java.lang.reflect.Method.invoke(Method.java:566)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:111)
    at anywheresoftware.b4a.BA.raiseEvent(BA.java:98)
    at b4j.example.main.start(main.java:37)
    at javafx.graphics/com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$9(LauncherImpl.java:846)
    at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runAndWait$12(PlatformImpl.java:455)
    at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$10(PlatformImpl.java:428)
    at java.base/java.security.AccessController.doPrivileged(Native Method)
    at javafx.graphics/com.sun.javafx.application.PlatformImpl.lambda$runLater$11(PlatformImpl.java:427)
    at javafx.graphics/com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:96)
    at javafx.graphics/com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
    at javafx.graphics/com.sun.glass.ui.win.WinApplication.lambda$runLoop$3(WinApplication.java:174)
    at java.base/java.lang.Thread.run(Thread.java:834)
Processing b4xlib: sithasodocs
Adding Layout adblanklayout used by blanklayout
Adding Layout page1layout used by pg1
Adding Layout page2layout used by pg2
Merging CSS files...
  CSS files are merged in the order you added them
  --> C:\laragon\www\sithasofree\styles\sweetalert2.min.css
  --> C:\laragon\www\sithasofree\styles\daisyui.min.css
  --> C:\laragon\www\sithasofree\styles\fontawesome.min.css
  --> C:\laragon\www\sithasofree\styles\flatpickr.min.css
  --> C:\laragon\www\sithasofree\styles\fc.min.css
  --> C:\laragon\www\sithasofree\styles\prism.min.css
Merging Javascript files (not used in a Service Worker)...
-> JS files are merged in the order you added them.
  --> C:\laragon\www\sithasofree\scripts\tailwind.min.js
  --> C:\laragon\www\sithasofree\scripts\fileSaver.min.js
  --> C:\laragon\www\sithasofree\scripts\chart.min.js
  --> C:\laragon\www\sithasofree\scripts\chartjs-adapter-date-fns.bundle.min.js
  --> C:\laragon\www\sithasofree\scripts\chartkick.min.js
  --> C:\laragon\www\sithasofree\scripts\qrcode.min.js
  --> C:\laragon\www\sithasofree\scripts\html5-qrcode.js
  --> C:\laragon\www\sithasofree\scripts\webcam.min.js
  --> C:\laragon\www\sithasofree\scripts\axios.min.js
  --> C:\laragon\www\sithasofree\scripts\lz-string.min.js
  --> C:\laragon\www\sithasofree\scripts\flatpickr.min.js
  --> C:\laragon\www\sithasofree\scripts\lottie-player.js
  --> C:\laragon\www\sithasofree\scripts\form-data-json.min.js
  --> C:\laragon\www\sithasofree\scripts\docxtemplater.min.js
  --> C:\laragon\www\sithasofree\scripts\pizzip.min.js
  --> C:\laragon\www\sithasofree\scripts\pizzip-utils.min.js
  --> C:\laragon\www\sithasofree\scripts\rolldate.min.js
  --> C:\laragon\www\sithasofree\scripts\htmlParser.min.js
  --> C:\laragon\www\sithasofree\scripts\pocketbase.umd.js
  --> C:\laragon\www\sithasofree\scripts\fc.min.js
  --> C:\laragon\www\sithasofree\scripts\signature_pad.umd.min.js
  --> C:\laragon\www\sithasofree\scripts\dayjs.min.js
  --> C:\laragon\www\sithasofree\scripts\numeral.min.js
  --> C:\laragon\www\sithasofree\scripts\prism.min.js
  --> C:\laragon\www\sithasofree\scripts\beautify.min.js
  --> C:\laragon\www\sithasofree\scripts\beautify-css.min.js
  --> C:\laragon\www\sithasofree\scripts\beautify-html.min.js
  --> C:\laragon\www\sithasofree\scripts\prettier.min.js
  --> C:\laragon\www\sithasofree\scripts\sweetalert2.all.min.js
Building C:\laragon\www\sithasofree\index.html
 
The total size of your local CSS and JS files is 5.7MB and another 0.9MB in other assets.
It is very important to only load the JS and CSS files from components that you actually use in your website/webapp!
 
If you are using public frameworks (like jQuery, Bootstrap, Vue, etc...), consider using their CDN so the browser can use already buffered versions.
Done!
 

MichalK73

Well-Known Member
Licensed User
Longtime User
Dont you want to try shorter paths.

I always recommend a path configuration like c:\b4j\libraries, c:\b4j\workspace; c:\b4j\shared.

Kind regards
But what do paths have to do with code that doesn't work, after all, your drawbar demos work.
 

MichalK73

Well-Known Member
Licensed User
Longtime User
I always have this error even in your demos with NaviBar and it works. There is no such file, the file is not generated.
Does it have any great significance for the operation?
 

MichalK73

Well-Known Member
Licensed User
Longtime User
[SOLVED]

OK I managed to do it. 😆
I remembered that DEMO Multi user at the beginning displays the login window without DrawBar and NavBar. have you looked at the source. I have cut out
Locked the code
Inicjalize in pgIndex:
Sub Initialize                    'ignoreDeadCode
    'initialize the app
    app.AddApp(Me, Main.AppName)
    'set the font of the app
    app.Font = "font-sans"
    'load the base layout
    BANano.LoadLayout(app.Here, "baselayout")
    'link this app to the drawer, this is needed
    'when adding pages to side nav
'    appdrawer.app = app
    'create the drawer menu
'    CreateDrawerMenu
    'add any other page not added to the drawer menu
'    AddPages
    'show the sign in page
'    IsAuthenticated(False)
    pgSignIn.Show(app)
End Sub
The page was displayed when I removed the
B4X:
BANano.LoadLayout(app.Here, "baselayout")

Blank screen.
I have added
B4X:
Sub Initialize                    'ignoreDeadCode
    'initialize the app
    app.AddApp(Me, Main.AppName)
    'set the font of the app
    app.Font = "font-sans"
    'load the base layout
'    BANano.LoadLayout(app.Here, "baselayout")
    'link this app to the drawer, this is needed
    'when adding pages to side nav
'    appdrawer.app = app
    'create the drawer menu
'    CreateDrawerMenu
    'add any other page not added to the drawer menu
'    AddPages
    'show the sign in page
'    IsAuthenticated(False)
    app.AddPageView ' ------> This I have added
    pgSignIn.Show(app)
End Sub
And the page was displayed, so ...
Similarly, I have done the same in your resource regarding 2 pages and switching.
pgIndex:
Sub Initialize                    'ignoreDeadCode
    'initialize the app
    app.AddApp(Me, Main.AppName)
    'set the font of the app
    app.Font = "font-sans"
    'show page 1
    app.AddPageView ' ----- >Added :)
    pg1.Show(app)
End Sub

In the code for pages 1 and 2, I changed to
B4X:
'start building the page 1
private Sub BuildPage
'    banano.LoadLayout("#body", "page1layout")
    banano.LoadLayout(app.PageViewer, "page1layout")
End Sub

'start building the page 2
private Sub BuildPage
'    banano.LoadLayout("#body", "page2layout")
    banano.LoadLayout(app.PageViewer, "page2layout")
End Sub

And it all worked. The page loads and it is easy to navigate between them.:cool:
 

Attachments

  • NoD_Working.zip
    23.9 KB · Views: 96

MichalK73

Well-Known Member
Licensed User
Longtime User
@Mashiane When I have the light mode set in the Windows settings, I have a light page background and when dark I have a dark page background. How can I manually force this mode on a page?
 

Mashiane

Expert
Licensed User
Longtime User
Awesome...

In my example I did not use the pageView (a div inside #body), it was not necessary at all, thus the use of

B4X:
banano.LoadLayout("#body", "page2layout")

In my example. Why it works for me and not for you is very strange. Perhaps creating a new project on your side and then just following the example is the key.

All the best.
 

Mashiane

Expert
Licensed User
Longtime User
@Mashiane When I have the light mode set in the Windows settings, I have a light page background and when dark I have a dark page background. How can I manually force this mode on a page?
I will have to investigate this.. One can set themes (manually), but I need to still play around sitll with this feature. Please just bear with me.

1675325638743.png
 

MichalK73

Well-Known Member
Licensed User
Longtime User
Awesome...

In my example I did not use the pageView (a div inside #body), it was not necessary at all, thus the use of

B4X:
banano.LoadLayout("#body", "page2layout")

In my example. Why it works for me and not for you is very strange. Perhaps creating a new project on your side and then just following the example is the key.

All the best.
I have a question out of curiosity.
Have you checked that my version works for you?
 

Mashiane

Expert
Licensed User
Longtime User
I have a question out of curiosity.
Have you checked that my version works for you?
I haven't checked it. I believe your word and looking at the code you pasted, I did not see anything that would make it not to work.

As you wanted an example that was close to not using a pageview, that's the approach I followed. It's just strange that on your side it didn't run whilst in mine it worked.
 

Mashiane

Expert
Licensed User
Longtime User
A dumb question - can I connect to a MSSQL database (on a VPN) and get data via a query that can then be displayed in a SDUITable?
No question is dump. This is possible via php. As long as you have the dB connection details.

There is an example that I have done for MySQL in the code examples, you can use the same, update the mssqlconfig file, then update the datasource to point to mssql. It should work.
 
Top