Port of jQuery UI

[Pierre Quentel]

Hi,

Following the interesting discussion initiated by Christopher on a UI module for Brython, I think that the best short term solution is to provide a package that uses one of the popular Javascript libraries, just like CPython provides an interface with Tcl/Tk.

I have added a package called jqueryui that implements one of these libraries, jQuery UI. It's probably the most popular, although other ones were mentioned in the discussion.

The Brython package exposes a single object, called jq,with an interface similar to that of "document". If a page has an element with the id "dialog", the code to make it a jQuery UI dialog is :

from jqueryui import jq

jq['dialog'].dialog()

For more complex selections, jq has a method get(**kw) which returns a list of selected items. Currently it only supports the 'selector' keyword ; the associated value can be a string or a tuple :

for elt in jq.get(selector=("input[type=submit]","a")):
    elt.button().click(callback)

for elt in jq.get(selector="button"):
    elt.button().click(callback)

I have added a few demos, adapted from those provided by the jQuery UI site, in the folder gallery/jqui.

I am waiting for your feedback on this : is jQuery UI a good choice ? is the API above ok for you ?

For those interested in Brython internals, I had to implement a new function in the javascript module :

load(script_url[,names])

where script_url is the url of a Javascript script, and names are the names defined in this script that must be added to the global Javascript namespace, so that Brython can get a reference to them as attributes of "window"

The reason is that the jqueryui must load the Javascript files for jQuery UI. I first tried to add them to the document :

script = html.SCRIPT(path_to_jquery_script.js)
document <= script

_jqui = window.jQuery.noConflict(True)

but with this method, the name jQuery was not found, because the script was not yet loaded. I replaced it by :

javascript.load(_path+'jquery-1.11.2.min.js', ['jQuery'])
javascript.load(_path+'jquery-ui.js')

_jqui = window.jQuery.noConflict(True)

This works because the function load() uses a blocking Ajax request to load the content of the Javascript file, then evaluates this content with an eval() and stores the name jQuery in the global namespace

[Joao S. O. Bueno]

One thing to think about is how far is it worth to put every
javascript library out there together with Brython - or when should
a basic "packaging" system be implemented. (SInce there are just about
a few projects now, maybe just offering them in
.py/zipped files for now would suffice).

That said, I was building a jquery (not jqueryUI menu) yesterday - and
had some difficult setting the required non HTML-standard attributes
on the elements.

For example, in a given context the anchor ("a") element needs a
"data-togle='dropdown') attribute.
I was unable to set this attribute in an element created with html.A
- (and had to resort to a horrible
workaround). Is there a way to set arbitrary attributes to
dom-elements that I don't know about?


js
-><-

> --
> You received this message because you are subscribed to the Google Groups
> "brython" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to brython+u...@googlegroups.com.
> To post to this group, send email to bry...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/brython/36b9530f-475a-43d3-a2a4-2e108607788d%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Christopher Forgeron]

I think this is a good idea. JQuery is very popular, and many people will want to use it. 

I'm still looking / working with Zebra, and I really like the interface. I've been quiet on it, as we're still learning/testing it, but it's so far only giving us pluses - It's all in HTML5 canvas, so portability problems are nearly 0 as long as a browser supports HTML5.  It also provides the primitives that I need to finish a Tkinter port, tho that is not a hot item for me.

If we go with Zebra, I'll post my wrapper for Brython for it. 

In the meantime, any UI code ported to Brython will be very useful. 

[Juan Carlos]

On Wed, Jan 14, 2015 at 10:44 AM, Christopher Forgeron <csfor...@gmail.com> wrote:

JQuery is very popular

I'm still looking / working with Zebra

Awesome!, both ideas are nice  :D

<canvas>  dont need CSS workarounds, and can generate UI from JSON.

[Billy Earney]

Yes, I agree.  I believe this is definitely the way to integrate existing popular JavaScript libraries.  No need to reinvent the wheel  (plus two, there is already decent documentation for most of these libraries).

Billy

--
You received this message because you are subscribed to the Google Groups "brython" group.
To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.
To post to this group, send email to bry...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/CALFJTa21a3SvtLFn68L8C5CkLPnahu7%3DuV24-OeomZ0HKfy0wA%40mail.gmail.com.

[Olemis Lang]

On 1/14/15, Joao S. O. Bueno <gwi...@gmail.com> wrote:
> One thing to think about is how far is it worth to put every
> javascript library out there together with Brython - or when should
> a basic "packaging" system be implemented. (SInce there are just about
> a few projects now, maybe just offering them in
> .py/zipped files for now would suffice).
>

