<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head><meta name=Generator content="Microsoft Word 15 (filtered medium)"><style><!--
/* Font Definitions */
@font-face
        {font-family:"Cambria Math";
        panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
        {font-family:Calibri;
        panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
        {font-family:Consolas;
        panose-1:2 11 6 9 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
        {margin:0cm;
        margin-bottom:.0001pt;
        font-size:12.0pt;
        font-family:"Times New Roman","serif";}
a:link, span.MsoHyperlink
        {mso-style-priority:99;
        color:blue;
        text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
        {mso-style-priority:99;
        color:purple;
        text-decoration:underline;}
p
        {mso-style-priority:99;
        mso-margin-top-alt:auto;
        margin-right:0cm;
        mso-margin-bottom-alt:auto;
        margin-left:0cm;
        font-size:12.0pt;
        font-family:"Times New Roman","serif";}
pre
        {mso-style-priority:99;
        mso-style-link:"Préformaté HTML Car";
        margin:0cm;
        margin-bottom:.0001pt;
        font-size:10.0pt;
        font-family:"Courier New";}
span.PrformatHTMLCar
        {mso-style-name:"Préformaté HTML Car";
        mso-style-priority:99;
        mso-style-link:"Préformaté HTML";
        font-family:Consolas;
        mso-fareast-language:FR;}
span.EmailStyle19
        {mso-style-type:personal-reply;
        font-family:"Calibri","sans-serif";
        color:#1F497D;}
.MsoChpDefault
        {mso-style-type:export-only;
        font-family:"Calibri","sans-serif";
        mso-fareast-language:EN-US;}
@page WordSection1
        {size:612.0pt 792.0pt;
        margin:70.85pt 70.85pt 70.85pt 70.85pt;}
div.WordSection1
        {page:WordSection1;}
/* List Definitions */
@list l0
        {mso-list-id:395977929;
        mso-list-template-ids:-319785208;}
ol
        {margin-bottom:0cm;}
ul
        {margin-bottom:0cm;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]--></head><body lang=FR link=blue vlink=purple><div class=WordSection1><p class=MsoNormal><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D;mso-fareast-language:EN-US'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>Hi Suraj,<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'> <o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>To initialize your knowledge about the project, I can suggest you several steps:<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'> <o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>First, install Sugar on your computer. I understand that you're on Windows but it's pretty easy to install SugarOnAStick in a Windows VirtualBox. It's a good way to discover it. Have a look on [1] (in French but easy to translate or follow steps using screen capture). <o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'> <o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>Second, learn how Sugar activity are developed and packaged today. The better introduction about that is in the great book of James, "Make your own Sugar activities" [2]. It will be very interesting for you too to install and explore the HelloWorld Activity [3] in your VirtualBox.<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'> <o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>Third, explore the first experience of Sugar HTML5 activities I've wrote. A chapter in the book "Make your own Sugar activities" talk about that [4]. Gridpaint [5] is one of the first activity to use this framework. Install it and try to understand how it works: have specifically a look on Log (using Log activity) then to Enyo.py and Sugar.js files.<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'> <o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>Once you've done it, there is few issue with the current way of works of this first Sugar HTML5 framework:<o:p></o:p></span></p><p class=MsoNormal style='margin-left:27.0pt;text-indent:-18.0pt;mso-list:l0 level1 lfo1;vertical-align:middle'><![if !supportLists]><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'><span style='mso-list:Ignore'>1.<span style='font:7.0pt "Times New Roman"'>       </span></span></span><![endif]><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>It depends on "console-message" to interface WebKit and JavaScript. It's a bad hack. This message could be deprecated on future version of WebKit. We should work one another interface. Exploring PhoneGap/Cordoba way of working for iOS (using a hidden Iframe) could be interesting.<o:p></o:p></span></p><p class=MsoNormal style='margin-left:27.0pt;text-indent:-18.0pt;mso-list:l0 level1 lfo1;vertical-align:middle'><![if !supportLists]><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'><span style='mso-list:Ignore'>2.<span style='font:7.0pt "Times New Roman"'>       </span></span></span><![endif]><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>It depends of the standard Sugar Toolbar and HTML5 controls don't have the Sugar Look&Feel. We want integrate the full Sugar UI into the Sugar HTML5 framework. So we need CSS files and an API to match the Sugar controls and features.<o:p></o:p></span></p><p class=MsoNormal style='margin-left:27.0pt;text-indent:-18.0pt;mso-list:l0 level1 lfo1;vertical-align:middle'><![if !supportLists]><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'><span style='mso-list:Ignore'>3.<span style='font:7.0pt "Times New Roman"'>       </span></span></span><![endif]><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>It don't expose the Sugar feature into JavaScript. So each time the HTML5 application want to call Sugar, it need to call Python code. The Sugar HTML5 framework should expose natively main Sugar features: specifically DataStore (read/write to Journal), telepathy (Collaboration).<o:p></o:p></span></p><p class=MsoNormal style='margin-left:27.0pt;text-indent:-18.0pt;mso-list:l0 level1 lfo1;vertical-align:middle'><![if !supportLists]><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'><span style='mso-list:Ignore'>4.<span style='font:7.0pt "Times New Roman"'>       </span></span></span><![endif]><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>Finally, as you read in this thread, embedding a WebView is not necessarily the best solution to write a Web activity. BTW as a first approach to the problem, we could start with it.<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'> <o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>Point 2 could be started very quickly. You just had to list all Sugar Controls then think how they could be designed as HTML5 controls.<o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'> <o:p></o:p></span></p><p class=MsoNormal style='margin-left:27.0pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>Lionel.<o:p></o:p></span></p><p class=MsoNormal style='margin-left:27.0pt'><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'> <o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>[1] </span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'><a href="http://olpc-france.org/blog/2013/02/decouvrez-sugar-depuis-votre-machine/"><span lang=EN-US>http://olpc-france.org/blog/2013/02/decouvrez-sugar-depuis-votre-machine/</span></a></span><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>[2] </span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'><a href="http://www.flossmanuals.net/make-your-own-sugar-activities/"><span lang=EN-US>http://www.flossmanuals.net/make-your-own-sugar-activities/</span></a></span><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>[3] </span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'><a href="http://activities.sugarlabs.org/fr/sugar/addon/4418"><span lang=EN-US>http://activities.sugarlabs.org/fr/sugar/addon/4418</span></a></span><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>[4] </span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'><a href="http://en.flossmanuals.net/make-your-own-sugar-activities/developing-sugar-activities-using-html5/"><span lang=EN-US>http://en.flossmanuals.net/make-your-own-sugar-activities/developing-sugar-activities-using-html5/</span></a></span><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'>[5] </span><span style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'><a href="http://activities.sugarlabs.org/fr/sugar/addon/4647"><span lang=EN-US>http://activities.sugarlabs.org/fr/sugar/addon/4647</span></a></span><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:black'><o:p></o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D;mso-fareast-language:EN-US'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='font-size:11.0pt;font-family:"Calibri","sans-serif";color:#1F497D;mso-fareast-language:EN-US'><o:p> </o:p></span></p><p class=MsoNormal><span lang=EN-US style='mso-fareast-language:EN-US'><o:p> </o:p></span></p><p class=MsoNormal><b><span style='font-size:11.0pt;font-family:"Calibri","sans-serif"'>De :</span></b><span style='font-size:11.0pt;font-family:"Calibri","sans-serif"'> suraj ks [mailto:suraj.gillespie@gmail.com] <br><b>Envoyé :</b> lundi 15 avril 2013 22:27<br><b>À :</b> Daniel Narvaez; lionel@olpc-france.org<br><b>Cc :</b> Sugar-dev Devel; Manuel Quiñones<br><b>Objet :</b> Re: [Sugar-devel] Hacking on HTML activities UI (was Re: GSoC 13)<o:p></o:p></span></p><p class=MsoNormal><o:p> </o:p></p><div><div><p class=MsoNormal>Ok,<o:p></o:p></p></div><div><p class=MsoNormal><o:p> </o:p></p></div><p class=MsoNormal>In a nutshell,<o:p></o:p></p><div><p class=MsoNormal>These are the tasks for this project.<o:p></o:p></p></div><div><p class=MsoNormal><o:p> </o:p></p></div><div><p class=MsoNormal>Going by the way Lionel suggested,<o:p></o:p></p></div><div><p class=MsoNormal>Create a sugar activity with full screen web view control.<o:p></o:p></p><div><p class=MsoNormal>Modify the current  js framework and make use of "native features" to be able to write html activities in Sugar.<o:p></o:p></p></div><div><p class=MsoNormal><o:p> </o:p></p></div><div><p class=MsoNormal><o:p> </o:p></p></div><div><p class=MsoNormal>Lionel mentioned,<o:p></o:p></p></div><div><pre style='white-space:pre-wrap'><span style='color:black'>"The step 1 need only to map a set of JavaScript<o:p></o:p></span></pre><pre><span style='color:black'>functions to a set of Sugar functions. Once the list of Sugar functions is<o:p></o:p></span></pre><pre><span style='color:black'>write, it’s not very complex to do."<o:p></o:p></span></pre><pre style='white-space:pre-wrap'><span style='font-family:"Arial","sans-serif";color:#222222'>So find those functions and tweak them to support the same.</span><span style='color:black'><br><br><o:p></o:p></span></pre></div><div><p class=MsoNormal>And of course, work on the UI part.<o:p></o:p></p></div><div><p class=MsoNormal><o:p> </o:p></p></div><div><p class=MsoNormal>Please correct if I'm wrong.<o:p></o:p></p></div></div><div><p class=MsoNormal><o:p> </o:p></p></div><div><p class=MsoNormal>Also, how are we going to get the <span style='color:black'>JS and Sugar to communicate without the console?</span><o:p></o:p></p></div><div><p class=MsoNormal><o:p> </o:p></p></div></div><div><p class=MsoNormal><o:p> </o:p></p></div></div></body></html>