2021SC@SDUSC # 软件工程应用与实践——OpenMeetings项目分析（六）：

最新推荐文章于 2024-07-14 15:54:59 发布

HiddenWorld

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量466

点赞数

分类专栏：软件工程应用与实践文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_45716509/article/details/121168847

版权

软件工程应用与实践专栏收录该内容

13 篇文章 0 订阅

订阅专栏

2021SC@SDUSC

软件工程应用与实践——OpenMeetings项目分析（六）：

本周，开始进行web包下的代码的分析；

下图是openmeetings - web 包下各个类的预览：

java包下是与web功能相对应的java代码，webapp是一个web项目，里面主要包含了项目的前端实现等；

本次先从webapp开始分析；

conf包

首先是conf包，conf即configure，意为配置文件；包下仅有一个名为om_ldap.cfg的文件，即定义一些代码中需要用到的常量，以便调试的时候方便进行不同值的测试。

部分代码：

ldap_conn_host=dc2.medint.local
ldap_conn_port=389
ldap_conn_secure=false

css包

此包下主要为层叠样式表文件即CSS文件，用于对html文件进行格式的规定，界面的美化等，此次主要挑里面比较典型的css文件进行分析；

数个images文件夹存放css文件中引用到的图片资源文件；

jquery-ui.css是引入的外部组件库；

jQuery UI 介绍：

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器，jQuery UI 都是一个完美的选择。jQuery UI 包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要学会使用其中一个，就可以知道如何使用其他的小部件（Widget）。

jQuery UI 小组件示例：

DatePicker：日期选择器（Datepicker）绑定到一个标准的表单 input 字段上。把焦点移到 input 上（点击或者使用 tab 键），在一个小的覆盖层上打开一个交互日历。选择一个日期，点击页面上的任意地方（输入框即失去焦点），或者点击 Esc 键来关闭。如果选择了一个日期，则反馈显示为 input 的值。

Accordion:在一个有限的空间内显示用于呈现信息的可折叠的内容面板。点击头部展开/折叠被分为各个逻辑部分的内容，就像标签页（tabs）一样。您可以选择性地设置当鼠标悬停时是否切换各部分的打开/关闭状态。基本的 HTML 标记是一系列的标题（H3 标签）和内容 div，因此内容不用通过 JavaScript 即可用。

Menu:一个带有默认配置、禁用条目和嵌套菜单的菜单。由一个列表转化成的，添加了主题，并支持鼠标和键盘交互。尝试使用光标键导航菜单。

<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Example Page2</title>
	<link href="jquery-ui.css" rel="stylesheet">
	<style>
	body{
		font-family: "Trebuchet MS", sans-serif;
		margin: 50px;
	}
	.demoHeaders {
		margin-top: 2em;
	}
	.fakewindowcontain .ui-widget-overlay {
		position: absolute;
	}
	select {
		width: 200px;
	}
	</style>
</head>
<body>

<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
	<h3>First</h3>
	<div>11111111</div>
	<h3>Second</h3>
	<div>22222222</div>
	<h3>Third</h3>
	<div>33333333</div>
</div>

<!-- Datepicker -->
<h2 class="demoHeaders">Datepicker</h2>
<div id="datepicker"></div>

<!-- Progressbar -->
<h2 class="demoHeaders">Progressbar</h2>
<div id="progressbar"></div>

<!-- Progressbar -->
<h2 class="demoHeaders">Selectmenu</h2>
<select id="selectmenu">
	<option>Slower</option>
	<option>Slow</option>
	<option selected="selected">Medium</option>
	<option>Fast</option>
	<option>Faster</option>
</select>

<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( "#accordion" ).accordion();

$( "#datepicker" ).datepicker({
	inline: true
});
$( "#progressbar" ).progressbar({
	value: 20
});
$( "#menu" ).menu();
$( "#selectmenu" ).selectmenu();

</script>
</body>
</html>

效果截图:

raw-menu.css:

