Cómo crear el prototipo de un carrito de la compra sencillo

Aquí aprenderás a añadir y eliminar artículos de una cesta de la compra.

Así es como se construye:

Ver

  • Ve a la paleta Maestros de Datos, crea un nuevo «Maestro de Datos», y nómbralo «Tienda», crea tres atributos: «Nombre», «Precio» y «Total», y pulsa «Aceptar».
  • Haz clic con el botón derecho del ratón en el «Maestro de datos» que acabas de crear y selecciona «Ver y editar registros», escribe allí tus datos de ejemplo y pulsa «Aceptar».
  • Selecciona una «Lista de datos» de la sección «Contenido dinámico» y colócala en el lienzo; se habilitará la ventana «Nueva lista de datos»; dale a tu lista el nombre «Elementos», a continuación elige el «Maestro de datos» que has creado y selecciona todos los atributos.
  • En la parte superior del lienzo coloca dos «Texto» y escribe «$» en ambos. Al lado, pon un «Campo de texto de entrada», y dos botones. En el primer botón escribe «Añadir al carrito», y en el segundo escribe «Soltar».
  • En las celdas de la «Fila actual», mientras pulsas Comando (Mac) / Control (Windows), arrastra los textos «$» junto a las entradas [Store .Price] y [Store .Total]. De la celda que contiene la entrada [Store .Quantity], elimina esta entrada y coloca el «Campo de texto de entrada» y el botón «Añadir al carrito» dentro de la celda. Por último, coloca el botón «Soltar» dentro de la celda de la entrada [Store .Total].
  • Debajo de tu «Lista de datos», coloca dos textos y escribe «$» y «Total»; a continuación, coloca un segundo texto y escribe «0».

Eventos

Selecciona el botón «Añadir al carrito», ve a la paleta Eventos y haz clic en «Añadir evento». 

  1. En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona «al hacer clic».
  2. En «Elegir acción», selecciona «Establecer valor a un elemento» y haz clic en la entrada [Store .Total].
  3. Selecciona el botón de opción «Calculado» para el valor y haz clic en «Añadir expresión». 
  4. En el primer campo del constructor, arrastra el «precio.tienda», a continuación la función «X» para multiplicar, y por último el «Campo de texto de entrada» de la columna «Cantidad». Haz clic en «Aceptar» y «Ok» para terminar de crear tu evento.

Con el botón «Añadir a la cesta» seleccionado, vuelve a la paleta Eventos y haz clic en «+» para crear un nuevo evento.

  1. En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona «al hacer clic».
  2. En «Elegir acción», selecciona «Acción maestra de datos», y haz clic en «Modificar».
  3. El constructor de expresiones aparecerá con la expresión «Modificar» por defecto. Arrastra la «Fila actual» en el primer campo, y en el último campo, arrastra la entrada . Pulsa «Ok» y «Aceptar» para terminar de crear tu expresión.

Con el botón «Añadir a la cesta» seleccionado, vuelve a la paleta Eventos y haz clic en «+» para crear un nuevo evento.

  1. En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona «al hacer clic».
  2. En «Elegir acción», selecciona «Establecer valor a un elemento», y selecciona el «0» junto al «Total», debajo de tu «Lista de datos».
  3. Haz clic en el botón de opción «Calculado» para «Añadir expresión».
  4. Arrastra la función «Suma». En el primer campo, coloca el «Maestro de datos» de la pestaña Maestros de datos, y en el segundo campo, coloca el campo «Total» del «Maestro de datos». Haz clic en «Aceptar» y «Ok» para terminar de crear el evento.

Selecciona el botón «Soltar», ve a la paleta Eventos y haz clic en «Añadir evento». 

  1. En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona «al hacer clic».
  2. En «Elegir Acción», selecciona «Establecer valor a un elemento» y haz clic en la entrada [Store .Total], para el valor haz clic en el botón de opción «Fijo»  y escribe «0».

Con el botón «Soltar» seleccionado, vuelve a la paleta Eventos y haz clic en «+» para crear un nuevo evento.

  1. En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona «al hacer clic».
  2. En «Elegir acción», selecciona «Acción maestra de datos», y haz clic en «Modificar».
  3. El constructor de expresiones aparecerá con la expresión «Modificar» por defecto. Arrastra la «Fila actual» en el primer campo, y en el último campo, arrastra la entrada . Pulsa «Ok» y «Aceptar» para terminar de crear tu expresión.

Con el botón «Soltar» seleccionado, vuelve a la paleta Eventos y haz clic en el «+» para añadir un nuevo evento.

  1. En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona «al hacer clic».
  2. En «Elegir acción», selecciona «Establecer valor a un elemento», y selecciona el «0» junto al «Total», debajo de tu «Lista de datos».
  3. Haz clic en el botón de opción «Calculado» para «Añadir expresión».
  4. Arrastra la función «Suma» y desde la pestaña Maestros de datos, coloca el maestro de datos «Tienda» en el primer campo, a continuación, coloca el campo «Total» del «Maestro de datos». Haz clic en «Aceptar» y «Ok» para terminar de crear el evento.

Con el botón «Soltar» aún seleccionado, ve a la paleta Eventos y haz clic en «+» para añadir un evento».

  1. Haz clic en «Elegir activador» en el cuadro de diálogo y selecciona «al hacer clic».
  2. En «Elegir acción», selecciona «Establecer valor a un elemento» y haz clic en el «Campo de texto de entrada» de la columna «Cantidad».
  3. Para el valor, haz clic en el botón de opción «Fijo»  y escribe «0».

Simula tu prototipo.