2015年11月30日 星期一

magpi 設計線上表單, 利用行動裝置收集資料


Joel Selanikio: The surprising seeds of a big-data revolution in healthcare





於 沒有留言:
標籤：

Oracle Forms 的過去, 現在, 與未來


Oracle Form 產品經理 Michael Ferrante 介紹 Oracle Forms 的新功能及未來發展. 
來源: 截取自 https://www.youtube.com/watch?v=EMabp8mkNzI
Demo 的新功能:

  • Color Scheme
  • 在 Oracle Forms 中使用 JavaScript
  • Form 11gR2 的 guiMode 功能讓 Forms Applet 和 google map 在同個 browser 中顯示。


https://www.youtube.com/watch?v=EMabp8mkNzI

於 沒有留言:
標籤：

2015年11月21日 星期六

JSF 中的 UIInput Component 也是一種 UIOutput Component. 為什麼這樣設計呢?



UIInput 元件的被設計用來顯示資料給 User 並接受請求的參數, 所以 UIInput 是 UIOutput 元件的子類別之一。參考 [1] 的說明就會清楚了.


那麼, UIInput 元件如果有使用 Converter 或者 Validator，是在那個階段執行 Converter 或者 Validator 呢? 預設是在 Process Validators 階段套用 Converter 進行型別轉換及使用 Validator 進行資料驗證。

驗證通過後發生什麼事? 如果驗證通過，JSF 會 queue 一個 ValueChangeEvent 事件，並 Broadcast 到註冊的 Listener 去。

Reference:

  1.  https://docs.oracle.com/javaee/6/api/javax/faces/component/UIInput.html
於 沒有留言:
標籤：

JSF tag 中的 binding 屬性有什麼作用呢? 何時使用?


參考 StackOverflow 中的這篇文章, 瞭解 JSF 中的 Component Binding 的功能及使用時間。

What is component binding in JSF? When it is preferred to be used?

簡單來說, 當你要在 Backing Bean 中控制 UIComponent 時, 便要使用到 Component  Binding 的功能。


延伸閱讀:

於 沒有留言:
標籤：

2015年11月20日 星期五

查詢常用的 regexp 表示式, 如 email 的 regexp 表示式


常常為了特定常用用途的 regexp 表示式傷腦筋嗎? 像是 email. 現在, 可以到 RegExLib.com 網站去查詢.

http://regexlib.com/Search.aspx?k=email&c=1&m=-1&ps=20

Java 語言的 Regexp:

^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$;
Ref: http://emailregex.com/#comment-1900789300
於 沒有留言:
標籤： ,

2015年11月11日 星期三

Oracle Forms Builder 11gR2 安裝手冊

Oracle Forms Builder 11gR2 安裝手冊 
2015/11/12

Oracle Form Builder 的安裝需要多個步驟及設定。本手冊提供 Oracle Form Builder 11gR2 的安裝提供完整說明及指引。安裝設定過程包括以下部份:  WebLogic Application Server ，Oracle Form Builder，JRE 8 ，及WebUtil 功能。

 全文


於 沒有留言:
標籤：

使用 Bootstrap 3 – A short and Quick Guide

使用 Bootstrap 3 – A short and Quick Guide

hychen39@gmail.com

1. 使用 CDN 方式在 Web Application 中使用 Bootstrp 3 CSS framework


: The charset attribute specifies the character encoding for the HTML document.
:  link to external style sheets.
加入 Java scripts


CDN for bootstrap (From Max CDN)
  
  rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">  
 
   
  rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">  
 
  
   
 

2. Using container and container-fluid class

The Container sets the width and paddings of the contents.
You can have more than one container in the body. But, you cannot nest a container within another.
If you want your page to fill with the whole screen, you can use container-fluid class.



3. 切割版面



Source: http://www.bootstrapzero.com/bootstrap-template/grid

Bootstrap 將版面分割成 12 個 columns. 當螢幕大小變化時，這些 column 的位置便會調整。支援的螢幕寬度為:
  • ·        Extra Small (xs): < 768px
  • ·        Small (sm): >=768, <992 span="">
  • ·        Medium (md): >=992, <1200 span="">
  • ·        Large (lg): >= 1200

列用來做水平切割。一列中可以有多個內容區塊的, 內容區塊的長度最寬為 12 columns。以下的程式將一個列分成 2 個內容區塊，這些區塊的寬度分別為 3 及 9 columns。




每個 div 在不同的螢幕寬度下可有不同 的寬度:
  • ·        col-xs-n: 指定在 Extra Small 寬度下區塊的寬度為 n columns
  • ·        col-sm-n: 指定在 Small 寬度下區塊的寬度為 n columns
  • ·        col-md-n: 指定在 Medium 寬度下區塊的寬度為 n columns
  • ·        col-lg-n: 指定在Large寬度下區塊的寬度為 n columns


上例中，若為Medium 寬度，則該列切中的區塊寬度分別為3 及 6 Columns。若為xs 寬度，則該列切中的區塊寬度分皆為12 columns，此時 div#content 會自動換到下一列。

4. Jumbotron 大型看板


直接套用 jumbtron class，h1 及 p 的內容會被大。

5. Menu 的製作

Menu 的製作使用 ul 標籤並套用 nav, nav-pills, nav-stacked 等 3 個樣式來完成。

