顯示具有 HTML 標籤的文章。 顯示所有文章
顯示具有 HTML 標籤的文章。 顯示所有文章

2014年1月27日 星期一

[Web] meta X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="....." />

指定 render 的模式

content 內填入要使用的模式 可使用多個用逗號分開


. 標準模式:
IE=9; IE=8; IE=7...

. 模擬模式:
IE=EmulateIE9; IE=EmulateIE8; IE=EmulateIE7....

. 什麼版本 IE 就用什麼版本的標準模式:
IE=edge

. 強制 IE 使用 Google Chrome Frame:
chrome=1



Google Chrome Frame
  • IE plugin,可在 IE 中模擬 Chrome
  • 目前支援 IE 6、IE 7、IE 8、IE9


* Reference
. X-UA-Compatible設置IE兼容模式
. 在老 IE 中使用 Google Chrome Frame 超速新引擎瀏覽網頁(測試心得)
. Google Chrome Frame

2012年6月22日 星期五

[Web] Brief notes


  • slf4j
    • 在 jar 檔時就 binding,比較好切換。
  • framework
    • 提供 pattern 的模組
  • Spring framework
    • 本身是個大 factory,將工作交給底下的 factory...
  • Struts2
    • #attribute 作用約是 ${attribute}
  • iBatis
    • $var$
      • paraClass 中的 attribute
    • #fieldName:fieldType#
      • Table field
  • HTML
    • 由上而下 compiler,結果會是 DOM tree 結構。
    • DTD
      • 描述 HTML syntax
    • <meta>
      • 提供和 browser or search engine 相關的訊息。
      • ex: 描述文檔的內容。

2012年2月16日 星期四

[Web] iframe, location,

iframe
在 iframe 中 submit 的 url,便是載入 iframe 的 url
供 iframe 呼叫的 function 必須寫在 $(function() {}); 之外


window.location
這樣 request method 是 GET,user 只要打網址就可以執行此動作


$().click(function() { }):
Only set click listener not really do the function in click().

$(function() {} )
[jQuery] ready() vs. onload()
在 DOM 下載完後才執行,以避免 function 使用到尚未載入的 element。


AJAX
適合使用 AJAX 的時機,當想保留當下操作頁面的資訊與狀態。

[Tiles] Cascade



    

    



2012年2月15日 星期三

[J2EE] Get values from server on Page

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>






 

 

"${pageContext.request.contextPath}/home"  



"${person.dog.name}"

<%= (Person) request.getAttribute("person").getDog().getName() %>

<%
    String name = request.getAttribute("person").getDog().getName();
    request.setAttributes("name", name);
%>
// => "${name}"


// => "${name}"



"${javax.servlet.forward.servlet_path}"

2012年2月14日 星期二

[HTML] Checkbox with Spring or Apache Struts

checkbox 回傳至 server 值如: [1,2,3],ex: List setObjectAttribute(...) {}

可能會收到 [, 2] 這類含有空值的設定值;當 checkboxlist 完全未選擇時,設定值會為 []。


SpringFramework:

<input type="hidden" name="_peopleGroupTags" value="on" />

Apache Struts 2:

Fix for https://issues.apache.org/jira/browse/WW-992

<s:hidden id="
attributeName_0" name="attributeName" value="" />

[Spring] form 和 Object 的對應

* 對應 form 和 Object
<%
// Get the service bean.
TestService testService = WebApplicationContextUtils.getWebApplicationContext(session.getServletContext())
            .getBean("testService", TestService.class);
%>

<body>
..

     
     

</body>


* 使用 form:form tag
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>


    


* 物件過程
  1. Browser request。
  2. Server 向 DB 取出相對應的物件。
  3. Send to Browser showing Object values on page and disconnected with DB。
  4. Submit Object to server。
  5. Server 向 DB 取出相對應的物件 again, 對應傳入的值, 然後將此物件存入 DB。
// 若有此宣告,則在進入 controller 前會先經過此 method
// 然後這裡 return 的 Object 再被送往 controller
@ModelAttribute(ATTRIBUTE_MODEL)
protected Object prepareModelAttribute(....) { }

2011年10月2日 星期日

[jQuery] ready() vs. onload()

