EUREKA !!! Descobri o que é GUI

[JoséQuintas]

Foi depois da dica do Itamar, sobre retirar o texto dos buttons.

E isso sim, explica tudo.

[JoséQuintas]

Qual a vantagem de usar computador e programas?
Pra tudo ser mais rápido.

Porque usuários preferem gráficos de pizza, barra, etc. ?
Porque tem mais cores, são mais bonitos?
NÃO. Porque passam a mensagem de forma rápida, muitas vezes nem precisa de números ou palavras.

O que é mais rápido?
Mostrar para o usuário "aperta INS pra incluir alguma coisa", ou mostrar um button com o ícone de inclusão?
Com certeza o button com ícone.

GUI é exatamente isso: substituir palavras por imagens, passar informação de forma mais rápida.

O Itamar comentou sobre retirar esse texto dos buttons.
Foi isso que me fez pensar.

Meus buttons tem texto, mostrando para o que serve o button.
Isso significa que EU mesmo, considerei a imagem apenas como enfeite.

É esse o ponto: GUI não é enfeite. GUI é pra passar a informação ao usuário de forma rápida.
Ao retirar o texto, a imagem passa a fazer parte do aplicativo, ela é a fonte de informação para o usuário sobre o que faz o button.

Então, não se trata de enfeitar a tela, mas de passar informação de forma rápida.

Agora vamos repassar algumas opções existentes:

Barra de rolagem em browse: não é enfeite, é pra mostrar ao usuário que ele pode navegar, e o quanto pode navegar
combobox: não é enfeite, é pra mostrar que o usuário pode escolher, e quais são as opções
radiobutton: idem
textbox com retângulo: não é enfeite, é pra mostrar qual o tamanho do texto que o usuário pode preencher, ou até quais os campos que ele pode preencher
button: é pra mostrar que o usuário pode clicar, e a imagem dizer pra que serve
E assim por diante.

A confusão sobre isso é tanta, que chegaram até a falar da letra usada pra console.
Qual a diferença se usar letra console ou não? talvez vai dar pra ler mais fácil
ok, mas isso é só uma pequena parte do conjunto.

Então o que é o aplicativo GUI?
Ele vai usar o visual pra passar as mensagens de forma rápida, o visual NÃO vai ser enfeite, vai passar informação.

[JoséQuintas]

Está aí o exemplo mais conhecido.
Estamos usando a cor do GET, não como enfeite, mas pra passar uma mensagem ao usuário.
A mensagem é sobre aonde o usuário está digitando, e até sobre o tamanho a ser digitado.
Dizer isso com palavras.... ferrou.... não teria tela suficiente pra isso, e nem o usuário iria ler todo texto.

[JoséQuintas]

Explicada toda a nossa confusão de GUI.

Esta lib faz isto, esta outra também, mas esta tem isto, esta outra também....
Esta dá trabalho, mas esta faz mais fácil....
Esta não faz isto, aquela não faz isto outro....
A letra desta é console, a letra desta outra é melhor de ler...
E assim vém vindo a discussão.

Tudo se trata de mensagem visual. Não é enfeitar, não é deixar "mais bonitinho".

A questão é: ele está passando mensagens visuais? ou só está enfeitado?

Acho que aí que o aplicativo pode ficar feio ou poluído: enfeite demais, sem passar mensagem nenhuma, ou querer passar tanta mensagem de uma vez, que o usuário nem sabe mais do que "a tela está falando".

Agora sim, achamos o ponto principal.
O aplicativo precisa usar visual pra conversar mais rápido com o usuário.

Quem usa console, tá acostumado a usar palavras pra conversar com o usuário, o resto considera apenas enfeite.
Quem usa GUI, tá considerando que o visual ficou mais bonito, e que console não permite isso.
Mas tudo tem a ver com: passar mensagens visuais para o usuário, mais imagens e menos texto.

Era essa outra confusão mal resolvida de minha parte, até comentei que ia enfeitar mais meu aplicativo.
Dá pra enfeitar usando GTWVW, GTWVG, HWGUI, HMG, etc., todas permitem colocar enfeites, iguais ou diferentes.

Mas o ponto não é enfeitar, o ponto é passar mensagens que interessem para o usuário e/ou para o aplicativo, principalmente as que eliminarem necessidade de texto.

