사용자 인터페이스의 확인란 정렬이 잘못되었습니다.안녕하세요,
현재 텍스트와 해당 확인란이 있는 사용자 인터페이스를 개발 중입니다. 내 코드는 다음과 같습니다
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>Re: 사용자 인터페이스의 확인란 정렬이 잘못되었습니다.가장 쉬운 옵션은 V 목록 상자 대신 H 목록 상자를 사용하거나 테이블 상자/라인업 상자를 사용하여 UI를 구축하는 것입니다.
H 목록 상자에서는 Align("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(""))
);
);
Re: 사용자 인터페이스의 확인란 정렬이 잘못되었습니다.안녕하세요. 피드백을 보내주셔서 감사합니다. 실제로 저는 이미 이 "인라인" 구조 사용을 고려했으며 추가 및 제거 버튼을 통합하기 위해 코드를 재사용했습니다.
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: 사용자 인터페이스의 확인란 정렬이 잘못되었습니다.이 줄은 위치에 따라 배열 레이아웃에 있는 각 확인란의 상태를 나타내는 1과 0의 행렬을 제공합니다. 이것이 당신에게 필요한 것을 얻나요? 확인하려면 최신 스크립트를 실행하고 원하는 대로 선택한 후 다음 두 줄을 실행하세요.
cBoxes = nw << XPath("//CheckBoxBox");
results = Shape(Matrix(cBoxes << Get), NItems(cBoxes)/(NCol-1));
Show(results);
=> 
Re: 사용자 인터페이스의 확인란 정렬이 잘못되었습니다.@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();Re: 사용자 인터페이스의 확인란 정렬이 잘못되었습니다.안녕하세요,
귀하의 답변에 진심으로 감사드립니다. 그들은 저에게 많은 도움을 주었고 제가 문제를 해결할 수 있도록 도와주었습니다.
매우 감사합니다. 좋은 하루 보내세요.