#menu .ui-menu:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
#menu .ui-menu .ui-menu-item {
	display: inline-block;
	margin: 0;
	line-height: 1.2em !important;
	padding: .2em 2.1em .2em 1em;
	font-weight: normal;
}
#menu .ui-menu .ui-menu-item, #menu .ui-menu .ui-menu-item .ui-state-active {
	font-weight: bold;
}
#menu .ui-menu .ui-menu-item.sub {
	width: 280px;
	display: block;
}
#menu .ui-menu .ui-menu-item.top {
	border: 0 !important;
}
#menu .ui-menu.ui-widget.ui-widget-content.ui-menu-icons {
	border: 0;
}
#menu .ui-menu {
	z-index: 10000000; /*need to be in sync with .room.menu.right*/
}
.recording .ui-menu .ui-menu-item {
	display: block;
}
.room.menu .ui-menu .ui-menu-item {
	padding-left: 5px;
	padding-right: 0;
}
.room.menu .top.room.menu.exit {
	padding-left: 0;
}
.room.menu.right {
	position: absolute;
	top: 0;
	margin-right: 5px;
	right: 0;
	display: inline-block;
	z-index: 10000001;
}
.room.menu.right .room {
	float: right;
	padding-top: 5px;
	padding-right: 5px;
}
.room.menu.right .room.name {
	font-weight: bold;
}
.room.menu.right .room.name.screen {
	color: red;
}
.room.menu.right .room.demo {
}
.room.menu.right .icon {
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-position: 5px 5px;
	background-size: 22px;
	float: right;
	padding: 0;
}
.room.menu.right .icon.share {
	background-image: url(images/monitor_go.png);
}
.room.menu.right .icon.shared {
	background-image: url(images/shared.png);
}
.room.menu.right .icon .profile {
	margin-top: 3px;
}
.room.menu.right .icon .profile img {
	width: 28px;
}

就是利用css基本语法对html各类元素作样式上的优化，没有什么特别需要说明的，id选择器用#，name选择器用“.”等比较简单明了；

其他css文件作用相同，就不一一进行分析了；

language包

此包主要包含了一个文件language.xml用于提供openmeetings系统语言的配置选择信息；

<?xml version="1.0" encoding="UTF-8"?>

<language xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
	<lang id="1" code="en">english</lang>
	<lang id="2" code="de">deutsch</lang>
	<lang id="3" code="de-StudIP">deutsch (studIP)</lang>
	<lang id="4" code="fr">french</lang>
	<lang id="5" code="it">italian</lang>
	<lang id="6" code="pt">portugues</lang>
	<lang id="7" code="pt-br">portugues brazil</lang>
	<lang id="8" code="es">spanish</lang>
	<lang id="9" code="ru">russian</lang>
	<lang id="10" code="sv">swedish</lang>
	<lang id="11" code="zh-CN">chinese simplified</lang>
	<lang id="12" code="zh-TW">chinese traditional</lang>
	<lang id="13" code="ko">korean</lang>
	<lang id="14" code="ar">arabic</lang>
	<lang id="15" code="ja">japanese</lang>
	<lang id="16" code="in">indonesian</lang>
	<lang id="17" code="hu">hungarian</lang>
	<lang id="18" code="tr">turkish</lang>
	<lang id="19" code="uk">ukrainian</lang>
	<lang id="20" code="th">thai</lang>
	<lang id="21" code="fa">persian</lang>
	<lang id="22" code="cs">czech</lang>
	<lang id="23" code="gl">galician</lang>
	<lang id="24" code="fi">finnish</lang>
	<lang id="25" code="pl">polish</lang>
	<lang id="26" code="el">greek</lang>
	<lang id="27" code="nl">dutch</lang>
	<lang id="28" code="he">hebrew</lang>
	<lang id="29" code="ca">catalan</lang>
	<lang id="30" code="bg">bulgarian</lang>
	<lang id="31" code="da">danish</lang>
	<lang id="32" code="sk">slovak</lang>
	<lang id="33" code="bn">bengali</lang>
</language>

结构清晰明了，用lang标签为各类语言加上了id以及code。

public包

此包下包含了一些公用的资源，图片标签，聊天时的一段音频等

streams包

此包同样只用一个hibernate包含了一个wav格式的音频文件；

