2013년 8월 26일 월요일

How to connect to a remote JVM with the VisualVM

1. Java 보안 기능 획득을 위하여 Permission 등록 하기

Policy 파일 만들기(예를 들어 "java.policy")

grant codebase "file:${java.home}/../lib/tools.jar" {
permission java.security.AllPermission;

2. RMI registry Server 실행
cmd: rmiregistry 1099 (1099는 포트)

3. jstatd 실행
cmd: jstatd -p 1099 -J-Djava.security.policy=D:/java.policy

4. Java Application에 JMX 옵션 추가
분석을 대상 Java Applicatoin의 실행 옵션에 다음을 추가.

-Djava.rmi.server.hostname= -> 외부에서 접속할 IP
-Dcom.sun.management.jmxremote.port=3333 -> JMX jndi Port

5. VisualVM을 실행 하고 Remote 항목에서 "Add JMX Connection", "Add jstatd Connection"을 추가하면 끝.

2013년 8월 9일 금요일

Touch Design Patterns for Mobile

Touch devices have unique features in terms of design and usability. With the same amount of effort, the user can access every pixel on the screen; this encourages a different way of thinking about a design. Another difference is that the user will use her finger for touch selection (unless it is a stylus-based device). A finger is big compared to a mouse pointer, and the hit zone should reflect this.

The Touch Gesture Reference Guide is a great resource put together by Luke Wroblewskithat contains an overview of core gestures for most touch commands, tips on how to utilize gestures, visual representations of each one to use in documentation, and an outline of popular software platforms supporting them. You can download it from Touchguide.

Here are some useful design tips for touch devices:

  • When the user touches the screen, parts of it will be obscured. Think about what will be hidden, and if it is important. Consider both right- and left-handed users.
  • Provide a reasonable amount of space (20 pixels or more) between clickable elements.
  • For frequently used buttons and links, provide a big clickable area (minimum 40 pixels width and height).
  • For less frequently used buttons, you can use a smaller area (minimum 25 pixels).
  • Provide quick feedback when a touch is accepted.
  • Think about how scrolling will work.
  • When using form input fields, try to insert the label above and hints below, not to the right or left of the input field. Generally, touch devices with virtual keyboards zoom in on the field when the user moves the focus to it, so the user will not see what is at the right or left of the input field while typing.
  • Use finger gestures on compatible devices.
  • Use infinite lists instead of pagination. An infinite list has a “More” final item that the user can click to dynamically add more elements to the list (via Ajax or other techniques). For performance purposes, you should reduce the number of pages shown at the same time. When adding new pages, the best way to approach this is to eliminate the first page from the DOM and create a “Previous” first item when the count reaches n pages (for example, 5). Doing this ensures that you will not have more than npages shown at the same time.
  • Use an auto-clear textbox feature for the most common text inputs. This is just an X icon at the right of the text input box that the user can click to automatically clear the input.
  • Use the long-press design pattern (also known as “touch and hold”) for contextual actions. This means that if the user presses a zone for two seconds or more, you can show a pop-up menu with contextual options.
  • Prefer bottom-fixed to top-fixed tab navigation. The bottom of the screen (or the right, in landscape mode) is nearer the finger while browsing than the top zone.
  • Analyze native touch applications for usability ideas.
  • Hide the URL bar so you can have more space available for your app.
  • Don’t create touch gestures on the borders of your page (top, bottom, left, or right), as some mobile browsers will capture those gestures for their own actions.
  • When using touch gestures, make them obvious (following operating system patterns), such as swipe right or left for picture gallery navigation; if they’re not obvious, provide alternative buttons and/or an example tutorial at the first load.

2013년 8월 8일 목요일

Design and User Experience for Mobile

Designing a mobile website or mobile app can be a challenge at the beginning. Unless you are working on a website for only one device, forget about creating an exact pixelby-pixel web design. Your mobile website will look different on every device it’s viewed on; you need to accept this and, keeping it in mind, develop a strategy to create the best web design you can.

The best advice I can give you about mobile web design is: Keep It Simple! However, that doesn’t mean Keep It Ugly.

A mobile website ideally consists of vertically scrollable documents. The typical twoor three-column design is not suitable for mobile web pages, unless you are targeting tablets or devices with a landscape orientation mode. Every mobile web document has a few identified zones:
  • Header
  • Main navigation
  • Content modules
  • Second-level navigation
  • Footer

These sections will be created one after the other in a vertical scope. Only for devices with a landscape orientation and smartphones is it suitable to create an alternative organization, where you can move the main navigation section to a right-side column.

On high-end smartphones, your main navigation can become a top or bottom tab bar, and the content modules can shrink with an accordion or master-detail design.

When you are creating a mobile version of an existing desktop website, you need to understand that you are  mobilizingthe website, not  minimizingit. Minimizing (or miniaturizing) a desktop website simply involves displaying the same content on a smaller screen. Mobilizing is more than that; it requires understanding the context and offering your services and content in a manner that is useful and allows for quick access by the user.

If you are designing a mobile app or a website using Ajax, you should always insert in the UI a background operation icon to alert the user when a background connection is in progress. An offline button could be useful if the user is not on WiFi or is in roaming mode and doesn’t want to get updates for a while.

Some best practices include:
  • Avoid horizontal scrolling (unless you know what you are doing).
  • Use Responsive Web Design to provide the best possible design in different scenarios, such as orientation changes.
  • Maintain visual consistency with your desktop site, if you have one.
  • Reduce the amount of text.
  • Use fonts that will be legible on every screen; don’t rely on the resolution.
  • Use background colors to separate sections.
  • Keep the main navigation to four or five links.
  • Maintain the total link count at no more than 15 per page.
  • For low-end and mid-range devices, don’t insert more than one link per line.
  • Use all the available width (not columns) for links, list elements, text inputs, and all possible focusable elements. Use HTML by-default focusable elements for click-able areas (for example, avoid using divs; use an anchor with a div).
  • Provide a “Go to Top” link in the footer.
  • Provide a Back button in the footer (some browsers don’t have a Back button visible all the time).

If your navigation requires going back frequently, you should check whether the browser maintains the scroll position after going back. If not, you should probably create back links with anchors to scroll to directly where the user was.

  • Provide the most-used features at the top.
  • Group large lists by categories, each with no more than 15 items (for example, country selection by selecting the continent first).
  • Use standard dialog windows.
  • Use standard drop-down menus, such as HTML selects. Don’t customize them or create them using JavaScript.
  • Minimize the amount of user text input required if you have multiple fields.
  • Save the user’s history and settings for future predictive usage.
  • Split large text articles into pages for feature phones (with page size depending on the richness of the browser).
  • Try your color palette in different environments. Users may be in a place with poor lighting, on public transport, at the beach in bright sunlight, or in an office with fluorescent lighting.
  • Provide different styling for touch devices.
  • Think about fluid (liquid) designs for best adaptation.
  • Use lists rather than tables.
  • Embrace accessibility support. For example, use HTML5 ARIA or be careful when disabling zooming.
  • Don’t discriminate against your users; provide the best possible experience to every mobile device.
  • For touch and cursor-based devices, use full-width links so that a link will activate if the user clicks on any pixel in the line containing it. Make sure there is only one link in each line.
  • Use high-quality color images and fancier features for smartphones (we will discuss optimizing later).
  • For cursor navigation, create medium-sized clickable zones for the cursor, moving by 5 or 10 pixels every time. Do not make the user travel a lot using the cursor; design all the clickable buttons near each other.
  • Provide images that are sized on the server side for the current device’s screen size and pixel density.
  • Don’t rely on fixed-position elements or on scrollable small areas (such as using overflow: scroll). Test them and provide alternatives if they are not compatible on some browsers.
  • If you are providing a shortcut, a native app, or an offline version of your mobile website, create an alert at the top of the design alerting the user to download it. Don’t show that alert after the first few views, or after the user has entered the download area. We will cover these techniques later.

Keep the text on your site to a minimum. Read every paragraph five times, and you will always find some word you can remove or a shorter way to say the same thing.

For low-end and mid-range devices, it is preferable to use a table design instead of floating  divs, like in the first years of the desktop web. But keep in mind that using more than one item, link, or idea per line isn’t a good practice on those devices.

2013년 8월 7일 수요일

Mobile Browsers

When browsing the Web on our mobile devices, we can use the preinstalled browser available by default on every device or we can install new browsers through  the application stores.

Preinstalled Browsers
오늘날 대부분의 Mobile Device에는 Preinstall 된 브라우저가 포함되어 있습니다. 사용자가 별도로 설치하지 않고 웹을 사용할 수 있다는 편의성도 있지만, Preinstall 브라우저는 Mobile Operation System이 업그레이드 되지 않는한 독립적으로 업그레이드 할 수 없다는 문제도 있습니다.

Safari on iOS
  • WebKit-based browser bundled with iOS.
  • Offers a great browing experience and smart zoom options.
  • Safari on iOS  was ther first mobile browser to support a range of new feature, including those that allow us to create animations, transitions, 3D effeccts, and Flash-like experiences using HTML, JavaScript, and CSS.
  • Designed for touch and multitouch navigation.
  • Most of th HTML5 APIs were first implemented in Safari on iOS.
  • iPhone/iPod touch versions are pretty similar, the table tversion additionally supports tab navigation.

Android browser
  • Android 4.0 버전까지 사용.
  • Based on WebKit.
  • Android browser는 Google Chrome이나 Safari on iOS와 비슷하지만 적확히는 둘 다 아니다.
  • 특히 Android browser는 Vendor별로 customized되기도 하는데 Samsung과 Sony에 포함된 Android browser는 다른 브라우저 버전입니다.
  • Google은 이런 상황이 좋지 않다고 파단하고 Android 4.1 버전부터는 “Google Chrome for Android”을 별도로 배포하고 있습니다.

Google Chrome
  • Android 4.1부터 기본 브라우저로 포함됨.
  • Desktop 버전의 기능을 대부분 지원
  • 2012년 중분 부터 iOS을 지원하는 Google Chrome을 출시, 하지만 iOS의 기본Web view engine을 사용해야 한다.

Amazon Slik
  • Tablets from Amazon include a new browser created by Amazon based on the Android browser, called Amazon Slik.
  • Slik의 특징은 “accelerated mode”에 있다. 웹 브라우징 중 HTML, CSS, JavaScript의 일부를 Amazon 서버에서 분석하고 그 결과를 압축하여 브라우저에 제공하는 기능이다.

Internet Explorer
  • IE는 1996년 처음으로 배포된 모바일 브라우저이다. 이것은 Pocket Internet Explorer (PIE)로 알려져있다. - for Windows CE 1.0
  • Launched in 2010 as Windows Phone7, came with a new version of Internet Explorer Mobile that was based on hte IE7 engine, with some IE8 feature mixed in.
  • Windows Phone 7.5 came with the first HTML5-compatible browser using the same codebase as IE9 for desktops.
  • Windows 8 and Windows Phone 8 come with IE10, which represents a big step forward in terms of mobile HTML5 API support.

Nokia Browser for Series 40
  • It was basically a focus navigation browser, based on Nokka’s own rendering engine.
  • Beginning in the 6th endition, the browser was updated to WebKit, creating a new browsing experience for low-end and mid-range devices.
  • The main problem with this browser was that the low-end and mid-range devices are not created with high-quality hardware, which can lead to some performance problems.

Nokia Browser for Symbian
  • In 2005, Nokia created the first open source WebKit-based mobile browser for symbian device.
  • It support focus, cusor, and multitouch navigation.

Nokia Browser for MeeGo
  • WebKit2 browser.
  • It has greate HTML5 support, but unfortunately there aren’t many device on the market today supporting this operationg system.

webOS browser
  • The HP operation sys tem comes with a WebKit-based browser that supports the latest web technologies.
  • It supports touch navigation and a card concept that allows the user to open many websites at the same time and flip between them using a finger.

Black berry browser
  • Many versions of the browser are available, depending on the device. There are devices with trackball and cusor navigation, older devices with focus navigatin, and newer smartphones with touch support.
  • The first generation of the BlackBerry brower, version 4.5 and earlier.
  • The second generation, version 4.6 to 5.0, had a redesigned rendering engine but was still far behind other mobile browsers in terms of performance and compatibility.
  • OS 6.0 to 7.1 have a WebKit-based browser that was completely redesgined for the tablet playBook and the new BlackBerry 10 platform.

UC Browser
  • The #1 browser in t he Chinese market
  • Now available in English for other market as a downloadable browser.
  • It is a cloud-based browser suppporting full HTML and JavaScript,. multiple windows, and many advanced features.
  • It works on some 3000 different mobile device models, including Android, Symbian, BlackBerry, Windows Phone, Java-based devices, and the iPhone.

Samsung Dolfin & jasmine
  • The WebKit-based browser installed with the Bada OS is called Dolfin.
  • This browser has included HTML5 support from Bada 2.0 and is installed on social devices.

LG Phantom
  • Included on some social devices from LG.
  • Based on WebKit.
  • It doesn’t have huch market share, and there is not much information available for developers.

  • A mobile browser created by the Japanese company ACCESS.
  • Targeting low-end and mid-range devices including phones, digital TVs, printers, and game consoles.
  • It is installed on thousand of Sony Ericsson, LG, Samsung, and ZTE devices, as well as on Amazon Kindle ebook readers.
  • It is also included with the PlayStation 3, PSP and Nintendo 3DS.
  • NetFront 4.2, released in late 2011, includes some basic HTML5 support, enhanced JavaScript performance, and an optional Flash Lite Player.
  • ACCESS has also released two WebKit-based spin-off browsers: NetFront Life Browser for smartphones and tablet and NetFront Browser NX for other devices, such as settop boxes.

User-Installable Browsers

Opera Mobile
  • Full browser supporting tab and cusor navigation that comes factory-preinstalled on some devices and is sometimes preinstalled by the carrier using an OEM license, replacing the default device browser.

Opera Mini
  • My Opera addiction continues: Opera Mini remains one of the best Java ME applications ever produced for feature phones. It is a free browser that works on almost any device, including feature phones from Nokia, LG, Samsung, and Sony, and smartphones such as Android and iOS devices (iPhone, iPod, iPad). It supports “the full web” as a proxied browser. This means that if you browse using Opera Mini, you won’t be accessing web‐ sites directly. Instead, the application will contact an Opera Mini server that will compress and pre-render the websites. This allows very quick full web navigation for every device, whether low-end or smartphone.
  • Version 4, it supports video playback, Ajax, offline reading and smart zooming.
  • Version 5, it also supports tabbed browsing, a password manager, and touch navigation in devices with touch support.
  • Version 6 and 7 include new rendering engines, more CSS3 support, and performance improvements.
  • In early 2013, Opera Mobile and Mini were merged into one browser on Android.
  • Version 14 of this browser is the first edition using a Chrominum engine instead of the previous Presto engine.

  • The Mozilla Foundation arrived a bit late to the mobile browser world. Mozilla offers a downloadable Firefox version for Android and MeeGo (the Nokia N9) and a working version for the Windows 8 Metro UI (optimized for tablets), and it has been updated in sync with the desktop version.

  • Dolphin (not to be confused with Samsung’s Dolfin) started as a pseudo-browser for Android, adding features to the default engine in the Android web view; this was soon followed by a similar iOS version. The latest versions of this application for Android replace the web view with their own WebKit-based engine, which has one of the top scores in terms of HTML5 compatibility and performance.

Baidu Browser
  • Baidu, the most-used search engine in China, has released a browser for Android- and Windows Phone–based devices.

  • SkyFire is a pseudo-browser available for iOS and Android with the particularity of delivering Flash and video content from its own servers, which transcode nonmobile content to be compatible with these platforms

Browser Overview

2013년 8월 1일 목요일

The first WebSocket.

HTML5의 주 기능 중에  “Websocket”이 있다는 건 웬만한 개발자라면 다 아는 사실이다. 하지만 사실상 적용된 사례는 드문 것 같다. 이유야 여러가지가 있겠지만 환경 부족과 개발자 인식의 부족인 문제인 것 같다. 또한 최근에는 모든 것이 다 되는(?) 모바일에 그 필요성이 없다고 생각 할 수도 있겠다.
“Websocket”의 특징을 말한다면 “Web브라우저를 기반으로 서버에서 클라이언트로 돈 안들이고 Message을 보낼수 있는 유일한 기술”라고 할 수 있을 것이다.

WebSocket개발에는 뭐가 필요할까?
WebSocket을 http”//로 시작하지 않고 ws://로 시작하는 URL형태를 가진다. 이는 HTTP 프로토콜을 기반으로 확장된 별도의 프로토콜을 가지기 때문이다.
“JSR 356(JavaTM API for WebSocket)”으로 명명된  WebSocket을 지원하는 WAS는 따로있으며
Tomcat의 경우 7이상, Jetty는 9이상의 버전부터 지원하고 있다.(다른 건 잘 모르겠습니다...)

Tomcat 7의 example로 포함된 WebSocket 예를 살펴보면

Server Side: EchoMessage
package websocket.echo;

import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.util.Date;

import javax.servlet.Servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;

import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;

public class EchoMessage extends WebSocketServlet implements Servlet {

private static final long serialVersionUID = 1L;
private volatile int byteBufSize;
private volatile int charBufSize;

public void init() throws ServletException {
byteBufSize = getInitParameterIntValue("byteBufferMaxSize", 2097152);
charBufSize = getInitParameterIntValue("charBufferMaxSize", 2097152);

public int getInitParameterIntValue(String name, int defaultValue) {
String val = this.getInitParameter(name);
int result;
if (null != val) {
try {
result = Integer.parseInt(val);
} catch (Exception x) {
result = defaultValue;
} else {
result = defaultValue;

return result;

protected StreamInbound createWebSocketInbound(String subProtocol,
HttpServletRequest request) {
return new EchoMessageInbound(byteBufSize, charBufSize);

private static final class EchoMessageInbound extends MessageInbound {

public EchoMessageInbound(int byteBufferMaxSize, int charBufferMaxSize) {

protected void onBinaryMessage(ByteBuffer message) throws IOException {

protected void onTextMessage(CharBuffer message) throws IOException {
System.out.println("From Client:" + message.toString());

protected void onClose(int status) {
System.out.println("종료:" + status);

protected void onOpen(WsOutbound outbound) {
System.out.println("연결:" + outbound);
CharBuffer buffer = CharBuffer.allocate(100);
try {
String string = "Current time:"+ new Date()+", WebSocket 연결 하였습니다.";

for (int i = 0; i < string.length(); i++) {

} catch (IOException e) {


onOpen, onClose 콜백 메서드을 오버라이드해서 적절하게 사용 가능합니다.(여기서는 로그만..)
Inbound 타입은 여러가지가 있어 적절하게 골라 사용하면 됩니다.

Client Side: echo.html
<!DOCTYPE html>
   <title>Apache Tomcat WebSocket Examples: Echo</title>
   <style type="text/css">
       #connect-container {
           float: left;
           width: 400px

       #connect-container div {
           padding: 5px;

       #console-container {
           float: left;
           margin-left: 15px;
           width: 400px;

       #console {
           border: 1px solid #CCCCCC;
           border-right-color: #999999;
           border-bottom-color: #999999;
           height: 170px;
           overflow-y: scroll;
           padding: 5px;
           width: 100%;

       #console p {
           padding: 0;
           margin: 0;
   <script type="text/javascript">
       var ws = null;

       function setConnected(connected) {
           document.getElementById('connect').disabled = connected;
           document.getElementById('disconnect').disabled = !connected;
           document.getElementById('echo').disabled = !connected;

       function connect() {
           var target = document.getElementById('target').value;
           if (target == '') {
               alert('Please select server side connection implementation.');
           if ('WebSocket' in window) {
               ws = new WebSocket(target);
           } else if ('MozWebSocket' in window) {
               ws = new MozWebSocket(target);
           } else {
               alert('WebSocket is not supported by this browser.');
           ws.onopen = function () {
               log('Info: WebSocket connection opened.');
           ws.onmessage = function (event) {
               log('Received: ' + event.data);
           ws.onclose = function () {
               log('Info: WebSocket connection closed.');

       function disconnect() {
           if (ws != null) {
               ws = null;

       function echo() {
           if (ws != null) {
               var message = document.getElementById('message').value;
               log('Sent: ' + message);
           } else {
               alert('WebSocket connection not established, please connect.');

       function updateTarget(target) {
           if (window.location.protocol == 'http:') {
               document.getElementById('target').value = 'ws://' + window.location.host + target;
           } else {
               document.getElementById('target').value = 'wss://' + window.location.host + target;

       function log(message) {
           var console = document.getElementById('console');
           var p = document.createElement('p');
           p.style.wordWrap = 'break-word';
           while (console.childNodes.length > 25) {
           console.scrollTop = console.scrollHeight;
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websockets rely on Javascript being enabled. Please enable
   Javascript and reload this page!</h2></noscript>
   <div id="connect-container">
           <span>Connect using:</span>
           <!-- echo example using streams on the server side -->
           <input id="radio1" type="radio" name="group1" value="/FirstWebSocket/websocket/echoStream"
                  onclick="updateTarget(this.value);"> <label for="radio1">streams</label>
           <!-- echo example using messages on the server side -->
           <input id="radio2" type="radio" name="group1" value="/FirstWebSocket/websocket/echoMessage"
                  onclick="updateTarget(this.value);"> <label for="radio2">messages</label>
           <input id="target" type="text" size="40" style="width: 350px"/>
           <button id="connect" onclick="connect();">Connect</button>
           <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
           <textarea id="message" style="width: 350px">Here is a message!</textarea>
           <button id="echo" onclick="echo();" disabled="disabled">Echo message</button>
   <div id="console-container">
       <div id="console"></div>

기타 배포에 필요한 Code
package websocket.echo;

import java.io.IOException;
import java.io.InputStream;
import java.io.Reader;

import javax.servlet.http.HttpServletRequest;

import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;

public class EchoStream extends WebSocketServlet {

   private static final long serialVersionUID = 1L;

   protected StreamInbound createWebSocketInbound(String subProtocol,
           HttpServletRequest request) {
       return new EchoStreamInbound();

   private static final class EchoStreamInbound extends StreamInbound {

       protected void onBinaryData(InputStream is) throws IOException {
           // Simply echo the data to back to the client.
           WsOutbound outbound = getWsOutbound();

           int i = is.read();
           while (i != -1) {
               i = is.read();


       protected void onTextData(Reader r) throws IOException {
           // Simply echo the data to back to the client.
           WsOutbound outbound = getWsOutbound();

           int c = r.read();
           while (c != -1) {
               outbound.writeTextData((char) c);
               c = r.read();


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"


만일 여러분이 Dashboard 형태의 Web Application을 만든다면 “WebSocket”은 강력한 도구가 될 것입니다.

그 외 브라우저 환경에서 알림을 받는다든지, 웹 화면 Refresh 없이 데이터 변경을 위한 모든 상황에도 활용이 가능할 것입니다.

블록체인 개요 및 오픈소스 동향

블록체인(block chain) 블록체인은 공공 거래장부이며 가상 화폐로 거래할때 발생할때 발생할 수 있는 해킹을 막는 기술. 분산 데이터베이스의 한 형태로, 지속적으로 성장하는 데이터 기록 리스트로서 분산 노드의 운영자에 의한 임의 조작이 불가...