В первом посте из этой серии приложений « Простой калькулятор » мы предприняли несколько шагов к созданию простого калькулятора. Мы используем комп, показанный ниже, который предоставил графический дизайнер Марк Дингман из Malden Labs:
В учебных целях я использую очень постепенный, а иногда и косвенный подход к построению этого. Например, в первом посте я использовал класс SwingButton для клавиш калькулятора. В этом посте мы будем использовать группу , состоящую из объекта Rectangle и Text, для создания каждого ключа. Кроме того, мы будем использовать выражение for для краткого создания ключей — техника, которая имеет еще одно преимущество, связанное с обработкой событий, которое вы увидите через мгновение. И помните, что калькулятор в своем текущем состоянии просто отображает введенные ключи, а не выполняет какие-либо вычисления. Мы создадим этот код, когда покажем вам, как определять классы, функции и т. Д. В JavaFX.
Нажмите на изображение калькулятора выше, чтобы вызвать апплет JavaFX Simple Calculator, или значок Java Web Start ниже, чтобы приложение появилось в его собственном окне:
Понимание кода, лежащего в основе этого апплета JavaFX
Посмотрите на код ниже, и обратите внимание, что изменилось с момента его первое воплощение .
/*
* SimpleCalc2.fx
*
* Developed 2008 by James L. Weaver (jim.weaver at javafxpert.com)
* to demonstrate creating applications using JavaFX SDK 1.0
*/
package javafxpert;
import javafx.ext.swing.*;
import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.input.*;
import javafx.scene.layout.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.text.*;
import javafx.scene.transform.*;
/**
* The "stage" for the application
*/
Stage {
// The model
var displayStr:String;
var keyLabels = ["7", "8", "9", "+",
"4", "5", "6", "-",
"1", "2", "3", "x",
"0", ".", "=", "/"];
title: "Calculator 2"
scene: Scene {
// The gradient on the calculator keys
var btnGradient = LinearGradient {
startX: 0.0, startY: 0.0,
endX: 0.0, endY: 1.0
stops: [
Stop {
offset: 0.0
color: Color.rgb(166, 166, 168)
},
Stop {
offset: 1.0
color: Color.rgb(122, 122, 122)
}
]
};
content: [
// The rounded rectangle behind the entire calculator
Rectangle {
width: 278
height: 401
arcWidth: 16
arcHeight: 16
fill: LinearGradient {
startX: 0.0, startY: 0.0,
endX: 0.5, endY: 1.0
stops: [
Stop {
offset: 0.0
color: Color.rgb(119, 116, 123)
},
Stop {
offset: 1.0
color: Color.rgb(2, 2, 2)
}
]
},
},
VBox {
transforms: bind Translate.translate(20, 20)
spacing: 27
content: [
// The calculator's display
TextBox {
text: bind displayStr
width: 238
height: 65
editable: false
style: bind "text-fill: #343434; "
"background-fill: #f4f4f4; "
"font: 28pt Dialog; "
"font-weight: bold; "
},
// The calculator's keys
VBox {
spacing: 2
content: for (row in [0..3]) {
HBox {
spacing: 2
content: for (column in [0..3]) {
Group {
var rectRef:Rectangle;
var textRef:Text;
content: [
rectRef = Rectangle {
width: 58
height: 50
fill: btnGradient
},
textRef = Text {
transforms: bind
Translate.translate((rectRef.layoutBounds.width -
textRef.layoutBounds.width) / 2,
(rectRef.layoutBounds.height -
textRef.layoutBounds.height) / 2)
content: keyLabels[row * 4 + column]
textOrigin: TextOrigin.TOP
fill: Color.rgb(222, 222, 222)
font: Font {
name: "Arial Bold"
size: 30
}
}
]
onMouseClicked: function(me:MouseEvent):Void {
displayStr = "{displayStr}{textRef.content}"
}
}
}
}
}
}
]
}
]
}
}
Обратите внимание на выражения for, которые создают HBox для каждой строки, и группу для каждого ключа калькулятора в строке. Значение выражения for — это последовательность (массив Think) объектов. Дополнительную информацию о выражении for можно найти в справочнике по языку JavaFX (в разработке на момент написания статьи).
Еще одним заслуживающим внимания элементом является значение атрибута transforms в объекте Text . Приведенная выше функция Translate.translate позволяет центрировать текст по горизонтали и вертикали в пределах прямоугольника.
Одним из преимуществ использования выражения for является то, что для всех ключей требуется только один обработчик событий, а не один для каждого ключа, как в предыдущей версии Simple Calculator. В этом случае атрибут onMouseClicked находится в группе, содержащей прямоугольник и текст.
Еще один интересный момент — использование класса LinearGradient, чтобы приложение стало больше похоже на графическую композицию, показанную выше. Обратитесь к документации API JavaFX для получения дополнительной информации об использовании этого класса. Кстати, документация по API доступна как в Интернете, так и в JavaFX SDK.
Пожалуйста, оставьте комментарий, если у вас есть какие-либо вопросы!
С Уважением,
Джим Уивер
JavaFXpert.com