Yes , I agree with this . IMO these kinds of additions should be
developed in a different repos and either copied to the right
location at deployment time (e.g. via deployment scripts , git
submodules , ...) or loaded asynchronously (should we offer support
for that) .

Needless to say that integration brython with mature js frameworks is
an important milestone .

[...]

--
Regards,

Olemis - @olemislc

Apache(tm) Bloodhound contributor
http://issues.apache.org/bloodhound
http://blood-hound.net

Blog ES: http://simelo-es.blogspot.com/
Blog EN: http://simelo-en.blogspot.com/

Featured article:

[Billy Earney]

we should host the libraries somewhere and allow loading via CORS.   If someone is against this, then they can download the library and place it in their own site-packages directory.

--
You received this message because you are subscribed to the Google Groups "brython" group.
To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.
To post to this group, send email to bry...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/CAGMZAuNp-J7oN34EprFsG%2B5ocGFUPK%3DANod53ZAgQ8RBTfdaoQ%40mail.gmail.com.

[Pierre Quentel]

Le mercredi 14 janvier 2015 17:01:45 UTC+1, Billy Earney a écrit :

we should host the libraries somewhere and allow loading via CORS.   If someone is against this, then they can download the library and place it in their own site-packages directory.

On Wed, Jan 14, 2015 at 9:47 AM, Olemis Lang <ole...@gmail.com> wrote:

On 1/14/15, Joao S. O. Bueno <gwi...@gmail.com> wrote:
> One thing to think about is how far is it worth to put every
> javascript library out there together with Brython - or when should
> a basic "packaging" system be implemented. (SInce there are just about
> a few projects now, maybe just offering them in
> .py/zipped files for now would suffice).
>

There are 2 levels of integration of Javascript libraries :

- one which should work with all existing libraries : load it in the HTML page with one or more <script> tags, plus the CSS files if needed, then use the objects exposed using attributes of "window". This is how the demos of d3.js, Highcharts and Raphael in the gallery are implemented, and how ace.js is used in the editor. It doesn't require any specific Python module or package ; the syntax is the same as the one provided by the Javascript library, with the necessary adaptation to Python syntax and types.

- another one, which is only implemented for jQuery UI at the moment, where a Python package is provided to avoid having to load the Javascript/CSS files in the HTML page, and with a more Pythonic interface to the library.

With jQuery UI, in the first case the code would look like this (provided the JS and CSS files are loaded in the page)

jq = window.jQuery.noConflict(True)
jq('#dialog').dialog()

def callback(ev, ui):
    print(ui.value)

jq('#slider").slider({'change':callback})

In the second case (no JS or CSS loaded in the page) :

from jqueryui import js

js['dialog'].dialog()

def callback(ev, ui):
    print(ui.value)

jq['slider'].slider(change=callback)

My intention is to provide one UI package with the Brython distribution, and add the related documentation in Brython docs. This package would be the default for developers to write web applications. Packages for other UI modules would be developed as third-party packages, ready to be used in site-packages.

Billy, I don't understand what you mean with "loading with CORS" : how is this related to importing a module/package ?


 

Yes , I agree with this . IMO these kinds of additions should be
developed in  a different repos and either copied to the right
location at deployment time (e.g. via deployment scripts , git
submodules , ...) or loaded asynchronously (should we offer support
for that) .

Needless to say that integration brython with mature js frameworks is
an important milestone .

[...]

--
Regards,

Olemis - @olemislc

Apache(tm) Bloodhound contributor
http://issues.apache.org/bloodhound
http://blood-hound.net

Blog ES: http://simelo-es.blogspot.com/
Blog EN: http://simelo-en.blogspot.com/

Featured article:

--
You received this message because you are subscribed to the Google Groups "brython" group.

To unsubscribe from this group and stop receiving emails from it, send an email to brython+unsubscribe@googlegroups.com.

To post to this group, send email to bry...@googlegroups.com.

[Billy Earney]

if you plan on providing the jquery ui witth the brython distribution then CORS doesn't apply.

as you know CORS allows you to load files from remote/external web servers

In the second example above, I assume that  'from jqueryui import js' would build the script tag to import jquery and jquery ui?

billy

To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.

To post to this group, send email to bry...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/60cb392c-15f9-48c7-adef-dc54419e6252%40googlegroups.com.

[Olemis Lang]

On Wed, Jan 14, 2015 at 12:49 PM, Pierre Quentel <pierre....@gmail.com> wrote:

Le mercredi 14 janvier 2015 17:01:45 UTC+1, Billy Earney a écrit :

we should host the libraries somewhere and allow loading via CORS.  

Good catch Billy
;)

 

