diff options
Diffstat (limited to 'doc/src/declarative/advtutorial1.qdoc')
| -rw-r--r-- | doc/src/declarative/advtutorial1.qdoc | 136 |
1 files changed, 52 insertions, 84 deletions
diff --git a/doc/src/declarative/advtutorial1.qdoc b/doc/src/declarative/advtutorial1.qdoc index b940986..1d47615 100644 --- a/doc/src/declarative/advtutorial1.qdoc +++ b/doc/src/declarative/advtutorial1.qdoc @@ -1,8 +1,49 @@ +/**************************************************************************** +** +** Copyright (C) 2009 Nokia Corporation and/or its subsidiary(-ies). +** Contact: Qt Software Information (qt-info@nokia.com) +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the either Technology Preview License Agreement or the +** Beta Release License Agreement. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain +** additional rights. These rights are described in the Nokia Qt LGPL +** Exception version 1.0, included in the file LGPL_EXCEPTION.txt in this +** package. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3.0 as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU General Public License version 3.0 requirements will be +** met: http://www.gnu.org/copyleft/gpl.html. +** +** If you are unsure which license is appropriate for your use, please +** contact the sales department at qt-sales@nokia.com. +** $QT_END_LICENSE$ +** +****************************************************************************/ + /*! \page advtutorial1.html \example declarative/tutorials/samegame/samegame1 -\title Advanced Tutorial 1 - Creating the Game canvas and block \target advtutorial1 +\title Advanced Tutorial 1 - Creating the Game canvas and block The first step is to create the items in your application. In Same Game we have a main game screen and the blocks that populate it. @@ -10,103 +51,30 @@ The first step is to create the items in your application. In Same Game we have Here is the QML code for the basic elements. The game window: -\code -import Qt 4.6 - -Rectangle { - id: Screen - width: 490; height: 720 - - SystemPalette { id: activePalette; colorGroup: Qt.Active } - - Item { - width: parent.width; anchors.top: parent.top; anchors.bottom: ToolBar.top - - Image { - id: background - anchors.fill: parent; source: "pics/background.png" - fillMode: "PreserveAspectCrop" - } - } - - Rectangle { - id: ToolBar - color: activePalette.window - height: 32; width: parent.width - anchors.bottom: Screen.bottom - - Button { - id: btnA; text: "New Game"; onClicked: print("Implement me!"); - anchors.left: parent.left; anchors.leftMargin: 3 - anchors.verticalCenter: parent.verticalCenter - } - - Text { - id: Score - text: "Score: Who knows?"; font.bold: true - anchors.right: parent.right; anchors.rightMargin: 3 - anchors.verticalCenter: parent.verticalCenter - } - } -} -\endcode +\snippet declarative/tutorials/samegame/samegame1/samegame.qml 0 This gives you a basic game window, with room for the game canvas. A new game button and room to display the score. The one thing you may not recognize here -is the SystemPalette item. This item provides access to the Qt system palette +is the \l SystemPalette item. This item provides access to the Qt system palette and is used to make the button look more like a system button (for exact native -feel you would use a QPushButton). Since we want a fully QML button, and the Fx -primitives don't include a button, we had to write our own. Below is the code -which we wrote to do this: - -\code -import Qt 4.6 - -Rectangle { - id: Container +feel you would use a \l QPushButton). Since we want a fully QML button, and QML does +not include a button, we had to write our own. Below is the code which we wrote to do this: - signal clicked - property string text: "Button" +\snippet declarative/tutorials/samegame/samegame1/Button.qml 0 - color: activePalette.button; smooth: true - width: txtItem.width + 20; height: txtItem.height + 6 - border.width: 1; border.color: activePalette.darker(activePalette.button); radius: 8; - - gradient: Gradient { - GradientStop { - id: topGrad; position: 0.0 - color: if (mr.pressed) { activePalette.dark } else { activePalette.light } } - GradientStop { position: 1.0; color: activePalette.button } - } - - MouseRegion { id: mr; anchors.fill: parent; onClicked: Container.clicked() } - - Text { - id: txtItem; text: Container.text; anchors.centerIn: Container; color: activePalette.buttonText - } -} -\endcode Note that this Button component was written to be fairly generic, in case we want to use a similarly styled button later. And here is a simple block: -\code -import Qt 4.6 -Item { - id:block - - Image { id: img - source: "pics/redStone.png"; - anchors.fill: parent - } -} -\endcode +\snippet declarative/tutorials/samegame/samegame1/Block.qml 0 Since it doesn't do anything yet it's very simple, just an image. As the tutorial progresses and the block starts doing things the file will become -more than just an image. Note that we've set the image to be the size of the itm. This will be used later, when we dynamically create and size the block items the image will be scaled automatically to the correct size. - +more than just an image. Note that we've set the image to be the size of the itm. +This will be used later, when we dynamically create and size the block items the image will be scaled automatically +to the correct size. + You should be familiar with all that goes on in these files so far. This is a very basic start and doesn't move at all - next we will populate the game canvas with some blocks. |