Hibernate是一个开放源代码个全自动的orm框架，hibernate可以自动生成SQL语句，自动执行，使得Java程序员可以随心所欲的使用对象编程思维来操纵数据库。 Hibernate可以应用在任何使用JDBC的场合，既可以在Java的客户端程序使用，也可以在Servlet/JSP的Web应用中使用，最具革命意义的是，Hibernate可以在应用EJB的JavaEE架构中取代CMP，完成数据持久化。

WEB-INF包

WEB-INF:

/WEB-INF/web.xml

Web应用程序配置文件，描述了 servlet 和其他的应用组件配置及命名规则。

/WEB-INF/classes/
包含了站点所有用的 class 文件，包括 servlet class 和非servlet class，他们不能包含在 .jar文件中。
/WEB-INF/lib/
存放web应用需要的各种JAR文件，放置仅在这个应用中要求使用的jar文件,如数据库驱动jar文件。

/WEB-INF/src/
源码目录，按照包名结构放置各个Java文件。

/WEB-INF/database.properties

META-INF:

所谓META-INF, 就是存放一些meta information相关的文件的这么一个文件夹, 一般来说尽量不需要自己手工放置文件到这个文件夹。也就是说这个文件夹应该被看作是JAVA工程的一个内部META目录，所以这个目录下的文件应该都是build工具来生成的。我们自己的文件应该直接放到根目录下或者其他的子目录中。

根据官方的JAR file specification(), 一个典型的META-INF目录下可能包含如下几种文件或者子目录：

MANIFEST.MF
INDEX.LIST
x.SF
x.DSA
services/

相当于一个信息包，目录中的文件和目录获得Java 2平台的认可与解释，用来配置应用程序、扩展程序、类加载器和服务
manifest.mf文件，在用jar打包时自动生成。

而观察此项目的web-inf包，可以看到大体结构与上述相同：

需要注意的是：

red5-web.properties是properties配置文件，用于存储一些配置信息，避免代码重复，

而下面的red5-web.xml和applicationContext.xml以及cxf-servlet.xml都包含一个绿色叶子图标，表明了是Spring的xml配置文件，利用Spring容器来管理各种bean的实例。

Spring框架是一个开放源代码)的[J2EE应用程序框架，由Rod Johnson发起，是针对bean的生命周期进行管理的轻量级容器（lightweight container）。 Spring解决了开发者在J2EE开发中遇到的许多常见的问题，提供了功能强大IOC、AOP及Web MVC等功能。

例子：red5-web.xml

<beans xmlns="http://www.springframework.org/schema/beans"
		xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
		xsi:schemaLocation="
			http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd"
	>
	<bean id="placeholderConfig" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
		<property name="location" value="/WEB-INF/red5-web.properties" />
	</bean>

	<bean id="web.context" class="org.red5.server.Context" autowire="byType" />

	<bean id="web.scope" class="org.red5.server.scope.WebScope">
		<property name="server" ref="red5.server" />
		<property name="parent" ref="global.scope" />
		<property name="context" ref="web.context" />
		<property name="handler" ref="web.handler" />
		<property name="contextPath" value="${webapp.contextPath}" />
		<property name="virtualHosts" value="${webapp.virtualHosts}" />
	</bean>

	<import resource="classes/applicationContext.xml" />
</beans>

beans属性用来导入依赖以及声明命名空间；

下面每个bean标签都是一个bean的实例；

总结

至此，webapp包下的代码便分析完毕，下周开始分析web包下的java代码，代码量是之前webservice包下java代码量的数倍，分析起来应该会有不少麻烦，需要加大精力的投入。

HiddenWorld

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021SC@SDUSC # 软件工程应用与实践——OpenMeetings项目分析（六）：

2021SC@SDUSC软件工程应用与实践——OpenMeetings项目分析（六）：本周，开始进行web包下的代码的分析；下图是openmeetings - web 包下各个类的预览：java包下是与web功能相对应的java代码，webapp是一个web项目，里面主要包含了项目的前端实现等；本次先从webapp开始分析；conf包首先是conf包，conf即configure，意为配置文件；包下仅有一个名为om_ldap.cfg的文件，即定义一些代码中需要用到的常量，以便调试的时候方便进
复制链接

扫一扫