Учетная запись разработки гибридного приложения Java / Flex

Это только первая версия, чтобы доказать, что я могу заставить ее работать. У меня большие планы на более поздние версии!

Зритель состоит из двух частей. Java-часть, которая обрабатывает весь хардкорный PDF-анализ и рендеринг, а вторая — Flex-интерфейс, который по сути представляет собой Flash GUI, работающий в браузере. Однако с появлением Adobe AIR нет проблем превратить его в настольное приложение.

Итак, как это работает внутри? Пользователь обращается к приложению Flex и выбирает файл, который хочет просмотреть. Затем этот файл загружается на сервер, на котором выполняется Java-часть приложения в форме веб-службы. Затем, используя Java и стороннюю библиотеку PDF, мы декодируем страницу, получаем необходимую информацию о файле и, наконец, генерируем изображение требуемой страницы файла, который мы хотим просмотреть. Затем ссылка на это изображение отправляется обратно во внешний интерфейс, где приложение Flex извлечет файл изображения с сервера и отобразит его пользователю.

Мы должны использовать стороннюю библиотеку PDF просто потому, что ни Flex, ни Java не обеспечивают требуемой функциональности. Есть несколько библиотек на выбор: я собираюсь использовать JPedal, потому что это простой в использовании API и отличные возможности рендеринга. Нам также понадобится веб-сервер для запуска нашего Java-кода, потому что мы собираемся представить его как веб-сервис, поэтому я буду использовать Tomcat.

Какие инструменты мне понадобятся?

