B4J Question [WebApp] Create web page for PC and for Android

[Fabrice La]

Does someone create a WebApp with webpage for Pc and webpage for android(phone) and how to detect android(phone) or PC

 

[billzhan]

You can try frameworks like jquery mobile http://jquerymobile.com/ or bootstrap http://getbootstrap.com/ . They will adapt to different screen sizes.

An example from Rob link

Pingendo http://www.pingendo.com/ is a tool with GUI can save your time on bootstrap.

 

[Hilton]

Hello,

I have an app that handles customers/appointments/visits/reminders that runs on the phone. When B4J first came out I used that product and it was fine, then the Web version came out and I tried it and it works well. Then the question arose - what about mobile?

I have since been creating a Jquery mobile version and it works very well. As billzhan said, it adapts to various screens and todate I have run it on a small android tablet, ipad mini, android phone, iphone and laptop. If you use google chrome browser there do not seem to be any problems. On the smaller devices some of the standard(safari?) browsers can be a bit odd. When I wrote the JQ version I wrote my own tableview and set things up so that resizing would be somewhat automatic and even though everything fitted on a phone screen it all became very compressed and impractical.

Now that I am using JQ Mobile I find everything fits well, however, the redesigned screen layouts are not quite as "pretty" as before.

Please be aware that I am not an expert! however, my experiences thus far have been such that I have given up using any other development tools other than B4xxx stuff. I will probably try to stick with JQ mobile for the web apps and design things so that the app can run on any device(without looking too odd).

Give it a go!

Bye,
Hilton.

 

[Fabrice La]

Thank-you for your comments.
For what I see in JQ Mobile, it seems to be more complicated to use it. May be I am wrong but in the Rob example there is custom in the js file to be able to use it in B4J.

 

[Hilton]

Hi again,

I am not yet used to JQ Mobile and I am only vaguely familiar with JQ. What I have found is that every problem I have had or question I have asked I have been able to find the answer to on the web. I started by putting too much in the js files but I then realised that I could run functions from within B4J. I guess what I am saying is that experience improves things and I have been able to simplify as I progress. What at first looks hellish complicated is more a case of lack of familiarity.

I am not saying it is easy, just that with some perseverance it get's a lot easier. I use very little js.

As they say:

You will never know
unless you give it a go

I would encourage you to give it a try and wish you well in your efforts.

Bye,
Hilton.

 

[rwblinn]

Hi,

I fully concur with Hilton as started to explore same way, resulting in keeping the JavaScript code to a minimum (to handle events, update selectors etc.), expect when using external libraries as required.
B4J offers powerful methods like Eval or RunFunction, but also the b4j_event in the html code is key to handle events. Let the B4J webserver do the work.
Using the jQuery Mobile library with its many plugins is evolving - keep watching. The documentation is improving.
Find here , go to Webapps what I have documented and build so far.

Good Luck,
Rob

 

[Fabrice La]

JQMobile seems to be nice to use.

But if I develop website with JQM with tables, buttons, ... that look nice on my PC how it will look on my 3" mobile phone. Do I will see the same web page with all the tables, buttons ? how will be the size of the buttons ?

Do I have to create the same Webappli in 2 versions one for PC one for Mobile devices ? How to detect if it is a PC or Mobile ?

 

[Hilton]

Hi Fabrice(?),

What I did was:
1. Design a simple table - let's say customers - and set it up in sqlite
2. Populate the table using, for example, Sqlite Expert Personal 3.
3. Decide how you are going to implement a table - I used a listview.
4. Write the html,js and b4j stuff
5. Try it on each device and fiddle with it until you are happy.

Then I wrote the maintenance part so that I could maintain the data programatically instead of manually using "Sqlite Expert Personal 3". Because of screen space, I used Tabs (one for the Listview and one for the data for any selected row in the listview). Once you have that working, you are well the way.

Remember that this code will run in a browser on any(?) device (mine runs on Pc,android tablet,iPad mini,iPhone,Samsung phone). I have tested mainly in google chrome and firefox. You do not have to change anything between devices.

Initially I did not like the look on a Pc, however, with some fiddling I am happy with the look. The only thing I do is resize the Pc browser to make it smaller and it all looks good. The advantage of this is that you only have one set of code for all environments. The resizing of fields, buttons etc is done automatically by Jquery Mobile, however, I have had to work something out for only displaying as many listview lines as fit on any given screen because I do not like getting all records for a file. I only get a page at a time - but that is my choice, you may want to work another way.

Hope this helps,
Hilton.