Sketchware Layout Designer

Compétence Sketchware Layout Designer

Aperçu

Cette compétence est spécialisée dans la création et la gestion de la couche UI des projets Sketchware Pro. Elle produit les spécifications JSON exactes requises pour data/view dans les paquets de sauvegarde .swb et offre un support complet pour la hiérarchie des widgets, le style, les mises en page responsives et les boutons d'action flottante (FAB).

---

1. Structure des fichiers dans l'archive de sauvegarde

Dans un projet Sketchware ou une archive .swb, toutes les mises en page d'écran sont combinées dans un seul fichier chiffré AES : data/view.

Multi-écrans & En-têtes de section

Les mises en page sont divisées par des marqueurs de section :

• @<activity_xml_name>.xml (ex. @main.xml, @home.xml)
• @<activity_xml_name>.xml_fab (pour les activités avec un bouton d'action flottante)
• @<custom_view_name>.xml (pour les vues personnalisées utilisées dans ListViews/Spinners)

@main.xml
<JSON ViewBean pour vue 1>
<JSON ViewBean pour vue 2>
<JSON ViewBean pour vue 3>

@main.xml_fab
<JSON ViewBean pour FAB>

@item_row.xml
<JSON ViewBean pour éléments de vue personnalisée>

---

2. Schéma JSON ViewBean et champs obligatoires

Chaque élément d'interface est une chaîne JSON sur une seule ligne représentant un ViewBean :

{
  "id": "button_submit",
  "type": 3,
  "parent": "root",
  "parentType": 0,
  "index": 0,
  "convert": "Button",
  "customView": "",
  "enabled": 1,
  "clickable": 1,
  "alpha": 1.0,
  "translationX": 0.0,
  "translationY": 0.0,
  "scaleX": 1.0,
  "scaleY": 1.0,
  "firstDayOfWeek": 1,
  "dividerHeight": 1,
  "choiceMode": 0,
  "checked": 0,
  "indeterminate": "false",
  "progress": 0,
  "max": 100,
  "progressStyle": "?android:progressBarStyle",
  "spinnerMode": 1,
  "inject": "",
  "adSize": "",
  "adUnitId": "",
  "preIndex": 0,
  "preParentType": -1,
  "parentAttributes": {},
  "layout": {
    "width": -1,
    "height": -2,
    "orientation": -1,
    "gravity": 0,
    "layoutGravity": 0,
    "weight": 0,
    "weightSum": 0,
    "marginLeft": 16,
    "marginTop": 16,
    "marginRight": 16,
    "marginBottom": 16,
    "paddingLeft": 12,
    "paddingTop": 12,
    "paddingRight": 12,
    "paddingBottom": 12,
    "backgroundColor": 16777215,
    "borderColor": -16740915
  },
  "text": {
    "text": "Soumettre",
    "textSize": 16,
    "textColor": -16777216,
    "hint": "",
    "hintColor": 16777215,
    "singleLine": 0,
    "line": 0,
    "inputType": 1,
    "imeOption": 0,
    "textFont": "default_font",
    "textType": 1
  },
  "image": {
    "rotate": 0,
    "scaleType": "CENTER"
  }
}

---

3. Constantes de type de widget et de mise en page

Type Int	Widget / Classe de mise en page	Chaîne convert	Description
0	LinearLayout	LinearLayout	Conteneur linéaire (horizontal ou vertical)
1	RelativeLayout	RelativeLayout	Conteneur relatif
2	HorizontalScrollView	HorizontalScrollView	Conteneur de défilement horizontal
3	Button	Button	Bouton poussoir interactif
4	TextView	TextView	Étiquette d'affichage de texte
5	EditText	EditText	Champ de saisie de texte
6	ImageView	ImageView	Conteneur d'image
7	WebView	WebView	Navigateur intégré / cadre web
8	ProgressBar	ProgressBar	Indicateur de chargement circulaire ou horizontal
9	ListView	ListView	Liste d'éléments verticale défilable
10	Spinner	Spinner	Liste de sélection déroulante
11	CheckBox	CheckBox	Case à cocher à deux états
12	ScrollView	ScrollView	Conteneur de défilement vertical
13	Switch	Switch	Interrupteur à deux états
14	SeekBar	SeekBar	Curseur de valeur déplaçable
15	CalendarView	CalendarView	Calendrier mensuel interactif
16	FloatingActionButton	FloatingActionButton	FAB Material standard (dans la section _fab)
17	AdView	AdView	Bannière Google AdMob
18	MapView	MapView	Conteneur Google Maps

---

4. Règles de hiérarchie et de parent (CRITIQUE)

1. Vues racine :
   • Pour les éléments attachés directement à la base de l'écran, définissez "parent": "root".
   • Définissez "parentType": 0 (ou -1 pour FAB).
2. Vues enfants dans des conteneurs :
   • Définissez "parent": "<id_du_conteneur>" (ex. "parent": "linear_main").
   • Définissez "parentType": <type_int_du_conteneur> (ex. 0 pour LinearLayout).
3. Ordre des index :
   • "index" DOIT être 0, 1, 2, 3... séquentiellement parmi les frères partageant le même "parent".
4. Dimensions de mise en page :
   • MATCH_PARENT : -1
   • WRAP_CONTENT : -2
   • DP exact : entier positif (ex. 48 pour 48dp).
5. Orientation de la mise en page linéaire :
   • Horizontale : "orientation": 0
   • Verticale : "orientation": 1
   • Widgets non conteneurs : "orientation": -1

---

5. Styles, couleurs et typographie

• ARGB Hex en entier signé 32 bits : Sketchware stocke les couleurs sous forme d'entiers signés 32 bits :
  • Transparent / Par défaut : 16777215 (0x00FFFFFF)
  • Noir (#FF000000) : -16777216
  • Blanc (#FFFFFFFF) : -1
  • Bleu primaire Sketchware (#FF008DCD) : -16740915
  • Rouge accent Material (#FFFF4081) : -49023
  • Gris Material (#FF9E9E9E) : -6381922
• Styles de texte (textType) :
  • 0 : Normal
  • 1 : Gras
  • 2 : Italique
  • 3 : Gras italique
• Types de saisie (inputType pour EditText) :
  • 1 : Texte normal
  • 2 : Texte (sans suggestions)
  • 33 : Adresse e-mail (TYPE_TEXT_VARIATION_EMAIL_ADDRESS)
  • 129 : Mot de passe (TYPE_TEXT_VARIATION_PASSWORD)
  • 2 : Nombre (TYPE_CLASS_NUMBER)
  • 3 : Téléphone (TYPE_CLASS_PHONE)
• Types d'échelle (scaleType pour ImageView) :
  • "CENTER", "CENTER_CROP", "CENTER_INSIDE", "FIT_CENTER", "FIT_START", "FIT_END", "FIT_XY"

---

6. Configuration du bouton d'action flottante (FAB)

Si une activité active le FAB :

1. Dans data/file (@activity), définissez "options": 1 (ou masque de bits avec FAB).
2. Dans data/view, ajoutez une entrée sous @<activity>.xml_fab :

@main.xml_fab
{"adSize":"","adUnitId":"","alpha":1.0,"checked":0,"choiceMode":0,"clickable":1,"convert":"","customView":"","dividerHeight":1,"enabled":1,"firstDayOfWeek":1,"id":"_fab","image":{"rotate":0,"scaleType":"CENTER"},"indeterminate":"false","index":0,"inject":"","layout":{"backgroundColor":16777215,"borderColor":-16740915,"gravity":0,"height":-2,"layoutGravity":85,"marginBottom":16,"marginLeft":16,"marginRight":16,"marginTop":16,"orientation":-1,"paddingBottom":0,"paddingLeft":0,"paddingRight":0,"paddingTop":0,"weight":0,"weightSum":0,"width":-2},"max":100,"parentAttributes":{},"parentType":-1,"preIndex":0,"preParentType":0,"progress":0,"progressStyle":"?android:progressBarStyle","scaleX":1.0,"scaleY":1.0,"spinnerMode":1,"text":{"hint":"","hintColor":16777215,"imeOption":0,"inputType":1,"line":0,"singleLine":0,"text":"","textColor":16777215,"textFont":"default_font","textSize":12,"textType":0},"translationX":0.0,"translationY":0.0,"type":16}

3. Dans data/logic, l'événement de clic se lie à la cible _fab :
   • En-tête d'événement : @MainActivity.java_events -> {"eventName":"onClick","eventType":1,"targetId":"_fab","targetType":16}
   • En-tête de bloc logique : @MainActivity.java__fab_onClick

---

7. Protocole d'intégration entre compétences

• Avec sketchware-events-manager : Chaque vue interactive (Button, EditText, ImageView, ListView, _fab) créée ici est référencée dans data/logic via son id et targetType pour les écouteurs de clic, de changement et d'élément.
• Avec sketchware-blocks-engine : Les ID de vue sont passés dans les paramètres des blocs d'interface (ex. setText, getText, setVisible, setImageUrl).
• Avec sketchware-project-generator : Les chaînes JSON de vues générées sont combinées sous leurs en-têtes @<screen>.xml respectifs et chiffrées dans data/view.