• JPedal jar (больше информации на http://www.jpedal.org/download.php )

• Adobe Flex Builder 3 (60-дневная пробная версия доступна по адресу http://www.adobe.com/products/flex/ )

• Flex SDK (поставляется с Adobe Flex Builder 3)

• Java JDK 1.6 или 1.5 ( http://java.sun.com/javase/downloads/index.jsp )

• NetBeans 6.1 получает Web & Java EE ( http://download.netbeans.org/netbeans/6.1/final/ )

• Tomcat 6.0.16 (можно получить с NetBeans в комплекте)

• commons-io-1.4-bin ( http://commons.apache.org/downloads/download_io.cgi )

• commons-fileupload-1.2.1-bin ( http://commons.apache.org/downloads/download_fileupload.cgi )

Как читать этот урок?

Учебник разделен на две части:

• Java сторона вещей
• Гибкая сторона вещей

Затем части делятся на разделы, чтобы отразить структуру проекта. Я буду говорить о каждом из разделов, комментируя важные части исходного кода. В конце каждого раздела будет (если применимо) ссылка на файл со всем необходимым кодом в нем. Файлы исходного кода также будут содержать комментарии. Всякий раз, когда я упоминаю о том, что необходимо сделать в NetBeans, я выделяю этот текст синим цветом , тогда как операции, выполняемые в Flex Builder 3, выделяются зеленым цветом . И последнее, но не менее важное: я буду ссылаться на каталог установки tomcat как CATALINA_HOME в этом руководстве, а также в исходном коде.

Java сторона вещей

Как упоминалось ранее, для демонстрации функциональности компонентов, работающих на сервере, мы будем использовать веб-сервис. На следующем шаге я объясню, как настроить проект веб-приложения в NetBeans 6.1. Те из вас, кто знаком с этим аспектом Java EE, могут пропустить следующий раздел.

Создание веб-службы

В этом разделе я объясню, как настроить проект веб-приложения в NetBeans и добавить к нему веб-службу. Чтобы создать новый проект веб-приложения, нажмите: Файл-> Новый проект … появится окно (снимок экрана ниже), на этом этапе убедитесь, что вы выбрали Веб в категориях и Веб-приложение в проектах.

Выбрав правильные параметры, нажмите Далее . На следующем экране введите имя для проекта. В моем случае это JPedal_Server. Кроме того, нет необходимости менять что-либо еще в этом разделе. Нажмите Далее . На новом экране убедитесь, что Tomcat 6.0.16 выбран в качестве сервера, а Java EE 5 в качестве версии Java EE, как показано на снимке экрана ниже.

Сделав правильный выбор, нажмите Готово . Есть еще один экран, через который мы могли бы пройти, но он относится к платформам, доступным для нашего проекта, которые мы не будем использовать. После нажатия кнопки «Готово» вы заметите, что в главном окне среды IDE теперь отображается содержимое файла index.jsp . Следующим шагом является добавление веб-службы в наше приложение. Для этого вам нужно щелкнуть правой кнопкой мыши на главном узле проекта, выбрать New и в следующем меню выбрать Web Service .

После того, как вы щелкнете по значку веб-службы, вы увидите другое диалоговое окно. Здесь просто укажите имя веб-службы , в моем случае PDFImage, и пакет, скажем, org.maz. Далее нажмите Готово . В главном окне откроется новая вкладка, где вы увидите свою веб-службу в режиме конструктора.

Прежде чем мы начнем добавлять реальный код в наш сервис, нам нужно сделать еще одну вещь. Как я уже упоминал ранее, мы собираемся позволить библиотеке Java PDF справляться со всем сложным анализом и рендерингом PDF. Чтобы это сделать, нам нужно добавить банку JPedal в CLASSPATH проекта. В NetBeans это делается путем щелчка правой кнопкой мыши по главному узлу проекта и выбора «Свойства» в меню. После этого нас приветствует другая диалоговая панель, где мы должны выбрать библиотеки из списка категорий и затем нажать кнопку «Добавить JAR / папку». Это позволит нам найти и выбрать нужную банку.

Когда закончите, нажмите ОК .

Использование библиотеки PDF в Сервисе

После добавления JAR-файла JPedal в путь к классам у нас теперь будет доступ к большому количеству классов, которые помогут нам решить любые проблемы, связанные с PDF. Особенно нас интересует класс PdfDecoder . Этот класс позволяет нам (помимо прочего) открывать файл PDF, узнавать, сколько страниц у него есть, или просто получать изображение определенной страницы в документе. Давайте напишем нашу первую операцию нашего веб-сервиса. В моем случае я назову его firstStart, так как это будет первая операция, которая будет выполнена после полной загрузки файла. Для создания операции мы можем использовать мастер, предоставленный IDE (нажмите кнопку «Добавить операцию»), или мы можем просто ввести код вручную, например так:

// pdf handler object
private PdfDecoder pdf = new PdfDecoder();
// other global variables omitted
@WebMethod(operationName = "firstStart")
public String[] firstStart(String s) {
    if(pdf.isOpen()){
       pdf.closePdfFile();
    }
    try {
      pdf.openPdfFile("LOCATION_OF_UPLOADED_PDF");
    } catch (PdfException ex) {
      // report issue
    }
    // code skipped
    numberOfPages = pdf.getPageCount();
    // generate image of the first page, and provide the path (link) to it.
    String path = this.pdfPath(1);
    return new String[]{path,numberOfPages+""};
}

В приведенном выше коде строковым входным параметром является имя файла, выбранного пользователем на гибкой стороне. Инициализировав объект PDF в точке объявления, мы сначала проверяем, не открыли ли уже файл (эту операцию можно вызывать несколько раз в течение сеанса). Если это так, мы закрываем файл, удаляя все ссылки на него и подготавливая объект PDF для следующей операции. Следующим шагом мы открываем файл PDF. Это файл, который будет загружен на сервер со стороны
клиента. Где на сервере он будет размещен, зависит от того, как написан скрипт загрузки (подробнее об этом далее). Мы также можем попросить объект PDF сообщить нам, сколько страниц имеет данный файл. Мы будем использовать это для навигации на гибкой стороне. То, что мы также можем сделать, это вызвать другую операцию из той же службы,какpdfPath (int) . Это создаст для меня изображение первой страницы и вернет путь к нему. Наконец, мы можем вернуть путь и количество страниц, которые наш документ вернул в гибкое приложение.

Здесь я объясню, как мы превращаем страницу PDF-файла в изображение:

@WebMethod(operationName = "pdfPath")
public String pdfPath(@WebParam(name = "parameter") int parameter) {
    BufferedImage buff = null;
    try {
       buff = pdf.getPageAsImage(parameter);
    } catch (PdfException ex) {
       // log error
    }
    File f = new File(serverPath + "Img/"+ name + "/" + name + "_" + parameter + ".png");
    // code omitted
    try {
       ImageIO.write(buff, "png", f);
    } catch (IOException ex) {
       // log error
    }
    return f.getName();
}

Входной параметр int — это номер страницы, для которой мы хотим создать изображение. Здесь мы снова используем класс PdfDecoder . Короче говоря, JPedal возвращает требуемую страницу в форме объекта BufferedImage . Мы используем java ImageIO, чтобы записать объект buff в файл png и вернуть его имя.

Итак, мы разрешаем пользователям загружать файлы на сервер, а затем мы генерируем изображения (по 1 на страницу) и сохраняем их на нем. Последняя операция, которая нам нужна, — это операция, которая позаботится обо всем, когда мы закончим, cleanUp (String []) .

@WebMethod(operationName = "cleanUp")
public void cleanUp(@WebParam(name = "fileNameList") String[] fileNameList) {
    pdf.closePdfFile();
    for(int i=0;i<fileNameList.length;i++){
             // code to delete all redundant files
    }
}

Когда эта операция вызывается из Flex, в качестве входного параметра будет передан массив, содержащий имена загруженных файлов. В соответствии с соглашением, которое я использовал для именования сгенерированных изображений (fileName_pageNumber), я могу убедиться, что все избыточные файлы будут удалены после того, как пользователь закроет приложение. Здесь важно убедиться, что мы закрыли файл PDF (используя объект PDF).

Финальная версия PDFImage.java

Скрипт загрузки на стороне сервера

Итак, все это время мы предполагали, что наш файл PDF уже находится на сервере. Для этого нам понадобится скрипт загрузки на сервер, который сможет обработать запрос, поступающий со стороны клиента. Короче говоря, на стороне Flex мы используем объект URLRequest и передаем ему скрипт загрузки в качестве URL. Связь между Flex и Java затем обрабатывается внутренне, вдали от глаз пользователя. Все, что нам нужно сделать, это решить, как мы хотим обрабатывать поступающую информацию. Все это делается внутри скрипта загрузки. В нашем случае скрипт загрузки примет форму страницы JSP. Щелкните правой кнопкой мыши основной узел проекта и выберите новый, а затем JSP . Дайте ему имя, в моем случае fileUpload, Удалите содержимое шаблона вновь созданной страницы. Код скрипта будет выглядеть примерно так:

<%
    // code omitted
    List items = upload.parseRequest(request);
    Iterator iter = items.iterator();
    while (iter.hasNext()) {
    FileItem item = (FileItem) iter.next();

    //handling a normal form-field
    if (!item.isFormField()) {
        byte[] data = item.get();
        File f = new File("/CATALINA_HOME/webapps/ROOT/Flex/Pdf/"+ item.getName());
        FileOutputStream fileOutSt = null;
        try{
            fileOutSt = new FileOutputStream(f);
            fileOutSt.write(data);
        } catch (Exception e){
            e.printStackTrace();
            fileOutSt.close();
        }
            fileOutSt.close();
        }
    }
%>

Ключевым элементом здесь является объект «items», который инкапсулирует данные (и операции, которые вы можете над ними выполнять), отправленные со стороны Flex. Важно то , что код сценария выиграл ‘ т компиляции так , как это . Причина этого в том, что мы используем классы, которые не включены ни в Java, ни в Tomcat. Банки, содержащие эти классы, можно найти в пакетах « commons-io-1.4-bin » и « commons-fileupload-1.2.1-bin ». Эти jar-файлы должны быть добавлены в classpath проекта веб-приложения, чтобы скомпилировать код сценария загрузки (исходные и javadoc-файлы можно пропустить).

Окончательная версия fileUpload.jsp

crossdomain.xml: для чего он нужен?

Flash Player, среда выполнения для нашего приложения Flex, имеет множество функций безопасности. Один из них касается связи между различными машинами по сети и обмена данными между ними. Короче говоря, crossdomain.xml можно рассматривать как тип списка, который просматривается проигрывателем Flash. Если клиенты « адрес в этом списке , то обмен данными с сервером может иметь место, в противном случае она не может. Из-за характера нашего приложения мы хотим, чтобы каждый мог загружать файлы на наш сервер и использовать веб-сервис. Файл XML, который вы можете найти внизу этого раздела, был отформатирован для этой цели. Важно то, куда мы помещаем файл, он должен находиться в каталоге ROOT в вашем CATALINA_HOME.(см. первое изображение в разделе «Обтекание») .

<cross-domain-policy>
  <allow-http-request-headers-from domain="*" headers="*" secure="false" />
  <allow-access-from domain="*" secure="false" />
</cross-domain-policy>

Окончательная
версия crossdomain.xml

Завершение

Хорошо, предполагая , что мы «ве сделали все правильно , и у нас нет никаких ошибок в коде, приложение должно быть готово к развертыванию. Перед тем , как сделать это, давайте ‘ s убедитесь , что все файлы находятся в нужном месте , и что мы имеем структуру каталогов на сервере , который будет в состоянии держать нашу PDF и PNG файлов.

Перейдите в CATALINA_HOME (каталог установки tomcat). По умолчанию в Windows это «C: \ Program Files \ Apache Software Foundation \ Apache Tomcat 6.0.16», в OS X (Leopard) «/ Library / Tomcat», а в Linux его можно найти в «opt / Кот». Затем перейдите в подкаталог webapps и затем ROOT. Здесь создайте каталог с именем Flex и создайте там один с именем Pdf, а другой — Img. Эта структура должна содержаться в каталоге ROOT, так как она должна быть доступна через интернет-браузер. Структура каталогов должна выглядеть так:

Я предполагаю, что вы будете запускать веб-приложение из NetBeans. Щелкните правой кнопкой мыши узел проекта и выберите « Выполнить» . Сервер приложений запустит и развернет наш проект, запустив окно интернет-браузера по умолчанию и страницу с текстом «Hello World!» должен отображаться . Далее мы можем проверить, работает ли сам веб-сервис. Для этого разверните узел Веб-сервисы и выберите наш сервис PDFImage. Щелкните правой кнопкой мыши и выберите «Тестировать веб-сервис». Если это работало правильно , вы должны увидеть другой веб — страница , которую отображается , на этот раз , содержащий таблицу с информацией о веб — служб , вскрытых нашей веб — приложение. (изображение ниже)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Panel x="10" y="10" width="486" height="416" layout="absolute">
        <mx:Image id="img" x="10" y="10" width="446" height="326"/>
        <mx:Button x="195.5" y="344" label="Click Me!" click="doStuff()" />
    </mx:Panel>
    <mx:Script>
        <![CDATA[
        import mx.controls.Alert;
        // all action script code goes here
        private function doStuff(): void {
                mx.controls.Alert.show("This is a popup");
        }
        ]]>
    </mx:Script>
</mx:Application>

<mx:WebService id="ws" wsdl="http://localhost:8084/JPedalServer/PDFImage?wsdl"
fault="handleFirstStartFault(event)"
result="handleFirstStartResult(event)"/>
<mx:Script>
    <![CDATA[
    // some code omitted
    private function handleFirstStartFault(event:FaultEvent):void {
           // executed when something goes wrong
          Alert.show(event.fault.faultString);
    }
    private function handleFirstStartResult(event:ResultEvent):void {
           // executed when the web service returns a result
    }
    private function doStuff(): void {
            // call the firstStart method of the web service
           ws.firstStart("test.pdf");
    }
    ]]>
</mx:Script>

private function handleFirstStartResult(event:ResultEvent):void {
    // executed when the web service returns a result
    var a:ArrayCollection = event.result as ArrayCollection;
    // if return type was say String ten
    // var s:String = event.result as String;
    var imageName:String = ObjectUtil.toString(a.getItemAt(0));
    // get rid of the quote marks
    imageName = imageName.substring(1,imageName.length-1);
    // drop the '.png'
    dir = uploadFileName.substring(0,uploadFileName.length-4);
    img.source = serverPath + "Flex/Img/"+ dir+ "/"+ imageName;
    // here we handle the number of pages
    var numberOfPages:String = ObjectUtil.toString(a.getItemAt(1));
    var lenght:int = numberOfPages.length;
    numberOfPages = numberOfPages.substring(1,lenght-1);
    // maxPages is a global var in the Flex app
    this.maxPages = parseInt(numberOfPages);
}

var request:URLRequest = new URLRequest("http://localhost:8084/JPedalServer/fileUpload.jsp");
request.method = URLRequestMethod.POST;

var fr:FileReference = null;

public function browse():void {
   fr = new FileReference();
   var pdfFileter:FileFilter = new FileFilter("Pdf Files","*.pdf");
   fr.browse([pdfFileter]);
}

private function upload():void {
    var request:URLRequest = new URLRequest("http://localhost:8084/JPedalServer/fileUpload.jsp")
    request.method = URLRequestMethod.POST;
    fr.upload(request);
}