更多訊息參考: http://getbootstrap.com/components/#nav-pills

6. Button 的樣式


可用樣式:
  • ·        btn btn-defualt
  • ·        btn btn-primary
  • ·        btn btn-success
  • ·        btn btn-warning
  • ·        btn btn-danger


7. Navigation Bar 的製作



把 navigation 放在 container 中。
和 navigation bar 相關的 class:
  • ·        navbar navbar-default navbar-fixed-top: 固定在上方的 navigation bar
  • ·        navbar navbar-default navbar-bottom: 固定在下方的navigation bar


和 navigation bar 中的清單項目有關的 class
  • ·        navbar-header: Navigation bar 的最左邊的內容。
  • ·        nav navbar-nav: 靠右對齊的導覽元素
  • ·        nav navbar-nav navbar-right: 靠右對齊的導覽元素

更多資訊參考: http://www.w3schools.com/bootstrap/bootstrap_case_navigation.asp

8. 表單中的控制項及其說明資訊


Standard rules for all three form layouts[1]:
  • ·        Always use form role="form" (helps improve accessibility for people using screen readers)
  • ·        Wrap labels and form controls in  div class="form-group" (needed for optimum spacing) 把 label 和 control 用 div.form-group 包在一起。
  • ·        Add class .form-control to all textual  input, textarea, and select elements。Form 中的控制項元素使用 form-control 類別

Example :

Source: http://www.w3schools.com/bootstrap/bootstrap_forms.asp

表單中的每個欄位可以在其前或後加入文字說明。在一個 .form-group 中使用另個 div 把欄位及其說明包起來，並套用 .input-group。說明的文字使用 包起來並套用 .input-grou-addon 類別並指定該  span 的 id。在要說明的欄位中加入屬性 aria-describedby 其指為 說明的文字的 span 的 ID 值。


更多的資訊參考: http://www.w3schools.com/bootstrap/bootstrap_forms.asp

9. ICON 

Bootstrap 提供多達 250 種的 icon，這些 icon 是由 Glyphicon.com 提供的。

Source: http://getbootstrap.com/components/#glyphicons

使用時在 中先套用 glyphicon 類別後再套用 glyphicon-xxx 類別。例如:
便會煩示信封的 icon。


10. 參考資料

[1] Riwanto Megosinarso, Step By Step Bootstrap 3: A Quick Guide to Responsive Web Development Using Bootstrap 3, 2014.
[2] Bootstrap 3 Tutorial, http://www.w3schools.com/bootstrap/default.asp
[3] Bootstrap 3, http://getbootstrap.com/


於 沒有留言:
標籤：

2015年11月10日 星期二

在 JSF Page 中如何依條件顯示特定元件

在 JSF Page 中如何依條件顯示特定元件? 例如, 當 user login 後在 nav bar 上顯示 logout icon. 若尚未login 則顯示 login icon. 
請參考 Stackoverflow 中的這則討論 How to use if, else condition in jsf to display image. 可以使用的選項:
  • c:if
  • c:choose
  • render attribute for the UIComponent
於 沒有留言:
標籤：

2015年11月9日 星期一

Cookie Helper


對處理 Cookie 很煩嗎? 試試這個 Cookie Helper.
原作者: Vasil Lukach, 2014/01/05
Source: http://stackoverflow.com/questions/20934016/how-to-add-cookie-in-jsf

1:  public class CookieHelper {  
2:   public void setCookie(String name, String value, int expiry) {  
3:    FacesContext facesContext = FacesContext.getCurrentInstance();  
4:    HttpServletRequest request = (HttpServletRequest) facesContext.getExternalContext().getRequest();  
5:    Cookie cookie = null;  
6:    Cookie[] userCookies = request.getCookies();  
7:    if (userCookies != null &amp;&amp; userCookies.length &gt; 0 ) {  
8:      for (int i = 0; i &lt; userCookies.length; i++) {  
9:        if (userCookies[i].getName().equals(name)) {  
10:          cookie = userCookies[i];  
11:          break;  
12:        }  
13:      }  
14:    }  
15:    if (cookie != null) {  
16:      cookie.setValue(value);  
17:    } else {  
18:      cookie = new Cookie(name, value);  
19:      cookie.setPath(request.getContextPath());  
20:    }  
21:    cookie.setMaxAge(expiry);  
22:    HttpServletResponse response = (HttpServletResponse) facesContext.getExternalContext().getResponse();  
23:    response.addCookie(cookie);  
24:   }  
25:   public Cookie getCookie(String name) {  
26:    FacesContext facesContext = FacesContext.getCurrentInstance();  
27:    HttpServletRequest request = (HttpServletRequest) facesContext.getExternalContext().getRequest();  
28:    Cookie cookie = null;  
29:    Cookie[] userCookies = request.getCookies();  
30:    if (userCookies != null &amp;&amp; userCookies.length &gt; 0 ) {  
31:      for (int i = 0; i &lt; userCookies.length; i++) {  
32:        if (userCookies[i].getName().equals(name)) {  
33:          cookie = userCookies[i];  
34:          return cookie;  
35:        }  
36:      }  
37:    }  
38:    return null;  
39:   }  
40:  }
於 沒有留言:
標籤： , ,
訂閱： 文章 (Atom)