一、前言

Remi入门第一弹传送门

这一系列教程的例程会放在wzcwzc05/remi-study

在这一篇教程中，将介绍:

  • 详细介绍HelloWorld
  • App.start() 用法
  • 基本部件的添加、删除与修改
  • App.close()用法

二、HelloWorld详解

虽然在第一弹中已经介绍过，但是在这里我将详细讲解remi中的HelloWorld，以便大家更好地理解这个库。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# -*- coding:utf-8 -*-
""" HelloWorld例程
"""

import remi.gui as gui
from remi import start, App


class MyApp(App):
    def __init__(self, *args):
        super(MyApp, self).__init__(*args)

    def main(self):
        #添加一个宽为300高为200的网页窗口
        wid = gui.VBox(width=300, height=200)

        #创建一个文本框,style是{"white-space":"pre"}，高为50%，宽为80%
        self.lbl = gui.Label('Hello\n test', width='80%', height='50%', style={"white-space":"pre"})

        #一个简单交互的按钮
        bt = gui.Button('Press me!', width=200, height=30)

        #建立这个按钮的点击事件
        bt.onclick.do(self.on_button_pressed)
        
        #添加按钮到容器
        wid.append(self.lbl)
        wid.append(bt)

        # 返回根部件
        return wid

    # 按钮的点击事件
    def on_button_pressed(self, emitter):
        self.lbl.set_text('Hello World!')
        

if __name__ == "__main__":
    # 开启服务器，在IP0.0.0.0,端口为随机
    start(MyApp, debug=True, address='0.0.0.0', port=0)

注意点:

  • 在main()中 “return wid”必不可少
  • 在start()中port=0就是随机端口号，关于start()的参数会在下面提及

二、start()用法

你可以像这样在 start 中自定义可选参数:

1
start(MyApp, address='127.0.0.1', port=8081, multiple_instance=False, enable_file_cache=True, update_interval=0.1, start_browser=True)

参数(Parameters):

  • address: 网络IP接口
  • port: 监听端口
  • multiple_instance: 布尔值, 如果为True，连接到你脚本的多个客户端会有不同的应用情况（由唯一的cookie会话标识符标识）
  • enable_file_cache: 布尔值, 如果为True，会使资源缓存
  • update_interval:以秒为单位的GUI更新间隔. 如果是0，则每个更改会伴随一次更新且App.idle 方式无法被调用.
  • start_browser: 布尔值，定义浏览器是否应该在启动时自动打开
  • standalone: 布尔值, 指明了在何处运行应用程序.如果为True,则以标准窗口模式运行.如果为False，则界面显示在浏览器网页中.

额外参数(Additional Parameters):

  • username: 为了基本的HTTP认证
  • password: 为了基本的HTTP认证
  • certfile: SSL 证书文件名
  • keyfile: SSL 密匙文件
  • ssl_version: 认证版本 (i.e. ssl.PROTOCOL_TLSv1_2). 如果禁用SSL加密.

三、基本部件的添加、删除与修改

例程:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
# -*- coding:utf-8 -*-
""" 这个例子展现了一下几种部件的使用方法:
    Widget.append(widget, key) : 添加部件到一个容器
    Widget.remove_child(widget) : 从某个容器中移除某个部件
    Widget.empty() : 移除容器中的所有部件
"""

import remi.gui as gui
from remi import start, App
import os


class MyApp(App):
    def main(self):
        main_container = gui.VBox()
        lbl = gui.Label("Press the buttons to add or remove labels")
        #创建按钮
        bt_add = gui.Button("add a label", style={'margin': '3px'})
        #按钮事件
        bt_add.onclick.do(self.on_add_a_label_pressed)
        
        bt_remove = gui.Button("remove a label", style={'margin': '3px', 'background-color': 'orange'})
        bt_remove.onclick.do(self.on_remove_a_label_pressed)
        
        bt_empty = gui.Button("empty", style={'margin': '3px', 'background-color': 'red'})
        bt_empty.onclick.do(self.on_empty_pressed)
        
        self.lbls_container = gui.HBox()
        main_container.append([lbl, bt_add, bt_remove, bt_empty, self.lbls_container])

        # 返回根部件
        return main_container

    def on_add_a_label_pressed(self, emitter):
        # 创建一个标签，并让其拥有一个特殊id
        key = str(len(self.lbls_container.children))
        lbl = gui.Label("label id: " + key, style={'border': '1px solid gray', 'margin': '3px'})
        self.lbls_container.append(lbl, key)

    def on_remove_a_label_pressed(self, emitter):
        # 如果没有这个部件，那就退出函数
        if len(self.lbls_container.children) < 1:
            return
        key = str(len(self.lbls_container.children) - 1)
        self.lbls_container.remove_child(self.lbls_container.children[key])

    def on_empty_pressed(self, emitter):
        self.lbls_container.empty()


if __name__ == "__main__":
    start(MyApp)

整理一下:

  • bt=gui.Button()创建按钮 bt.onclick.do()创建按钮点击事件
  • lb=gui.Label()创建文本标签
  • Widget.append(widget, key)添加一个组件，并将其id设为key
  • Widget.remove_child(widget) 移除某个部件
  • Widget.empty()移除所有的部件

四、关闭

这里要注意的是关闭的是服务器，而不是关闭这一个session。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
""" 这个例子展现了运用App.close()关闭服务器
"""

import remi.gui as gui
from remi import start, App


class MyApp(App):
    def main(self, name='world'):
        # margin 0px auto 允许让app显示在屏幕中央
        wid = gui.VBox(width=300, height=200, margin='0px auto')

        bt = gui.Button('Close App', width=200, height=30)
        bt.style['margin'] = 'auto 50px'
        bt.style['background-color'] = 'red'

        bt.onclick.do(self.on_button_pressed)

        wid.append(bt)
        return wid

    #监听事件
    def on_button_pressed(self, _):
        self.close()  # 关闭服务器

    def on_close(self):
        #加载App.on_close允许在关闭前进行一些操作
        print("I'm going to be closed.")
        super(MyApp, self).on_close()#关闭


if __name__ == "__main__":
    start(MyApp)

注意:

  • app.close()直接关闭服务器
  • def on_close(self)定义的是一个在关闭之前的函数，允许你在关闭之前执行一些操作