Muitas dessas mensagens de texto nem são mais necessárias, porque os usuários já acostumaram.
Por exemplo "clique no botão de incluir pra incluir", esse texto já foi totalmente substituído pelo desenho do button junto com a imagem.

E é isso.... tudo se trata de deixar o visual falar mais do que palavras, do visual realmente fazer parte do aplicativo.

O que usar para o visual? sei lá... talvez começar olhando todo texto que o aplicativo mostra, pra retirar o que não precisa, e pra ver se pode substituir algum texto por recurso visual.
Com isso não vou estar enfeitando, vou estar colocando recurso visual útil.

E é assim que começa toda a brincadeira !!!!

Nota: Agora sim, temos exatamente o que comparar, não é a existência do recurso, e sim o que ele causa na mensagem geral da tela.

[JoséQuintas]

tela.png (21.66 KiB) Exibido 6625 vezes

Voltando no button.
Se o ícone mostra uma impressora, só pode ser pra imprimir.
A imagem já passou a mensagem que precisava.
O texto passou a ser uma poluição inútil.

Acostumado com console, deixei o visual pra console, não percebi isso antes.

É por aí....
E não tem nada a ver com lib ou recurso ou questão técnica ou ficar mais bonitinho...

[JoséQuintas]

o browse.
Será que realmente eu precisava mostrar os buttons de seta pra cima e seta pra baixo? Isso não foi só enfeite?
Será que eu precisava colocar a mensagem de selecionar e teclar ENTER?

Adorei a descoberta sobre GUI.

Porque muitos usam console? porque passam as mensagens do aplicativo por texto, não perceberam que por imagem é mais rápido
Devem usar até mensagem demais, poluindo a tela.

Porque muitos usam GUI? talvez nem perceberam, talvez usem só porque as telas ficam mais bonitas, ou porque falam muito do aplicativo ser GUI, então usar uma LIB GUI consideram ser solução, o aplicativo ficar mais atual.

Porque o aplicativo console é ruim pra novos usuários?
Porque o usuário precisa ficar lendo as coisas, ou porque a tela não diz o que fazer.
Já num aplicativo direcionado ao visual, o usuário apenas olha a tela, e o visual pode dizer tudo que ele precisa saber.

Fala sério.... não é lindo isso? parece que explica tudo, e principalmente, abre os olhos de quem usa console para o que realmente significa GUI, e provavelmente não tenham pensado dessa forma.

Acho que agora sim, usuários console texto tem motivos pra querer mais além de texto.

[Claudio Soto]

GUI es una de las tantas filosofías de comunicación maquina-usuario, estudiada y desarrollada en Universidades y Laboratorios por expertos (artistas, sociólogos, psicológicos, agentes de marketing, programadores, etc ) para lograr la mejor experiencia para el usuario, no es por azar que ciertos iconos y colores son universales en las GUI de los diferentes SO y aplicaciones. Todo esta estudiado y persigue un determinado objetivo. Todo esta pensado para atrapar al usuario haciendo que con muy poco esfuerzo y conocimiento pueda realizar tareas complejas. Además muchas aplicaciones estan diseñadas para generar cierto grado de adicción por parte del usuario, creando funcionalidades que el usuario ni sabia que necesitaba.
Por eso hoy en dia las GUI son tan "nesesarias" para los usuarios.

[Abel]

jose quintas,
eu trabalho em modo console vindo do clipper puro,
harbour 3.2

ja tentei colocar umas imagens sem sucesso.

pode mandar ou postar algum exemplo simples para que eu possa pelo
menos criar um menu ?

Obrigado,
ABEL

[Fernando queiroz]

Usando Harbour 3.2 + HWGUI 2.22 B4

Código: Selecionar todos

				INIT DIALOG oMENUPRINC TITLE "SGC - SISTEMA DE GESTÃO DE COMÉRCIO" ;
					ICON HIcon():Addresource('SGC_ICON') ;
					AT 0, 0 SIZE 1360,768 FONT oFont ;
					ON INIT {|| MENU_PRINCIPAL_onDlgInit( oMENUPRINC, M->NIV_ACESSO )};
					STYLE WS_OVERLAPPEDWINDOW;
					BACKCOLOR 0;
					
