Boîte à outils filaire Apple iPhone/tablette

Ruban

Conception > Diagramme > Boîte à outils

Raccourcis Clavier

Ctrl+Maj+3

iPad Air, iPad Mini, iPhone 4s, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6 Plus

Ces icônes génèrent chacune un cadre pour le type d'appareil que vous avez sélectionné. Une prompt s'affiche pour vous demander de spécifier l'orientation portrait ou paysage. (L'illustration principale montre un cadre iPhone 5s paysage et un cadre iPhone 4s portrait.)

Valeur Étiquetés :

• ShowStatusBar - cliquez sur le bouton déroulant et sélectionnez "Afficher" ou "Masquer" l'image de la barre d'état sur l'élément

Case à cocher

Génère un élément de case à cocher étiqueté, le texte de l'étiquette étant le nom de l'élément.

Valeur Étiquetés :

• State - cliquez sur la flèche déroulante et sélectionnez l'état à représenter - "Coché" (icône de coche) ou "Désactivé" (contour de la case)

Bouton radio

Génère un élément de bouton radio étiqueté, le texte de l'étiquette étant le nom de l'élément.

Valeur Étiquetés :

• State - cliquez sur la flèche déroulante et sélectionnez l'état à représenter - "Sélectionné" (rempli) ou "Désélectionné" (contour)

Boîte combo

Génère un élément représentant une liste déroulante.

Valeur Étiquetés :

• DropDownState - cliquez sur la flèche déroulante et sélectionnez "Ouvrir" pour représenter la zone de liste déroulante en cours d'utilisation, en affichant toutes les valeurs, ou "Fermé" pour représenter la zone de liste déroulante avec une seule valeur sélectionnée
• Items - cliquez sur la flèche déroulante et sélectionnez l'élément à représenter comme actuellement sélectionné dans la zone de liste déroulante et, si la liste des éléments est développée, mis en surbrillance dans la liste
  Vous pouvez modifier le texte des éléments et ajouter ou supprimer des éléments dans la liste en modifiant la liste "Valeurs :" dans les notes Valeur Étiquetée

Étiquette

Génère un élément de texte Label. Le nom de l'élément est le texte de l'étiquette.

Valeur Étiquetés :

• Aligner le texte - définit l'alignement du texte à gauche, centré ou à droite
• Multiligne - définit l'étiquette pour afficher le texte sur plusieurs lignes

Liste

Génère un élément List box.

Valeur Étiquetés :

• Items - cliquez sur la flèche déroulante et sélectionnez l'élément à afficher en surbrillance dans la liste
  Vous pouvez ajouter, supprimer et renommer des éléments en modifiant la liste "Valeurs :" dans les Notes Valeur Étiquetés

• ListType - cliquez sur la flèche déroulante et sélectionnez pour afficher la liste sous la forme "Simple", "Numérotée" ou "Puce"

Tableau

Génère un élément Tableau avec des colonnes, des lignes et des cellules étiquetées.

Double-cliquez sur le tableau pour faire apparaître la boîte de dialogue de l'élément ' Propriétés ' sur la page 'Wireframe', qui fournit les facilités pour éditer le tableau (ajouter, renommer et supprimer des colonnes et des lignes, changer la largeur des colonnes et éditer le texte de la cellule) Vous pouvez soit modifier le texte en cliquant dessus, soit en cliquant avec le bouton droit de la souris et en sélectionnant une option. Note que l'éditeur ne fournit pas une image fidèle de l'apparence du tableau à l'écran.

Valeur Étiquetés :

• Dessiner des lignes - masque (ou affiche) les lignes sur toutes les cellules sous les en-têtes de colonne afin que le tableau ressemble à un élément de liste à la place
• Mettre en surbrillance les en-têtes - met en surbrillance l'en-tête de chaque colonne afin qu'il soit facilement reconnaissable
• Propriétés - affiche le HTML du tableau

Image

Génère un espace réservé pour indiquer où une image sera placée sur le dialogue .

Vous pouvez afficher une image réelle en affectant une image alternative à l'élément.

Barre d'adresse

Génère un élément de barre d'adresse URL.

Valeur Étiquetés :

• Adresse - définit le texte affiché dans la barre d'adresse

Icône application

Génère un élément App Icône .

Valeur Étiquetés :

