Flexx:一个强大的、跨平台的、纯Python开发的Web的GUI

1 说明：

=====

1.1 Flexx是一个纯python工具包，用于创建图形界面应用程序（GUI）。

1.2 FlexX是跨平台的，因为它使用纯Python开发。

1.3 它使用Web技术呈现接口；可以使用flexx创建桌面应用程序，也可以导出应用程序以分离HTML文档。

1.4 如果在桌面模式下运行，建议使用Firefox浏览器。

2 准备：

======

2.1 官网：

https://flexx.readthedocs.io/en/stable/
https://github.com/flexxui/flexx

2.2 安装：

pip install flexx
#本机安装
pip3.8 install flexx

2.3 报错一：未建立软连接，我暂时跳过也能使用

WARNING: The script webruntime is installed in '/usr/local/python3.8/bin' which is not on PATH.
  Consider adding this directory to PATH or, if you prefer to suppress this warning, use --no-warn-script-location.
 
  WARNING: The script flexx is installed in '/usr/local/python3.8/bin' which is not on PATH.
  Consider adding this directory to PATH or, if you prefer to suppress this warning, use --no-warn-script-location.

2.4 报错二：可能是版本兼容问题

from _bz2 import BZ2Compressor, BZ2Decompressor
ModuleNotFoundError: No module named '_bz2'

2.5 环境：

华为笔记本电脑、深度deepin-linux操作系统、谷歌浏览器、python3.8和微软vscode编辑器。

2.6 解决报错二的方法，我没有重新编译python3.8，而是换一种方法，如下。

2.7 如果在机器上没有
_bz2.cpython-37m-x86_64-linux-gnu.so的话，可以到这里下载：

链接：
https://pan.baidu.com/s/1GzUY4E0G2yVUfqxHOIzn1A

提取码：oiwh

2.8 本机是python3.8，故将下载
_bz2.cpython-37m-x86_64-linux-gnu.so文件，修改一下：
_bz2.cpython-38m-x86_64-linux-gnu.so，并拷贝到python3的安装目录，如本机

/usr/local/python3.8/lib/python3.8/site-packages
/usr/local/python3.8/lib/python3.8/lib-dynload

2.9 终端法：在cp
_bz2.cpython-38m-x86_64-linux-gnu.so文件的目录下，打开终端，输入

cp _bz2.cpython-38m-x86_64-linux-gnu.so /usr/local/python3.8/lib/python3.8/site-packages
cp _bz2.cpython-38m-x86_64-linux-gnu.so /usr/local/python3.8/lib/python3.8/lib-dynload

3 简述：

=====

Flexx 使用模块化设计，包含一些子系统：

ui - UI 部件

app - 事件循环和服务器

react - reactive 编程

pyscript - Python to JavaScript transpiler

webruntime - to launch a runtime

注意：

=====

1、下面的代码，运行的浏览器是谷歌浏览器，非推荐的火狐浏览器，所以适当修改代码。

2、带大家入门，有注释和基本用法。

=====

4 Hello world：

==========

4.1 代码：

from flexx import flx

class Example(flx.Widget):
    #内置CSS定义样式，还是要学一点html的相关知识的
    CSS = """
    .flx-Label {
        background: #9d9;
        width:200px;
        height:3px
    }
    """
    def init(self):
        flx.Label(text='hello world你好世界')

#网页的标题名和样式定义，注意这个样式是指html或body的背景颜色定义
app = flx.App(Example,title='Temperature 1951 - 2014', style = 'background:pink;')
#导出或者保存为一张单html文件
#app.export('example.html', link=0)  # Export to single file
app.launch('browser')  # show it now in a browser
#flx.run()  # enter the mainloop
flx.start()  #与run小区别就是退出循环，还可再启动

4.2 操作和效果图：

4.3 flx.run与flx.start的区别，图：

5 带CSS的转动的点组成的圆：

======================

5.1 代码：

from time import time
from flexx import flx

