当柳上原的风吹向天际的时候...

真正的快乐来源于创造

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks

#

在Web项目中两栏固定宽度居中的方式较多,三栏比较少见,一栏在某些场合还是有用的,比如说有整版的表格列表。因此我们的程序有必要能在两种方式中切换。

以前我们使用的切换方式是两个页面模版,这种方式稍嫌麻烦一些,因为多了一个文件需要维护。现在使用JS也能达到同样的效果。让我们先看看siderbar和concept两个div的css定义:
#sidebar{
    margin-left
:auto;
    margin-right
:auto;    
    width
:191px;
    height
:480px;
    float
:left;
    background-color
:#fafafa ;
    border-top
:1px #e4e4e4 solid;
    border-bottom
:1px #e4e4e4 solid;
    border-left
:1px #e4e4e4 solid;    
    padding
:2px;
}
#concept
{
    margin-left
:auto;
    margin-right
:auto;
    padding
:10px;
    width
:759px;
    height
:480px;
    float
:left;
    border
:1px #e4e4e4 solid;
}
这两者之所以能并列的原因是一是向左浮动,二是二者的宽度加起来正好等于页面的总宽度950.如果我们需要变换成一栏方式,把siderbar隐藏,使concept的宽度变成950,这样不就可以了吗?这使用JavaScript很容易办到,代码如下:
    var sidebar=$("sidebar");
    sidebar.style.display
="none";
    
var concept=$("concept");
    concept.style.width
=950;

再把它包装成一个函数,在需要单栏的页面中的窗口加载事件中调用这个函数,就能把两栏变成一栏:
//--  Common.js中
function makeConceptFullScreen(){
    
var sidebar=$("sidebar");
    sidebar.style.display
="none";
    
var concept=$("concept");
    concept.style.width
=950;
}

..

//--  userMenuIntroBody.jsp中
window.onload=function(){
    
    
    
// 隐藏边栏,加宽内容栏,使得内容如同全屏一样
    makeConceptFullScreen();
}

--全文完--

posted @ 2009-09-10 10:30 何杨| 编辑 收藏

效果:


代码下载:
http://www.blogjava.net/Files/heyang/bluetable20090909095154.rar

posted @ 2009-09-09 09:52 何杨| 编辑 收藏

在本例中,我们将学习如何在Weblgic9.2中配置一个JDBC数据源并提供给一个Web应用程序使用,此程序你可以 从"http://www.blogjava.net/Files/heyang/TestWeblogicJNDI.rar"处下载然后部署到Weblogic上。