[jQuery ready()]
  • 先透過 $() 取得 document 物件,接著使用 ready() 帶入一個函數,就可以在網頁下載完成後立即執行。
  • ex: $(document).ready(function());
  • 是模擬 W3C DOM 標準的 DOMContentLoaded 事件,因為,IE 目前的版本 6 和 7 並不支援 DOMContentLoaded 事件,所以 jQuery 用了此方法來達到模擬 DOMContentLoaded 的事件。
  • 在 DOM 文件下載完成後觸發。

[window.onload()]
  • 是文件和所有文件內的元件,包含圖檔等等全部下載完成後才會觸發

[versus]
  • 通常 window.onload 的發生時間要比 DOMContentLoaded 晚一點(如果你的網頁內確實有用到一些圖檔)
    • 所以,有時候你所需要執行的程式並不需要等所有圖檔都下載完成,因此,放到 DOMContentLoaded 事件內處理是比較合適的。
  • window.onload 並沒有辦法多次指定不同的函數來執行,最後指定的那個函數會複寫掉先前的。


* Reference
- jQuery 教學 - 基礎篇 - JavaScript 教學、心得分享 - jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 - Powered by Discuz! **

2011年9月18日 星期日

[WEB] Tile, JSTL, JS syntax in HTML





${status.count}


 colspan="2">



* Tile 的 attribute 在 HTML 中可透過 getAttribute 取得,ex:

<tiles:insertAttribute name="title" />





* 視 js 為 .txt







2011年9月3日 星期六

[Web] CDATA

* 原本要在 xml 中使用特殊字元時,則必須寫成 &lt;、&gt;、、等,否則 xml 分析會出錯。


CDATA 區段提供了一種通知剖析器的方法,說明 CDATA 區段所包含的字元沒有標記。 寫法如下:


<![CDATA[  >   ]]>


* 也就是說在 CDATA 中的字元不會被解析。




* Reference
- CDATA 區段 - XML 標準

2011年5月8日 星期日

[Javascript] Note

必得寫成

<script></script>

完整的結尾

若寫成

<script />

在有多個 script 時 tag 的配置會錯亂!

2011年5月1日 星期日

[Tiles] 版本

在 tiles 2.2 以上

支援在 tiles config 使用 EL


[CSS] Text CSS

* 用 em 當單位的好處是會隨字體大小改變

* 緊排 (kerning) letter-spacing

2011年4月22日 星期五

[CSS] anchors

[Note] 如果為下段中的 anchor 指定了全域 CSS,這些樣式會覆蓋為 <h2> 指定的樣式。

Note CSS for h2


* id 像 name 屬性,可為頁面指定 anchor,但有些 browser 不支援。

* 不建議使用 name 屬性,所以可以考慮同時使用 id and name,但只有在相同標籤時才能這樣,也只有特定標籤允許這樣做:
ex: <a>, <applet>, <form>, <frame>, <iframe>, <img>, <map>。


* Order: LoVe/HAte
  • a:link
  • a:visited
  • a:hover
  • a:active


[Note] 冒號後不可空格!


2011年4月20日 星期三

CSS and HTML

  • <em> : 斜體並且強調
  • font-style: italic;
    • 僅表示斜體外觀。
  • <strong> : 粗體並且更強烈的強調
  • font-weight: bold;
    • 僅表示粗體外觀。

2011年4月18日 星期一

[Configuration] persistence.xml and applicationContext.xml

* How does the server know which database it is supposed to save / update / query the entity objects? How do we configure the underlying object-relational-mapping engine and cache for better performance and trouble shooting? The persistence.xml file gives you complete flexibility to configure the EntityManager.

* persistence.xml file
  • Is a standard configuration file in JPA.
  • Has to be included in the META-INF directory inside the JAR file that contains the entity beans.
  • The <provider> specifies the underlying implementation of the JPA EntityManager.
  • The <jta-data-source> points to the JNDI name of the database this persistence unit maps to.

* Since you might have multiple instances of persistence-unit defined in the same application, you typically need to explicitly tell the @PersistenceContext annotation which unit you want to inject. For instance, @PersistenceContext(name="myapp") injects the EntityManager from the persistence-unit named "myapp".

* JTA:
  • One of the Java Enterprise Edition (Java EE) APIs allowing distributed transactions to be done across multiple XA resources in a Java environment.
  • Provides for:
    • demarcation of transaction boundaries
    • X/Open XA API allowing resources to participate in transactions.

