iDempiereにangular2のUIを作る準備メモ その１

idempiere angular Eclipse

AngularJS 2.0でiDempiereのWebUIを作るための準備。
iDempiereの設定をしただけなので、この記事にはangularに関する内容は全くない。

iDempiereプラグイン新規作成

Eclipseのメニュー > File > New > Other... > Plug-in Development > Plug-in Project

Project name:
jp.idempiere.ui.angular

Source folder: WEB-INF/src

↓選択
an OSGi framework: Equinox

Generate an activator...
のチェックを外す。

Create plug-in using one of the templates
のチェックを外す。(外すべきか確認 TODO)

Finish
でとりあえずテストプラグイン作成完了。

plugin.xml

org.adempiere.ui.zk
のplugin.xmlを参考にして設定。

versionで、
1.0.0.qualifier
3.1.0.qualifier
で違いがある、要確認。

ZK AngularJS Demo

https://groups.google.com/forum/#!topic/idempiere/vpkCaHIUsag

ContextPath

/jp.idempiere.ui.angular/META-INF/MANIFEST.MF
に

Web-ContextPath: angular

を足す。
MANIFEST.MFをクリックして、MANIFEST.MFタブ

AngularServlet作成

Package Explorerから右クリックで、Class新規作成。
jp.idempiere.ui.angular
AngularServlet

package jp.idempiere.ui.angular;

import java.io.*;
import java.util.Properties;

import javax.servlet.*;
import javax.servlet.http.*;

import org.compiere.util.Env;
import org.compiere.model.MUser;
import org.compiere.model.MOrder;

public class AngularServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws IOException, ServletException {

        Properties ctx = Env.getCtx();
        MUser user = MUser.get(ctx);
        String langLogin = Env.getContext(ctx, Env.LANGUAGE);
        int order_id = 101;
        MOrder order = new MOrder(ctx, order_id, "jpidempiere_angular");
        String doc_no = (String) order.get_Value(MOrder.COLUMNNAME_DocumentNo);

        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.println("<html>");
        out.println("<head>");
        out.println("<title>Hello World!</title>");
        out.println("</head>");
        out.println("<body>");
        out.println("<h1>Hello angular World!</h1>");
        out.println("Doc No:" + doc_no);
        out.println("</body>");
        out.println("</html>");
    }
}

javax.servlet not resolved エラーが出るので、
/jp.idempiere.ui.angular/META-INF/MANIFEST.MF
をクリック、DepengencesタブのImported Packagesで、

javax.servlet
javax.servlet.annotation
javax.servlet.http
javax.servlet.jsp.resources
javax.servlet.resources

を追加、保存。
エラーが消えなかったら、プロジェクトを右クリックしてBuild Project。

web.xml

/jp.idempiere.ui.angular/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <display-name>iDempiere Web Client</display-name>

    <servlet>
        <description>Angular2 Test</description>
        <servlet-name>angular</servlet-name>
        <servlet-class>
            jp.idempiere.ui.angular.AngularServlet
        </servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>angular</servlet-name>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>

    <!-- /////////// -->
    <!-- Miscellaneous -->
    <session-config>
        <session-timeout>60</session-timeout>
    </session-config>

    <!-- MIME mapping -->
    <mime-mapping>
        <extension>doc</extension>
        <mime-type>application/vnd.ms-word</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>dsp</extension>
        <mime-type>text/html</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>gif</extension>
        <mime-type>image/gif</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>htm</extension>
        <mime-type>text/html</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>html</extension>
        <mime-type>text/html</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>jnlp</extension>
        <mime-type>application/x-java-jnlp-file</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>jpeg</extension>
        <mime-type>image/jpeg</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>jpg</extension>
        <mime-type>image/jpeg</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>js</extension>
        <mime-type>text/javascript</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>pdf</extension>
        <mime-type>application/pdf</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>png</extension>
        <mime-type>image/png</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>txt</extension>
        <mime-type>text/plain</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>xls</extension>
        <mime-type>application/vnd.ms-excel</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>xml</extension>
        <mime-type>text/xml</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>xul</extension>
        <mime-type>application/vnd.mozilla.xul-xml</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>zhtml</extension>
        <mime-type>text/html</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>zip</extension>
        <mime-type>application/x-zip</mime-type>
    </mime-mapping>
    <mime-mapping>
        <extension>zul</extension>
        <mime-type>text/html</mime-type>
    </mime-mapping>
    <welcome-file-list>
        <welcome-file>index.zul</welcome-file>
    </welcome-file-list>

<!--    <security-constraint> -->
<!--        <web-resource-collection> -->
<!--            <web-resource-name>all</web-resource-name> -->
<!--            <url-pattern>/*</url-pattern> -->
<!--        </web-resource-collection> -->
<!--        <user-data-constraint> -->
<!--            <transport-guarantee>CONFIDENTIAL</transport-guarantee> -->
<!--        </user-data-constraint> -->
<!--    </security-constraint> -->

    <!--env-entry>
       <env-entry-name>IDEMPIERE_HOME</env-entry-name>
       <env-entry-type>java.lang.String</env-entry-type>
       <env-entry-value>/opt/adempiere/</env-entry-value>
   </env-entry-->
</web-app>

プロジェクトの直下の階層にindex.htmlを作成して中に何か書く。

起動時の設定(server.product)

/org.adempiere.server-feature/server.product

Eclipse のメニュー Run > Run Configuratins...
でRun Configuratinsのウィンドウを開く。
Eclipse Application > server.product
Plug-ins Tab
で、
jp.idempiere.ui.angularをチェック、
Auto-Start:true
Start Level: 4 (Defaultでいいのかも)
Applyで保存。
RunでiDempiereサーバー実行。

とりあえず、表示された。

f:id:kubotti:20160309171825p:plain

JSONIC

この記事の手順を後でやったら、Servletでjsonicというものを使っていた。

jarを追加

ネット上から、jsonic-1.3.10.jarを取得。

Package Explorer > jp.idempiere.ui.angular 右クリック > Build Path > Configure Build Path...
Libraries > Add External JARs...

jp.idempiere.ui.angular\WEB-INF\lib\jsonic-1.3.10.jar

MANIFEST.MFに追加

MANIFEST.MFのRuntimeタブ > Classpath > New...

WEB-INF/lib/jsonic-1.3.10.jar

org.adempiere.base

MANIFEST.MFのDependenciesタブ
Required Plug-ins
Addでorg.adempiere.baseを足す。

今後の予定

何度もサーバーの起動・停止をしていたら起動時にエラーが出るようになった。

今後の予定は、
angular2を使って、
ログイン機能の実装
メニューツリーの表示
取引先一覧の表形式表示
をやってみたい。
つづく。