HBuGUI

Issues and Discussions related to Harbour

Moderator: Rathinagiri

Pcmodula
Posts: 34
Joined: Thu Nov 22, 2012 6:00 pm

Re: HBuGUI

Post by Pcmodula »

Roberto Lopez wrote: Mon Jul 08, 2019 12:21 am
Well... I've decided to not publish IDE sources, since it is badly coded (by me, of course :D).
Sir, this statement make her very honorable!
Roberto Lopez wrote: Mon Jul 08, 2019 12:21 am One of the best things about open source, is that you can learn from others code. This is very important point to me, since I was a computer science teacher for many years.
But your students are here with you now!
Roberto Lopez wrote: Mon Jul 08, 2019 12:21 am So, IDE is a sort of bad example of programming and IMHO not a good thing to be published.

Anyway, if people is interesting on improving it yet, I could made it available, with a big disclaimer "DO NOT CODE LIKE THIS" :D
Of course I am also very wrong, but I also learn from the mistakes of others. :D
I'm interested in the sources of the Ide (my idea is to learn) but I am convinced that Soto and Rathnagiri's contributions have fixed at least some mistakes!
Otherwise notes that explain to everyone what should not be done would also be appreciated! :lol:

Waiting for the sources I offer my kindest regards.

PcModula
User avatar
Roberto Lopez
HMG Founder
Posts: 4004
Joined: Wed Jul 30, 2008 6:43 pm

Re: HBuGUI

Post by Roberto Lopez »

jparada wrote: Mon Jul 08, 2019 6:17 pm Hi,
Some time ago I also did tests with JMG, it's amazing simplicity and abstraction to introduce us "Newbies" to the real world web, even as tests I added the Listview widget very rudimentarily and apparently it worked...
Thanks for your kind words.

JMG has some good things:

1. You can create the interface with simple function calls (no HTML and CSS required):

2. All GUI is loaded at app start, so transition between forms is nearly instantaneous.

3. Data is sent to server and retrieved to client using AJAX, so, there is no page-reloads.

4. Being based on jQuery Mobile, it runs well on nearly any browser (desktop or mobile) creating responsive GUIs.

5. The frontend (client GUI) is independent from backend (server). The calls could be the same, even if your backend is PHP+MYSQL, Harbour CGI, mod_harbour or whatever you want to use as server.

6. The library code is very clear and simple. Could be very easy for anyone to work on it, adding new widgets or enhancing existing ones.

7. Not so easy, but, it could be adapted to create a GUI generator for mod_harbour.

So, why did it not succeed?: Not fully sure, but, here are some ideas:

1. It requires to know JavaScript.

2. Requires to think as 'client-server': Not always required to program Windows desktop apps, so, it could intimidate some xBase programmers not used to think in the client-server way.

3. Server calls are asynchronous: The program continue running even if you are 'waiting' for data being retrieved from server (non usual for xBase programmers).

4. Maybe JMG is not as good an easy as I think :D

Anyway... the times had changed since JMG was created. The demand for mobile apps, increased dramatically, so... who knows...
Regards/Saludos,

Roberto


(Veritas Filia Temporis)
User avatar
mol
Posts: 3718
Joined: Thu Sep 11, 2008 5:31 am
Location: Myszków, Poland
Contact:

Re: HBuGUI

Post by mol »

It's very interesting, but I have too little time to learn it at now
User avatar
Roberto Lopez
HMG Founder
Posts: 4004
Joined: Wed Jul 30, 2008 6:43 pm

Re: HBuGUI

Post by Roberto Lopez »

mol wrote: Wed Jul 10, 2019 5:45 am It's very interesting, but I have too little time to learn it at now
JavaScript looks very different to xBase, but, it is really easy and powerful.

Lots of brackets and semicolons, but once you get used to them, it is very easy.

The most interesting (and different) thing, is that variables are objects too.

So...

Code: Select all

var x = "John Doe";
var l = x.length
The 'x' string variable is an object too, then the 'length' property will give you the length of the string.

Code: Select all

var cars = ["Saab", "Volvo", "BMW"];
var x = cars.length;   // The length property returns the number of elements
var y = cars.sort();   // The sort() method sorts arrays
IMHO any experienced xBase programmer could start programming JavaScript in just minutes.

If you go to mobile world, you should not think on screen coordinates for GUI anymore. Instead, you should think in terms of (non-visible) grids/tables where your widgets will be automatically accommodated, according screen size and orientation. This was more difficult to me than JavaScript :).

More on this: https://demos.jquerymobile.com/1.1.2/do ... grids.html

More on JavaScript basics (very easy tutorial): https://www.w3schools.com/js/default.asp
Regards/Saludos,

Roberto


(Veritas Filia Temporis)
EduardoLuis
Posts: 682
Joined: Tue Jun 04, 2013 6:33 pm
Location: Argentina

Re: HBuGUI

Post by EduardoLuis »

Hi Roberto:

Perhaps your last post will make the difference: Javascript look (at least for me) like a deep hole where nobody can imagine where it ends.- Now, thanks for your expanation it looks easy.-
So i'll give the chance.-
Thanks.-
Eduardo
jparada
Posts: 430
Joined: Fri Jan 23, 2009 5:18 pm