• Image - spécifie le nom d'une image conservée dans le gestionnaire d'images, qui s'affiche sous l'apparence de l'icône de l'application (tapez simplement le nom de l'image tel qu'il figure dans la colonne "Nom" du gestionnaire d'images)
• Nombre de notifications - indique le nombre de notifications que cette application attend ; le numéro est affiché dans le cercle en haut à droite de l'élément

Bouton

Génère un élément Button étiqueté. Le texte de l'étiquette est le nom de l'élément.

Valeur Étiquetés :

• Style de bouton - définit la forme de l'élément :
  - 'Normal' dessine un rectangle aux bords arrondis
  - "Précédent" dessine une forme de fanion pointant vers la gauche
  - 'Next' dessine une forme de fanion pointant vers la droite

• Alignement du texte - définit l'alignement du texte du bouton dans l'élément ; aligné à gauche, centré ou aligné à droite

Sélecteur de date/heure

Génère un élément d'affichage Date et heure.

Valeur Étiquetés :

• Date - définit la date affichée par l'élément ; si aucune date n'est spécifiée, ce sera la date actuelle du système
• Expanded - si True, dessine l'élément comme une section de calendrier avec la date et/ou l'heure actuelle sélectionnée (telle que définie par le ' Type ' Valeur Étiquetée ); si Faux, dessine l'élément comme une simple string de texte indiquant la date et/ou l'heure

• Heure - définit l'heure affichée sur l'élément ; remplacer les segments heure, minute et AM/PM si nécessaire
  Si aucune heure n'est spécifiée, il affichera l'heure actuelle du système (l'heure non spécifiée est affichée sous la forme 12:00 AM)
• Type - dessine l'élément indiquant la date, l'heure ou à la fois la date et l'heure

Liste de groupe

Génère un élément de liste groupée avec deux niveaux d'entrée.

Double-cliquez sur l'élément pour ouvrir la boîte de dialogue ' Propriétés ' de la page 'Wireframe'. Utilisez cette page pour composer les entrées de la liste.

Cliquez sur le nœud racine (le nom de l'élément).

• Afficher les groupes - cliquez sur la flèche déroulante et sélectionnez Vrai pour afficher les éléments de la liste de premier niveau, ou Faux pour les masquer ; les éléments de la liste de second niveau s'affichent dans les deux cas mais doivent appartenir à un élément de groupe, qu'il soit affiché ou non

• Nom - saisissez le texte de l'élément de liste de premier niveau (le nom du groupe d'éléments)

• Nom - saisissez le nom de l'élément de la liste
• Texte - tapez tout texte supplémentaire à afficher (par défaut) sous le nom de l'élément
• Texte près du lien - cliquez sur la flèche déroulante et sélectionnez Vrai pour afficher le texte supplémentaire en face du nom de l'élément, où vous pouvez également ajouter un lien, ou Faux pour conserver le texte sous le nom de l'élément
• Image - sélectionnez un nom d'image dans la liste déroulante ou tapez simplement le nom tel qu'il apparaît dans la colonne "Nom" du gestionnaire d'images, pour afficher l'image à gauche du nom de l'élément
• Est un lien - cliquez sur la flèche déroulante et sélectionnez Vrai pour indiquer que l'élément est lié à une autre page ou à des informations supplémentaires en affichant un caractère '>' à droite du nom de l'élément ; sélectionnez False pour masquer le caractère du lien
• Image de lien - sélectionnez un nom d'image dans la liste déroulante ou tapez simplement le nom tel qu'il apparaît dans la colonne "Nom" du gestionnaire d'images, pour afficher l'image (si "Est un lien" est vrai) comme icône de lien à la place du caractère >
• Sélectionné - cliquez sur la flèche déroulante et sélectionnez Vrai pour mettre en surbrillance le nom de l'élément tel qu'il est sélectionné, ou Faux pour ne pas mettre l'élément en surbrillance

Clavier

Génère un élément qui représente un clavier.

Valeur Étiquetés :

• Type - bascule l'image entre un clavier texte (QWERTY) et un clavier numérique

Icône chargement

Génère un élément qui représente l'icône de chargement Apple.

Contrôle des pages

Génère un élément rendu sous la forme d'une rangée de cercles gris, indiquant le nombre de pages disponibles et laquelle de celles-ci représente la page actuellement affichée.

Valeur Étiquetés :

• Page actuelle - dessine un cercle blanc dans la séquence de cercles gris pour indiquer laquelle représente la page actuelle affichée
• Pages - le nombre de cercles à dessiner, indiquant le nombre de pages parcourues par ce contrôle (redimensionnez l'élément manuellement pour afficher tout le nombre de cercles spécifié)

Barre de recherche

Génère un élément représentant un champ de recherche.

Valeur Étiquetés :

• DrawStyle - bascule l'apparence de l'élément entre la recherche d'application par défaut avec une longue-vue de requête et une recherche Web sur un appareil Apple
• Espace réservé - saisissez le texte qui sera affiché dans le contrôle, pour prompt l'utilisateur à saisir le terme de recherche
• Invite - saisissez le texte d' prompt à afficher au-dessus du champ de requête, tel qu'un rappel de ce qu'il faut rechercher ; par exemple, si la recherche consiste à rechercher des films/vidéos enregistrées sur l'appareil, vous pouvez taper "Rechercher des vidéos" ("DrawStyle" doit être défini par défaut)
• Portée - cliquez sur la flèche déroulante et sélectionnez l'emplacement de recherche mis en surbrillance dans la barre de portée ('DrawStyle' doit être défini par défaut et 'Afficher la barre de portée' doit être défini sur True)
• Afficher les signets - lorsqu'il est défini sur True, un petit symbole de livre sera dessiné sur le côté droit du champ de requête, pour indiquer que ce contrôle de recherche stockera les recherches précédentes et pourra les réutiliser ('DrawStyle' doit être défini par défaut)
• Afficher le bouton Annuler - affiche un bouton Annuler à droite du champ de requête ('DrawStyle' doit être défini par défaut)
• Afficher la barre d'étendue - affiche une ligne d'options d'étendue pour ce contrôle de recherche, sous le champ de requête ('DrawStyle' doit être défini par défaut)
• Afficher les résultats de la recherche - affiche une flèche déroulante sur le côté droit de la zone de recherche, pour indiquer que la requête affichera les résultats de la recherche (remplace l'icône de signet si les deux sont définis pour s'afficher) ('DrawStyle' doit être défini par défaut)
• Alignement du texte - aligne le texte de l'espace réservé à gauche, à droite ou au centre du champ de requête

Contrôle des segments

Génère un élément représentant un ensemble d'onglets (par défaut à trois onglets).

Valeur Étiquetés :

• Onglets - cliquez sur la flèche déroulante et sélectionnez le numéro de l'onglet à mettre en surbrillance pour indiquer l'onglet actuel ; ouvrir et modifier les Notes Valeur Étiquetée pour ajouter, supprimer ou renommer des onglets

Contrôle de la roulette

Génère un élément représentant un contrôle spinner avec une liste d'éléments pouvant être sélectionnés.

Valeur Étiquetés :

• Vérifier l' Item sélectionné - lorsqu'il est défini sur True, une coche sera dessinée sur le côté gauche de l'élément défini comme sélectionné
• Items - cliquez sur la flèche déroulante et sélectionnez l'élément à indiquer comme sélectionné ; vous pouvez ouvrir et modifier les Notes Valeur Étiquetée pour ajouter, renommer ou supprimer des éléments de la liste
• Bords arrondis - cliquez sur la flèche déroulante et sélectionnez le(s) côté(s) qui présentent des coins arrondis ; vous pouvez utiliser cette propriété pour ancrer plusieurs contrôles spinner les uns à côté des autres afin de créer des sélections de contrôles spinner plus complexes, telles qu'une page affichant une sélection pour Country, State , City et Suburb - set :
  - Les deux pour définir des coins arrondis des deux côtés, si le spinner
  le contrôle est tout seul
  - Gauche pour définir des coins arrondis sur le bord gauche et des coins pointus
  sur le bord droit, si ce spinner est le premier d'une rangée de
  contrôles de la roulette
  - Droit de définir des coins arrondis sur le bord droit et des coins pointus
  sur le bord gauche, si ce spinner est le dernier d'une rangée de
  les commandes du spinner, ou
  - Aucun pour définir des angles vifs des deux côtés, si ce spinner est
  amarré entre deux autres

• Alignement du texte - cliquez sur la flèche déroulante et sélectionnez où aligner le texte de l'élément - à gauche, à droite ou au centre du contrôle

Pas à pas

Génère un élément représentant une commande de décrémentation/incrémentation (moins/plus).

Changer

Génère un élément représentant un interrupteur marche/arrêt coulissant.

Valeur Étiquetés :

• DisplayText - bascule entre l'affichage et le masquage des deux valeurs de texte d'état
• State - bascule entre l'état 'on' (fond gris avec cercle blanc à droite et - si DisplayText est True - le texte 'on') et l'état 'off' (fond blanc avec cercle blanc à gauche et - si DisplayText est vrai - le texte 'off')
  Les valeurs de texte d'état sont par défaut On et Off ; vous pouvez modifier les Notes Valeur Étiquetée pour les remplacer par n'importe quelle autre paire de valeurs (vous pouvez ajouter plus de valeurs mais seules les deux premières sont appliquées)

Champ de texte

Génère un champ de texte dans lequel l'utilisateur final peut saisir du texte libre, tel que le nom d'une page de connexion. Le champ contient le texte 'TextField' et un cercle barré.

Valeur Étiquetés :

• Style de Bordure - cliquez sur la flèche déroulante et sélectionnez le style de bordure pour l'élément :
  - Rect arrondi - un rectangle aux coins arrondis
  - Lunette - un rectangle avec des bords supérieur et gauche biseautés
  - Ligne - un rectangle avec des coins pointus et des bords à une seule ligne
  - Aucun - un rectangle sans bordure

• Alignement du texte - cliquez sur la flèche déroulante et définissez le texte à aligner à gauche, à droite ou au centre du contrôle

Titre

Génère un élément qui représente le titre d'une page, le nom de l'élément étant le texte du titre (tel que "Paramètres"). L'élément est un rectangle avec un fond gris et du texte blanc.

Barre d'outils

Génère une image qui représente une barre d'outils avec des icônes par défaut, que vous pouvez ajouter ou remplacer par des images du gestionnaire d'images.

Double-cliquez sur l'élément pour afficher la boîte de dialogue ' Propriétés ' de la page 'Wireframe', qui liste les icônes affichées dans le cadre de l'élément Toolbar.

• Pour ajouter une nouvelle icône, cliquez sur 'Barre d'outils' et sur le bouton Ajouter, et en réponse à l' prompt tapez le nom de l'icône, ce qui ajoute le nom au bas de la liste ; cliquez sur le nom et dans le champ Propriété 'Image' tapez le nom du fichier icône, tel qu'affiché dans le panneau 'Image chargée' du gestionnaire d'images
  Vous pouvez ajouter un 'Séparateur' (affiché comme |) à la liste, pour séparer différents groupes d'icônes sur la barre d'outils ; tapez simplement le nom 'Separator' dans l' prompt de nom
  Pour positionner l'icône sur la barre d'outils, cliquez dessus dans la liste et cliquez sur les boutons
• Pour supprimer une icône de la liste, cliquez dessus et cliquez sur le bouton Supprimer ; l'icône est immédiatement supprimée de la liste et, lorsque vous fermez le dialogue , de la barre d'outils

Barre d'onglets

Génère un élément qui représente une rangée d'onglets représentés par des images.

Double-cliquez sur l'élément pour afficher la boîte de dialogue ' Propriétés ' sur la page 'Wireframe', qui affiche le nœud racine (l'élément TabBar lui-même) et les éléments contenus dans le TabBar (sous forme d'images).

• Pour ajouter une nouvelle icône, cliquez sur 'TabBar' et sur le bouton Ajouter, et en réponse à l' prompt tapez le nom de l'élément, ce qui ajoute le nom au bas de la liste
  Pour positionner l'élément sur la TabBar, cliquez dessus dans la liste et cliquez sur les boutons
• Pour supprimer un élément de la liste, cliquez dessus et cliquez sur le bouton Supprimer ; l'élément est immédiatement supprimé de la liste et, lorsque vous fermez le dialogue , de la TabBar

• Afficher le texte - affiche (True) ou masque (False) les noms d'éléments sous forme de texte sous les images d'onglet
• Couleur d'arrière-plan - cliquez sur la flèche déroulante et sélectionnez la couleur d'arrière-plan de la TabBar
• Couleur Police sélectionnée - cliquez sur la flèche déroulante et sélectionnez la couleur de police du texte si l'élément est sélectionné
• Couleur Police non sélectionnée - cliquez sur la flèche déroulante et sélectionnez la couleur de la police du texte si l'élément n'est pas sélectionné

• Nom - le nom de l'élément, qui peut être affiché sous l'image dans la TabBar (voir Afficher le texte )
• Image - le nom du fichier image à afficher si l'élément n'est pas sélectionné ; le nom du fichier est tel qu'indiqué dans le gestionnaire d'images
• Image sélectionnée - le nom du fichier image à afficher si l'élément est sélectionné ; le nom du fichier est tel qu'indiqué dans le gestionnaire d'images

Élément Valeur Étiquetée :

• SelectedTab - Cliquez sur la flèche déroulante et sélectionnez le nom de l'élément à représenter comme sélectionné

Apple iPad Air

Crée un exemple de modèle pour l'Apple iPad Air.

Apple iPad mini

Crée un exemple de modèle pour l'Apple iPad Mini.

Apple iPhone 4s

Crée un exemple de modèle pour l'Apple iPhone 4s.

Apple iPhone 5c

Crée un exemple de modèle pour l'Apple iPhone 5c.

Apple iPhone 5s

Crée un exemple de modèle pour l'Apple iPhone 5s.

Apple iPhone 6

Crée un exemple de modèle pour l'Apple iPhone 6.

Apple iPhone 6 Plus

Crée un exemple de modèle pour l'Apple iPhone 6 Plus.