770241_es-ES

liliconcom

Alineación incorrecta de casillas de verificación en la interfaz de usuario

Hola,

Actualmente estoy desarrollando una interfaz de usuario con texto y las casillas de verificación correspondientes. Mi código es:

strGroupColName = "Group";
lstGroupId = {"A", "B","C","D","E","F","G","H","I","J","K","L"};
strCompareControl = "Compare";
strCompareAddButton = "Add";
strCompareRemoveButton = "Remove";

Compare_String_Col_Box = function({strGroupColName,lstGroupId},

    //Get number of groups
    intNGpId    =     NItems(lstGroupId);

	strStringColBox = 
	"VListBox(
		BorderBox( Bottom(3),
			TextBox(strGroupColName),
		)";
		
	For(ig = 1, ig<= intNGpId, ig++,
		strStringColBox = strStringColBox || ",
		BorderBox( Bottom(3),
			TextBox(\!" " || lstGroupId[ig] || "\!",<<JUSTIFY text=""></JUSTIFY>

The problem is that the checkboxes are not aligned with the corresponding text, and this issue occurs only on certain computers (same version of JMP used on these different computers). I believe this is due to the different screen sizes. For exemple :

<SPAN class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="EvaCo_0-1720103409374.png" style="width: 281px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="EvaCo_0-1720103409374.png" style="width: 281px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="EvaCo_0-1720103409374.png" style="width: 281px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="EvaCo_0-1720103409374.png" style="width: 281px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="EvaCo_0-1720103409374.png" style="width: 281px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="EvaCo_0-1720103409374.png" style="width: 281px;"><span class="lia-inline-image-display-wrapper" image-alt="EvaCo_0-1720103409374.png" style="width: 281px;"><img src="https://us.v-cdn.net/6038925/uploads/images/65868i485D95568A2A48D4/EvaCo_0-1720103409374.png" width="281" height="440" role="button" title="EvaCo_0-1720103409374.png" alt="EvaCo_0-1720103409374.png" /></span></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN><SPAN class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="EvaCo_1-1720103409375.png" style="width: 280px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="EvaCo_1-1720103409375.png" style="width: 280px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="EvaCo_1-1720103409375.png" style="width: 280px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="EvaCo_1-1720103409375.png" style="width: 280px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="EvaCo_1-1720103409375.png" style="width: 280px;"><SPAN class="lia-inline-image-display-wrapper" image-alt="EvaCo_1-1720103409375.png" style="width: 280px;"><span class="lia-inline-image-display-wrapper" image-alt="EvaCo_1-1720103409375.png" style="width: 280px;"><img src="https://us.v-cdn.net/6038925/uploads/images/65869iE5A52A91227BF58C/EvaCo_1-1720103409375.png" width="280" height="438" role="button" title="EvaCo_1-1720103409375.png" alt="EvaCo_1-1720103409375.png" /></span></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN><P> </P>

How can I ensure that the checkboxes are always aligned with the text, regardless of the computer being used?

I use JMP 17.2.0

Thank you in advance for your help.

<LINGO-LABS id="lingo-labs-770241" slang="en-US" mode="UPDATE"><LINGO-LABEL>Compartir y comunicar resultados</LINGO-LABEL></LINGO-LABS>Re: Alineación incorrecta de casillas de verificación en la interfaz de usuario

Creo que las opciones más sencillas podrían ser crear su interfaz de usuario con cuadros de lista H en lugar de cuadros de lista V o utilizando el cuadro de tabla/cuadro de alineación.

Con H List Box puede usar Alinear ("centro"), con Table Box deben estar alineados y lo mismo con Lineup Box. Con Lineup Box es posible que desee utilizar Lineup Ruler Box para modificar los anchos de cada columna.

Names Default To Here(1);

strGroupColName = "Group";
lstGroupId = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"};

nw = New Window("",
	Lineup Ruler Box(
		Widths({50, 25,30,25,30,25,30,25,30,25,30,25,30}),
		lub = Lineup Box(N Col(11),
			Text Box("Group"),
			Text Box("Grp"),
			Text Box("Ctrl"),
			Text Box("Grp"),
			Text Box("Ctrl"),
			Text Box("Grp"),
			Text Box("Ctrl"),
			Text Box("Grp"),
			Text Box("Ctrl"),
			Text Box("Grp"),
			Text Box("Ctrl")
		);
	);
);

For Each({groupid}, lstGroupId,
	lub << Append(Text Box(groupid));
	For(i = 1, i <= 10, i++,
		lub << Append(Check Box(""))
	);
);

Re: Alineación incorrecta de casillas de verificación en la interfaz de usuario

Hola, gracias por tus comentarios. De hecho, ya he considerado utilizar esta estructura "en línea" y he reutilizado su código para integrar los botones de agregar y quitar.

strGroupColName = "Group";
lstGroupId = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"};
Ncol = 11;

// Function to generate widths
GenerateWidths = Function({n},
    widths = {50};
    For(i = 2, i <= n, i++,
        Insert Into(widths, 25);
    );
    Return(widths);
);

// Function to recreate the Lineup Box
RecreateLineupBox = Function({},
    lineupBox = Lineup Box(N Col(Ncol));
    lineupBox << Append(Text Box("Group"));
    For(j = 1, j <= (Ncol - 1) / 2, j++,
        lineupBox << Append(Text Box("Grp"));
        lineupBox << Append(Text Box("Ctrl"));
    );
    For Each({groupid}, lstGroupId,
        lineupBox << Append(Text Box(groupid));
        For(i = 1, i <= Ncol - 1, i++,
            lineupBox << Append(Check Box(""));
        );
    );
    Return(lineupBox);
);

// Function to update the main container with new contents
UpdateContainer = Function({container},
    lineupBox << Delete; // Delete the existing Lineup Box
    lub = RecreateLineupBox();
    container << Append(
        Lineup Ruler Box(
            Widths(GenerateWidths(Ncol)), // Adjust widths based on new Ncol
            lub
        )
    );
);

// Function to add a pair of Group and Control columns with checkboxes
AddGroupControlPair = Function({},
    Ncol = Ncol + 2;
    UpdateContainer(mainContainer);
);

// Function to remove the last pair of Group and Control columns with checkboxes
RemoveGroupControlPair = Function({},
    If(Ncol > 11,
        Ncol = Ncol - 2;
        UpdateContainer(mainContainer);
    );
);

// Initial window creation
nw = New Window("",
    mainContainer = V List Box(
        // Add and Remove Buttons
        H List Box(
            Button Box("Add", AddGroupControlPair),
            Button Box("Remove", RemoveGroupControlPair)
        ),
        lineupBox = Lineup Ruler Box(
            Widths(GenerateWidths(Ncol)),
            lub = RecreateLineupBox()
        )
    )
);

The drawback of this structure is that I find it difficult to imagine how to retrieve the content of my checkboxes "by column" as I used to do with lstcomparedpbx.

Re: Alineación incorrecta de casillas de verificación en la interfaz de usuario

Estas líneas le proporcionarán una matriz de 1 y 0 para indicar el estado de cada casilla de verificación en su diseño de matriz según su posición. ¿Esto te proporciona lo que necesitas? Para comprobarlo, ejecute su último script, haga algunas selecciones como desee y luego ejecute estas dos líneas.

cBoxes = nw << XPath("//CheckBoxBox");
results = Shape(Matrix(cBoxes << Get), NItems(cBoxes)/(NCol-1));
Show(results);

=>

Re: Alineación incorrecta de casillas de verificación en la interfaz de usuario

Como ya sugirió @Jasean , puede usar XPath para obtener referencias a todos los CheckBoxBoxes y luego enviar << Llegar a eso. Luego puedes manejar eso de muchas maneras diferentes, a continuación hay otra opción.

Names Default To Here(1);

strGroupColName = "Group";
lstGroupId = {"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"};
colcount = 5;

nw = New Window("CheckBox UI",
	window:lvals = lstGroupId;
	window:colcount = colcount;
	window:cbs = {};
	Lineup Ruler Box(
		Widths({50,40,45,40,45,40,45,40,45,40,45}),
		lub = Lineup Box(N Col(11));
	);
);

// Add "Headers"
lub << Append(Text Box("Group"));
For(i = 1, i <= colcount, i++,
	lub << Append(Text Box(Eval Insert("Grp(^i^)")));
	lub << Append(Text Box(Eval Insert("Ctrl(^i^)")));
);

// Add "Rows"
For Each({groupid, idx}, lstGroupId,
	lub << Append(Text Box(Eval Insert("^groupid^(^idx^)")));
	For(i = 1, i <= colcount * 2, i++,
		lub << Append(cb = Check Box(""));
	);	
);


// Add functions to check boxes
nw:cbs = nw << XPath("//CheckBoxBox");
nw:cbs << Set Function(function({this},					
	cb_idx = Contains(cbs, this);
	cb_zeroidx = cb_idx - 1; // easier to handle as 0-based
	
	cb_col = Mod(cb_zeroidx, window:colcount * 2) + 1; // + 1 to back to 1-based
	cb_row = Floor(cb_zeroidx / (window:colcount * 2)) + 1; // + 1 to back to 1-based
	cb_type = If(Mod(cb_col, 2), "Grp", "Ctrl");
	
	show(cb_idx, cb_col, cb_row, window:lvals[cb_row], cb_type);
	Write("\!N");
));

Write();

Re: Alineación incorrecta de casillas de verificación en la interfaz de usuario

Hola,

Muchas gracias a ambos por vuestras respuestas. Me ayudaron mucho y me permitieron solucionar mi problema.
Muchas gracias. Qué tengas un lindo día.