tag:blogger.com,1999:blog-40674991374693798952024-03-28T00:15:29.369-07:00A simple developer's journeyWe discuss here of .NET, Windows, Xamarin & Flutter Mobile devs, UI / UX, and all related technologies ! Don't hesitate to participate ;)
Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.comBlogger75125tag:blogger.com,1999:blog-4067499137469379895.post-44219691733921954182024-03-07T02:02:00.000-08:002024-03-07T10:00:31.071-08:00Pixyway picture viewer (for Windows)<h4 style="text-align: left;"><span style="font-family: helvetica;">Pixyway picture viewer</span></h4><p>Hello guys,</p><p>today I'm proud to announce you that I have just released a Windows app that I made these lasts months. <b>As almost all computer projects never see the light of day</b>, I decided that one of my goal will be to publish it publicly.</p><p>And today it's done!</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg91GRsrVNHm2N3ms3KEFy1_lFPWhWpA2z8wO07AWMuE-TdvRmeTwEEwAfRRbO_GXYiyEnP-KUef9_G_9DbaeJJJV7QEovZZ8ExzU8CSxx3OOlCkQp88j0NcI9KkaOG0gM3lKAnPB1c525_EFJlay63i8P1E7yq3yAxl6d42HihvFJ12ypreCnAtWtdyC09/s1637/_16_9_screenshot_3.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="pixyway picture viewer for windows - google picasa reborn" border="0" data-original-height="930" data-original-width="1637" height="365" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg91GRsrVNHm2N3ms3KEFy1_lFPWhWpA2z8wO07AWMuE-TdvRmeTwEEwAfRRbO_GXYiyEnP-KUef9_G_9DbaeJJJV7QEovZZ8ExzU8CSxx3OOlCkQp88j0NcI9KkaOG0gM3lKAnPB1c525_EFJlay63i8P1E7yq3yAxl6d42HihvFJ12ypreCnAtWtdyC09/w640-h365/_16_9_screenshot_3.jpg" title="pixyway picture viewer for windows" width="640" /></a></div><p></p><p><br /></p><h4 style="text-align: left;"><span style="font-family: helvetica;">A brief history</span></h4><p>One of my prefered subject is image computing, photography and all the digital arts. I don't know if you remeber the Google software "Picasa" but I used to loved it for its simplicity and efficiency. Nowadays, Picasa is only a warm memory and is no more availble...</p><p><b>The fact is that all software are transferred to the web</b> :( For some it's justified but for a lot of other I still "don't understand" why... This is not the question of the day, but it made decide to implement a real desktop application that could be replace (even a little bit) my loved Google Picasa app :)</p><p>It's how Pixyway viewer is borned !</p><p><span style="color: #fff2cc;"><br /></span></p><h4 style="text-align: left;"><span style="font-family: helvetica;">Pixyway quick description</span></h4><p>With Pixyway you can watch your pictures, start a diaporama with background music, but you can also apply some modifications to your pictures. </p><p>It has a nice modern design and I hope, has an EASY to use user interface. I introduced a (new?) WPF control that I called "Action panel". This is a kind of context menu but in my mind , a lot more convenient and easy to use.</p><p>The goal of Pixyway viewer<b><span style="color: #990000;">, </span><span style="color: red;">is also to evolve thanks to the user feedbacks</span></b>! So don't hesitate to try it and tell what you would like to see!</p><p><br /></p><h4 style="text-align: left;"><span style="font-family: helvetica;">Where to find Pixyway ?</span></h4><p><br /></p><p><a href="https://www.buymeacoffee.com/djooleean/e/220113" target="_blank">Download Pixyway from 'buymeacoffee.com'</a> > hurry up there is a limited number of free downloads :)<br /></p><p><a href="https://pixyway.com" target="_blank">Official website - Pixyway.com</a> where you can find a lot of information about Pixyway<br /></p><p><a href="https://www.facebook.com/pixyway.viewer/" target="_blank">On Facebook too</a> if you want to have the latest news<br /></p><p><br /></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZkDwSYG9uV0Ck7cgr6SsZ00VluSAj_yvtgPL40tGwQJbXRClYK3-BJ0o662_eQ2WQ3HyFupOEh9_JXjD4m7ffQ2SydWQfLUfLeQMUStiuzMFQWdOblglpRCHWH9F10XNp1ij7-UaYDNkpzTjaIbQjLYwOmDSFc6GhH9SAz030xp0bDrToSSR0ASw2JG5/s100/logo-100x100-couleur-fond%20blanc.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="100" data-original-width="100" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZkDwSYG9uV0Ck7cgr6SsZ00VluSAj_yvtgPL40tGwQJbXRClYK3-BJ0o662_eQ2WQ3HyFupOEh9_JXjD4m7ffQ2SydWQfLUfLeQMUStiuzMFQWdOblglpRCHWH9F10XNp1ij7-UaYDNkpzTjaIbQjLYwOmDSFc6GhH9SAz030xp0bDrToSSR0ASw2JG5/s1600/logo-100x100-couleur-fond%20blanc.png" width="100" /></a> </div><div class="separator" style="clear: both; text-align: center;"><span style="font-family: courier;">Pixyway viewer</span></div><br /><p></p><p>Enjoy !</p><p><br /></p><p><br /></p><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-63337960844444257942022-03-09T22:23:00.002-08:002022-03-09T22:23:38.962-08:00[Flutter] Adding background image to your pages<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgvZNdeMizRC6C-Ye_88sqgTtSbW5_vM8OYvbztQSoHSPOMqJprw8CiVWPKTa1UYpJN0VyWl_eXWaKdJtFItH-FStTwOKOs60CxgdD42j91-7llgOxxUL4tHN3GV03dKjKpG86wlPbVwqNE3mMFKUC-f8dEYJssNc4JU8Ze99oWemcP7qTTviCyPec1yw=s1000" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1000" data-original-width="472" height="640" src="https://blogger.googleusercontent.com/img/a/AVvXsEgvZNdeMizRC6C-Ye_88sqgTtSbW5_vM8OYvbztQSoHSPOMqJprw8CiVWPKTa1UYpJN0VyWl_eXWaKdJtFItH-FStTwOKOs60CxgdD42j91-7llgOxxUL4tHN3GV03dKjKpG86wlPbVwqNE3mMFKUC-f8dEYJssNc4JU8Ze99oWemcP7qTTviCyPec1yw=w302-h640" width="302" /></a></div><p>There are many ways to add a background image to your pages, but the <b>most common</b> way is to use a <b>BoxDecoration</b> Widget.</p><p>The <b>BoxDecoration</b> Widget is placed under a parent Container Widget (container.decoration).</p><p>Then, you can customise the Image decoration using Assets images, Network images...</p><p><br /></p><h3 style="text-align: left;">Sample code (with an asset image):</h3><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 14px; line-height: 21px; white-space: pre;"><div> <span style="color: #9cdcfe;">@</span><span style="color: #9cdcfe;">override</span></div><div> <span style="color: #4ec9b0;">Widget</span> <span style="color: #dcdcaa;">build</span>(<span style="color: #4ec9b0;">BuildContext</span> <span style="color: #9cdcfe;">context</span>) {</div><div> <span style="color: #c586c0;">return</span> <span style="color: #4ec9b0;">GetBuilder</span><<span style="color: #4ec9b0;">MainPageController</span>>(</div><div> <span style="color: #9cdcfe;">id</span>: <span style="color: #ce9178;">'mainpage'</span>,</div><div> <span style="color: #9cdcfe;">init</span>: <span style="color: #4ec9b0;">MainPageController</span>(),</div><div> <span style="color: #9cdcfe;">builder</span>: (<span style="color: #9cdcfe;">vm</span>) => <span style="color: #4ec9b0;">Scaffold</span>(</div><div> <span style="color: #9cdcfe;">body</span>: <span style="color: #4ec9b0;">Container</span>(</div><div> <span style="color: #9cdcfe;">width</span>: <span style="color: #4ec9b0;">double</span>.<span style="color: #9cdcfe;">infinity</span>,</div><div> <span style="color: #9cdcfe;">height</span>: <span style="color: #4ec9b0;">double</span>.<span style="color: #9cdcfe;">infinity</span>,</div><div> <span style="color: #9cdcfe;">decoration</span>: <span style="color: #569cd6;">const</span> <span style="color: #4ec9b0;">BoxDecoration</span>(</div><div> <span style="color: #9cdcfe;">image</span>: <span style="color: #4ec9b0;">DecorationImage</span>(</div><div> <span style="color: #9cdcfe;">image</span>: <span style="color: #4ec9b0;">AssetImage</span>(<span style="color: #ce9178;">'assets/images/dark_background2.jpg'</span>),</div><div> <span style="color: #9cdcfe;">fit</span>: <span style="color: #4ec9b0;">BoxFit</span>.<span style="color: #4fc1ff;">fill</span>,</div><div> )),</div><div> <span style="color: #9cdcfe;">child</span>: <span style="color: #4ec9b0;">SafeArea</span>(</div><div> <span style="color: #9cdcfe;">top</span>: <span style="color: #569cd6;">true</span>,</div><div> <span style="color: #9cdcfe;">bottom</span>: <span style="color: #569cd6;">true</span>,</div><div> <span style="color: #9cdcfe;">child</span>: <span style="color: #4ec9b0;">Container</span>(</div><div> </div></div><p><br /></p><p><br /></p><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-41473724662265925552022-03-09T03:37:00.004-08:002022-03-09T03:48:59.579-08:00[Flutter] Get some special directories path<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEggngCg0Ps0PAVjxeSRH18iI0yFNr2r1KpJyQLaGXFOOEsP4j3Dku1B8c2OPnvLcYwBgSs9oqboITL9H-i6Q20E08gt3nKVpwy6n79LyQn4RMqMac4hikFg37saf-PmcpVpn5FlvSoJhRr9G2vDM-5u8kAruILiwvEoWVjBXqasZz2_UvxdvhKjII4gFA=s1242" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="856" data-original-width="1242" height="442" src="https://blogger.googleusercontent.com/img/a/AVvXsEggngCg0Ps0PAVjxeSRH18iI0yFNr2r1KpJyQLaGXFOOEsP4j3Dku1B8c2OPnvLcYwBgSs9oqboITL9H-i6Q20E08gt3nKVpwy6n79LyQn4RMqMac4hikFg37saf-PmcpVpn5FlvSoJhRr9G2vDM-5u8kAruILiwvEoWVjBXqasZz2_UvxdvhKjII4gFA=w640-h442" width="640" /></a></div><br /><p><br /></p><p>I'm sure, if you are a Flutter's developer, that you will need one day to get specific paths, for instance to store files, generate temporary files etc...</p><h2 style="text-align: left;">Path_provider package</h2><p>For that I use the 'path_provider' package that has some helpers methods. For example:</p><p><span class="returntype" face="Roboto, sans-serif" style="background-color: white; box-sizing: inherit; color: #727272; font-size: 17px;"><a href="https://api.dart.dev/stable/2.16.1/dart-async/Future-class.html" style="box-sizing: inherit; color: #0175c2; text-decoration-line: none;">Future</a><span class="signature" style="box-sizing: inherit;"><<wbr style="box-sizing: inherit;"></wbr><span class="type-parameter" style="box-sizing: inherit; white-space: nowrap;"><a href="https://api.dart.dev/stable/2.16.1/dart-io/Directory-class.html" style="box-sizing: inherit; color: #4674a2; text-decoration-line: none;">Directory</a></span>></span></span><span face="Roboto, sans-serif" style="background-color: white; color: #727272; font-size: 17px;"> </span><span class="name" face="Roboto, sans-serif" style="background-color: white; box-sizing: inherit; color: #727272; font-size: 17px;">getApplicationDocumentsDirectory</span><span face="Roboto, sans-serif" style="background-color: white; color: #727272; font-size: 17px;">(</span><wbr style="background-color: white; box-sizing: inherit; color: #727272; font-family: Roboto, sans-serif; font-size: 17px;"></wbr><span face="Roboto, sans-serif" style="background-color: white; color: #727272; font-size: 17px;">)</span></p><p>returns the documents directory.</p><p><br /></p><h3 style="text-align: left;">How to use it ?</h3><pre class="language-dart" style="background-color: #f6f8fa; border-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: inherit; color: #111111; font-size: 13.6px; line-height: 1.45; margin-bottom: 16px; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: 16px;"><code class="language-dart hljs" style="background: transparent; border-radius: 3px; border: 0px; box-sizing: inherit; color: #333333; display: inline; font-family: "Roboto Mono", Menlo, monospace; font-size: 13.6px; line-height: inherit; margin: 0px; overflow-wrap: normal; overflow: visible; padding: 0px; word-break: normal;">Directory tempDir = <span class="hljs-keyword" style="box-sizing: inherit; font-weight: bold;">await</span> getTemporaryDirectory();
<span class="hljs-built_in" style="box-sizing: inherit; color: #0086b3;">String</span> tempPath = tempDir.path;
Directory appDocDir = <span class="hljs-keyword" style="box-sizing: inherit; font-weight: bold;">await</span> getApplicationDocumentsDirectory();
<span class="hljs-built_in" style="box-sizing: inherit; color: #0086b3;">String</span> appDocPath = appDocDir.path;</code></pre><p><br /></p><h3 style="text-align: left;">Follow the links:</h3><p>Package: <a href="https://pub.dev/packages/path_provider">https://pub.dev/packages/path_provider</a></p><p>Package's documentation: <a href="https://pub.dev/documentation/path_provider/latest/index.html">https://pub.dev/documentation/path_provider/latest/index.html</a></p><p><br /></p><p><br /></p><p><br /></p><p><br /></p><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-21318962076880246932022-03-06T22:40:00.002-08:002022-03-06T22:48:22.444-08:00[Flutter] Translations, internationalisation with GetX package<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgQwPbgszz7Yg8XI1APK8Htzto8MOiRCMpeMmZ9RQJuomFZJPkKXsrXq43ucQ6oruMxNteEZbvEylmKMc2Qc9-w1SnXX4TYhkl9avkE-vhQX4EtIa_CQIIdwaT_SS4MSkz5p5mOrfD-QIOYhP1kqenBTB5BILL4_oWecceJ-i2nZFNGdkbhDuIQfROi4w=s700" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="332" data-original-width="700" height="304" src="https://blogger.googleusercontent.com/img/a/AVvXsEgQwPbgszz7Yg8XI1APK8Htzto8MOiRCMpeMmZ9RQJuomFZJPkKXsrXq43ucQ6oruMxNteEZbvEylmKMc2Qc9-w1SnXX4TYhkl9avkE-vhQX4EtIa_CQIIdwaT_SS4MSkz5p5mOrfD-QIOYhP1kqenBTB5BILL4_oWecceJ-i2nZFNGdkbhDuIQfROi4w=w640-h304" width="640" /></a></div><p>As applications are actually spread around the world, a common task to implement when developing your app (mobile, web or desktop), is to setup a <b>multi-language option</b>. </p><p>In Flutter, it can be done easily with the <b>GetX</b> Package (a useful package that provides a lot more services ! You should take a look if you don't know this package: <a href="https://pub.dev/packages/get#internationalization">GetX package on pub.dev</a>.</p><p>The implementation steps are the following:</p><p><br /></p><h2 style="text-align: left;">1-Add GetX package to your solution</h2><p>You can do it the traditional way you like. For instance with "Pub Assist" extension:</p><p>Shift+CMD+P > Pub asssist: add/upgrade > get</p><p><br /></p><h2 style="text-align: left;">2-Use a GetMaterialApp</h2><p>Important step, do not forget to use the GetMaterialApp classe instead of Flutter's MaterialApp:</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 14px; line-height: 21px; white-space: pre;"><div><span style="color: #9cdcfe;">@</span><span style="color: #9cdcfe;">override</span></div><div> <span style="color: #4ec9b0;">Widget</span> <span style="color: #dcdcaa;">build</span>(<span style="color: #4ec9b0;">BuildContext</span> <span style="color: #9cdcfe;">context</span>) {</div><div> <span style="color: #c586c0;">return</span> <span style="color: #4ec9b0;">GetMaterialApp</span>(</div><div> </div></div><p><br /></p><h2 style="text-align: left;">3-Add a translation file</h2><p>Next you have to add a class that will embed all your strings declaration / translations. This class must extends the GetX's Translation class. Here is an example:</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 14px; line-height: 21px; white-space: pre;"><div><span style="color: #569cd6;">class</span> <span style="color: #4ec9b0;">AppTranslations</span> <span style="color: #569cd6;">extends</span> <span style="color: #4ec9b0;">Translations</span> {</div><div> <span style="color: #9cdcfe;">@</span><span style="color: #9cdcfe;">override</span></div><div> <span style="color: #4ec9b0;">Map</span><<span style="color: #4ec9b0;">String</span>, <span style="color: #4ec9b0;">Map</span><<span style="color: #4ec9b0;">String</span>, <span style="color: #4ec9b0;">String</span>>> <span style="color: #569cd6;">get</span> <span style="color: #9cdcfe;">keys</span> => {</div><div> <span style="color: #6a9955;">// --------- ENGLISH ----------</span></div><div> <span style="color: #ce9178;">'en'</span>: {</div><div> <span style="color: #ce9178;">'Title'</span>: <span style="color: #ce9178;">'My title (EN)'</span>,</div><div> <span style="color: #ce9178;">'CustomMsg'</span>: <span style="color: #ce9178;">"This is an english message"</span>,</div><div> },</div><div> <span style="color: #6a9955;">// --------- FRENCH ----------</span></div><div> <span style="color: #ce9178;">'fr_FR'</span>: {</div><div> <span style="color: #ce9178;">'Title'</span>: <span style="color: #ce9178;">'Mon titre (FR)'</span>,</div><div> <span style="color: #ce9178;">'CustomMsg'</span>: <span style="color: #ce9178;">"C'est un message en FR"</span>,</div><div> }</div><div> };</div><div>}</div></div><p>The class contains a map of Language, List of translations <key: translation>.</p><p><br /></p><h2 style="text-align: left;">4-Setup the localisation in your GetMaterialApp</h2><p>Some localisation's parameters are available from the GetMaterialApp class. This is where you have to link the app with your own translation class:</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 14px; line-height: 21px; white-space: pre;"><div> <span style="color: #9cdcfe;">@</span><span style="color: #9cdcfe;">override</span></div><div> <span style="color: #4ec9b0;">Widget</span> <span style="color: #dcdcaa;">build</span>(<span style="color: #4ec9b0;">BuildContext</span> <span style="color: #9cdcfe;">context</span>) {</div><div> <span style="color: #c586c0;">return</span> <span style="color: #4ec9b0;">GetMaterialApp</span>(</div><div> <span style="color: #6a9955;">// !! GetMaterialApp</span></div><div> <span style="color: #9cdcfe;">translations</span>: <span style="color: #4ec9b0;">AppTranslations</span>(), // <------ set your app translation class</div><div> <span style="color: #9cdcfe;">fallbackLocale</span>: <span style="color: #569cd6;">const</span> <span style="color: #4ec9b0;">Locale</span>(<span style="color: #ce9178;">'en'</span>),</div><div> <span style="color: #9cdcfe;">locale</span>: <span style="color: #9cdcfe;">Get</span>.<span style="color: #9cdcfe;">deviceLocale</span>, <span style="color: #6a9955;">//const Locale('fr'),</span></div><div></div></div><p>You can notice the GetX helper:</p><p>- <b><span style="color: #2b00fe;">Get.deviceLocale</span></b> => returns the current system Locale object</p><p><br /></p><h2 style="text-align: left;">5-Use translations in your code</h2><p>> for a simple translation, use '.tr' property:</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 14px; line-height: 21px; white-space: pre;"><span style="color: #9cdcfe;">title</span>: <span style="color: #ce9178;">'Title'</span>.<span style="color: #9cdcfe;">tr</span>,</div><p>> for a translation with parameters</p><pre style="background: rgb(245, 245, 247); border-radius: 3px; box-sizing: border-box; color: #4a4a4a; font-size: 13.6px; line-height: 1.2; margin-bottom: 16px; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: 30px;"><code class="language-dart hljs" style="background: transparent; border-radius: 0px; border: 0px; box-sizing: border-box; color: #333333; display: inline-block; font-family: "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; font-size: 13.6px; line-height: inherit; margin: 0px; overflow-wrap: normal; overflow: visible; padding: 0px; word-break: normal;"><span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">import</span> <span class="hljs-string" style="box-sizing: border-box; color: #dd1144;">'package:get/get.dart'</span>;
<span class="hljs-built_in" style="box-sizing: border-box; color: #0086b3;">Map</span><<span class="hljs-built_in" style="box-sizing: border-box; color: #0086b3;">String</span>, <span class="hljs-built_in" style="box-sizing: border-box; color: #0086b3;">Map</span><<span class="hljs-built_in" style="box-sizing: border-box; color: #0086b3;">String</span>, <span class="hljs-built_in" style="box-sizing: border-box; color: #0086b3;">String</span>>> <span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">get</span> keys => {
<span class="hljs-string" style="box-sizing: border-box; color: #dd1144;">'en_US'</span>: {
<span class="hljs-string" style="box-sizing: border-box; color: #dd1144;">'logged_in'</span>: <span class="hljs-string" style="box-sizing: border-box; color: #dd1144;">'logged in as @name with email @email'</span>,
},
<span class="hljs-string" style="box-sizing: border-box; color: #dd1144;">'es_ES'</span>: {
<span class="hljs-string" style="box-sizing: border-box; color: #dd1144;">'logged_in'</span>: <span class="hljs-string" style="box-sizing: border-box; color: #dd1144;">'iniciado sesiĆ³n como @name con e-mail @email'</span>,
}
};
Text(<span class="hljs-string" style="box-sizing: border-box; color: #dd1144;">'logged_in'</span>.trParams({
<span class="hljs-string" style="box-sizing: border-box; color: #dd1144;">'name'</span>: <span class="hljs-string" style="box-sizing: border-box; color: #dd1144;">'Jhon'</span>,
<span class="hljs-string" style="box-sizing: border-box; color: #dd1144;">'email'</span>: <span class="hljs-string" style="box-sizing: border-box; color: #dd1144;">'jhon@example.com'</span>
}));</code></pre><p><br /></p><p>Take a look at the official documentation:</p><p><a href="https://pub.dev/packages/get#using-translations">https://pub.dev/packages/get#using-translations</a></p><p><br /></p><p><br /></p><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-71073824409362183112022-03-06T21:55:00.004-08:002022-03-08T05:12:26.992-08:00[Flutter] Useful commands and tips<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEijmXxb0BG_2Y9D-s-SXy_Ckk33BHoQWEw6WaAQDIqrokH04KeH2XJ_oPwXBM-okr6nSS-cgP9QzVHsz49-copGeL_hijS8CKXLS6tlIi-tL7SAMnRNWZikFTEjPi3YYymt3DBhDWwEHwVpuL0rTFramsJxQFVDS_YLSKAjerTM7YwskVIMatBWTRDMWg=s700" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="332" data-original-width="700" height="304" src="https://blogger.googleusercontent.com/img/a/AVvXsEijmXxb0BG_2Y9D-s-SXy_Ckk33BHoQWEw6WaAQDIqrokH04KeH2XJ_oPwXBM-okr6nSS-cgP9QzVHsz49-copGeL_hijS8CKXLS6tlIi-tL7SAMnRNWZikFTEjPi3YYymt3DBhDWwEHwVpuL0rTFramsJxQFVDS_YLSKAjerTM7YwskVIMatBWTRDMWg=w640-h304" width="640" /></a></div><br /><div style="text-align: left;"><br /></div><div style="text-align: left;">Here is a list of useful Flutter's commands / tips when you start developing with (in progress...).</div><div>(<span style="color: #990000;">To find a topic try to search a keyword on this webpage... will be updated through time</span>)</div><h3 style="text-align: left;">Create a new project in visual Studio Code</h3><p>> <span style="background-color: #f4f2f2; color: #333333; font-family: monospace; font-size: 14px; white-space: pre-wrap;">CMD + Shift + P to display action palette</span></p><p>> <span style="background-color: #f4f2f2; color: #333333; font-family: monospace; font-size: 14px; white-space: pre-wrap;">flutter: New project</span></p><p><br /></p><h3 style="text-align: left;">Update Flutter to the latest version</h3><p>> <span style="background-color: #f4f2f2; color: #333333; font-family: monospace; font-size: 14px; white-space: pre-wrap;">flutter upgrade</span></p><p><br /></p><h3 style="text-align: left;">Check actual Flutter version</h3><p>> <span style="background-color: #f4f2f2; color: #333333; font-family: monospace; font-size: 14px; white-space: pre-wrap;">flutter --version</span></p><p><br /></p><h3 style="text-align: left;">Flutter change of (git) channel (master, dev, beta stable)</h3><p>> <span style="background-color: #f4f2f2; color: #333333; font-family: monospace; font-size: 14px; white-space: pre-wrap;">flutter channel beta</span></p><p><span style="background-color: #f4f2f2; color: #333333; font-family: monospace; font-size: 14px; white-space: pre-wrap;">> flutter channel master</span></p><p><span style="background-color: #f4f2f2; color: #333333; font-family: monospace; font-size: 14px; white-space: pre-wrap;">> flutter pub cache repair </span><span color="var(--highlight-color)" style="font-family: inherit; font-size: 13px; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit; white-space: inherit;">//To perform a clean reinstall of the packages in your system cache, use pub cache repair</span></p><p><span style="background-color: #f4f2f2; color: #333333; font-family: monospace; font-size: 14px; white-space: pre-wrap;">> flutter clean </span><span color="var(--highlight-color)" style="font-family: inherit; font-size: 13px; font-style: inherit; font-variant-caps: inherit; font-variant-ligatures: inherit; font-weight: inherit; white-space: inherit;">//flutter clean will delete the /build folder</span></p><p><br /></p><h3 style="text-align: left;">Activate / Deactivate web support for a project</h3><p>> <span style="background-color: #f4f2f2; color: #333333; font-family: monospace; font-size: 14px; white-space: pre-wrap;">flutter config --no-enable-web</span></p><p><span style="background-color: #f4f2f2; color: #333333; font-family: monospace; font-size: 14px; white-space: pre-wrap;"><span style="color: black; font-family: Times; font-size: medium; white-space: normal;">> </span><span style="color: #333333; font-family: monospace;">flutter config --enable-web</span></span></p><p><br /></p><h3 style="text-align: left;">Disable "debug banner" (MaterialApp's debugShowCheckedModeBanner)</h3><p><span style="background-color: #f4f2f2; color: #333333; font-family: monospace; font-size: 14px; white-space: pre-wrap;"></span></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 14px; line-height: 21px; white-space: pre;"><div> <span style="color: #6a9955;">// This widget is the root of your application.</span></div><div> <span style="color: #9cdcfe;">@</span><span style="color: #9cdcfe;">override</span></div><div> <span style="color: #4ec9b0;">Widget</span> <span style="color: #dcdcaa;">build</span>(<span style="color: #4ec9b0;">BuildContext</span> <span style="color: #9cdcfe;">context</span>) {</div><div> <span style="color: #c586c0;">return</span> <span style="color: #4ec9b0;">MaterialApp</span>(</div><div> <span style="color: #9cdcfe;">debugShowCheckedModeBanner</span>: <span style="color: #569cd6;">false</span>,</div></div><p><br /></p><h3 style="text-align: left;">Using SafeArea (is simple !)</h3><p>In your Widget, just use the SafeArea Widget as child:</p><div style="background-color: #1e1e1e; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 14px; line-height: 21px; white-space: pre;"><div style="color: #d4d4d4;"><span style="color: #9cdcfe;">builder</span>: (<span style="color: #9cdcfe;">vm</span>) {</div><div style="color: #d4d4d4;"> <span style="color: #c586c0;">return</span> <span style="color: #4ec9b0;">SafeArea</span>(</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">top</span>: <span style="color: #569cd6;">true</span>,</div><div style="color: #d4d4d4;"> <span style="color: #9cdcfe;">bottom</span>: <span style="color: #569cd6;">true</span>,</div><div><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">...</span></div></div><p><br /></p><p><br /></p><p><br /></p><p> </p><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-68004120514326799052022-03-03T02:42:00.007-08:002022-03-03T03:33:02.551-08:00[Flutter] Splashscreen (native way)<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhSfKBC5Kr926ZFk7qhz_Upknqbie4RPmkD4BmeTmtwicJkQXxA-s4Rr_nQCJybfpum5tgaNY_ZpxcYA29xIS9-nkRvP86Rezwn6jwilCCYYjU8HvvUc_KhmKLlDg2A_VtT0ZoT8AyAhMwt12pxHwKH76xLMkP2dCxcxyM6oOLMAic7eXM3jJwsXUAjLQ=s1686" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="flutter_native_splash" border="0" data-original-height="1494" data-original-width="1686" height="568" src="https://blogger.googleusercontent.com/img/a/AVvXsEhSfKBC5Kr926ZFk7qhz_Upknqbie4RPmkD4BmeTmtwicJkQXxA-s4Rr_nQCJybfpum5tgaNY_ZpxcYA29xIS9-nkRvP86Rezwn6jwilCCYYjU8HvvUc_KhmKLlDg2A_VtT0ZoT8AyAhMwt12pxHwKH76xLMkP2dCxcxyM6oOLMAic7eXM3jJwsXUAjLQ=w640-h568" title="flutter_native_splash package" width="640" /></a></div><p><br /></p>The splash screen is the first screen you see when you start your app.<p></p><p>- you can display your logo for instance</p><p>- and while the splash screen is shown, your application is loaded (like user data, business data...)</p><p>In this example we will use <b><span style="color: #2b00fe;">flutter_native_splash</span></b> package.</p><p><br /></p><h3 style="text-align: left;"><span style="color: red;">I- Package: flutter_native_splash (for native splash screen)</span></h3><p>In your "<b>pubspec.yaml</b>" file you have to add the correct dependency, here at less version 2.0.5</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 14px; line-height: 21px; white-space: pre;"><div><span style="color: #6a9955;"># Dependencies specify other packages that your package needs in order to work.</span></div><div><span style="color: #6a9955;"># To automatically upgrade your package dependencies to the latest versions</span></div><div><span style="color: #6a9955;"># consider running `flutter pub upgrade --major-versions`. Alternatively,</span></div><div><span style="color: #6a9955;"># dependencies can be manually updated by changing the version numbers below to</span></div><div><span style="color: #6a9955;"># the latest version available on pub.dev. To see which dependencies have newer</span></div><div><span style="color: #6a9955;"># versions available, run `flutter pub outdated`.</span></div><div><span style="color: #569cd6;">dependencies</span>:</div><div> <span style="color: #569cd6;">flutter</span>:</div><div> <span style="color: #569cd6;">sdk</span>: <span style="color: #ce9178;">flutter</span></div><div> <span style="color: #569cd6;">flutter_native_splash</span>: <span style="color: #ce9178;">^2.0.5</span></div><div><br /></div></div><p><br /></p><h4 style="text-align: left;"><b>hint</b>: Pubspec Assist extension</h4><p>To automatically add a package to your project, you can use the extension "Pubspec Assist":</p><p>In Visual studio Code, install this extension:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgwUyqj2WN19jxefWqi5eV9T-tgiP4TW2xLWFYBskkO4QXCLPAwQeHPkyrse_7U-LcZWnJECBummnd5pbqdY3DZEQGz0fL7QrOqIKEOQ_GQU2AV6BEmMxtibNhPnEjI2Yhx66xgiBUvI7QhknABnePVyLpYYE7b6n6Cu-f4iNqjDdSY2fVE_rqlxw5HNw=s1280" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="801" data-original-width="1280" height="400" src="https://blogger.googleusercontent.com/img/a/AVvXsEgwUyqj2WN19jxefWqi5eV9T-tgiP4TW2xLWFYBskkO4QXCLPAwQeHPkyrse_7U-LcZWnJECBummnd5pbqdY3DZEQGz0fL7QrOqIKEOQ_GQU2AV6BEmMxtibNhPnEjI2Yhx66xgiBUvI7QhknABnePVyLpYYE7b6n6Cu-f4iNqjDdSY2fVE_rqlxw5HNw=w640-h400" width="640" /></a></div><div><br /></div><div>Then type CMD+Shift+P / Pubspec assist: Add/update dependencies / type the package name</div><div><br /></div><h3 style="text-align: left;"><span style="color: red;">II- Splash screen configuration</span></h3><p>In your 'pubspec.yaml' add splash screen configuration (at the root). Here are the possible properties you can configure for the splash screen:</p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 14px; line-height: 21px; white-space: pre;"><div><span style="color: #6a9955;"># to update (in termninal): flutter pub run flutter_native_splash:create</span></div><div><span style="color: #6a9955;"># flutter_native_splash: ^2.0.5</span></div><div><span style="color: #569cd6;">flutter_native_splash</span>:</div><div> <span style="color: #569cd6;">color</span>: <span style="color: #ce9178;">"#42a5f5"</span></div><div> <span style="color: #6a9955;">#background_image: "assets/images/dreamsounds.png"</span></div><div> <span style="color: #6a9955;">#image: "assets/images/logo.png"</span></div><div> </div><div> <span style="color: #6a9955;"># dark mode</span></div><div> <span style="color: #6a9955;">#branding_dark: assets/dart_dark.png</span></div><div> <span style="color: #569cd6;">color_dark</span>: <span style="color: #ce9178;">"#042a49"</span></div><div> <span style="color: #6a9955;">#background_image_dark: "assets/dark-background.png"</span></div><div> <span style="color: #6a9955;">#image_dark: assets/splash-invert.png</span></div></div><p><br /></p><h4 style="text-align: left;">Dark theme properties</h4><p>You can also configure the splash screen for dark mode using the 'dark' keywords</p><p>(color_dark, image_dark, branding_dark, background_image_dark)</p><p><br /></p><h3 style="text-align: left;"><span style="color: red;">III- output sample</span></h3><p><br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEj9FFDV6zOGGaD9GXbq8-9xq_mklclCjEt4sHEoFQdGtXTQ5QDE6edHAukg1qpoBK10LGcEBu5GxKG6VFM-sPL6FxGrTcB_QSvW95LvKYakp31v0kMd1iRMYNCRbeylGHD6BClnVQCM8MFSopuGoodddRAwedTnSNlBECsomvYHDZxD5npCNh-tYdeFTA=s1000" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1000" data-original-width="438" height="640" src="https://blogger.googleusercontent.com/img/a/AVvXsEj9FFDV6zOGGaD9GXbq8-9xq_mklclCjEt4sHEoFQdGtXTQ5QDE6edHAukg1qpoBK10LGcEBu5GxKG6VFM-sPL6FxGrTcB_QSvW95LvKYakp31v0kMd1iRMYNCRbeylGHD6BClnVQCM8MFSopuGoodddRAwedTnSNlBECsomvYHDZxD5npCNh-tYdeFTA=w280-h640" width="280" /></a></div><br /><p><br /></p><p><br /></p><p><br /></p><p><br /></p><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-52442261351930885752021-12-15T01:34:00.004-08:002021-12-15T07:51:12.421-08:00XAMARIN FORMS TIPS: iOS 15 Transparent TabBar and Safe Area<p> </p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEh1js6Y2HsNuso0BTaqjp0CWhHuuVoFDOiDCEO6KBoweXU6YInQj7pYaO8mkIf3jgUanYterwjhJjqVkSJydrmRiaUxPCMkgzqa9wlKO1jTxTamS0US6s-wT3C6_nd_BD9YvfJZ_MnapsSXr8JHa82yn-rYqeVzVXe5IFdyPw69lXSly-5cF3V8wKvbmw=s400" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="304" data-original-width="400" height="243" src="https://blogger.googleusercontent.com/img/a/AVvXsEh1js6Y2HsNuso0BTaqjp0CWhHuuVoFDOiDCEO6KBoweXU6YInQj7pYaO8mkIf3jgUanYterwjhJjqVkSJydrmRiaUxPCMkgzqa9wlKO1jTxTamS0US6s-wT3C6_nd_BD9YvfJZ_MnapsSXr8JHa82yn-rYqeVzVXe5IFdyPw69lXSly-5cF3V8wKvbmw=s320" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">iOS 15, transparent TabBar</td></tr></tbody></table><p><br /></p><p>Since the release of iOS 15, some people had regression with their app, particularly because of the <b>TabBar component</b>.</p><p>In iOS 15, by default (while using Xamarin Forms), the TabBar comes with a Transparent background and the page's content can scroll behind this TabBar. So it's not user friendly and I presume for all existing apps, it's not beautiful. See the next picture:</p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhoUhAjwoU65lJcRhOsgHCdXncsMGRj6SOjqCoVQsS__JtFb9_tH2MJvzYECSc1vfOVUF0x6auAhv8aFVMjn6cTPo-nS7MxIcs2xKoNeaC_BZJqsgTHmBFO3C9PjSqAYc8DOpAv8gAFc4G8JBoWHAkJaC4Yu7D6-8TpZV6XnbNO58DBhlieVnQ6zLT1CQ=s1200" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1200" data-original-width="595" height="640" src="https://blogger.googleusercontent.com/img/a/AVvXsEhoUhAjwoU65lJcRhOsgHCdXncsMGRj6SOjqCoVQsS__JtFb9_tH2MJvzYECSc1vfOVUF0x6auAhv8aFVMjn6cTPo-nS7MxIcs2xKoNeaC_BZJqsgTHmBFO3C9PjSqAYc8DOpAv8gAFc4G8JBoWHAkJaC4Yu7D6-8TpZV6XnbNO58DBhlieVnQ6zLT1CQ=w318-h640" width="318" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">iOS 15, transparent TabBar<br /></td></tr></tbody></table><br /><p>You can solve this problem by many ways, but the fastest solution / workaround that I found is the following:</p><p>=> <b>manage<span style="color: red;"> iOS SafeArea </span>directly into your XAML</b> to constrain page's content to fit the free space of the page. </p><p>You can do that in XAML in 2 lines of code:</p><p><br /></p><p><br /></p>
<pre class="brush: xml"><?xml version="1.0" encoding="UTF-8" ?></pre>
<pre class="brush: xml"><ContentPage
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.UseSafeArea="True"
...
</pre>
<div><br /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgOxDi0Ham2I4mzRGeLwTtLANuqgCnWkCdQHU_0C8kSc_Vw82JootObXrT8zD5VwyyHieV59RKezFKy-Or4MrajokC2uktMrv1xgwh_uodUE915E--GLlg2sXYk9Kfysx1z2_fjHhlsAwf9R-agA2KnfV9ocPtelLMTqB6DW2b6rFpOZjM77t2w7O3mDA=s1200" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1200" data-original-width="595" height="640" src="https://blogger.googleusercontent.com/img/a/AVvXsEgOxDi0Ham2I4mzRGeLwTtLANuqgCnWkCdQHU_0C8kSc_Vw82JootObXrT8zD5VwyyHieV59RKezFKy-Or4MrajokC2uktMrv1xgwh_uodUE915E--GLlg2sXYk9Kfysx1z2_fjHhlsAwf9R-agA2KnfV9ocPtelLMTqB6DW2b6rFpOZjM77t2w7O3mDA=w318-h640" width="318" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">iOS 15 using <span style="color: red;">Page.UseSafeArea = true</span></td></tr></tbody></table><div><br /></div><div><br /></div><div><br /></div>As TabBar is transparent, you will see the color of the page behind it. So if you use <b>theming</b>, the color will be updated automatically.<div><br /><p><br /></p></div><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-53836469354876267682021-12-12T02:16:00.001-08:002021-12-12T02:16:48.957-08:00FFImageLoading - display pictures stored in shared assembly<div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgRBMAnN44bYKdNIqK4Nfq2TmvQk57HlCgvIf9tm4SLwjbh87N2k5yX5nQco5UDdhyFJAOKtXN0VIulTAsOW4d0_SzqSKG8qXifV3zB16eXBO28r97KZbmBXX1ENAlnQ-RGIGPHco1fTf7X8WJs6Gf8zFBjhC2uUR_wa7aFYVejb1y8vK4IBNlJryy3wg=s1200" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="630" data-original-width="1200" height="320" src="https://blogger.googleusercontent.com/img/a/AVvXsEgRBMAnN44bYKdNIqK4Nfq2TmvQk57HlCgvIf9tm4SLwjbh87N2k5yX5nQco5UDdhyFJAOKtXN0VIulTAsOW4d0_SzqSKG8qXifV3zB16eXBO28r97KZbmBXX1ENAlnQ-RGIGPHco1fTf7X8WJs6Gf8zFBjhC2uUR_wa7aFYVejb1y8vK4IBNlJryy3wg=w588-h320" width="588" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div></div><br /></div>I already talk about the really convenient and powerful lib FFLoadingImage for Xamarin Forms (here: <a href="FFImageLoading%20presentation" target="_blank">FFLoadingImage for Xamarin Forms (quick overview)</a>). <div>This library gives you a lot of tools to display and manage your application's pictures.</div><div><br /></div><h3 style="text-align: left;">Loading pictures from a shared assembly</h3><div>You can load pictures from different sources like: </div><div>- an HTTP Url </div><div>- An iOS or Android embedded resource picture. In this case you will need to duplicate the pictures for each specific platform project. </div><div><br /></div><div><span style="color: #990000;"><b>But did you know</b></span> that you can also load images from a custom assembly like a <b>SHARED Xamarin Forms assembly</b> ? <div>It's pretty simple:
Set your picture's build action to: Embedded Resource
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgqLja6hzgC1VPtbmyx-GL_r3En0lm8PQ0gYHFi314zxKiw3YK2xpHsmG-D0G20K_-1lZz_f3a7LDlP0GNtfgpNy88JkJDrAsG6FEv1KTeKau60MyQcSJ4jYXNXcR-80vj8sEawsL6HJ716ivS_vVwGkil58qDWhCLLhajKv859wpOspm399_OHszjaSA=s1112" style="display: block; margin-left: auto; margin-right: auto; padding: 1em 0px; text-align: center;"><img border="0" data-original-height="660" data-original-width="1112" height="204" src="https://blogger.googleusercontent.com/img/a/AVvXsEgqLja6hzgC1VPtbmyx-GL_r3En0lm8PQ0gYHFi314zxKiw3YK2xpHsmG-D0G20K_-1lZz_f3a7LDlP0GNtfgpNy88JkJDrAsG6FEv1KTeKau60MyQcSJ4jYXNXcR-80vj8sEawsL6HJ716ivS_vVwGkil58qDWhCLLhajKv859wpOspm399_OHszjaSA=w343-h204" title="Shared assembly picture's path" width="343" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;"><b>Shared assembly </b>containing your pictures</td></tr></tbody></table><div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgqLja6hzgC1VPtbmyx-GL_r3En0lm8PQ0gYHFi314zxKiw3YK2xpHsmG-D0G20K_-1lZz_f3a7LDlP0GNtfgpNy88JkJDrAsG6FEv1KTeKau60MyQcSJ4jYXNXcR-80vj8sEawsL6HJ716ivS_vVwGkil58qDWhCLLhajKv859wpOspm399_OHszjaSA=s1112" style="display: block; padding: 1em 0px; text-align: center;"><br /></a><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiV_T8eqCi8rGFFRcx706YVT94uZydNlIjyaoeEdVkvokt9godI46L7o6Tb14u1RHmhPiSYdqA1EW9xBFvSACvNLgEdBBoSIWYzXzJ1EW03l9Hq-5p_baw4m0wax6uTZ-OTZIhWZynR3LtNtOEfEX4pogrK_dtp3haq4UfiFvl9tKEda1FOeb6DqneWjg=s986" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="888" data-original-width="986" height="458" src="https://blogger.googleusercontent.com/img/a/AVvXsEiV_T8eqCi8rGFFRcx706YVT94uZydNlIjyaoeEdVkvokt9godI46L7o6Tb14u1RHmhPiSYdqA1EW9xBFvSACvNLgEdBBoSIWYzXzJ1EW03l9Hq-5p_baw4m0wax6uTZ-OTZIhWZynR3LtNtOEfEX4pogrK_dtp3haq4UfiFvl9tKEda1FOeb6DqneWjg=w509-h458" width="509" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Picture's build action:<b> Embedded Resource</b></td></tr></tbody></table><br /><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgqLja6hzgC1VPtbmyx-GL_r3En0lm8PQ0gYHFi314zxKiw3YK2xpHsmG-D0G20K_-1lZz_f3a7LDlP0GNtfgpNy88JkJDrAsG6FEv1KTeKau60MyQcSJ4jYXNXcR-80vj8sEawsL6HJ716ivS_vVwGkil58qDWhCLLhajKv859wpOspm399_OHszjaSA=s1112" style="display: block; padding: 1em 0px; text-align: center;"><br /></a></div><h3 style="text-align: left;">
Then use the following syntax</h3><div>In your <b>xaml</b> file where you want to display the picture, just use the following syntax. FFLoadingImage library will do the rest to load and display correctly images for each native platforms:</div><br />
<pre class="brush: csharp">
<div><br /></div><div><br /></div><div><div> <FFimg:CachedImage</div><div> x:Name="uiLogoImage"</div><div> DownsampleToViewSize="true"</div><div> <span style="color: #cc0000;"><b>Source="resource://MyProject.Assets.Pictures.Image1.png"</b></span></div><div> VerticalOptions="Center"</div><div> WidthRequest="26"</div><div><span> </span><span> </span><span> </span><span> </span><span> </span>/></div></div><div><br /></div><div><br /></div><div><br /></div>
</pre>
<div></div>Pretty easy no ? :)</div><div><br />
<div></div><br />
</div></div><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-78797477162496228122021-09-01T00:27:00.006-07:002021-09-01T07:11:50.077-07:00Xamarin Forms + Installing Firebase plugin = errors<p style="text-align: justify;"><i><span style="color: #999999;">[Xamarin Forms Shell App + Firebase iOS Auth plugin v. 6.9.2]</span></i></p><p style="text-align: justify;">Last day I added the Google Firebase functionalities to my project, but unfortunately I add some errors just after installing the Firebase Plugin.</p><p style="text-align: justify;">> Xamarin Forms (Shell app) + iOS Firebase <b>errors</b> adding latest package:</p><p style="text-align: justify;"><span style="color: red;">....iOS/MTOUCH: Error MT5210: Native linking failed, undefined symbol: _GULIsLoggableLevel. Please verify that all the necessary frameworks have been referenced and native libraries are properly linked in. (MT5210) (*.iOS) </span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidn3b4eg6VhXl-uW4MjYiMfCpG7aU5dNqvo6a1z34fJP84a-WtANLH11sdej4TNV7t1FjEQdczk3l-PytYQHEi821K2UgGtDZyZJj12mO2755Qul7SG4JyzhbjfWIZtak8KGz_LwvFA2nY/s2588/firebase-xamForms-0-error.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Xamarin forms + Firebase iOS error" border="0" data-original-height="794" data-original-width="2588" height="209" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidn3b4eg6VhXl-uW4MjYiMfCpG7aU5dNqvo6a1z34fJP84a-WtANLH11sdej4TNV7t1FjEQdczk3l-PytYQHEi821K2UgGtDZyZJj12mO2755Qul7SG4JyzhbjfWIZtak8KGz_LwvFA2nY/w683-h209/firebase-xamForms-0-error.jpg" width="683" /></a></div><br /><p><br /></p><p><br /></p><p><br /></p><p><br /></p><p><br /></p><p><br /></p><p>I found some solutions, and finally the iOS SDK worked with my Xamarin Forms Shell app... Unfortunately, with Xamarin Forms, we still take too much time to solve this kind of problem. <br />What did I do ?</p><h2 style="text-align: left;">iOS project properties</h2><p>=> Set the "entitlements file property" to a default file (the *.plist file can be empty):</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1JVd3uD9tOL2sdzvz9cf991iDqRY2QrzYLImbQIFGIKAUSOqynCNLXx3uLAKi5a7YRzG74EAdA-OWDi_L8DvDGn-XrDu7k3sQERqKQccSRXVJ1QtOJEJHGeBWQE6copsbxBAV1PIj4hXC/s1448/firebase-xamForms-entitlements.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="ios xamarin forms firebase error entitlements plist file" border="0" data-original-height="456" data-original-width="1448" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1JVd3uD9tOL2sdzvz9cf991iDqRY2QrzYLImbQIFGIKAUSOqynCNLXx3uLAKi5a7YRzG74EAdA-OWDi_L8DvDGn-XrDu7k3sQERqKQccSRXVJ1QtOJEJHGeBWQE6copsbxBAV1PIj4hXC/w683-h216/firebase-xamForms-entitlements.jpg" width="683" /></a></div><br /><p><br /></p><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">=> <b>iOS Build options:</b></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqVw3piDTCaHoU-_6IJRPIgNlo-FlE_tA4WC96xh1HLkpQIRB8PYgtlL8N24SjsuNwywpHwUNjfRdu1vAylDlP4NUVv-30wWYb1h5u0vw5VSgHsJH9kWBIXPVZuCn0bC_rdInbxG9i6NSl/s1932/firebase-xamForms-1.jpg" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="1406" data-original-width="1932" height="496" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqVw3piDTCaHoU-_6IJRPIgNlo-FlE_tA4WC96xh1HLkpQIRB8PYgtlL8N24SjsuNwywpHwUNjfRdu1vAylDlP4NUVv-30wWYb1h5u0vw5VSgHsJH9kWBIXPVZuCn0bC_rdInbxG9i6NSl/w682-h496/firebase-xamForms-1.jpg" width="682" /></a></div><br /><div class="separator" style="clear: both; text-align: left;">- Add 'mtouch' argument: --registrar:static</div><div class="separator" style="clear: both; text-align: left;">- and try to set linker behavior to SDKs only</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><h2 style="clear: both; text-align: left;">Then initialize Firebase in your code:</h2><div class="separator" style="clear: both; text-align: left;">In your iOS 'appDelegate' file, you can initialize Firebase like that:</div><p></p>
<pre class="brush: csharp">FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
<br/>
Firebase.Core.App.Configure();
<br/>
...
<br/>
}
</pre>
<br />
<p>
</p><div><br /></div><div>==> Clean ALL then rebuild your project. It should be ok now.</div><div><br /></div>
<p>
<br />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3841969086437479"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3841969086437479"
data-ad-slot="4676904854"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
</p><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-86189051419877239502019-04-02T07:56:00.004-07:002020-08-26T06:28:17.362-07:00Docker for beginners - presentation<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_FRJvgJDSQY3cjNd2n_9YJWzQ_UvB9STypMOd_cLPFRMa0sDiMyvzWLWNTygZRq8SZskxLbNNTdqOp9uP46WZ6ECQNmwH4GLcDBWyt4y53PFcEflrnt5j_3pvZO0vfDDNy13NdSnEMNl6/s279/docker_logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="131" data-original-width="279" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_FRJvgJDSQY3cjNd2n_9YJWzQ_UvB9STypMOd_cLPFRMa0sDiMyvzWLWNTygZRq8SZskxLbNNTdqOp9uP46WZ6ECQNmwH4GLcDBWyt4y53PFcEflrnt5j_3pvZO0vfDDNy13NdSnEMNl6/w681-h320/docker_logo.png" width="681" /></a><br />
<div style="text-align: right;">
<span style="color: #38761d;"><b>I- </b>Introduction</span></div>
<div style="text-align: right;">
<span style="color: #38761d;"><b>II-</b> Docker presentation</span></div>
<div style="text-align: right;">
<span style="color: #38761d;"><b>III- </b>A simple [MySQL / phpMyAdmin] docker example</span></div>
<div style="text-align: right;">
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="color: #38761d;"><b>IV-</b> Docker in Windows, how to ?</span></div>
<div style="text-align: right;">
<span style="color: #38761d;"><b>V-</b> Simple Docker glossary</span></div>
<div style="text-align: right;">
<span style="color: #38761d;"><b>VI-</b> Links</span></div>
<br />
<br />
<h2>
I- Introduction</h2>
<br />
There are enough websites to introduce to you Docker in detail. This presentation will just remind you the key concepts of Docker. In my posts, I will always talk about Docker embedded in the Windows environment but I presume, all given information will also be valid for Linux and other OS.<br />
<br />
<b>So, what are we going to see in this post ?</b><br />
As I said, we will remind the key concept of Docker, then we will list some common use cases and all the basic related commands. I will share some links at the end of the post if you want to go deeper with Docker. Let's go !<br />
<br />
<br />
<h2>
II- Presentation</h2>
<br />
Docker is 'just' a technology used to virtualize environments (named <b>containers</b>) in order to run specific applications. It acts like traditional virtual machine but it's much more lightweight. Take a look at the following diagram:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-U3uCwH06sSE/XJtRpJixfiI/AAAAAAAAACg/4ERNLvAUdn4ypyedQd_Yazu5KcQSLCrBgCLcBGAs/s1600/docker%2Barchi.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="354" data-original-width="602" height="376" src="https://4.bp.blogspot.com/-U3uCwH06sSE/XJtRpJixfiI/AAAAAAAAACg/4ERNLvAUdn4ypyedQd_Yazu5KcQSLCrBgCLcBGAs/s640/docker%2Barchi.png" width="640" /></a></div>
- Both VMs and containers will be installed on a (dedicated) machine. For Docker, we talk about a <b>Docker machine</b>. In my case, I will use a Windows PC. Docker engine will (after being installed as we will see just after), comes in place of the traditional Hypervisor.<br />
<br />
- Over the 'Docker engine' layer, we will <b>setup containers</b>. Containers are isolated spaces that contain only libraries used to execute wanted applications or services. <b>So it's much more lightweight / easy to configure</b>. You don't need to install a full OS anymore.<br />
<br />
- In a container, you can install applications (like MySql) or services (like nodejs). To install wanted applications, you will surely use <b>Docker images</b>. <span style="color: #bf9000;"><b>There are already many available images on Docker hub website</b></span> (see links at bottom).<br />
<br />
<br />
<h2>
III- A simple [MySQL / phpMyadmin] docker example</h2>
<br />
<h3>
Scenario 1: using a MySQL database</h3>
<b></b>
<b>Imagine, you are working on a project (a Windows one) that use a database like MySQL.</b><br />
<b>To setup / test your application you have several possibilities:</b><br />
<br />
- you own a remote Linux server that you can use to install a <b>MySQL </b>instance on. So you have to configure your server, then install MySQL then you need to restore Dumps and configure it to be accessed from the outside.<br />
<br />
- you can do the same with a cloud service like Azure<br />
<br />
- or you can install on your Windows development machine, something like a <b>WAMP server,</b> then configure it.<br />
<br />
<span style="font-size: large;"></span>
<span style="font-size: large;"><span style="color: red;"><b>You will need to do something like that:</b></span></span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9bqMW6YFwE5AzC-Wnrtbw3dCR_uA_hbWh2rdHHLDasiLcJmu6H0_xBp8ES7oTRNSP0y0xmsS7YZUFGzEyvVNJqiNz7HVTlCG9-2KpVR0olT97YDN1qGtT8XLux2Qu96TZe096dplNi1AW/s1600/docker+-+archi+server+linux.jpg" style="margin-left: auto; margin-right: auto;"><img border="0" height="386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9bqMW6YFwE5AzC-Wnrtbw3dCR_uA_hbWh2rdHHLDasiLcJmu6H0_xBp8ES7oTRNSP0y0xmsS7YZUFGzEyvVNJqiNz7HVTlCG9-2KpVR0olT97YDN1qGtT8XLux2Qu96TZe096dplNi1AW/s400/docker+-+archi+server+linux.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Using a Linux Server (can be a Virtual Machine)</td></tr>
</tbody></table>
<br />
<br />
>> You can see that:<br />
- you need to get access to a Linux server<b> (it can be a virtual machine)</b><br />
- there are many (traditional) steps to setup, configure, securize, backup your server and SQL instance.<br />
- then your development environment must have access to this Linux server. Sometimes, it's not so obvious because of network configuration...<br />
<br />
<span style="font-size: large;"><b><span style="color: red;">Here is what you can get with Docker:</span></b></span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVYjRrsyOaROwPAIIAvw-AMZcIfRlPV7XBKcLhvGY5w6TJiO5khzpeiU2-wJUWmmBfdjc-b4miioLwCivSlYa5EzeGdhlvSqqFyNWMh2qtlxBFsKeWzGinsHe2c_tA_jvXBxOodXys_Ou4/s1600/docker+-+archi+windows.jpg" style="margin-left: auto; margin-right: auto;"><img border="0" height="275" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVYjRrsyOaROwPAIIAvw-AMZcIfRlPV7XBKcLhvGY5w6TJiO5khzpeiU2-wJUWmmBfdjc-b4miioLwCivSlYa5EzeGdhlvSqqFyNWMh2qtlxBFsKeWzGinsHe2c_tA_jvXBxOodXys_Ou4/s400/docker+-+archi+windows.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Using Docker containers on Windows</td></tr>
</tbody></table>
<br />
>> Now you can see that you just need one environment:<br />
- it's faster to setup<br />
- but it's also faster to backup if needed<br />
- Containers need less resources than a traditional VM.<br />
- Pre requisite is to install Docker engine<br />
<br />
<br />
<br />
<h3>
Scenario 2: managing your Database with phpMyAdmin</h3>
Ok that's cool, but I need to manage my Database. In Docker, you still have several possibilities to do that, like on a real Linux server:<br />
- using a batch composing your SQL commands<br />
- or using a tool like phpMyAdmin<br />
<br />
<h4>
<span style="color: red;">Using MySQL batch</span></h4>
<h4>
<span style="color: blue;">docker exec -it expdb_db_1 mysql -u root -p</span></h4>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJsfs2yJ8r3bKFmDWNBmIydpPsJFMda76e2DnUnBw7KlQGkiM-lVW1wNE4ToZy-1Fh_O5XlRj7CPG9lkzDRffuujtoAKrpWB0I1Iyl6a6iQ2Bn5rmrt3PQOCj9tvC3mXKV7XYXjc9pkgLN/s1600/docker+batch+mysql.jpg"><img border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJsfs2yJ8r3bKFmDWNBmIydpPsJFMda76e2DnUnBw7KlQGkiM-lVW1wNE4ToZy-1Fh_O5XlRj7CPG9lkzDRffuujtoAKrpWB0I1Iyl6a6iQ2Bn5rmrt3PQOCj9tvC3mXKV7XYXjc9pkgLN/s640/docker+batch+mysql.jpg" width="640" /></a><br />
<br />
<br />
This simple command enables you to type your SQL Commands from a command prompt. Note how we connect to the 'MySQL container' using <span style="color: blue;"><b>"docker exec"</b></span>...<br />
<br />
<br />
<h4>
<span style="color: red;">Installing a new container: PhpMyAdmin</span></h4>
But you can also install a new docker container with PhpMyAdmin !<br />
It's really fast and you just have to configure it to target the existing MySQL database.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-ZYEVYKO_JKk/XKNePSA3LiI/AAAAAAAAACw/Zy6EvaOQQkgKaDW0OJJP3LIoxWAnt294QCK4BGAYYCw/s1600/Docker%2B-%2Busing%2BMySQL%2Bon%2BWindows%2B%25283%2529.jpg" style="margin-left: auto; margin-right: auto;"><img border="0" height="275" src="https://2.bp.blogspot.com/-ZYEVYKO_JKk/XKNePSA3LiI/AAAAAAAAACw/Zy6EvaOQQkgKaDW0OJJP3LIoxWAnt294QCK4BGAYYCw/s400/Docker%2B-%2Busing%2BMySQL%2Bon%2BWindows%2B%25283%2529.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Adding new container: PhpMyAdmin</td></tr>
</tbody></table>
<br />
And, in a very few steps, we get access to our MySQL database using a new container:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzP08lmIi5Y0cvcgfayVVNke1yQGTYfvfnmwHcLqXE2UZaHZzzXhAdw1H7LGaE-iqPvlA0mSL3iJXWCpFDARVePnvsqmRZl70aRGW8xKgk1N42g_dt4tgIFu2LAxNSEGHsqJoFMZKDCzOj/s1600/docker+phpmyadmin+-+container.jpg" style="margin-left: auto; margin-right: auto;"><img border="0" height="492" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzP08lmIi5Y0cvcgfayVVNke1yQGTYfvfnmwHcLqXE2UZaHZzzXhAdw1H7LGaE-iqPvlA0mSL3iJXWCpFDARVePnvsqmRZl70aRGW8xKgk1N42g_dt4tgIFu2LAxNSEGHsqJoFMZKDCzOj/s640/docker+phpmyadmin+-+container.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">phpMyAdmin container installed in a few clicks</td></tr>
</tbody></table>
<br />
<br />
<h2>
IV- Docker in Windows, how to ?</h2>
<h4>
Download Docker for Windows</h4>
Using Docker in Windows is pretty easy. The first step is to install <b>Docker Engine</b> on your machine. For that you can go directly here, every steps are well explained (package size about 500Mb):<br />
<b>>></b> <a href="https://hub.docker.com/editions/community/docker-ce-desktop-windows">https://hub.docker.com/editions/community/docker-ce-desktop-windows</a><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img height="400" src="https://lh5.googleusercontent.com/5hiYoFL_X8G1Y6zlpRVQTVPUYj5SRx9HGsMNUYaEULQ_QnYB96TLhw59HmswBnpWdepTD1VThho3lmyqsTtwtcAEJo9uie55-UDXBVyeijUU7dSCH8wPet8rwrXpDys2XXYSUqsc" style="border: medium none; margin-left: auto; margin-right: auto; transform: rotate(0rad);" width="225" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Docker engine installed</td></tr>
</tbody></table>
<span face="" id="docs-internal-guid-99009663-7fff-40d6-3795-6e543ef1a4d3" style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre;"></span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKQGnNyETZPeRM6lhkCub92k4-VwY7t7a-aHtqtwEEs7cvwQRNb-EwsxG_EbSwqqMrFQp8HVF71hgGJCQgIYBO8KlSeUGj8Pc74xvW90HIgz2m5L7ewyYDaAwIM_DGOv_bdPttP95rKwKT/s1600/docker+service+running.jpg" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKQGnNyETZPeRM6lhkCub92k4-VwY7t7a-aHtqtwEEs7cvwQRNb-EwsxG_EbSwqqMrFQp8HVF71hgGJCQgIYBO8KlSeUGj8Pc74xvW90HIgz2m5L7ewyYDaAwIM_DGOv_bdPttP95rKwKT/s400/docker+service+running.jpg" width="192" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Docker service running on Windows</td></tr>
</tbody></table>
<br />
<h4>
Docker Hub</h4>
Then you can create an account on Docker Hub, the entry point for all your Docker's images:<br />
<b><a href="https://hub.docker.com/">>> https://hub.docker.com/</a></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6XwnfFBRZ711oiJ6T-Qzsv6UXvyilBAG4kMMQdYy9vgw00QpQGrpJk7BY30G5XzrbYET8_UGtmsJEeWZHEM53XQEZBPorNyNuDY1gkt9N9zI2DrHzQzW5tJQy88gVlnkTnOwb1s0XWRaT/s1600/hub+docker.jpg"><img border="0" height="443" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6XwnfFBRZ711oiJ6T-Qzsv6UXvyilBAG4kMMQdYy9vgw00QpQGrpJk7BY30G5XzrbYET8_UGtmsJEeWZHEM53XQEZBPorNyNuDY1gkt9N9zI2DrHzQzW5tJQy88gVlnkTnOwb1s0XWRaT/s640/hub+docker.jpg" width="640" /></a><br />
<br />
<br />
<h4>
Getting started guide</h4>
Then follow this "Getting started" guide:<br />
<b>>> <a href="https://docs.docker.com/docker-for-windows/">https://docs.docker.com/docker-for-windows/</a></b><br />
<br />
<br />
<br />
<h4>
Kinematic client to manage your containers</h4>
<div>
There is a Windows tool to manage your container. It's the Docker Toolbox called Kinematic:</div>
<div>
>> <a href="https://kitematic.com/">https://kitematic.com/</a></div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzzHadCghTdEQjqz67RwJolkoItWw8zhkvt_2VDL56VuwGw6AVooTfd1dWfg_SgDWMk7NRQFgeSiMCgoC6q5AnsR2maJSfMLtNMxj4A0rl_gdD_y3bvN2DB_sEMB9VG23YjVnsuKjQAsBK/s1600/Kinematic+client+-+docker.jpg" style="margin-left: auto; margin-right: auto;"><img border="0" height="464" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzzHadCghTdEQjqz67RwJolkoItWw8zhkvt_2VDL56VuwGw6AVooTfd1dWfg_SgDWMk7NRQFgeSiMCgoC6q5AnsR2maJSfMLtNMxj4A0rl_gdD_y3bvN2DB_sEMB9VG23YjVnsuKjQAsBK/s640/Kinematic+client+-+docker.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Kinematic - Docker Toolbox</td></tr>
</tbody></table>
<br />
<br />
<h2>
V- Simple Docker Glossary</h2>
Here are a few words you will always see going deeper into Docker.<br />
<br />
<br />
<b>Docker machine:</b><br />
This is the host machine for the Docker engine. You will install your containers on this machine<br />
<b><br /></b>
<b>Docker Image:</b><br />
An image represent an application / service you want to install as a Docker container. Image embed minimum required libraries in order to make you application executable.<br />
<br />
<b>Container:</b><br />
The container is an (configured) instance of a given image on your Docker machine.<br />
<br />
<b>Docker file:</b><br />
This is a file grouping a set of commands needed to generate a container from a given Docker image.<br />
<br />
<b>Docker-compose:</b><br />
<span id="glossaryMatch">It is a tool that you will surely use later, to define and execute multiple containers. These containers can "communicate" so Docker-compose also enables you to configure containers networks and volumes to store shared data.</span><br />
When your compose file is set up, you just need one command to execute all of your configured containers.<br />
<br />
<br />
<b>More, more, more... here: <a href="https://docs.docker.com/glossary/">https://docs.docker.com/glossary/</a></b><br />
<br />
<br />
<h2>
VI- Links</h2>
<br />
<b>(FR) Good introduction: </b><br />
<a href="https://bacarybruno.me/docker-premieres-impressions/">https://bacarybruno.me/docker-premieres-impressions/</a><br />
<br />
<b>Docker hub image repository: </b><br />
<a href="https://hub.docker.com/search?q=&type=image">https://hub.docker.com/search?q=&type=image</a><br />
<br />
<b>Official Docker configuration:</b><br />
<a href="https://docs.docker.com/get-started/">https://docs.docker.com/get-started/</a><br />
<br />
<b>Kinematic (client to manage your containers):</b><br />
<a href="https://kitematic.com/">https://kitematic.com/</a><br />
<br />
<b>Docker compose:</b><br />
<a href="https://docs.docker.com/compose/">https://docs.docker.com/compose/</a><br />
<br />
<br />
<br />
So that's it, now you can go deeper into Docker ! ššØ<br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="blogger-post-footer">https://julien.goenaga.fr</div>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-74721984865955129262018-05-25T05:41:00.000-07:002018-05-25T05:41:50.626-07:00Understanding .NET Standard<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-j3SYMKbsgKP7A8MJ0WB4JW2N6QgazhBeE84JFYN43y4Mp6auXmepx4Ev8tITEoTYtWWUypzHLq1YRhGTsq-GV1WB_1rmk5KlQCmhnSkDcTaLhMOW9rA2tBt1cTy-KtoAqGQW9hVBZqX/s1600/.NET+Standard+version+image+header.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="847" data-original-width="1410" height="384" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-j3SYMKbsgKP7A8MJ0WB4JW2N6QgazhBeE84JFYN43y4Mp6auXmepx4Ev8tITEoTYtWWUypzHLq1YRhGTsq-GV1WB_1rmk5KlQCmhnSkDcTaLhMOW9rA2tBt1cTy-KtoAqGQW9hVBZqX/s640/.NET+Standard+version+image+header.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
If as me, you don't really understand <b>all subtleties between .NET Core and .NET Standard</b>, I suggest you to have a look at the following article.</div>
<div style="text-align: justify;">
It explains some history about .NET Framework and how <b>.NET Standard is born.</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b style="text-align: start;">>> <a href="https://blog.xamarin.com/history-dot-net-standard/?utm_source=vs_developer_news&utm_medium=referral" rel="nofollow" style="text-align: start;" target="_blank">Xamarin blog: A brief history of .NET Standard</a></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
Which version to use ?</h3>
<div style="text-align: justify;">
For me, an important point to master for my own projects, is to know <b>which platforms I can reach </b>with a specific .NET Standard or .NET Core library. The following table illustrate the compatibility between each .NET implementation:</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<img height="236" src="https://blog.xamarin.com/wp-content/uploads/2018/04/2018-04-01_14-27-54.png" width="640" /><br /><br />
<br />
<b>For instance,</b><br />
<br />
<ul>
<li>- if you build a Xamarin Android v. 7.0 application, you could use versions 1.0 up to 1.6 .NET Standard librairies into your project</li>
</ul>
<br />
<br />
<ul>
<li>- or if you have a .NET Standard v. 1.4 library, you could only build Android v. 7.0 applications ( not v. 8.0)</li>
</ul>
<br />
<br />
<h3>
Intersting References about .NET Standard:</h3>
<b><a href="https://blog.xamarin.com/history-dot-net-standard/?utm_source=vs_developer_news&utm_medium=referral" rel="nofollow" target="_blank">Xamarin blog: A brief history of .NET Standard</a></b><br />
<br />
<a href="https://docs.microsoft.com/en-gb/dotnet/standard/net-standard?WT.mc_id=blog-blog-lbugnion" target="_blank">.NET Standard official website</a><br />
<br />
<a href="http://immo.landwerth.net/netstandard-versions/#" target="_blank">.NET Standard, table version video</a><br />
<br />
<a href="https://blog.kloud.com.au/2017/12/09/xamarin-forms-using-net-standard-2-0/" target="_blank">Convert shared or PCL project into .NET Standard one</a><br />
<br />
<br />
<br /><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com1tag:blogger.com,1999:blog-4067499137469379895.post-70860964693812815772018-04-26T05:56:00.001-07:002018-04-26T05:56:33.189-07:00Full Xamarin Documentation available on Microsoft.com<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK3zU0X-0hjpbL88-6m4ujUgJyz_4fVoscb9b7_s_nWgrR3GJ-eW6NXxItUZ4Hudf_kM46rFbyFNBT2vgVkv2aCbfXxs7AzGCW7hWlWOcu8p1_yOzIwmg5DqNCt1j-MKJRGLL2iLk6HaAX/s1600/doc+Xamarin+on+microsoft.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="986" data-original-width="1230" height="512" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK3zU0X-0hjpbL88-6m4ujUgJyz_4fVoscb9b7_s_nWgrR3GJ-eW6NXxItUZ4Hudf_kM46rFbyFNBT2vgVkv2aCbfXxs7AzGCW7hWlWOcu8p1_yOzIwmg5DqNCt1j-MKJRGLL2iLk6HaAX/s640/doc+Xamarin+on+microsoft.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">New 'Xamarin' menu available</td></tr>
</tbody></table>
<br />
<div style="text-align: justify;">
If you are a Xamarin developer, you will be happy to know that the "full" Xamarin Platform's documentation is now available on microsoft.com website. <b>This website looks really clear</b>, so it should be easy to find what you need...</div>
<br />
<b>Microsoft documentation portal:<span style="color: blue;"> <a href="https://docs.microsoft.com/" target="_blank">https://docs.microsoft.com</a></span></b><br />
<br />
If you select the "Xamarin" menu, you will be redirected to the following page:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVe8pftLkl49A62_h4NWBSJaeze7YbmjuglWi8KKL5vGysNqVsPLjKyKtjzvndcLxNTzI6RQf7YBbRo8mFmg4VsNrYWyhgcZ2Bj3EcWG7NyAeAG6YkGSxctuAJG3JIUK-YES4V_7EhTXO_/s1600/doc+Xamarin+full+page.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1175" data-original-width="1600" height="470" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVe8pftLkl49A62_h4NWBSJaeze7YbmjuglWi8KKL5vGysNqVsPLjKyKtjzvndcLxNTzI6RQf7YBbRo8mFmg4VsNrYWyhgcZ2Bj3EcWG7NyAeAG6YkGSxctuAJG3JIUK-YES4V_7EhTXO_/s640/doc+Xamarin+full+page.jpg" width="640" /></a></div>
<br />
<br />
This is the entry point to many chapters describing the platform like:<br />
- technical / language documentation<br />
- UI (with XAML) documentation<br />
<br />
<b>but you will also find:</b><br />
- deployement tutorials<br />
- mobile continuous delivery tutorials<br />
- data / database articles<br />
- code samples<br />
- and so much more !<br />
<br />
<br />
So let's go coding Xamarin !<br />
<br />
<br /><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com2tag:blogger.com,1999:blog-4067499137469379895.post-10653278333234523072018-03-07T04:54:00.001-08:002021-09-01T07:15:51.049-07:00Set your browser on Fire with P5.js<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnxVkjKlaUoH7DapoiWY88Oaq8SpqnvkhJzd7f4jKy_jRJd6JVMpXqE2NwE99EbkPFTuqCjptyYihEOg84AmCGdwB24x1wuhiJuePG3ugEPMzDWH98FNlYXIup_O-CG65Agd9uNMYx2MC/s1600/p5+js+banner.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="691" data-original-width="1403" height="314" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnxVkjKlaUoH7DapoiWY88Oaq8SpqnvkhJzd7f4jKy_jRJd6JVMpXqE2NwE99EbkPFTuqCjptyYihEOg84AmCGdwB24x1wuhiJuePG3ugEPMzDWH98FNlYXIup_O-CG65Agd9uNMYx2MC/s640/p5+js+banner.jpg" width="640" /></a></div>
<br />
<div style="text-align: justify;">
This post is made for those (like me) who <b>like image processing</b>, web development and maybe, for those who want to<b> learn new programming technics</b>...</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
- I will make you <b>discover p5.js</b>, a javascript library specialized in graphical creation for your web browser !</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
- I will also talk about the the <b>Youtube channel "The Coding Train"</b> presented by Daniel Shiffman. A lot of its videos are based on P5.js. It was for me a great source of inspiration and made me discover javascript (because I'm a newbie with JS...) So I'm pretty sure, you will learn a lot too...</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
- Finally I will present you my personnal example of what I did with P5.js. It's about an <b>old retro fire effect</b> (used in demoscene few years ago) :)</div>
<br />
<br />
So let's begin with p5.js !<br />
<br />
<br />
<h3>
I- What is P5.js ?</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLX0Tiup7zMZOFF2A6AsId5Iku2Wrh-8tixH3TdvuGHi8ioTp-_VYsrlPV26djlbk0C9_LEXq1gOGYmkqwhNGa7OiaijRXs52R0gtZ8MUMFcdlRv81Y7XSuiuYrm_JsA1GJ4h-NLSCRYug/s1600/P5_js_library_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="594" data-original-width="1600" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLX0Tiup7zMZOFF2A6AsId5Iku2Wrh-8tixH3TdvuGHi8ioTp-_VYsrlPV26djlbk0C9_LEXq1gOGYmkqwhNGa7OiaijRXs52R0gtZ8MUMFcdlRv81Y7XSuiuYrm_JsA1GJ4h-NLSCRYug/s640/P5_js_library_1.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h4>
a- Presentation</h4>
<div style="text-align: justify;">
As I mentionned it previously, P5.js is a graphical Javascript library. With it, you will be able to make great effects in your web pages in a few minutes. </div>
<div style="text-align: justify;">
This lib has been created by Lauren McCarthy (<a href="http://lauren-mccarthy.com/"><b>http://lauren-mccarthy.com/</b></a>) in order to provide an educational tool used to understand graphical programmation basis.</div>
<br />
Start here:<br />
<a href="https://p5js.org/community/"><b>https://p5js.org/community/</b></a><br />
<br />
<br />
<h4>
b- And what can I do with this lib</h4>
<div style="text-align: justify;">
This library is pretty simple to use. It is composed of the following main groups of functions:</div>
<div style="text-align: justify;">
- Drawing shapes and images. It includes the loading of 3D models !</div>
<div style="text-align: justify;">
- Managing colors (include saturation, brightness, contrast...)</div>
<div style="text-align: justify;">
- Functions to interact with your environment (including the listening off your hardware events like the mouse or the keyboard)</div>
<div style="text-align: justify;">
- some mathematical functions</div>
<div style="text-align: justify;">
- and other usefull tools...</div>
<br />
You can have a look of all the API references here: https://p5js.org/reference/<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ocHEcUyWsV_fgsf6qT4Sat09xlwKax4qtb4SHdbKrOIkvx84s0tCMLtQtlCWsYQp-QYpzFf5r2jaREjNyJGUbZImOyjP9fqEGit_bNV19o-y9upRj1SR-vWxll_ajOw9SrzK81oLN1M1/s1600/p5+js+ref+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1329" data-original-width="1600" height="529" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ocHEcUyWsV_fgsf6qT4Sat09xlwKax4qtb4SHdbKrOIkvx84s0tCMLtQtlCWsYQp-QYpzFf5r2jaREjNyJGUbZImOyjP9fqEGit_bNV19o-y9upRj1SR-vWxll_ajOw9SrzK81oLN1M1/s640/p5+js+ref+1.jpg" width="640" /></a></div>
<br />
<h4>
<br />c- Easy to start</h4>
If you are interested in playing with P5.js, it's super easy. You will find all you need on the website. Then you edit your code (javascript) in your prefered editor ! That's all.<br />
<br />
You will also find additional libraries to get some sound / geolocation features / particles systems and much more ! Download only the one you need.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSBXIcCFzDDoK2mXX0lO7yzmxuoGLIsROHNRRQ8_gpeQltEnEFG87pVbRiQkXwDzcEKl1FlDYQYnIaJAy1tU6HFiZx_sfRMvtkkUivuM9JsqQeHyB7ZFVS65yeCpbj1pNYPA2xV1gX2jg/s1600/p5+js+libraries.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1517" data-original-width="1600" height="606" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSBXIcCFzDDoK2mXX0lO7yzmxuoGLIsROHNRRQ8_gpeQltEnEFG87pVbRiQkXwDzcEKl1FlDYQYnIaJAy1tU6HFiZx_sfRMvtkkUivuM9JsqQeHyB7ZFVS65yeCpbj1pNYPA2xV1gX2jg/s640/p5+js+libraries.jpg" width="640" /></a></div>
<br />
<br />
<br />
<h3>
II- The coding train (youtube channel)</h3>
Now that you know about this tool, you are maybe wondering what you can do concretely... The coding train is here to give you some ideas, (a lot of ideas !).<br />
<br />
This Youtube channel is presented by Daniel Shiffman, a teacher that loves to teach :) He uses P5.js to implement a wide range of algorithms, from easy ones to complex ones like AI implentation and representation... Daniel is really clear and puts all its energy to make great tutorials. I presume you will like it too :)<br />
<br />
If you are interested, I let you have a look to the channel:<br />
<a href="https://www.youtube.com/user/shiffman/featured"><b>https://www.youtube.com/user/shiffman/featured</b></a><br />
<br />
Here are some of the tutorial video themes he made (<b>but there is so much more !!</b>):<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmYOL4dJ3PM8J6GzCXSY50AcmE4Z9SYhUoKzKyw8KRwKs7q5hge4YOjBQfo_8bZL1ZduW16IOzBs0Wt15MolJKmXfeQ3ghQGfeqdG8US5arSRaowP9bTvE_8rVrihnVSf3Tg3P7MvYkdh8/s1600/coding+challenge+IA+p5+js.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="290" data-original-width="402" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmYOL4dJ3PM8J6GzCXSY50AcmE4Z9SYhUoKzKyw8KRwKs7q5hge4YOjBQfo_8bZL1ZduW16IOzBs0Wt15MolJKmXfeQ3ghQGfeqdG8US5arSRaowP9bTvE_8rVrihnVSf3Tg3P7MvYkdh8/s320/coding+challenge+IA+p5+js.png" width="320" /></a></div>
<br />
<b><i>Learn AI</i></b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP6vnGY6QIpaCyFiAkPUmlOjrRgtcrs51YFzGus2E4ESLwjMizzfYRHcZM_E7jegTB0MOQyQLjHj-RgdwHH3ZaWNyb6SYSpwLPCsnVirWHwbgn9BcOf0OHr7Np3xHrp3vdkrSE0XJU4ASD/s1600/coding+challenge+neural+network+4+p5+js.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="293" data-original-width="379" height="247" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP6vnGY6QIpaCyFiAkPUmlOjrRgtcrs51YFzGus2E4ESLwjMizzfYRHcZM_E7jegTB0MOQyQLjHj-RgdwHH3ZaWNyb6SYSpwLPCsnVirWHwbgn9BcOf0OHr7Np3xHrp3vdkrSE0XJU4ASD/s320/coding+challenge+neural+network+4+p5+js.png" width="320" /></a></div>
<br />
<b><i>More AI with Neural Networks</i></b><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib0x6NLLU1NiDkluLHEDkQuIlghMLrD9PqoCJbhvCYgIMCnRPdPVtZAe_1SnorxwHLXcH8svt5xrASkp8-tBtSorlgUqJcF35ul0csV5i2z-u3sRantm0Qdp4XKACoQe53Iz2R6u9NCgTp/s1600/coding+challenge+snake+3+p5+js.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="295" data-original-width="372" height="253" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib0x6NLLU1NiDkluLHEDkQuIlghMLrD9PqoCJbhvCYgIMCnRPdPVtZAe_1SnorxwHLXcH8svt5xrASkp8-tBtSorlgUqJcF35ul0csV5i2z-u3sRantm0Qdp4XKACoQe53Iz2R6u9NCgTp/s320/coding+challenge+snake+3+p5+js.png" width="320" /></a></div>
<br />
<b><i>Make a Snake game in Javascript</i></b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35u4ghMh7VgOeUk3-JTAoBSA_jFM8S4UQa6JPEssbJGi9W03ZDQMNVaA5225f8W-epiAoSBIdOEINFuLcy4xlBZUleQPhuomEFJ6pK7VIdw_XNyis-8k-orjCtDK2OdFCa6nBFRstKRQh/s1600/coding+challenge+starfield+1+p5+js.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="289" data-original-width="377" height="245" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35u4ghMh7VgOeUk3-JTAoBSA_jFM8S4UQa6JPEssbJGi9W03ZDQMNVaA5225f8W-epiAoSBIdOEINFuLcy4xlBZUleQPhuomEFJ6pK7VIdw_XNyis-8k-orjCtDK2OdFCa6nBFRstKRQh/s320/coding+challenge+starfield+1+p5+js.jpg" width="320" /></a></div>
<br />
<br />
<b><i>Make retro effects (like a star field)</i></b><br />
<br />
<br />
<h3>
</h3>
<h3>
</h3>
<h3>
</h3>
<h3>
</h3>
<h3>
III- My sample, a retro fire effect !</h3>
<div>
<br /></div>
<div>
For those who wonder how to implement a graphical effect, I will describe you my p5.js sample. It's a really simple sample but you will understand the key concepts of p5.js. </div>
<div>
<br /></div>
<div>
I will share you the code, and for sure, you can play with it and improve performances or what you want.</div>
<h4>
<br />a- Lib files</h4>
<div>
The first step is to download the library files. Then you should make a new project folder with the following structure:</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgttSpTT9u_u0dUvTvGgGa7jzx2Vrllinq-tBAT9SvtKFM59h_cywFWioYRFG4GgxK3NT209CCjGvwmrzByB6yhSP0WXVF4cO2pH-wFnR-Mh-HuilsBoU0elPtTaROMqFb2q6x6cXfSZcMx/s1600/p5+js+structure+librairies+project.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="204" data-original-width="1116" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgttSpTT9u_u0dUvTvGgGa7jzx2Vrllinq-tBAT9SvtKFM59h_cywFWioYRFG4GgxK3NT209CCjGvwmrzByB6yhSP0WXVF4cO2pH-wFnR-Mh-HuilsBoU0elPtTaROMqFb2q6x6cXfSZcMx/s640/p5+js+structure+librairies+project.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Your project folder</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYYlEg_sEZUBj3oDM5zUH89brnDy138d4FGStMBIAkoeKFZVdPPoBc4WyHJhubEbmeEsanJ_WPfFk_VOn_wOy2ug7njnKW4U4761qwnRwznoDVsFM1hSqjGi3h21-criwpiTd_qA9pnzwU/s1600/p5+js+structure+folder+project.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="232" data-original-width="1015" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYYlEg_sEZUBj3oDM5zUH89brnDy138d4FGStMBIAkoeKFZVdPPoBc4WyHJhubEbmeEsanJ_WPfFk_VOn_wOy2ug7njnKW4U4761qwnRwznoDVsFM1hSqjGi3h21-criwpiTd_qA9pnzwU/s640/p5+js+structure+folder+project.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The child 'librairies' folder</td></tr>
</tbody></table>
<br />
<h4>
b- sketch.js, draw your effect here</h4>
<div>
You will place all your code in this file. The 2 main methods needed by p5.js are the following:</div>
<div>
- function <b>setup ( )</b></div>
<div>
- function <b>draw ( )</b></div>
<div>
<br /></div>
<div>
The first one handle the page/effect initialization while the second is called several times per second to render the content. So here is the source code with all the steps commented:<br />
<br />
<br /></div>
<div>
<pre class="brush: csharp" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.15); line-height: 20px; margin-bottom: 10px; padding: 9.5px; word-break: break-all; word-wrap: break-word;"><span style="color: #333333; font-family: "monaco" , "menlo" , "consolas" , "courier new" , monospace;"><span style="white-space: pre-wrap;">// global parameters
var fireElemLenght = 6;
var elemOpacity = 255;
var fireLines = [];
var fireWidth = 0;
var fireHeight = 0;
var nbColors = 255; // Nb Colors in the palette
var palette = []; // our color palette for the fire
// ======================================
// SETUP method
// called 1 time during the page loading
// ======================================
function setup() {
colorMode(RGB);
createCanvas(800, 600);
// 2D Fire: init size of fire
fireWidth = int(width / fireElemLenght);
fireHeight = int(height / fireElemLenght);
print(fireWidth + ", " + fireHeight);
// for each fire's 'lines'
for(var i= 0; i&lt;fireHeight; i++)
{
fireLines[i] = []; // create the new line of fire pixels
for(var x=0; x&lt;fireWidth; x++)
fireLines[i][x] = 0; // Initialize to black
}
// generate fire colors palette
initializePalette();
// set black background
background(0,0,0);
noStroke();
}
// ======================================
// DRAW method
// called in the drawing process loop
// ======================================
function draw() {
// We clean the background each time
background(0,0,0);
// We generate a new base fire line (to make it 'move')
initFireLine();
// Compute the whole fire pixels
fireGrow();
// Display the result
drawFire();
}
// ======================================
// &gt; Initialize Palette mehtod
// You can update this process to change the fire colors
// ======================================
function initializePalette()
{
// generate our 255 color palette
// try to change colors composing the fire
for(var i=0; i&lt;nbColors; i++)
{
var val = exp(i/10) - 1;
var red = map(val, 0, exp(7.5), 0, 255);
var green = map(val, 0, exp(10), 0, 255);
var blue = random(50);
if(green &gt; 254) // check for colors range
{
red = 255;
green = 255;
blue = 255;
}
// check/erase for 'noisy' blue pixels
if(red &lt; 20 &amp;&amp; green &lt; 20)
{
red = green = blue = 0;
}
// add new color
palette[i] = color(red, green, blue, elemOpacity);
}
}
// ======================================
// &gt; initFireLine() method
// Make a new base fire line (randomly, to make the fire 'move' when it grows)
// Remark: Y axis is inverter on our screens ==&gt; baseY = fireHeight-1
// ======================================
function initFireLine()
{
// generate fire base (1st line) color ('randomly')
for(var x=0; x&lt;fireWidth; x++)
{
fireLines[fireHeight-1][x] = random(0,nbColors);
fireLines[fireHeight-2][x] = random(0,nbColors);
fireLines[fireHeight-3][x] = random(0,100);
}
}
// ======================================
// &gt; fireGrow() method
// Compute the whole fire, line by line. Start after the base line
// We compute each pixel color from its neighbors (a kind of median)
// It gives a blurry effect
// ======================================
function fireGrow(){
// for each fire line
for(var y=fireHeight-2; y&gt;=1; y--)
{
// compute new fire color line
// based on the bottom &amp; top lines
for(var x=1; x&lt;fireWidth-1; x++)
{
// Get neighbors colors
var c1 = fireLines[y+1][x];
var c2 = fireLines[y][x-1];
var c3 = fireLines[y][x+1];
var c4 = fireLines[y-1][x];
var c5 = fireLines[y][x];
// We make a 'median' color
var newCol = int((c1 + c2 + c3 + c4 + c5) / 5) - 1;
fireLines[y - 1][x] = newCol;
}
}
}
// ======================================
// &gt; drawFire() method
// Drawing pass - to draw the fire from its computed matrix
//
// ======================================
function drawFire(){
// foreach fire lines
for(var y=fireHeight-1; y&gt;0; y--)
{
// foreach pixel in the line
for(var x=0; x&lt;fireWidth-1; x++)
{
// get current pixel color index
var idx = int(fireLines[y][x]);
// check for color index limits
if(idx&lt;0) idx = 0;
if(idx &gt;= nbColors) idx = nbColors-1;
// apply current pixel color
fill(palette[idx]);
// Draw a square representing the current fire's pixel
rect(int(x * fireElemLenght - (fireElemLenght / 2)),
int(y * fireElemLenght + (fireElemLenght / 2)),
fireElemLenght * 2 ,
fireElemLenght * 2);
}
}
}
</span></span></pre>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
You should get something like that:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPeJU4ejEmc5gOoOR5pCULrH_3UFB_NCKPHn-NSATLmUEsUyW3Q-SWEnNDGQkrzEnZK6E7kk01bkuQxtLGazN_r2b28ohI95ebNRAaIPPi6OQ-E1olbulyaNllSvGpRPplmxf3ozqvyfd2/s1600/p5+js+fire+effect+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1253" data-original-width="1405" height="570" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPeJU4ejEmc5gOoOR5pCULrH_3UFB_NCKPHn-NSATLmUEsUyW3Q-SWEnNDGQkrzEnZK6E7kk01bkuQxtLGazN_r2b28ohI95ebNRAaIPPi6OQ-E1olbulyaNllSvGpRPplmxf3ozqvyfd2/s640/p5+js+fire+effect+1.jpg" width="640" /></a></div>
<br /></div>
<span style="color: blue;"><br /></span>
<span style="color: blue;"><br /></span>
<div style="text-align: center;">
<a href="http://js.kampeki-factory.com/" target="_blank"><span style="color: blue; font-size: x-large;"><b>Try it in your browser here</b></span></a></div>
<span style="color: blue;"><br /></span>
<span style="color: blue;"><br /></span>
<div style="text-align: center;">
<span style="color: blue; font-size: x-large;"><b><a href="http://js.kampeki-factory.com/p5jsfire.zip" target="_blank">Download full source code here</a></b></span></div>
<div style="text-align: center;">
<span style="color: blue; font-size: x-large;"><br /></span></div>
<div style="text-align: center;">
<span style="color: blue; font-size: x-large;"><br /></span></div>
<div style="text-align: center;">
<span style="color: blue; font-size: x-large;"><br /></span></div>
<br />
<p>
<br />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3841969086437479"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3841969086437479"
data-ad-slot="4676904854"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
</p>
<div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-13929071477355097782017-12-01T08:07:00.002-08:002017-12-01T08:07:59.542-08:00EMGU with Xamarin Forms guide [part 1]<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju4gooAmB0We_AYyV0qM6a5ksBh3D4Z_SxhcxYvhARCMCmyT-B6sHVsNMJ659KheuFJuT9C65z_KtipU5yQSe-9Vn7d4DFcEeOyjH1FzEcrW7slcX4K3h01Je2FPhTj3lIH5AqDfghQj-n/s1600/banner.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="448" data-original-width="800" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju4gooAmB0We_AYyV0qM6a5ksBh3D4Z_SxhcxYvhARCMCmyT-B6sHVsNMJ659KheuFJuT9C65z_KtipU5yQSe-9Vn7d4DFcEeOyjH1FzEcrW7slcX4K3h01Je2FPhTj3lIH5AqDfghQj-n/s640/banner.jpg" width="640" /></a></div>
<h2>
I- Introduction, OpenCV and EMGU</h2>
<span style="text-align: justify;">Do you know </span><b style="text-align: justify;">OpenCV</b><span style="text-align: justify;"> (</span><span style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; text-align: justify;">Open Source Computer Vision Library: </span><a href="https://opencv.org/" style="text-align: justify;" target="_blank">https://opencv.org/</a><span style="text-align: justify;">) ? This open source library let's you work and play with images and videos with a lot of powerful </span><b style="text-align: justify;">image processing algorithms</b><span style="text-align: justify;"> ! If you want some details, I suggest you to first navigate to the link above or search for 'OpenCV' on Google. </span><br />
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: center;">
<span style="font-size: x-small;"><b>Examples of OpenCV processing found on the web (filters, object detection, edges...):</b></span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKyYTnOPOFkDmx4x0j0VqDdorPjnyaW-h5XckAvmvNhZj3JjVvCbGlRZ8BZ4DFBI5hhyphenhyphen4C3EJpTAaL9_4s5WauTp3byhVvcQ8nEDSNoWCTUNknAzM41HAKT6w95kYzcUt_RkLn37RvvJUz/s1600/opencv-sample1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="486" data-original-width="980" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKyYTnOPOFkDmx4x0j0VqDdorPjnyaW-h5XckAvmvNhZj3JjVvCbGlRZ8BZ4DFBI5hhyphenhyphen4C3EJpTAaL9_4s5WauTp3byhVvcQ8nEDSNoWCTUNknAzM41HAKT6w95kYzcUt_RkLn37RvvJUz/s400/opencv-sample1.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDTnPLO7tdiwimu1YCMXGqXdaZ0NpQKHv1EfDvsPg_5fgTncmWsDMWEYaZfsw6DriefVZs_0aknu_jtjBTgkNOLevlrovj2DFiWflsfNPkEFtyjTTsw7UPUcOVnbXZb4qywRc0DLZDAcXb/s1600/opencv-sample4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDTnPLO7tdiwimu1YCMXGqXdaZ0NpQKHv1EfDvsPg_5fgTncmWsDMWEYaZfsw6DriefVZs_0aknu_jtjBTgkNOLevlrovj2DFiWflsfNPkEFtyjTTsw7UPUcOVnbXZb4qywRc0DLZDAcXb/s400/opencv-sample4.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijmjJGWHrkjK89spRB0jVFCjA5_B7uVGZ7BpP7XWXEJcf4JIeoFJ5qM0zj7BG1oqJEsXJMcfeae0h3-2kovK4hSRwOuj6qynIn26enrbYsPbyGlam-jkd9Z3WZ5QHnnuRfdU8q4u1QTMXb/s1600/opencv-sample2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="370" data-original-width="800" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijmjJGWHrkjK89spRB0jVFCjA5_B7uVGZ7BpP7XWXEJcf4JIeoFJ5qM0zj7BG1oqJEsXJMcfeae0h3-2kovK4hSRwOuj6qynIn26enrbYsPbyGlam-jkd9Z3WZ5QHnnuRfdU8q4u1QTMXb/s400/opencv-sample2.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div style="text-align: justify;">
<span style="color: #351c75;"><b>EMGU</b> is a .NET OpenCV wrapper. That means that you will be able to use OpenCV functionnalities in your .NET projects using C# for instance. EMGU is cross platform, so you will also be able to use it in your Xamarin projects ! That's great because there is no advanced image processing library in Xamarin.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
In this article, we will talk about EMGU and list the steps to setup a <b>Xamarin Forms project using EMGU</b>. It may help you because, we must say that it's not a trivial task... </div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_YAD-3NxsQOu5ANPvZXS-sH62IYDxl079l76_RMFz2V7vSUgl_X4Xf5kKf39tXPduuYOsUySbFcTK_hfuWcgypVKM5SJtPD3wI8yra70I6HgX6j-38elau5ur8620Q6N7Gtp17keIdjq/s1600/OpenCV-emgu-diag.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="421" data-original-width="894" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_YAD-3NxsQOu5ANPvZXS-sH62IYDxl079l76_RMFz2V7vSUgl_X4Xf5kKf39tXPduuYOsUySbFcTK_hfuWcgypVKM5SJtPD3wI8yra70I6HgX6j-38elau5ur8620Q6N7Gtp17keIdjq/s640/OpenCV-emgu-diag.jpg" width="640" /></a></div>
<br />
<h2>
<br />II-What do I need to start ?</h2>
<h3>
1- A licence please</h3>
The first thing you have to understand, is that <b>you will need to purchase a commercial licence</b> to use EMGU with mobile devices (so with Xamarin). You can refer to this page for all the details:<br />
- <a href="http://www.emgu.com/wiki/index.php/Main_Page#Mobile_Devices">http://www.emgu.com/wiki/index.php/Main_Page#Mobile_Devices</a><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-jefdyp_d-fO4d9qj2q3uc29aSvjMaRAnCE5iuXKoBEXJT-kLg2XTdfj25epPtbJKgKOJujVoaXiJF4AQGdhVied-aoDezvfnPwUfnsCGDRd1H2hSSyVfhmv-MsWC-XKQIA8vp0j5ErCK/s1600/emgu+-+commercial+licence.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="374" data-original-width="800" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-jefdyp_d-fO4d9qj2q3uc29aSvjMaRAnCE5iuXKoBEXJT-kLg2XTdfj25epPtbJKgKOJujVoaXiJF4AQGdhVied-aoDezvfnPwUfnsCGDRd1H2hSSyVfhmv-MsWC-XKQIA8vp0j5ErCK/s640/emgu+-+commercial+licence.jpg" width="640" /></a></div>
<br />
The website isn't so clear so here is the purchase link:<br />
- <a href="http://www.emgu.com/wiki/index.php/Commercial_License_Purchase">http://www.emgu.com/wiki/index.php/Commercial_License_Purchase</a><br />
<br />
<h3>
2- iOS and Android libraries</h3>
Once you have purchased a licence, you will have access to a link where from you can download the libraries. In our case we need the iOS and Android libs.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ALdcV8A9eXJ73cUHqWYxEVg5kdpZTvv3Y-3DLCVd0wTwxhKtqss-FKxXejLTUUv8dGR5yvEDKaxX1Q-AhRHhyphenhyphenuke5ppn70XuJ5V7VDf8AtdukdoNf-xhm3HPmvysjZ9kr9T1ROnkJxlD/s1600/lib+Emgu+folders.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="274" data-original-width="818" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ALdcV8A9eXJ73cUHqWYxEVg5kdpZTvv3Y-3DLCVd0wTwxhKtqss-FKxXejLTUUv8dGR5yvEDKaxX1Q-AhRHhyphenhyphenuke5ppn70XuJ5V7VDf8AtdukdoNf-xhm3HPmvysjZ9kr9T1ROnkJxlD/s640/lib+Emgu+folders.jpg" width="640" /></a></div>
<br />
As we will see in the next section, inside the extracted folders, you will find the source code but also:<br />
<br />
<ul>
<li>- Needed Android libraries to be able to build your Xamarin Android projects</li>
<li>- Needed iOS DLL to be able to build your Xamarin iOS projects</li>
</ul>
<br />
<br />
<b>Needed folder to build for Android:</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD06GYWZcQr6NqJW2gGvwdRtF3dBedmHDXx1ns-vIxoeRpcYQGdpNXFPmNXuMgWn4OlAHG3GgCxenRtc6jpi5pX-wMtbJZSZ71Lw9DhGJB5Fzur_6-7L-wnrJBmVZBo2yaDYVnd1iK53z0/s1600/lib+-+needed+files+-+android.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="570" data-original-width="580" height="392" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD06GYWZcQr6NqJW2gGvwdRtF3dBedmHDXx1ns-vIxoeRpcYQGdpNXFPmNXuMgWn4OlAHG3GgCxenRtc6jpi5pX-wMtbJZSZ71Lw9DhGJB5Fzur_6-7L-wnrJBmVZBo2yaDYVnd1iK53z0/s400/lib+-+needed+files+-+android.jpg" width="400" /></a></div>
<br />
<b>Needed library to build for iOS:</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1V6-nkKwipYNKn_FO2NF-CHvJ_bQsX8YItsd38Fiua86vWDSws7BOiDtpzLr-7j5LO_P7-ACMtDf8OyN7Fs9ZnA_xdeAZrw4oy2WG0pG6_PDpLMa73eLRrnFahvYsgfD7woqt3TeWD9B/s1600/lib+-+needed+files+-+iOS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="151" data-original-width="636" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1V6-nkKwipYNKn_FO2NF-CHvJ_bQsX8YItsd38Fiua86vWDSws7BOiDtpzLr-7j5LO_P7-ACMtDf8OyN7Fs9ZnA_xdeAZrw4oy2WG0pG6_PDpLMa73eLRrnFahvYsgfD7woqt3TeWD9B/s640/lib+-+needed+files+-+iOS.jpg" width="640" /></a></div>
<br />
<br />
<br />
<h2>
III- Next, setup your Xamarin project to use EMGU</h2>
<div>
<br /></div>
<h3>
1- Create your project solution</h3>
First thing to do is to create a Solution for your project. In our example we will use Visual Studio to do this, but you can also try with VS for MAC. See picture below:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4haCYeM4yGIiqmUJe-6rmh2DM9GYi0Ax6DVMPzC1P_Km16EjN_xwgIrUBIjb_3DIbEPhUANVCfF5OGxnij0g6n54O-1sL2fcUSigJLtprC8pTitsk8lD79tPstSQm0dwMB-NbJqTFwuiq/s1600/Step+1+-+shared+XF+project.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="653" data-original-width="941" height="444" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4haCYeM4yGIiqmUJe-6rmh2DM9GYi0Ax6DVMPzC1P_Km16EjN_xwgIrUBIjb_3DIbEPhUANVCfF5OGxnij0g6n54O-1sL2fcUSigJLtprC8pTitsk8lD79tPstSQm0dwMB-NbJqTFwuiq/s640/Step+1+-+shared+XF+project.jpg" width="640" /></a></div>
<br />
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
<b>EMGU does not provides PCL library</b>, that means that you will have to <b><span style="color: #990000;">create a project with the "shared project" option</span></b> instead of a "Portable Class Project". See picture below:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3wUyn2Igu-UvhHxn_t9gvXnqrxJXnFpo6V6ZdComNhUo9n5o3OsBVFCjpSjeegwnRY2VtfO2UVgipLQJINCFS-edXlavBV-nvZB-x6kPDRjSEWIJ3k52I3xuWhhZFVFHjUKyJEn9iyDw4/s1600/Step+2+-+shared+XF+project.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="393" data-original-width="716" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3wUyn2Igu-UvhHxn_t9gvXnqrxJXnFpo6V6ZdComNhUo9n5o3OsBVFCjpSjeegwnRY2VtfO2UVgipLQJINCFS-edXlavBV-nvZB-x6kPDRjSEWIJ3k52I3xuWhhZFVFHjUKyJEn9iyDw4/s640/Step+2+-+shared+XF+project.jpg" width="640" /></a></div>
<br />
<br />
When asked, you should cancel the creation of Windows 10 projects (it's not in the scope of this article):<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh53yYCldzOrMdXQfajX2z1iDwaF7FiRuyIlRFUpmOeN1Oiv5-sS7rsYQQLfPVboQ-2Xn0Is_dUujesMi2q7kWLAsIiDltyoa25vUsHpsDRkkMPLMP5_5gGnqLUn4df6iHOFDsW5L73nl80/s1600/Step+2+-+ignore+UWP+project.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="218" data-original-width="609" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh53yYCldzOrMdXQfajX2z1iDwaF7FiRuyIlRFUpmOeN1Oiv5-sS7rsYQQLfPVboQ-2Xn0Is_dUujesMi2q7kWLAsIiDltyoa25vUsHpsDRkkMPLMP5_5gGnqLUn4df6iHOFDsW5L73nl80/s640/Step+2+-+ignore+UWP+project.jpg" width="640" /></a></div>
<br />
<br />
The base project will include:<br />
- <b>Shared project:</b> you will put inside all your shared Pages for instance, or your shared services between iOS and Android<br />
- <b>Xamarin.Android project</b>: you will put inside all your related Android services and classes<br />
- <b>Xamarin.iOS project</b>: will contain all your iOS classes<br />
- All <b>EMGU Android / iOS needed libraries</b> as we will see in the next chapter<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlZTiOEKgTrKxtFp9Ofhx0S9oAd5SWYNBWexQ4QoyJor061CtINkT5b2ELn4ef1gtbqQjAlqJnM8oUeLyNf2AwSzEr1nSNqSPFag9i21VtHor_gfkCmt93pSaEnEYXeY6eZHB_kLsZuS_F/s1600/Step+2+-+resulting+solution.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="124" data-original-width="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlZTiOEKgTrKxtFp9Ofhx0S9oAd5SWYNBWexQ4QoyJor061CtINkT5b2ELn4ef1gtbqQjAlqJnM8oUeLyNf2AwSzEr1nSNqSPFag9i21VtHor_gfkCmt93pSaEnEYXeY6eZHB_kLsZuS_F/s1600/Step+2+-+resulting+solution.jpg" /></a></div>
<br />
<br />
<h3>
2- Reference EMGU</h3>
<div style="text-align: justify;">
When your empty Xamarin shared project is ready, you will have to make reference to EMGU component, for Android & for iOS projects.</div>
<br />
- <b><span style="color: #990000;">Notice that these process are not the same for Android & iOS</span> !</b><br />
<br />
<h3>
2.a- Reference EMGU in your Android project</h3>
<div style="text-align: justify;">
For Android, I think the best choice you have is to integrate the EMGU shared projects directly into your solution. Copy the Android projects that you extracted previously. Projects you need are listed below. In my example, I separate those projects in a specific solution folder called "EmguLib". </div>
<br />
<div style="text-align: justify;">
Then you just have to reference those shared project from the Android one. Here is the organisation for Android:</div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdK1XbarGW0WEB6fBSZX5OpLkbkhrvrhAygEoLkDRZRJGJgL0ZIlSwWfXS7w7kLFnlffHZIZdxIPL4dSdlVXRdIBDQJbp6B0AnBNHLcJ3tH2ykSJ0JLXcP-kjg8ONoxLVOqpVGZkxdshn7/s1600/Step+3+-+ref+emgu+Android+%2528include+shared+prj%2529.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="532" data-original-width="316" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdK1XbarGW0WEB6fBSZX5OpLkbkhrvrhAygEoLkDRZRJGJgL0ZIlSwWfXS7w7kLFnlffHZIZdxIPL4dSdlVXRdIBDQJbp6B0AnBNHLcJ3tH2ykSJ0JLXcP-kjg8ONoxLVOqpVGZkxdshn7/s640/Step+3+-+ref+emgu+Android+%2528include+shared+prj%2529.jpg" width="379" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Android: How to reference EMGU library</td></tr>
</tbody></table>
<br />
If you try to build the project now, you will surely have a compilation error:<br />
<br />
<b><i><span style="color: #cc0000;">"This package do not contain necessary binary for Xamarin Android App. Emgu CV for Android Commercial Licence is required. x86...."</span></i></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqb-xrXjwRHA-h6Yfa8GQcBXiA-yAXLpP-3_OOaZ_UKOV4bnIvKmWYnc-1zF1P1fWEgy8TiEmSZIZ-_RFBAvsCYu5wjRblB7ow3g5XH7oeE7LUeLGCtzwjuyYw2OQWSLbgOCLchjLHMRf3/s1600/Step+3+-+error+android+-+need+libcvextern.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="135" data-original-width="980" height="88" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqb-xrXjwRHA-h6Yfa8GQcBXiA-yAXLpP-3_OOaZ_UKOV4bnIvKmWYnc-1zF1P1fWEgy8TiEmSZIZ-_RFBAvsCYu5wjRblB7ow3g5XH7oeE7LUeLGCtzwjuyYw2OQWSLbgOCLchjLHMRf3/s640/Step+3+-+error+android+-+need+libcvextern.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div style="text-align: justify;">
Don't be afraid. We talked about it in the previous paragraph. You just have<b> to copy / paste the "libs"</b> folder from the android sources you downloaded to your project (at the same level as your EMGU shared projects that you reference). All will be good if you bought the licence :p</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMgxlBXkYl8kI-ZktQ_IiNSqoQtN_1eS0KsyZYwNK3IKkB2fCso_JgVqUKUymG3v7Z4QhJV2vl9hm7enIsutWfK16dv9sW5fk3ZVsdby5sW0SIqEsQ9VrgEDl2MYz3KWqDoCwbEipmNVXA/s1600/Step+3+-+android+-+libs+folder+to+copy.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="272" data-original-width="561" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMgxlBXkYl8kI-ZktQ_IiNSqoQtN_1eS0KsyZYwNK3IKkB2fCso_JgVqUKUymG3v7Z4QhJV2vl9hm7enIsutWfK16dv9sW5fk3ZVsdby5sW0SIqEsQ9VrgEDl2MYz3KWqDoCwbEipmNVXA/s640/Step+3+-+android+-+libs+folder+to+copy.jpg" width="640" /></a></div>
<br />
<br />
<h3>
2.b- Reference EMGU in your iOS project</h3>
<div style="text-align: justify;">
For iOS, it's a little bit "simpler" because you just have to copy one DLL library (specially compiled for iOS) and reference it into your iOS project. You can place it where you want into your solution hierarchy but take care the file is big ! (about 210 Mb).</div>
<br />
File to reference in your iOS project (as seen in the previous paragraph):<br />
--> <b><span style="color: #990000;">EMGU.CV.World.iOS.dll</span></b><br />
<br />
You should have something like that:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiUrgfjZaRsQZVqTaa1h1BBLNXQxp4Qj30SlSZ74x64dgGS5xj4OLWzR4hzXMETa1U5ZO-WG5GUD6Gr_wi3CT7r-92SH9O1AXt6Utf75JeX50DNTw4bPX4RSnyy-CRn5e3Qmg3EJfaCd5W/s1600/Step+6+-+ios+references.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="731" data-original-width="405" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiUrgfjZaRsQZVqTaa1h1BBLNXQxp4Qj30SlSZ74x64dgGS5xj4OLWzR4hzXMETa1U5ZO-WG5GUD6Gr_wi3CT7r-92SH9O1AXt6Utf75JeX50DNTw4bPX4RSnyy-CRn5e3Qmg3EJfaCd5W/s640/Step+6+-+ios+references.jpg" width="353" /></a></div>
<br />
<br />
<br />
<h2>
You are ready !</h2>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Steps below are not complicated, but there is no really helpful documentation about how to setup <b>EMGU with XAMARIN FORMS</b>. You can just try to inspect the sample projects. After playing around really shortly with EMGU, <b>in a few line of code</b>:</div>
<br />
- I opened an asset image<br />
- loaded it into a '<b>Mat</b>' openCV object<br />
- applied a Canny edge algorithm on it<br />
- then displayed the image<br />
<br />
Tada !<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaDpu6Tr9pgLTq0zikuUO8ktrG-LbrlgTpQY5nACQEsl9oZb_8oZE7fOTsBe2uPU0pFV4WLki6RVl4oVyvZTa4nVJcdz90TqxSsV7Jtyb2yPRxAPfsQOuh2XERQNzbw-yJR8W2jLlxB_K0/s1600/Before+Canny+Android.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1280" data-original-width="720" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaDpu6Tr9pgLTq0zikuUO8ktrG-LbrlgTpQY5nACQEsl9oZb_8oZE7fOTsBe2uPU0pFV4WLki6RVl4oVyvZTa4nVJcdz90TqxSsV7Jtyb2yPRxAPfsQOuh2XERQNzbw-yJR8W2jLlxB_K0/s400/Before+Canny+Android.png" width="225" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">First step, load an image</td></tr>
</tbody></table>
Apply the 'Canny Edge Detector algorithm', and here is the result for Android & iOS:<br /><br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdp0gHrDdPrXjlNn5AwPXLHS1dWhLfs3gC5zpmR4M0jGr3Ay09exu0rySQAyRsMrQTgUq5m1okdkLnRZ9rzBzwqWhvxYYVtuo1yKnGOrGwjKJJ1XV38VemVaqzWFNjkZw-PXJFNGyX5v7x/s1600/After+Canny+Android.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="720" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdp0gHrDdPrXjlNn5AwPXLHS1dWhLfs3gC5zpmR4M0jGr3Ay09exu0rySQAyRsMrQTgUq5m1okdkLnRZ9rzBzwqWhvxYYVtuo1yKnGOrGwjKJJ1XV38VemVaqzWFNjkZw-PXJFNGyX5v7x/s400/After+Canny+Android.png" width="225" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz1ZHe4AwbqSPE5mcxqgpKq_kSpR92YNpKC8RmRoemaEfvMZLZ6gk2X47lRBPrt7XhhndK5qhDeU1Z4aHX9GGLB1ePrGawlerWrN9MRfCvfXB7YBRuKPFU8APlpNgfnDC0YcmwCaxSa22_/s1600/After+Canny+iOS.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1136" data-original-width="640" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz1ZHe4AwbqSPE5mcxqgpKq_kSpR92YNpKC8RmRoemaEfvMZLZ6gk2X47lRBPrt7XhhndK5qhDeU1Z4aHX9GGLB1ePrGawlerWrN9MRfCvfXB7YBRuKPFU8APlpNgfnDC0YcmwCaxSa22_/s400/After+Canny+iOS.PNG" width="225" /></a></div>
<br />
<br />
<br />
It's only the begining. At this point, if you are new with OpenCV, you can try algorithms you want just to learn. On my side, new Xamarin Forms + EMGU articles will come, <b>so follow me</b> ;) !<br />
<br />
<br />
<br />
<br />
<br /><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com4tag:blogger.com,1999:blog-4067499137469379895.post-64101265676701743612017-11-22T10:33:00.002-08:002021-09-01T07:16:44.883-07:00Xamarin Forms essential: FFImageLoading, manage your images<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYH6GidDgkSAZdN6n05N4i62f54v1w_mf25JKv65qxcxoFhKmTSDptV7Z_Lpdhe_HB16imcWZHG5vmMETfB9cfvqdg-1KTOb6IRLswkgFiptkEjKCRYylI1GYHS35PcUyO_OVhC7AxGw7/s1600/featured.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="630" data-original-width="1200" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYH6GidDgkSAZdN6n05N4i62f54v1w_mf25JKv65qxcxoFhKmTSDptV7Z_Lpdhe_HB16imcWZHG5vmMETfB9cfvqdg-1KTOb6IRLswkgFiptkEjKCRYylI1GYHS35PcUyO_OVhC7AxGw7/s640/featured.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="color: #20124d; text-align: justify;"><br /></span></div>
<h2 style="clear: both; text-align: left;">
<span style="color: #20124d; text-align: justify;">Discover 'FFLoadingImage' library</span></h2>
<div style="text-align: justify;">
Today I want to make a quick presentation of a really <b>good library for Xamarin Forms</b>. This is the kind of library we would like to see more often on XF... This one is dedicated to image manipulation. It's called "<b>FFImageLoading</b>".</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
If I take time to make this presentation, it's because I think that we should use it in almost all our "basic" Xamarin Forms applications. When I say basic, I exclude Games or other specific apps. But in my mind, I suggest you to change all your traditional "<Image />" by "<FF:CachedImage />" in your apps.</div>
<br />
<b>Before to start, where to find it ?</b><br />
<span style="color: #0b5394;">On Github: <a href="https://github.com/luberda-molinet/FFImageLoading" target="_blank">https://github.com/luberda-molinet/FFImageLoading</a></span><br />
<span style="color: #0b5394;">On Nuget: <a href="https://www.nuget.org/packages/Xamarin.FFImageLoading" target="_blank">https://www.nuget.org/packages/Xamarin.FFImageLoading</a></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpe8g7VVSLaEahwhruLsWb08BdoGNu8KHdmDJ2GOdXjhV4v-Wcf0rkGwbaPnHNrpfKc65epFfHYVfQPyLB54LYfiXMXhvm-B9TH7LyDyotTKQQ7ZLdJfZwPfVA8UG5JD_34EZG3Gge5iPr/s1600/ffimageloading_large.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="454" data-original-width="830" height="348" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpe8g7VVSLaEahwhruLsWb08BdoGNu8KHdmDJ2GOdXjhV4v-Wcf0rkGwbaPnHNrpfKc65epFfHYVfQPyLB54LYfiXMXhvm-B9TH7LyDyotTKQQ7ZLdJfZwPfVA8UG5JD_34EZG3Gge5iPr/s640/ffimageloading_large.png" width="640" /></a></div>
<br />
<h2>
<span style="color: #20124d;">Main features</span></h2>
So what will you find using this library ? I will not explain all the details but the main interesting features of the library.<br />
<br />
<h3>
<span style="color: blue;">Multi-platform</span></h3>
The good point is that this library supports multiple platforms:<br />
<br />
<ul>
<li>- All the xamarin platforms: iOS, Android, MAC, and Xamarin Forms </li>
<li>- But also Windows (WinRT & UWP)</li>
</ul>
<br />
So you can use the library either in your XAML code or in your code behind. It's really flexible, ideal for Xamarin Forms projects.<br />
<br />
<h3>
<span style="color: blue;">Image cache system</span></h3>
<div style="text-align: justify;">
The main feature provided by the library is a picture cache system. This system is pretty complete and you are able to customize it if you want (XAML and code behind). You can set cache keys to your images, you can set a lifetime and so on...</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Thanks to the cache you can greatly improve performances of long lists for instance (with images in their data items). </div>
<br />
<b>Here is a XAML example on how to use the 'CachedImage' control:</b><br />
<br />
<pre class="brush: csharp"><!-- contact image -->
<FFImg:CachedImage
Source="{Binding ProfilePictureUrl}"
LoadingPlaceholder="ic_loader.jpg"
ErrorPlaceholder="profilemale.jpg"
HorizontalOptions="Center"
CacheType="Memory"
Margin="30,20,30,5"
Aspect="AspectFit"
DownsampleWidth="130"
>
<FFImg:CachedImage.Transformations>
<FFTr:CircleTransformation BorderHexColor="#FFFFFFFF" BorderSize="0" />
</FFImg:CachedImage.Transformations>
</FFImg:CachedImage>
</pre>
<br />
<br />
<div style="text-align: center;">
<b>'CachedImage' used in long list for better performances:</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrsbEpO1qgZT-rooE2kpX80revNngYqznP6X4wUAuchAZocFG9CWu890T7rctYuPIGtWb7vZgsgeJyw1uL7t96n0xu8kNRJTyfuTRjzI7AMQ7cu0sCzeaBfzkERUeNENbkaVh4w_WQ2JQ9/s1600/Screenshot_20171122-175908.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="720" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrsbEpO1qgZT-rooE2kpX80revNngYqznP6X4wUAuchAZocFG9CWu890T7rctYuPIGtWb7vZgsgeJyw1uL7t96n0xu8kNRJTyfuTRjzI7AMQ7cu0sCzeaBfzkERUeNENbkaVh4w_WQ2JQ9/s400/Screenshot_20171122-175908.png" width="225" /></a></div>
<br />
<br />
<h3>
<span style="color: blue;">Image loading and PlaceHolders</span></h3>
Thanks to "FFImageLoading" you can load images from different sources (from XAML or code-behind):<br />
<br />
<ul>
<li>- from <b>stream </b>sources</li>
<li>- from <b>file image</b> sources</li>
<li>- or from <b>Uri </b>sources</li>
</ul>
<br />
<div style="text-align: justify;">
But the user-friendly point is that you can specify <b>temporary images</b> for the loading process and in case of error.</div>
<div style="text-align: justify;">
For instance if you load an image from the web, it can take some times, so the temporary picture will be displayed instead. </div>
<div style="text-align: justify;">
And if an error occurs when loading the image, the "Error placeholder image" will be displayed automatically. <b><span style="color: #660000;">From a user point of view, it's really cool and now it costs nothing ;)</span></b></div>
<br />
<br />
<h3>
<span style="color: blue;">Download properties</span></h3>
When you want to display a FFImageLoading image , you can specify several usefull parameters (XAML and code behind).<br />
<br />
<ul>
<li>- we already talk about cache parameters like "<b>CacheDuration</b>" property</li>
<li>- you can also specify "<b>retry</b>" parameters in case of errors like "<b>RetryCount</b>" to tell how many times you want to retry or "<b>RetryDelay</b>" to wait before retrying loading the image.</li>
<li>- But you can also specify download properties like "<b>DownSampleWidth</b>" or "<b>DownSampleHeight</b>" to specify a new size for the downloaded image</li>
</ul>
<br />
<h3>
<span style="color: blue;">SVG / Gif support</span></h3>
<div style="text-align: justify;">
A good point to notice too, is that the library support <b>the SVG and Gif formats</b>. So instead of loading traditionnal pictures, you can load a SVG image for a loading placeholder for instance.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
If you are a good designer and replace your icons and simple pictures by SVG files, it can make you save size on your final app's packages !</div>
<br />
<h3>
<span style="color: blue;">Transformations</span></h3>
FFImageLoading offers "transformation" capabilities. That means that you can apply effects on images before to display it. These effects are of 2 kinds:<br />
<br />
<ul>
<li>- image rendering effects, to apply some effects on colors</li>
<li>- or image clipping effects to make the image looks rounded, circle or cropped...</li>
<li>- AND you can also implement your own effect thanks to the provided "ITransformation" interface !</li>
</ul>
<br />
<div style="text-align: center;">
<b>Some effects / transformations:</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJBrKo5_hJfeVYwvRC-0iupMOm-l4VoFuXY278mmZM74gED7XQew8OfDhD25u-Sr2IoJgAT6TXoHgCSmbqfPrC7tdIyUVfzgupB9niW_MJMdHRtyfUpc5ca2EaUj9x08yMGJFVBwXYuW8i/s1600/android_transformations.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="768" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJBrKo5_hJfeVYwvRC-0iupMOm-l4VoFuXY278mmZM74gED7XQew8OfDhD25u-Sr2IoJgAT6TXoHgCSmbqfPrC7tdIyUVfzgupB9niW_MJMdHRtyfUpc5ca2EaUj9x08yMGJFVBwXYuW8i/s400/android_transformations.png" width="240" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4rXzNw1U1oR2k7HlgLiimTjKoHChcWsDCz4PPhum4-D_rljC3j1LOa24KPSqj_uJIccta8yMN2ieFjkY4pQg21DQb9fgEsJUzom9rMkZ2yC5fR6etCJtVGzVbn7f62Kc3Ndw9MvXJq9ut/s1600/Android_CornersTransformation.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="1280" data-original-width="768" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4rXzNw1U1oR2k7HlgLiimTjKoHChcWsDCz4PPhum4-D_rljC3j1LOa24KPSqj_uJIccta8yMN2ieFjkY4pQg21DQb9fgEsJUzom9rMkZ2yC5fR6etCJtVGzVbn7f62Kc3Ndw9MvXJq9ut/s400/Android_CornersTransformation.png" width="240" /></a></div>
<br />
<br />
<h3>
<span style="color: blue;">Optimizations</span></h3>
<div style="text-align: justify;">
All these features look optimized (without any complicated setup for you) and I didn't really have any issue by using it. I just noticed a<b> better user navigation </b>thanks to the quick loading of images. So if you want to learn more about this library, I suggest you to follow the following links:</div>
<br />
<span style="color: #0b5394;">The Wiki:</span><br />
<a href="https://github.com/luberda-molinet/FFImageLoading/wiki" target="_blank">https://github.com/luberda-molinet/FFImageLoading/wiki</a><br />
<br />
<span style="color: #0b5394;">How to use it in details (tutorial in video):</span><br />
<a href="https://www.youtube.com/watch?v=eVA9C7Ik_AM" target="_blank">https://www.youtube.com/watch?v=eVA9C7Ik_AM</a><br />
<br />
<p>
<br />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3841969086437479"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3841969086437479"
data-ad-slot="4676904854"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
</p>
<div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-83065865320140425842017-11-07T08:38:00.000-08:002017-11-08T01:12:21.941-08:00Xamarin Forms + Parse + Push Notifications + Android = trouble <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFr5Zi80e4RL0svry0UzcuwDi2wfMmB8mdGfXPvK-R4NJBdO8U8C_Yx3NKZgtnRGFQeoYx_O-v-JCLFJZHzoNF3nj4LAbnSJzifoCdLo6Jr8WcNx-ISm2trNq-hgH6xg2VeO5UDU9YeQef/s1600/Parse+SDK+NET+banner.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="362" data-original-width="985" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFr5Zi80e4RL0svry0UzcuwDi2wfMmB8mdGfXPvK-R4NJBdO8U8C_Yx3NKZgtnRGFQeoYx_O-v-JCLFJZHzoNF3nj4LAbnSJzifoCdLo6Jr8WcNx-ISm2trNq-hgH6xg2VeO5UDU9YeQef/s640/Parse+SDK+NET+banner.jpg" width="640" /></a></div>
<br />
<h2>
Quick Introduction</h2>
<div style="text-align: justify;">
It took me some times to implement <b>Parse's push notifications in my</b> <b>Xamarin Forms (Android) </b>application. I find out some issues and made workarounds. Strangely, I have the impression that I'm a rare guy working with Xamarin Forms and Parse... But maybe you are in the same situation that I was. So just read the following.</div>
<div>
<br /></div>
<h2>
The context</h2>
<div style="text-align: justify;">
I'm actually making a (cool) Xamarin Forms app (maybe I will talk about it later in another post). One of my final steps is to implement Push notifications. Details of the context of my project are the following:</div>
<div>
<br /></div>
- Xamarin Forms (Android & iOS) app<br />
- I use Parse server for my business server. Actually I host my Parse server at<a href="https://parse.buddy.com/" target="_blank"> https://parse.buddy.com</a> for convenient reasons but I could host it on many other servers.<br />
<div>
- So logically, for the push notifications, I would like to use Parse push notification service.<br />
- In order to use Parse Services, I use <b><span style="color: #990000;">Parse .NET SDK</span></b> (latest available version is v.1.7.0.0) - note that it's important for the next part ;)<br />
<ul>
</ul>
<div>
<br /></div>
<h2>
The problem (Parse .NET SDK)</h2>
<div>
<br /></div>
<div style="text-align: justify;">
I encountered many problems but specially 2 annoying ones with Parse. </div>
<div style="text-align: justify;">
The first one is that there is no Parse PCL library to use with Xamarin Forms... I talked about it in this post: <b><span style="color: blue;"><a href="https://kampeki-factory.blogspot.fr/2017/05/parse-for-xamarin-forms-no-pcl-my.html" target="_blank">Parse for Xamarin - no PCL, my solution</a>.</span></b></div>
<div style="text-align: justify;">
But my main problem was with push notifications (specially with Android). It was not working and I couldn't find any solution on the web ?! (maybe I'm not efficient enough with Google :p) It took me several days to find a working solution...</div>
<div>
<br /></div>
<div>
Almost my troubles where located in the Parse .NET SDK ! </div>
<div>
</div>
<div>
<br /></div>
<h2>
What are the issues ?!</h2>
<h3>
1- Setup PN for android apps</h3>
<div>
<b>First</b> thing to do is to configure your Android Application. I'm sure you have found many articles on it. But the key points to care of are:</div>
<div>
<ul>
<li>Use FCM (Firebase Cloud Messaging) instead of GCM (former Google Cloud Messaging) because it is deprecated.</li>
<li>Then make a big attention to your androidManifest.xml file. Some sections are mandatory in order to make PN works...</li>
</ul>
<div>
You can find a good article on it here. Take your time and follow the guide step by step: <a href="https://buddy.com/parse/push-configuration/" target="_blank"><span style="color: blue;"><b>https://buddy.com/parse/push-configuration/</b></span></a></div>
<div>
<br /></div>
<div>
For the "AndroidManifest.xml" file, take a look at mine with needed sections and permissions:</div>
<div>
<br />
<br /></div>
<div>
<pre><span style="font-size: x-small;"><?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:installLocation="auto" package="com.yourapp.android" android:versionName="1" android:versionCode="1">
<uses-sdk android:minSdkVersion="21" android:targetSdkVersion="25" />
<uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.VIBRATE" />
<permission android:protectionLevel="signature" android:name="com.yourapp.android.permission.C2D_MESSAGE" />
<uses-permission android:name="com.goodchapp.android.permission.C2D_MESSAGE" />
<application android:label="My app" android:icon="@drawable/icon">
<meta-data android:name="com.parse.push.notification_icon" android:resource="@drawable/icon" />
<meta-data android:name="com.parse.push.gcm_sender_id" android:value="@string/gcm_sender_id" />
<provider android:name="android.support.v4.content.FileProvider" android:authorities="com.yourapp.android.fileprovider" android:exported="false" android:grantUriPermissions="true">
<meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths"></meta-data>
</provider>
<service android:name="parse.ParsePushService" />
<receiver android:name="parse.ParsePushBroadcastReceiver" android:permission="com.google.android.c2dm.permission.SEND">
<intent-filter>
<action android:name="com.google.android.c2dm.intent.RECEIVE" />
<action android:name="com.google.android.c2dm.intent.REGISTRATION" />
<category android:name="com.yourapp.android" />
</intent-filter>
</receiver>
</application>
</manifest></span>
</pre>
</div>
<div>
<br />
Don't forget to replace "com.yourapp.android" by your own app's package name. And I put my GCM_SENDER_ID into the "strings.xml" file.<br />
<b><span style="color: #990000;">GCM_SENDER_ID must be prefixed by "id:", (ie: "id:XXXXXXX")</span></b><br />
<br />
<h3>
2- Parse .NET SDK, issue 1: latest release does not contain fixes</h3>
Yes you read it correctly. As everybody should have done, I used the latest Parse SDK release that can be found here on github:<br />
<a href="https://github.com/parse-community/Parse-SDK-dotNET/releases" target="_blank"><span style="color: blue;"><b>https://github.com/parse-community/Parse-SDK-dotNET/releases</b></span></a><br />
<br />
"Missing SenderID issue": After investigations, I found that there was an interesting bug specifically on push notifications... but I also noticed that this bug was already corrected...<br />
<br />
ref: <a href="https://github.com/parse-community/Parse-SDK-dotNET/issues/194" target="_blank"><b><span style="color: blue;">https://github.com/parse-community/Parse-SDK-dotNET/issues/194</span></b></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Wz9cO-uf0ZSx10XqnNFc2Up0kTFnk52CXTgo_5QXmU_Y5W-Ycq0I8jnAXqnwGuYrSiunhAogukXMdS4vgPcTgI6pdZC7TyGUcWhbPl1sREY90iPMTw-BicsgxRv54tA3c-Y11Cv7YFlV/s1600/Parse+SDK+NET+issue+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1031" data-original-width="1056" height="624" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Wz9cO-uf0ZSx10XqnNFc2Up0kTFnk52CXTgo_5QXmU_Y5W-Ycq0I8jnAXqnwGuYrSiunhAogukXMdS4vgPcTgI6pdZC7TyGUcWhbPl1sREY90iPMTw-BicsgxRv54tA3c-Y11Cv7YFlV/s640/Parse+SDK+NET+issue+1.jpg" width="640" /></a></div>
<br />
<br />
As you can see, the fix has been made on March 2016. The latest SDK release is from January 2016... <b><span style="color: #990000;">So the latest release doesn't contain bug fixes !</span></b><br />
<br />
<br />
<h3>
3- Issue 2: GET_ACCOUNTS permissions uneeded</h3>
There is also a second issue that has not been merged into the latest release. It concerns a permissions in the "AndroidManifest.xml" file that you must not set !<br />
<br />
This is the "Get_ACCOUNTS" permission. <b><span style="color: #990000;">Be sure to remove it from your manifest in order to get Parse PN working EVEN IF A DEBUG MESSAGE TELLS you that this permission is needed</span></b>...<br />
<br />
ref: <a href="https://github.com/parse-community/Parse-SDK-dotNET/pull/223" target="_blank"><span style="color: blue;"><b>https://github.com/parse-community/Parse-SDK-dotNET/pull/223</b></span></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtWPBE4t4mX_yBE4XF2szMSIAjsWlMfEZCdpzJSZjgUMzNBLkOd-CraH0Y80iYL1XKDN_n4STQUcqF5Z7854NmLuuzQ1Ew80xPlcpK2boOxkYSELH5mOgJr_bJOANSAgcdqzgS2uCLIIFP/s1600/Parse+SDK+NET+issue+2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="766" data-original-width="795" height="616" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtWPBE4t4mX_yBE4XF2szMSIAjsWlMfEZCdpzJSZjgUMzNBLkOd-CraH0Y80iYL1XKDN_n4STQUcqF5Z7854NmLuuzQ1Ew80xPlcpK2boOxkYSELH5mOgJr_bJOANSAgcdqzgS2uCLIIFP/s640/Parse+SDK+NET+issue+2.jpg" width="640" /></a></div>
<br />
<br />
It took me too much time to understand that :p ! And the last problem will make you understand why !<br />
<br />
<h3>
4- Issue 3: Invalid debug messages in the SDK :'(</h3>
Finally, as I told you, I found invalid debug messages in the SDK source code. So that's why I didn't understand quickly what was happening.<br />
<br />
In particular in this file:<br />
<a href="https://github.com/parse-community/Parse-SDK-dotNET/blob/5fc0a7ef101708e0402ad394ae4ba4f829a700a8/ParsePush/Internal/Android/ManifestInfo.cs" target="_blank"><span style="color: blue;">https://github.com/parse-community/Parse-SDK-dotNET/blob/5fc0a7ef101708e0402ad394ae4ba4f829a700a8/ParsePush/Internal/Android/ManifestInfo.cs</span></a><br />
<br />
Take a look at the picture bellow. I thought I was dealing with a specific problem but in fact it was another :'0<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhs0MPrncSiccFm7M2VbD0Hpg-ubzUVI5hfwbX2nHYa2Bi_PD7sWhI-GHz09hOVcBnsyGAVNtT4qVytA5TFNRYZPOwNKK8FJspABzdNWwV6bzsNLBMQfmdGmim06TSZOmujaXzYCSSadI0/s1600/Parse+SDK+NET+issue+3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1287" data-original-width="993" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhs0MPrncSiccFm7M2VbD0Hpg-ubzUVI5hfwbX2nHYa2Bi_PD7sWhI-GHz09hOVcBnsyGAVNtT4qVytA5TFNRYZPOwNKK8FJspABzdNWwV6bzsNLBMQfmdGmim06TSZOmujaXzYCSSadI0/s1600/Parse+SDK+NET+issue+3.jpg" /></a></div>
<br />
<br />
<br />
<h2>
Finally what did I do ?</h2>
As I have no more time, I did what nobody should do when publishing a "production" application :p<br />
- I took the latest release source code<br />
- Then I corrected by myself the mentionned issues (using the work already done by Richard Ross on github).<br />
<br />
- Finally I recompiled a release version for Android only. If you are interested, you can download the recompiled Parse.Android.dll file below. I gave it the version number 1.7.0.1.<br />
<br />
<a href="https://drive.google.com/file/d/118mbbX2IBWWjNEWTBLcamAbLOwBnlqXp/view?usp=sharing" target="_blank"><b><span style="color: blue;">Parse.Android.dll (v.1.7.0.1 with Push notification fixes)</span></b></a><br />
<br />
(enjoy)<br />
<br />
<br /></div>
</div>
</div>
<div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com2tag:blogger.com,1999:blog-4067499137469379895.post-580559889100555952017-06-30T01:17:00.001-07:002021-09-01T07:17:22.839-07:00Shuffle List in C#<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEQQRtWJMB45QyrwHLh-cBVyTuADCiQr2PmHypMWa-bhYNshZ1Cih67a0XpXDSdtIxfwC_sYIJLl1uHQpx7f8uVOywzQgt5q6opIpEAo0kFruL0dCZ88IwXNFvNQV3dDoISQhuL6EHlgV2/s1600/shuffle+list+csharp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="598" data-original-width="1300" height="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEQQRtWJMB45QyrwHLh-cBVyTuADCiQr2PmHypMWa-bhYNshZ1Cih67a0XpXDSdtIxfwC_sYIJLl1uHQpx7f8uVOywzQgt5q6opIpEAo0kFruL0dCZ88IwXNFvNQV3dDoISQhuL6EHlgV2/s640/shuffle+list+csharp.jpg" width="640" /></a></div>
<br />
<br />
<div style="text-align: justify;">
Yesterday, I was looking for <b>an algorithm to shuffle a list of objects</b> in C#. So in my mind, I started to think about "complex" algorithms to do that, using random numbers and list elements switching...</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
I say "complex" because while I was googling, I found a good solution to do that ! And it takes only 1 line :p I would have never thinked of that :) :)</div>
<br />
Here is the cool code:<br />
<br />
<pre class="brush: csharp">var shuffledList = myObjectList.OrderBy(item => Guid.NewGuid());
</pre>
<br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
So, that's really simple. You can use the "OrderBy()" <b>Linq</b> extension to rearrange the list. This method will take a 'random' object, in this case a GUID. And we know that GUIDs are 'unique' so, it does the job!</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
You can use variants like this one:</div>
<div style="text-align: justify;">
<br /></div>
<pre class="brush: csharp">var rnd = new Random();
var shuffledList = myObjectList.OrderBy(rnd.Next());
</pre>
<br />
<br />
Next step, compare performances, between different solutions...
<p>
<br />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3841969086437479"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3841969086437479"
data-ad-slot="4676904854"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
</p>
<div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com1tag:blogger.com,1999:blog-4067499137469379895.post-14457322374919602792017-06-20T06:53:00.000-07:002017-11-26T13:07:53.335-08:00Visual Studio for MAC, review (fr)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjokfgiH8pxa60DvzDo7jipzyG04ZqEbiR2dDcby1JxQBgJcewJRo3EqLG8dCwQPFBb7mjnAw7TQ6J-56RylJp3bUpmIYSKpYj1bUBRoeMx9r1ZocETSCyhmZIN1gkVdyIqwqKJSeYArWN3/s1600/VS+MAC+-+preview.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="947" data-original-width="1600" height="377" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjokfgiH8pxa60DvzDo7jipzyG04ZqEbiR2dDcby1JxQBgJcewJRo3EqLG8dCwQPFBb7mjnAw7TQ6J-56RylJp3bUpmIYSKpYj1bUBRoeMx9r1ZocETSCyhmZIN1gkVdyIqwqKJSeYArWN3/s640/VS+MAC+-+preview.jpg" width="640" /></a></div>
<br />
<br />
<div style="text-align: justify;">
If you are a developer, there are many chance that you already used Visual Studio, the famous Microsoft's IDE.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Visual Studio for MAC is borned a few weeks ago</b>. But is it a productive tool like on PC ? If you are a Xamarin Developer and never tried it, I suggest you to take a look at this short review to get some clues !</div>
<div style="text-align: justify;">
<br /></div>
This review is avaible in french on <a href="http://www.mobilissime.fr/" target="_blank">mobilissime.fr</a>:<br />
<a href="http://www.mobilissime.fr/index.php/2017/06/20/visual-studio-pour-mac-petite-revue-de-lide/" target="_blank"><span style="color: blue;">http://www.mobilissime.fr/index.php/2017/06/20/visual-studio-pour-mac-petite-revue-de-lide/</span></a><br />
<br />
<br />
<br /><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-3386855765983899632017-06-16T13:55:00.001-07:002021-09-01T07:17:04.297-07:00[Xamarin Forms] Custom bottom bordered entry (iOS & Android)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9aD4le0tUv1k5oUbbG9SJwK_vqOdQ-GQkSJHeU5PIU06k4txaGFtBcb0zzFmeZfdmSpv4P2vGXs5ZhYzjd3ZUPXtF4gzY2Q5GPCxr7_l2lPrtl8h65KOqUKOIpSBOa5lQy8PlFXV-tQaE/s1600/xamarin_forms_custom_renderers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="407" data-original-width="871" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9aD4le0tUv1k5oUbbG9SJwK_vqOdQ-GQkSJHeU5PIU06k4txaGFtBcb0zzFmeZfdmSpv4P2vGXs5ZhYzjd3ZUPXtF4gzY2Q5GPCxr7_l2lPrtl8h65KOqUKOIpSBOa5lQy8PlFXV-tQaE/s400/xamarin_forms_custom_renderers.png" width="400" /></a></div>
<h3>
<br /></h3>
<h3>
Custom entry with renderers</h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
For my Xamarin Forms project I needed to render <b>an 'Entry' control with a bottom border</b> of a specific color. There are several possibilities but I will show you mine.<br />
<br />
For that, I used renderers. iOS one is particularly not trivial.<br />
The wished result look like that:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCa-uyytT9veBkW74CAcJjthxDF0lG2dp1vtyL5kUyISke4afJKvQJ8lsvdo-G8cwvd-Gx6L-ldDmAgPLZvFssbZI7Lwcg_sdq9rhUvvs8SnOQg6FwJk0y5hbz8qvpn0jzL-f35ZYeoI9M/s1600/custom+entry.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="272" data-original-width="366" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCa-uyytT9veBkW74CAcJjthxDF0lG2dp1vtyL5kUyISke4afJKvQJ8lsvdo-G8cwvd-Gx6L-ldDmAgPLZvFssbZI7Lwcg_sdq9rhUvvs8SnOQg6FwJk0y5hbz8qvpn0jzL-f35ZYeoI9M/s400/custom+entry.jpg" width="400" /></a></div>
<br />
<br />
<h3>
iOS Renderer</h3>
<pre class="brush: csharp">[assembly: ExportRenderer(typeof(ExtDatePicker), typeof(ExtDatePickerRenderer))]
namespace MyCompany.iOS.Renderers
{
public class ExtDatePickerRenderer : DatePickerRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
{
base.OnElementChanged(e);
// Need to connect to Sizechanged event because first render time, Entry has no size (-1).
if (e.NewElement != null)
e.NewElement.SizeChanged += (obj, args) =>
{
var xamEl = obj as DatePicker;
if (xamEl == null)
return;
// get native control (UITextField)
var entry = this.Control;
// Create borders (bottom only)
CALayer border = new CALayer();
float width = 1.0f;
border.BorderColor = new CoreGraphics.CGColor(0.73f, 0.7451f, 0.7647f); // gray border color
border.Frame = new CGRect(x: 0, y: xamEl.Height - width, width: xamEl.Width, height: 1.0f);
border.BorderWidth = width;
entry.Layer.AddSublayer(border);
entry.Layer.MasksToBounds = true;
entry.BorderStyle = UITextBorderStyle.None;
entry.BackgroundColor = new UIColor(1, 1, 1, 1); // white
};
}
}
}
</pre>
<br />
In iOS, the native control used to represent an 'Entry' is a 'UITextField' control.<br />
<b>The key point</b> is that we need our renderer to update this 'UITextField' on SizeChanged event and not on the traditional 'OnElementChanged' event.<br />
<br />
Why because, the size is not yet computed when we enter the 'OnElementChanged' event. So we can draw our bottom line as we don't know its lenght...<br />
<br />
<h3>
Android Renderer</h3>
For Android, I decided to make a really simple renderer that will use a drawable resource as a background. Here is how I did:<br />
<br />
<b>First step</b>, add the xml file that contains the "shape" in your android project resources:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWIUGjuQUZTvXfRcMIjInh6b44-NU8ayn8guNfXpG52JX7NyER6rkIi7JfBqt32Dm0f0goG8x4gYqUub4QkCrUvX_DhhPdWCwSKsetLJ4FW8xodcIuopGKLhgYhZSJtY_TDDWpO9cOnjru/s1600/android+renderer+add+xml+shape.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="292" data-original-width="287" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWIUGjuQUZTvXfRcMIjInh6b44-NU8ayn8guNfXpG52JX7NyER6rkIi7JfBqt32Dm0f0goG8x4gYqUub4QkCrUvX_DhhPdWCwSKsetLJ4FW8xodcIuopGKLhgYhZSJtY_TDDWpO9cOnjru/s320/android+renderer+add+xml+shape.jpg" width="314" /></a></div>
<br />
<b>The 'shape' (xml drawable resource)</b><br />
To make the bottom line, I found on Stackoverflow a nice solution. You just have to generate a gradient from the desired border color to the transparent color with the border color having a really small height (making a line).<br />
<br />
Here is the code:<br />
<pre class="brush: xml"><?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:angle="90"
android:startColor="#FFBBBEC3"
android:centerColor="@android:color/transparent"
android:centerX="0.01"
/>
</shape>
</pre>
<br />
<b>And finally the renderer:</b><br />
<pre class="brush: csharp">[assembly: ExportRenderer(typeof(ExtEntry), typeof(ExtEntryRenderer))]
namespace GoodChapp.Android.Renderers
{
public class ExtEntryRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
// Background
Control.SetBackgroundResource(Resource.Drawable.ExtEntryShape);
}
}
}
}
</entry></pre>
<br />
<h3>
The final results (Android & iOS)</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3oOThMSoCXi4Me9AeFDpTeSPRJDgIsf4qjo3W0UvEwSbICLvIW8EE_fuwlK_iiPGptmd3OB6vwmLfqm5RJ_M7aOGPoRDA3kjPo9zlHGzaswuNyhgs1tackyxvKyQPyiQh7-UX5ek04n9S/s1600/result+android.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="720" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3oOThMSoCXi4Me9AeFDpTeSPRJDgIsf4qjo3W0UvEwSbICLvIW8EE_fuwlK_iiPGptmd3OB6vwmLfqm5RJ_M7aOGPoRDA3kjPo9zlHGzaswuNyhgs1tackyxvKyQPyiQh7-UX5ek04n9S/s400/result+android.jpg" width="225" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyKC_Ztx8ClgYGG1Lc-3AObZ1g4xD6oyLK5ZUWf9pSPjpCNepzsGtnJKES4uPIDESVU9S5BKp3UNikWIwpSkm9FRA3VzClWH1pww8YB81ddSa-wf5KZQxa6CCzypMIDGtYqrLfgyOd__ah/s1600/result+ios.jpg" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="1136" data-original-width="640" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyKC_Ztx8ClgYGG1Lc-3AObZ1g4xD6oyLK5ZUWf9pSPjpCNepzsGtnJKES4uPIDESVU9S5BKp3UNikWIwpSkm9FRA3VzClWH1pww8YB81ddSa-wf5KZQxa6CCzypMIDGtYqrLfgyOd__ah/s400/result+ios.jpg" width="225" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Surely, you can change the border color and any other properties !</div>
<div>
<br /></div>
<div>
<br /></div>
<p>
<br />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3841969086437479"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3841969086437479"
data-ad-slot="4676904854"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
</p>
<div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com6tag:blogger.com,1999:blog-4067499137469379895.post-59514369841448170462017-06-16T06:38:00.001-07:002017-06-16T14:04:23.518-07:00[Xamarin Forms] build error: Unable to cast object of type 'Xamarin.Forms.Xaml.ElementNode' to type 'Xamarin.Forms.Xaml.ValueNode'<h3>
Xaml build error</h3>
For one of my Xamarin project, I just had this build error:<br />
This error was <b>related to my XAML code</b>:<br />
<br />
<b>Unable to cast object of type 'Xamarin.Forms.Xaml.ElementNode' to type 'Xamarin.Forms.Xaml.ValueNode'</b><br />
<br />
After searching for a long 'moment', I just didn't understand what happened...<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlA9zQ7KrW2yyUFfl0OwWNBYRs0uHC7W4AZLb-tgrDAFmHL2pFs24GSaQifQ_Y1YS2MXpZL5Kbpq6j6J5b3-1_ivUTnLZE1a2knRP8SxJONlYTd39WSp3mU-OeuzKKwGoymIL4lkzliyjY/s1600/unable+to+cast+XF+error.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="115" data-original-width="801" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlA9zQ7KrW2yyUFfl0OwWNBYRs0uHC7W4AZLb-tgrDAFmHL2pFs24GSaQifQ_Y1YS2MXpZL5Kbpq6j6J5b3-1_ivUTnLZE1a2knRP8SxJONlYTd39WSp3mU-OeuzKKwGoymIL4lkzliyjY/s640/unable+to+cast+XF+error.jpg" width="640" /></a></div>
<br />
<br />
<h3>
My investigation (this process can help you :p)</h3>
So I decided to remove a large part of my xaml code and then re-add it little by little. Each step I tried to compile to see when error occurs.<br />
<br />
So In my case, I determined that the piece of code that was going wrong was the following:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXaUth48bSlmweVEGx6ZVeCo9Eo0fhRkda8J_xgwlt_AkjjBKtQ-u0nk1yWEsvjGdJ8UxhRZj2Kx8vWuqs4LbiqlT7xdb6A0jHFBBk-4zz6vwvmOKrveetVskmYrGdwN7yhkOyDGIqxicC/s1600/error+source+-+binding+to+event.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="111" data-original-width="602" height="118" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXaUth48bSlmweVEGx6ZVeCo9Eo0fhRkda8J_xgwlt_AkjjBKtQ-u0nk1yWEsvjGdJ8UxhRZj2Kx8vWuqs4LbiqlT7xdb6A0jHFBBk-4zz6vwvmOKrveetVskmYrGdwN7yhkOyDGIqxicC/s640/error+source+-+binding+to+event.jpg" width="640" /></a></div>
<br />
<br />
Ok, it was my mistake but in the code editor, Visual Studio didn't tell me anything.<br />
I was trying to bind an event (<b>I though it was a property</b>) to a DateTime property... What is not possible.<br />
<br />
Hope this helps someone to save a few minutes :)<br />
<br /><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com6tag:blogger.com,1999:blog-4067499137469379895.post-33996664996272790902017-05-27T06:10:00.000-07:002017-05-27T06:18:15.708-07:00Parse for Xamarin Forms - No PCL, my solution with conditional builds<h2>
About Parse</h2>
<div style="text-align: justify;">
In my previous article (or next, we will see ;) I talk about Parse BaaS. This is a 'Back end As Services' that offers you simple but really convenient back end capabilities for storage but also managing users... I approach why I choose this technology for my mobile application, looking for advantages and drawbacks.</div>
<span style="text-align: justify;">Parse, after being purchased by Facebook, was closed last year, but fortunately, the source code is open source and <b>Parse still exists</b>. So you can install your own server or use the new Parse on Buddy platform for instance. You can take a look here: </span><a href="https://buddy.com/parse/" style="text-align: justify;" target="_blank">https://buddy.com/parse/</a><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_pwKLdUu-iHHgVlR7XlmG2ZXAeTXKpKTBBnNKA35wLeoXpw9apn4W6fO38fRaf5dMTi0ssDYpU4KTz9gAhhT_sIJWC7z3ifrg1x_pOTNLHroAtnABIGt82pGddoaHWTX_KaQdWAfYWtGW/s1600/Capture+d%2527e%25CC%2581cran+2017-05-27+a%25CC%2580+15.05.32.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="1086" data-original-width="1600" height="434" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_pwKLdUu-iHHgVlR7XlmG2ZXAeTXKpKTBBnNKA35wLeoXpw9apn4W6fO38fRaf5dMTi0ssDYpU4KTz9gAhhT_sIJWC7z3ifrg1x_pOTNLHroAtnABIGt82pGddoaHWTX_KaQdWAfYWtGW/s640/Capture+d%2527e%25CC%2581cran+2017-05-27+a%25CC%2580+15.05.32.png" width="640" /></a><br />
<br />
<h2>
The problem with Parse for Xamarin Forms</h2>
<div style="text-align: justify;">
So, actually the problem is that we can find .NET Xamarin SDK but specifically for iOS and Android frameworks. <b>There is no SDK for Xamarin Forms.</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The ideal solution could be the following:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBMaybFqN2QxmhTe-b8sCbrbN_14h4jGUZRmYMVnvcsVDym0zimiOaQFKiKKfgOzr9rchcLvwXx5BkJblhwxpVK-EijDHdHSKgbsMx_mHMd0gDodzodwCrCIHuWyj6M9zps9M1_CVtYhwp/s1600/Parse+assemblies+ideal+solution.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="628" data-original-width="1059" height="378" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBMaybFqN2QxmhTe-b8sCbrbN_14h4jGUZRmYMVnvcsVDym0zimiOaQFKiKKfgOzr9rchcLvwXx5BkJblhwxpVK-EijDHdHSKgbsMx_mHMd0gDodzodwCrCIHuWyj6M9zps9M1_CVtYhwp/s640/Parse+assemblies+ideal+solution.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Many 'pseudo' solutions can be found on internet but I will give you mine, <b>using conditional builds</b> in Visual Studio.</div>
<div style="text-align: justify;">
I have to mention that some solutions found on internet will work on Visual Studio for PC but not with the new edition of <b>Visual Studio for MAC</b>... So don't be surprised</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<h2>
My 'pseudo' solution, conditional builds</h2>
<div>
<span style="color: #38761d;">Its an easy solution and just need few configuration steps described bellow. I just use build configurations and conditional building based on these configurations.</span></div>
<div>
<br /></div>
</div>
<div style="text-align: justify;">
<h3>
1- Download latest Parse's assemblies</h3>
The first is to download the latest official Parse's assemblies for android and iOS (in my case 1.7.0.0).<b> I don't use Nuget packages </b>for several reasons. The first is that there is multiple Nuget packages and we don't really know which one to choose (I tried and some don't work with Xamarin)...<br />
<br /></div>
<div style="text-align: justify;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Ww56iOGAb8l-pNry5FprIEZ-8C4Ct45NyI7ysc6PfeF5w7rIoCOWp7bQSua-8iMu555nyDAE3y2MuqpGEMRlHdEHpFMd1WWvvBPFlnQdEkz2PAv1usucBHyOTdpfBlInu32zRhyphenhyphenE7Xi9/s1600/parse+nuget+packages.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" data-original-height="1414" data-original-width="1600" height="563" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Ww56iOGAb8l-pNry5FprIEZ-8C4Ct45NyI7ysc6PfeF5w7rIoCOWp7bQSua-8iMu555nyDAE3y2MuqpGEMRlHdEHpFMd1WWvvBPFlnQdEkz2PAv1usucBHyOTdpfBlInu32zRhyphenhyphenE7Xi9/s640/parse+nuget+packages.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Multiple Parse's nuget packages</td></tr>
</tbody></table>
You can download correct DLLs from here:<br />
<a href="https://github.com/parse-community/Parse-SDK-dotNET/releases/tag/1.7.0" target="_blank">https://github.com/parse-community/Parse-SDK-dotNET/releases/tag/1.7.0</a><br />
<br />
<br />
<h3>
2- Copy Parse DLL alongside the nuget packages</h3>
Next, I placed these DLLs in a specific folder in my solution to embed it into my source control. I don't want them managed as Nuget packages because it's not.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw3ef3tnskKBzyH3o-oKP6VwMQGCP4w42SIzqQgn6NBMwlLh5Zs5waI_ObWLfCSih7i7ECRKZrTDh9eMwnpKoK6K5FLakpxpquNKPJn_xqx3c5pifrXsRNj6DjyIbr9puaQTbxHid2PqIb/s1600/embed+parse+DLLs.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="410" data-original-width="1507" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw3ef3tnskKBzyH3o-oKP6VwMQGCP4w42SIzqQgn6NBMwlLh5Zs5waI_ObWLfCSih7i7ECRKZrTDh9eMwnpKoK6K5FLakpxpquNKPJn_xqx3c5pifrXsRNj6DjyIbr9puaQTbxHid2PqIb/s640/embed+parse+DLLs.jpg" width="640" /></a></div>
<br />
<br />
<h3>
3- Make new build configurations</h3>
Under my solution in Visual Studio I then next generate <b>new build configurations</b> based on the existing ones, as on the schema bellow. In my case I created a new build configuration designed specifically for iOS platform.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi461vYAgPNbYymZQc9om1CxfADCQ55Rn1pgBHhraCUsWf3tK0aDwsD38fZZ9VfPxgUcRS34_Ud1Lz_2ysgJzy1Ov0P5Qz4qd1RhsMaA4bAHXEeUEO7kB2aXDSLVpuyM4LOTbU5qq4pzXpG/s1600/schema+build+config.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="701" data-original-width="628" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi461vYAgPNbYymZQc9om1CxfADCQ55Rn1pgBHhraCUsWf3tK0aDwsD38fZZ9VfPxgUcRS34_Ud1Lz_2ysgJzy1Ov0P5Qz4qd1RhsMaA4bAHXEeUEO7kB2aXDSLVpuyM4LOTbU5qq4pzXpG/s400/schema+build+config.jpg" width="357" /></a></div>
<br />
These new configurations are just copies of existing ones. Then in Visual Studio:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTgDCfdo0j8nCQ6hrJmglEyssYWqD3O3prkQFT6sn-dRvT0FZh7V5vqewwQJ8_ici32BQruAhCWovet-EcACj271bzBwbKq6EimDBLZqCISFO4Rfrdz0fnjH33stp_wXAlFhtGDTCNP6G/s1600/build+config+add+new.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="837" data-original-width="1112" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTgDCfdo0j8nCQ6hrJmglEyssYWqD3O3prkQFT6sn-dRvT0FZh7V5vqewwQJ8_ici32BQruAhCWovet-EcACj271bzBwbKq6EimDBLZqCISFO4Rfrdz0fnjH33stp_wXAlFhtGDTCNP6G/s400/build+config+add+new.jpg" width="400" /></a></div>
<br />
For more information on how to create new build definitions, please refer to the documentation:<br />
<a href="https://msdn.microsoft.com/en-us/library/kkz9kefa.aspx" target="_blank">https://msdn.microsoft.com/en-us/library/kkz9kefa.aspx</a><br />
<br /></div>
<div style="text-align: justify;">
<br />
<h3>
4- Conditional build depending on current build configuration</h3>
Why to create copy of a build configuration ?<br />
In fact we will select the 'correct' Parse DLL depending on the current build configuration (depending on the platform we want to generate the application).<br />
<br />
If 'Debug' --> Get Parse.Android to build the solution<br />
if 'Debug iOS' --> Get Parse.iOS to build the solution<br />
<br />
This is done by <b>manually </b><b>modifying the *.csproj</b> (the project) that use Parse. In our example, we would modify 'BusinessLayer.csproj'. <span style="color: red;">W</span><b><span style="color: red;">e have to add the conditional reference to the correct Parse DLL</span>:</b></div>
<div style="text-align: justify;">
<br /></div>
<pre class="brush: xml"> <Choose>
<When Condition="'$(Configuration)' != 'DebugiOS'">
<ItemGroup>
<Reference Include="Parse.Android, Version=1.7.0.0, Culture=neutral, processorArchitecture=MSIL">
<HintPath>..\..\packagesExt\Parse.Android\Parse.Android.dll</HintPath>
</Reference>
</ItemGroup>
</When>
<When Condition="'$(Configuration)' == 'DebugiOS'">
<ItemGroup>
<Reference Include="Parse.iOS, Version=1.7.0.0, Culture=neutral, processorArchitecture=MSIL">
<HintPath>..\..\packagesExt\Parse.iOS\Parse.iOS.dll</HintPath>
</Reference>
</ItemGroup>
</When>
</Choose>
</pre>
<br />
*.csproj file should look something like that:
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhanIlE-xYG_1HLVaSoSajvbq9PWIxZqnu1xZBJguAhQZrAtyQeMl7gb7sDNESnhpTdPsXJqrmKoMGufiNRZTOuVD97HevhvD5jMeDXTmj73MI55w70IhaFxrP0C0G_gU753LHg0GTbRyaz/s1600/csproj+preview.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1064" data-original-width="1600" height="424" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhanIlE-xYG_1HLVaSoSajvbq9PWIxZqnu1xZBJguAhQZrAtyQeMl7gb7sDNESnhpTdPsXJqrmKoMGufiNRZTOuVD97HevhvD5jMeDXTmj73MI55w70IhaFxrP0C0G_gU753LHg0GTbRyaz/s640/csproj+preview.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3>
5- Select build configuration to build expected platform's app</h3>
Now, you just have to select the correct build configuration to build your app. It will automatically include the Parse DLL corresponding to the platform for which you are building the app.
<br />
<br />
<b><span style="color: red;">Warning</span></b>
In visual Studio for MAC, in the solution explorer, the reference is not refreshed automatically. But the build process choose the right assembly.
<br />
<br />
Bellow, building for iOS reference only Parse for iOS assembly:
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijRQzNNhDSwqP9GqjcF_hb41wdYuoERjzZWvPPTsLzaYsXyCAG7sUf3Gaugn2pru4-7xzEdoiMPSHdHufqdcmQqkIqxBXHpsIgDQA7Vnh5tPo6MapXS0TufdOhrsYGCR45Mt002J2Bse9C/s1600/good+parse+DLL+embedded.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1098" data-original-width="1600" height="439" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijRQzNNhDSwqP9GqjcF_hb41wdYuoERjzZWvPPTsLzaYsXyCAG7sUf3Gaugn2pru4-7xzEdoiMPSHdHufqdcmQqkIqxBXHpsIgDQA7Vnh5tPo6MapXS0TufdOhrsYGCR45Mt002J2Bse9C/s640/good+parse+DLL+embedded.jpg" width="640" /></a></div>
<br />
And voila !<br />
If you have any question don't hesitate.<br />
<br /><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-86041910348931936762017-05-12T02:32:00.001-07:002017-05-12T05:22:06.165-07:00[Xamarin Forms] XAML previewer in Visual Studio 2017 (really slow)<h2>
Preview my Xamarin Forms XAML ?</h2>
<div style="text-align: justify;">
Today, I started a new Xamarin Forms application and for that I decided to use Visual Studio 2017 Community edition.</div>
<div style="text-align: justify;">
Why ? Because I know that this version includes interesting features to me. <b><span style="color: purple;">One of this feature is that we can preview our Xamarin Forms XAML pages</span></b> (theorically in a better way than in VS2015).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
First, we have to notice that to preview XF XAML pages, we don't use the exact same way as with traditional XAML pages. In fact what we are looking for is not the designer but the <b>Xamarin Forms Previewer Window</b>. Take a look at the next steps to understand the differences... </div>
<div style="text-align: justify;">
<br />
There is not a lot of details on Xamarin Web site:<br />
<a href="https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-previewer/"><b>https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-previewer/</b></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZTiNtW37Rqa9mKOlwz9KUrAnGjLcYvPRQpSSO6F8gh-CzkuBA7L5SK0UebDD0U7iHCj8EHz8Be7lwIVL6_ngDH64AnD8ojqBcnGq1WjLivO6xdAMvgJ7ZUUa1Mq7MUq1RZ3afOPD4JhQX/s1600/XF+website.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="299" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZTiNtW37Rqa9mKOlwz9KUrAnGjLcYvPRQpSSO6F8gh-CzkuBA7L5SK0UebDD0U7iHCj8EHz8Be7lwIVL6_ngDH64AnD8ojqBcnGq1WjLivO6xdAMvgJ7ZUUa1Mq7MUq1RZ3afOPD4JhQX/s640/XF+website.jpg" width="640" /></a></div>
<br />
<br /></div>
<h2>
XAML Designer vs Xamarin Forms Previewer</h2>
On a XF XAML page, right click on the code:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSovttbhrNt_hQ73_mNPFO9YVSam49wYWehf6kaVItdp947-3O4IenIRr_htgnVZwOQh1yIP0sakJpcdR0FQ7rXqmIp8gyvaPg6yyCPZdvrhch87FgiUGWflcKzaIyjFKwDyoTzIT4_rkm/s1600/xaml+designer+menu.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSovttbhrNt_hQ73_mNPFO9YVSam49wYWehf6kaVItdp947-3O4IenIRr_htgnVZwOQh1yIP0sakJpcdR0FQ7rXqmIp8gyvaPg6yyCPZdvrhch87FgiUGWflcKzaIyjFKwDyoTzIT4_rkm/s400/xaml+designer+menu.jpg" width="390" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Using traditional "Designer menu" as for traditional XAML page</td></tr>
</tbody></table>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHIFDLNHk3Jus8DQyGwalTfkb5MtsSv-5d00fd5AJkhdiD0ZOceER4oy6Go5ShqUz4gNzJQKTqcFCm7kCBBiGPpIA80WwDpMdRcVrtZosixKTmSkQawvSaeluQ2Ffm-N8U8NwiFyymPyY7/s1600/Designer+error.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHIFDLNHk3Jus8DQyGwalTfkb5MtsSv-5d00fd5AJkhdiD0ZOceER4oy6Go5ShqUz4gNzJQKTqcFCm7kCBBiGPpIA80WwDpMdRcVrtZosixKTmSkQawvSaeluQ2Ffm-N8U8NwiFyymPyY7/s400/Designer+error.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">We got an error</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Then use the previewer (<b>menu VIEW\Other Windows\Xamarin.Forms.Previewer</b>) !<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrit51ki5FLjORHgQ4zb9KrcpzyzoXlIQpggRjdwVsuBnRhZ0NbsrnHMR6PkMMfF2hmBzSAXjx2PqiDLN-m5g2pmZFPPqvGXDjpzx-GyWO7DDJjE2sQhRJTB4cUVksRAIAQQvZE_KJDoVy/s1600/xamarin+previewer+menu+1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrit51ki5FLjORHgQ4zb9KrcpzyzoXlIQpggRjdwVsuBnRhZ0NbsrnHMR6PkMMfF2hmBzSAXjx2PqiDLN-m5g2pmZFPPqvGXDjpzx-GyWO7DDJjE2sQhRJTB4cUVksRAIAQQvZE_KJDoVy/s640/xamarin+previewer+menu+1.jpg" width="399" /></a></div>
<br />
Then after 'some times', the previewer Window appears:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjX3FaFP33Am_xxWAqs06MRLSQvvdkhjsdZ_wJSAGG-DuM6Z7oDUIZ654SZKCLG8x56AYQFluOeKaDSqTMa-Jz91YriWkINCIChTV0La4YGohkf03ClMuvOMLd3NZiBith02qY8bWKQVG1/s1600/xamarin+forms+xaml+previewer+window.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjX3FaFP33Am_xxWAqs06MRLSQvvdkhjsdZ_wJSAGG-DuM6Z7oDUIZ654SZKCLG8x56AYQFluOeKaDSqTMa-Jz91YriWkINCIChTV0La4YGohkf03ClMuvOMLd3NZiBith02qY8bWKQVG1/s640/xamarin+forms+xaml+previewer+window.jpg" width="379" /></a></div>
<br />
<br />
<br />
<h2>
XF Previewer, is it cool and smooth ?</h2>
Unfortunately for me, I cannot modify my code while the previewer is opened. <b>It is extremely slow</b> to update changes...<br />
<br />
So I know that the previewer is still in "Preview", <span style="color: #660000;"><b>but as is, I can't use it</b></span>. I have to type my code then If I really need, open the previewer Window.<br />
<br />
Bellow, here are the messages from Visual Studio showing me performances issue:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIaztWsvBkzD5MvVu2wlpjk81ySWSBFtRYCIDfUS2Om7V3VlrWKDzFJ8061yuCLTAHjL5wgpf0KAs9pf8fo5UR3Nkgg_yTGorB5ZDFncYie3KQS-3BgtaJBl1ZQhxlwgyTMykSL1Xuvm92/s1600/VS+slow+message.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIaztWsvBkzD5MvVu2wlpjk81ySWSBFtRYCIDfUS2Om7V3VlrWKDzFJ8061yuCLTAHjL5wgpf0KAs9pf8fo5UR3Nkgg_yTGorB5ZDFncYie3KQS-3BgtaJBl1ZQhxlwgyTMykSL1Xuvm92/s640/VS+slow+message.jpg" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVln-3Nc5IAX8Tkxsx5DtqqezdEabrOEgUk9e9K_h51tuOhfRPSpehKxjvjvdJt0Nr6VCWfxtROQ53XW5oTzVp505o0qkkunRNgEIUF6JSPZnmLQfs-s8WI4r5DhqRTYJLsqBZ9fTRZzBF/s1600/typing+char+delay+VS+message.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVln-3Nc5IAX8Tkxsx5DtqqezdEabrOEgUk9e9K_h51tuOhfRPSpehKxjvjvdJt0Nr6VCWfxtROQ53XW5oTzVp505o0qkkunRNgEIUF6JSPZnmLQfs-s8WI4r5DhqRTYJLsqBZ9fTRZzBF/s640/typing+char+delay+VS+message.jpg" width="640" /></a></div>
<br />
<br />
<b><span style="color: #3d85c6;">So I will investigate, and maybe wait for the next releases. If you encountered the same issue, don't hesitate to share your ideas ;)</span></b><br />
<br />
<br /><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com2tag:blogger.com,1999:blog-4067499137469379895.post-63037042535672719492017-04-26T07:32:00.000-07:002017-04-26T08:53:41.194-07:00[Fast&Furious guide] VS 2017, how to change IDE's language<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Visual Studio is now available to download.</div>
<div style="text-align: justify;">
In my case, I used the english web installer to install the english version. But I was a little bit surprised (or not) to see that the installed version was setup with the same language as my operating system.</div>
<br />
So here is the simple steps to change the IDE's language:<br />
<br />
<br />
<b>1-</b> <b>Run Visual Studio 2017 installer</b> (in administrator mode) then click"update" button of the instance you want to update:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzo6B6vmOVoHTkPL1iuOpVd0GKW2e_3j4ukQ2b0uH9MERUGjc6lV7tI4HmGFobQxuGA-3MS7hygZxuEXUnoxrFvHjg75gBz4nz7mjMTGA2bDc3KIPbZ0O_TZIesBcNzNEQbhdHSPkMKmMW/s1600/step1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="357" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzo6B6vmOVoHTkPL1iuOpVd0GKW2e_3j4ukQ2b0uH9MERUGjc6lV7tI4HmGFobQxuGA-3MS7hygZxuEXUnoxrFvHjg75gBz4nz7mjMTGA2bDc3KIPbZ0O_TZIesBcNzNEQbhdHSPkMKmMW/s640/step1.jpg" width="640" /></a></div>
<br />
<br />
<b>2-</b> Then click on the <b>language modules tab</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI8VVh2b9zRQRh9qLRPH1KveDH1XGIqwq5vr3b_zROlvuJXayJFDla6yz31YgzacTXE-YLi46YI4ym43WSZHhE3fGVuGfXn9KD8Kmm8jbnPBo6l18uAvO4etFm4VpdCRbtIFQp1MYDviZ6/s1600/step2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI8VVh2b9zRQRh9qLRPH1KveDH1XGIqwq5vr3b_zROlvuJXayJFDla6yz31YgzacTXE-YLi46YI4ym43WSZHhE3fGVuGfXn9KD8Kmm8jbnPBo6l18uAvO4etFm4VpdCRbtIFQp1MYDviZ6/s640/step2.jpg" width="640" /></a></div>
<br />
<br />
<b>3-</b> Then check all languages you want to use in your IDE<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVOQjQt6rXDxhOaGsMRZXKki-1mVIk_SdBJX64J96ilTlMXyMdlqSjTsNWCFnRy_L_mdL2XMvmJVWBciztmHL85ynFxVu4arzz5uPlxUtsBc0-QKbZzopwzDMf6q-bKIyLJhbirEOl1VCa/s1600/step3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVOQjQt6rXDxhOaGsMRZXKki-1mVIk_SdBJX64J96ilTlMXyMdlqSjTsNWCFnRy_L_mdL2XMvmJVWBciztmHL85ynFxVu4arzz5uPlxUtsBc0-QKbZzopwzDMf6q-bKIyLJhbirEOl1VCa/s640/step3.jpg" width="640" /></a></div>
<br />
<br />
<b>4-</b> Restart Visual Studio then go to Menu / TOOLS / Options / (Environnement - International Settings) menu<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP8E4XMqKrK5mr9hSaFhnoNNZQ4kwnILnWA9k3yJp-6hMGqmEWZeryVYfOgH2N5gxeYX4n1CcUTEy9bWlPR4ZHsojICetSPXfhGkpCprpw_QbBLoOkmTHw4lkmZhQldm_g4mMu2flHoJuN/s1600/step4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP8E4XMqKrK5mr9hSaFhnoNNZQ4kwnILnWA9k3yJp-6hMGqmEWZeryVYfOgH2N5gxeYX4n1CcUTEy9bWlPR4ZHsojICetSPXfhGkpCprpw_QbBLoOkmTHw4lkmZhQldm_g4mMu2flHoJuN/s640/step4.jpg" width="611" /></a></div>
<br />
<br />
<br />
<b>5-</b> Finally choose your prefered language in the languages combobox. Note that you can choose 'Same as Microsoft Windows' option.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgscMO_05IrFLhzqb4p1z4Wso0Bw7udBkELXz9aduF1o78I1a6Qm2VxQkXBNVJaKSQWfKSu000UD9dlmxiomHIv6_NpvtJjWi_Dp_-P926wdnkcRuoZi9gCkJFT1x0soiZivIlSnkuerrYJ/s1600/step5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgscMO_05IrFLhzqb4p1z4Wso0Bw7udBkELXz9aduF1o78I1a6Qm2VxQkXBNVJaKSQWfKSu000UD9dlmxiomHIv6_NpvtJjWi_Dp_-P926wdnkcRuoZi9gCkJFT1x0soiZivIlSnkuerrYJ/s640/step5.jpg" width="612" /></a></div>
<br />
<br />
<b>Restart and enjoy programming !</b><br />
<br />
<br /><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-5366460291457768712016-03-02T14:10:00.001-08:002016-03-02T14:10:49.317-08:00[Spoon] Android testing tool<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://square.github.io/spoon/static/device_cluster.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://square.github.io/spoon/static/device_cluster.png" /></a></div>
<br />
<b>Did you heard about Spoon ?</b><br />
If you are a mobile developer (in our case an Android developer with hundreds of available target devices), and you know how much testing your app is important, take a look at Spoon !<br />
<br />
This tool will enable you to test your app simultaneously<br />
- on several android devices,<br />
- to take different steps screenshots during your tests,<br />
- to display the results in a meaningful way<br />
- to compare screenshots from the several devices...<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://square.github.io/spoon/static/example_screenshots.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://square.github.io/spoon/static/example_screenshots.png" height="456" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Spoon is available on Github:<br />
<a href="https://github.com/square/spoon" target="_blank">https://github.com/square/spoon</a><br />
<br />
All you need to start is here:<br />
<a href="http://square.github.io/spoon/" target="_blank">http://square.github.io/spoon/</a><br />
<br />
<br />
Just take a look below or click on the link below to display a Spoon output sample:<br />
<a href="http://square.github.io/spoon/sample/index.html" target="_blank">http://square.github.io/spoon/sample/index.html</a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://square.github.io/spoon/static/example_main.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://square.github.io/spoon/static/example_main.png" height="414" width="640" /></a></div>
<br />
<br />
<br /><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com0tag:blogger.com,1999:blog-4067499137469379895.post-3207089422603725922016-02-25T01:07:00.002-08:002017-04-26T08:53:47.776-07:00[News] Microsoft acquire Xamarin !<br />
In its original blog post (<a href="http://weblogs.asp.net/scottgu/welcoming-the-xamarin-team-to-microsoft" target="_blank">that you can find it here</a>), Scott Guthrie has announced that Microsoft acquired Xamarin, the company that gave us the technology to develop mobile apps in C# for iOS, Android and WP :)<br />
<br />
<br />
<div style="text-align: center;">
<span style="background-color: white; color: #505151; font-family: , "segoe ui" , "segoe" , "segoe wp" , "tahoma" , "verdana" , "arial" , sans-serif; font-size: 14px; line-height: 20px;"><b>Wednesday, February 24, 2016</b></span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiPkAV_Np_8mK4VMb1p6JJmzu53Ch3eu1jhBw05oDLLt_gsDh2te_z4Rk4r2w1o-n_3IBYQKI5iKwU9t6zMYAoG4YnU44sKfoQ4FOFhLrkM8WHew0KUzeq0GZRTqP0JHT3tuaxSVSo6Lj4/s1600/xamarin%252Bmicrosoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="352" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiPkAV_Np_8mK4VMb1p6JJmzu53Ch3eu1jhBw05oDLLt_gsDh2te_z4Rk4r2w1o-n_3IBYQKI5iKwU9t6zMYAoG4YnU44sKfoQ4FOFhLrkM8WHew0KUzeq0GZRTqP0JHT3tuaxSVSo6Lj4/s640/xamarin%252Bmicrosoft.png" width="640" /></a></div>
<br />
<br />
In my mind it s a good news for the futur evolution of the technology, however we can ask ourself about the futur development and pricing strategies... Hope it will be more accessible, at less in term of pricing, than the actual version !<br />
<br />
What do you think ?<br />
<br /><div class="blogger-post-footer">https://julien.goenaga.fr</div>Djooleeanhttp://www.blogger.com/profile/01202505895643058721noreply@blogger.com1