Re: Learning flexx, part 2, and LeoWapp status

[Edward K. Ream]

On Friday, November 9, 2018 at 5:18:42 AM UTC-6, Almar Klein wrote:

BTW, you can use flx.ComponentProp() for components. 
>

Thanks.  I didn't know that ComponentProps existed.

A pattern which I like is to define actions on a "central" PyComponent (I 
> refer to this as the `store` in the docs, but it can be the root app) so 
> that you have a single"entry point" for JS calling out to Python. You can 
> do something similar for the JS side.
>

I'll play with this.  It's probably just what is needed.

Edward

-- 
You received this message because you are subscribed to the Google Groups 
"leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to leo-editor+unsubscr...@googlegroups.com.
To post to this group, send email to leo-editor@googlegroups.com.
Visit this group at https://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/d/optout.

Re: Learning flexx, part 2, and LeoWapp status

[Edward K. Ream]

On Thursday, November 8, 2018 at 11:17:31 AM UTC-6, Terry Brown wrote:

I'd evaluate the emit / react ( / action) framework too - avoids having 
> to have everything know about everything else. 
>

Thanks for this.  Today's work will be about communicating between the 
Python code in LeoApp and the JS code in LeoTree, so that the JS code can 
update the body pane when switching nodes. I expect no major problems, but 
we shall see.

Edward

-- 
You received this message because you are subscribed to the Google Groups 
"leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to leo-editor+unsubscr...@googlegroups.com.
To post to this group, send email to leo-editor@googlegroups.com.
Visit this group at https://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/d/optout.

Re: Learning flexx, part 2, and LeoWapp status

[Almar Klein]

Thanks for sharing this Edward! Thank you for your kind words about Flexx 
and PScript. And thanks for taking the time to write down your struggles. 
I'll try to boil it down to some points of action in Flexx/#516.


> Almar, please correct me if I am wrong about [using props like this].

Yes, you need to make properties for things that you want to make available 
from both Python and JS. Regular attributes work, but *only* withing Python 
or JS (depending on whether its a PyComponent or JsComponent).

BTW, you can use flx.ComponentProp() for components. A pattern which I like 
is to define actions on a "central" PyComponent (I refer to this as the 
`store` in the docs, but it can be the root app) so that you have a 
single"entry point" for JS calling out to Python. You can do something 
similar for the JS side. But I don't know if this works well for your 
use-case.


> Apparently, properties must be used to communicate even between different 
flx.Widgets. 

Or actions or events. Properties should be used to represent state. Actions 
are to "make stuff happen". Sometimes this can be a change in state. E.g by 
using the standard property setters. But actions don't have to mutate 
properties. Beware that actions are asynchronous; they don't apply the 
moment you call them (unless called from an action). This means that an 
action like x.delete_line() is better than taking all lines, deleting one, 
and setting the lines property again. Custom events are probably rare, but 
can be used for things that "happen" (e.g. some form of user input).


> Both the CSS and the inline style honor the color settings, but not the 
width and height settings.

This was answered already, but just to confirm: Flexx indeed overwrites 
these values. Any layout must be done using Flexx' layout classes. Also see 
e.g. the Widget.minsize and Widget.maxsize properties.


> leoflexx.py is causing files to be downloaded. 

You can also use local assets (put the ace.js etc. in the repo and include 
that). Someone recently made an howto for that: 
https://flexx.readthedocs.io/en/stable/examples/local_assets_src.html#local-assets-py


-- 
You received this message because you are subscribed to the Google Groups 
"leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to leo-editor+unsubscr...@googlegroups.com.
To post to this group, send email to leo-editor@googlegroups.com.
Visit this group at https://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/d/optout.

Re: Learning flexx, part 2, and LeoWapp status

[Edward K. Ream]

On Thu, Nov 8, 2018 at 11:42 AM rengel  wrote:

Thank you for all the detailed answers!
> I might have found the answer in one of the examples (in case you're
> interested:
>
> https://flexx.readthedocs.io/en/stable/examples/hv_layout_src.html#hv-layout-py
> )
> It contains several widgets with different sizes set. I'll try them out
> tomorrow and will keep you posted.
>

Thanks.  It's good to see people getting excited about this.

Edward

-- 
You received this message because you are subscribed to the Google Groups 
"leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to leo-editor+unsubscr...@googlegroups.com.
To post to this group, send email to leo-editor@googlegroups.com.
Visit this group at https://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/d/optout.

Re: Learning flexx, part 2, and LeoWapp status

[rengel]

Both the CSS and the inline style honor the color settings, but not the 
with and height settings.

