French Problèmes d' UI

[nico78]

Bonjour,

Cela fait un petit moment que je ne suis pas venu; déjà je me demande si la dernière version est bien la 2.02 car j'ai des problèmes sur la conception d'interfaces. En effet, ce que je vois dans le designer (mon mobile est connecté en wifi pour voir en réel l'interface que je crée avec le Designer) n'est plus ce que j'ai, une fois le programme compilé (par exemple, le button et l'EditText n'ont plus la même hauteur, de plus je n'arrive pas à avoir de grosses polices sur les deux parce que il y a comme une marge à l'intérieur des controles et le texte est vite tronqué), il me semble avoir lu un topic là dessus.

 

[klaus]

La version actuelle deB4A est bien la 2.02

La version 2.20 va sortir sous peu. la version beta est déjà aurès des betatesteurs.

Meilleures salutation.

 

[logemag]

Bonsoir Nico, moi je trouve que depuis la version 2, on peut vraiment créer de jolies interfaces, par exemple moi, je bosse autant des applis sur smartphone (3,7" portrait), tablette (10" landscape) et EEEtop androïd X86 (15" landscape), grâce au designer script. C'est assez simple à utiliser, et en plus on encombre pas le code avec des éléments graphiques...

il est même possible d'ajouter des variantes suivant la résolution demandée, ce qui permet d'avoir un rendu quasiment identique d'un smartphone à une tablette...

N'hésitez pas à poser votre projet ici pour trouver une solution à vos problèmes d'interface, si on peut aider...

 

[nico78]

Bonsoir logemag,

Je viens d'esssayer le script et évidemment, je n'arrive pas à le faire fonctionner, j'ai coller l'exemple et j'ai une erreur à btnRight - unassigned variable. Bon je déclare dans le code les variables mais toujours pareil, que faire?

btnRight.Right = 100%x 

btnDown.Bottom = 100%y
btnDown.Width = 100%x

EditText1.Width = 100%x
EditText1.Bottom = btnDown.Top - 5dip

ListView1.Width = 100%x
ListView1.SetTopAndBottom(btnLeft.Bottom, EditText1.Top)

ToggleButton1.HorizontalCenter = 50%x
ToggleButton1.VerticalCenter = 50%y

 

[Informatix]

Bonsoir logemag,

Je viens d'esssayer le script et évidemment, je n'arrive pas à le faire fonctionner, j'ai coller l'exemple et j'ai une erreur à btnRight - unassigned variable. Bon je déclare dans le code les variables mais toujours pareil, que faire?

btnRight.Right = 100%x 

btnDown.Bottom = 100%y
btnDown.Width = 100%x

EditText1.Width = 100%x
EditText1.Bottom = btnDown.Top - 5dip

ListView1.Width = 100%x
ListView1.SetTopAndBottom(btnLeft.Bottom, EditText1.Top)

ToggleButton1.HorizontalCenter = 50%x
ToggleButton1.VerticalCenter = 50%y

C'est assez difficile d'aider quelqu'un avec des bouts de code. Là, par exemple, on pourrait se demander s'il existe un bouton btnRight créé avec le designer.

 

[nico78]

Je viens de comprendre que ça fonctionne de concert avec le designer, en fait ça permet de tester les controles comme si on les déclarait à la volée par programme sauf qu'on est pas obliger de compiler pour voir le résultat.

Ok, c'est bon!

 

[Informatix]

Je viens de comprendre que ça fonctionne de concert avec le designer, en fait ça permet de tester les controles comme si on les déclarait à la volée par programme sauf qu'on est pas obliger de compiler pour voir le résultat.

Ok, c'est bon!

Ce n'est pas seulement pour tester. Le script que tu écris est exécuté lorsque tu charges le fichier .bal dans ton activité (ou ton panel).

 

[nico78]

Oui, j'ai testé et ça marche bien.

 

[logemag]

on peut faire vraiment beaucoup de choses depuis les scripts dans le designer, de plus on peut tester en live chaque élément du script, sans avoir à recompiler, ce qui permet de gagner pas mal de temps.

Pour ma part, je prépare un croquis ou je quadrille l'interface, définit ensuite combien j'aurais de zones, et peut créer ensuite mes subdivisions, ne pas hésiter à créer des conteneurs types panel ou scroll pour aider à mieux séparer les zones ce qui rend ensuite plus aisé les modifications éventuelles.

Par exemple ce code :

'All variants script
x = 100%x /10
y = 100%y /10
fontAdjust = ((100%x + 100%y) / (320dip + 480dip) - 1) * 3
' les panels
pnlOPT1.SetLeftAndRight(0*x, 5*x)
pnlOPT1.SetTopAndBottom(0*y, 1*y)

pnlOPT2.SetLeftAndRight(5*x, 10*x)
pnlOPT2.SetTopAndBottom(0*y, 1*y)

pnlOPT3.SetLeftAndRight(0*x, 5*x)
pnlOPT3.SetTopAndBottom(9*y, 10*y)

pnlBLANC.SetLeftAndRight(10*x, 12*x)
pnlBLANC.SetTopAndBottom(1*y, 6*y)

Scroll1.SetLeftAndRight(5*x, 10*x)
Scroll1.SetTopAndBottom(1*y, 6*y)

scroll2.SetLeftAndRight(5*x, 10*x)
scroll2.SetTopAndBottom(1*y, 6*y)
' les boutons de panOPT1
d = pnlOPT1.Width /3
f = pnlOPT1.Height 
btnCOUV.SetLeftAndRight(0*d, 1*d)
btnCOUV.SetTopAndBottom(0*f, 1*f)

btnCAT.SetLeftAndRight(1*d, 2*d)
btnCAT.SetTopAndBottom(0*f, 1*f)

btnTABL.SetLeftAndRight(2*d, 3*d)
btnTABL.SetTopAndBottom(0*f, 1*f)
' les boutons de panOPT2
g = pnlOPT2.Width /4
h = pnlOPT2.Height 

btnCLEAR.SetLeftAndRight(0*g, 1*g)
btnCLEAR.SetTopAndBottom(0*h, 1*h)

btnSUPP_ART.SetLeftAndRight(1*g, 2*g)
btnSUPP_ART.SetTopAndBottom(0*h, 1*h)

btnHELP.SetLeftAndRight(2*g, 3*g)
btnHELP.SetTopAndBottom(0*h, 1*h)

btnENVOI.SetLeftAndRight(3*g, 4*g)
btnENVOI.SetTopAndBottom(0*h, 1*h)

pnlGRIL.SetLeftAndRight(0*x, 5*x)
pnlGRIL.SetTopAndBottom(1*y, 9*y)

pnlSEARCH.SetTopAndBottom(1*y, 9*y)
pnlSEARCH.SetLeftAndRight(0*x, 5*x)

pnlFONC.SetLeftAndRight(5*x, 10*x)
pnlFONC.SetTopAndBottom(6*y, 10*y)
' les boutons de panFONC
a = (pnlFONC.Width / 5) 
b = (pnlFONC.Height / 4) 
z = 5dip
' avec les boutons du pavé
b1.SetTopAndBottom(0*b+z, 1*b)
b1.SetLeftAndRight(0*a+z, 1*a)
b2.SetLeftAndRight(1*a, 2*a)
b2.SetTopAndBottom(0*b+z, 1*b)
b3.SetLeftAndRight(2*a, 3*a)
b3.SetTopAndBottom(0*b+z, 1*b)
b4.SetLeftAndRight(0*a, 1*a)
b4.SetLeftAndRight(0*a+z, 1*a)
b4.SetTopAndBottom(1*b, 2*b)
b5.SetLeftAndRight(1*a, 2*a)
b5.SetTopAndBottom(1*b, 2*b)
b6.SetLeftAndRight(2*a, 3*a)
b6.SetTopAndBottom(1*b, 2*b)
b7.SetLeftAndRight(0*a+z, 1*a)
b7.SetTopAndBottom(2*b, 3*b)
b8.SetLeftAndRight(1*a, 2*a)
b8.SetTopAndBottom(2*b, 3*b)
b9.SetLeftAndRight(2*a, 3*a)
b9.SetTopAndBottom(2*b, 3*b)
b10.SetLeftAndRight(2*a, 3*a)
b10.SetTopAndBottom(3*b, 4*b-z)
b11.SetTopAndBottom(3*b, 4*b-z)
b11.SetLeftAndRight(1*a, 2*a)
b12.SetLeftAndRight(0*a+z, 1*a)
b12.SetTopAndBottom(3*b, 4*b-z)
' les boutons de fonction pavé
tgPM.SetTopAndBottom(1*b, 2.5*b)
tgPM.SetLeftAndRight(3*a, 4*a)

tgSUP1.SetLeftAndRight(3*a, 4*a)
tgSUP1.SetTopAndBottom(2.5*b, 4*b)

tgSUP2.SetLeftAndRight(4*a, 5*a)
tgSUP2.SetTopAndBottom(2.5*b, 4*b)

btnModif_Suite.SetLeftAndRight(4*a, 5*a)
btnModif_Suite.SetTopAndBottom(1*b, 2.5*b)

lblPRIX.SetLeftAndRight(3*a+5DIP, 5*a-3DIP)
lblPRIX.SetTopAndBottom(0*b+2DIP, 1*b -5DIP)

lblART.SetLeftAndRight(3.2*a+5DIP, 5*a-3DIP)
lblART.SetTopAndBottom(0.7*b,1*b -5DIP)
' les boutons du panOPT3
r = pnlOPT3.Width / 5
t = pnlOPT3.Height 
btnSEARCH.SetLeftAndRight(0*r, 1*r)
btnSEARCH.SetTopAndBottom(0, t)

btnVENDEUR.SetTopAndBottom(0, t)
btnVENDEUR.SetLeftAndRight(1*r, 2*r)

btnGRID_MOINS.SetTopAndBottom(0, t)
btnGRID_MOINS.SetLeftAndRight(2*r, 3*r)

btnGRID_RESULT.SetTopAndBottom(0, t)
btnGRID_RESULT.SetLeftAndRight(3*r, 4*r)

btnGRID_PLUS.SetTopAndBottom(0, t)
btnGRID_PLUS.SetLeftAndRight(4*r, 5*r)

panHELP.SetLeftAndRight(0*x, 10*x)
panHELP.SetTopAndBottom(0*y, 10*y)

WebHELP.SetLeftAndRight(0*x, 10*x)
WebHELP.SetTopAndBottom(1*y, 10*y)

btnWEB.SetLeftAndRight(0*x, 10*x)
btnWEB.SetTopAndBottom(0*y, 1*y)

permet l'affichage d'un projet contenant pas mal de boutons, mais présente plusieurs interêts, il est redimensionnable facilement de 7" à 15" pour une tablette ou un PC, les zones panels sont facilement retrouvables donc on peut rapidement modifier leur position, sans toucher au script des boutons à l’intérieur, ils se redimensionneront toujours... On pourrait facilement faire une interface pour gaucher ou droitier, suivant si on préfère les boutons de la grille à gauche ou à droite, il suffirait alors de créer une copie de ce script et d'inverser quelques panels, le reste suivra...

screen du script (réduit à cause des 95Ko seulement sur le forum) :
View attachment 13908
c'est juste pour se faire une idée ! c'est moche comme ça ! testé sur 7", normalement sur 15" (eeetop)

 

[nico78]

Pas mal, tu maitrises le sript, c'est clair!

 

[logemag]

Comme tu vois c'est pas très difficile, par contre je me sers peu des .right ou .bottom, ça peut être pratique si on on a une interface extensible, qui permet d'avoir des boutons figés à gauche ou à droite et une zone extensible centrale par exemple...

En tout cas je réitère mon bravo au concepteur pour ce designer qui est vraiment pratique, quel gain de temps (je me revois encore avec VB6 à essayer de caler tous mes objets sur une grille, à la moindre modif il fallait tout recadrer ! (si mon associé tombe là dessus qu'il en prenne de la graine !))