class Circle(flx.Label):
    CSS = """
    body {
    /*body的背景颜色这种方法*/
    /*background-color: rgb(49, 107, 233);*/
    background-color:black;
        }
    .flx-Circle {
        /*圆点为red，注意可以直接如下，也可以使用：#f00为红色*/
        background: blue;
        /*background-color:black;*/
        border-radius: 10px;
        width: 10px;
        height: 10px;
    }
    """

class Circles(flx.Widget):
    def init(self):
        with flx.PinboardLayout():
            self._circles = [Circle() for i in range(32)]
        self.tick()

    def tick(self):
        global Math, window
        t = time()
        for i, circle in enumerate(self._circles):
            x = Math.sin(i*0.2 + t) * 30 + 50
            y = Math.cos(i*0.2 + t) * 30 + 50
            circle.apply_style(dict(left=x + '%', top=y + '%'))
        window.setTimeout(self.tick, 30)

if __name__ == '__main__':
    #m = flx.App(Circles).launch('app')  #指定火狐浏览器，容易报错
    m = flx.App(Circles).launch()  #打开默认浏览器，谷歌浏览器
    flx.run()

5.2 操作和效果图：

6 带滑动条的sin绘图：

=================

6.1 代码：

from flexx import flx

class SineExample(flx.Widget):
    def init(self):
        time = [i/100 for i in range(100)]
        with flx.VBox():
            with flx.HBox():
                #文本标签
                flx.Label(text='Frequency:')
                #滑动条设置
                self.slider1 = flx.Slider(min=1, max=10, value=5, flex=1)
                flx.Label(text='Phase:')
                self.slider2 = flx.Slider(min=0, max=6, value=0, flex=1)
            #绘图控件
            self.plot = flx.PlotWidget(flex=1, xdata=time, xlabel='time',
                                       ylabel='amplitude', title='a sinusoid')

    @flx.reaction
    def __update_amplitude(self, *events):
        global Math
        freq, phase = self.slider1.value, self.slider2.value
        ydata = []
        for x in self.plot.xdata:
            ydata.append(Math.sin(freq*x*2*Math.PI+phase))
        self.plot.set_data(self.plot.xdata, ydata)

if __name__ == '__main__':
    m = flx.launch(SineExample)
    flx.run()

6.2 图：

7 主题表单：

========

7.1 代码：

from flexx import flx

class ThemedForm(flx.Widget):
    CSS = """
    .flx-Button {
        background: #9d9;
    }
    .flx-LineEdit {
        border: 2px solid #9d9;
    }
    """

    def init(self):
        with flx.HFix():
            with flx.FormLayout() as self.form:
                self.b1 = flx.LineEdit(title='Name:', text='Hola')
                self.b2 = flx.LineEdit(title='Age:', text='Hello world')
                self.b3 = flx.LineEdit(title='Favorite color:', text='Foo bar')
                flx.Button(text='Submit1')
                #flx.Widget(flex=1)  #有间隙空行

            with flx.FormLayout() as self.form:
                self.b4 = flx.LineEdit(title='Name:', text='Hola')
                self.b5 = flx.LineEdit(title='Age:', text='Hello world')
                self.b6 = flx.LineEdit(title='Favorite color:', text='Foo bar')
                flx.Button(text='Submit2')
                flx.Widget(flex=1)  # 没有间隙空行的

if __name__ == '__main__':
    #m = flx.launch(ThemedForm, 'app')  #报错，这是默认火狐浏览器的
    m = flx.launch(ThemedForm)  #启动本机默认的谷歌浏览器
    flx.run()

7.2 图：

8 附注几个demo图：

==============

8.1 chatroom：聊天室

8.2 pointpaint：

8.3 Bootstrap：

8.4 scroll and button：

8.5 PlotlyGeoDemo：

===官网的demo显示超级强大的例子===

===自己整理并分享出来===

喜欢的人，请点赞、关注、评论、转发和收藏。