//				@ 0,1 PANEL oPanel1 SIZE 1360,80 ;
//					ON PAINT {|| Gradiente( oPanel1, 0, 1, 1360, 80, 1, {0, 0, 13400576} ) }
//					oPanel1:Anchor:=130
				@ 0,0 PANEL oPanel1 SIZE 1360,80 ;
					BACKCOLOR 13400576
					oPanel1:Anchor:=130

				@ 0,0 LINE oLine LENGTH 1360 
					oLine:Anchor:=130

				@ 200,18 SAY oEmpresa CAPTION hlusuario( oServer )   OF oPanel1 SIZE 1155,66 ;
					STYLE ES_LEFT ;
					TRANSPARENT COLOR 16777215 ;
					FONT HFont():Add( '',0,-42,700,,,)  


				@ 212,80 OWNERBUTTON oButton17  ON CLICK {||INFO( SGCRELEASE )} ;
					SIZE  85,85 FLAT ;
					TEXT 'Info'  COLOR 16777215;
					COORDINATES 0, 40, 0, 0  ;
					BITMAP HBitmap():Addresource("about-256-30")  ;
					COORDINATES 0, 5, 0, 0 
					oButton17:aStyle := { HStyle():New( {0}, 4,, ),  HStyle():New( {0}, 1, ), HStyle():New( {0}, 1,  ) }

				@ 212,160 OWNERBUTTON oButton18  ON CLICK {||LembreteClass():new(oServer):LEMBRETE(  )} ;
					SIZE 85,85 FLAT ;
					TEXT 'Notas'  COLOR 16777215;
					COORDINATES 0, 40, 0, 0  ;
					BITMAP HBitmap():Addresource("clipboard-4-256-30")  ;
					COORDINATES 0, 5, 0, 0 
					oButton18:aStyle := { HStyle():New( {0}, 4,, ),  HStyle():New( {0}, 1, ), HStyle():New( {0}, 1,  ) }

				@ 212,240 OWNERBUTTON oButton19  ON CLICK {||CertificadoClass():new(oServer):GERENCIA_CERTIFICADO(  )} ;
					SIZE  85,85 FLAT ;
					TEXT 'Certificado'  COLOR 16777215;
					COORDINATES 0, 40, 0, 0  ;
					BITMAP HBitmap():Addresource("website-optimization-30")  ;
					COORDINATES 0, 5, 0, 0 
					oButton19:aStyle := { HStyle():New( {0}, 4,, ),  HStyle():New( {0}, 1, ), HStyle():New( {0}, 1,  ) }

				@ 212,320 OWNERBUTTON oButton20  ON CLICK {||SenhaClass():new(oServer):SENHA_MANUTENCAO( )} ;
					SIZE  85,85 FLAT ;
					TEXT 'Usuários'  COLOR 16777215;
					COORDINATES 0, 40, 0, 0  ;
					BITMAP HBitmap():Addresource("login-30")  ;
					COORDINATES 0, 5, 0, 0 
					oButton20:aStyle := { HStyle():New( {0}, 4,, ),  HStyle():New( {0}, 1, ), HStyle():New( {0}, 1,  ) }
					
