-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathBasic_Tutorial.html
More file actions
132 lines (112 loc) · 6.17 KB
/
Basic_Tutorial.html
File metadata and controls
132 lines (112 loc) · 6.17 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype html>
<html class="no-js" lang="">
<head>
<title>Nana Creator Basic Tutorial</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/styles/vs.css">
<script src="js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body class="">
<div id="content" class="mw-body" role="main">
<h1 id="firstHeading" class="firstHeading">Nana Creator Basic Tutorial <span>[<a href="files/basic.ncp">basic.ncp</a>]</span></h1>
<div id="bodyContent" class="mw-body-content">
<h2><span class="" id="">Introduction</span></h2>
<p>This tutorial will explain in detail how to take your first steps using Nana Creator.
</p>
<p>We will begin by creating a simple nana::form widget with some controls in it.
</p>
<h2><span class="" id="">Creating a new project</span></h2>
<p>Start up Nana Creator.
</p>
<p><a href="img/basictut001.jpg" class="image"><img alt="" src="img/basictut001.jpg" height="445"></a>
</p>
<p>Click the <i>New Project</i> toolbar button.
</p>
<p><a href="img/basictut002.jpg" class="image"><img alt="" src="img/basictut002.jpg" height="350"></a>
</p>
<p>Choose nana::form, enter project name "basic", choose a folder to save the project in and click "Create".
</p>
<p>A project consisting of a single file is created:
</p>
<ul>
<li> basic.ncp</li>
</ul>
<h2><span class="" id="">Changing properties</span></h2>
<p>Name of the form.
</p>
<p>Using the properties panel locate the <i>Name</i>, the value should be set to "basic". This is the name of the nana::form control in C++ code.
</p>
<p>Change the size of the form.
</p>
<p>In the properties panel change the value of <i>Width</i> (under the <i>Common</i> category) to 400 and press <i>Enter</i>.
</p>
<p>In the same way change the value of <i>Height</i> to 200.
</p>
<p><a href="img/basictut003.jpg" class="image"><img alt="" src="img/basictut003.jpg" height="445"></a>
</p>
<h2><span class="" id="Adding">Adding controls</span></h2>
<p>Using the Assets panel on the left click on Label then move the mouse cursor over the widget form (the background of the widget form become highlighted) and click.<br>
Congratulations you just added your first control.
</p>
<p><a href="img/basictut004.jpg" class="image"><img alt="" src="img/basictut004.jpg" height="445"></a>
</p>
<p>Do similarly for a Button and place it to the right of the Label. Then add a Textbox between the Label and the Button.
</p>
<p><a href="img/basictut005.jpg" class="image"><img alt="" src="img/basictut005.jpg" height="445"></a>
</p>
<h2><span class="" id="">Styling the application</span></h2>
<p>Using the Objects panel on the left select the widget form (or click on the background of the widget form) to display its properties.
</p>
<p>In the properties panel change the value of <i>Layout</i> (under the <i>Layout</i> category) to <i>Vertical</i> and press <i>Enter</i>.
</p>
<p>In the same way change the value of <i>Margin</i> to 10 and the value of <i>Gap</i> to 5.
</p>
<p><a href="img/basictut006.jpg" class="image"><img alt="" src="img/basictut006.jpg" height="445"></a>
</p>
<p>Select the Label using the Object panel or clicking on it.<br>
Change the value of <i>Caption</i> to "Basic Nana Creator Tutorial", the value of <i>Horizontal Alignment</i> to Center, the value of <i>Size</i> (under the <i>Font</i> category) to 18 and the value of <i>Weight</i> (under the <i>Layout</i> category) to 34.
</p>
<p><a href="img/basictut007.jpg" class="image"><img alt="" src="img/basictut007.jpg" height="445"></a>
</p>
<p>Select the Textbox.<br>
Change the value of <i>Tip</i> to "Write your opinion". Click on the <i>Backgoround</i> colorbox (the property expand) and change the color to 255,255,50 (colors are in RGB format).
</p>
<p>Select the Button.<br>
Change the value of <i>Caption</i> to "Submit" and change the value of <i>Weight</i> to 34.
</p>
<p><a href="img/basictut008.jpg" class="image"><img alt="" src="img/basictut008.jpg" height="445"></a>
</p>
<h2><span class="" id="">Generating code</span></h2>
<p>Once the UI of our application is finished there is nothing left to do but to generate the code.
</p>
<p>Select the Form.<br>
Under the <i>C++ Code</i> category be sure the value of <i>File Name</i> is set to "basic" and click the <i>Generate C++ Code</i> toolbar button.
</p>
<p><a href="img/basictut009.jpg" class="image"><img alt="" src="img/basictut009.jpg" height="100"></a>
</p>
<p>Nana Creator will generate the <i>basic.h</i> fle in the same folder where the project is.
</p>
<h2><span class="" id="">Building and Running the application</span></h2>
<p>Using your favourite C++ development environment create and edit <i>main.cpp</i> file to this:
</p>
<pre><code class="cpp">
#include "basic.h"
using namespace nana;
void main()
{
basic app(0);
app.show();
exec();
}
</code></pre>
<p>Remember to link <i>nana library</i> then build and run. Here our application running:
</p>
<p><a href="img/basictut010.jpg" class="image"><img alt="" src="img/basictut010.jpg" height="238"></a>
</p>
<p><br>See you with the next tutorial ... CIAO !!!<br>
</p>
</div>
</div>
</body>
</html>