1. develop GUI control panel(Mlet) for smart devices

  1. load Demo project, if you had opened it, go to next step. Do following to load demo :
    1. right click tray icon of HomeCenter server, it display as following :
    2. click "Designer"
    3. click "Demo" button in toolbar, after successful load demo, a message is displayed.

  2. click "Mlet [screen://myScreen]" node in left tree

  3. the source code of Mlet in Demo project :
    #encoding:utf-8
    
    require 'java'
    
    import javax.swing.JButton
    import javax.swing.JTextArea
    import javax.swing.JPanel
    import java.awt.BorderLayout
    import java.awt.FlowLayout
    import javax.swing.ImageIcon
    import javax.swing.JLabel
    import java.net.URL
    
    class MyMlet < Java::hc.server.ui.Mlet
    
        def initialize
    		@area = JTextArea.new
    		@light = JLabel.new
    		@switch = JButton.new
    		@switch_on = ImageIcon.new(URL.new "http://homecenter.mobi/images/press_on_64.png")
    		@switch_off = ImageIcon.new(URL.new "http://homecenter.mobi/images/press_off_64.png")
    		@context = nil
    		super
    			@context = getProjectContext()
    
    			#to check UTF-8, uncomment the following, and click 'Test Script' button.
    			#@area.append "Test UTF-8\n"
    			#@area.append "Test 中文\n"
    			#@area.append "Test 日本語\n"
    			#@area.append "Test 한국의\n\n"
    			
    			lightPanel = JPanel.new
    			lightPanel.setLayout FlowLayout.new
    
    			@light.setIcon(ImageIcon.new(URL.new "http://homecenter.mobi/images/light_on_64.png"))
    			@light.setDisabledIcon(ImageIcon.new(URL.new("http://homecenter.mobi/images/light_off_64.png")))
    
    			@light.setEnabled false
    			@switch.setIcon @switch_off
    
    			lightPanel.add @light			
    			lightPanel.add @switch
    			
    			@switch.addActionListener{|e|
    				@area.append "click switch\n"
    				@light.setEnabled (!@light.isEnabled)
    				if @light.isEnabled		
    					@context.sendMovingMsg "light on"
    					@switch.setIcon @switch_on
    				else
    					@context.sendMovingMsg "light off"
    					@switch.setIcon @switch_off
    				end
    			}
    			
    			buttonPanel = JPanel.new
    			buttonPanel.setLayout FlowLayout.new
    
    			button = JButton.new "Screen"
    			button.addActionListener{|e|
    				#equal go Java::hc.server.ui.Mlet::URL_SCREEN
    				go URL_SCREEN
    			}
    			buttonPanel.add button
    
    			button = JButton.new "Back"
    			button.addActionListener{|e|
    				go Java::hc.server.ui.Mlet::URL_EXIT
    			}
    			buttonPanel.add button
    
    			setLayout BorderLayout.new
    
    			add lightPanel, BorderLayout::NORTH
    			@area.append "press and hold for one second,\nto show shortcut menu.\n"
    			add @area, BorderLayout::CENTER
    			add buttonPanel, BorderLayout::SOUTH
    	end
    
    	#override empty method onStart
    	def onStart
    		@area.append "Sys call onStart\n"
    	end
    
    	#override empty method onPause
    	def onPause
    		@area.append "Sys call onPause\n"
    	end
    
    	#override empty method onResume
    	def onResume
    		@area.append "Sys call onResume\n"
    	end
    
    	#override empty method onExit
    	def onExit
    		@context.tipOnTray "[Mobile UI Designer] Sys call onExit on Screen-Mlet"
    	end
    end
    
    return MyMlet.new

    Description :
    • Mlet is GUI control panel, which is an instance in JRuby engine on JVM of your HomeCenter server, and is presented(snapshot) on mobile. It consists of :
    • MyMlet is inherited from hc.server.ui.Mlet
    • method initialize : construct and initial objects
    • method onStart : it is called when you start the Mlet
    • method onPause : it is called when you jump to other mobile screen( for example control desktop)
    • method onResume : it is called when you return to the Mlet, for example exit from controlling desktop
    • method onExit : it is called when you exit the Mlet
    • return MyMlet.new : generate and return instance of class MyMlet

  4. Activate current project
    if Demo project is not active, click Activate button in toolbar
     it is not required to restart HomeCenter after Activate.

  5. startup your mobile app, input HomeCenter ID and password, click OK, the demo project displays like following :

  6. click Mlet icon to open MyMlet, it looks like following :

    Description :
    • a light and switch is on top
    • if net err, press for one second : press and hold for one second, a pop-up menu will be displayed
    • Sys call onStart : your HomeCenter server had called method onStart
     what you see on mobile is a snapshot of the instance of MyMlet in your HomeCenter server.

  7. click switch icon button, it looks like :

    Description :
    • append message click switch
    • the gray light is changed to yellow, ==>

    source codes of click button :
    @switch.addActionListener{|e|
    	@area.append "click switch\n"
    	@light.setEnabled (!@light.isEnabled)
    	if @light.isEnabled		
    		@context.sendMovingMsg "light on"
    		@switch.setIcon @switch_on
    	else
    		@context.sendMovingMsg "light off"
    		@switch.setIcon @switch_off
    	end
    }

  8. click Screen button to control and view desktop, after controlling, click exit icon, and return to the MyMlet, now your mobile screen looks like :

    Description :
    • append Sys call onPause and Sys call onResume messages

  • return to tutorials of HomeCenter server