[Sugar-devel] Hacking on HTML activities UI (was Re: GSoC 13)

[lionel at olpc-france.org]

Hi Suraj,

 

1) I’m used to develop using VirtualBox and Windows. But you’re right, it
need a powerful PC. Note that if you switch to GNU Linux, it could be better
to switch to Fedora instead of Ubuntu because Sugar is built on Fedora.

2) Nice. It’s a good start point.

3) Yes, a good understanding of interface between Python/Sugar and
JavaScript is very important. BTW do not spent lot of time on Enyo. In fact
Enyo is not at all a pre-requisite. At end we could hope to be JavaScript
framework agnostic. If you follow threads in this mailing list, you could
have enough lucky like me to learn a new JavaScript framework each day :-)
So yes, being JavaScript framework agnostic is interesting.

The issue about “console” is that the “console-message” is standardly use to
get output from the “console.log()” JavaScript function. So, it’s not at all
dedicated to communication between JavaScript and the embedding WebView. The
hack that I’ve used it that if the console message is prefixed by “enyo://”
it’s processed by the framework like a message to Sugar, else the framework
just pass the message. You could see this in the “Log” activity when you run
Grid paint activity. So the idea of improvement is to find a less hacky way
to interface Sugar and JavaScript. It’s one of objective of the IRC meeting.

 

About UI, yes the main part of the work is to do CSS files to reproduce the
Sugar UI. Then for non-UI Sugar features (datastore and collaboration) the
work is to write a JavaScript API to map the Sugar API.

 

Best regards.

 

                Lionel.

 

 

De : suraj ks [mailto:suraj.gillespie at gmail.com] 
Envoyé : samedi 20 avril 2013 23:26
À : lionel at olpc-france.org
Cc : Sugar-dev Devel; Manuel Quiñones; Daniel Narvaez
Objet : Re: [Sugar-devel] Hacking on HTML activities UI (was Re: GSoC 13)

 

Hi lionel,

 

1)Done with setting up of virtual box and installed sugar. Seems to be
working fine.

   But, while running the Sugar in it, it slows down the pc a lot and
various other issues come in while developing activities.

   I guess it is better if I switch to Ubuntu asap while hacking.

 

 2)It was  a good read . Now, I have a basic understanding how activities
are developed and packed right from

    making a standalone python program to packaging and distributing the
activities.

    I did install the helloworld activity and it seems to working fine.

 

 3)I must admit, it is impressive work. 

   Went through your manual and understood how the enyo framework
alongwith,"connect" and "sendmessage" methods were used to interact between
the user interface, javascript and python code

 

 

 

I needed some clarifications,

Honestly, i did not grasp the "console part", which needed improvement. 

Were you talking about the "connect" and "sendmessage"?

 

And, regarding the UI part, should I just create CSS files to replicate
default sugar toolbars and other sugar user interfaces? 

 

 

 

 

 

 

Also, looking forward to the IRC meeting on html activities on Mon. :)

 

 

 

 

Regards,

Suraj

 

 

On Tue, Apr 16, 2013 at 6:51 PM, <lionel at olpc-france.org
<mailto:lionel at olpc-france.org> > wrote:

 

Hi Suraj,

 

To initialize your knowledge about the project, I can suggest you several
steps:

 

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). 

 

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.

 

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.

 

Once you've done it, there is few issue with the current way of works of
this first Sugar HTML5 framework:

1.       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.

2.       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.

3.       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).

4.       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.

 

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.

 

Lionel.

 

[1]
<http://olpc-france.org/blog/2013/02/decouvrez-sugar-depuis-votre-machine/>
http://olpc-france.org/blog/2013/02/decouvrez-sugar-depuis-votre-machine/

[2]  <http://www.flossmanuals.net/make-your-own-sugar-activities/>
http://www.flossmanuals.net/make-your-own-sugar-activities/

[3]  <http://activities.sugarlabs.org/fr/sugar/addon/4418>
http://activities.sugarlabs.org/fr/sugar/addon/4418

[4]
<http://en.flossmanuals.net/make-your-own-sugar-activities/developing-sugar-
activities-using-html5/>
http://en.flossmanuals.net/make-your-own-sugar-activities/developing-sugar-a
ctivities-using-html5/

[5]  <http://activities.sugarlabs.org/fr/sugar/addon/4647>
http://activities.sugarlabs.org/fr/sugar/addon/4647

 

 

 

De : suraj ks [mailto:suraj.gillespie at gmail.com
<mailto:suraj.gillespie at gmail.com> ] 
Envoyé : lundi 15 avril 2013 22:27
À : Daniel Narvaez; lionel at olpc-france.org <mailto:lionel at olpc-france.org> 
Cc : Sugar-dev Devel; Manuel Quiñones
Objet : Re: [Sugar-devel] Hacking on HTML activities UI (was Re: GSoC 13)

 

Ok,

 

In a nutshell,

These are the tasks for this project.

 

Going by the way Lionel suggested,

Create a sugar activity with full screen web view control.

Modify the current  js framework and make use of "native features" to be
able to write html activities in Sugar.

 

 

Lionel mentioned,

"The step 1 need only to map a set of JavaScript
functions to a set of Sugar functions. Once the list of Sugar functions is
write, it’s not very complex to do."
 
So find those functions and tweak them to support the same.

And of course, work on the UI part.

 

Please correct if I'm wrong.

 

Also, how are we going to get the JS and Sugar to communicate without the
console?

 

 

 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.sugarlabs.org/archive/sugar-devel/attachments/20130421/7b202d82/attachment-0001.html>