라이브러리 소프트웨어 공유 (一)

일찍이 디자인 회사의 라이브러리 소프트웨어 프로젝트를 받았는데 디자이너가 디자인을 할 때 자주 일부 소재를 참고해야 한다. 이런 소재는 각 디자이너가 분류별로 회사 서버에 업로드하여 모두에게 공유한다. 장기적으로 축적된 소재 수량은 수백 개의 분류, 수만 개의 사진, 총 수백 G의 문서에 달한다. 디자이너는 윈도우즈가 서버에 방문하여 소재를 조회하기 때문에 이상적인 소재를 찾기 어렵다.
 
구조의 선형에 있어서 BS와 CS 두 가지 모델이 있다. BS 모델은 유행하는 수법이지만 파일 업로드 기능은 사용자 체험이 좋지 않다고 생각하고 폴더에 따라 업로드하는 기능도 지원하지 않는다. 다른 한편, 클라이언트는 일련의 사용자 조작과 관련이 있고 브라우저 아래의 메뉴 개발도 힘들기 때문에 저는 더욱 전통적인 CS 방식으로 라이브러리를 실현했다.자바 스윙으로 라이브러리의 클라이언트를 실현하고 서비스 측도 상응하는 자바 서비스를 개발한다.그러나 스윙 개발은 나에게 있어서 비교적 큰 도전이다. 우선 실전 경험이 없고 많은 것을 지금 부추겨야 한다. 그 다음에 미공이 너무 많이 개입할 수 없기 때문에 많은 효과는 스스로 조정해야 한다.하지만 나는 한 마디로 믿는다. 그것은 누구도 태어나서 개발을 할 수 있는 것이 아니라 공부를 할 줄 모르기 때문에 도전은 결국 시간문제이고 어려운 것이 아니다.
 
그러면 갤러리의 가장 기본적인 수요는 한편으로는 빠른 검색을 할 수 있고 한편으로는 분류 관리와 사진 소재의 업로드를 지원할 수 있다는 것이다.이런 소재 중 많은 것이 매우 정교하고 아름다운 효과도이다. 단일 파일이 매우 크고 기본적으로 4, 5m 정도이며 가장 큰 것은 60여 m이다. 만약에 인터넷 아래의 빠른 검색을 지원하려면 축소판을 사용할 수밖에 없기 때문에 자연히 매우 우수한 축소판 소프트웨어 JMagick을 사용했다.
 
 
나는 몇 가지 문제를 열거하고 관련 방안을 결정했다.
 
어떻게 파일 업로드를 실현합니까?          
cs 방식을 선택한 이상 파일만 업로드할 수 있고 ftp의 방식도 고려했지만 서버는 업로드된 그림을 축소판 그림으로 만들어야 하기 때문에 ftp의 서버 이벤트는 잡을 수 없기 때문에 파일 전송을 간단하고 제어할 수 있는 것보다 못하다.그래서 나는 xsocket + 사용자 정의 전송 프로토콜을 사용하여 파일 업로드를 실현했다.
통신상 여러 가지 조작의 상호작용이 관련되기 때문에 예를 들어 축소 이미지 요청, 파일 업로드, 이미지 관리(삭제, 이름 바꾸기 등), 원시 이미지 요청(원시 이미지 다운로드) 등 일련의 조작이 있기 때문에 협의상 xml 방식을 사용했지만 현재로서는 xml의 포장과 해석이 실제적으로 너무 중량급이어서 json 데이터 구조로 바꾸는 것이 더욱 좋다.합리적인 이미지 패키지 데이터는 파일 이름, 파일 길이, 업로드할 그룹, 이미지 바이트 흐름 등을 포함해야 한다.
 
어떻게 그림의 전시를 통제합니까?
사용자가 빠른 검색을 하려면 한 화면에서 여러 폭(20폭)의 배열된 그림을 동시에 볼 수 있도록 해야 한다. 흥미를 느끼는 사람이 열려서 훑어본다. 그러면 여기서 축소 그림을 보여주는 것이 가장 좋다. 그러면 축소 그림은 배열과 불러오는 문제가 있다. 왜냐하면 그 자체의 그림 파일 크기가 일치하지 않기 때문이다. 축소 그림을 만든 후에 그림의 크기도 일치하지 않고 불러오는 속도가 느리며 순서대로 불러오는 것을 원하지 않는다.가장 좋은 효과는 한 화면을 열 때 그림이 먼저 빈 위치로 자리를 차지하고 각 미리 보기 그림이 독립적으로 불러오는 것이다. 서로 영향을 주지 않고 불러온 후에 자연히 표시되는 것이다
미리 보기 그림을 비동기적으로 보여야 하기 때문에 인터넷 통신에서 사진 요청을 하고 서버가 돌아오기를 기다리는 방식은 효과를 얻지 못한다. 그러면 나는 아예 모든 클라이언트에도 서버처럼 TCP 서비스를 설정한다. 클라이언트는 서버에 그림을 요청하고 돌아오기를 기다리지 않는다. 서버가 사진 요청을 받은 후에 클라이언트가 제공하는'클라이언트 서비스'정보에 따라해당 클라이언트가 있는 TCP 서비스 포트로 이미지 데이터를 전송합니다.어쨌든 클라이언트는 요청만 하면 됩니다.
 
 
 

