创建你的第一个smartrcp程序

仅仅是弹出一个窗口没多大意思,接下来让我们通过简单的几句代码快速搭建出像eclipse那样成熟的软件界面。
效果如下图:
     

基本步骤如下:
1:smartrcpDemo项目的src目录下新建modules目录,并在该目录下
   新建两个名称分别为Module_Content.mxml和Module_Nav.mxml的mxml module文件,注意在New mxml module
   对话框的Module SWF size部分选中Optimize for application 为Test.mxml文件,这样会减小编译出的模块文件
   的大小,至于什么原因,大家查查flex基础吧^_^。
  
   修改量文件内容分别如下:
  
   Module_Content.mxml文件内容:

Xml代码   收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. lt;rcp:RCPModule xmlns:mx="http://www.adobe.com/2006/mxml"  
  3. xmlns:rcp="http://www.smartrcp.org"  
  4.  layout="vertical" verticalAlign="middle" horizontalAlign="center"  
  5.   creationComplete="init()"  
  6.  >  
  7.  <mx:Script>  
  8.     <![CDATA[ 
  9.         import mx.controls.Alert; 
  10.         import cn.smartinvoke.smartrcp.gui.control.CActionManager; 
  11.         import cn.smartinvoke.smartrcp.gui.module.CActionEvent; 
  12.         import mx.collections.ArrayCollection; 
  13.         import cn.smartinvoke.rcp.CToolBar; 
  14.         import cn.smartinvoke.smartrcp.gui.FlashViewPart; 
  15.         import cn.smartinvoke.RemoteObject; 
  16.         import cn.smartinvoke.smartrcp.gui.ViewPartActionBar; 
  17.         var actionBar:ViewPartActionBar=null; 
  18.         //初始化方法,在该方法中为当前视图添加一刷新按钮 
  19.         function init():void{ 
  20.             /**在容器上添加刷新按钮*/ 
  21.             var parent:RemoteObject=this.flashViewer.getParent(); 
  22.             //如果存载当前flash的容器时viewPart,才具有此功能 
  23.             if(parent is FlashViewPart){ 
  24.                var viewPart:FlashViewPart=parent as FlashViewPart; 
  25.                //获得当前视图容器的工具栏容器对象 
  26.                this.actionBar=viewPart.getPartActionBar(); 
  27.                //注册freshAction到工具栏容器对象actionBar 
  28.                this.actionBar.addAction(this.freshAction); 
  29.                //定义工具栏对象 
  30.                var toolBar:CToolBar=new CToolBar(); 
  31.                //将freshAction 添加到该工具栏对象 
  32.                toolBar.actionIds=new ArrayCollection([this.freshAction.actionId]); 
  33.                //将工具栏对象添加到工具栏容器 
  34.                this.actionBar.fillToolBar(toolBar); 
  35.                //给freshAction 添加事件监听器 
  36.                this.actionBar.addListener(this.freshAction.actionId,function (ret:CActionEvent):void{ 
  37.                    this.setInfo("刷新当前的所有操作.............."); 
  38.                },this); 
  39.             } 
  40.             /**添加对Splash.mxml启动文件中定义的id为test的全局action的事件监听*/ 
  41.             CActionManager.Instance.addListener("test",function (evt:CActionEvent):void{ 
  42.                 Alert.show("id为test的全局action被用户点击触发了"); 
  43.             },this); 
  44.         } 
  45.         //公共方法,该方法可以被其他模块调用 
  46.         public function setInfo(info:String):void{ 
  47.             this.labelInfo.text=info; 
  48.         } 
  49.     ]]>  
  50.  </mx:Script>  
  51.  <!--定义一action -->  
  52.  <rcp:CAction id="freshAction" actionId="actionfresh"   
  53.      imageUrl="icons/update.gif"  
  54.     text="刷新" toolTip="刷新当前视图"/>  
  55.  <mx:Label id="labelInfo" text="欢迎使用......"/>  
  56. lt;/rcp:RCPModule>  

 

 Module_Nav.mxml文件内容如下:

 

 