* <tx:annotation-driven>
  • Enabled spring to interpret @Transactional annotation.
  • Creates a BeanPostProcessor to be included in the BeanPostProcessor step in the initialization phase.
    • When that BeanPostProcessor sees @Transactional in your Spring bean code, then it create a DynamicProxy to proxy that bean so that it will run transactionally.

* 一個 LocalContainerEntityManagerFactoryBean 只能管理一個持久化單元, 僅管其内部創建的DefaultPersistenceUnitManager 類可以得取多個持久化單元信息(PersistenceUnitInfo), 但最终只能有一個被返回给 LocalContainerEntityManagerFactoryBean 用於創建 JPA 實現提供者的 EntityManagerFactory

* Entity Manager 藉由 Persistence Context 來控制被管理的 Entity Instances,而每個 Persistence Context 必定由一個 Persistence Unit 來限制該 Context 可以管理的 Entity Classes 種類。

* Entity Manager 可以分為兩類
  • Container-Managed Entity Manager
    • 是由 JEE Container 所管理的 Entity Manager
    • 主要是以 @PersistenceContext 標識在你的程式中,Container 會在執行期間自動注入對應的 instance。
    • 可以再區分兩類:
      • PersistenceContextType.TRANSACTION (Default):
        • 主要是配合 Stateless Session Bean 與 JTA Transaction,在每次 method 被呼叫時都去檢查 JTA transaction 中是不是有 Persistence Context,如果有就續用否則就建一個新的。
        • 當 JTA Transaction commit 時,在 persistence context 中的 entity instances 就會自動 persist 至 DB。
      • PersistenceContextType.EXTENDED:
        • 主要是配合 Stateful Session Bean,只有當執行到有 @Remove 標識的 method 時才會 persist 在 persistence context 中的 entity instances。
  • Application-Managed Entity Manager
    • Application 自行管理,藉由呼叫 EntityManagerFactory.createEntityManager() 來取得,因此,一般的 J2SE程式也可以使用,當然在 JEE Container 也可以使用,特別是在某些特別情況或有特殊考慮時多一種方式可以應用。
    • 如果要在 JEE Container 中使用的話,與 Container-Managed Entity Manager 不同之處是以 @PersistenceUnit 來標識要被注入的 EntityManagerFactory,而且也必需呼叫 EntityManager.close() 來指出要 persist 的時機。
    • 產生 persistence context 的時機也有所不同,當呼叫 EntityManagerFactory.createEntityManager() 就會產生一個 persistence context。

