various documentation changes

This commit is contained in:
Will Szumski 2015-01-05 18:37:29 +00:00
parent 665f6c6b64
commit 476740fffc
1 changed files with 44 additions and 43 deletions

View File

@ -7,7 +7,7 @@
Introduction Introduction
----------- -----------
The NimQml module add Qt Qml bindings to the Nim programming language The NimQml module adds Qt Qml bindings to the Nim programming language
allowing you to create new modern UI by mixing the Qml declarative syntax allowing you to create new modern UI by mixing the Qml declarative syntax
and the Nim imperative language. and the Nim imperative language.
@ -22,7 +22,7 @@ the libDOtherSide exported symbols in Nim
Building Building
-------- --------
At the time of writing the DOtherSide C++ library must be compiled At the time of writing the DOtherSide C++ library must be compiled
installed manually from source. and installed manually from source.
First clone the DOtherSide git repo First clone the DOtherSide git repo
:: ::
@ -36,7 +36,7 @@ than you can proceed with the common CMake build steps
cmake .. cmake ..
make make
If everything goes correctly you'll have build both If everything goes correctly, you'll have built both
the DOtherSide C++ library and the Nim examples the DOtherSide C++ library and the Nim examples
Installation Installation
@ -63,7 +63,7 @@ Example 1: HelloWorld
As usual lets start with an HelloWorld example. As usual lets start with an HelloWorld example.
Most of the NimQml projects are made by one or more nim and qml Most of the NimQml projects are made by one or more nim and qml
files. Usually the .nim files contains your app logic and data files. Usually the .nim files contains your app logic and data
layer. The qml files contains the presentation layer and expose layer. The qml files contain the presentation layer and expose
the data in your nim files. the data in your nim files.
``Examples/HelloWorld/main.nim`` ``Examples/HelloWorld/main.nim``
@ -87,8 +87,8 @@ Example 2: exposing data to Qml
The previous example shown you how to create a simple application The previous example shown you how to create a simple application
window and how to startup the Qt event loop. window and how to startup the Qt event loop.
Is time to explore how to pass to to Qml, but first lets see the It's time to explore how to pass data to Qml, but lets see the
example code: example code first:
``Examples/SimpleData/main.nim`` ``Examples/SimpleData/main.nim``
@ -100,13 +100,13 @@ example code:
.. code-block:: qml .. code-block:: qml
:file: ../Examples/SimpleData/main.qml :file: ../Examples/SimpleData/main.qml
The following example shows how to expose simple data to Qml: The following example shows how to expose simple data types to Qml:
1. Create a QVariant and sets the its internal value. 1. Create a QVariant and set its internal value.
2. Create a property in the Qml root context with a given name. 2. Create a property in the Qml root context with a given name.
Once a a property is set through the ``setContextProperty`` proc its available Once a property is set through the ``setContextProperty`` proc, it's available
globally in all the Qml script loaded by the current engine (see the Qt doc globally in all the Qml script loaded by the current engine (see the official Qt
for more details about engine and context) documentation for more details about the engine and context objects)
At the time of writing the QVariant class support the following types: At the time of writing the QVariant class support the following types:
* int * int
@ -116,21 +116,21 @@ At the time of writing the QVariant class support the following types:
Example 3: exposing complex data and procedures to Qml Example 3: exposing complex data and procedures to Qml
---------------------------------------------------------- ----------------------------------------------------------
As seen by the second example simple data is fine. However most As seen by the second example, simple data is fine. However most
applications need to expose complex data, functions and applications need to expose complex data, functions and
update the view when something change in the data layer. update the view when something changes in the data layer.
This is achieved by creating an object that derives from QObject. This is achieved by creating an object that derives from QObject.
A QObject is made of : A QObject is made of :
1. ``Slots``: slots are function that could both be called from the qml engine and connected to Qt signals 1. ``Slots``: slots are functions that could be called from the qml engine and/or connected to Qt signals
2. ``Signals``: signals allow the sending of events and be connected to slots 2. ``Signals``: signals allow the sending of events and be connected to slots
3. ``Properties``: properties allows the passing of data to 3. ``Properties``: properties allow the passing of data to
the Qml view and make it aware of changes in the data layer the Qml view and make it aware of changes in the data layer
A QObject property is made of three things: A QObject property is made of three things:
* a read slot, a method that return the current value of the property * a read slot: a method that returns the current value of the property
* a write slot, a method that set the value of the property * a write slot: a method that sets the value of the property
* a notify signal for telling that the current value of the property has been changed * a notify signal: emitted when the current value of the property is changed
We'll start by looking at the main.nim file We'll start by looking at the main.nim file
@ -139,24 +139,25 @@ We'll start by looking at the main.nim file
.. code-block:: nim .. code-block:: nim
:file: ../Examples/SlotsAndProperties/main.nim :file: ../Examples/SlotsAndProperties/main.nim
Here's nothing special happen except: Here, nothing special happens except:
1. The creation of Contact object 1. The creation of Contact object
2. The injection of the Contact object to the Qml root context 2. The injection of the Contact object to the Qml root context
using the ``setContextProperty`` as seen in the previous using the ``setContextProperty`` as seen in the previous
example example
The Qml file is as follow: The Qml file is as follows:
``Examples/SlotsAndProperties/main.qml`` ``Examples/SlotsAndProperties/main.qml``
.. code-block:: qml .. code-block:: qml
:file: ../Examples/SlotsAndProperties/main.qml :file: ../Examples/SlotsAndProperties/main.qml
The qml is made by a Label, a TextInput and a button. The qml is made up of: a Label, a TextInput widget, and a button.
The label display the contact name and automatically udpates when The label displays the contact name - this automatically updates when
the concat name changes. the contact name changes.
The button update the contact name with the TextInput text when clicked. When clicked, the button updates the contact name with the text from
the TextInput widget.
So where's the magic? So where's the magic?
@ -167,8 +168,8 @@ The magic is in the Contact.nim file
.. code-block:: nim .. code-block:: nim
:file: ../Examples/SlotsAndProperties/Contact.nim :file: ../Examples/SlotsAndProperties/Contact.nim
What First we declare a QObject subclass and provide a simple First we declare a QObject subclass and provide a simple
new method where: new method where we:
1. invoke the ``create()`` procedure. This invoke the C++ bridge and allocate 1. invoke the ``create()`` procedure. This invoke the C++ bridge and allocate
a QObject instance a QObject instance
2. register a slot ``getName`` for reading the Contact name field 2. register a slot ``getName`` for reading the Contact name field
@ -177,27 +178,27 @@ a QObject instance
5. register a property called ``name`` of type ``QString`` with the given 5. register a property called ``name`` of type ``QString`` with the given
read, write slots and notify signal read, write slots and notify signal
The two slots method implementation are trivial and consist in standard Looking at the ``getName`` and ``setName`` methods, you can see that slots, as defined in Nim,
nim methods. However ``setName`` slot method shows how to emit a signal are nothing more than standard methods. The method corresponding to the ``setName`` slot
by using the ``emit`` method. demonstrates how to use the ``emit`` method to emit a signal.
The last thing to condider is the override of the ``onSlotCalled`` method. The last thing to consider is the override of the ``onSlotCalled`` method.
This method is called by the NimQml library when an invokation occur from This method is called by the NimQml library when an invocation occurs from
the Qml side for one of the QObject slot. the Qml side for one of the slots belonging to the QObject.
The usual implementation for the onSlotCalled method consists in a The usual implementation for the onSlotCalled method consists of a
switch statement that forward the arguments to the correct slot. switch statement that forwards the arguments to the correct slot.
If the invoked slot has a return value this is always in the index position If the invoked slot has a return value, this is always in the index position
0 of the args array. 0 of the args array.
Example 4: QtObject macro Example 4: QtObject macro
------------------------- -------------------------
The previous example shows how to create simple QObject however writing The previous example shows how to create a simple QObject, however writing
all those ``register`` procs and writing the ``onSlotCalled`` method all those ``register`` procs and writing the ``onSlotCalled`` method
become boring pretty soon. becomes boring pretty soon.
Furthermore all this information can be automatically generated. Furthermore all this information can be automatically generated.
For this purpose you can import the NimQmlMacros module that provide For this purpose you can import the NimQmlMacros module that provides
the QtObject macro. the QtObject macro.
Let's begin as usual with both the main.nim and main.qml files Let's begin as usual with both the main.nim and main.qml files
@ -213,8 +214,8 @@ Let's begin as usual with both the main.nim and main.qml files
.. code-block:: qml .. code-block:: qml
:file: ../Examples/QtObjectMacro/main.qml :file: ../Examples/QtObjectMacro/main.qml
Nothing new in both the ``main.nim`` and ``main.qml`` in respect to Nothing is new in both the ``main.nim`` and ``main.qml`` with respect to
the previous example. What changed is the Contact object the previous example. What changed is the Contact object:
``Examples/QtObjectMacro/Contact.nim`` ``Examples/QtObjectMacro/Contact.nim``
@ -223,8 +224,8 @@ the previous example. What changed is the Contact object
In details: In details:
1. Each QObject is defined inside the QtObject macro 1. Each QObject is defined inside the QtObject macro
2. Each slot is annotated with the ``{.slot.}`` macro 2. Each slot is annotated with the ``{.slot.}`` pragma
3. Each signal is annotated with the ``{.signal.}`` macro 3. Each signal is annotated with the ``{.signal.}`` pragma
4. Each property is created with the ``QtProperty`` macro 4. Each property is created with the ``QtProperty`` macro
The ``QtProperty`` macro has the following syntax The ``QtProperty`` macro has the following syntax