331 lines
21 KiB
HTML
331 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
<title>ewol Library</title>
|
|
<link rel="stylesheet" href="base.css">
|
|
<link rel="stylesheet" href="menu.css">
|
|
</head>
|
|
<body>
|
|
<div class="navbar navbar-fixed-top">
|
|
<div class="container">
|
|
<h1><a href="index.html">ewol library</a></h1>
|
|
<h4><a href="http://github.com/heeroyui/ewol/"> [ sources ]</a></h4>
|
|
<h3>API:</h3> <div id="menu">
|
|
<ul class="niveau1">
|
|
<li class="sousmenu"><a href="namespace_ewol.html">ewol</a>
|
|
<ul class="niveau2">
|
|
<li><a href="namespace_ewol__translate.html">translate</a>
|
|
</li>
|
|
<li><a href="namespace_ewol__key.html">key</a>
|
|
</li>
|
|
<li><a href="namespace_ewol__widget.html">widget</a>
|
|
</li>
|
|
<li><a href="namespace_ewol__openGL.html">openGL</a>
|
|
</li>
|
|
<li class="sousmenu"><a href="namespace_ewol__context.html">context</a>
|
|
<ul class="niveau3">
|
|
<li><a href="namespace_ewol__context__clipBoard.html">clipBoard</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="namespace_ewol__compositing.html">compositing</a>
|
|
</li>
|
|
<li><a href="namespace_ewol__object.html">object</a>
|
|
</li>
|
|
<li><a href="namespace_ewol__resource.html">resource</a>
|
|
</li>
|
|
<li><a href="namespace_ewol__font.html">font</a>
|
|
</li>
|
|
<li><a href="namespace_ewol__event.html">event</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="namespace_MacOs.html">MacOs</a>
|
|
</li>
|
|
<li><a href="namespace_IOs.html">IOs</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<h3>Documentation:</h3><div id="menu">
|
|
<ul class="niveau1"><li><a href="001_bases.html">Bases</a></li>
|
|
</ul><ul class="niveau1"><li><a href="faq.html">Faq</a></li>
|
|
</ul></div>
|
|
<h3>Tutorials:</h3><div id="menu">
|
|
<ul class="niveau1"><li><a href="tutorial_000_Build.html">Build</a></li>
|
|
</ul><ul class="niveau1"><li><a href="tutorial_001_HelloWord.html">Hello word</a></li>
|
|
</ul><ul class="niveau1"><li><a href="tutorial_010_ObjectModel.html">Object model</a></li>
|
|
</ul><ul class="niveau1"><li><a href="tutorial_011_ObjectConfig.html">Object config</a></li>
|
|
</ul><ul class="niveau1"><li><a href="tutorial_012_ObjectMessage.html">Object message</a></li>
|
|
</ul><ul class="niveau1"><li><a href="tutorial_020_FileAccess.html">File access</a></li>
|
|
</ul><ul class="niveau1"><li><a href="tutorial_021_Resources.html">Resources</a></li>
|
|
</ul><ul class="niveau1"><li><a href="tutorial_030_ConplexeXmlGui.html">Conplexe xml gui</a></li>
|
|
</ul><ul class="niveau1"><li><a href="tutorial_050_CreateCustomWidget.html">Create custom widget</a></li>
|
|
</ul><ul class="niveau1"><li><a href="tutorial_051_AddWidgetCustumInXML.html">Add widget custum in x m l</a></li>
|
|
</ul></div>
|
|
<br/><h3>Associate libraries:</h3><div id="menu">
|
|
<ul class="niveau1"><li><a href="../ejson/index.html">ejson</a></li>
|
|
</ul><ul class="niveau1"><li><a href="../egami/index.html">egami</a></li>
|
|
</ul><ul class="niveau1"><li><a href="../ege/index.html">ege</a></li>
|
|
</ul><ul class="niveau1"><li><a href="../esvg/index.html">esvg</a></li>
|
|
</ul><ul class="niveau1"><li><a href="../etk/index.html">etk</a></li>
|
|
</ul><ul class="niveau1"><li><a href="../exml/index.html">exml</a></li>
|
|
</ul></div>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
<div class="container" id="content">
|
|
<h1><center>hello word</center></h1>
|
|
<hr><div align="left"><a href="tutorial_000_Build.html">Previous: Build</a></div> <div align="right"><a href="tutorial_010_ObjectModel.html">Next: Object model</a></div>
|
|
|
|
<h2> Objectif </h2>
|
|
<ul><li> Understand basis of ewol</li><li> Create a simple windows with a label "Hello Word"</li></ul>
|
|
<h2> Application Sources: </h2><br/>
|
|
<h3> Application Main: </h3><br/>
|
|
A generic Ewol application is manage by creating an <a href="class_ewol__context__Application.html">ewol::context::Application</a> that is the basis of your application.<br/>
|
|
Due to the fact the ewol library is a multi-platform framework, you will have many contraint like:
|
|
<ul><li> One application at the same time</li><li> One Windows displayable at the time</li><li> Not a big CPU ...</li></ul>
|
|
Then we will create the application:<br/>
|
|
<pre>
|
|
namespace appl <span class="code-operator">{</span>
|
|
<span class="code-storage-keyword">class</span> MainApplication : <span class="code-storage-keyword">public</span> <span class="code-class">ewol::context::Application</span> <span class="code-operator">{</span>
|
|
<span class="code-storage-keyword">public</span>:
|
|
<span class="code-type">bool</span> <span class="code-function-name">init(</span><span class="code-class">ewol::Context</span>&<span class="code-input-function"> _context</span>, <span class="code-type">size_t</span><span class="code-input-function"> _initId</span>) <span class="code-operator">{</span>
|
|
<span class="code-function-name">APPL_INFO(</span><span class="code-text-quote">"==> Init APPL (START)"</span>);
|
|
<span class="code-comment">// nothing to do ...
|
|
</span> <span class="code-function-name">APPL_INFO(</span><span class="code-text-quote">"==> Init APPL (END)"</span>);
|
|
<span class="code-keyword">return </span><span class="<code-operator">true</span>;
|
|
<span class="code-operator">}</span>
|
|
<span class="code-type">void</span> <span class="code-function-name">unInit(</span><span class="code-class">ewol::Context</span>&<span class="code-input-function"> _context</span>) <span class="code-operator">{</span>
|
|
<span class="code-function-name">APPL_INFO(</span><span class="code-text-quote">"==> Un-Init APPL (START)"</span>);
|
|
<span class="code-comment">// nothing to do ...
|
|
</span> <span class="code-function-name">APPL_INFO(</span><span class="code-text-quote">"==> Un-Init APPL (END)"</span>);
|
|
<span class="code-operator">}</span>
|
|
<span class="code-operator">}</span>;
|
|
<span class="code-operator">}</span>;
|
|
</pre><br/>
|
|
The input <a href="class_ewol__Context.html">ewol::Context</a> is the main system context.<br/>
|
|
<br/>
|
|
<b>Note:</b><pre>
|
|
It is important to know that the system can create your application multiple times, the basic exemple of this is the Wallpaper on Android.<br/>
|
|
What is done:
|
|
<li> When we select the wallpaper it create a new application (to show an example)</li><li> When applying your choice, it create the real one an remove the previous one.</li></pre><br/>
|
|
In all program we need to have a main()<br/>
|
|
To be portable on Android, the "main" in the java might call your main through the Android wrapper.<br/>
|
|
To simplify compabilities between platform it is recommanded to not add other things in the application main:<br/>
|
|
<pre>
|
|
<span class="code-type">int</span> <span class="code-function-name">main(</span><span class="code-type">int</span> argc, <span class="code-storage-keyword">const</span> <span class="code-type">char</span> *argv[]) <span class="code-operator">{</span>
|
|
<span class="code-comment">// only one things to do :
|
|
</span> <span class="code-keyword">return </span>ewol::<span class="code-function-name">run(</span><span class="code-function-system">new </span>appl::<span class="code-function-name">MainApplication(</span>),<span class="code-input-function"> _argc</span>,<span class="code-input-function"> _argv</span>);
|
|
<span class="code-operator">}</span>
|
|
</pre><br/>
|
|
|
|
<h3> Some configuration are needed </h3><br/>
|
|
In your application you can use many configuration, it is really better to set all your configuration dynamic.
|
|
With this basic condiction will simplify the interface of the library if you would have many different application
|
|
(never forger the compilator garbage collector is really very efficient).<br/>
|
|
<br/>
|
|
<span style="font-weight: bold;">Select fonts:</span><br/>
|
|
This can be a problem when you design an application for some other operating system (OS),
|
|
They do not have the same default font.<br/>
|
|
We select an order to search the font names and the system basic size.
|
|
<pre>
|
|
<span class="code-comment">// Use External font depending on the system (for specific application, it is better to provide fonts)
|
|
</span><span class="code-input-function"> _context</span>.<span class="code-function-name">getFontDefault(</span>).<span class="code-function-name">setUseExternal(</span><span class="<code-operator">true</span>);
|
|
<span class="code-comment">// Select font in order you want : if Ewol find FreeSerif, it selected it ...
|
|
</span><span class="code-input-function"> _context</span>.<span class="code-function-name">getFontDefault(</span>).<span class="code-function-name">set(</span><span class="code-text-quote">"FreeSerif;DejaVuSansMono"</span>, <span class="code-number">19</span>);
|
|
</pre><br/>
|
|
|
|
<h3> Main Windows: </h3><br/>
|
|
Create the main Windows:<br/>
|
|
For this point we will create a class that herited form the basic <a href="class_ewol__wiget__Windows.html">ewol::wiget::Windows</a> class:<br/>
|
|
<span style="font-weight: bold;">Windows.h</span>
|
|
<pre>
|
|
<span class="code-preproc">#ifndef __APPL_WINDOWS_H__
|
|
</span> <span class="code-preproc">#define __APPL_WINDOWS_H__
|
|
</span>
|
|
<span class="code-preproc">#include <ewol/widget/Windows.h>
|
|
</span>
|
|
namespace appl <span class="code-operator">{</span>
|
|
<span class="code-storage-keyword">class</span> Windows : <span class="code-storage-keyword">public</span> <span class="code-class">ewol::widget::Windows</span> <span class="code-operator">{</span>
|
|
<span class="code-storage-keyword">protected</span>:
|
|
<span class="code-function-name">Windows(</span><span class="code-type">void</span>);
|
|
<span class="code-function-name">init(</span>)
|
|
<span class="code-storage-keyword">public</span>:
|
|
<span class="code-function-name">DECLARE_FACTORY(</span>Windows);
|
|
<span class="code-storage-keyword">virtual</span> ~<span class="code-function-name">Windows(</span><span class="code-type">void</span>) <span class="code-operator">{</span><span class="code-operator">}</span>;
|
|
<span class="code-operator">}</span>;
|
|
<span class="code-operator">}</span>;
|
|
<span class="code-preproc">#endif
|
|
</span></pre><br/>
|
|
See <a href="tutorial_010_ObjectModel.html">Next: Object model</a> to understand why this structure is so complex.<br/>
|
|
<span style="font-weight: bold;">Windows.cpp</span>
|
|
<pre>
|
|
<span class="code-preproc">#include <ewol/ewol.h>
|
|
</span> <span class="code-preproc">#include <appl/debug.h>
|
|
</span> <span class="code-preproc">#include <appl/Windows.h>
|
|
</span> <span class="code-preproc">#include <ewol/widget/Label.h>
|
|
</span>
|
|
<span class="code-preproc">#undef __class__
|
|
</span> <span class="code-preproc">#define __class__ "Windows"
|
|
</span>
|
|
<span class="code-class">appl::Windows</span>::<span class="code-function-name">Windows(</span><span class="code-type">void</span>) <span class="code-operator">{</span>
|
|
<span class="code-comment">// To simplify log (if you have a better solution, I am aware)
|
|
</span> <span class="code-function-name">addObjectType(</span><span class="code-text-quote">"appl::Windows"</span>);
|
|
<span class="code-operator">}</span>
|
|
<span class="code-class">appl::Windows</span>::<span class="code-function-name">init(</span><span class="code-type">void</span>) <span class="code-operator">{</span>
|
|
<span class="code-class">ewol::widget::Windows</span>::<span class="code-function-name">init(</span>);
|
|
<span class="code-function-name">setTitle(</span><span class="code-text-quote">"example 001_HelloWord"</span>);
|
|
<span class="code-class">std::shared_ptr</span><<span class="code-class">ewol::widget::Label</span>> tmpWidget = <span class="code-class">ewol::widget::Label</span>::<span class="code-function-name">create(</span>);
|
|
<span class="code-keyword">if </span>(<span class="code-generic-define">NULL</span> <span class="code-operator">==</span> tmpWidget) <span class="code-operator">{</span>
|
|
<span class="code-function-name">APPL_ERROR(</span><span class="code-text-quote">"Can not allocate widget ==> display might be in error"</span>);
|
|
<span class="code-operator">}</span> <span class="code-keyword">else </span><span class="code-operator">{</span>
|
|
tmpWidget-><span class="code-function-name">setLabel(</span><span class="code-text-quote">"Hello <font color='blue'>Word</font>"</span>);
|
|
tmpWidget-><span class="code-function-name">setExpand(</span>bvec<span class="code-number">2</span>(<span class="<code-operator">true</span>,<span class="<code-operator">true</span>));
|
|
<span class="code-function-name">setSubWidget(</span>tmpWidget);
|
|
<span class="code-operator">}</span>
|
|
<span class="code-operator">}</span>
|
|
</pre><br/>
|
|
The init function can not be virtual due to his polymorphic status, then we need to call parrent init
|
|
<pre>
|
|
<span class="code-class">ewol::widget::Windows</span>::<span class="code-function-name">init(</span>);
|
|
</pre><br/>
|
|
The fist basic property to set is the Title:
|
|
<pre>
|
|
<span class="code-function-name">setTitle(</span><span class="code-text-quote">"example 001_HelloWord"</span>);
|
|
</pre><br/>
|
|
After we simple create a <a href="class_widget__Label.html">widget::Label</a> in the main windows constructor.
|
|
And we set the widget property (label).
|
|
<pre>
|
|
<span class="code-class">std::shared_ptr</span><<span class="code-class">ewol::widget::Label</span>> tmpWidget = <span class="code-class">ewol::widget::Label</span>::<span class="code-function-name">create(</span>);
|
|
tmpWidget-><span class="code-function-name">setLabel(</span><span class="code-text-quote">"Hello <font color='blue'>Word</font>"</span>);
|
|
tmpWidget-><span class="code-function-name">setExpand(</span>bvec<span class="code-number">2</span>(<span class="<code-operator">true</span>,<span class="<code-operator">true</span>));
|
|
</pre>
|
|
We can see in this example that the label have some other property like the font color.<br/>
|
|
|
|
The label can have decorated text based on the html generic writing but it is composed with really simple set of balise.
|
|
I will take a really long time to create a real html parser.<br/>
|
|
The availlable property is:
|
|
<ul><li> <span style="font-weight: bold;"><br/></span> : New line</li><li> <span style="font-weight: bold;"><font color="#FF0000\"> ... </font></span> : change the font color.</li><li> <span style="font-weight: bold;"><center> ... </center></span> : center the text.</li><li> <span style="font-weight: bold;"><left> ... </left></span> : Set the text on the left.</li><li> <span style="font-weight: bold;"><right> ... </right></span> : Set the text on the right.</li><li> <span style="font-weight: bold;"><justify> ... </justify></span> : Set the text mode in justify.</li></ul>
|
|
<br/>
|
|
<b>Note:</b><pre>
|
|
The xml parser is a little strict on the case and end node (!! </br> !!),
|
|
but it support to:
|
|
<ul><li> Not have a main node.</li><li> replace '"' with ''' to simplify xml writing in C code.</li></ul></pre><br/>
|
|
The last step is to add the widget on the windows :
|
|
<pre>
|
|
<span class="code-function-name">setSubWidget(</span>tmpWidget);
|
|
</pre>
|
|
When we call this function, it use the shard_from_this() function that create an exception if we are in constructor<br/>
|
|
|
|
<h3> Configure Ewol to have display the windows </h3><br/>
|
|
At this point we have created the basic windows.
|
|
But the system does not know it.
|
|
Then we create windows and set it in the main contect main (in the MainApplication::init()):
|
|
<pre>
|
|
<span class="code-class">std::shared_ptr</span><<span class="code-class">ewol::Windows</span>> basicWindows = <span class="code-class">appl::Windows</span>::<span class="code-function-name">create(</span>));
|
|
<span class="code-comment">// create the specific windows
|
|
</span><span class="code-input-function"> _context</span>.<span class="code-function-name">setWindows(</span>basicWindows);
|
|
</pre>
|
|
Her we call the create function that is created by the DECLARE_FACTORY macro<br/>
|
|
|
|
Then the init fuction is :
|
|
<pre>
|
|
<span class="code-type">bool</span> MainApplication::<span class="code-function-name">init(</span><span class="code-class">ewol::Context</span>&<span class="code-input-function"> _context</span>, <span class="code-type">size_t</span><span class="code-input-function"> _initId</span>) <span class="code-operator">{</span>
|
|
<span class="code-function-name">APPL_INFO(</span><span class="code-text-quote">"==> Init APPL (START)"</span>);
|
|
<span class="code-comment">// select internal data for font ...
|
|
</span><span class="code-input-function"> _context</span>.<span class="code-function-name">getFontDefault(</span>).<span class="code-function-name">setUseExternal(</span><span class="<code-operator">true</span>);
|
|
<span class="code-input-function"> _context</span>.<span class="code-function-name">getFontDefault(</span>).<span class="code-function-name">set(</span><span class="code-text-quote">"FreeSerif;DejaVuSansMono"</span>, <span class="code-number">19</span>);
|
|
|
|
<span class="code-class">std::shared_ptr</span><<span class="code-class">ewol::Windows</span>> basicWindows = <span class="code-class">appl::Windows</span>::<span class="code-function-name">create(</span>);
|
|
<span class="code-comment">// create the specific windows
|
|
</span><span class="code-input-function"> _context</span>.<span class="code-function-name">setWindows(</span>basicWindows);
|
|
<span class="code-function-name">APPL_INFO(</span><span class="code-text-quote">"==> Init APPL (END)"</span>);
|
|
<span class="code-keyword">return </span><span class="<code-operator">true</span>;
|
|
<span class="code-operator">}</span>
|
|
</pre><br/>
|
|
To un-init the application, the context call a generic function <span style="font-weight: bold;">MainApplication::unInit</span>.
|
|
In this function we just need to remove the windows and un-init all needed by the system.
|
|
<pre>
|
|
<span class="code-type">void</span> MainApplication::<span class="code-function-name">unInit(</span><span class="code-class">ewol::Context</span>&<span class="code-input-function"> _context</span>) <span class="code-operator">{</span>
|
|
<span class="code-function-name">APPL_INFO(</span><span class="code-text-quote">"==> Un-Init APPL (START)"</span>);
|
|
<span class="code-comment">// Windows is auto-removed just before
|
|
</span> <span class="code-function-name">APPL_INFO(</span><span class="code-text-quote">"==> Un-Init APPL (END)"</span>);
|
|
<span class="code-operator">}</span>
|
|
</pre><br/>
|
|
|
|
<br/>
|
|
<b>Note:</b><pre>
|
|
You can use many windows and select the one you want to display, but I do not think it is the best design.
|
|
</pre><br/>
|
|
<h2> Build declaration: </h2><br/>
|
|
ewol commonly use the <span style="font-weight: bold;">lutin.py</span> build system.<br/>
|
|
Then we need to add a "lutin_YourApplicationName.py", then for this example: <span style="font-weight: bold;">lutin_001_HelloWord.py</span><br/>
|
|
|
|
<pre>
|
|
#!/usr/bin/python
|
|
import lutinModule as module
|
|
import lutinTools as tools<br/>
|
|
# optionnal : Describe in the "lutin.py --help"
|
|
def get_desc():
|
|
return "Tutorial 001 : Hello Word"<br/>
|
|
# Module creation instance (not optionnal)
|
|
def create(target):
|
|
# module name is '001_HelloWord' and type binary.
|
|
myModule = module.Module(__file__, '001_HelloWord', 'BINARY')
|
|
# add the file to compile:
|
|
myModule.add_src_file([
|
|
'appl/Main.cpp',
|
|
'appl/debug.cpp',
|
|
'appl/Windows.cpp',
|
|
])
|
|
# add Library dependency name
|
|
myModule.add_module_depend(['ewol'])
|
|
# add application C flags
|
|
myModule.compile_flags_CC([
|
|
"-DPROJECT_NAME=\"\\\""+myModule.name+"\\\"\""])
|
|
# Add current include Path
|
|
myModule.add_path(tools.get_current_path(__file__))
|
|
return the created module
|
|
return myModule
|
|
</pre><br/>
|
|
show lutin doc for more information...<br/>
|
|
<br/>
|
|
<b>Note:</b><pre>
|
|
I do not explain again the lutin file, for next tutorial, show example sources ...
|
|
</pre><br/>
|
|
<h2> Build your application </h2><br/>
|
|
Go to your workspace folder and launch
|
|
<pre>
|
|
./ewol/build/lutin.py -C -mdebug 001_HelloWord
|
|
</pre><br/>
|
|
Your program example will build correctly...<br/>
|
|
Launch it :
|
|
<pre>
|
|
./out/Linux/debug/staging/gcc/001_HelloWord/usr/bin/001_HelloWord -l6
|
|
</pre><br/>
|
|
The <span style="font-weight: bold;">-l6</span> is used to specify the Log level of the application display (this log is synchronous)<br/>
|
|
|
|
The output compile in a separate folder depending on the compilation tool (gcc or clang) <br/>
|
|
|
|
It create a complete final tree in the ./out/Linux/debug/staging/gcc/001_HelloWord/ folder<br/>
|
|
|
|
The final folder contain the package generated:
|
|
<ul><li> out</li><ul><li> MacOs</li><li> Android</li><li> Windows</li><li> ...</li><li> Linux</li><ul><li> release</li><li> debug</li><ul><li> build</li><ul><li> clang</li><li> gcc</li><ul><li> ewol</li><li> exml</li><li> ejson</li><li> 001_HelloWord</li><li> ...</li></ul></ul><li> staging</li><ul><li> clang</li><li> gcc</li><ul><li> 001_HelloWord</li><ul><li> usr</li><ul><li> bin</li><li> share</li></ul></ul></ul></ul><li> final</li><ul><li> 001_HelloWord.deb</li></ul></ul></ul></ul></ul>
|
|
</div>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-46753803-1', 'heeroyui.github.io');
|
|
ga('send', 'pageview');
|
|
</script>
|
|
</body>
|
|
</html>
|