Posted title : 태그 : flickr
2009/01/18   [javaFX] 웹서비스 flickr이미지 검색 어플리케이션
2007/12/02   [MS popfly를 이용한 매쉬업 서비스 만들기] [1]
Posted
2009년 01월 18일 Posted title : [javaFX] 웹서비스 flickr이미지 검색 어플리케이션

 

학습 곡선 일지 4편: 웹 서비스 액세스 from http://blog.sdnkorea.com/blog/652

 

예제 그대로 실행해보려 했더니 1.0 대의 API에 없어지거나 변경된 메소드들이 많아서

컴파일이 되는 정도로만 수정

레이아웃은 SequentialCluster등을 몰로 바꾸어야 할 지 몰라서 그냥 좌표로 하드코딩 -_-

 

 

 

Main.fx

/*
* Main.fx
*
* Created on 2009. 1. 17, 오후 8:46:14
*/

package imagesearch;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.ext.swing.SwingLabel;
import javafx.ext.swing.SwingTextField;
import javafx.ext.swing.SwingList;
import javafx.ext.swing.SwingListItem;
import javafx.ext.swing.SwingIcon;
import javafx.ext.swing.SwingButton;
import javafx.scene.paint.Color;
import javax.swing.border.LineBorder;
import javafx.scene.Group ;

import java.lang.System;
/**
* @author bumjin
*/
var searchLabel = SwingLabel {
    text: "Search:"
    translateX: 10
    translateY: 0
};
var searchTextField = SwingTextField {
    columns: 30
    translateX: 150
    translateY: 0

};
var searchButton = SwingButton {
    text: "Search"
    font: Font {name: "Arial", size: 11}
    translateX: 500
    translateY: 0
    width: 80
    height: 22
}
var matchedImageLabel = SwingLabel {
    text: "Progress"
    translateX: 10
    translateY: 40
};
var matchedImagePB = TempProgressBar {
    width: 350
    translateX: 150
    translateY: 40
};

class PhotoList extends SwingList {
    public var onChange:function(photo:Photo);
    public var selectedPhoto:SwingListItem = bind selectedItem on replace {
        var photo = selectedPhoto.value as Photo;
        if(onChange!= null) {
            onChange(photo);
        }
    }

}

var thumbnailList = PhotoList {
    //hmax: Layout.UNLIMITED_SIZE
    //vmax: Layout.UNLIMITED_SIZE
    translateX: 10
    translateY: 80
    width: 300
    height: 230
    scrollable: true
};

//var selectedImageLabel = SwingLabel {
//    translateX: 10
//    translateY: 320
//    text: "Selected Image"
//};

//var selectedImagePB = TempProgressBar {
//    translateX: 150
//    translateY: 320
//};

var selectedImageDisplay = SwingLabel {
    //hmax: Layout.UNLIMITED_SIZE
    //vmax: Layout.UNLIMITED_SIZE
    translateX: 320
    translateY: 80
    width: 300
    height: 230
};

// configure the search field
var searcher = ImageSearcher {
    callback: function(photos:Photo[]):Void {
        thumbnailList.items =
        for(photo in photos) {
            SwingListItem {
                text: photo.title
                value: photo
            }
        };

        matchedImagePB.indeterminate = false;
    }
};

var search = function():Void {
    System.out.println("searching... {searchTextField.text}");
    matchedImagePB.indeterminate = true;
    searcher.search(searchTextField.text);
};

searchTextField.action=search;
searchButton.action=search;
// configure the image loader
var imageLoader = function(photo:Photo):Void {
    if(photo != null) {
        matchedImagePB.indeterminate = true;
        photo.loadFullImage(function():Void{
            selectedImageDisplay.icon = SwingIcon {
                image: photo.fullImage };
            matchedImagePB.indeterminate = false;
        });
    }
};

thumbnailList.onChange = imageLoader;

// WORK AROUNDS
selectedImageDisplay.getJComponent().setOpaque(true);
selectedImageDisplay.getJComponent().setBackground(Color.WHITE.getAWTColor());
selectedImageDisplay.getJComponent().setBorder(new LineBorder(Color.BLACK.getAWTColor(), 1, true));

Stage {
    title: "Application title"
    width: 650
    height: 400
    scene: Scene {
        fill: Color.WHITE
        //width: 600
        //height: 400
        content :[
            searchLabel
            , searchTextField
            , searchButton
            , matchedImageLabel
            , matchedImagePB
            , thumbnailList
//            , selectedImageLabel
//            , selectedImagePB
            , selectedImageDisplay]
    }
}

 

Photo.fx

/*
* Photo.fx
*
* Created on 2009. 1. 17, 오후 8:50:38
*/

package imagesearch;

/**
* @author bumjin
*/