public void showGridData() {     
        List<ImageDetailEntity> data = ImagePageBean.getInstance()
				.getCurrentQueryInfo();
        jPanel.removeAll();   //jPanel ， 

	int imgSize = data.size();

	int rows = imgSize / cols;
	if (imgSize % cols > 0) {
		rows = rows + 1;
	}
		
	jPanel.setLayout(new GridLayout(rows, cols));
		
	for (int i = 0; i < imgSize; i++) {
		ImageDetailEntity one = data.get(i);
		String id = one.getImgId();
		String oldfileName = one.getFileName();
		final JPanel pan = new JPanel();
		ImageGridPanel ip = ImageGridPanel.createEmptyPanel(one,
				cellSize + 20); //  
		imagePanelMap.put(id, ip);
			
		pan.setMaximumSize(new Dimension(cellSize, cellSize + 20));
		pan.add(ip);
		pan.setName(id);
		pan.setToolTipText(oldfileName);
			
		jPanel.add(pan);   // 
			
		pan.setDoubleBuffered(true);   // 
		pan.addMouseListener(new MouseListener() {

			public void mouseClicked(MouseEvent me) {
                                  ....// ， ， 
                         }

		});
		jPanel.add(pan);
		this.updateUI();
	}
	jPanel.setVisible(true);

}

 
 

public static ImageGridPanel createEmptyPanel(ImageDetailEntity idEntity,int panelSize) {
	ImageGridPanel panel = new ImageGridPanel();
	panel.panelSize = panelSize + 20;
	Dimension size = new Dimension(panelSize, panelSize + 20);
	panel.setPreferredSize(size);
	String overviewName = idEntity.getOverviewName();

         // ， ， 
	gridPanelMap.put(idEntity.getImgId(), panel);  

	try {
                // ， 
		ImagePanel.loadGridImage(idEntity.getImgId(), new File(
				DataConstants.ImageSaveDirectoryClient + overviewName),
				panelSize, panelSize);

	} catch (IOException e) {
		e.printStackTrace();
		DataConstants.printErrorLog(" Panel :" + e.getMessage());
	}
	return panel;
}

 
 

// updateUI ， ，g.drawXXX 
public void paintComponent(Graphics g) {
	if (img == null) {
		if (infoString == null) {
			g.drawString(" ", 30, 30);
		} else {
			g.drawString(infoString, 30, 30);
		}
		return;
	}
               
        // ， 
	g.setColor(Color.lightGray);
	int tmpSize = Math.max(img.getWidth(null), img.getHeight(null))
		+ padding * 2;
	g.drawRect(1, 1, tmpSize - 1, tmpSize - 1); //  
	g.drawRect(startLeft - 2, startTop - 2, img.getWidth(null) + 4, img
			.getHeight(null) + 4); //  
	g.drawLine(startLeft, startTop + img.getHeight(null) + 4, startLeft - 2
			+ img.getWidth(null) + 6, startTop + img.getHeight(null) + 4);
	g.drawLine(startLeft - 2 + img.getWidth(null) + 6, startTop, startLeft
			- 2 + img.getWidth(null) + 6, startTop + img.getHeight(null)
			+ 4);
         // panel
	if (img != null) {
		g.drawImage(img, startLeft, startTop, Color.RED, null); 
	} else {
		g.setColor(Color.red);
		g.drawString(" ", startLeft + 100, startTop + 100);
	}
        // 
	if (fileName != null && !"".equals(fileName)) {
		g.setColor(Color.black);
		int len1 = fileName.getBytes().length;
		int len2 = fileName.length();
		if (len1 != len2) {//  【 ： 】
			if (len2 <= 15) {
				int left = 8 + (150 - len2 * 5) / 2;
				g.drawString(fileName, left, tmpSize + 15);
			} else {
				g.drawString(fileName.substring(0, 12) + "...", 8,
						tmpSize + 15);
			}
		} else {
			int left = 0;
			if (len1 <= 30) {
				left = 8 + (150 - len1 * 5) / 2;
				g.drawString(fileName, left, tmpSize + 15);
			} else {
				g.drawString(fileName.substring(0, 27) + "...", 8,
						tmpSize + 15);
			}
		}
	}
}

 
이렇게 간단한 줄임말 그림 칸을 보여주면 완성된다.
그리고 재미있는 디테일이 많아요. 그 후에 박문회에서 계속 공유할 거예요. 관심 있는 학생들은 저에게 원본을 물어보고 교류를 환영할 수 있어요.
 
인터페이스 예제: 첨부 파일