B4J Question B4J WebApp "draw" a web site

[Bokka]

Hello, I'm following the WebApp tutorial for B4J. For now is OK, but I have a question: I know some HTML, but I don't know CSS.

There is a way to "draw" a web site with a visual editor and then include the various references to the various elements of the page?
Like to create a Windows application, first I draw the user interface, and then I write the code for the buttons and the other elements of the application.

ABMaterial for now is too heavy to understand for me...


Thanks in advance!


P.s. Excuse me, wrong section. I wanted to post in the questions section

 

[Harris]

ABMaterial for now is too heavy to understand for me...

Maybe at first glance. But for transportable web sites (any browser), this is the way to go.
Invest some time exploring it. In the end, you shall be glad you did.
Where else can you get Material Design without coding from scratch HTML5, JS, and CSS?

ABM is your GUI, B4J is your server and much more.

All the other web site creators allow you to DRAW a website. These are generally static pictures (png, jpg) of your click elements.
What these lack is the ability to use a DB (MySQL, MSSQL, etc) to connect your database.
This is fine if your site is static (never changes), but most problematic when dynamic.

Good luck.

 

[Bokka]

Maybe at first glance. But for transportable web sites (any browser), this is the way to go.
Invest some time exploring it. In the end, you shall be glad you did.
Where else can you get Material Design without coding from scratch HTML5, JS, and CSS?

ABM is your GUI, B4J is your server and much more.

All the other web site creators allow you to DRAW a website. These are generally static pictures (png, jpg) of your click elements.
What these lack is the ability to use a DB (MySQL, MSSQL, etc) to connect your database.
This is fine if your site is static (never changes), but most problematic when dynamic.

Good luck.

Ok, I will follow your advice. Thanks a lot for the reply!

 

[b4auser1]

ABM is great thing, but it would be great to have something like this: https://www.b4x.com/android/forum/threads/creating-web-clients-like-angular-using-b4x.81424/

 

[Bokka]

ABM is great thing, but it would be great to have something like this: https://www.b4x.com/android/forum/threads/creating-web-clients-like-angular-using-b4x.81424/

Is a great idea!

@Harris: I've followed the basic ABM tutorial on the DEMO. I have copied the "Template" directory on my desktop, and renamed it to "WebApp1". I had renamed also the two files "Template.b4j" and "Template.b4j.meta" to "WebApp1.b4j" and "WebApp1.b4j.meta".

I haven't touched anything else. When I try to open the page to create the project, I receive a 404 error.

I try to open the project in the browser with http://localhost:51042/WebApp1

Where I'm wrong?

P.s. Yes I've copied the various library files to B4J library folder.

 

[Harris]

When running in release mode, look in the objects folder. Do you see a jar file called WebApp1.jar?

The folder structure should look like this example of the Template project.

 

[Bokka]

Yes, I have the same structure and the file called "WebApp1.jar", but I have not the file called "Template.css".

Now I have manually copied the file "Template.css" from the original Template folder to the WebApp1 folder, recompiled the project, but the page still won't load

 

[Harris]

Try
localhost:51042/template

(note the lowercase of template)

When I compile and run the default Template project, it works fine.

 

[Bokka]

Try
localhost:51042/template
(note the lowercase of template)
When I compile and run the default Template project, it works fine.

Sorry for the late reply!

I have tried with the address "localhost:51042/template" and run partially.

I see only the page on the screenshot I have uploaded and nothing else.

I've tried both with Internet Explorer and Seamonkey (with adblock disabled) with the same results

 

[Harris]

That is exactly what you will see with template!
Good Job!

 

[Bokka]

That is exactly what you will see with template!
Good Job!

Thanks again. I have (I hope) the last question:

I have created a layout with ABMGridBuilder, and copied the code on my project, then I have inserted a button to try to see it on the page. But the page remains completely blank. The code is that:

'Non-UI application (console / server application)
#Region  Project Attributes
    #CommandLineArgs:
    #MergeLibraries: True
#End Region

Sub Process_Globals
    Public srvr As Server 
End Sub