import javafx.scene.image.*;
   import java.lang.*;
   import javax.swing.SwingUtilities;
   import javax.imageio.ImageIO;

   public class Photo {
       public var id:String;
       public var server:String;
       public var farm:String;
       public var title:String;
       public var secret:String;

       var image:Image = null;

       public var fullImage:Image = null;

       public def fullImageURL = bind "http://static.flickr.com/{server}/{id}_{secret}.jpg";

       public function loadFullImage(
               callback:function():Void
               ):Void {

           if(image == null) {
               var thread = new Thread(Runnable {
                   public override function run():Void {
                       var strImageUrl = "http://static.flickr.com/{server}/{id}_{secret}.jpg";
                       System.out.println("loading: {strImageUrl}");
                       var buffImg = ImageIO.read(new java.net.URL(strImageUrl));

                       SwingUtilities.invokeLater(Runnable {
                           public override function run():Void {
                               image = Image.fromBufferedImage(buffImg);
                               fullImage = image;
                               if(callback != null) {
                                   callback();
                               }
                           }
                       });

               }});
               thread.start();
           } else {
               callback();
           }

       }
   }

 

TempProgressBar.fx

 

/*
* TempProgressBar.fx
*
* Created on 2009. 1. 17, 오후 9:20:09
*/

package imagesearch;

/**
* @author bumjin
*/

import javafx.ext.swing.*;

    public class TempProgressBar extends SwingComponent {

    protected override function createJComponent():javax.swing.JComponent {
        return new javax.swing.JProgressBar();
    }
    public var indeterminate:Boolean = false on replace {
        var prog =
        this.getJComponent() as javax.swing.JProgressBar;
        prog.setIndeterminate(indeterminate);
}}

ImageSearcher.fx

/*
* ImageSearcher.fx
*
* Created on 2009. 1. 17, 오후 8:48:41
*/

package imagesearch;

/**
* @author bumjin
*/

import javax.xml.parsers.*;
import org.xml.sax.helpers.DefaultHandler;
import java.lang.System;
import java.lang.Thread;
import java.lang.Runnable;
import javax.swing.SwingUtilities;

   public class ImageSearcher {
       public var callback: function(photos:Photo[]):Void;

       public function search(search:String) {
           var thread = new Thread(Runnable {
               public override function run():Void {
                   var photos:Photo[];

                   var handler = DefaultHandler {
                       public override function startDocument() { }
                       public override function startElement(
                           uri:String,
                           localName:String,
                           qName:String ,
                           attributes:org.xml.sax.Attributes ) {
                           if(qName == "photo") {
                               var photo = Photo {
                                   id: attributes.getValue("id")
                                   server: attributes.getValue("server")
                                   farm: attributes.getValue("farm")
                                   title: attributes.getValue("title")
                                   secret: attributes.getValue("secret")
                               };
                               insert photo into photos;
                           }
                       }
                       public override function endElement(uri:String , localName:String , qName:String ) {  }
                       public override function endDocument() { }

                   };

                   var SEARCH_URL = "http://api.flickr.com/services/rest/?"
                   "method=flickr.photos.search";
                   var key = "a876089a0c597414e3f6136b68e957e1";
                   var MAX_IMAGES = 100;
                   var searchUrl = "{SEARCH_URL}&api_key={key}&per_page={MAX_IMAGES}&text={search}";
                   var url = new java.net.URL(searchUrl);
                   var is = url.openStream();
                   var factory = SAXParserFactory.newInstance();
                   var saxParser = factory.newSAXParser();
                   saxParser.parse(is, handler);

                   SwingUtilities.invokeLater(Runnable {
                           public override function run():Void {

                               if(callback != null) {
                                   callback(photos);
                               }
                           }
                   });
               }
           });
           thread.start();
       }
   }

Posted by 지니짱 | 2009/01/18 15:56 | 자바 | 트랙백
2007년 12월 02일 Posted title : [MS popfly를 이용한 매쉬업 서비스 만들기]

http://www.popfly.ms/

로그인 : msn 로그인 할 때의 아이디로 로그인

메뉴는 크게  Create stuff 와 My stuff 만 보면 될 듯하다.

Create stuff
 [Mashup]    : 매쉬업 작품을 만들때 사용한다.
My Stuff
 [projects]  : 자기가 만든 매쉬업 프로젝트 리스트가 출력된다.
 이곳에서 Share[공유]를 하게 되면 iframe 등으로 출판이 가능하다.
 [devloper keys] : 각 매쉬업 서비스들의 open api 들을 사용하려면 개별 application id들이
   필요한데 자기가 등록한 application id의 리스트를 담고 있다.


이제 매쉬업 서비스를 하나 만들어보자.

1. Create Stuff 의 MashUp 선택


왼쪽엔 사용할 수 있는 매쉬업 서비스들이 카테고리별로 나오고 있다.
오른쪽은 디자인 화면 정도라 생각하자.

무엇을 만들까? 
사진을 가져오는 서비스와 원하는 형태로 보여주는 서비스의 매쉬업을 해보자.

