2、remi--ButtonLay.py

段愿仁长九 / 2024-02-22 / 原文

上一篇末尾测试了一个用例，使用了四个组件：一个主容器和三个那啥；那么从这篇开始就尽量按照官方文档的顺序来进行测试了。

先看：remi.gui.BODY源码,此处链接中的代码与下面所示实际安装好的库中源码的单词个别有所区别，但不影响观看 >，>

remi.gui.BODY()源码

class BODY(Container):
    EVENT_ONLOAD = 'onload'
    EVENT_ONERROR = 'onerror'
    EVENT_ONONLINE = 'ononline'
    EVENT_ONPAGEHIDE = 'onpagehide'
    EVENT_ONPAGESHOW = 'onpageshow'
    EVENT_ONRESIZE = 'onresize'

    def __init__(self, *args, **kwargs):
        super(BODY, self).__init__(*args, _type='body', **kwargs)
        loading_anim = Widget()
        loading_anim.css_margin = None
        loading_anim.identifier = "loading-animation"
        loading_container = Container(children=[loading_anim], style={'display':'none'})
        loading_container.css_margin = None
        loading_container.identifier = "loading"

        self.append(loading_container)

    @decorate_set_on_listener("(self, emitter)")
    @decorate_event_js("""remi.sendCallback('%(emitter_identifier)s','%(event_name)s');""")
    def onload(self):
        """Called when page gets loaded."""
        return ()

    @decorate_set_on_listener("(self, emitter)")
    @decorate_event_js("""remi.sendCallback('%(emitter_identifier)s','%(event_name)s');""")
    def ononline(self):
        return ()

    @decorate_set_on_listener("(self, emitter)")
    @decorate_event_js("""remi.sendCallback('%(emitter_identifier)s','%(event_name)s');""")
    def onpagehide(self):
        return ()

    @decorate_set_on_listener("(self, emitter)")
    @decorate_event_js("""
            var params={};
            params['width']=window.innerWidth;
            params['height']=window.innerHeight;
            remi.sendCallbackParam('%(emitter_identifier)s','%(event_name)s',params);""")
    def onpageshow(self, width, height):
        return (width, height)

    @decorate_set_on_listener("(self, emitter)")
    @decorate_event_js("""
            var params={};
            params['width']=window.innerWidth;
            params['height']=window.innerHeight;
            remi.sendCallbackParam('%(emitter_identifier)s','%(event_name)s',params);""")
    def onresize(self, width, height):
        return (width, height)

如源码所示：

BODY类中有如下几个事件监听器，这里直接复制赋值对象（分别对应一中事件场景）进行注释了：

EVENT_ONLOAD = 'onload' # 当页面加载时调用
EVENT_ONERROR = 'onerror' # 当发生错误时调用
EVENT_ONONLINE = 'ononline' # 当网络连接时调用
EVENT_ONPAGEHIDE = 'onpagehide' # 当页面隐藏时调用
EVENT_ONPAGESHOW = 'onpageshow' # 当页面显示时调用
EVENT_ONRESIZE = 'onresize' # 当窗口大小改变时调用

总之就是，你不用管它，当你设计的漂亮ui在发生任何事件的时候，上面个的情况总有能对的上的，它会自动调用；

来一趟当然不能”白跑“啊！！！那就继续文档的下一个类：

remi.gui.Button

remi.gui.Button安装包源码

 class Button(Widget, _MixinTextualWidget):
    """The Button widget. Have to be used in conjunction with its event onclick.
        Use Widget.onclick.connect in order to register the listener.
    """
    def __init__(self, text='', *args, **kwargs):
        """
        Args:
            text (str): The text that will be displayed on the button.
            kwargs: See Widget.__init__()
        """
        super(Button, self).__init__(*args, **kwargs)
        self.type = 'button'
        self.set_text(text)

Button组件测试：

buttonLab.py

 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):
        # 创建一个主容器（VBox）
        self.container = gui.VBox(width='100%', height='100%', style={'margin': 'auto', 'padding': '10px'})
        # 创建按钮，并绑定点击事件
        self.btn = gui.Button("You Cant!")
        self.btn.onclick.do(self.button_event)

        self.container.append(self.btn)
        return self.container
    
    # 定义按钮点击事件
    def button_event(self, widget):   # 使用pycharm的，这里widget是灰色的，你可以改成anyword,但是千万不要觉得它用不上给删掉了哈，你会后悔的！！！
        self.btn.set_text("I have been clicked!")


if __name__ == "__main__":
    start(MyApp, debug=True, address='127.0.0.1', port=8085, start_browser=True, username=None, password=None)