278 lines
17 KiB
HTML
278 lines
17 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>ewol Library</h1>
|
|
<div id="menu">
|
|
<h2>ewol</h2>
|
|
<ul class="niveau1">
|
|
<li class="sousmenu"><a>compositing</a>
|
|
<ul class="niveau2">
|
|
<li><a href="ewol__Compositing.html">Compositing</a></li>
|
|
<li><a href="ewol__compositing__Area.html">Area</a></li>
|
|
<li><a href="ewol__compositing__Drawing.html">Drawing</a></li>
|
|
<li><a href="ewol__compositing__Image.html">Image</a></li>
|
|
<li><a href="ewol__compositing__Shaper.html">Shaper</a></li>
|
|
<li><a href="ewol__compositing__Sprite.html">Sprite</a></li>
|
|
<li><a href="ewol__compositing__Text.html">Text</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="sousmenu"><a>context</a>
|
|
<ul class="niveau2">
|
|
<li><a href="ewol__Context.html">Context</a></li>
|
|
<li><a href="ewol__context__CommandLine.html">CommandLine</a></li>
|
|
<li><a href="ewol__context__ConfigFont.html">ConfigFont</a></li>
|
|
<li><a href="ewol__context__InputManager.html">InputManager</a></li>
|
|
<li class="sousmenu"><a href="ewol__context__clipBoard.html">clipBoard</a>
|
|
<ul class="niveau3">
|
|
<li><a href="ewol__context__clipBoard.html::clipboardListe">clipboardListe</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="ewol__context__cursorDisplay.html">cursorDisplay</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="sousmenu"><a>event</a>
|
|
<ul class="niveau2">
|
|
<li><a href="ewol__event__Entry.html">Entry</a></li>
|
|
<li><a href="ewol__event__EntrySystem.html">EntrySystem</a></li>
|
|
<li><a href="ewol__event__Input.html">Input</a></li>
|
|
<li><a href="ewol__event__InputSystem.html">InputSystem</a></li>
|
|
<li><a href="ewol__event__Time.html">Time</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="sousmenu"><a>key</a>
|
|
<ul class="niveau2">
|
|
<li><a href="ewol__key__Special.html">Special</a></li>
|
|
<li><a href="ewol__key__keyboard.html">keyboard</a></li>
|
|
<li><a href="ewol__key__status.html">status</a></li>
|
|
<li><a href="ewol__key__type.html">type</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="sousmenu"><a>object</a>
|
|
<ul class="niveau2">
|
|
<li><a href="ewol__Object.html">Object</a></li>
|
|
<li><a href="ewol__object__Config.html">Config</a></li>
|
|
<li><a href="ewol__object__ConfigElement.html">ConfigElement</a></li>
|
|
<li><a href="ewol__object__Manager.html">Manager</a></li>
|
|
<li><a href="ewol__object__Message.html">Message</a></li>
|
|
<li class="sousmenu"><a href="ewol__object__MultiCast.html">MultiCast</a>
|
|
<ul class="niveau3">
|
|
<li><a href="ewol__object__MultiCast.html::MessageList">MessageList</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="sousmenu"><a>openGL</a>
|
|
<ul class="niveau2">
|
|
<li><a href="ewol__openGL__openGlFlags.html">openGlFlags</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="sousmenu"><a>resource</a>
|
|
<ul class="niveau2">
|
|
<li><a href="ewol__Resource.html">Resource</a></li>
|
|
<li><a href="ewol__resource__Colored3DObject.html">Colored3DObject</a></li>
|
|
<li><a href="ewol__resource__ConfigFile.html">ConfigFile</a></li>
|
|
<li><a href="ewol__resource__FontBase.html">FontBase</a></li>
|
|
<li><a href="ewol__resource__FontFreeType.html">FontFreeType</a></li>
|
|
<li><a href="ewol__resource__Manager.html">Manager</a></li>
|
|
<li><a href="ewol__resource__Program.html">Program</a></li>
|
|
<li><a href="ewol__resource__Shader.html">Shader</a></li>
|
|
<li><a href="ewol__resource__Texture.html">Texture</a></li>
|
|
<li><a href="ewol__resource__TextureFile.html">TextureFile</a></li>
|
|
<li><a href="ewol__resource__TexturedFont.html">TexturedFont</a></li>
|
|
<li><a href="ewol__resource__VirtualBufferObject.html">VirtualBufferObject</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="sousmenu"><a>widget</a>
|
|
<ul class="niveau2">
|
|
<li><a href="ewol__Widget.html">Widget</a></li>
|
|
<li><a href="ewol__widget__Button.html">Button</a></li>
|
|
<li><a href="ewol__widget__ButtonColor.html">ButtonColor</a></li>
|
|
<li><a href="ewol__widget__CheckBox.html">CheckBox</a></li>
|
|
<li><a href="ewol__widget__ColorBar.html">ColorBar</a></li>
|
|
<li><a href="ewol__widget__ColorChooser.html">ColorChooser</a></li>
|
|
<li><a href="ewol__widget__Composer.html">Composer</a></li>
|
|
<li><a href="ewol__widget__Container.html">Container</a></li>
|
|
<li><a href="ewol__widget__ContainerN.html">ContainerN</a></li>
|
|
<li><a href="ewol__widget__ContextMenu.html">ContextMenu</a></li>
|
|
<li><a href="ewol__widget__Entry.html">Entry</a></li>
|
|
<li><a href="ewol__widget__FileChooser.html">FileChooser</a></li>
|
|
<li class="sousmenu"><a href="ewol__widget__Gird.html">Gird</a>
|
|
<ul class="niveau3">
|
|
<li><a href="ewol__widget__Gird.html::GirdProperties">GirdProperties</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="ewol__widget__Image.html">Image</a></li>
|
|
<li><a href="ewol__widget__Joystick.html">Joystick</a></li>
|
|
<li><a href="ewol__widget__Label.html">Label</a></li>
|
|
<li><a href="ewol__widget__Layer.html">Layer</a></li>
|
|
<li><a href="ewol__widget__List.html">List</a></li>
|
|
<li><a href="ewol__widget__ListFileSystem.html">ListFileSystem</a></li>
|
|
<li><a href="ewol__widget__Manager.html">Manager</a></li>
|
|
<li><a href="ewol__widget__Menu.html">Menu</a></li>
|
|
<li><a href="ewol__widget__MenuElement.html">MenuElement</a></li>
|
|
<li><a href="ewol__widget__Parameter.html">Parameter</a></li>
|
|
<li><a href="ewol__widget__ParameterList.html">ParameterList</a></li>
|
|
<li><a href="ewol__widget__PopUp.html">PopUp</a></li>
|
|
<li><a href="ewol__widget__ProgressBar.html">ProgressBar</a></li>
|
|
<li><a href="ewol__widget__Scroll.html">Scroll</a></li>
|
|
<li><a href="ewol__widget__Sizer.html">Sizer</a></li>
|
|
<li><a href="ewol__widget__Slider.html">Slider</a></li>
|
|
<li><a href="ewol__widget__Spacer.html">Spacer</a></li>
|
|
<li><a href="ewol__widget__StdPopUp.html">StdPopUp</a></li>
|
|
<li><a href="ewol__widget__WSlider.html">WSlider</a></li>
|
|
<li><a href="ewol__widget__WidgetScrooled.html">WidgetScrooled</a></li>
|
|
<li><a href="ewol__widget__Windows.html">Windows</a></li>
|
|
<li><a href="ewol__widget__elementPL.html">elementPL</a></li>
|
|
</ul>
|
|
</li>
|
|
<ul>
|
|
<h3> </h3>
|
|
</div>
|
|
</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>
|
|
[note] The xml parser is a little strict on the case and end node, but it support to not have a main node.[/note]<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>
|
|
</body>
|
|
</html>
|