user-interface - proyectos - validaciones en react

¿Cómo puedo implementar lógica booleana fácil de usar en una GUI de formulario web?

Question

Actualmente tengo una aplicación web en la que un usuario puede usar listas desplegables para generar sentencias SQL SELECT así:

Seleccionar columna desplegable | Cuadro desplegable del operador (=! => <<=> =) | Selección de valor desplegable

El usuario puede hacer esto varias veces, y los "filtros" están actualmente todos juntos en AND.

Quiero agregar la posibilidad de crear declaraciones OR. Podría agregar fácilmente OR en el caso en que las columnas sean iguales, pero ¿qué pasa con las declaraciones lógicas complejas como

((A O B O C) Y (D O E)) O (F Y G)?

¿Cómo puedo permitir que los usuarios creen tales declaraciones de una manera fácil de usar?

EDITAR: Para especificar, fácil de usar para una audiencia general. Actualmente trabajo con desarrolladores que ocasionalmente codifican manualmente las consultas SQL para un cliente no técnico que necesita información específica de nuestra base de datos. El objetivo es que esta aplicación web elimine la necesidad de que nosotros los codifiquemos manualmente proporcionándoles al cliente una herramienta fácil de usar para hacerlo ellos mismos.

EDIT2: Actualmente, la aplicación no está siendo utilizada por los usuarios finales. Los únicos datos que tengo en cuanto a su uso son consultas manuscritas SQL anteriores y, por lo tanto, el tipo de consultas que el cliente solicita. Dado que podría simplificarlo (por ejemplo, limitar la capacidad de los usuarios para generar consultas a los tipos de consultas que tienden a solicitar), pero quiero ver si alguien tiene experiencia en comunicar la lógica booleana simple y completamente en las GUI.

Gracias por tu tiempo.

Answer 1

Apple parece haber encontrado una manera de diseñar una GUI para expresiones booleanas anidadas: ver la respuesta aceptada en UX.stackexchange .

Answer 2

Cuando veo un problema como este, no puedo evitar pensar en implementarlo como una pila, similar a cómo RPN resolvería este problema.

El problema aquí es que no parece demasiado intuitivo

