770241_zh-CN

liliconcom

用户界面上的复选框对齐不正确

你好，

我目前正在开发一个带有文本和相应复选框的用户界面。我的代码是：

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>分享和交流结果</LINGO-LABEL></LINGO-LABS>回复：用户界面上复选框的对齐不正确

我认为最简单的选择可能是使用 H 列表框而不是 V 列表框或者使用表格框/阵容框来构建您的 UI。

对于 H List Box，您可以使用 Align("center")，对于 Table Box，它们应该对齐，对于 Lineup Box，也是如此。对于 Lineup Box，您可能希望使用 Lineup Ruler Box 来修改每列的宽度

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(""))
	);
);

回复：用户界面上复选框的对齐不正确

您好，感谢您的反馈。事实上，我已经考虑过使用这种“内联”结构，并且我已经重用了您的代码来集成添加和删除按钮。

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.

回复：用户界面上复选框的对齐不正确

这些行将为您提供一个由 1 和 0 组成的矩阵，以根据位置指示数组布局中每个复选框的状态。这是否满足您的需求？要检查，请运行最新的脚本，根据需要进行一些选择，然后运行这两行。

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

=>

回复：用户界面上复选框的对齐不正确

就像@Jasean已经建议的那样，您可以使用 XPath 获取对所有 CheckBoxBox 的引用，然后向其发送 << Get。然后，您可以用许多不同的方式处理它，下面是其他选项

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();

回复：用户界面上复选框的对齐不正确

你好，

非常感谢你们的回复。它们给了我很大的帮助，让我解决了我的问题。
非常感谢。祝您有愉快的一天。