JSP 21. Fancytree


復習する


Cookieセッション
  • 共通点:ステータス情報を保持し、ステータスセキュリティがないことを保証する
  • セッションサーバ側に状態情報
  • を格納する.
  • Cookieステータス情報をクライアントに格納
    --Cookieはサーバ側
  • に再送信する必要がある
  • name、値はrequired
    特殊文字を含む符号化
  • を考慮する.
    マーシャルリン
  • 文字列を使用してデータを格納
    jsonとして保存し、marshalling unmarshalling
  • を行います.
    explorer
  • 最初は同期要求、
  • ファンシリーズuiプラグの追加から非同期要求
  • に変更

    2020.12.16水曜日


    https://github.com/mar10/fancytree/wiki
    非同期応答データはjsonに戻る必要がある
    画像の一部

    explorer.jsp


  • このセクションにデータを配布し、プラグイン
  • を追加します.
  • UI(ハードコーディング)
  • を先に構成しました
  • 交換して、まずFancytreeを構成します.
    その後、非同期要求データ
  • が必要となる.

    ServerSideExplorerServlet.java

    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    		//컨텍스트루트아래에 어떤 폴더들이 있는지 필요함
    		String base = req.getParameter("base"); //클라이언트가 원하는 경로의 값
    		if(StringUtils.isBlank(base)) 
    			base = "/"; //루트
    		
    		List<FileWrapper> list = makeData(base); //childern 만드는
    		
    //		File[] list = file.listFiles();
    		
    		//accept에 json여부에 따라 경로 달라지게
    		String accept = req.getHeader("Accept");
    		
    		//대소문자 구분 없음 .json포함되어있는지 보기 (json이 헤더에 있느냐)
    		if(StringUtils.containsIgnoreCase(accept, "json")) {
    			//마임셋팅
    			resp.setContentType("application/json;charset=UTF-8");
    			//마샬링,직렬화 - 응답데이터 기록할 stream 생성
    			try(
    				PrintWriter out = resp.getWriter();	
    			){
    				ObjectMapper mapper = new ObjectMapper();
    				mapper.writeValue(out, list);
    			}
    			//2020.12.16 수요일 json포함된 데이터는 마샬링해서 내보낼 수 있도록 수정
    		}else {//헤더에 json이 없으면 -- explorer.jsp에서 동기방식으로 처리했을때 사용했음
    			req.setAttribute("children", list); //이동하는 경우에만 scope 사용
    			String logicalView = "others/explorer"; //tiles.xml에 가봐서 definition name확인
    			req.getRequestDispatcher("/"+logicalView+".tiles").forward(req, resp);
    		}
    	}
    
    
  • jsonを含むデータを変更してmarshallingエクスポート
    ファン図面にはファイルオブジェクトが1つしかありません
    panshetleyというお客様がpanshetleyノードを使用したいと思っています.
  • ツリー使用時に内部で使用されるAPIタイプを検索!
    https://wwwendt.de/tech/fancytree/doc/jsdoc/Fancytree.html
    不動産の出所の参考
    https://wwwendt.de/tech/fancytree/doc/jsdoc/FancytreeNode.html
    fancytree構造を変更する場合、より多くのリファレンスメソッドの概要があれば、リファレンスサイトにアクセスしてください.
    属性:中拡張見てみましょう!FancytreeNodeのAdapterを作成し、Fancytreeを使用可能にします.
    nodeはファイルコンセプト
    fancytreeに必要なノードを挿入
    ノードがメモリに完全にロードされている場合はtrue(以前はfalse.サブ構造が作成されている場合はtrue)
    https://wwwendt.de/tech/fancytree/demo/
    Lazyをtrueに設定

    ServerSideExplorerServlet.java


    ここにTreeSetを書き込みます(以前はソート順がありませんでした)
    CTRL+SHIFT+T>SortedSetを開く
    異機種性、並べ替え可能
    Ctrl+SortedSet=>オープンインプリメンテーション=>Treesset
    強制作成者

    ServerSideExplorerServlet.java


    Treeset書き込み部
    	private List<FileWrapper> makeData(String base) {
    		String realPath = application.getRealPath(base);
    		File file = new File(realPath);
    		//어댑티 - 폴더 순서과정 코드
    		Set<String> resourcePaths = application.getResourcePaths(base); //children에 대한 가상경로, set이면 순서가 없음, 인덱스와키가 없음 ,set은 중복을 허용하지 않는다
    		List<FileWrapper> list = new ArrayList<>();
    		if(resourcePaths!=null) {
    			//어댑터
    			TreeSet<String> treeSet = new TreeSet<>(resourcePaths); //어댑티를 넘겨줘야한다 , 이름을 기준으로 정렬해버림 우리만의 정렬구조를 따로 잡아야한다 폴더 다음에 파일순으로
    			for(String relativePath : treeSet) {
    				String fileRealPath= application.getRealPath(relativePath); //가상경로 컨텍스트패스 이후 경로만 갖고있다
    				File child = new File(fileRealPath);
    				list.add(new FileWrapper(child, relativePath));
    			}
    			Collections.sort(list);//정렬조건 사용
    		}
    		return list; 
    	}
    

    UIでは、名前順に並べられています
    フォルダを先に上げましょう.

    FileWrapper.java



    Compareable implements(ソート機能)
    	@Override
    	public int compareTo(FileWrapper o) {//o라는 녀석과 비교
    		int ret = 0;
    		//폴더를 앞으로 파일은 뒤로
    		if(this.folder && !o.isFolder()) {
    			ret = -1;
    		}else if(!this.folder && o.isFolder()) {
    			//나는 파일인데 상대방이 폴더야
    			ret = 1;
    		}else {
    			//둘다 폴더이거나 둘다 파일이거나 , 이름으로 순서 결정 알파벳 대소문자 비교 
    			ret = this.title.toLowerCase().compareTo(o.getTitle());
    		}
    		return ret;//음수면 내가 앞으로 양수면 내가 뒤로 간다는 뜻
    	}

    ServerSideExplorerServlet.java


    に適用
    Webappで11個のフォルダを作成してブラウザをリフレッシュするのでfancytreeでは11個のフォルダは作成されません
    https://github.com/mar10/fancytree/wiki/ExtFilter
    https://wwwendt.de/tech/fancytree/demo/#sample-ext-filter.html
    2つのサイトリファレンス->フィルタを適用して検索