* JPA allows us to work with entity classes, which are denoted as such using
  • The annotation @Entity.
  • configured in an XML file (we'll call this persistence meta information).
When we acquire the Entity Manager Factory using the Persistence class, the Entity Manager Factory finds and processes the persistence meta information.


* To work with a database using JPA, we need an Entity Manager. Before we can do that, we need to create an Entity Manager Factory.
=> Entity Manager Factory -> Entity Manager -> using JPA...

* To acquire an Entity Manager Factory, we use the class javax.persistence.Persistence.
  • It reads a file called persistence.xml in the META-INF directory.
  • Then creates the named Entity Manager Factory, which processes persistence meta information stored in XML files or annotations (we only use annotations).

* Once we have an Entity Manager, we can ask it to perform several operations such as persisting or removing an entity from the database or creating a query.



* Reference
- 1.2.1. The persistence.xml file
- Java Transaction API
- Understanding working
- 非J2EE 容器环境下Spring +JPA 多持久化单元/多个JAR归档注解实体 的实体扫描问题及解决办法
- JPA2--Transaction Management
- Comments/Suggestions, please email: schuchert -at- yahoo -dot- com

2011年3月17日 星期四

[jQuery] Overview Note

[Introduction]

* Definition:
  • A JavaScript Library.
  • 為事件處理特别設計的。

* jQuery library 包含以下特性:
  • HTML 元素選取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和動畫
  • HTML DOM traversal and modification
  • AJAX
  • Utilities

* Google 的 CDN
<head>
  
</head>

* HTML 元素默認是靜態定位,且無法移動。如需使元素可以移動,請把 CSS 的 position 設置為 relative 或 absolute。


[Selector]

* 基礎語法是:$(selector).action()

* 以 $ 符號做為間接方式,但有可能某些其他 JavaScript Library 中的函数(比如 Prototype)同樣使用 $ 符號而發生符號衝突。因此可以使用 noConflict() 定義自己的名稱來取代 $ 符號,如下:
var jq=jQuery.noConflict()

* 使用 CSS selector 來選取 HTML 元素。ex:
  • $("p") 選取所有<p>元素。
  • $("p.intro") 選取所有 class="intro" 的<p>元素。
  • $("p#demo") 選取 id="demo" 的第一個 <p>元素。

* 使用 XPath 表達式來選擇带有给定屬性的元素。
  • $("[href]") 選取所有带有 href 屬性的元素。
  • $("[href='#']") 選取所有带有 href 值等於 "#" 的元素。
  • $("[href!='#']") 選取所有带有 href 值不等於 "#" 的元素。
  • $("[href$='.jpg']") 選取所有 href 值以 ".jpg" 结尾的元素。

* " * Selector"
  • 表示選取文檔中的每個單獨的元素,包括 html、head 和 body。
  • 如果與其他元素一起使用,該 selector 選取指定元素中的所有子元素。
  • 但某些 bowser 處理 * 的速度缓慢。

* 不要使用數字開頭的 ID 名稱!在某些瀏覽器中可能出问題。

* :empty
  • 選取空的元素。
  • 空元素指的是不包含子元素或文本的元素。
  • 除以下幾種情况之外的元素即是可見元素:
    • display:none
    • type="hidden"
    • Width 和 height 等於 0
    • 隱藏的父元素(同時隱藏所有子元素)

* $("[attribute]")
選擇每個带有指定属性的元素。

* :text: 選取類型為 text 的 <input> 元素。


[Callback function]

* 在當前動畫 100% 完成之後才執行。

* 由於 JavaScript 語句是逐一執行的,所以因為動畫還沒完成,動畫之後的語句可能會產生錯誤或頁面衝突。為了避免這個情况,可以以参數的形式添加 Callback 函數。

* callback 参數是一個在操作完成後被執行的函数。


[Action]

* delegate()
適用於當前或未来的元素(比如由脚本創建的新元素)。

* load()
  • 當指定的元素(及子元素)已加載時,會發生 load() 事件。
  • 此事件適用於任何带有 URL 的元素(比如圖像、脚本、框架)。
  • 根據不同的瀏覽器,如果圖像已被缓存,則也許不會觸發 load 事件。
  • 是一種簡單的(但很强大的)AJAX 函数。語法如下:

$(selector).load(url,data,callback)
// url: 指定數據的 web 地址。
// 只有希望向 server 發送數據時,才需要使用 data 参數; 需要在執行完畢後觸發一個函數時,才需要使用 callback。

* append()
  • 在被選元素的结尾(仍然在内部)插入指定内容。
  • append() 和 appendTo() 作用相同。不同之處在於:内容的位置和selector

* detach()
  • 移除被選元素,包括所有文本和子節點。
  • 會保留 jQuery 對象中的匹配的元素,因而可以在將來再使用這些匹配的元素。
  • 會保留所有绑定的事件、附加的數據,這一點與 remove() 不同。

* remove()
  • 移除被選元素,包括所有文本和子節點。
  • 不會把匹配的元素從 jQuery 對象中删除,因而可以在將來再使用這些匹配的元素。
  • 但除了保留元素本身外,不會保留元素的 jQuery 數據。其他的比如绑定的事件、附加的數據等都會被移除。與 detach() 不同。

* text()
  • 返回或設置被選元素的内容 (inner HTML)。
  • 與 html() 類似,但是不會對 tag 轉譯,皆視為純文字
  • 如果該方法未設置参数,則返回被選元素的當前内容。

* val()
  • 取值时,僅會返回第一個匹配元素的值。
  • 但設值時,會設置所有匹配元素的值。


* Reference
- W3C jQuery 教程

[CSS] Introduction

* 放置位置

- external style (.css)
- internal style(位於 <head> 內部)
- inline style(在 HTML 元素內部,有最高的優先權)

* Position: 在使用相對定位時,無論是否進行移動,元素仍然占據原來的空間。因此,移動元素會導致它覆蓋其它框。


* Reference
- W3C CSS 教程

2011年3月15日 星期二

[CSS] Selector

.class {}

#id {}

selector {}

[attr="val"] {}  val需完全相等

[attr~="val"] {}  只要有包含val即生效

selector.class_value {} = selector["attr_value"] {}

[attr^="val"] {}  以val開頭的value
[attr$="val"] {}  以val結尾的value
[attr*="val"] {}  包含val開頭的value

[att|="val"] {}  以val開頭的value


* Reference
- W3C CSS 教程