How do you close a frame when using Swingbuilder? - swing

Using groovy's swingbuilder I'd like to add a save and exit button, but I can't figure out how to close a frame with the swingbuilder? Since I don't have the frame assigned to an object I can't really do frame.dispose() or anything like that.
swingBuilder.edt {
frame(title: 'Calc Spell Checker', size: [800, 600],
show: true, locationRelativeTo: null,
defaultCloseOperation: 1) {
borderLayout(vgap: 5)
panel(constraints: BorderLayout.CENTER,
border: compoundBorder([emptyBorder(10), titledBorder("Spell Checking pole ${projProp.location} in project ${projProp.projectName}")])) {
tableLayout {
tr {
td {
label 'Comments: '
}
td {
scrollPane(verticalScrollBarPolicy:JScrollPane.VERTICAL_SCROLLBAR_ALWAYS) {
list listData: projProp.comments, fixedCellWidth: 600, visibleRowCount: 6
}
}
}
tr {
td {
label 'Suggestions: '
}
}
tr {
td {
button text: 'Replace'
}
td {
button text: 'Ignore'
}
td {
button text: 'Close', actionPerformed: {
f.SetVisible(false)
}
}
}
}
}
}
}

So, to do this, turns out you just need to set the frame to a variable in the builder, then call dispose() on it like so:
guiFrame = frame(title: 'Spell Checker', size: [800, 600],
show: true, locationRelativeTo: null,
defaultCloseOperation: 1) {
int commentIndex = 0
int remedyIndex = 0
borderLayout(vgap: 5)
panel(constraints: BorderLayout.CENTER,
border: compoundBorder([emptyBorder(10), titledBorder("Spell Checking pole ${projProp.location} in project ${projProp.projectName}")])) {
tableLayout {
tr {
td {
button text: 'Replace'
}
td {
button text: 'Ignore'
}
td {
button text: 'Close', actionPerformed: {
guiFrame.dispose()
}
}
}
}
}

Related

Aligning instrument name followed by vertical I and II

I am trying to specify instrumentName like this:
instrumentName = \markup {
"Oboe"
\center-column {
\line { "I" }
\line { "II" }
}
}
Which looks like this:
But I want the word "Oboe" vertically centered. How do I do that?
Maybe not the perfect solution, but it works:
\markup {
\column {
\vspace #0.5
"Oboe"
}
\center-column {
\line { "I" }
\line { "II" }
}
}
As pointed out by #OleV.V. in the comments above, the best way of handling this is using the \vcenter command. See example below:
\new Staff \with {
instrumentName = \markup {
\vcenter
"Oboe"
\center-column {
\line { "I" }
\line { "II" }
}
}
}
{
c'4 d'4 e'4 f'4
}
Producing:

Why width includes border when box-sizing is content-box?

I have this html file
<html lang="en" class=""><head>
<meta charset="UTF-8">
<title>CodePen Demo</title>
<meta name="robots" content="noindex">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
<link rel="canonical" href="https://codepen.io/hardkoded/pen/VwjvWBm">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style class="INLINE_PEN_STYLESHEET_ID">
body {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
}
ol, ul {
padding-left: 30px;
}
.board-row:after {
clear: both;
content: "";
display: table;
}
.status {
margin-bottom: 10px;
}
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
padding: 0;
text-align: center;
width: 34px;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}
</style>
<script src="https://static.codepen.io/assets/editor/iframe/iframeConsoleRunner-7f4d47902dc785f30dedcac9c996b9f31d4dfcc33567cc48f0431bc918c2bf05.js"></script>
<script src="https://static.codepen.io/assets/editor/iframe/iframeRefreshCSS-e03f509ba0a671350b4b363ff105b2eb009850f34a2b4deaadaa63ed5d970b37.js"></script>
<script src="https://static.codepen.io/assets/editor/iframe/iframeRuntimeErrors-29f059e28a3c6d3878960591ef98b1e303c1fe1935197dae7797c017a3ca1e82.js"></script>
</head>
<body class="mouse-navigation">
<div id="errors" style="
background: #c00;
color: #fff;
display: none;
margin: -20px -20px 20px;
padding: 20px;
white-space: pre-wrap;
"></div>
<div id="root"><div class="game"><div class="game-board"><div><div class="board-row"><button class="square"></button><button class="square"></button><button class="square"></button></div><div class="board-row"><button class="square"></button><button class="square"></button><button class="square"></button></div><div class="board-row"><button class="square"></button><button class="square"></button><button class="square"></button></div></div></div><div class="game-info"><div id="status">Next player: X</div><ol><li><button>Go to game start</button></li></ol></div></div></div>
<script>
window.addEventListener('mousedown', function(e) {
document.body.classList.add('mouse-navigation');
document.body.classList.remove('kbd-navigation');
});
window.addEventListener('keydown', function(e) {
if (e.keyCode === 9) {
document.body.classList.add('kbd-navigation');
document.body.classList.remove('mouse-navigation');
}
});
window.addEventListener('click', function(e) {
if (e.target.tagName === 'A' && e.target.getAttribute('href') === '#') {
e.preventDefault();
}
});
window.onerror = function(message, source, line, col, error) {
var text = error ? error.stack || error : message + ' (at ' + source + ':' + line + ':' + col + ')';
errors.textContent += text + '\n';
errors.style.display = '';
};
console.error = (function(old) {
return function error() {
errors.textContent += Array.prototype.slice.call(arguments).join(' ') + '\n';
errors.style.display = '';
old.apply(this, arguments);
}
})(console.error);
</script>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script id="INLINE_PEN_JS_ID">
function Square(props) {
return (
React.createElement("button", { className: "square", onClick: props.onClick },
props.value));
}
class Board extends React.Component {
renderSquare(i) {
return (
React.createElement(Square, {
value: this.props.squares[i],
onClick: () => this.props.onClick(i) }));
}
render() {
return (
React.createElement("div", null,
React.createElement("div", { className: "board-row" },
this.renderSquare(0),
this.renderSquare(1),
this.renderSquare(2)),
React.createElement("div", { className: "board-row" },
this.renderSquare(3),
this.renderSquare(4),
this.renderSquare(5)),
React.createElement("div", { className: "board-row" },
this.renderSquare(6),
this.renderSquare(7),
this.renderSquare(8))));
}}
class Game extends React.Component {
constructor(props) {
super(props);
this.state = {
history: [
{
squares: Array(9).fill(null) }],
stepNumber: 0,
xIsNext: true };
}
handleClick(i) {
const history = this.state.history.slice(0, this.state.stepNumber + 1);
const current = history[history.length - 1];
const squares = current.squares.slice();
if (calculateWinner(squares) || squares[i]) {
return;
}
squares[i] = this.state.xIsNext ? "X" : "O";
this.setState({
history: history.concat([
{
squares: squares }]),
stepNumber: history.length,
xIsNext: !this.state.xIsNext });
}
jumpTo(step) {
this.setState({
stepNumber: step,
xIsNext: step % 2 === 0 });
}
render() {
const history = this.state.history;
const current = history[this.state.stepNumber];
const winner = calculateWinner(current.squares);
const moves = history.map((step, move) => {
const desc = move ?
'Go to move #' + move :
'Go to game start';
return (
React.createElement("li", { key: move },
React.createElement("button", { onClick: () => this.jumpTo(move) }, desc)));
});
let status;
if (winner) {
status = "Winner: " + winner;
} else {
status = "Next player: " + (this.state.xIsNext ? "X" : "O");
}
return (
React.createElement("div", { className: "game" },
React.createElement("div", { className: "game-board" },
React.createElement(Board, {
squares: current.squares,
onClick: i => this.handleClick(i) })),
React.createElement("div", { className: "game-info" },
React.createElement("div", { id: "status" }, status),
React.createElement("ol", null, moves))));
}}
// ========================================
ReactDOM.render(React.createElement(Game, null), document.getElementById("root"));
function calculateWinner(squares) {
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]];
for (let i = 0; i < lines.length; i++) {if (window.CP.shouldStopExecution(0)) break;
const [a, b, c] = lines[i];
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
return squares[a];
}
}window.CP.exitedLoop(0);
return null;
}
//# sourceURL=pen.js
</script>
</body></html>
It's a tic tac toe game from this codepen link https://codepen.io/sophiebits/pen/qNOZOP (I've modified it a little bit).
When I used the inspect utility of Chrome to select one square, and looked at the computed css box model, it says the content of the square is 32px. But in the css portion of the html file, I clearly set the width of the square to be 34px, shouldn't the computed css box model have content width of 34px?
I know that the default value of box-sizing is content-box, so the width property should contain neither border nor padding. That's why I have this question.
Buttons (and some other items) use a box-sizing property "border-box" instead of "content-box"; this explains the different behavior.
Documentation for reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
You can change this in css using:
.square{
box-sizing: content-box; /* border-box */
}
See this very simple JSFiddle: https://jsfiddle.net/ue5f164h/
<div class="box"></div>
.box {
background: blue;
border: 5px solid red;
width: 20px;
height: 20px;
}
For me, the width is correct!
You should give a smaller reproducible example in your question so that it's easier for us to debug what's gone wrong.
But as the other answer points out, the problem is that some elements have a different default box-sizing value.
Basically the way box-sizing works is that, it determines if element width should include border or not.
For example -> If you have a div with width of 300px
By using box-sizing: border-box like so
div {
width: 300px;
height: 100px;
border: 10px solid blue;
box-sizing: border-box;
}
Then the width of this div element will always be 300px -> 20px of border and 280px of content -> by adding padding or changing border size you are changing the size of the content
If you use box-sizing: content-box like so:
div {
width: 300px;
height: 100px;
border: 10px solid red;
box-sizing: content-box;
}
The width of the div element will now be 320px -> 300px of content + 20px of border width.
So if you want your element to always have width or height of lets say 50px you would use box-sizing: border-box