//				@ 212,400 OWNERBUTTON oButton21  ON CLICK {||_rotinas( oServer )} ;
//					SIZE  85,85 FLAT ;
//					TEXT 'Configurações'  COLOR 16777215;
//					COORDINATES 0, 40, 0, 0  ;
//					BITMAP HBitmap():Addresource("login-30")  ;
//					COORDINATES 0, 5, 0, 0 
//					oButton21:aStyle := { HStyle():New( {0}, 4,, ),  HStyle():New( {0}, 1, ), HStyle():New( {0}, 1,  ) }


				@ 881,83 SAY oLabel2  CAPTION "Movimento: " + DTOC(M->DAT_HOJE)  SIZE 455,30 STYLE ES_RIGHT; 
					FONT HFont():Add( '',0,-19,400,,,);
					COLOR 16777215 BACKCOLOR 0
					oLabel2:Anchor:=9

				@ 881,107 SAY oLabel3  CAPTION "Operador: " + RTRIM(M->OPERADOR)  SIZE 455,30 STYLE ES_RIGHT; 
					FONT HFont():Add( '',0,-19,400,,,);
					COLOR 16777215 BACKCOLOR 0
					oLabel3:Anchor:=9

				@ 881,132 SAY oLabel4 CAPTION "Computador: " + rtrim(hwg_GetComputerName())  SIZE 455,30 STYLE ES_RIGHT; 
					FONT HFont():Add( '',0,-19,400,,,);
					COLOR 16777215 BACKCOLOR 0
					oLabel4:Anchor:=9

				@ 0,1 PANEL oPanel2 OF oPanel1 SIZE  201,78 ;
					ON PAINT {|| Gradiente( oPanel2, 0, 0, 201, 78, 4, {13400576, 0} ) }

				@ 80,6 BITMAP oBitmap1  SHOW HBitmap():Addresource('sgc-32')  STRETCH 0  ;
					OF oPanel2  SIZE 40,40 

				@ 7,50 SAY oLabel1 CAPTION "SGC v8.0" OF oPanel2 SIZE 187,22 STYLE SS_CENTER; 
					FONT HFont():Add( '',0,-19,400,,,);
					COLOR 16777215 BACKCOLOR 16777215 TRANSPARENT

				@ 0,80 PANEL oPanel3 SIZE 201,941 ;
					ON PAINT {|| Gradiente( oPanel3, 0, 0, 201, 1071, 4, {13400576, 0} ) }
					oPanel3:Anchor:=65

				@ 2,10 OWNERBUTTON oButton1 OF oPanel3 ON CLICK {||ProdutosClass():new(oServer):Produtos_Manutencao()} ;
					SIZE 195,35 FLAT ;
					TEXT 'Produtos'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource("product-256-30")  ;
					COORDINATES 5, 2, 0, 0 
					oButton1:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }

				@ 2,47 OWNERBUTTON oButton2 OF oPanel3 ON CLICK {||CadastrosClass():new(oServer):Cadastros_Manutencao()} ;
					SIZE 195,35 FLAT ;
					TEXT 'Cadastros'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource("group-256-30")  ;
					COORDINATES 5, 2, 0, 0 
					oButton2:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }

				@ 2,84 OWNERBUTTON oButton3 OF oPanel3 ON CLICK {||VendedoresClass():new(oServer):Vendedores_Manutencao()} ;
					SIZE 195,35 FLAT ;
					TEXT 'Vendedores'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource("workers-256-30" ) ;
					COORDINATES 5, 2, 0, 0 
					oButton3:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }

				@ 2,121 OWNERBUTTON oButton4 OF oPanel3 ON CLICK {||PedidoCompraClass():new(oServer):Compra_Manutencao()} ;
					SIZE 195,35 FLAT ;
					TEXT 'Compras'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource("buy-256-30")  ;
					COORDINATES 5, 2, 0, 0 
					oButton4:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }
					
				@ 2,158 OWNERBUTTON oButton5 OF oPanel3 ON CLICK {||EntradaClass():new(oServer):Entrada_Manutencao()} ;
					SIZE 195,35 FLAT ;
					TEXT 'Entradas'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource("truck-256-30")  ;
					COORDINATES 5, 2, 0, 0 
					oButton5:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }

				@ 2,195 OWNERBUTTON oButton6 OF oPanel3 ON CLICK {||TransferenciaClass():new(oServer):Transferencia_Manutencao()} ;
					SIZE 195,35 FLAT ;
					TEXT 'Transferências'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource("sinchronize-256-30")  ;
					COORDINATES 5, 2, 0, 0 
					oButton6:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }

				@ 2,232 OWNERBUTTON oButton7 OF oPanel3 ON CLICK {||PedidoClass():new(oServer):Pedido()} ;
					SIZE 195,35 FLAT ;
					TEXT 'Vendas'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource("cart-8-256-30")  ;
					COORDINATES 5, 2, 0, 0 
					oButton7:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }

				@ 2,269 OWNERBUTTON oButton8 OF oPanel3 ON CLICK {||GerenciaPedidoClass():new(oServer):GERENCIA_PEDIDO()} ;
					SIZE 195,35 FLAT ;
					TEXT 'Vendas Gerênciar'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource("browser-256-30")  ;
					COORDINATES 5, 2, 0, 0 
					oButton8:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }

				@ 2,306 OWNERBUTTON oButton9 OF oPanel3 ON CLICK {||CaixaClass():new(oServer):Caixa()} ;
					SIZE 195,35 FLAT ;
					TEXT 'Caixa'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource("money-bag-256-30")  ;
					COORDINATES 5, 2, 0, 0 
					oButton9:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }

				@ 2,343 OWNERBUTTON oButton10 OF oPanel3 ON CLICK {||GerenciaDanfeClass():new(oServer):GERENCIA_DANFE()} ;
					SIZE 195,35 FLAT ;
					TEXT 'DANFE'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource("invoice-256-30")  ;
					COORDINATES 5, 2, 0, 0 
					oButton10:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }

				@ 2,380 OWNERBUTTON oButton11 OF oPanel3 ON CLICK {||GerenciaCupomClass():new(oServer):GERENCIA_CUPOM()} ;
					SIZE 195,35 FLAT ;
					TEXT 'CUPOM'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource("pages-2-256-30")  ;
					COORDINATES 5, 2, 0, 0 
					oButton11:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }
					
				@ 2,417 OWNERBUTTON oButton12 OF oPanel3 ON CLICK {||ReceberClass():new(oServer):RECEBER_MANUTENCAO()} ;
					SIZE 195,35 FLAT ;
					TEXT 'Contas a Receber'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource("cash-receiving-256-30")  ;
					COORDINATES 5, 2, 0, 0 
					oButton12:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }

				@ 2,454 OWNERBUTTON oButton13 OF oPanel3 ON CLICK {||PagarClass():new(oServer):Pagar_Manutencao()} ;
					SIZE 195,35 FLAT ;
					TEXT 'Contas a Pagar'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource("banknotes-256-30")  ;
					COORDINATES 5, 2, 0, 0 
					oButton13:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }
					
				@ 2,535 OWNERBUTTON oButton14 OF oPanel3 ON CLICK {||_rotinas( oServer )} ;
					SIZE 195,35 FLAT ;
					TEXT 'Configurações'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource("setup-30")  ;
					COORDINATES 5, 2, 0, 0 
					oButton14:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }
					oButton14:Anchor:=48

				@ 2,570 OWNERBUTTON oButton15 OF oPanel3 ON CLICK {|| CONFIGNFECLASS():new(oServer):CONFIGURA_SISTEMA(  ) } ;
					SIZE 195,35 FLAT ;
					TEXT 'Ferramentas'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource("settings-24-256-30")  ;
					COORDINATES 5, 2, 0, 0 
					oButton15:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }
					oButton15:Anchor:=48

				@ 2,605 OWNERBUTTON oButton16 OF oPanel3 ON CLICK {||hwg_EndDialog()} ;
					SIZE 195,35 FLAT ;
					TEXT 'Sair'  COLOR 16777215;
					COORDINATES 50, 0, 0, 0  ;
					BITMAP HBitmap():Addresource('door-8-256-30') ;
					COORDINATES 5, 2, 0, 0 
					oButton16:aStyle := { HStyle():New( {13400576, 0}, 4,, ),  HStyle():New( {113400576, 0}, 4,, 2, 16777215 ), HStyle():New( {13400576, 0, 0}, 4,  ) }
					oButton16:Anchor:=48

				ACTIVATE DIALOG oMenuPrinc  MAXIMIZED 
		ELSE
			PedidoClass():new(oServer):Pedido()
		ENDIF

	ENDDO