2. 사진을 가져오는 서비스는 Image & Video 에서 플리커를 선택하고

보여주는 서비스는 Display에서 Image Fader 을 선택하자. 각각 선택시 오른쪽 화면에 빨간 상자가 표시된다.

3. flickr상자의 파란 동그라미를 선택하여 Image Fader 의 파란 동그라미쪽으로 연결하자

. flickr의 이미지를 가져오는 서비스를 사용하려면 application id를 발급받아야 한다.

flickr의 설정을 변경하려면 스패너 아이콘을 선택하면 된다.


text는 가져올 이미지의 검색어 / number는 가져올 사진의 갯수를 의미한다.

다시 스패너를 선택하여 원래화면으로 돌아갈 수 있다.

이걸로 개발은 끝이다.

Preview 를 눌러서 사진들이 페이딩 되면서 다음 사진으로 넘어가는 당신의 매쉬업 서비스를
확인할 수 있다



Customize를 누르면 원래의 화면으로 돌아간다.

4. 자 잘만들었다고 생각되면 우측 상단의 Save 버튼을 누르자.


5. My Stuff 의 projects를 선택하자

6. 내 작품을 외부에 서비스하려면 Share를 눌러 외부로 출판을 할 수 있게 하자.


7. MashOut -> Embed it 을 선택했더니 다음과 같이 iframe 으로 추가할 수 있도록 링크를 만들어준다.


홈페이지에 위에서 만들어진 iframe으로 추가한 화면

 

 


 

Posted by 지니짱 | 2007/12/02 23:10 | 프로그래밍 | 트랙백 | 덧글(1)
◀ 이전 페이지 다음 페이지 ▶



지니랜드
by 지니랜드
카테고리
전체
프로그래밍
자바
- 이클립스
- 기타언어 (ruby, php)
웹기술 HTML javascript
컴퓨터
- Unix/Linux
- spring
- 테스팅
툴 프로그램 설치
- 버전관리
영어
동영상
영화 책
일상
여행
아무거나
재테크
펀드
미분류
이글루링크
소스코드위를 걷다.....
life logging
거북거북 월드 (ㅡ.-..
아직 열지 않은 선물
All about IT Trends
까먹지말자!
이규영 연예영화 블로그
ok_code 블러그
최근 등록된 덧글
하핫 그렇군요. 방문 AS..
by 지니랜드 at 12/23
네^^ 제가 직접 찾아올 ..
by 염지홍 at 12/14
카테고리별로 해당되는 ..
by 지니랜드 at 05/22
이 책들을 다 보면... ..
by 랑우 at 04/14
오지천사님 좋은 정보 ..
by 지니랜드 at 03/16
잠깐지나가다가 들렀습니..
by 오지천사 at 03/09
이런 우연이 ㅎㅎㅎ, 저도..
by 지니랜드 at 03/01
저랑 2개나 같이 들으셨군..
by 상욱 at 03/01
아 그러셨구나.. 오늘 못..
by 지니랜드 at 02/28
ㅎㅎㅎ JCO 오시나 보군요..
by 윤걸 at 02/26
FISH RSS
최근 등록된 트랙백
2009 자바 개발자 컨퍼런..
by cutewebi 희정냥★
도서이벤트 4탄 (통계의..
by Korean Healthlog
『프리젠테이션 젠』출간..
by acornLoft
뉴욕의 프로그래머
by The note of Legendre
[책] 뉴욕의 프로그래머
by lovesera.com: ART o..
[행사] 매쉬업 컨퍼런..
by lovesera.com: ART o..
[행사] 매쉬업 엑스..
by lovesera.com: ART o..
루비(Ruby) 설치 및..
by Happy egoist
개발시에 참고하자.. /..
by mcsong's languid aft..
이글루 파인더
라이프로그
프리젠테이션 젠
프리젠테이션 젠

초난감 기업의 조건
초난감 기업의 조건

Stick 스틱!
Stick 스틱!

당신의 기업을 시작하라
당신의 기업을 시작하라

테스트 주도 개발
테스트 주도 개발

조엘 온 소프트웨어
조엘 온 소프트웨어

Head First Design Patterns (Paperback)
Head First Design Patterns (Paperback)

실용예제로 배우는 웹 표준
실용예제로 배우는 웹 표준

아랑은 왜
아랑은 왜

천년전의 글로벌 CEO, 해상왕 장보고
천년전의 글로벌 CEO, 해상왕 장보고

마케팅 천재가 된 맥스
마케팅 천재가 된 맥스

태그
감귤 아이팟 모바일뱅킹 트위터이벤트 옷걸이 땡땡이 google 아이폰 hangulime underscore 독서대 IETab 제주도 크롬확장기능 하나은행 chromeos 에도가와란포 파일다운로드 commandpattern space dodreams 이벤트 추리소설 트위터 웨이브알리미 디자인패턴 커맨드패턴 크롬OS 퀴즈 하나nbank
rss

skin by 에셈