RCP程序UI设计——之首页篇

最新推荐文章于 2016-10-29 12:47:08 发布

VIP文章 yan54226522

最新推荐文章于 2016-10-29 12:47:08 发布

阅读量2.5k

点赞数

分类专栏： RCP技术文章标签： ui documentation extension string null dependencies

本文链接：https://blog.csdn.net/yan54226522/article/details/4162886

版权

在我们第一次启动eclipse时，首先呈现在我们眼前的是一个漂亮的欢迎界面，界面中提供了各种功能的快速入口，如帮助，示例程序和进入工作台等等操作，使用起来非常的直观和方便。

其实在我们开发的RCP程序中，一样也可以实现这样的效果，我们可以通过扩展"org.eclipse.ui.intro"这个扩展点来实现，下图是我在一个项目中所实现的界面。

下面就谈谈它的实现的过程。

实际上，在这个欢迎界面中也是使用的html脚本，而且也有css样式表，是通过org.eclipse.ui.intro. IintroPart来呈现出来的。也就是说，要实现这样的界面，第一步就是要先考虑如何解析并显示页面的内容，其次再来设计欢迎页面，更细节的就不再说了，一切以代码来说话。

下面是整个功能的实现过程：

1，环境配置，本例使用了Eclipse3.3.1 + WTP插件来构建。

2，先创建一个插件项目，项目名为intro.example，注意不是rcp项目。在plugin.xml页面中的Dependencies页面中的Required Plug-ins项目中加入“org.eclipse.ui.intro”，然后保存。

3，再创建一个RCP项目，项目名为intro.example.rcp。在plugin.xml页面中的Dependencies页面中的Required Plug-ins项目中加入“intro.example”，然后保存。

4，在项目intro.example中新建文件夹content，再在content下建子文件夹images，在images中放入处理好的图片，然后新建以下文件：

==========================================================

root.xhtml：

==========================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Welcome</title>

<!--

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){ document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

</head>

</contentProvider>

</div>

</body>

</html>

==========================================================

style.css：

==========================================================

html{

overflow:auto;

}

body.index {

background-color: #FFFFFF;

background-image: url(welcomebg.jpg);

background-repeat: no-repeat;

margin: 0px;

padding: 0px;

background-position: left top;

}

body.right {

background-color: #C8E8E8;

}

#content {

position:absolute;

left:226px;

top:127px;

width: 720px;

}

.right div {

font-family: "宋体";

font-size: 12px;

font-weight: bold;

color: #999999;

}

a:link {

color: #017781;

text-decoration: none;

}

a:visited {

color: #017781;

text-decoration: none;

}

a:hover {

color: #FF6600;

text-decoration: underline;

}

a:active {

color: #017781

最低0.47元/天解锁文章

yan54226522

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
RCP程序UI设计——之首页篇

在我们第一次启动eclipse时，首先呈现在我们眼前的是一个漂亮的欢迎界面，界面中提供了各种功能的快速入口，如帮助，示例程序和进入工作台等等操作，使用起来非常的直观和方便。其实在我们开发的RCP程序中，一样也可以实现这样的效果，我们可以通过扩展"org.eclipse.ui.intro"这个扩展点来实现，下图是我在一个项目中所实现的界面。下面就谈谈它的实现的过程。实际上
复制链接

扫一扫