IU de muestra: ([Botón] <un cuadro de texto para la entrada del usuario> {list}

Valor: <> [Push] [Y] [O]

Pila {

} (Las calculadoras HP RPN ponen la pila encima del área de edición)

Entonces, si quisiera escribir la expresión ((A y B) o (C y D)), haría esto: A [push] (la pila contendría "A") B [push] (la pila contendría "B" "," A ") [y] (la pila contendría" (A y B) ") C [push] (la pila contendría" C "," (A y B) ") D [push] (la pila contendría" D "," C "," (A y B) ") [y] (la pila contendría" (C y D) "," (A y B) ") [o] (la pila contendría" ((A y B) o (C y D) ")

si desea agregar otros operadores, y no hay demasiados, puede agregar botones adicionales o crear un cuadro de texto separado para el operador

Valor: <> [Push] Operador <> [Combine]

Si quisiera soportar operadores unarios, necesitaría hacer un seguimiento de si es un operador de prefijo o postfijo, o simplemente asumir el prefijo (el operador unario booleano "no" es generalmente el prefijo). Los operadores ternarios generalmente tienen dos designadores de infijo, por lo que hay más complejidad si desea apoyarlos. Algunos operadores binarios (y n-arios) tienen un prefijo, infijo y componente de sufijo "CallMethod (A, B)" Así que realmente se reduce a qué tan complejo quieres hacerlo.

Solo una idea

Answer 3

Esto es difícil de representar incluso en una aplicación WinForms.

Lo que debe hacer es implementar el concepto de un grupo de condiciones, que consiste en una o más declaraciones, y un operador condicional.

La mejor implementación de esto que he visto fue del filtrado del servidor GameSpy. Intenté buscar para encontrar una captura de pantalla, pero salí vacía (¿ese programa aún existe?). Por lo que recuerdo, hicieron algo como esto:

( Condition 1 ) OPERATOR ( Condition 2 ) OPERATOR ( ( Condition 3 ) OPERATOR ( Condition 4 ) )

Answer 4

Hay un plugin de jquery para hacer esto, llamado QueryBuilder, que hace esto de una manera interesante: http://mistic100.github.io/jQuery-QueryBuilder/

Answer 5

Honestamente, no veo valor comercial al escribir los proxies personalizados "dónde", "seleccionar", "desde" o cualquier otro comando SQL. Especialmente, en este contexto particular (acceso a BD y consulta personalizada sobre la marcha) el cliente abre puertas de seguridad del infierno.

Permitir que "dummies" (que supongo que no son capaces de usar las herramientas SQL habituales) componen una consulta "intuitiva" es un desastre que está por ocurrir. Creo que el busto de información de tarjetas de crédito de BJ de 2003 o 2004 fue bastante cercano a esto en espíritu. Supongo (¡y es solo una suposición!) Que un gran jefe de marketing dijo: "Guardaremos la información de la franja de la tarjeta de crédito para que podamos aprovechar esa información más adelante". "¿Desea solo información disponible públicamente en una tabla e información de identificación personal almacenada estadísticamente?" - le preguntó al desarrollador ..... "No, aún no sabemos cómo queremos usar esa información, desarrolle una herramienta para consultarla en una MANERA PERSONALIZADA ..... "fue el primer peldaño en el camino hacia el desastre. :(

Mientras tanto, definitivamente hay lugares donde la interfaz de usuario es necesaria para componer / analizar expresiones (herramientas de análisis de políticas de seguridad, investigación de álgebra booleana / switch, etc.). Creo que la mejor interfaz de usuario aún no se ha creado (siempre :), pero si fue creado, lo imaginé teniendo la posibilidad de:

1. Analizar la expresión (debe ser trivial, ya que uno puede construir el árbol de análisis a medida que el usuario agrega trozos de expresión, pieza por pieza)
2. Muestra la expresión en una forma de árbol de análisis (debería ser divertido dibujarlo).
3. Mostrar tabla de verdadero / falso para el BF presentado por la expresión
4. Dibujar hipercubo BF (especialmente valioso para las funciones "monótona")
5. Crea un mapa de Karnaugh con enlaces topológicos (buena suerte con altas expresiones dimensionales)
6. Genere dinámicamente el diagrama de Venn para la expresión.
7. Destaque las variables no esenciales o "fragmentos de expresión".
8. Use el método de minimización de expresiones booleanas de McCluskey o Petrick.

Answer 6

Mac OS X ofrece muy buenos widgets de GUI para hacer exactamente este tipo de cosas. Puede modelar su GUI después de este tipo de diseño / interacción.

Answer 7

Otra opción es algo así como la interfaz del generador de consultas de SQL Server Management Studio: varias filas y columnas, donde las filas representan AND y las columnas OR (o viceversa, no recuerdo).

Puede hacer una actualización en tiempo real de la consulta resultante para ayudar a los usuarios (al igual que SQL Server actualiza el SQL resultante).

Answer 8

Cuando necesita manejar ( (A or B) and C) or (D or E or F) , está trabajando con una estructura de datos similar a un árbol. En mi experiencia, no hay una manera fácil de representar los árboles de decisión para los usuarios de una manera "bonita" o "intuitiva". Es doblemente difícil en los formularios web de ASP.NET.

Sin embargo, un enfoque probado y verdadero es el siguiente: cuadro de texto único que acepta una cláusula where . Créanme, el enfoque de entrada única es realmente la interfaz de usuario más simple e intuitiva, y también tiene la ventaja * de permitir la entrada / modificación rápida de filtros de consulta.

** Otra ventaja, desde el punto de vista técnico, es poder escribir su propio lexer / analizador y AST. ¿Con qué frecuencia haces eso en una aplicación básica de crud?) *

Ya vas a entrenar a tus usuarios sobre cómo usar tu motor de consultas ad hoc, así que puedes entrenarlos escribiendo (account.Balance < -2000 and account.Type == ''Checking'') OR (account.Number = 123456) devuelve exactamente lo que dice que devuelve.

Si opta por este enfoque, proporcione al usuario una lista desplegable de columnas disponibles, de modo que al hacer doble clic en un elemento se inserte el elemento en el cuadro de texto en la ubicación del cursor.