12月 | 2019 | ESORO system design

SpringBootで作っているアプリに、テーブルメンテナンス画面が必要になったので、w2uiで作ってみる事にしました。
[blogcard url=”http://w2ui.com/web”]
テーブルメンテナンス画面といえば、一覧表示があって、選択したら登録フォームが表示されて、とか基本的な構成はどのテーブルも似たようなものですよね。w2uiのグリッドとフォームを使い、使いまわし出来るようjavascriptに機能を纏め、html側にテーブル固有の個別設定を寄せる事で、いろんなテーブルに対応出来るような形にしていきます。
w2uiのformは、urlを指定するとthis.save()でフォームをPOSTしてくれるようなのですが、ちょっと扱いにくいのでsaveを使わずにjsonでPOSTするようにしました。

eclipse上のリソース構成はこんな感じです。

javascriptです。ちょっと変更後のUIの動きがアバウトではありますが。。

//編集表示
function showEditForm(isEdit){
   $('#data-form').show(); 
   $('#data-grid').hide(); 
	w2ui['data_form'].clear();
	w2ui['data_form'].header = uiName;
	
	if(isEdit){
		var sel = w2ui['data_grid'].getSelection();
		if (sel.length == 1) {
        	var record = w2ui['data_grid'].get(sel[0]);
        	w2ui['data_form'].record = record;
		}
	}
    w2ui['data_form'].refresh();
}

//一覧表示
function showGrid(){
   $('#data-grid').show(); 
   $('#data-form').hide(); 
   $.ajax({
      headers:{ "Accept":"text/html,application/xhtml+xml,application/xml,application/json",},
      url:gridURL})
      .fail((jqXHR, textStatus, errorThrown) => {
         if( jqXHR.status == 404 ){
            w2alert('該当するデータはありません'+ jqXHR.responseText, uiName);
         }else{
            w2alert('データが取得出来ませんでした。 ' + jqXHR.status + jqXHR.responseText, uiName);
         }
      })
      .done((data, textStatus, jqXHR) => {
         if(data == ""){
            w2alert('該当する情報はありません', uiName);
            return;
         }
         var json=JSON.parse(data);
         var idx = 0;
         if(!Array.isArray(json)){
            json = JSON.parse('[' + JSON.stringify(json) + ']');
         }
         for(var item of json){
            idx++;
            item['recid']=idx;
         }
         w2ui['data_grid'].clear();
         w2ui['data_grid'].records = json;
         w2ui['data_grid'].refresh();
       });
}

w2utils.locale({
    "phrases" : {
        "Save": "閉じる",
        "Hide": "隠す",
        "Add New": "追加",
        "Edit": "編集",
        "Delete": "削除",
        "Confirmation": "確認",
        "Yes": "はい",
        "No": "いいえ",
        "Reload data in the list": "一覧を再表示します",
        "Edit selected record": "選択した設定を編集します",
        "Required field": "入力必須項目です",
        "Add new record": "新規に設定を追加します",
        "Delete selected records": "選択した設定を削除します",
        "Are you sure you want to delete selected records?": "選択した設定を削除します。よろしいですか？"
    }
});

//更新要求
function ajaxRequest(url, method, JSON, msg){
	var deferred = new $.Deferred();
 	w2confirm( msg +'します。よろしいですか？')
	.yes(function () { 
		$.ajax({
	        type: method,
	        url: url,
	        data: JSON,
	        contentType: 'application/JSON',
	        dataType : 'JSON',
	        scriptCharset: 'utf-8',
	        })
	        .fail((jqXHR, textStatus, errorThrown) => {
	           w2alert(msg + 'に失敗しました' + jqXHR.status + jqXHR.responseText, uiName).done(function () {
		        	deferred.resolve();
	           });
	        })
	        .done((data, textStatus, jqXHR) => {
	           w2alert(msg + 'しました', uiName).done(function () {
		        	deferred.resolve();
	           });
	        });
	});
 	return deferred;
}

$('#data-grid').w2grid({
    header: uiName,
    show: { header: true, toolbar: true, toolbarEdit: true, toolbarAdd: true, toolbarDelete: true, toolbarReload: true, toolbarColumns: false, toolbarSearch: false },
    name: 'data_grid',
    multiSelect : false,
    onReload: function(event) {
    	showGrid();
    },
    onAdd: function (event) {
    	showEditForm(false);
    },
    onEdit: function (event) {
    	showEditForm(true);
    },
    onDelete: function (event) {
    	event.preventDefault();
       	var record = this.get(this.getSelection());
    	var deleteJSON = JSON.stringify(record[0]);
    	var deferred = ajaxRequest(formURL, 'delete', deleteJSON, '削除');
    	deferred.done(function(){
    		setTimeout(function(){showGrid()},500);
    	});
    },
    columns: gridColumns,
});

$('#data-form').w2form({ 
    name  : 'data_form',
    header: uiName,
//    url   : formURL,
    fields: formColumns,
    actions: {
        '更新': function (event) {
        	if( this.validate(true).length == 0 ){
      	    	var postData = this.record;
      	    	var postJSON = JSON.stringify(postData);
      	    	ajaxRequest(formURL, 'post', postJSON, '更新');
        	}
        },
        'キャンセル': function (event) {
            showGrid();
            this.clear();
        }
    }
});

htmlにはjsで定義済の要素とか変数を載せます。メンテ対象のテーブルが増えた場合を考慮しツールバーも入れてます。なお、項目の設定はw2uiのドキュメントを見ながら調整していきますが、結構融通が利きますね。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Customer API Tool</title>
<script src="javascript/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="javascript/w2ui-1.5.rc1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/w2ui-1.5.rc1.min.css" />
</head>
<body>
<div id="toolbar" style="padding: 4px; border: 1px solid #dfdfdf; border-radius: 3px"></div>
<div id="data-grid" style="width: 100%; height: 500px;"></div>
<div id="data-form" style="width: 100%; height: 350px;"></div>
<script type="text/javascript">
//w2ui-tablemaintenance.js グリッド設定
var uiName = "顧客設定";  // 画面表示名
var gridURL = location.href + 'customers';  //グリッド表示データ取得URL
var gridColumns = [  // グリッド項目
                   { field: 'customerid', caption: '顧客ID', size: '35%' ,sortable: true, info: true},
                   { field: 'customerCode', caption: '顧客契約CD', size: '35%' ,sortable: true},
                   { field: 'customerName', caption: '顧客名 ', size: '130%' ,sortable: true},
                   { field: 'apiUrl', caption: 'API URL', size: '100%' ,sortable: true},
                   { field: 'user', caption: 'ユーザーID', size: '50%' ,sortable: true},
                   { field: 'password', caption: 'パスワード', size: '40%', render: 'password', sortable: true},
                   { field: 'mailadr', caption: '通知先メールアドレス', size: '100%' ,sortable: true},
                   { field: 'insdate', caption: '作成日時', size: '60%' ,sortable: true},
                   { field: 'updddate', caption: '更新日時', size: '60%' ,sortable: true},
                   ];  

//w2ui-tablemaintenance.js フォーム設定
var formURL = location.href + 'customers';  //フォーム更新URL
var formColumns = [ //フォーム項目
                   { field: 'customerid', type: 'text', required: true, html:{caption: '顧客ID', attr: 'size=5 maxlength=4'}},
                   { field: 'customerCode', type: 'text', required: true, html:{caption: '顧客契約CD', attr: 'size=10 maxlengh=8'}},
                   { field: 'customerName', type: 'text', required: true, html:{caption: '顧客名', attr: 'size=60 maxlengh=60' }},
                   { field: 'apiUrl', type: 'text', required: true, html:{caption: 'API URL', attr: 'size=60 maxlengh=60' }},
                   { field: 'user', caption: 'login ID', type: 'text', required: true, html:{caption: 'login ID', attr: 'size=20 maxlengh=20' }},
                   { field: 'password', caption: 'password', type: 'password', required: true, html:{caption: 'password', attr: 'size=20 maxlengh=20' }},
                   { field: 'mailadr', caption: '通知先メールアドレス', size: '100%' ,sortable: true, html:{caption: '通知先メールアドレス', attr: 'size=40 maxlengh=40' }},
                   ];

//ツールバー
$('#toolbar').w2toolbar({
    name: 'toolbar',
    tooltip: 'right',
    items: [{ type: 'break' },{ type: 'html', html: '<strong><font color="red">Customer API Tool</font></strong>'},
        { type: 'button', id: 'customerBT', group: '1',text: '顧客設定', icon: 'fa-wrench', tooltip: '顧客設定を参照・編集します',
        	onClick: function (event) { showGrid();}},
        { type: 'break' },
    ]
});

$(document).ready(function(){
	showGrid();
});

</script>
<script type="text/javascript" src="javascript/w2ui-tablemaintenance.js"></script>
</body>
</html>

最後にというか、本来なら最初にですがSpringBoot側は、w2uiの項目名と一致するエンティティクラス（ここではCustomer）と、CrudRepositoryを継承したインターフェースCustomerRepositoryを用意し、RESTコントローラーからアクセスさせるようにします。

@CrossOrigin
@RestController
public class CustomerController {
	private CustomerRepository repository;
	
	@Autowired
    public CustomerController(CustomerRepository repository) {
        this.repository = repository;
    }
	/**
	 * 顧客情報取得
	 * */
	@RequestMapping(value="/customers",method = RequestMethod.GET)
    private String getCustomers() throws Exception{
		
		ObjectMapper jsonMapper = new ObjectMapper();
		List<Customer> list = new ArrayList<>();
		StreamSupport.stream(Spliterators.spliteratorUnknownSize(repository.findAll().iterator(), 0),false).forEach(o -> list.add(o));
		return jsonMapper.writeValueAsString(list);
	}
	/**
	 * 顧客情報取得
	 * @param id customer id
	 * */
	@RequestMapping(value="/customers/{id}",method = RequestMethod.GET)
    private String getCustomers(@PathVariable(name = "id", required = false) String id
    		) throws Exception{
		ObjectMapper jsonMapper = new ObjectMapper();
		
		return jsonMapper.writeValueAsString(repository.findById(id));
	}
	/**
	 * 顧客情報更新
	 * */
	@RequestMapping(value="/customers",method = RequestMethod.POST)
	private Customer ｓetCustomers(@RequestBody Customer customer) throws Exception{
		if(customer.getInsdate()== null){
			customer.setInsdate(LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")));
		}
		customer.setUpdddate(LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")));
		return repository.save(customer);
	}
	/**
	 * 顧客情報削除
	 * */
	@RequestMapping(value="/customers",method = RequestMethod.DELETE)
    private String deleteCustomers(@RequestBody Customer customer) throws Exception{
		repository.deleteById(customer.getCustomerid());
		return customer.getCustomerid();
	}
}

で、出来た画面です。

なお、今回セキュリティ要件は考慮していません。。

　数年前にjavamailで作ったメールを受信した後の業務を自動化するツールを、今でもいろいろ機能追加をしているのですが、機能を追加・変更する時に、利用者から対象のメールをemlで提供してもらってテストしています。
　でも、outlookユーザーはmsgでしか提供出来ませんというので、emlへ変換したいのですが、ネットに転がってるツールを使ってもイマイチ変換できません。。
　なら作ろうと調べた所、javaならjotlmsgというのがあったのですが、日本語が文字化けします。
　結局、apache poiでoutlookのmsgを扱えるようなので、msgファイルを読み込んでemlファイルへ出力するという形にしました。

　実行時の引数を、msgファイルを入れたパス、emlファイルを吐き出すパスで指定します。

　何件かのmsgファイルを試した所、htmlで取れるケースが無かった。。メソッド的にはあるはずなのに。。
　その為、完全にemlファイルで再現出来るというレベルにはなりませんでしたが、本文テキストと添付ファイルはemlファイルに出力できているので、まあここまででよいかと。

package jp.esoro.mail.main;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Properties;

import javax.mail.MessagingException;
import javax.mail.Multipart;
import javax.mail.Session;
import javax.mail.internet.MimeBodyPart;
import javax.mail.internet.MimeMessage;
import javax.mail.internet.MimeMultipart;

import org.apache.commons.lang3.StringUtils;
import org.apache.poi.hsmf.MAPIMessage;
import org.apache.poi.hsmf.datatypes.AttachmentChunks;
import org.apache.poi.hsmf.exceptions.ChunkNotFoundException;

public class MsgtoEml {
	public static void main(String[] args)  {
		String msgdir = null;
		String emldir = null;
		for(String arg : args){å
			if(msgdir == null){
				msgdir = arg;
			}
			else{
				emldir = arg;
			}
		}
		if(msgdir == null || emldir == null){
			System.out.println("first arg is msg-file path. second arg is export-eml path");
			System.exit(100);
		}
    	File dir = new File(msgdir);
    	File[] files = dir.listFiles();  
    	
        Properties prop = new Properties();
	    Session session = Session.getDefaultInstance(prop, null);
	    
		for(File file: files){
			if( file.isDirectory() ) {
				continue;
			}
			if(StringUtils.endsWithIgnoreCase(file.getName(),"msg")){
				try {
					FileOutputStream fos = new FileOutputStream(emldir + "/" + StringUtils.replaceIgnoreCase(file.getName(), "msg", "eml"));
					
					MAPIMessage  msg = new MAPIMessage(file);
					MimeMessage eml = new MimeMessage(session);
					String headerValue = "";
					String headerKey = "";
					for(String head: msg.getHeaders()){
						if(head.startsWith(" ")){
							headerValue = headerValue + System.lineSeparator() +head;
						}
						else{
							if(headerKey.length() > 0){
								eml.setHeader(headerKey, headerValue);
							}
							String[] h = head.split(":");
							if(h.length > 1){
								headerKey = head.split(":")[0];
								headerValue = head.split(":")[1];
							}
						}
					}
					eml.setSubject(msg.getSubject(), "UTF-8");
					if(msg.getAttachmentFiles() != null){
						MimeBodyPart mbody = new MimeBodyPart();
						try {
							mbody.setContent(msg.getHtmlBody(),"text/html; charset=UTF-8");
						} catch (ChunkNotFoundException e) {
							mbody.setContent(msg.getTextBody(),"text/plain; charset=UTF-8");
						}
						Multipart mp = new MimeMultipart();
						mp.addBodyPart(mbody);
						for (AttachmentChunks chunks : msg.getAttachmentFiles()){
							MimeBodyPart mbAttachment = new MimeBodyPart();
							mbAttachment.setContent(chunks.getAttachData().getValue(), "application/octet-stream");
							mbAttachment.setFileName(chunks.getAttachFileName().getValue());
							mp.addBodyPart(mbAttachment);
						}
						eml.setContent(mp);
					}
					else{
						try {
						eml.setContent(msg.getHtmlBody(),"text/html; charset=UTF-8");
						} catch (ChunkNotFoundException e) {
							eml.setContent(msg.getTextBody(),"text/plain; charset=UTF-8");
						}
					}
					eml.setSentDate(msg.getMessageDate().getTime());
					eml.writeTo(fos);
					msg.close();
					fos.close();
					System.out.println("["+file.getName() + "] msg exchanged to eml");
					
				} catch (IOException | MessagingException | ChunkNotFoundException e) {
					System.out.println("[" +file.getName() + "] msg export to eml is fail ");
					e.printStackTrace();
				}
			}
		}
	}
}

日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

ESORO system design

月別アーカイブ: 2019年12月

w2uiでテーブルメンテナンス画面を作ってみる

msg形式のメールファイルをemlファイルに変換する