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

SithasoDaisy

TailwindCSS WebApps using b4x
t.me t.me

Check $5 WebApps

SithasoDaisy WebApps @ $5 Each

Hi there Disclaimer: These WebApps are hosted on Netlify and the back-end hosted on PocketHost (just for demonstration purposes). You will have to set up the SQLite Webserver on your own machine for a better experience. PocketHost is not recommended for production purposes as its slow compared...
www.b4x.com www.b4x.com
 
Last edited:
Click to expand...
Enrico Fuoti

Enrico Fuoti

Active Member
Licensed User
Longtime User
Mashiane said:
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..
Click to expand...
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

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

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

MichalK73

Well-Known Member
Licensed User
Longtime User
Mashiane said:
@MichalK73

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

View attachment 138691
Wh
Click to expand...
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

MichalK73

Well-Known Member
Licensed User
Longtime User
Mashiane said:
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
Click to expand...
But what do paths have to do with code that doesn't work, after all, your drawbar demos work.
 
MichalK73

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

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: 160
MichalK73

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

Mashiane

Expert
Licensed User
Longtime User
MichalK73 said:
[SOLVED]
Click to expand...
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

Mashiane

Expert
Licensed User
Longtime User
MichalK73 said:
@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?
Click to expand...
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

MichalK73

Well-Known Member
Licensed User
Longtime User
Mashiane said:
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.
Click to expand...
I have a question out of curiosity.
Have you checked that my version works for you?
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
MichalK73 said:
I have a question out of curiosity.
Have you checked that my version works for you?
Click to expand...
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

Mashiane

Expert
Licensed User
Longtime User
Johan Schoeman said:
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?
Click to expand...
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.
 
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
Share My Creation [Web][SithasoIONIC7] Country Picker UI
Replies
0
Views
603
Mashiane
Mashiane
Mashiane
  • Article
B4J Tutorial [Web] SithasoIONIC7 - Mastering SwiperJS / Sliders
Replies
1
Views
554
Mashiane
Mashiane
Mashiane
  • Article
B4J Tutorial [Web] SithasoDaisy - Installing SithasoDaisy and creating you first TailwindCSS & DaisyUI WebApp using b4x
Replies
0
Views
887
Mashiane
Mashiane
Mashiane
  • Article
B4J Library [Web] SithasoDaisy: TailwindCss WebApps powered by B4x & BANano
3 4 5
Replies
87
Views
16K
Mashiane
Mashiane
Mashiane
  • Article
Share My Creation [Web] SithasoDaisy: TailwindCSS + DaisyUI Toolbox
3 4 5
Replies
84
Views
19K
Mashiane
Mashiane
Top