Sub AppStart (Args() As String)
    ' the user needs to login
    'ABMShared.NeedsAuthorization = True
 
    ' Build the Theme
    ABMShared.BuildTheme("mytheme")
 
    ' create the app
    Dim myApp As ABMApplication
    myApp.Initialize
     
    ' create the pages
    Dim myPage As ABMPageTemplate
    myPage.Initialize 
     
    ' add the pages to the app
    myApp.AddPage(myPage.Page)
 
    Public page As ABMPage
    Private ABM As ABMaterial
 

    page.AddRows(2, True,"").AddCellsOS(1,0,0,0,5,5,5,"").AddCellsOS(1,0,0,0,7,7,7,"")
    page.AddRows(1, True,"").AddCells12(1,"")
    page.BuildGrid ' IMPORTANT!
 

    Dim btn4 As ABMButton
    btn4.Initializefloating(page, "btn4", "mdi-image-palette", "darkred")
    btn4.size = ABM.BUTTONSIZE_LARGE
    page.Cell(2,1).AddComponent(btn4)

    ' start the server
    myApp.StartServer(srvr, "srvr", 51042) 
     
    'ABMShared.RedirectOutput(File.DirApp, "logs.txt")
 
    StartMessageLoop
 

 
End Sub

 

[Harris]

This does not go in the main.. It will go on a page...

page.AddRows(2, True,"").AddCellsOS(1,0,0,0,5,5,5,"").AddCellsOS(1,0,0,0,7,7,7,"")
    page.AddRows(1, True,"").AddCells12(1,"")
    page.BuildGrid ' IMPORTANT!

    Dim btn4 As ABMButton
    btn4.Initializefloating(page, "btn4", "mdi-image-palette", "darkred")
    btn4.size = ABM.BUTTONSIZE_LARGE
    page.Cell(2,1).AddComponent(btn4)

Open the class module ABMPageTemplate
Scroll down to the BuildPage().
see the ' create the page grid

public Sub BuildPage()
    ' initialize the theme
    BuildTheme
   
    ' initialize this page using our theme
    page.InitializeWithTheme(Name, "/ws/" & ABMShared.AppName & "/" & Name, False, ABMShared.SessionMaxInactiveIntervalSeconds, theme)
    page.ShowLoader=True
    page.PageHTMLName = "index.html"
    page.PageTitle = ""
    page.PageDescription = ""
    page.PageKeywords = ""
    page.PageSiteMapPriority = ""
    page.PageSiteMapFrequency = ABM.SITEMAP_FREQ_YEARLY
       
    page.ShowConnectedIndicator = True
           
    ' adding a navigation bar
    ABMShared.BuildNavigationBar(page, "Title","../images/logo.png", "", "", "")
           
    ' create the page grid
    page.AddRowsM(1,True,0,0, "").AddCells12MP(1,0,0,0,0,"")
    page.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
       
End Sub

Then, in ConnectPage(), you add the components... Review the example (commented out)

public Sub ConnectPage()       
    '    connecting the navigation bar
    ABMShared.ConnectNavigationBar(page)
   
    ' add your components
    '    page.Cell(1,1).AddComponent(ABMShared.BuildParagraph(page, "lbl", "This is a test"))
    '
    '    Dim btn As ABMButton
    '    btn.InitializeRaised(page, "btn", "", "", "Press me", "")
    '    page.Cell(2,1).AddComponent(btn)
       '  Note - this will raise an error since there is no Row 2.  In BuildPage above, page.AddRowsM(1,... states add 1 row - change to 2 and watch it work.
       
    ' refresh the page
    page.Refresh
    ' Tell the browser we finished loading
    page.FinishedLoading
    ' restoring the navigation bar position
    page.RestoreNavigationBarPosition   
   
End Sub

 

[Bokka]

Perfect!
Finally I figured out how it works.

Now I need to do a lot of practice, but for now is ok!


Thanks again a lot!!!!!!

 

[tchart]

Hey all, just as an aside, see here for what I use to render web pages through code. Been meaning to share this for a while but haven't had time to share.

https://www.b4x.com/android/forum/threads/skeleton-css-library.82128/#post-520171