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...
asales

asales

Expert
Licensed User
Longtime User
Hi Mashiane.

1. How to collapse the drawer menu when the full page is show?
I tried with .hide, .disable and .close without success.

1. How to remove the drawer menu and uses the navbar to call the pages?
I try to remove the appdrawer in the SithosoCanvas example and call the page, using the code below, but don't worked:
B4X: 
Private Sub appnavbar_Menu_Click (e As BANanoEvent)
    mypage.Show(app)
End Sub
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Hi Mashiane.
asales said:
1. How to collapse the drawer menu when the full page is show?
I tried with .hide, .disable and .close without success.

1. How to remove the drawer menu and uses the navbar to call the pages?
I try to remove the appdrawer in the SithosoCanvas example and call the page, using the code below, but don't worked:
B4X: 
Private Sub appnavbar_Menu_Click (e As BANanoEvent)
    mypage.Show(app)
End Sub
Click to expand...
The "Mobile" property should be False.

Please just add a simple project next time so that I just update it.
 
asales

asales

Expert
Licensed User
Longtime User
Mashiane said:
The "Mobile" property should be False.
Click to expand...
How?
1676920785572.png
 
asales

asales

Expert
Licensed User
Longtime User
Mashiane said:
Please just add a simple project next time so that I just update it.
Click to expand...
Here.
I want to remove the drawer menu and put buttons in the navbar to load the pages.

Thanks for your support.

1676920946235.png
 

Attachments

  • sithasodrawer1.zip
    43.9 KB · Views: 177
asales

asales

Expert
Licensed User
Longtime User
Mashiane said:
In Abstract Designer.
Click to expand...
It works, but the space of the menu is showing in the full screen (in the desktop)

1676921835696.png


[EDIT] The question below was solved.
I uncheck "Hamburger on Small Only" on Designer.

If I resize the browser, I can see the hamburger menu:
1676922202347.png


[SOLVED] Is possible to show only the hamburger menu in the full screen (with the menu collapsed) - like the image below - or only in small screens?

1676922434786.png
 
Last edited:
asales

asales

Expert
Licensed User
Longtime User
I'm trying to get a parameter in the URL like this:

I found the javascript function in this link:
stackoverflow.com

Getting the url parameters inside the html page

I have a HTML page which is loaded using a URL that looks a little like this: http://localhost:8080/GisProject/MainService?s=C&o=1 I would like to obtain the query string parameters in the URL
stackoverflow.com stackoverflow.com
But when I put the javacript code below in the pgIndex, I get a blank page
B4X: 
#if javascript
function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}?
#End If
How can I use this function?
There other way to get the parameters in the url?
 
angel_

angel_

Well-Known Member
Licensed User
Longtime User
asales said:
I'm trying to get a parameter in the URL like this:

I found the javascript function in this link:
stackoverflow.com

Getting the url parameters inside the html page

I have a HTML page which is loaded using a URL that looks a little like this: http://localhost:8080/GisProject/MainService?s=C&o=1 I would like to obtain the query string parameters in the URL
stackoverflow.com stackoverflow.com
But when I put the javacript code below in the pgIndex, I get a blank page
B4X: 
#if javascript
function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}?
#End If
How can I use this function?
There other way to get the parameters in the url?
Click to expand...
Try this:

BANano_Ready: 
Dim params As Map = BANano.GetURLParams(BANano.Location.GetHref)
Log(params.Get("parameter1"))
 
asales

asales

Expert
Licensed User
Longtime User
angel_ said:
Try this:

BANano_Ready: 
Dim params As Map = BANano.GetURLParams(BANano.Location.GetHref)
Log(params.Get("parameter1"))
Click to expand...
Thanks, but the other problem is this:
- When I put the javacript code in the pgIndex, I get a blank page. If I remove the code, works fine.
 
asales

asales

Expert
Licensed User
Longtime User
Mashiane said:
You can just remove the #if Javascript code, it's not necessary.
Click to expand...
Thanks! It worked, but:
1 - I don't see the logs in the IDE : Log(params.Get("parameter1")).
Even in the SithasoDaisy demo - like the sub btncode_click - I can't see the logs.

2 - I have a code to save a text file (based in second option of this post) that uses a #if javascript.
It works before, but now if I put the javascript code I get a blank page.

2.1 - I can't see the SDUIButton1 that I put in the home layout (pgHome).

What could be happens?
The project is in attached.
 

Attachments

  • sithasodrawer2.zip
    44.9 KB · Views: 147
Mashiane

Mashiane

Expert
Licensed User
Longtime User
asales said:
Thanks! It worked, but:
1 - I don't see the logs in the IDE : Log(params.Get("parameter1")).
Even in the SithasoDaisy demo - like the sub btncode_click - I can't see the logs.

2 - I have a code to save a text file (based in second option of this post) that uses a #if javascript.
It works before, but now if I put the javascript code I get a blank page.

