[Python] Remi builds a simple web page

Recently, when I was researching Daiso, I discovered python's remi library . In the spirit of giving it a try, I finally found it to be quite fun.

Remi's doc documentation: https://remi.readthedocs.io/en/latest/remi.html

Precautions

Some problems were encountered during the development:
1. The remi library is not suitable for concurrent websites - during the development process, the modification of the port by two terminals cannot be independent of each other.
This is also a more interesting feature-for myself, it can be controlled remotely.
2. InputDialog, which is the one mentioned below. It's not highly customizable, but it doesn't matter, the following uses a combination of InputText and button to complete a suggested input interaction

download ——《remi-doc：download》

The directory is as follows:

self.allowDownload = gui.FileDownloader('download','./downloadFile/leon.txt',width=200,height=30,margin='10px')

container.append(self.allowDownload,key='file_download')

InputDiag input message prompt

After clicking, it will appear:

OK After confirmation:

code:

container = gui.VBox(width=1200, height=500,margin='auto auto')
self.lbl = gui.Label('')
container.append(self.lbl)

self.btInputDiag = gui.Button('查询公司', width=200, height=30, margin='10px')
self.btInputDiag.onclick.do(self.open_input_dialog)
container.append(self.btInputDiag)

self.lbl2 = gui.Label('a')
container.append(self.lbl2)

---

   
def open_input_dialog(self, widget):
      self.inputDialog = gui.InputDialog('查询公司名称', '',initial_value='',width=500)
      self.inputDialog.confirm_value.do(self.on_input_dialog_confirm)
      self.inputDialog.show(self)
  
def on_input_dialog_confirm(self, widget, value):
    print(value+" was what you type")
    self.lbl.set_text('Hello ' + value)

---

Input box and button transfer data

1. Horizontal function: use remi’s vbox function
2. Use Input type on the left side and Button type on the right side
3. Use onchange to call and set_value the value of the input on the left side
4. The button calls the current input value


1. Horizontal function: use remi The vbox function

searchBar = gui.HBox(width=300,height=200)

2. Use the Input type on the left and the Button type on the right

strHub = gui.Input('companies name')
searchBtn = gui.Button('搜索', width=50, height=50,style={
    
    'text-align':'center'})
        

3. Use onchange to call and set_value the value of the input on the left side

strHub = gui.Input('companies name')
strHub.onchange.do(self.print,strHub.get_value())
searchBtn = gui.Button('搜索', width=50, height=50,style={
    
    'text-align':'center'})
searchBtn.onclick.do(self.btnGetName)

4. The button calls the value of the current input

searchBar.append(strHub)
searchBar.append(searchBtn)
containerUp.append(searchBar)
container.append(containerUp)

def btnGetName(self,a):
    print(self.strHub.get_value())