python !\rm命令 python remi

说明：

=====

1.1 如果不会ｗｅｂ前端的html、JavaScript、CSS的知识怎么办？无所不能的python可以做到。

1.2 Remi是一个用于Python应用程序的GUI库，它将应用程序的界面转换为HTML，以便在Web浏览器中呈现。

1.3 这将删除特定于平台的依赖项，并允许您使用Python轻松开发跨平台应用程序！
不会Html、JavaScript、CSS，怎么办？有python的Remi库

2 准备：

=====

2.1 官网地址：

2.2 环境：

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

2.3 安装：

pip install remi
#本机安装
sudo pip3.8 install remi
sudo pip3.8 install -i https://mirrors.aliyun.com/pypi/simple remi

3 Hello world：

==========

3.1 代码：注释版

import remi.gui as gui
from remi import start, App
#定义类
class MyApp(App):
def init(self, *args):
super(MyApp, self).init(*args)
#以上3行代码，固定初始化

def main(self):
    #实例化一个VBox，大小设置
    wid = gui.VBox(width=300, height=200)
    #窗口的标签label=显示文本，大小比例法设置
    # 注意\n代表换行，但需要配合style={"white-space":"pre"}，才起作用
    #preserves newline==保留换行符
    self.lbl = gui.Label('Hello\n World', width='80%', height='50%',style={"white-space":"pre"})
    #按钮和名称、大小设置，支持中文
    self.bt = gui.Button('Press me=点击我!', width=200, height=30)
    #绑定按钮的点击事件，调用函数
    self.bt.onclick.do(self.on_button_pressed)
    #adding the widgets to the main container
    #将小部件添加到主容器wid，有时候上面实例化用container=主容器
    wid.append(self.lbl)
    wid.append(self.bt)
    return wid

# listener function==监听功能
#调用点击按钮函数；emitter==发射器
def on_button_pressed(self, emitter):
    self.lbl.set_text('Hello World!')

if name == “main”:
# starts the webserver
# 主要参数
# start(MyApp,address=‘127.0.0.1’, port=8081, multiple_instance=False,enable_file_cache=True, update_interval=0.1, start_browser=True)
#start(MyApp, debug=True, address=‘0.0.0.0’, port=0) #本机测试地址改动无效，为默认地址
start(MyApp, debug=True) #端口指定无效，也不是默认8081，估计本机端口已经被占用

3.2 操作和效果：
不会Html、JavaScript、CSS，怎么办？有python的Remi库

4 Bootstrap：

=========

4.1 代码：bootstrap.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):
    #引入在线Bootstrap的css文件
    my_css_head = """
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        """
    #引入在线Bootstrap的js文件
    my_js_head = """
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        """

    self.page.children['head'].add_child('mycss', my_css_head)
    self.page.children['head'].add_child('myjs', my_js_head)
   #主窗口实例化，定义大小和样式
    main_container = gui.VBox(width='500px', height='500px', style={'margin':'0px auto','padding':'10px'})
    #label=标签
    self.lbl = gui.Label("Label with Lock Icon=带锁图标的标签")
    #样式选择
    self.lbl.add_class("glyphicon glyphicon-lock label label-primary")
    #输入框
    self.tf = gui.TextInput(hint='Your Input')
    #样式选择
    self.tf.add_class("form-control input-lg")
    #下拉选择框
    self.dd = gui.DropDown(width='200px')
    #字体大小
    self.dd.style.update({'font-size':'large'})
    #样式选择
    self.dd.add_class("form-control dropdown")
    #下拉框内容选择
    self.item1 = gui.DropDownItem("First Choice")
    self.item2 = gui.DropDownItem("Second Item")
    #定义self的功能，目前未定义
    self.dd.append(self.item1,'item1')
    self.dd.append(self.item2,'item2')
         
    #Table=表格，第一个是表头
    myList = [  ('ID','Lastname','Firstname','邮编','城市'),
                ('1','Pan','Peter','888888','上海'),
                ('2','Sepp','Schmuck','123456','北京')  ]
    #表格设置，内容，大小
    self.tbl = gui.Table.new_from_list(content=myList,width='400px',height='100px',margin='10px')
    #样式选择
    self.tbl.add_class("table table-striped")
    #按钮设置
    self.bt1 = gui.Button("OK", width="100px")
    #是Bootstrap样式 Class:  btn-success
    self.bt1.add_class("btn-success")                   
    self.bt2 = gui.Button("Abbruch",width="100px")
    #Bootstrap Class:  btn btn-danger
    self.bt2.add_class("btn-danger")                
            
    #Build up the gui，主窗口挂载下面项目
    main_container.append(self.lbl,'lbl')
    main_container.append(self.tf,'tf')
    main_container.append(self.dd,'dd')
    main_container.append(self.tbl,'tbl')
    main_container.append(self.bt1,'btn1')
    main_container.append(self.bt2,'btn2')
    
    return main_container

if name == “main”:
# starts the webserver
start(MyApp, debug=True)

4.2 操作和效果图：
不会Html、JavaScript、CSS，怎么办？有python的Remi库

5 tabbox：

=======

5.1 代码：

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):
    #按钮
    b1 = gui.Button('Show second tab', width=200, height=30)
    #表格框
    tb = gui.TabBox(width='80%')
    tb.append(b1, 'First')
    
    b2 = gui.Button('Show third tab', width=200, height=30)
    #tb.add_tab(b2, 'Second', None)
    tb.add_tab(b2, 'Second')

    b3 = gui.Button('Show first tab', width=200, height=30)
    #tb.add_tab(b3, 'Third', None)
    tb.add_tab(b3, 'Third')
    #3种方法
    b1.onclick.do(self.on_bt1_pressed, tb, b2)
    b2.onclick.do(self.on_bt2_pressed, tb, 'Third')
    b3.onclick.do(self.on_bt3_pressed, tb, 0)

    return tb

#按钮功能的定义，3种功能
def on_bt1_pressed(self, widget, tabbox, refWidgetTab):
    tabbox.select_by_widget(refWidgetTab)

def on_bt2_pressed(self, widget, tabbox, refWidgetTabName):
    tabbox.select_by_name(refWidgetTabName)

def on_bt3_pressed(self, widget, tabbox, tabIndex):
    tabbox.select_by_index(tabIndex)

if name == “main”:
#网页标题，standalone=False默认是不允许
start(MyApp, title=“Tab Demo=表格例子”, standalone=False)

5.2 操作和效果图：
不会Html、JavaScript、CSS，怎么办？有python的Remi库

６standalone：

＝＝＝＝＝＝

6.1 代码： mian.py
from remi import start, App
 ＃将 bootstrap.py脚本放在本代码mian.py同一个目录下
 from bootstrap import MyAppif name == “main”:
 start(MyApp, standalone=True)6.2 代码：bootstrap.py＝４．１所指定代码：
6.3　注意启动网页服务器默认为不启动(false)，需要启动则为standalone=True。
6.4 操作和效果图：
 不会Html、JavaScript、CSS，怎么办？有python的Remi库把ｗｅｂ网页变成一个ａｐｐ的ＧＵ