B4J Question [ABMATERIAL] Tutorials

Harris

Expert

Licensed User

Longtime User

• Apr 9, 2016

• #2

https://www.b4x.com/android/forum/t...-to-include-image-in-combo.65380/#post-415122

My 2 cents...
Refer to link above. It will help you get started. Like you, I started from ground zero. It seems so very daunting - however...
There are things to learn, but AB's demos (and feedback app) help you with this.

If you access data from MySQL, you will need a WAMP or LAMP.
check out - http://www.usbwebserver.net/en/ for a Windows server (WAMP) which is small and easy to run locally while you dev...
I use it just because of phpMyAdmin... It helps me explore my data. NOTE: B4J or ABM does not require php, apache or other dependents.

"IF" I ever get my current project complete, I will publish it as a (server side) tutorial of how to deal with B4J and ABM.

I have already posted some examples showing how to deal with certain aspects of ABM (data and data tables mostly) - from my novice point of view.

"I have gone through the frame work and found it very interesting and highly promising tool for web apps"

For the above statement - you are so very correct - and just wait to see what comes next! These 2 guys, and the community are forever surprising us with their excellence.

 

Upvote 0

elitevenkat

Active Member

Licensed User

Longtime User

• Apr 9, 2016

• #3

Thanks for your reply. Kindly tell me how to access demo app from client side !!!

 

Upvote 0

elitevenkat

Active Member

Licensed User

Longtime User

• Apr 9, 2016

• #4

I tried typing http://localhost:51042/demo/ after starting my wamp server. the initial circular loading screen is display and not moving further.

 

Upvote 0

Harris

Expert

Licensed User

Longtime User

• Apr 9, 2016

• #5

elitevenkat said:

I tried typing http://localhost:51042/demo/ after starting my wamp server. the initial circular loading screen is display and not moving further.

Click to expand...

Could be many reasons...
Try right clicking and inspect the browser to see what errors it is giving - file not found, no access to to mysql (if needed), etc.

 

Upvote 0

elitevenkat

Active Member

Licensed User

Longtime User

• Apr 9, 2016

• #6

i had typed "http://localhost:51042/demo/index.html?login=demo&pwd=demo" in the browser

where is the index.html file located in the demo folder ? i cant find it. may e this is the reason ?

 

Upvote 0

M

Michael1968

Active Member

Licensed User

Longtime User

• Apr 9, 2016

• #7

elitevenkat said:

I tried typing http://localhost:51042/demo/ after starting my wamp server. the initial circular loading screen is display and not moving further.

Click to expand...

or the js/css files are missing or in the wrong subfolder

what say's the log in the IDE?

 

Last edited: Apr 9, 2016

Upvote 0

Harris

Expert

Licensed User

Longtime User

• Apr 9, 2016

• #8

If you see the spinning circles, you have hit the index file...
This is the first hurdle to get over using this framework - BUT, the reason is obvious - when you know where to look of course.

The IDE log will help - if it displaying an issue - but it won't if js and css files are misplaced.
Inspect (in Chrome) the browser window. The Console tab may show what is in error.
With 1.08, mine initially showed it couldn't find the B4J- JS.min file... That was because I didn't have the latest (1.08) js and css in the correct subdir...