angular ag-grid how to style the header

I am using ag-grid in my angular application and trying to export to excel. I want to style the header row in the excel. Can anyone help me how to achieve this? I tried the below but doesnt seems to be working.
this.excelStyles = [
{
id: 'smallFont',
font: {
fontName:'Calibri',
size: 9
}
},
{
id:'blueBackground',
interior: {
color: 'blue',
pattern: 'solid'
}
}
]
defaultColDef: {
cellClassRules: {
smallFont: (params) => true,
blueBackground: (params) => params.rowIndex == 0
}
}
Thanks
Seting the excelstyle with id 'header' as shown below will set style for the excel headers.
{
id:'header',
interior: {
color: '#002776',
pattern: 'solid'
},
font: {
color: '#ffffff',
fontName: 'Calibri',
size: 9,
bold: true
}
}

LibGDX JSON error: JSON standard does not allow identifiers

I copied and pasted a uiskin.json file to use for Scene2D UI, but for some reason my code is still crashing. Here is the uiskin.json file that's giving me the error: JSON standard does not allow identifiers. This is stored in my asset folder along with the default.fnt, uiskin.atlas, and uiskin.png
{
com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } },
com.badlogic.gdx.graphics.Color: {
green: { a: 1, b: 0, g: 1, r: 0 },
white: { a: 1, b: 1, g: 1, r: 1 },
red: { a: 1, b: 0, g: 0, r: 1 },
black: { a: 1, b: 0, g: 0, r: 0 },
},
com.badlogic.gdx.scenes.scene2d.ui.Skin$TintedDrawable: {
dialogDim: { name: white, color: { r: 0, g: 0, b: 0, a: 0.45 } },
},
com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: {
default: { down: default-round-down, up: default-round },
toggle: { down: default-round-down, checked: default-round-down, up: default-round }
},
com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
default: { down: default-round-down, up: default-round, font: default-font, fontColor: white },
toggle: { down: default-round-down, up: default-round, checked: default-round-down, font: default-font, fontColor: white, downFontColor: red }
},
com.badlogic.gdx.scenes.scene2d.ui.ScrollPane$ScrollPaneStyle: {
default: { vScroll: default-scroll, hScrollKnob: default-round-large, background: default-rect, hScroll: default-scroll, vScrollKnob: default-round-large }
},
com.badlogic.gdx.scenes.scene2d.ui.SelectBox$SelectBoxStyle: {
default: {
font: default-font, fontColor: white, background: default-select,
scrollStyle: default,
listStyle: { font: default-font, selection: default-select-selection }
}
},
com.badlogic.gdx.scenes.scene2d.ui.SplitPane$SplitPaneStyle: {
default-vertical: { handle: default-splitpane-vertical },
default-horizontal: { handle: default-splitpane }
},
com.badlogic.gdx.scenes.scene2d.ui.Window$WindowStyle: {
default: { titleFont: default-font, background: default-window, titleFontColor: white },
dialog: { titleFont: default-font, background: default-window, titleFontColor: white, stageBackground: dialogDim }
},
com.badlogic.gdx.scenes.scene2d.ui.ProgressBar$ProgressBarStyle: {
default-horizontal: { background: default-slider, knob: default-slider-knob },
default-vertical: { background: default-slider, knob: default-round-large }
},
com.badlogic.gdx.scenes.scene2d.ui.Slider$SliderStyle: {
default-horizontal: { background: default-slider, knob: default-slider-knob },
default-vertical: { background: default-slider, knob: default-round-large }
},
com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
default: { font: default-font, fontColor: white }
},
com.badlogic.gdx.scenes.scene2d.ui.TextField$TextFieldStyle: {
default: { selection: selection, background: textfield, font: default-font, fontColor: white, cursor: cursor }
},
com.badlogic.gdx.scenes.scene2d.ui.CheckBox$CheckBoxStyle: {
default: { checkboxOn: check-on, checkboxOff: check-off, font: default-font, fontColor: white }
},
com.badlogic.gdx.scenes.scene2d.ui.List$ListStyle: {
default: { fontColorUnselected: white, selection: selection, fontColorSelected: white, font: default-font }
},
com.badlogic.gdx.scenes.scene2d.ui.Touchpad$TouchpadStyle: {
default: { background: default-pane, knob: default-round-large }
},
com.badlogic.gdx.scenes.scene2d.ui.Tree$TreeStyle: {
default: { minus: tree-minus, plus: tree-plus, selection: default-select-selection }
},
com.badlogic.gdx.scenes.scene2d.ui.Tooltip$TooltipStyle: {
default: {
label: { font: default-font, fontColor: white },
background: default-pane
}
},
}
Also, this is the Java code that I have so far. Just a simple add button for reference if anyone need.
public class MyGdxGame extends ApplicationAdapter {
private Skin skin;
private TextField username, password;
private Stage stage;
#Override
public void create () {
skin = new Skin(Gdx.files.internal("uiskin.json"));
stage = new Stage(new ScreenViewport());
final TextButton button = new TextButton("Click Me", skin, "default");
button.setWidth(200);
button.setHeight(50);
stage.addActor(button);
Gdx.input.setInputProcessor(stage);
}
#Override
public void render () {
Gdx.gl.glClearColor(0, 0, 1, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
stage.act(Gdx.graphics.getDeltaTime());
stage.draw();
}
}
Tooltip is a new feature from libgdx it only exists on the nightly build so you don't have it you probably copied that from the github from libgdx and you can check here that it was added 9 days ago. I checked in my recently installed libgdx and tooltip isn't there, if you try to import it.
Basically remove:
com.badlogic.gdx.scenes.scene2d.ui.Tooltip$TooltipStyle: {
default: {
label: { font: default-font, fontColor: white },
background: default-pane
}
},
Had the same error, not with uiskin.json copied from the wiki. (the real example). Did some googling, ended up on a different question (different topic) and I saw the json had double quotes (") around the names and attributes.
So instead of:
com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } },
do:
"com.badlogic.gdx.graphics.g2d.BitmapFont": { "default-font": { "file": "default.fnt" } },
Adding double quotes around all the names removed the Json standard does not allow identifiers error. No clue if it works without double quotes at runtime, as it causes an error in the json file.