>
> My guess is that the VBox() and HBox() layouts override the width and 
> height settings.
>
> Thank you for all the detailed answers!
I might have found the answer in one of the examples (in case you're 
interested:
https://flexx.readthedocs.io/en/stable/examples/hv_layout_src.html#hv-layout-py)
It contains several widgets with different sizes set. I'll try them out 
tomorrow and will keep you posted.

Reinhard

-- 
You received this message because you are subscribed to the Google Groups 
"leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to leo-editor+unsubscr...@googlegroups.com.
To post to this group, send email to leo-editor@googlegroups.com.
Visit this group at https://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/d/optout.

Re: Learning flexx, part 2, and LeoWapp status

[Terry Brown]

On Thu, 8 Nov 2018 08:47:39 -0800 (PST)
"Edward K. Ream"  wrote:

> On Thursday, November 8, 2018 at 7:04:05 AM UTC-6, Edward K. Ream
> wrote:
> 
> *How to communicate between components?*

I'd evaluate the emit / react ( / action) framework too - avoids having
to have everything know about everything else.

Cheers -Terry

> [big snip]
> 
> Happily, flexx properties provide everything needed.  Apparently, 
> > properties must be used to communicate even between different
> > flx.Widgets. That is, the ivars of one widget are not accessible to
> > other flx.Widgets. So the example code above might better be
> > rewritten this way:
> >
> > class LeoMainWindow(flx.Widget):
> > 
> > """
> > Leo's main window, that is, root.main_window.
> > 
> > Each property x below is accessible as root.main_window.x.
> > """
> > 
> > body = flx.AnyProp(settable=True)
> > log = flx.AnyProp(settable=True)
> > minibuffer = flx.AnyProp(settable=True)
> > status_line = flx.AnyProp(settable=True)
> > tree = flx.AnyProp(settable=True)
> >
> > def init(self, body, outline):
> > with flx.VBox():
> > with flx.HBox(flex=1):
> > tree = LeoTree(outline, flex=1)
> > log = LeoLog(flex=1)
> > body = LeoBody(body, flex=1)
> > minibuffer = LeoMiniBuffer()
> > status_line = LeoStatusLine()
> > self._mutate_body(body)
> > self._mutate_log(log)
> > self._mutate_minibuffer(minibuffer)
> > self._mutate_status_line(status_line)
> > self._mutate_tree(tree)
> >
> 
> I buried the lede big time here.  I wanted to emphasize that *all* 
> flx.Widgets have a root ivar 
> ,
>  
> which is the LeoApp instance.  So it's easy to add to the log
> widget!  For example, here is the event handler in the LeoTree class:
> 
> @flx.reaction(
> 'tree.children**.checked',
> 'tree.children**.selected',
> 'tree.children**.collapsed',
> )
> def on_event(self, *events):
> 
> log = self.root.main_window.log
> for ev in events:
> id_ = ev.source.title or ev.source.text
> kind = '' if ev.new_value else 'un-'
> s = kind + ev.type
> log.put('%s: %s' % (lpad(s, 15), id_))
> 
> Recall that pscript does not support features such as "10%s" which is
> why the code above does padding by hand using the global lpad
> function. Finally, here is log.put:
> 
> def put(self, s):
> self.ace.setValue(self.ace.getValue() + '\n' + s)
> 
> Edward
> 

-- 
You received this message because you are subscribed to the Google Groups 
"leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to leo-editor+unsubscr...@googlegroups.com.
To post to this group, send email to leo-editor@googlegroups.com.
Visit this group at https://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/d/optout.

Re: Learning flexx, part 2, and LeoWapp status

[Edward K. Ream]

On Thursday, November 8, 2018 at 7:04:05 AM UTC-6, Edward K. Ream wrote:

I forgot to mention that instantiating a flx.Widget or flx.PyComponent does 
*not* cause the init methods to be called immediately.  That happens (much) 
later.  In particular,  calls to self._mutate_whatever will set properties 
at some (much) later time.

This does not cause difficulties, provided that one doesn't expect instant 
action.

Edward

-- 
You received this message because you are subscribed to the Google Groups 
"leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to leo-editor+unsubscr...@googlegroups.com.
To post to this group, send email to leo-editor@googlegroups.com.
Visit this group at https://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/d/optout.

Re: Learning flexx, part 2, and LeoWapp status

[Edward K. Ream]

On Thursday, November 8, 2018 at 7:04:05 AM UTC-6, Edward K. Ream wrote:

*How to communicate between components?*
>

[big snip]

Happily, flexx properties provide everything needed.  Apparently, 
> properties must be used to communicate even between different flx.Widgets.  
> That is, the ivars of one widget are not accessible to other flx.Widgets.  
> So the example code above might better be rewritten this way:
>
> class LeoMainWindow(flx.Widget):
> 
> """
> Leo's main window, that is, root.main_window.
> 
> Each property x below is accessible as root.main_window.x.
> """
> 
> body = flx.AnyProp(settable=True)
> log = flx.AnyProp(settable=True)
> minibuffer = flx.AnyProp(settable=True)
> status_line = flx.AnyProp(settable=True)
> tree = flx.AnyProp(settable=True)
>
> def init(self, body, outline):
> with flx.VBox():
> with flx.HBox(flex=1):
> tree = LeoTree(outline, flex=1)
> log = LeoLog(flex=1)
> body = LeoBody(body, flex=1)
> minibuffer = LeoMiniBuffer()
> status_line = LeoStatusLine()
> self._mutate_body(body)
> self._mutate_log(log)
> self._mutate_minibuffer(minibuffer)
> self._mutate_status_line(status_line)
> self._mutate_tree(tree)
>

I buried the lede big time here.  I wanted to emphasize that *all* 
flx.Widgets have a root ivar 
,
 
which is the LeoApp instance.  So it's easy to add to the log widget!  For 
example, here is the event handler in the LeoTree class:

@flx.reaction(
'tree.children**.checked',
'tree.children**.selected',
'tree.children**.collapsed',
)
def on_event(self, *events):

log = self.root.main_window.log
for ev in events:
id_ = ev.source.title or ev.source.text
kind = '' if ev.new_value else 'un-'
s = kind + ev.type
log.put('%s: %s' % (lpad(s, 15), id_))

Recall that pscript does not support features such as "10%s" which is why 
the code above does padding by hand using the global lpad function. 
Finally, here is log.put:

def put(self, s):
self.ace.setValue(self.ace.getValue() + '\n' + s)

Edward

-- 
You received this message because you are subscribed to the Google Groups 
"leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to leo-editor+unsubscr...@googlegroups.com.
To post to this group, send email to leo-editor@googlegroups.com.
Visit this group at https://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/d/optout.

Re: Learning flexx, part 2, and LeoWapp status

[Edward K. Ream]

On Thursday, November 8, 2018 at 8:35:30 AM UTC-6, rengel wrote:

did you set some window parameters using a CSS stylesheet?
>

I just talked to my brother Speed, and he said that leoflexx.py is causing 
files to be downloaded.  Indeed it is. I'm not sure this is related to your 
question, but here goes.

In the LeoBody node, just before the definition of class LeoBody, the 
following appears:

base_url = 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/'
flx.assets.associate_asset(__name__, base_url + 'ace.js')
flx.assets.associate_asset(__name__, base_url + 'mode-python.js')
flx.assets.associate_asset(__name__, base_url + 'theme-solarized_dark.js')

This might be a concern for some people.

Edward

-- 
You received this message because you are subscribed to the Google Groups 
"leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to leo-editor+unsubscr...@googlegroups.com.
To post to this group, send email to leo-editor@googlegroups.com.
Visit this group at https://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/d/optout.

Re: Learning flexx, part 2, and LeoWapp status

[Edward K. Ream]

On Thursday, November 8, 2018 at 8:35:30 AM UTC-6, rengel wrote:

Thanks for sharing!
>

You're welcome.

How did you run LeoMainWindow, in the browser - app.launch('browser') - or 
> as a desktop app - app.launch('app')? 
>

>From a console I ran a .bat file containing just:

python leo\plugins\leoflexx.py --flexx-webruntime=
browser

The top-level of leoflexx.py is now just:

import leo.core.leoBridge as leoBridge
from flexx import flx
@others
if __name__ == '__main__':
flx.launch(LeoApp, runtime='firefox-browser')
print('After flx.launch')
flx.run()

On my machine this opens mozilla.

did you set some window parameters using a CSS stylesheet? 
>

All the .css is in leoflexx.py.  In particular, the body page uses ace, 
whose startup code contains:

self.ace.setTheme("ace/theme/solarized_dark")

I couldn't figure out how to set the parameters of the main window.
>
[snip]

> Both the CSS and the inline style honor the color settings, but not the 
> with and height settings.
>

My guess is that the VBox() and HBox() layouts override the width and 
height settings.

Edward

-- 
You received this message because you are subscribed to the Google Groups 
"leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to leo-editor+unsubscr...@googlegroups.com.
To post to this group, send email to leo-editor@googlegroups.com.
Visit this group at https://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/d/optout.

Re: Learning flexx, part 2, and LeoWapp status

[rengel]

Thanks for sharing!
How did you run LeoMainWindow, in the browser - app.launch('browser') - or 
as a desktop app - app.launch('app')? If you tried the second variant, did 
you set some window parameters using a CSS stylesheet? If so, how? Right 
now, I couldn't figure out how to set the parameters of the main window. I 
tried:

from flexx import flx

class MainWindow(flx.Widget):

 CSS = """
 .flx-VBox {width: 1200px; height: 800px; background: red;}
 """

 def init(self):

 with flx.VBox():
 self.workspace = flx.Widget(style='width: 1200px; height: 800px; 
background:#cc;', flex=1)


app = flx.App(MainWindow)
app.export('main.html', link=0) # Export to a single file
# app.launch('browser') # show it now in a browser
app.launch('app') # show it as a desktop app
flx.run() # enter the main loop

Both the CSS and the inline style honor the color settings, but not the 
with and height settings.

-- 
You received this message because you are subscribed to the Google Groups 
"leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to leo-editor+unsubscr...@googlegroups.com.
To post to this group, send email to leo-editor@googlegroups.com.
Visit this group at https://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/d/optout.