Editing QML-EnhancedCalcExample
Warning: You are not logged in.
Your IP address will be recorded in this page's edit history.
The edit can be undone.
Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.
Latest revision | Your text | ||
Line 1: | Line 1: | ||
- | |||
- | |||
== About the Enhanced Calc Example == | == About the Enhanced Calc Example == | ||
Line 12: | Line 10: | ||
The file below defines the layouts of the calculator. It uses the button below to draw nice looking button shape, that has glow effect. | The file below defines the layouts of the calculator. It uses the button below to draw nice looking button shape, that has glow effect. | ||
- | |||
import Qt 4.6 | import Qt 4.6 | ||
Line 20: | Line 17: | ||
SystemPalette { id: palette } | SystemPalette { id: palette } | ||
Script { source: "calculator.js" } | Script { source: "calculator.js" } | ||
- | |||
We use the system palette for colors and the calculator.js file for all of the calculation logic. | We use the system palette for colors and the calculator.js file for all of the calculation logic. | ||
- | |||
Column { | Column { | ||
x: 2; spacing: 2; | x: 2; spacing: 2; | ||
Line 30: | Line 25: | ||
id: numericOperations | id: numericOperations | ||
spacing: 2 | spacing: 2 | ||
- | |||
- | We use column layout for the numeric operations (the field that shows the | + | We use column layout for the numeric operations (the field that shows the calcuations) layout, with small intendation (2 px) and small padding. |
- | |||
Rectangle { | Rectangle { | ||
id: container | id: container | ||
Line 61: | Line 54: | ||
CalcButton { operation: "Bksp"; id: bksp; opacity: 0 } | CalcButton { operation: "Bksp"; id: bksp; opacity: 0 } | ||
} | } | ||
- | |||
The Text area for the calculations, surrounded by dark border, with two text areas: the operation and the value. The operation (e.g. "*" to signal multiplication, is anchored left, and the calculation is anchored to the right. | The Text area for the calculations, surrounded by dark border, with two text areas: the operation and the value. The operation (e.g. "*" to signal multiplication, is anchored left, and the calculation is anchored to the right. | ||
- | |||
Item { | Item { | ||
height:460; width: 420; | height:460; width: 420; | ||
Line 72: | Line 63: | ||
id: basicButtons | id: basicButtons | ||
x: 55; width: 460; height: 400 | x: 55; width: 460; height: 400 | ||
- | |||
The above defines the compound item of the basicButtons. The actual buttons are defined below. We intend by default this with 55 so that the buttons in basic layout don't feel like they are in the left side of the screen. This padding is changed in the transition to advanced layout. | The above defines the compound item of the basicButtons. The actual buttons are defined below. We intend by default this with 55 so that the buttons in basic layout don't feel like they are in the left side of the screen. This padding is changed in the transition to advanced layout. | ||
- | + | ||
- | + | ||
Row { | Row { | ||
id: commonOperations | id: commonOperations | ||
Line 92: | Line 81: | ||
} | } | ||
- | |||
- | Common operations to clean the | + | Common operations to clean the calcuations are on one row, along with speacial wider toggle button for advanced mode. |
+ | |||
- | |||
Grid { | Grid { | ||
id: numKeypad; y:60; spacing: 0; columns: 3 | id: numKeypad; y:60; spacing: 0; columns: 3 | ||
Line 112: | Line 100: | ||
CalcButton { operation: "=" } | CalcButton { operation: "=" } | ||
} | } | ||
- | |||
Normal numbers and . and = keys are in grid layout | Normal numbers and . and = keys are in grid layout | ||
- | |||
Column { | Column { | ||
id: simpleOperations | id: simpleOperations | ||
Line 126: | Line 112: | ||
} | } | ||
} | } | ||
- | |||
Basic calculation operations are in one column (for easy layouting). | Basic calculation operations are in one column (for easy layouting). | ||
- | |||
Grid { | Grid { | ||
id: advancedButtons | id: advancedButtons | ||
Line 155: | Line 139: | ||
CalcButton { operation: "x^y" } | CalcButton { operation: "x^y" } | ||
} | } | ||
- | |||
Advanced operations are in 2x5 grid and trigonometry operations are on one row. Easy positioning of those compound elements. | Advanced operations are in 2x5 grid and trigonometry operations are on one row. Easy positioning of those compound elements. | ||
- | |||
} | } | ||
} | } | ||
Line 172: | Line 154: | ||
} | } | ||
- | |||
- | States definition for advanced mode. Basic mode doesn't need to be defined, as we have defined that already as the default mode of operation. For advanced state, we modify the | + | States definition for advanced mode. Basic mode doesn't need to be defined, as we have defined that already as the default mode of operation. For advanced state, we modify the bacspace to be visible, we move basic buttons a bit, we enable advanced and trigonometry buttons and move them a bit for visual candy. |
+ | |||
- | |||
transitions: Transition { | transitions: Transition { | ||
NumberAnimation { matchProperties: "x,y,width"; easing: "easeOutBounce"; duration: 500 } | NumberAnimation { matchProperties: "x,y,width"; easing: "easeOutBounce"; duration: 500 } | ||
Line 182: | Line 163: | ||
} | } | ||
} | } | ||
- | |||
Above defines the animations for the transition to and from advanced mode. | Above defines the animations for the transition to and from advanced mode. | ||
+ | |||
== CalcButton == | == CalcButton == | ||
The code below makes a button that has a glow effect when tapped on. | The code below makes a button that has a glow effect when tapped on. | ||
- | |||
import Qt 4.6 | import Qt 4.6 | ||
Line 220: | Line 200: | ||
} | } | ||
Text { id: label; anchors.centerIn: parent; color: palette.buttonText } | Text { id: label; anchors.centerIn: parent; color: palette.buttonText } | ||
- | |||
- | On the above, we define the bg of the button and the highlight of the button. | + | On the above, we define the bg of the button and the highlight of the button. THe highlight is img and the bg image is, well, bgimg. |
+ | |||
- | |||
MouseRegion { | MouseRegion { | ||
id: clickRegion | id: clickRegion | ||
Line 235: | Line 214: | ||
} | } | ||
} | } | ||
- | |||
Above handles the mouse clicks. | Above handles the mouse clicks. | ||
- | |||
states: [ | states: [ | ||
State { | State { | ||
Line 252: | Line 229: | ||
} | } | ||
] | ] | ||
- | |||
Above defines state "pressed", which triggers the highlight to come up all the way, moves all of the parent objects also up in the stack and sets target opacity for the highlight to be 0. | Above defines state "pressed", which triggers the highlight to come up all the way, moves all of the parent objects also up in the stack and sets target opacity for the highlight to be 0. | ||
- | + | ||
- | + | ||
transitions: Transition { | transitions: Transition { | ||
NumberAnimation { matchProperties: "z,scale"; easing: "easeOutExpo"; duration: 200 } | NumberAnimation { matchProperties: "z,scale"; easing: "easeOutExpo"; duration: 200 } | ||
Line 262: | Line 237: | ||
} | } | ||
- | + | Above defines the transitions for the button. | |
- | + | ||
+ | } | ||
- | |||
== Calculator.js == | == Calculator.js == | ||
Line 272: | Line 247: | ||
- | + | ||
var curVal = 0; | var curVal = 0; | ||
var memory = 0; | var memory = 0; | ||
Line 370: | Line 345: | ||
} | } | ||
} | } | ||
- | |||
- | |||
- | |||
- |
Learn more about Contributing to the wiki.