cannot hover with new div of fancybox 2

I've made it work by these codes for an addtional title (a new div inside fancybox):
beforeShow: function(){
this.title=$(this.element).data('caption');
this.title2="<div class='photo_exif'>"+$(this.element).data('exif')+"</div>";
$(this.title2)
.bind("contextmenu", function (e) {
return false; /* Disables right click */
})
.prependTo( $.fancybox.inner );
}
and the html is :
<a href='PhotoURL' class='fancybox' data-fancybox-group='gallery' data-caption='PhotoTitle' data-exif='photoTitle2'>pic</a>
now i want this div (div.photo_exif) hover to show or hide, so i added these codes:
afterShow:function() {
$("#fancybox-wrap").hover(function() {
$(".photo_exif").show();
}, function() {
$(".photo_exif").hide();
});
}
but it doesnt work. The div is always show on fancybox. My css is :
.photo_exif {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
width:100%;
height:30px;
background: #000;
background: rgba(0, 0, 0, .8);
}
and my whole fancybox code (with ie6 crack) is :
$('.fancybox').fancybox({
fitToView: false,
mouseWheel: false,
beforeShow: function(){
this.title=$(this.element).data('caption');
this.title2="<div class='photo_exif'>"+$(this.element).data('exif')+"</div>";
$(this.title2)
.bind("contextmenu", function (e) {
return false; /* Disables right click */
})
.prependTo( $.fancybox.inner );
},
afterShow: function(){
if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) <= 6) {
$("div#fancybox-buttons").css("top", $("html").scrollTop());
$(window).scroll(function () {
$("div#fancybox-buttons").css("top", $("html").scrollTop());
});
}
$("#fancybox-wrap").hover(function() {
$(".photo_exif").show();
}, function() {
$(".photo_exif").hide();
});
}
});
Is there anything wrong?
This one was easy. This line of your code :
$("#fancybox-wrap").hover(function() {
... should be :
$(".fancybox-wrap").hover(function() {
The fancybox selector is a class not an ID