I don't know if AB put the (1.08) version of js, css in the subdir for demo, so best to copy them in their from the CORRECT source.
This is usually the cause of what you are seeing - since it gets me each time I update (cause I can't seem to follow instructions clearly)!

 

Upvote 0

elitevenkat

Active Member

Licensed User

Longtime User

• Apr 9, 2016

• #9

log from ide




folder structure
D:\ABMATERIAL\20160401w1335\Demo
D:\ABMATERIAL\20160401w1335\Demo\www

my wamp is in c:\wamp

where should i copy the demo and www folder ? kindly guide me to run this demo !!!

 

Upvote 0

Harris

Expert

Licensed User

Longtime User

• Apr 9, 2016

• #10

server is running...
Put the js, css and font folders in the www subdir.

 

Upvote 0

elitevenkat

Active Member

Licensed User

Longtime User

• Apr 9, 2016

• #11

now it says
http://localhost:51042/demo/index.html?login=demo&pwd=demo:1 GET http://localhost:51042/demo/index.html?login=demo&pwd=demo net::ERR_CONNECTION_REFUSED
http://localhost:51042/demo/index.html?login=demo&pwd=demo:1 GET http://localhost:51042/demo/index.html?login=demo&pwd=demo net::ERR_CONNECTION_REFUSED

 

Upvote 0

elitevenkat

Active Member

Licensed User

Longtime User

• Apr 9, 2016

• #12

in the browser console i get
http://localhost:51042/css/materialize.min.css?14 Failed to load resource: the server responded with a status of 404 (Not Found)

 

Upvote 0

Harris

Expert

Licensed User

Longtime User

• Apr 9, 2016

• #13

elitevenkat said:

in the browser console i get
http://localhost:51042/css/materialize.min.css?14 Failed to load resource: the server responded with a status of 404 (Not Found)

Click to expand...

Yep, that's it....
So now what? It can't find the materialize.min.css...
Now you check the folder under (demo) www/css. Is there a materialize.min.css in there? No? - well then the proper css folder was not placed there...

What better way to spend a Friday night (for me anyway - could be morning where you are).

This framework, like all frameworks, have structure (embedded folders expected). Once we conform to their game, we achieve success.
Perhaps this is a feature request for ABM: Where are the freaking required files located (other than the current app/www dir)?

 

Upvote 0

R

rboeck

Well-Known Member

Licensed User

Longtime User

• Apr 9, 2016

• #14

I was able to install all versions till 1.07 without problems, by 1.08 i reinstalled it three times, followed all advices in the forum and still see the spinning circles. I made three copies of js and css in all possible locations, the result is the same. So my wish is the same as Harris, a guide to the complete folder structure, from root to all details folders.

 

Upvote 0

Harris

Expert

Licensed User

Longtime User

• Apr 9, 2016

• #15

Also, you may have to press F5 for the browser to refresh its' cache.
As I add new content and run a new version of my app, I find I constantly have to do this in order for the web browser to see (refresh the cache) with new additions.
This is a "feature" of browser optimization, and from what I understand, little we can do about it code wise.

 

Upvote 0

Harris

Expert

Licensed User

Longtime User

• Apr 9, 2016

• #16

rboeck said:

I was able to install all versions till 1.07 without problems, by 1.08 i reinstalled it three times, followed all advices in the forum and still see the spinning circles. I made three copies of js and css in all possible locations, the result is the same. So my wish is the same as Harris, a guide to the complete folder structure, from root to all details folders.

Click to expand...

I know what you are saying.
The 1.08 versions of (js, css, fonts) were not in the "expected" locations (I copied and pasted several times until I got it right, since there were many). I eventually found the correct versions (buried) somewhere and updated my folders to get it to run.
It is, more than likely, ME that does not comprehend what to do and where to find... However, you raise a similar issue?

WTF?

Thanks

 

Upvote 0

elitevenkat

Active Member

Licensed User

Longtime User

• Apr 9, 2016

• #17

after a f5 refresh i get the folloing error in browser console

Uncaught ReferenceError: $ is not defined
VM1142:171 Uncaught ReferenceError: $ is not defined
VM1143:172 Uncaught ReferenceError: hello is not defined
88665802-081B-4BE8-9145-723F556B66A7:1 Not the top window
VM1142:170 Uncaught ReferenceError: b4j_raiseEvent is not defined
http://static.boostsaves.com/boost/boost.min.js Failed to load resource: the server responded with a status of 503 (Service Unavailable)
util.js:220 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
util.js:220 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
http://localhost:51042/css/materialize.min.css?14 Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:51042/css/bootstrap-material-datetimepicker.min.css?14 Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:51042/css/Squire-UI.min.css?14 Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:51042/css/zocial.min.css?14 Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:51042/css/fullcalendar.min.css?14 Failed to load resource: the server responded with a status of 404 (Not Found)

 

Upvote 0

Harris

Expert

Licensed User

Longtime User

• Apr 9, 2016

• #18

http://localhost:51042/css/materialize.min.css?14 Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:51042/css/bootstrap-material-datetimepicker.min.css?14 Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:51042/css/Squire-UI.min.css?14 Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:51042/css/zocial.min.css?14 Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:51042/css/fullcalendar.min.css?14 Failed to load resource: the server responded with a status of 404 (Not Found)

does the css folder, located in the www folder contain these files?

 

Upvote 0

elitevenkat

Active Member

Licensed User

Longtime User

• Apr 9, 2016

• #19

yes all those files are there

 

Upvote 0

Harris

Expert

Licensed User

Longtime User

• Apr 9, 2016

• #20

This is my directory structure.
Demo folder contains the .bas file and project.
The Objects folder contains the the www folder which houses the rest, including a new demo folder which contains the built output files - and the index.html.
The Objects root will contain the Demo.jar.

My Demo was clean as I had not run it in 1.08.
I compiled it and got the spinning circles and inspect told me of all the missing files.

I copied the css, font and js folders from my working project, pasted them into the www folder and pressed F5.
Like magic, up came the webapp Demo.

Inspect was complaining about resourse files it couldn't find... (png's mostly). This is because AB packed them separately in another zip...

Is this Your Directory Structure?

Thanks

 

Upvote 0