Comment prototyper un panier d’achat simple

Vous apprendrez ici comment ajouter et supprimer des articles d’un panier d’achat.

Voici comment le construire :

Voir

  • Allez dans la palette Maîtrise des données, créez une nouvelle « Maîtrise des données » et nommez-la « Magasin », créez trois attributs : « Nom », « Prix » et « Total », puis appuyez sur « Ok ».
  • Cliquez avec le bouton droit de la souris sur la « Base de données » que vous venez de créer et sélectionnez « Afficher et modifier les enregistrements », écrivez vos données d’exemple à cet endroit et appuyez sur « Ok ».
  • Sélectionnez une « Liste de données » dans la section « Contenu dynamique » et placez-la sur le canevas ; la fenêtre « Nouvelle liste de données » sera activée ; donnez à votre liste le nom « Articles », choisissez ensuite la « Base de données » que vous avez créée et sélectionnez tous les attributs.
  • En haut du canevas, placez deux « Texte » et écrivez « $ » dans chacun d’eux. À côté, placez un « champ de texte de saisie » et deux boutons. Dans le premier bouton, écrivez « Ajouter au panier », et dans le second, « Déposer ».
  • Dans les cellules de la « Ligne actuelle », tout en appuyant sur Commande (Mac) / Contrôle (Windows), faites glisser les textes « $ » à côté des entrées [Store .Price] et [Store .Total]. Dans la cellule contenant l’entrée [Store .Quantity], supprimez cette entrée et placez le « Champ de texte d’entrée » et le bouton « Ajouter au panier » à l’intérieur de la cellule. Enfin, placez le bouton « Déposer » dans la cellule contenant l’entrée [Store .Total].
  • Sous votre « Liste de données », placez deux textes et écrivez « $ » et « Total » ; ensuite, placez un deuxième texte et écrivez « 0 ».

Evénements

Sélectionnez le bouton « Ajouter au panier », accédez à la palette « Evénements » et cliquez sur « Ajouter un événement ». 

  1. Dans la boîte de dialogue, cliquez sur « Choose Trigger », survolez la section « Mouse » et sélectionnez « on Click ».
  2. Dans « Choose Action », sélectionnez « Set value to an element » et cliquez sur l’entrée [Store .Total].
  3. Sélectionnez le bouton radio « Calculé » pour la valeur et cliquez sur « Ajouter une expression ». 
  4. Dans le premier champ du constructeur, faites glisser le « store.price », puis la fonction « X » pour multiplier, et enfin le « Input text field » de la colonne « Quantity ». Cliquez sur « Ok » et « Ok » pour terminer la création de votre événement.

Une fois le bouton « Ajouter au panier » sélectionné, retournez à la palette Événements et cliquez sur « + » pour créer un nouvel événement.

  1. Dans la boîte de dialogue, cliquez sur « Choose Trigger », survolez la section « Mouse » et sélectionnez « on Click ».
  2. Dans « Choose Action », sélectionnez « Data master action » et cliquez sur « Modify ».
  3. Le générateur d’expression apparaît avec l’expression « Modifier » par défaut. Faites glisser la « ligne actuelle » dans le premier champ, et dans le dernier champ, faites glisser l’entrée . Cliquez sur « Ok » et « Ok » pour terminer la création de votre expression.

Une fois le bouton « Ajouter au panier » sélectionné, retournez à la palette Événements et cliquez sur « + » pour créer un nouvel événement.

  1. Dans la boîte de dialogue, cliquez sur « Choose Trigger », survolez la section « Mouse » et sélectionnez « on Click ».
  2. Dans « Choose Action », sélectionnez « Set value to an element », et sélectionnez le « 0 » à côté du « Total », sous votre « Liste de données ».
  3. Cliquez sur le bouton radio « Calculé » pour « Ajouter une expression ».
  4. Faites glisser la fonction « Somme ». Dans le premier champ, placez la « Base de données » de l’onglet Base de données, et dans le deuxième champ, placez le champ « Total » de la « Base de données ». Cliquez sur « Ok » et « Ok » pour terminer la création de l’événement.

Sélectionnez le bouton « Déposer », accédez à la palette des événements et cliquez sur « Ajouter un événement ». 

  1. Dans la boîte de dialogue, cliquez sur « Choose Trigger », survolez la section « Mouse » et sélectionnez « on Click ».
  2. Dans « Choose Action », sélectionnez « Set value to an element » et cliquez sur l’entrée [Store .Total], pour la valeur cliquez sur le bouton radio « Fixed »  et écrivez « 0 ».

Une fois le bouton « Déposer » sélectionné, revenez à la palette Événements et cliquez sur « + » pour créer un nouvel événement.

  1. Dans la boîte de dialogue, cliquez sur « Choose Trigger », survolez la section « Mouse » et sélectionnez « on Click ».
  2. Dans « Choose Action », sélectionnez « Data master action » et cliquez sur « Modify ».
  3. Le générateur d’expression apparaît avec l’expression « Modifier » par défaut. Faites glisser la « ligne actuelle » dans le premier champ, et dans le dernier champ, faites glisser l’entrée . Cliquez sur « Ok » et « Ok » pour terminer la création de votre expression.

Une fois le bouton « Déposer » sélectionné, revenez à la palette Événements et cliquez sur le « + » pour ajouter un nouvel événement.

  1. Dans la boîte de dialogue, cliquez sur « Choose Trigger », survolez la section « Mouse » et sélectionnez « on Click ».
  2. Dans « Choose Action », sélectionnez « Set value to an element », et sélectionnez le « 0 » à côté du « Total », sous votre « Liste de données ».
  3. Cliquez sur le bouton radio « Calculé » pour « Ajouter une expression ».
  4. Faites glisser la fonction « Somme » et, à partir de l’onglet Maîtrises des données, placez la maîtrise des données « Magasin » sur le premier champ, puis le champ « Total » de la « Maîtrise des données ». Cliquez sur « Ok » et « Ok » pour terminer la création de l’événement.

Le bouton « Déposer » étant toujours sélectionné, accédez à la palette Événements et cliquez sur « + » pour ajouter un événement.

  1. Cliquez sur « Choose Trigger » dans la boîte de dialogue et sélectionnez « on Click ».
  2. Dans « Choose Action », sélectionnez « Set value to an element » et cliquez sur le « Input text field » de la colonne « Quantity ».
  3. Pour la valeur, cliquez sur le bouton radio « Fixe »  et inscrivez « 0 ».

Simulez votre prototype.