227 lines
13 KiB
HTML
227 lines
13 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__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 class="sousmenu"><a href="namespace_ewol__audio.html">audio</a>
|
|
<ul class="niveau3">
|
|
<li><a href="namespace_ewol__audio__wav.html">wav</a>
|
|
</li>
|
|
<li><a href="namespace_ewol__audio__music.html">music</a>
|
|
</li>
|
|
<li><a href="namespace_ewol__audio__effects.html">effects</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="namespace_ewol__portAudio.html">portAudio</a>
|
|
</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>
|
|
</ul>
|
|
</div>
|
|
<h3>Documentation:</h3><div id="menu">
|
|
<ul class="niveau1"><li><a href="001_bases.html">bases</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">HelloWord</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> Tutorial 1: Hello Word </center></h1>
|
|
<hr><div align="left"><a href="tutorial_000_Build.html">Previous: Download & Build</a></div> <div align="right"><a href="tutorial_002_HelloWord.html">Next: Hello Word</a></div><br/>
|
|
<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> Main Windows: </h3><br/>
|
|
<h3> Application "main()": </h3><br/>
|
|
<h2> Build declaration: </h2><br/>
|
|
|
|
<h2> Build your application </h2><br/>
|
|
<br/>
|
|
In all the application we need to have a main, for some reason this main is stored by the application and only call the EWOL 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>argc, argv);
|
|
<span class="code-operator">}</span>
|
|
</pre><br/>
|
|
Then the first question, is where is the input of the application:<br/>
|
|
<pre>
|
|
<span class="code-comment">// application start:
|
|
</span> <span class="code-type">bool</span> <span class="code-function-name">APP_Init(</span><span class="code-class">ewol::Context</span>&<span class="code-input-function"> _context</span>) <span class="code-operator">{</span>
|
|
<span class="code-keyword">return </span><span class="<code-operator">true</span>;
|
|
<span class="code-operator">}</span>
|
|
<span class="code-comment">// application stop:
|
|
</span> <span class="code-type">void</span> <span class="code-function-name">APP_UnInit(</span><span class="code-class">ewol::Context</span>&<span class="code-input-function"> _context</span>) <span class="code-operator">{</span>
|
|
<span class="code-operator">}</span>
|
|
</pre><br/>
|
|
The input <a href="ewol__eContext.html">ewol::eContext</a> is the main application context.
|
|
All the application globals have a reference in this element.
|
|
It is important to note that the system can call you some time in parallele, the basic exemple of this is the Wallpaper on Android.
|
|
When selected, it create an intance and when it is apply Android create a new instance and remove the previous one...<br/>
|
|
<br/>
|
|
Now we will create some generic property:<br/>
|
|
In first: set the font availlagle on the global font property (system font).
|
|
This can be a problem when you designe an application for some other operating system (OS), They do not have the same default font.
|
|
and we select an order to search the font names and the system basic size.
|
|
<pre>
|
|
<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>);
|
|
</pre><br/>
|
|
|
|
In second: we will create a windows.<br/>
|
|
For this point we will create a class that herited form the basic windows 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">public</span>:
|
|
<span class="code-function-name">Windows(</span><span class="code-type">void</span>);
|
|
<span class="code-storage-keyword">public</span>:
|
|
<span class="code-operator">}</span>;
|
|
<span class="code-operator">}</span>;
|
|
<span class="code-preproc">#endif
|
|
</span></pre><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-function-name">setTitle(</span><span class="code-text-quote">"example 001_HelloWord"</span>);
|
|
<span class="code-class">ewol::widget::Label</span>* tmpWidget = <span class="code-function-system">new </span><span class="code-class">ewol::widget</span>::<span class="code-function-name">Label(</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 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="widget__Label.html">widget::Label</a> in the main windows constructor.
|
|
And we set the widget property (label).
|
|
<pre>
|
|
<span class="code-class">ewol::widget::Label</span>* tmpWidget = <span class="code-function-system">new </span><span class="code-class">ewol::widget</span>::<span class="code-function-name">Label(</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 se 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, the 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, but it support to not have a main node.</pre><br/>
|
|
|
|
The last step is to add the widget on the windows :
|
|
<pre>
|
|
<span class="code-function-name">setSubWidget(</span>tmpWidget);
|
|
</pre><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 APPL_init()):
|
|
<pre>
|
|
<span class="code-class">ewol::Windows</span>* basicWindows = <span class="code-function-system">new </span>appl::<span class="code-function-name">Windows(</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><br/>
|
|
|
|
Then the init fuction is :
|
|
<pre>
|
|
<span class="code-type">bool</span> <span class="code-function-name">APP_Init(</span><span class="code-class">ewol::Context</span>&<span class="code-input-function"> _context</span>) <span class="code-operator">{</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">ewol::Windows</span>* basicWindows = <span class="code-function-system">new </span>appl::<span class="code-function-name">Windows(</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-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;">APP_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> <span class="code-function-name">APP_UnInit(</span><span class="code-class">ewol::Context</span>&<span class="code-input-function"> _context</span>) <span class="code-operator">{</span>
|
|
<span class="code-comment">// The main windows will be auto-remove after this call if it is not done...
|
|
</span><span class="code-operator">}</span>
|
|
</pre>
|
|
</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>
|