119 lines
5.9 KiB
HTML
119 lines
5.9 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>create custom widget</center></h1>
|
|
<hr><div align="left"><a href="tutorial_030_ConplexeXmlGui.html">Previous: Conplexe xml gui</a></div> <div align="right"><a href="tutorial_051_AddWidgetCustumInXML.html">Next: Add widget custum in x m l</a></div>
|
|
|
|
To create a custum widget, this is as simple as complex.
|
|
The first things to do is to choice a methode to display you widget:
|
|
<ul><li> <span style="font-weight: bold;">Direct mode:</span> display on openGL engine with your prefered methode (some help for shaders)</li><li> <span style="font-weight: bold;">Compositing:</span> display with a toolbox for drawing on openGL</li><li> <span style="font-weight: bold;">Shaper:</span> this is a special mode of compositing</li><li> <span style="font-weight: bold;">Add capacity:</span> this could be interesting to increase some capacity of a widget...</li></ul>
|
|
<h1>Create the widget structure</h1>
|
|
<h2>Header</h2>
|
|
<pre>
|
|
<span class="code-preproc">#include <ewol/widget/Widget.h>
|
|
</span> namespace appl <span class="code-operator">{</span>
|
|
<span class="code-storage-keyword">class</span> myWidget : <span class="code-storage-keyword">public</span> <span class="code-class">ewol::Widget</span> <span class="code-operator">{</span>
|
|
<span class="code-storage-keyword">public</span>:
|
|
<span class="code-function-name">myWidget(</span><span class="code-type">void</span>) <span class="code-operator">{</span><span class="code-operator">}</span>;
|
|
~<span class="code-function-name">myWidget(</span><span class="code-type">void</span>) <span class="code-operator">{</span><span class="code-operator">}</span>;
|
|
<span class="code-storage-keyword">public</span>: <span class="code-comment">// herited function
|
|
</span> <span class="code-type">void</span> <span class="code-function-name">draw(</span><span class="code-type">void</span>);
|
|
<span class="code-type">void</span> <span class="code-function-name">onRegenerateDisplay(</span><span class="code-type">void</span>);
|
|
<span class="code-operator">}</span>
|
|
<span class="code-operator">}</span>
|
|
</pre><br/>
|
|
We can show that we had two function, the first is call every time we render the widget (as the number of fps) "draw()".
|
|
And the second that is call only when we need to redraw the widget (after the user call markToRedraw() ) "onRegenerateDisplay()".<br/>
|
|
<br/>
|
|
<br/>
|
|
</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>
|