RETURN NIL

[Nascimento]

como me adaptei melhor a minigui ex a tela do meu sistema

tela principal do sistema usando harbour/minigui e Letodb

[JoséQuintas]

pode mandar ou postar algum exemplo simples para que eu possa pelo
menos criar um menu ?

Não entendi o "criar um menu".

[Nascimento]

pode mandar ou postar algum exemplo simples para que eu possa pelo
menos criar um menu

amigo aconselho vc escolher uma lib grafica estudar seus exemplos , por exemplo a minigui vem repleta de exemplos de menus até aplicativos prontos

a hwgui até vem mais é um pouco escaça de exemplos na minha opnião , o amigo quintas de da muito bem com a gtwvg em fim são várias possibilidades

falo por mim a minha dificuldade no inicio é que o costume de programar da maneira console me atrapalhou muito, console é procedural, grafico é eventos

de inicio fui estudando os exemplos da minigui, fazendo pequenas coisas, o tal chamado "hello word" , passei horas pra escrever em um banco as infos de um textbox até coonsegui entender o funcionamento da coisa

depois comecei a portar meu sistema, aproveitei 90% do codigo original , as vezes tendo que modificar , recortar-los e criar mais funçoes
hj ja não tenho tanta dificuldade , siga esses passos e va externando os problemas que vc ira encontrando que vamos tentando sanar suas duvidas
no mais abraços e bom estudo!