1. 快速开发智能设备控制面板(Mlet)

  1. 以下步骤是进入Demo工程包,如果您已打开,请进入下一步。打开Demo工程包如下:
    1. 右键操作系统托盘上的HomeCenter图标,系统显示如下菜单:
    2. 点击"设计器"
    3. 点击左上角"Demo"按钮,系统提示加载成功。

  2. 点击左侧树"Mlet [screen://myScreen]"

  3. Demo工程包中的mlet示例代码如下:
    #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

    说明:
    • Mlet是运行在服务器端JVM上的JRuby引擎内的控制面板,在手机端展示的是它的图形快照,而非实例。它由以几个逻辑部分组成。
    • MyMlet继承于hc.server.ui.Mlet
    • initialize方法:构造和初始化本GUI所需的组件和对象
    • onStart方法:启动时,HomeCenter调用本方法
    • onPause方法:当用户暂时离开本界面时(比如跳到另一个界面,控制桌面),HomeCenter调用本方法
    • onResume方法:当用户返回本界面时(用户从另一个界面返回),HomeCenter调用本方法,与onPause相对
    • onExit方法:当用户完全关闭、离开本面板时,HomeCenter调用本方法
    • 代码return MyMlet.new:生成并返回一个MyMlet的实例

  4. Activate本工程
    如果Demo工程还不是active,请点击工具条中的Activate按钮。
     Activate后无需重启服务器。

  5. 启动手机端,输入HomeCenter ID和密码,确认后,手机显示Demo工程效果如下:

  6. 要进入刚才设计好的Mlet,点击图标Mlet,手机显示效果如下:

    说明:
    • 灯泡指示和开头居于顶部
    • if net err, press for one second表示按下屏幕保持一秒钟,手机端弹出快捷菜单。
    • Sys call onStart表示该服务器端调用了onStart方法
     本画面是远程电脑服务器端MyMlet实例的图形画面快照

  7. 点击顶部开关图标按钮,系统显示如下:

    说明:
    • 增加信息行click switch
    • 灰色灯变为黄色,==>

    click按钮相关代码如下:
    @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. 点击Screen按钮,进入控制电脑桌面,然后在控制桌面的界面,选择退出,并返回到本画面,此时手机显示如下:

    说明:
    • 增加了两行信息行Sys call onPauseSys call onResume