770241_zh-TW

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 列錶框，您可以使用對齊（“center”），對於表格框，它們應該對齊並且與陣容框相同。使用陣容框，您可能需要使用陣容標尺框來修改每列的寬度

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

回覆：使用者介面上的複選框對齊不正確

你好，

非常感謝你們兩位的回覆。他們給了我很多幫助，讓我解決了我的問題。
非常感謝。祝你有美好的一天。