Merge.

Author: dddomodossola

README.md

@@ -48,6 +48,12 @@ Subfolders are accepted, and so:
 my_widget.attributes['background-image'] = "url('/my_resources:subfolder/other_subfolder/image.png')"
 ```
 
+The event TextInput.onenter is no more supported.
+
+The events TextInput.onkeydown and TextInput.onkeyup are now different, and require a different listener format. There is an additional parameter keycode.
+
+The TextInput.onchange event now occurs also in case of Enter key pressed, if TextInput is single_line.
+
 
 Getting Started
 ===

editor/editor.py

@@ -593,14 +593,7 @@ def main(self):
                 
                 return false;""" % {'evt':self.EVENT_ONDROPPPED}
         self.project.attributes['editor_varname'] = 'App'
-        self.project.attributes[self.project.EVENT_ONKEYDOWN] = """
-                var params={};
-                params['keypressed']=event.keyCode;
-                sendCallbackParam('%(id)s','%(evt)s',params);
-                if(event.keyCode==46){
-                    return false;
-                }
-            """ % {'id':str(id(self)), 'evt':self.project.EVENT_ONKEYDOWN}
+        self.project.onkeydown.connect(self.onkeydown)
 
         self.projectConfiguration = editor_widgets.ProjectConfigurationDialog('Project Configuration', 'Write here the configuration for your project.')
 
@@ -801,10 +794,10 @@ def toolbar_delete_clicked(self, widget):
         self.selectedWidget = parent
         print("tag deleted")
 
-    def onkeydown(self, keypressed):
-        if str(keypressed)=='46': #46 the delete keycode
+    def onkeydown(self, emitter, key, keycode, ctrl, shift, alt):
+        if str(keycode)=='46': #46 the delete keycode
             self.toolbar_delete_clicked(None)
-        print("Key pressed: " + str(keypressed))
+        print("Key pressed: " + str(keycode))
 
 
 def on_dropped(self, left, top):
@@ -816,16 +809,5 @@ def on_dropped(self, left, top):
     self.style['top']=top
 
 
-def main():
-    #p = Project()
-    #root = p.load('./example_project.py')
-    #p.append(root, "root")
-    #p.save(None)
-    
-    # starts the webserver
-    # optional parameters
-    # start(MyApp,address='127.0.0.1', port=8081, multiple_instance=False,enable_file_cache=True, update_interval=0.1, start_browser=True)
-    start(Editor, debug=False, address='0.0.0.0', port=8082, update_interval=0.01)
-    
 if __name__ == "__main__":
-    main()
+    start(Editor, debug=False, address='0.0.0.0', port=8082, update_interval=0.01, multiple_instance=True)

editor/editor_widgets.py

@@ -295,16 +295,17 @@ def show(self, *args):
 
     def add_fileinput_field(self, defaultname='untitled'):
         self.txtFilename = gui.TextInput()
-        self.txtFilename.onenter.connect(self.on_enter_key_pressed)
+        self.txtFilename.onkeydown.connect(self.on_enter_key_pressed)
         self.txtFilename.set_text(defaultname)
 
         self.add_field_with_label("filename","Filename",self.txtFilename)
 
     def get_fileinput_value(self):
         return self.get_field('filename').get_value()
 
-    def on_enter_key_pressed(self, widget, value):
-        self.confirm_value(None)
+    def on_enter_key_pressed(self, widget, value, keycode):
+        if keycode=="13":
+            self.confirm_value(None)
 
     @gui.decorate_event
     def confirm_value(self, widget):
@@ -651,7 +652,7 @@ def __init__(self, appInstance, **kwargs):
         self.style['display'] = 'block'
         self.style['overflow'] = 'hidden'
 
-        self.txtInput = StringEditor(width='80%', height='100%')
+        self.txtInput = gui.TextInput(width='80%', height='100%')
         self.txtInput.style['float'] = 'left'
         self.txtInput.onchange.connect(self.on_txt_changed)
         self.append(self.txtInput)
@@ -685,32 +686,6 @@ def set_value(self, value):
         self.txtInput.set_value(value)
 
 
-class StringEditor(gui.TextInput, gui.EventSource):
-    """ This class sends the input directly to the listener, but don't applies the changes
-        to the widget itself in order to avoid to get updated losting the focus.
-        The value will be committed to the widget itself when blurs.
-    """
-    def __init__(self, *args, **kwargs):
-        super(StringEditor, self).__init__(True, *args, **kwargs)
-        gui.EventSource.__init__(self)
-        self.attributes[self.EVENT_ONBLUR] = \
-            """var elem=document.getElementById('%(id)s');elem.value = elem.value.split('\\n').join('');
-            var params={};params['new_value']=elem.value;
-            sendCallbackParam('%(id)s','%(evt)s',params);""" % {'id': self.identifier, 'evt': self.EVENT_ONCHANGE}
-
-        self.attributes[self.EVENT_ONKEYUP] = \
-            """var elem=document.getElementById('%(id)s');elem.value = elem.value.split('\\n').join('');
-            var params={};params['new_value']=elem.value;
-            sendCallbackParam('%(id)s','%(evt)s',params);""" % {'id': self.identifier, 'evt': self.EVENT_ONKEYUP}
-
-        self.attributes[self.EVENT_ONKEYDOWN] = \
-            """if((event.charCode||event.keyCode)==13){event.keyCode = 0;event.charCode = 0; return false;}""" % {'id': self.identifier}
-
-    @gui.decorate_event
-    def onkeyup(self, new_value):
-        return (new_value,)
-
-
 #widget that allows to edit a specific html and css attributes
 #   it has a descriptive label, an edit widget (TextInput, SpinBox..) based on the 'type' and a title
 class EditorAttributeInput(gui.Widget, gui.EventSource):
@@ -757,7 +732,7 @@ def __init__(self, attributeName, attributeDict, appInstance=None):
                 self.inputWidget = CssSizeInput(appInstance)
 
         else: #default editor is string
-            self.inputWidget = StringEditor()
+            self.inputWidget = gui.TextInput()
 
         self.inputWidget.onchange.connect(self.on_attribute_changed)
         self.inputWidget.set_size('50%','22px')

examples/examples_from_contributors/SCOREBOARD_WITH_SETTING_PAGE/SCOREBOARD_WITH_SETTING_PAGE.py

@@ -28,7 +28,7 @@ def idle(self):
     def ChangeColor(self, Text, Side, Num, BtUp, BtDn):
         self.In = 1
         with self.update_lock:
-            Text.set_text(Num)
+            Text.set_text(str(Num))
             Side.style['background-color'] = 'red'
             BtUp.attributes['class']='up80red'
             BtDn.attributes['class']='dn80red'
@@ -89,22 +89,22 @@ def main(self):
         self.wid3 = gui.Widget(width=230, height=350, margin='5px', style={'background':'green'})
         # Left side interface
         self.lblLeftName = gui.Label(self.Name1, width='95%', height='60px', style={'margin':'20px 2px 0px', 'font-size':'40px', 'line-height':'60px', 'text-align':'center', 'overflow':'hidden'})
-        self.lblLeftNum = gui.Label(self.LeftNum, width='100%', height='130px', style={'margin':'0px 0px 10px', 'font-size':'140px', 'line-height':'130px', 'text-align':'center'})
+        self.lblLeftNum = gui.Label(str(self.LeftNum), width='100%', height='130px', style={'margin':'0px 0px 10px', 'font-size':'140px', 'line-height':'130px', 'text-align':'center'})
         self.btLeftPlus = gui.Button('', width='80px', height='80px', style={'margin':'0px 10px 20px', 'font-size':'50px', 'line-height':'50px', 'text-align':'center'})
         self.btLeftPlus.attributes['class']='up80'
         self.btLeftMinus = gui.Button('', width='80px', height='80px', style={'margin':'0px 10px 20px', 'font-size':'50px', 'line-height':'50px', 'text-align':'center'})
         self.btLeftMinus.attributes['class']='dn80'
         lblLeftMatch = gui.Label('MATCHES WON:', width=150, height='30px', style={'margin':'0px 5px', 'font-size':'20px', 'line-height':'30px', 'text-align':'left', 'display':'inline'})
-        self.lblLeftMatches = gui.Label(self.LeftMatchNum, width=30, height='30px', style={'margin':'0px 5px', 'font-size':'20px', 'line-height':'30px', 'text-align':'left', 'display':'inline'})
+        self.lblLeftMatches = gui.Label(str(self.LeftMatchNum), width=30, height='30px', style={'margin':'0px 5px', 'font-size':'20px', 'line-height':'30px', 'text-align':'left', 'display':'inline'})
         # Right side interface
         self.lblRightName = gui.Label(self.Name2, width='95%', height='60px', style={'margin':'20px 2px 0px', 'font-size':'40px', 'line-height':'60px', 'text-align':'center', 'overflow':'hidden'})
-        self.lblRightNum = gui.Label(self.LeftNum, width='100%', height='130px', style={'margin':'0px 0px 10px', 'font-size':'140px', 'line-height':'130px', 'text-align':'center'})
+        self.lblRightNum = gui.Label(str(self.LeftNum), width='100%', height='130px', style={'margin':'0px 0px 10px', 'font-size':'140px', 'line-height':'130px', 'text-align':'center'})
         self.btRightPlus = gui.Button('', width='80px', height='80px', style={'margin':'0px 10px 20px', 'font-size':'50px', 'line-height':'50px', 'text-align':'center'})
         self.btRightPlus.attributes['class']='up80'
         self.btRightMinus = gui.Button('', width='80px', height='80px', style={'margin':'0px 10px 20px', 'font-size':'50px', 'line-height':'50px', 'text-align':'center'})
         self.btRightMinus.attributes['class']='dn80'
         lblRightMatch = gui.Label('MATCHES WON:', width=150, height='30px', style={'margin':'0px 5px', 'font-size':'20px', 'line-height':'30px', 'text-align':'left', 'display':'inline'})
-        self.lblRightMatches = gui.Label(self.RightMatchNum, width=30, height='30px', style={'margin':'0px 5px', 'font-size':'20px', 'line-height':'30px', 'text-align':'left', 'display':'inline'})
+        self.lblRightMatches = gui.Label(str(self.RightMatchNum), width=30, height='30px', style={'margin':'0px 5px', 'font-size':'20px', 'line-height':'30px', 'text-align':'left', 'display':'inline'})
         # Appends all the widgets to create the interface
         self.wid2.append([self.lblLeftName, self.lblLeftNum, self.btLeftPlus, self.btLeftMinus, lblLeftMatch, self.lblLeftMatches])
         self.wid3.append([self.lblRightName, self.lblRightNum, self.btRightPlus, self.btRightMinus, lblRightMatch, self.lblRightMatches])
@@ -113,7 +113,7 @@ def main(self):
         # Extra labels and button to manage:
         # The number of games to win, to win a match
         lblMatch = gui.Label('GAMES FOR MATCH:', width='50%', height='50px', style={'margin':'15px 2px 0px 10px', 'font-size':'25px', 'line-height':'35px', 'text-align':'center'})
-        self.lblMatches = gui.Label(self.MatchNum, width='8%', height='50px', style={'margin':'15px 2px 0px', 'font-size':'25px', 'line-height':'35px', 'text-align':'center'})
+        self.lblMatches = gui.Label(str(self.MatchNum), width='8%', height='50px', style={'margin':'15px 2px 0px', 'font-size':'25px', 'line-height':'35px', 'text-align':'center'})
         btMatchPlus = gui.Button('', width='50px', height='50px', style={'margin':'5px 2px 0px 20px', 'font-size':'30px', 'line-height':'30px', 'text-align':'center'})
         btMatchPlus.attributes['class']='up50'
         btMatchMinus = gui.Button('', width='50px', height='50px', style={'margin':'5px 2px', 'font-size':'30px', 'line-height':'30px', 'text-align':'center'})
@@ -185,11 +185,11 @@ def on_button_setting(self, emitter):
     def check_score(self):
         # Here the software update automatically any number you can see in the app
         if (self.LeftNum < self.MatchNum) and (self.RightNum < self.MatchNum):
-            self.lblLeftNum.set_text(self.LeftNum)
-            self.lblRightNum.set_text(self.RightNum)
-            self.lblLeftMatches.set_text(self.LeftMatchNum)
-            self.lblRightMatches.set_text(self.RightMatchNum)
-            self.lblMatches.set_text(self.MatchNum)
+            self.lblLeftNum.set_text(str(self.LeftNum))
+            self.lblRightNum.set_text(str(self.RightNum))
+            self.lblLeftMatches.set_text(str(self.LeftMatchNum))
+            self.lblRightMatches.set_text(str(self.RightMatchNum))
+            self.lblMatches.set_text(str(self.MatchNum))
         # Here the software check if a background needs to be green or orange.
         if (self.LeftNum < self.MatchNum - 1):
             self.wid2.style['background-color'] = 'green'

examples/examples_from_contributors/bootstrap.py

@@ -18,6 +18,17 @@
 
 class MyApp(App):
     def __init__(self, *args):
+        res_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'res')
+        #static_file_path can be an array of strings allowing to define
+        #  multiple resource path in where the resources will be placed
+        super(MyApp, self).__init__(*args, static_file_path=res_path)
+
+    def idle(self):
+        #idle loop, you can place here custom code
+        # avoid to use infinite iterations, it would stop gui update
+        pass
+
+    def main(self):
         #custom additional html head tags
         my_html_head = """<title>Bootstrap Test</title>"""
 
@@ -38,18 +49,11 @@ def __init__(self, *args):
             <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
             <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
             """
+        #appending elements to page header
+        self.page.children['head'].add_child('myhtml', my_html_head)
+        self.page.children['head'].add_child('mycss', my_css_head)
+        self.page.children['head'].add_child('myjs', my_js_head)
 
-        res_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'res')
-        #static_file_path can be an array of strings allowing to define
-        #  multiple resource path in where the resources will be placed
-        super(MyApp, self).__init__(*args, static_file_path=res_path, html_head=my_html_head, css_head=my_css_head, js_head=my_js_head)
-
-    def idle(self):
-        #idle loop, you can place here custom code
-        # avoid to use infinite iterations, it would stop gui update
-        pass
-
-    def main(self):
         #creating a container VBox type, vertical (you can use also HBox or Widget)
         main_container = gui.VBox(width='500px', height='500px', style={'margin':'0px auto','padding':'10px'})
 
@@ -105,6 +109,6 @@ def main(self):
 
 if __name__ == "__main__":
     # starts the webserver
-    start(MyApp, address='127.0.0.1', port=8085, start_browser=True, username=None, password=None)
+    start(MyApp, debug=True, address='127.0.0.1', port=8085, start_browser=True, username=None, password=None)
 
 

examples/page_internals_app.py

@@ -0,0 +1,48 @@
+"""
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+"""
+
+import remi.gui as gui
+from remi import start, App
+import os
+
+class MyApp(App):
+    def __init__(self, *args):
+        res_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'res')
+        #static_file_path can be an array of strings allowing to define
+        #  multiple resource path in where the resources will be placed
+        super(MyApp, self).__init__(*args, static_file_path=res_path)
+
+    def main(self):
+        #creating a container VBox type, vertical (you can use also HBox or Widget)
+        main_container = gui.VBox(width=300, height=200, style={'margin':'0px auto'})
+        self.page.children['head'].add_child('test', '<meta patate>')
+        self.page.children['body'].style['background-color'] = 'lightyellow'
+        self.page.children['body'].onkeydown.connect(self.onkeydown)
+        # returning the root widget
+        return main_container
+    
+    def onkeydown(self, emitter, key, keycode, ctrl, shift, alt):
+        print("keydown: %s"%key)
+
+    def onload(self, emitter):
+        print(">>>>>>>>> ON PAGE LOADED")
+
+    def onerror(self, emitter, message, source, line, col):
+        print(">>>>>>>>> ON ERROR: %s\n%s\n%s\n%s"%(message, source, line, col))
+        self.execute_javascript('document.onkeydo')
+
+
+if __name__ == "__main__":
+    # starts the webserver
+    start(MyApp, debug=True, address='0.0.0.0', port=8081)

examples/template_advanced_app.py

@@ -18,6 +18,20 @@
 
 class MyApp(App):
     def __init__(self, *args):
+        res_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'res')
+        #static_file_path can be an array of strings allowing to define
+        #  multiple resource path in where the resources will be placed
+        super(MyApp, self).__init__(*args, static_file_path=res_path)
+
+    def idle(self):
+        """ Idle loop, you can place here custom code,
+             avoid to use infinite iterations, it would stop gui update.
+            This is a Thread safe method where you can update the 
+             gui with information from external Threads.
+        """
+        pass
+
+    def main(self):
         #custom additional html head tags
         my_html_head = """
             """
@@ -31,21 +45,15 @@ def __init__(self, *args):
         my_js_head = """
             <script></script>
             """
+        #appending elements to page header
+        self.page.children['head'].add_child('myhtml', my_html_head)
+        self.page.children['head'].add_child('mycss', my_css_head)
+        self.page.children['head'].add_child('myjs', my_js_head)
+        #eventually set up body attributes/style
+        #self.page.children['body'].style['background-color'] = 'lightyellow'
+        #eventually set up body event listeners
+        #self.page.children['body'].onkeydown.connect(self.onkeydown)
 
-        res_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'res')
-        #static_file_path can be an array of strings allowing to define
-        #  multiple resource path in where the resources will be placed
-        super(MyApp, self).__init__(*args, static_file_path=res_path, html_head=my_html_head, css_head=my_css_head, js_head=my_js_head)
-
-    def idle(self):
-        """ Idle loop, you can place here custom code,
-             avoid to use infinite iterations, it would stop gui update.
-            This is a Thread safe method where you can update the 
-             gui with information from external Threads.
-        """
-        pass
-
-    def main(self):
         #creating a container VBox type, vertical (you can use also HBox or Widget)
         main_container = gui.VBox(width=300, height=200, style={'margin':'0px auto'})
 
@@ -54,11 +62,34 @@ def main(self):
 
     def on_close(self):
         """ Overloading App.on_close event allows to perform some 
-             activities before app termination.
-        """
+             activities before app termination. """
         super(MyApp, self).on_close()
 
+    def onload(self, emitter):
+        """ WebPage Event that occurs on webpage loaded """
+        super(MyApp, self).onload(emitter)
+
+    def onerror(self, emitter, message, source, lineno, colno):
+        """ WebPage Event that occurs on webpage errors """
+        super(MyApp, self).onerror(emitter, message, source, lineno, colno)
+
+    def ononline(self, emitter):
+        """ WebPage Event that occurs on webpage goes online after a disconnection """
+        super(MyApp, self).ononline(emitter)
+
+    def onpagehide(self, emitter):
+        """ WebPage Event that occurs on webpage when the user navigates away """
+        super(MyApp, self).onpagehide(emitter)
+
+    def onpageshow(self, emitter):
+        """ WebPage Event that occurs on webpage gets shown """
+        super(MyApp, self).onpageshow(emitter)
+
+    def onresize(self, emitter, width, height):
+        """ WebPage Event that occurs on webpage gets resized """
+        super(MyApp, self).onresize(emitter, width, height)
+
 
 if __name__ == "__main__":
     # starts the webserver
-    start(MyApp, address='0.0.0.0', port=0, start_browser=True, username=None, password=None)
+    start(MyApp, debug=True, address='0.0.0.0', port=0, start_browser=True, username=None, password=None)