Xml代码   收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <rcp:RCPModule xmlns:mx="http://www.adobe.com/2006/mxml"  
  3.     xmlns:rcp="http://www.smartrcp.org"  
  4.      layout="vertical" creationComplete="init()">  
  5.      <mx:Script>  
  6.         <![CDATA[ 
  7.             import cn.smartinvoke.smartrcp.gui.module.CEvent; 
  8.             import org.eclipse.swt.SWT; 
  9.             import org.eclipse.swt.widgets.Display; 
  10.             import mx.collections.ArrayCollection; 
  11.             import cn.smartinvoke.smartrcp.gui.control.CAppToolBarManager; 
  12.             import cn.smartinvoke.smartrcp.CApplication; 
  13.             import mx.controls.Alert; 
  14.             import cn.smartinvoke.smartrcp.gui.module.CActionEvent; 
  15.             import cn.smartinvoke.smartrcp.gui.control.CActionManager; 
  16.             import cn.smartinvoke.rcp.CAction; 
  17.             import mx.events.ListEvent; 
  18.             import mx.events.ItemClickEvent; 
  19.             import cn.smartinvoke.smartrcp.gui.control.ViewManager; 
  20.             import cn.smartinvoke.smartrcp.gui.FlashViewer; 
  21.             //初始化方法 
  22.             function init():void{ 
  23.                 /**在工具栏上添加退出按钮*/ 
  24.                 //首先定义action,这里的action与jface中的action作用相同,表示一个动作,它可以被添加到菜单与工具栏 
  25.                 var action:CAction=new CAction("action_exist","退出","icons/exist.gif","点击退出系统"); 
  26.                 //添加到应用程序action管理器 
  27.                 CActionManager.Instance.addAction(action); 
  28.                 //添加action监听函数,当action 被触发时,会调用此监听函数  
  29.                 CActionManager.Instance.addListener(action.actionId,function (evt:CActionEvent):void{ 
  30.                     //调用CApplication对象退出系统 
  31.                     CApplication.Instance.exit(); 
  32.                 },this); 
  33.                 //将该action添加到工具栏 
  34.                 CAppToolBarManager.Instance.insertItem(action.actionId); 
  35.                 /**添加快捷键监听功能*/ 
  36.                 Display.getCurrent().addListener(SWT.KeyDown,function (evt:CEvent):void{ 
  37.                     if(evt.stateMask==(SWT.CTRL | SWT.ALT)&& evt.keyCode==SWT.F1){ 
  38.                         Alert.show("ctrl + alt + F1 被按下了"); 
  39.                     } 
  40.                 },this); 
  41.             } 
  42.              
  43.             public function onItemClick(event:ListEvent):void { 
  44.                //返回当前运行的所有Module_Content.mxml模块实例集合 
  45.                var flashViewers:ArrayCollection= 
  46.                ViewManager.Instance.findFlashViewers("modules/Module_Content.swf"); 
  47.                //获得第一个实例 
  48.                var flashViewer:FlashViewer=flashViewers[0] as FlashViewer; 
  49.                //获得用户当前选择的操作名称 
  50.                var selectedNode:XML=Tree(event.target).selectedItem as XML;  
  51.                var info:String="正在进行:"+selectedNode.@label+"  操作"; 
  52.                //调用Module_Content.mxml模块中的setInfo方法,并传入info字符串,显示用户当前的操作 
  53.                flashViewer.invoke("setInfo",[info]); 
  54.                 
  55.             } 
  56.         ]]>  
  57.      </mx:Script>  
  58.     <mx:XMLList id="treeData">  
  59.         <node label="邮箱">  
  60.             <node label="收件箱">  
  61.                 <node label="公司信件"/>  
  62.                 <node label="个人信件"/>  
  63.             </node>  
  64.             <node label="发件箱">  
  65.                 <node label="一般信息"/>  
  66.                 <node label="专业信息"/>  
  67.             </node>  
  68.             <node label="其他功能"/>  
  69.         </node>   
  70.    
  71.     </mx:XMLList>  
  72.    
  73.   <mx:Tree id="myTree" width="100%" height="100%" labelField="@label"  
  74.       
  75.          showRoot="false" dataProvider="{treeData}" itemClick="onItemClick(event)"/>  
  76.           
  77. </rcp:RCPModule>  
 

分别编译两模块文件后,你会发现在smartrcpDemo项目的bin-debug目录下新增了modules目录,该目录中
有Module_Content.swf和Module_Nav.swf两个文件,他们即为前两个mxml 模块文件编译出的文件。

 

2:修改Test.mxml文件内容如下:

 

 

Xml代码   收藏代码
  1.  <?xml version="1.0" encoding="utf-8"?>  
  2. <rcp:RCPApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:rcp="http://www.smartrcp.org"  
  3.      backgroundColor="white" layout="vertical" verticalAlign="middle"  
  4.       paddingLeft="0" paddingRight="0" paddingBottom="0" paddingTop="0"  
  5.         
  6.       >  
  7.       <mx:Style>  
  8.         global{  
  9.         font-size:12px;  
  10.         }  
  11.      </mx:Style>  
  12. </rcp:RCPApplication>  

 