本例使用的数据库 为MySql,请确认其中有名为test的database,并建立一张employee表并填充数据,建表语句及充值语句如下:
create table employee(
   id 
char(4not null primary key,
   name 
varchar(200)
)

insert into employee ( id, name ) values ( '01''张三' );
insert into employee ( id, name ) values ( '02''张四' );
insert into employee ( id, name ) values ( '03''张五' );
insert into employee ( id, name ) values ( '04''张六' );
insert into employee ( id, name ) values ( '05''张七' );


一.首先,将应用程序访问数据库需要用到的数据库驱动包拷贝到自建域所在目录下的lib目录.


二.打开Weblogic管理控制台,在左侧的"域结构"栏中找到"服务">>"JDBC">>"数据源".然后按下上方的"锁定并编辑"按钮,再点击右边的"新建"按钮.


四.进入此页面后,输入JNDI名称,指定数据库类型为MySql,及指定数据库驱动程序。再点击下一步。


五.这个页面目前还不需要修改,直接点击"下一步"按钮.


六.进入此页面后,输入数据库参数.如下所示:指定数据库名为test(MySql5安装后就有),指定主机名为127.0.0.1也就是本机(数据库安装所在机器),端口3306,以及数据库名和密码.


七.到这个页面后可以测试一下能否连通数据库,如果反馈是"链接测试成功"则点击"完成"按钮.


八.完成后,将会进入到以下页面,点击刚配置的数据源名链接.


九.打开目标选项卡,选择服务器AdminServer,再点击"保存".这一步是将数据源绑定到服务器。


十.最后,激活所进行的更改。



十一.将TestWeblogicJNDI发布到Weblogic上后,在浏览器中查看,数据库中的内容就显示出来了.



十二.以下是TestWeblogicJNDI程序访问数据库所用的Scriptlet代码:
<%
    Context ctx 
= new InitialContext();
    DataSource ds 
= (DataSource) ctx.lookup(“MySqlDS”);//JNDI名
    Connection conn 
= ds.getConnection();
    Statement stmt 
= conn.createStatement();
    ResultSet rs 
= stmt.executeQuery("select * from employee");
    
while (rs.next()) {
     out.println(
"id:" + rs.getString("id")+"---");
     out.println(
"name:" + rs.getString("name")+"<br />");    
    }
    rs.close();
    stmt.close();
    conn.close();
    ctx.close();
%>

--全文完--
posted @ 2009-08-30 15:01 何杨| 编辑 收藏

     摘要: 选项卡可在有限的空间内显示多项内容,本文使用无序列表和Div实现了一种选项卡,这种方式的重点在于li子节点的类别,宽度,背景和下边框的设置,具体方式请参照代码。  阅读全文
posted @ 2009-08-28 20:58 何杨| 编辑 收藏

     摘要: 这是一个用fieldset,legend,div等写就的表单,和以往用表格的做法有些区别,包含了常用Web控件,外观上还可以。  阅读全文
posted @ 2009-08-27 11:55 何杨| 编辑 收藏

发布在Weblgic的Web应用应该是war包,如果你手头没有的话可以到“http://www.blogjava.net/Files/heyang/JSTLSample.rar”下载一个,这是用ant打成的一个很简单的Web应用,没有用到数据库。

一.打开Weblogic的管理控制台,点击左上方的“锁定并编辑”按钮。“锁定并编辑”按钮用来修改Weblogic的当前状态,按下后是Weblogic处于配置状态,可以进行发布,修改任务。


二.点击左侧边栏“域结构”中的“部署”链接,准备在域“hydomain”上部署一个Web应用。


三.选择右边的"upload your files"链接,准备把JSTLSample.war上传到服务器上.


四.点击"部署归档文件"右侧的"浏览"按钮,在本地找到JSTLSample.war,然后点击"下一步"按钮.


五.到这里,Weblgic告知已经上传成功,在下面的单选框中选中你刚才上传的war文件,再点击下一步按钮准备开始部署它.


六.在这个页面中,选择"将此部署安装为应用程序"单选框,再点击"下一步"按钮.


七.到这里,部署完成了,你还可以修改一下应用的名称和安全模型,如果没有什么需要变更的话点击"完成"按钮.


八.在weblogic的管理控制台中进行有效修改操作后,原来的"锁定并编辑"按钮会变成"激活更改"按钮,此后如果你确定刚才的变更操作无误应该点击"激活更改"按钮,否则点击"撤销所有更改"按钮用以取消之前的变更行为.这步操作以后很常用.


九.看到以下界面的绿色文字"已激活所欲哦更改.不需要重新启动."后,说明更改已经有效激活了.注意此时"激活更改"按钮又变成了"锁定并编辑"按钮.


十.点击"域结构"下的"部署"链接,在部署列表中找到"JSTLSample.war",选中其左边的复选框。注意现在的安装按钮是不可用的,如果要启用的话,还需要点击“锁定并编辑”按钮。


十一.选中后上方的"启动"按钮和"停止"按钮被激活,它们分别用来启动一个应用程序和停止一个已启动的应用程序.


十二.点击"启动"按钮右侧的下拉按钮,点击"为所有请求提供服务"链接.


十三.进入此界面,点击"是"按钮,确认刚才的操作.


十四.weblogic反馈说"已经将启动请求发送到了选定的部署",这说明应用已经被启动了,接下来我们可以在Web浏览器中看看效果.


十五.打开一个浏览器,在地址栏中输入"http://localhost:7001/JSTLSample",然后,部署好的Web应用界面就出现了。


-全文完-
posted @ 2009-08-27 10:21 何杨| 编辑 收藏

效果还是可以的:


以下代码仅供参考,大家拿下去后请自行修改。
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
 
<head>
  
<title>横向动态菜单示例</title>
  
<style type="text/css">
        <!--
        #menubar ul
{
            margin
:0;
            padding
:0;
            list-style-type
:none;
        
}
        #menubar li
{
            float
:left;
            dispaly
:block;            
        
}
        #menubar li a
{
            width
:82px;
            height
:32px;
            line-height
:32px;
            font-size
:15px;         
            color
:#ffffff;
            text-decoration
:none;
            text-align
:center;            
        
}

        #menubar li a.current
{
            color
:#1e3668;
            font-weight
:bold;

            background
:#ffffff url(img/menu.jpg) 0px -71px;
        
}

        #submenubar ul
{
            margin
:0;
            padding
:0;
            list-style-type
:none;
        
}
        #submenubar li
{
            float
:left;
            dispaly
:block;            
        
}
        #submenubar li a
{
            width
:82px;
            height
:28px;
            line-height
:28px;
            font-size
:14px;         
            color
:#162c5b;            
            text-align
:center;
        
}

        #submenubar li a:hover
{
            color
:#ffffff;
            font-weight
:bold;
            text-decoration
:none;
            text-decoration
:underline;
        
}

        #outerDiv
{            
            background
:#ffffff url(img/menu.jpg) 0px 0px no-repeat;
                
            width
:950px;
            height
:63px;
        
}

        #upDiv
{
            margin-top
:2px;
            width
:950px;
            height
:30px;
        
}
        #downDiv
{        
            width
:950px;
            height
:31px;
        
}
        -->
    
</style>    
 
</head>

 
<body>    
    
<div id="outerDiv">
        
<div id="upDiv">    
            
<ul id="menubar">
                
<li><href="#">汉朝</a></li>
                
<li><href="#" class="current">晋朝</a></li>
                
<li><href="#">唐朝</a></li>
                
<li><href="#">宋朝</a></li>
                
<li><href="#">明朝</a></li>
            
</ul>
        
</div>
        
<div id="downDiv">
            
<ul id="submenubar">
            
</ul>
        
</div>
    
</div>

 
</body>
</html>

<SCRIPT LANGUAGE="JavaScript">
<!--
// -- 按id取得元素
function $(id){
    
return document.getElementById(id);
}

// -- 清除现有菜单项
function refreshCurrent(){
    
var menubar=$("menubar");

    
for(var i=0;i<menubar.childNodes.length;i++){
        menubar.childNodes[i].firstChild.className
="";
    }
}

var arr;

window.onload
=function(){
    arr
=new Array;
    arr[
0]="<li><a href='#'>卫青</a></li><li><a href='#'>霍去病</a></li><li><a href='#'>马援</a></li>";
    arr[
1]="<li><a href='#'>祖狄</a></li><li><a href='#'>桓温</a></li><li><a href='#'>刘牢之</a></li>";
    arr[
2]="<li><a href='#'>秦琼</a></li><li><a href='#'>尉迟恭</a></li><li><a href='#'>程知节</a></li>";
    arr[
3]="<li><a href='#'>狄青</a></li><li><a href='#'>岳飞</a></li>";
    arr[
4]="<li><a href='#'>戚继光</a></li><li><a href='#'>蓝玉</a></li><li><a href='#'>徐达</a></li><li><a href='#'>常遇春</a></li>";

    
var menubar=$("menubar");

    
for(var i=0;i<menubar.childNodes.length;i++){
        
        
new function(){
            
var a=menubar.childNodes[i].firstChild;
            
var index=i;

            a.attachEvent(
"onclick",
                
function(){
                    refreshCurrent();
                    a.className
="current";
                    
//alert(index);
                    $("submenubar").innerHTML=arr[index];
                }
            );
        }
    }
}

//-->
</SCRIPT>

全部代码下载:
http://www.blogjava.net/Files/heyang/CSSMenu220090826152056.rar
posted @ 2009-08-26 15:19 何杨| 编辑 收藏

从控制台启动Weblogic的一个域后,打开一个浏览器窗口,输入“http://localhost:7001/console”,将出现如下界面。如果没有的看见的话则是域服务器没有打开,另外这个URL希望大家记住,就像localhost:8080/appname一样。



然后,输入你登陆域的用户名和密码,再点击登录按钮。如果这时密码忘了你只能怨自己当时没记下来。


稍等片刻后,Weblogic管理控制台界面打开了,以后组件的发布与撤销都会在这里进行。在进入正题之前,打开帮助多看看吧。


全文完。
posted @ 2009-08-26 13:38 何杨| 编辑 收藏

如何理解Weblogic中的域:
Weblogic是一个总的服务器,域则是它管理下的一个小管理单元,相当于一个小服务器,我们 以后配置的javaEE组件等都应该防止在某一个域上,也可以这样理解,Weblogic是一幢大楼,域则是一个个房间,房间里可以放我们想放的东西。这 样做得好处是能把不相关的东西分隔开,互不干扰,需要用到那个就启动哪个,就像我们到固定的房间中放置特定的东西一样。

域需要配置和安装,这是我们安装完Weblgic后要做的第一件事,以下是示例步骤:

一.找到开始菜单中的“BEA Products”>>“Tools”>>“Configuration Wizard”。


二.毋庸置疑该选择新建Weblogic域,要修改域时再选下面的选项:


三.此页无需改动,直接点击下一步.


四.输入管理员用户名和密码,密码必须九位.在此强烈建议你在纸上记下用户名和密码,若以后忘记悔之晚矣.


五.配置服务器启动模式和JDK,一般无需改动,点击下一步即可.


六.这一页也不要进行改动,留待以后配置:


七.输入域名及其所在的目录,域名称最好记下来以备忘.


八.终于开始创建域了,点根烟精心等待.


九.安装完毕后,找到域所在的目录,点击其中的"startweblogic.cmd",域就启动了,其中你配置的javaEE组件当然会随之启动,如果这些组件没有错误和输出的话,就能看到下面的控制台窗口,这表示域服务器启动成功了。



最后关于域服务器控制台窗口需要提醒几点
1.此窗口打开意味着域服务器处于活动状态,其他程序或服务能取得部署在域服务器上的服务;而关闭后意味着这个域服务器提供的所有服务关闭。因此,在与部署在Weblogic的组件通信前,请确保组件所在的域服务器是打开状态。
2.组件如果出现错误,在控制台窗口会有输出,你也可以在程序中加入一些输出来监控程序运行情况,这是常见的诊断部署组件错误的手段。
3.很多情况下,修改了部署在域服务器上的j2EE组件后,需要重新启动域服务器。
posted @ 2009-08-26 11:11 何杨| 编辑 收藏



Weblogic简介
BEA WebLogic是用于开发、集成、部署和管理大型分布式Web应用、 网络应用和数据库应用的Java应用服务器。BEA WebLogic Server拥有处理关键Web应用系统问题所需的性能 、可扩展性和高可用性,它将Java的动态功能和Java Enterprise标准的安全性引入大型网络应用的开发、集成、部署和管理之中。

一.开始安装:



二.选择同意其协议:


三.选择BEA主目录,建议不要修改路径:


四.首次选择完整安装,省的以后麻烦。


五.此工具不选也罢:


六.选择产品安装目录,建议不要修改:


七.创建快捷方式:


八.正式安装开始,点根烟等着吧:


九.有空时看看BEA的介绍也不错:


十.Weblogic9.2的安装界面还是色彩纷呈的:


十一.创建实例域:


十二.还在创建实例域:


十三.安装终于完成了。


到这里,Weblogic9.2安装就大功告成了。
posted @ 2009-08-26 09:25 何杨| 编辑 收藏

仅列出标题
共28页: First 上一页 19 20 21 22 23 24 25 26 27 下一页 Last