Re: HBuGUI

Post by jparada »

Roberto Lopez wrote: Wed Jul 10, 2019 9:10 pm
mol wrote: Wed Jul 10, 2019 5:45 am It's very interesting, but I have too little time to learn it at now
JavaScript looks very different to xBase, but, it is really easy and powerful.

Lots of brackets and semicolons, but once you get used to them, it is very easy.

The most interesting (and different) thing, is that variables are objects too.

So...

Code: Select all

var x = "John Doe";
var l = x.length
The 'x' string variable is an object too, then the 'length' property will give you the length of the string.

Code: Select all

var cars = ["Saab", "Volvo", "BMW"];
var x = cars.length;   // The length property returns the number of elements
var y = cars.sort();   // The sort() method sorts arrays
IMHO any experienced xBase programmer could start programming JavaScript in just minutes.

If you go to mobile world, you should not think on screen coordinates for GUI anymore. Instead, you should think in terms of (non-visible) grids/tables where your widgets will be automatically accommodated, according screen size and orientation. This was more difficult to me than JavaScript :).

More on this: https://demos.jquerymobile.com/1.1.2/do ... grids.html

More on JavaScript basics (very easy tutorial): https://www.w3schools.com/js/default.asp
Hi,
With a little more time, tests, enthusiasm and help from friends, we can move forward..., in this example I get the response from a Web Server Harbour (UHttpd) developed by a friend (also initial stage) and I discovered that JS is case sensitive.
img.png
img.png (14.26 KiB) Viewed 6022 times

Code: Select all

function ajaxRead()
{	
	var request = $.ajax( { url: "https://localhost:8001/tpy?login=javier&pass=123" } );

	request.done(function( data )
	{
		//console.log( data )
		//console.log( data.cUserName )
		if(data.OK){
			console.log("Todo bien!!!");
		}else{
			console.log("Error...");
		}

	});

	request.fail(function(jqXHR, textStatus)
	{
		alert( "Request failed: " + textStatus );
	});

}
After this the idea would be to display the content, humm... I don't know maybe like tests in a jQuery dialog would be fine, but how to do it Roberto, any idea?.

Regards,
Javier
User avatar
Roberto Lopez
HMG Founder
Posts: 4004
Joined: Wed Jul 30, 2008 6:43 pm

Re: HBuGUI

Post by Roberto Lopez »

jparada wrote: Thu Jul 11, 2019 5:46 am After this the idea would be to display the content, humm... I don't know maybe like tests in a jQuery dialog would be fine, but how to do it Roberto, any idea?.
The simplest way to show content, is to use a 'div'.

Take a look at 'Div Test' on JMG demo app.

Defining a Div:

Code: Select all

		div({
			id	:'div1', 
			value	:'<center><hr>I hope you enjoy this demo!!!<hr></center>'
		});
Changing its content:

Code: Select all

set('div1','value', new Value!') )
Or You can fill a table with data coming from server. As shown on 'AJAX Test'.
Regards/Saludos,

Roberto


(Veritas Filia Temporis)
jparada
Posts: 430
Joined: Fri Jan 23, 2009 5:18 pm

Re: HBuGUI

Post by jparada »

Hi,
It works, just not as I hope, I mean:
img1.png
img1.png (5.31 KiB) Viewed 5895 times
img2.png
img2.png (9.75 KiB) Viewed 5895 times

first image I did it like this:

Code: Select all

var contentString = '';
contentString += '<div style="color: blue;">';
contentString += '<h2>Usuario:</h2>';
contentString += '</div>'

div({
	id	:'div1',			
	value: contentString,
});
I want to send the result next to the word "Usuario:", but it is doing it as the second image (loses the style), I did it like this:

Code: Select all

if(data.OK){
     set('div1','value', 'Usuario: ' + data.CUSERNAME );
}else{
     console.log("Error...");
}
But I ask you if I should solve this with knowledge of html?, and the second question, if it is correct the way in which I am trying to integrate html code in JMG lib.

I appreciate some ideas.

Regards,
Javier
User avatar
Roberto Lopez
HMG Founder
Posts: 4004
Joined: Wed Jul 30, 2008 6:43 pm

Re: HBuGUI

Post by Roberto Lopez »

jparada wrote: Fri Jul 12, 2019 7:17 pm
I want to send the result next to the word "Usuario:", but it is doing it as the second image (loses the style), I did it like this:

Code: Select all

if(data.OK){
     set('div1','value', 'Usuario: ' + data.CUSERNAME );
}else{
     console.log("Error...");
}
But I ask you if I should solve this with knowledge of html?, and the second question, if it is correct the way in which I am trying to integrate html code in JMG lib.

I appreciate some ideas.
Your response should include the required HTML tags to keep the format (or give to the content a different format if you wish).

Another way to solve the problem is to have two div's (one for the label and another for the content).
Regards/Saludos,

Roberto


(Veritas Filia Temporis)
jparada
Posts: 430
Joined: Fri Jan 23, 2009 5:18 pm

Re: HBuGUI

Post by jparada »

Hi Roberto,
Thanks for answering and for the ideas.

I'm going to try.

Regards,
Javier
Post Reply