If someone is against this, then they can download the library and place it in their own site-packages directory.

On Wed, Jan 14, 2015 at 9:47 AM, Olemis Lang <ole...@gmail.com> wrote:

On 1/14/15, Joao S. O. Bueno <gwi...@gmail.com> wrote:
> One thing to think about is how far is it worth to put every
> javascript library out there together with Brython - or when should
> a basic "packaging" system be implemented. (SInce there are just about
> a few projects now, maybe just offering them in
> .py/zipped files for now would suffice).
>

There are 2 levels of integration of Javascript libraries :

- one which should work with all existing libraries : load it in the HTML page with one or more <script> tags, plus the CSS files if needed, then use the objects exposed using attributes of "window". This is how the demos of d3.js, Highcharts and Raphael in the gallery are implemented, and how ace.js is used in the editor. It doesn't require any specific Python module or package ; the syntax is the same as the one provided by the Javascript library, with the necessary adaptation to Python syntax and types.

- another one, which is only implemented for jQuery UI at the moment, where a Python package is provided to avoid having to load the Javascript/CSS files in the HTML page, and with a more Pythonic interface to the library.

There is still a third approach not listed above (which I've been trying to start but without success due to the lack of time) , and it consists in loading js modules asynchronously using AMD [1]_ , UMD [2]_ [4]_ or alike e.g. similar to requirejs [3]_ et al. The idea is to wrap AMD module vars automatically on load and add bindings into local/global namespace so that they will be available henceforth in Python code .

 

Billy, I don't understand what you mean with "loading with CORS" : how is this related to importing a module/package ?

To load'em asynchronously via AJAX from e.g. CDN and yet work around same origin policy ?

[...]

.. [1] http://en.wikipedia.org/wiki/Asynchronous_module_definition

.. [2] https://github.com/umdjs/umd

.. [3] http://requirejs.org/

.. [4] http://davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/

--

Regards,

Olemis - @olemislc

Apache™ Bloodhound contributor

[Pierre Quentel]

Le mercredi 14 janvier 2015 19:17:04 UTC+1, Billy Earney a écrit :

if you plan on providing the jquery ui witth the brython distribution then CORS doesn't apply.

as you know CORS allows you to load files from remote/external web servers

In the second example above, I assume that  'from jqueryui import js' would build the script tag to import jquery and jquery ui?

Not exactly, this is what I explained in the first post. Building the script tag and adding it to the document (document <= html.SCRIPT(path_to_js_file)) doesn't work, because the names defined in the JS file are not available until the script is loaded. This is why I had to add the function load() in module javascript. If you find a solution that doesn't need such function I'd be glad to know

billy

[Nicolas Pinault]

Le 14/01/2015 14:44, Christopher Forgeron a écrit :

I think this is a good idea. JQuery is very popular, and many people will want to use it. 

I'm still looking / working with Zebra, and I really like the interface. I've been quiet on it, as we're still learning/testing it, but it's so far only giving us pluses - It's all in HTML5 canvas, so portability problems are nearly 0 as long as a browser supports HTML5.  It also provides the primitives that I need to finish a Tkinter port, tho that is not a hot item for me.

If we go with Zebra, I'll post my wrapper for Brython for it.

Even if we don't go with it, please post it anyway. I'm interested in it.

In the meantime, any UI code ported to Brython will be very useful. 

On Wednesday, 14 January 2015 05:45:12 UTC-4, Pierre Quentel wrote:

Hi,

Following the interesting discussion initiated by Christopher on a UI module for Brython, I think that the best short term solution is to provide a package that uses one of the popular Javascript libraries, just like CPython provides an interface with Tcl/Tk.

--
You received this message because you are subscribed to the Google Groups "brython" group.

To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.

To post to this group, send email to bry...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/04c287d0-207c-40da-a820-d8e4e197cfba%40googlegroups.com.

[Petros Moisiadis]

On Wednesday, January 14, 2015 at 11:45:12 AM UTC+2, Pierre Quentel wrote:

I am waiting for your feedback on this : is jQuery UI a good choice ?

 

Bootstrap would be a better choice in my opinion. It's by far the most popular.

[Juan Carlos]

You can use Bootstrap3 since is mostly CSS, they use JQuery, Ive used Bootstrap3 with Brython instead of JQuery, so Bootstrap USES JQuery, but I agree too, both are popular...

[Petros Moisiadis]

Of course, you can use Bootstrap, as well as other ui frameworks. What I am saying is that, in my opinion, Bootstrap would be a better choice for being the official GUI library of brython by providing a pythonic (or, better, brythonic) interface to it, in the same way tk is an integral part of cpython.

[Pierre Quentel]

Le samedi 17 janvier 2015 12:53:03 UTC+1, Petros Moisiadis a écrit :

Of course, you can use Bootstrap, as well as other ui frameworks. What I am saying is that, in my opinion, Bootstrap would be a better choice for being the official GUI library of brython by providing a pythonic (or, better, brythonic) interface to it, in the same way tk is an integral part of cpython.

I see Bootstrap more like a set of CSS file than a UI framework, but maybe I'm wrong. Anyway, I am ok to consider adding it to the standard Brython distribution instead of jQuery UI if there is a consensus, but I won't write the module myself : supporters of other solutions must provide a working implementation (the code of jqueryui can help) with a decent set of examples

[Vinicius Assef]

---- On Wed, 14 Jan 2015 09:11:05 -0300 Joao S. O. Bueno wrote ----

>
>For example, in a given context the anchor ("a") element needs a
>"data-togle='dropdown') attribute.
>I was unable to set this attribute in an element created with html.A
>- (and had to resort to a horrible
>workaround). Is there a way to set arbitrary attributes to
>dom-elements that I don't know about?

Joao, I'm using this:

<code>
x = document['some_id']
x <= html.A("my link", href="http://google.com", data_toggle="dropdown")
</code>

According to Brython's browser.html documentation: "If the attribute contains a hyphen (-) it must be replaced by an underscore (_) : http_equiv and not http-equiv (the - would be interpreted as the minus sign)."

[Juan Carlos]

On Sun, Jan 18, 2015 at 12:56 PM, Pierre Quentel <pierre....@gmail.com> wrote:

I see Bootstrap more like a set of CSS file than a UI framework, but maybe I'm wrong. Anyway, I am ok to consider adding it to the standard Brython distribution instead of jQuery UI if there is a consensus, but I won't write the module myself : supporters of other solutions must provide a working implementation (the code of jqueryui can help) with a decent set of examples

I like Bootstrap3, but if JQueryUI is choosen is ok to me too, 

but at some point I was thinking of making an alternative version of html.js of Brython,

that produces the HTML already with all the base classes that Bootstrap needs, but its not like a UI Framework, just an already Bootstrapped HTML :P

[Christophe Bal]

Hello,

if you do that it would be better to call your module bootstrap so as to let user decides to use basic HTML or not..

Christophe BAL

Enseignant de mathématiques en Lycée et développeur Python amateur

---

French math teacher in a "Lycée" and Python amateur developer

--
You received this message because you are subscribed to the Google Groups "brython" group.
To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.
To post to this group, send email to bry...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/CALFJTa3Opmhy5SBy5VntxSLg%3DMt1V%2BSKYzbkr0LDVGbg0etWrQ%40mail.gmail.com.

[Matthew Blott]

Guys,

jQuery has a legacy feel about it these days. I only use it when necessary and try and avoid it in new projects. Bootstrap has much wider adoption than jQuery UI and is the standard open source library for front end devs (incidentally version 4.0 of Bootstrap is out soon and under consideration is to replace jQuery with the much smaller Zepto library).

It's true that Bootstrap is more of a CSS library but the line between styles and coding gets blurred with a lot of new stuff that used to require JavaScript now being natively available - one of the reasons jQuery is not the requirement it once was.

Thanks,

Matt

[Billy Earney]

this is good reason to produce a bootstrap module so someone could do something like

from bootstrap import bs

(no pun intended)

Then those that do not favor jquery can use bootstrap or some other module.

--
You received this message because you are subscribed to the Google Groups "brython" group.
To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.
To post to this group, send email to bry...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/9a0abf02-7437-4caf-81cb-3de7e7f8f531%40googlegroups.com.

[Nicholas Carroll]

Can Jquery also be accessed in the pythonic way or only JqueryUI?

[Kiko]

2015-04-17 2:19 GMT+02:00 Nicholas Carroll <nicholas.mat...@gmail.com>:

Can Jquery also be accessed in the pythonic way or only JqueryUI?

It doesn't exist an ad hoc module for jquery.

You can contribute with your own wrapper (take a look at the jqueryui wrapper) or access the jquery functionality using the javascript library:

http://brython.info/static_doc/en/jsobjects.html

http://brython.info/static_doc/en/javascript.html

 

--
You received this message because you are subscribed to the Google Groups "brython" group.
To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.
To post to this group, send email to bry...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/brython/14fccfbc-c230-4901-b9f6-ad8e209586b8%40googlegroups.com.