2.1 - I can't see the SDUIButton1 that I put in the home layout (pgHome).

What could be happens?
The project is in attached.
Click to expand...
  • Before you run your app, always check the b4j ide logs for errors. If there are, try and clear these first.
  • When you run your app, if the b4j ide compilation logs report an error, your app will not work.
  • In some cases the web console, will show you errors in "red", indicating a line of code where the error occured, if such an error exist, your app wont work.
To download any text on the app one can also use app.Download("This is my content for file a", "sithaso.txt"). This does not need any dependencies added to SithasoDaisy.
 
asales

asales

Expert
Licensed User
Longtime User
Mashiane said:
  • Before you run your app, always check the b4j ide logs for errors. If there are, try and clear these first.
  • When you run your app, if the b4j ide compilation logs report an error, your app will not work.
  • In some cases the web console, will show you errors in "red", indicating a line of code where the error occured, if such an error exist, your app wont work.
Click to expand...
There are no errors in compilation (see the Logs). The app is started but I get the blank page, using the project that I post above.
B4X: 
Reading B4J INI in C:\Users\MYT\AppData\Roaming\Anywhere Software\B4J to find Additional Libraries folder...
Found Additional Libraries folder: C:\B4J\Library
Starting to transpile...
Building C:\laragon\www\sithasodrawer\scripts\app.js
Loading layout adblanklayout...
Loading layout serviceslayout...
Loading layout baselayout...
Loading layout contactuslayout...
Loading layout homelayout...
Processing b4xlib: sithasodaisy
Adding Layout adblanklayout used by blanklayout
Adding Layout contactuslayout used by pgcontactus
Adding Layout homelayout used by pghome
Adding Layout baselayout used by pgindex
Adding Layout serviceslayout used by pgservices
Merging CSS files...
  CSS files are merged in the order you added them
  --> C:\laragon\www\sithasodrawer\styles\sweetalert2.min.css
  --> C:\laragon\www\sithasodrawer\styles\daisyui.min.css
  --> C:\laragon\www\sithasodrawer\styles\fontawesome.min.css
  --> C:\laragon\www\sithasodrawer\styles\flatpickr.min.css
  --> C:\laragon\www\sithasodrawer\styles\fc.min.css
  --> C:\laragon\www\sithasodrawer\styles\prism.min.css
  --> C:\laragon\www\sithasodrawer\styles\core.min.css
  --> C:\laragon\www\sithasodrawer\styles\checkbox.min.css
  --> C:\laragon\www\sithasodrawer\styles\tree.min.css
  --> C:\laragon\www\sithasodrawer\styles\editor.min.css
  --> C:\laragon\www\sithasodrawer\styles\toastui-chart.min.css
  --> C:\laragon\www\sithasodrawer\styles\frappe-gantt.min.css