保存并编译该Test.mxml文件。

3:在smartrcpDemo目录下新建名为Splash.mxml的mxml Application文件,内容如下:

 

 

Xml代码   收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <rcp:SplashApp xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#ffffff"  
  3.        xmlns:rcp="http://www.smartrcp.org"  
  4.        paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"  
  5.      layout="vertical" horizontalAlign="center" verticalAlign="middle" width="353" height="264">  
  6.       <mx:Style>  
  7.         global{  
  8.         font-size:12px;  
  9.         }  
  10.      </mx:Style>  
  11.       <mx:Script>  
  12.         <![CDATA[ 
  13.             import cn.smartinvoke.rcp.CLayoutBasicInfo; 
  14.             import mx.controls.Alert; 
  15.             import mx.utils.StringUtil; 
  16.             import cn.smartinvoke.smartrcp.CApplication; 
  17.             import cn.smartinvoke.smartrcp.util.CWorkbenchActions; 
  18.             import cn.smartinvoke.rcp.CPageLayout; 
  19.             import cn.smartinvoke.rcp.CStandaloneLayout; 
  20.             import cn.smartinvoke.rcp.CToolBar; 
  21.             import org.eclipse.swt.SWT; 
  22.             import cn.smartinvoke.rcp.CFolderLayout; 
  23.             /** 
  24.             *平台会自动调用此方法获得整个程序的界面布局对象CPerspective 
  25.             */ 
  26.             public override function getPerspective():CPerspective{ 
  27.                return ret; 
  28.             } 
  29.         //-------- 
  30.           
  31.         ]]>  
  32.      </mx:Script>  
  33.      <!--SmartRCP程序的整体布局由这里的CPerspective类型对象定义 -->  
  34.     <rcp:CPerspective id="ret" runtimeSwfPath="Test.swf">  
  35.       
  36.     <!--全局action的定义  
  37.         这里定义的action会自动添加到CActionManager集合中,以便其他模块的调用  
  38.      -->  
  39.     <rcp:actions>  
  40.         <!--CAction类的作用与Jface中的Action类的作用类似,属性也是相对应的,  
  41.              每个CAction类型对象会被SmartRCP转换为对应的Action对象。  
  42.                
  43.             CWorkbenchActions类全部定义的常量,该类与eclipse rcp 中的ActionFactory  
  44.             类相对应,表示为eclipse rcp中内置的IWorkbenchAction。  
  45.             比如这里的第一个CAction定义的作用与rcp程序中ApplicationActionBarAdvisor类的makeActions方法的Java代码:  
  46.             IWorkbenchAction exitAction = ActionFactory.QUIT.create(window);  
  47.             的作用相同。  
  48.         -->  
  49.         <rcp:CAction actionId="{CWorkbenchActions.QUIT}" text="退出"/>  
  50.         <rcp:CAction actionId="{CWorkbenchActions.PREFERENCES}" text="设置"/>  
  51.         <rcp:CAction  actionId="test" type="{CAction.AS_CHECK_BOX}" checked="true" text="测试" toolTip="toolTipTest..."/>  
  52.     </rcp:actions>  
  53.     <!--菜单栏  
  54.         通过引用前面定义的全局action的引用id即对象的 actionId属性 来定义SmartRCP程序的菜单栏       
  55.     -->  
  56.     <rcp:menuBars>  
  57.         <rcp:CMenuRelation label="程序"><!--定义菜单 -->  
  58.             <rcp:actions>  
  59.                 <!-- 
  60.                   CWorkbenchActions.ID_QUIT在这里引用前面actionId属性为CWorkbenchActions.QUIT的退出Action 
  61.                 -->  
  62.                 <mx:String>{CWorkbenchActions.ID_QUIT}</mx:String><!--添加菜单项-->  
  63.             </rcp:actions>  
  64.         </rcp:CMenuRelation>  
  65.          <rcp:CMenuRelation label="窗口">  
  66.             <rcp:actions>  
  67.                 <mx:String>{CWorkbenchActions.ID_PREFERENCES}</mx:String>  
  68.             </rcp:actions>  
  69.         </rcp:CMenuRelation>  
  70.         <rcp:CMenuRelation label="文件">  
  71.          <rcp:actions>  
  72.             <!-- 
  73.                   test在这里引用前面actionId属性为test的全局action 
  74.             -->  
  75.             <mx:String>test</mx:String>  
  76.          </rcp:actions>  
  77.         </rcp:CMenuRelation>  
  78.     </rcp:menuBars>  
  79.     <!--工具栏  
  80.     通过引用前面定义的全局action的引用id即对象的 actionId属性 来定义这里的工具栏按钮   
  81.     -->  
  82.     <rcp:toolBar>  
  83.         <!--CToolBar.Image_Text_Horizontal将当前程序的工具栏设置为图标加文字的形式 -->  
  84.         <rcp:CToolBar type="{CToolBar.Image_Text_Horizontal}">   
  85.             <rcp:actionIds>  
  86.                 <mx:ArrayCollection>  
  87.                  <!-- 
  88.                   test在这里引用前面actionId属性为test的全局action 
  89.                  -->  
  90.                        <mx:String>test</mx:String>  
  91.                 </mx:ArrayCollection>               
  92.             </rcp:actionIds>  
  93.         </rcp:CToolBar>  
  94.     </rcp:toolBar>  
  95.     <rcp:windowConfigurer>  
  96.        <!-- 在这里设置SmartRCP程序主窗口的大小,图标,标题,是否显示状态栏等-->  
  97.         <rcp:CWindowConfigurer shellWidth="800" shellHeight="600"  showMenuBar="true" showCoolBar="true"  
  98.             showPerspectiveBar="false" showStatusLine="true"  
  99.              shellTitle="邮件收发器"  
  100.             />  
  101.     </rcp:windowConfigurer>  
  102.     <rcp:page>  
  103.         <!--定义视图布局,CPageLayout类的属性在rcp透视图创建的时候调用,  
  104.         作用为定义各个模块在整个界面布局中的位置,其属性与rcp中的org.eclipse.ui.IPageLayout类的属性对应  
  105.         -->  
  106.         <rcp:CPageLayout id="page" editorAreaVisible="false" fixed="false">  
  107.         <!--视图集合,该集合中定义的视图对象会被转换成对应的ViewPart实例显示于rcp的透视图上 -->  
  108.         <rcp:layouts>  
  109.           <mx:ArrayCollection>  
  110.               <!--定义一个视图布局对象-->  
  111.               <rcp:CFolderLayout  id="layoutNav"  
  112.                 relationship="{CPageLayout.LEFT}" refLayout="{page}" ratio=".7">  
  113.                   <rcp:modules>  
  114.                     <mx:ArrayCollection><!--将导航模块Module_Nav添加到该布局中-->  
  115.                      <rcp:CLayoutBasicInfo modulePath="modules/Module_Nav.swf" title="功能导航" closeable="false"/>  
  116.                     </mx:ArrayCollection>  
  117.                   </rcp:modules>  
  118.               </rcp:CFolderLayout>  
  119.               <!--定义一个操作内容布局对象-->  
  120.               <rcp:CFolderLayout refLayout="{layoutNav}" relationship="{CPageLayout.RIGHT}" ratio=".3">  
  121.                   <rcp:modules>  
  122.                      <mx:ArrayCollection><!--将内容模块Module_Content添加到该布局中-->  
  123.                         <rcp:CLayoutBasicInfo modulePath="modules/Module_Content.swf" title="操作内容" closeable="false"/>  
  124.                      </mx:ArrayCollection>  
  125.                   </rcp:modules>  
  126.               </rcp:CFolderLayout>  
  127.           </mx:ArrayCollection>  
  128.         </rcp:layouts>  
  129.       </rcp:CPageLayout>  
  130.     </rcp:page>  
  131. </rcp:CPerspective>  
  132. <!--在这里可以定义启动界面的现实-->  
  133.     <mx:Label text="smartrcp测试..." fontSize="23" fontWeight="bold" width="172"/>  
  134. </rcp:SplashApp>  

 

保存并编译该文件。

4:启动cmd控制台,将当前目录切换到smartrcp的解压目录运行
   smartrcp.exe -app E:\flexWork\SmartRCPDemo\bin-debug\Splash.swf 命令
   
  -app 参数定义运行时加载的smartrcp程序的启动文件的路径,这里为smartrcpDemo程序中的Splash.mxml文件
  编译后得到的Splash.swf文件

看到效果了吧使用smartrcp构建桌面程序是不是很简单呀。

代码能说明一切,通过这几句简短的代码就构建出一个程序整体的框架了,这充分说明smartrcp的简洁高效。

我会在此系列的第三篇中介绍smartrcp的菜单和工具栏部分


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值