當柳上原的風吹向天際的時候...

          真正的快樂來源于創(chuàng)造

            BlogJava :: 首頁 :: 聯(lián)系 :: 聚合  :: 管理
            368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks

          #

          在Web項目中兩欄固定寬度居中的方式較多,三欄比較少見,一欄在某些場合還是有用的,比如說有整版的表格列表。因此我們的程序有必要能在兩種方式中切換。

          以前我們使用的切換方式是兩個頁面模版,這種方式稍嫌麻煩一些,因為多了一個文件需要維護。現(xiàn)在使用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;

          再把它包裝成一個函數(shù),在需要單欄的頁面中的窗口加載事件中調用這個函數(shù),就能把兩欄變成一欄:
          //--  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.aygfsteel.com/Files/heyang/bluetable20090909095154.rar

          posted @ 2009-09-09 09:52 何楊| 編輯 收藏

          在本例中,我們將學習如何在Weblgic9.2中配置一個JDBC數(shù)據(jù)源并提供給一個Web應用程序使用,此程序你可以 從"http://www.aygfsteel.com/Files/heyang/TestWeblogicJNDI.rar"處下載然后部署到Weblogic上。

          本例使用的數(shù)據(jù)庫 為MySql,請確認其中有名為test的database,并建立一張employee表并填充數(shù)據(jù),建表語句及充值語句如下:
          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''張七' );


          一.首先,將應用程序訪問數(shù)據(jù)庫需要用到的數(shù)據(jù)庫驅動包拷貝到自建域所在目錄下的lib目錄.


          二.打開Weblogic管理控制臺,在左側的"域結構"欄中找到"服務">>"JDBC">>"數(shù)據(jù)源".然后按下上方的"鎖定并編輯"按鈕,再點擊右邊的"新建"按鈕.


          四.進入此頁面后,輸入JNDI名稱,指定數(shù)據(jù)庫類型為MySql,及指定數(shù)據(jù)庫驅動程序。再點擊下一步。


          五.這個頁面目前還不需要修改,直接點擊"下一步"按鈕.


          六.進入此頁面后,輸入數(shù)據(jù)庫參數(shù).如下所示:指定數(shù)據(jù)庫名為test(MySql5安裝后就有),指定主機名為127.0.0.1也就是本機(數(shù)據(jù)庫安裝所在機器),端口3306,以及數(shù)據(jù)庫名和密碼.


          七.到這個頁面后可以測試一下能否連通數(shù)據(jù)庫,如果反饋是"鏈接測試成功"則點擊"完成"按鈕.


          八.完成后,將會進入到以下頁面,點擊剛配置的數(shù)據(jù)源名鏈接.


          九.打開目標選項卡,選擇服務器AdminServer,再點擊"保存".這一步是將數(shù)據(jù)源綁定到服務器。


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



          十一.將TestWeblogicJNDI發(fā)布到Weblogic上后,在瀏覽器中查看,數(shù)據(jù)庫中的內容就顯示出來了.



          十二.以下是TestWeblogicJNDI程序訪問數(shù)據(jù)庫所用的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實現(xiàn)了一種選項卡,這種方式的重點在于li子節(jié)點的類別,寬度,背景和下邊框的設置,具體方式請參照代碼。  閱讀全文
          posted @ 2009-08-28 20:58 何楊| 編輯 收藏

               摘要: 這是一個用fieldset,legend,div等寫就的表單,和以往用表格的做法有些區(qū)別,包含了常用Web控件,外觀上還可以。  閱讀全文
          posted @ 2009-08-27 11:55 何楊| 編輯 收藏

          發(fā)布在Weblgic的Web應用應該是war包,如果你手頭沒有的話可以到“http://www.aygfsteel.com/Files/heyang/JSTLSample.rar”下載一個,這是用ant打成的一個很簡單的Web應用,沒有用到數(shù)據(jù)庫。

          一.打開Weblogic的管理控制臺,點擊左上方的“鎖定并編輯”按鈕。“鎖定并編輯”按鈕用來修改Weblogic的當前狀態(tài),按下后是Weblogic處于配置狀態(tài),可以進行發(fā)布,修改任務。


          二.點擊左側邊欄“域結構”中的“部署”鏈接,準備在域“hydomain”上部署一個Web應用。


          三.選擇右邊的"upload your files"鏈接,準備把JSTLSample.war上傳到服務器上.


          四.點擊"部署歸檔文件"右側的"瀏覽"按鈕,在本地找到JSTLSample.war,然后點擊"下一步"按鈕.


          五.到這里,Weblgic告知已經(jīng)上傳成功,在下面的單選框中選中你剛才上傳的war文件,再點擊下一步按鈕準備開始部署它.


          六.在這個頁面中,選擇"將此部署安裝為應用程序"單選框,再點擊"下一步"按鈕.


          七.到這里,部署完成了,你還可以修改一下應用的名稱和安全模型,如果沒有什么需要變更的話點擊"完成"按鈕.


          八.在weblogic的管理控制臺中進行有效修改操作后,原來的"鎖定并編輯"按鈕會變成"激活更改"按鈕,此后如果你確定剛才的變更操作無誤應該點擊"激活更改"按鈕,否則點擊"撤銷所有更改"按鈕用以取消之前的變更行為.這步操作以后很常用.


          九.看到以下界面的綠色文字"已激活所欲哦更改.不需要重新啟動."后,說明更改已經(jīng)有效激活了.注意此時"激活更改"按鈕又變成了"鎖定并編輯"按鈕.


          十.點擊"域結構"下的"部署"鏈接,在部署列表中找到"JSTLSample.war",選中其左邊的復選框。注意現(xiàn)在的安裝按鈕是不可用的,如果要啟用的話,還需要點擊“鎖定并編輯”按鈕。


          十一.選中后上方的"啟動"按鈕和"停止"按鈕被激活,它們分別用來啟動一個應用程序和停止一個已啟動的應用程序.


          十二.點擊"啟動"按鈕右側的下拉按鈕,點擊"為所有請求提供服務"鏈接.


          十三.進入此界面,點擊"是"按鈕,確認剛才的操作.


          十四.weblogic反饋說"已經(jīng)將啟動請求發(fā)送到了選定的部署",這說明應用已經(jīng)被啟動了,接下來我們可以在Web瀏覽器中看看效果.


          十五.打開一個瀏覽器,在地址欄中輸入"http://localhost:7001/JSTLSample",然后,部署好的Web應用界面就出現(xiàn)了。


          -全文完-
          posted @ 2009-08-27 10:21 何楊| 編輯 收藏

          效果還是可以的:


          以下代碼僅供參考,大家拿下去后請自行修改。
          <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
          <html>
           
          <head>
            
          <title>橫向動態(tài)菜單示例</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);
          }

          // -- 清除現(xiàn)有菜單項
          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='#'>衛(wèi)青</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='#'>程知節(jié)</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.aygfsteel.com/Files/heyang/CSSMenu220090826152056.rar
          posted @ 2009-08-26 15:19 何楊| 編輯 收藏

          從控制臺啟動Weblogic的一個域后,打開一個瀏覽器窗口,輸入“http://localhost:7001/console”,將出現(xiàn)如下界面。如果沒有的看見的話則是域服務器沒有打開,另外這個URL希望大家記住,就像localhost:8080/appname一樣。



          然后,輸入你登陸域的用戶名和密碼,再點擊登錄按鈕。如果這時密碼忘了你只能怨自己當時沒記下來。


          稍等片刻后,Weblogic管理控制臺界面打開了,以后組件的發(fā)布與撤銷都會在這里進行。在進入正題之前,打開幫助多看看吧。


          全文完。
          posted @ 2009-08-26 13:38 何楊| 編輯 收藏

          如何理解Weblogic中的域:
          Weblogic是一個總的服務器,域則是它管理下的一個小管理單元,相當于一個小服務器,我們 以后配置的javaEE組件等都應該防止在某一個域上,也可以這樣理解,Weblogic是一幢大樓,域則是一個個房間,房間里可以放我們想放的東西。這 樣做得好處是能把不相關的東西分隔開,互不干擾,需要用到那個就啟動哪個,就像我們到固定的房間中放置特定的東西一樣。

          域需要配置和安裝,這是我們安裝完Weblgic后要做的第一件事,以下是示例步驟:

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


          二.毋庸置疑該選擇新建Weblogic域,要修改域時再選下面的選項:


          三.此頁無需改動,直接點擊下一步.


          四.輸入管理員用戶名和密碼,密碼必須九位.在此強烈建議你在紙上記下用戶名和密碼,若以后忘記悔之晚矣.


          五.配置服務器啟動模式和JDK,一般無需改動,點擊下一步即可.


          六.這一頁也不要進行改動,留待以后配置:


          七.輸入域名及其所在的目錄,域名稱最好記下來以備忘.


          八.終于開始創(chuàng)建域了,點根煙精心等待.


          九.安裝完畢后,找到域所在的目錄,點擊其中的"startweblogic.cmd",域就啟動了,其中你配置的javaEE組件當然會隨之啟動,如果這些組件沒有錯誤和輸出的話,就能看到下面的控制臺窗口,這表示域服務器啟動成功了。



          最后關于域服務器控制臺窗口需要提醒幾點
          1.此窗口打開意味著域服務器處于活動狀態(tài),其他程序或服務能取得部署在域服務器上的服務;而關閉后意味著這個域服務器提供的所有服務關閉。因此,在與部署在Weblogic的組件通信前,請確保組件所在的域服務器是打開狀態(tài)。
          2.組件如果出現(xiàn)錯誤,在控制臺窗口會有輸出,你也可以在程序中加入一些輸出來監(jiān)控程序運行情況,這是常見的診斷部署組件錯誤的手段。
          3.很多情況下,修改了部署在域服務器上的j2EE組件后,需要重新啟動域服務器。
          posted @ 2009-08-26 11:11 何楊| 編輯 收藏



          Weblogic簡介
          BEA WebLogic是用于開發(fā)、集成、部署和管理大型分布式Web應用、 網(wǎng)絡應用和數(shù)據(jù)庫應用的Java應用服務器。BEA WebLogic Server擁有處理關鍵Web應用系統(tǒng)問題所需的性能 、可擴展性和高可用性,它將Java的動態(tài)功能和Java Enterprise標準的安全性引入大型網(wǎng)絡應用的開發(fā)、集成、部署和管理之中。

          一.開始安裝:



          二.選擇同意其協(xié)議:


          三.選擇BEA主目錄,建議不要修改路徑:


          四.首次選擇完整安裝,省的以后麻煩。


          五.此工具不選也罷:


          六.選擇產(chǎn)品安裝目錄,建議不要修改:


          七.創(chuàng)建快捷方式:


          八.正式安裝開始,點根煙等著吧:


          九.有空時看看BEA的介紹也不錯:


          十.Weblogic9.2的安裝界面還是色彩紛呈的:


          十一.創(chuàng)建實例域:


          十二.還在創(chuàng)建實例域:


          十三.安裝終于完成了。


          到這里,Weblogic9.2安裝就大功告成了。
          posted @ 2009-08-26 09:25 何楊| 編輯 收藏

          僅列出標題
          共28頁: First 上一頁 19 20 21 22 23 24 25 26 27 下一頁 Last 
          主站蜘蛛池模板: 神池县| 安陆市| 兖州市| 额尔古纳市| 延津县| 静安区| 行唐县| 汕头市| 泽州县| 桂东县| 宁明县| 体育| 延吉市| 合江县| 天全县| 怀化市| 剑阁县| 广汉市| 景宁| 陇西县| 车致| 山阳县| 鲁甸县| 高要市| 句容市| 洛川县| 青神县| 灵石县| 介休市| 威信县| 武夷山市| 葵青区| 陆川县| 航空| 福鼎市| 祁东县| 唐海县| 牙克石市| 望谟县| 岚皋县| 古浪县|