Merging Javascript files (not used in a Service Worker)...
-> JS files are merged in the order you added them.
  --> C:\laragon\www\sithasodrawer\scripts\tailwind.min.js
  --> C:\laragon\www\sithasodrawer\scripts\fileSaver.min.js
  --> C:\laragon\www\sithasodrawer\scripts\themechange.js
  --> C:\laragon\www\sithasodrawer\scripts\alasql.min.js
  --> C:\laragon\www\sithasodrawer\scripts\chart.min.js
  --> C:\laragon\www\sithasodrawer\scripts\chartjs-adapter-date-fns.bundle.min.js
  --> C:\laragon\www\sithasodrawer\scripts\chartkick.min.js
  --> C:\laragon\www\sithasodrawer\scripts\qrcode.min.js
  --> C:\laragon\www\sithasodrawer\scripts\html5-qrcode.js
  --> C:\laragon\www\sithasodrawer\scripts\webcam.min.js
  --> C:\laragon\www\sithasodrawer\scripts\axios.min.js
  --> C:\laragon\www\sithasodrawer\scripts\fuse.min.js
  --> C:\laragon\www\sithasodrawer\scripts\lz-string.min.js
  --> C:\laragon\www\sithasodrawer\scripts\flatpickr.min.js
  --> C:\laragon\www\sithasodrawer\scripts\lottie-player.js
  --> C:\laragon\www\sithasodrawer\scripts\form-data-json.min.js
  --> C:\laragon\www\sithasodrawer\scripts\docxtemplater.min.js
  --> C:\laragon\www\sithasodrawer\scripts\pizzip.min.js
  --> C:\laragon\www\sithasodrawer\scripts\pizzip-utils.min.js
  --> C:\laragon\www\sithasodrawer\scripts\rolldate.min.js
  --> C:\laragon\www\sithasodrawer\scripts\htmlParser.min.js
  --> C:\laragon\www\sithasodrawer\scripts\pocketbase.umd.js
  --> C:\laragon\www\sithasodrawer\scripts\fc.min.js
  --> C:\laragon\www\sithasodrawer\scripts\signature_pad.umd.min.js
  --> C:\laragon\www\sithasodrawer\scripts\dayjs.min.js
  --> C:\laragon\www\sithasodrawer\scripts\numeral.min.js
  --> C:\laragon\www\sithasodrawer\scripts\papaparse.min.js
  --> C:\laragon\www\sithasodrawer\scripts\prism.min.js
  --> C:\laragon\www\sithasodrawer\scripts\beautify.min.js
  --> C:\laragon\www\sithasodrawer\scripts\beautify-css.min.js
  --> C:\laragon\www\sithasodrawer\scripts\beautify-html.min.js
  --> C:\laragon\www\sithasodrawer\scripts\prettier.min.js
  --> C:\laragon\www\sithasodrawer\scripts\crypto-js.min.js
  --> C:\laragon\www\sithasodrawer\scripts\supabase.js
  --> C:\laragon\www\sithasodrawer\scripts\pouchdb.min.js
  --> C:\laragon\www\sithasodrawer\scripts\pouchdb.find.js
  --> C:\laragon\www\sithasodrawer\scripts\jquery-3.6.3.min.js
  --> C:\laragon\www\sithasodrawer\scripts\core.min.js
  --> C:\laragon\www\sithasodrawer\scripts\draggable.min.js
  --> C:\laragon\www\sithasodrawer\scripts\droppable.min.js
  --> C:\laragon\www\sithasodrawer\scripts\checkbox.min.js
  --> C:\laragon\www\sithasodrawer\scripts\tree.min.js
  --> C:\laragon\www\sithasodrawer\scripts\editor.min.js
  --> C:\laragon\www\sithasodrawer\scripts\raphael.min.js
  --> C:\laragon\www\sithasodrawer\scripts\justgage.js
  --> C:\laragon\www\sithasodrawer\scripts\js-fluid-meter.js
  --> C:\laragon\www\sithasodrawer\scripts\toastui-chart.min.js
  --> C:\laragon\www\sithasodrawer\scripts\jquery.knob.min.js
  --> C:\laragon\www\sithasodrawer\scripts\togeojson.js
  --> C:\laragon\www\sithasodrawer\scripts\tokml.js
  --> C:\laragon\www\sithasodrawer\scripts\fxparser.min.js
  --> C:\laragon\www\sithasodrawer\scripts\moment.min.js
  --> C:\laragon\www\sithasodrawer\scripts\snap.svg-min.js
  --> C:\laragon\www\sithasodrawer\scripts\frappe-gantt.min.js
  --> C:\laragon\www\sithasodrawer\scripts\insert-rule.min.js
  --> C:\laragon\www\sithasodrawer\scripts\sweetalert2.all.min.js
Building C:\laragon\www\sithasodrawer\index.html
 
The total size of your local CSS and JS files is 8.2MB and another 1.3MB 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!
Mashiane said:
To download any text on the app one can also use app.Download("This is my content for file a", "sithaso.txt"). This does not need any dependencies added to SithasoDaisy.
Click to expand...
Much better. Thanks!
 
asales

asales

Expert
Licensed User
Longtime User
I have this link:
that me returns a JSON:
B4X: 
{"resultado":"1","resultado_txt":"sucesso - cep completo","uf":"MG","cidade":"Belo Horizonte","bairro":"Centro","tipo_logradouro":"Avenida","logradouro":"Afonso Pena"}
I try to use the code of the module demoADClients of the SithasoDaisyDemo to get the contents, but don't works. The postal.Success return False.
Here is my code. What I can do wrong?
B4X: 
Sub btnPostalCode_click (e As BANanoEvent)  
    Dim postal As SDUIFetch
    postal.Initialize("http://cep.republicavirtual.com.br/web_cep.php?cep=30130003&formato=json")
    postal.SetContentTypeApplicationJSON
    banano.Await(postal.GetWait)
    If postal.Success Then
        'on success, get the results
        Dim response As Map = postal.response
        'as per fields we have defined.
        Dim results As List = response.get("results")  '??
        'as per fields we have defined.
        For Each postalcode As Map In results
            Dim c As Map = CreateMap()
            c.Put("uf", postalcode.Get("uf"))
            c.Put("cidade", postalcode.Get("cidade"))
            c.Put("bairro", postalcode.Get("bairro"))
            c.Put("logradouro", postalcode.Get("logradouro"))
        Next
    Else
        Log(postal.ErrorMessage)
    End If
End Sub
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
asales said:
2.1 - I can't see the SDUIButton1 that I put in the home layout (pgHome).
Click to expand...
Any component you put in the abstract designer NEEDS the ParentID property to be specified, this is the name of the component it sits inside of. This is indicated in the eBook. You missed that. Set the parentid to be "home" in your case, the button will show.

The reason for this is because when I started developing SithasoDaisy, I built it for "code" and then later added "abstract designer" support.

ParentIDs are compulsory.
 
You must log in or register to reply here.

Similar Threads

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