easylogic

Toolbar 정의

 var Toolbar = function (summernote) {
    var self = this;

    var $toolbar = summernote.layoutInfo.toolbar;

    this.initialize = function () {
      var $bold = renderer.button({

easylogic

Box 에 블럭을 담아보자.

• gist 와 비슷하게 되겠다.
• block 의 이름은 확장자가 무엇이냐에 따라 달려있다.
• block 의 이름이 바뀌면 자동으로 확장자를 검색해서 syntax highlighting 구조가 바뀐다.
• 실행할 수 있는 파일 확장자를 잘 지정해야할지도 모르겠군
• 모든 것은 sandbox 안에서 실행이 되어야 한다.
• sandbox 를 어떻게 만드나 ?

easylogic

summernote 는 현재 bootstrap 기반인데. 

ui 상관 없이 기존 기능을 쓸려면 어떻게 해야하는가 ? 

1. button
2. icon  
3. toolbar 
4. dialog 

가장 좋은 방법은 기본 소스에서 bootstrap 코드를 빼는 것이다. 

easylogic

일단 collector 를 만들어보자. 

모든 데이타는 json 으로 저장해보자. 

그럼 mongodb 가 필요할까?  그럴지도 모르겠다. 

그럼 무엇이 필요한지 생각해보자. 

1. 대상 

easylogic

각각의 기능에 맞는 DSL 이 필요하다. 

Collector 에 맞는 DSL 을 기획해보자. 

Html Get http://www.naver.com/news
params
Key value
Set
Key selector
Key {

easylogic

class Table {
  long field;
}

Table.find("id", 10);
Record r = QueryBuilder
            .select("$1.field", "$2.field2")
            .from(Table.class, Table2.class)
            .join("$1.field = $2.field")
            .where("$1.field = ", 10)

easylogic

import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;

/**
 * Created by yuni on 2014-12-18.
 */
public class Test {
    public static void main(String args[]) {
        long current = System.currentTimeMillis();

easylogic

String json = "{ 
  width : 800,
  height : 800,
  padding : 'empty',
  grid : {
    x : { type : 'block', target : 'name' }
  }
} ";

ChartBuilder c = new ChartBuilder(json);

easylogic

무엇이 필요한가? 

1. chart 
2. data 
3. ui 

data 를 기획하고 
chart 를 만드는 UI 로 해당 차트를 구성 

잘 만들어진 UI 구조가 필요하다. 

easylogic

Chart UI

• 차트를 코드로 생성 가능
• UI 로 생성 가능
• axis, brush, widget 조합
• drag and drop 으로 형태 구성
• 개별 객체 클릭할때 이벤트 설정이 필요함.
• 개별 객체는 코드로 입력한 json 과 서로 호환됨.
• 커스텀 grid, brush, widget 을 만들 수 있거나 또는 등록 가능해야함.
• 커스텀의 경우 버전 관리도 되면 좋을 듯 ?