プログラミング: 2017年7月アーカイブ

これも xhtml が厳密ゆえのエラーだけど。

XHTMLソース中で、

<script src=https://secure.exsample.com?id=hoge&num=234></script>

みたいな書き方していると、

Error Traced[line: 187] Open quote is expected for attribute "src" associated with an element type "script"

というエラーになる。ダブルクォーテーションなどで URL を囲って無いのが問題のようだ。xhtml 厳しい。

URL をダブルクォーテーションで囲むと、次は URL 中の&が引っかかるので、これは URL エンコードして、最終的に、

<script src="https://secure.exsample.com?id=hoge%26num=234"></script>

のように修正する。

まあ、属性の値をダブルクォーテーションで囲むのはやっとけよ!と思うけど(あの、属性値をダブルクォーテーションで括らない人って、何か理由があるのかね?単なる「見た目が好き」というクソみたいな理由で、セキュリティとのトレードオフを行ったのかね?)

属性値はきちんとダブルクォーテーション(or シングルクォーテーション)で囲みましょう!
例えば、tr タグの高さを if 文で切り分けているところ。

Struts JSP
<logic:equal name="hoge1" property="flg1" value="true">
<tr height="30">
</logic:equal>
<logic:notEqual name="hoge1" property="flg1" value="true">
<tr height="50">
</logic:notEqual>
  <td>
    <table>
     <tr>
       <td>hogehoge1</td>
    </tr>
  <logic:notEqual name="hoge1" property="flg1" value="true">
    <tr>
      <td>hogehoge2</td>
    </tr>
  </logic:notEqual>
    </table>
  </td>
</tr>

Struts であればこんな感じで書かれている処理。
flg1 が真(True)ではなかった時は入れ子になった table の高さが(hogehoge2 を出力する分だけ)高くなるので、その外側の tr タグの height 属性を 50にしているんだね(True の場合は 30)

これを単純に、

JSF XHTML
<c:if test="#{form.flg1}">
<tr height="30">
</c:if>
<c:if test="#{!form.flg1}">
<tr height="50">
</c:if>
  <td>
    <table>
     <tr>
       <td>hogehoge1</td>
    </tr>
  <c:if test="#{!form.flg1}">
    <tr>
      <td>hogehoge2</td>
    </tr>
  </c:if>
    </table>
  </td>
</tr>

このように書くと、xhtml 的には、(<c:if>タグで分岐していることは無視され)<tr>タグが2つ(height="30" のものと、"50" のもの)あるのに、閉じタグ(</tr>)の数がひとつ足りないので、

Errir Traced[line: 323] The element type "tr" must be terminated by the matching end-tag "</tr>".
 
というエラーになる。厳密やねえ、xhtml。

なので、この場合は、以下のように </tr> までの部分をひとつにまとめて if 文による分岐を行なってやる必要がある。
ちょっと二重コーディングになって無駄な気もするけど・・・

JSF XHTML
<c:if test="#{form.flg1}">
<tr height="30">
  <td>
    <table>
      <tr>
        <td>hogehoge1</td>
      </tr>
    </table>
  </td>
</tr>
</c:if>
<c:if test="#{!form.flg1}">
<tr height="50">
  <td>
    <table>
      <tr>
        <td>hogehoge1</td>
      </tr>
      <tr>
        <td>hogehoge2</td>
      </tr>
    </table>
  </td>
</tr>
</c:if>

ちなみに、「今時 tr タグの height 属性なんか使ってるの?CSS に直さなきゃ駄目!」みたいな青臭い原理主義的意見は無しで(笑)そういうこと言う人、ほんま現場じゃ使いにくいポンコツなんだろうなあと思われ(笑)
今回は色々な条件をもとに高度な判断で height 属性の修正は行なっておりません(笑)

あ、高さの値を変数化して height="#{form.trHeight}" みたいにすれば・・・ってのは、Java プログラムも修正する必要が出て来るので、今回の対応としては NG で。

・・・と思ったんだけど、<c:set> タグってのがあるんだから、

 JSF XHTML
<c:if test="#{form.flg1}">
<c:set var="heightsize" value="30">
</c:if>
<c:if test="#{!form.flg1}">
<c:set var="heightsize" value="50">
</c:if>
<tr height="#{heightsize}">
 <td>
    <table>
     <tr>
       <td>hogehoge1</td>
    </tr>
  <c:if test="#{!form.flg1}">
    <tr>
      <td>hogehoge2</td>
    </tr>
  </c:if>
    </table>
  </td>
</tr>

って書けばいいだけか。これが一番すっきりだなあ。
Web アプリケーションの開発では、Base64 エンコード/デコードを息をするように使うので(ホント?)、Java 8から導入されたという Java 標準の Base64 クラスを使ってみた。

さっき、「試しに JSF の新規プロジェクトを作成してみた」というエントリーで作ったプロジェクトを改造。

1.helloBean.java

・Base64 クラスのインポートを追加。

import java.util.Base64;

・変換後の文字列を格納する変数 b64 と getter を設定。

    private String b64;

    public String getB64() {
return b64;
    }

・send クラスに Base64 エンコード処理を追加

        this.b64 = "Base64 Encode=> " + Base64.getEncoder().encodeToString(this.name.getBytes());

2.output.xhtml

・Base64 エンコード結果の表示を追加

        <h:outputText value="#{helloBean.b64}" />

と、まあ、こんな感じで。

実際に実行してみる。

20170706_netbean6.jpg

20170706_netbean7.jpg

おお、なんかエンコードされている。

「猪俣 性交渉」が「kpaWk4FAkKuM8I/C」に変換されたんやな。

試しに、Perl で Base64 デコードプログラム作って、「kpaWk4FAkKuM8I/C」をデコードしてみる。

プログラムソースはこんな感じ。

#!/usr/bin/perl
use MIME::Base64;
print "Word=> ";
$w = <STDIN>;
chomp $w;
$w = decode_base64($w);
print "Decode Word=> $w\n";

じゃ、実際に実行。

$ ./b64decode.pl
Word=> kpaWk4FAkKuM8I/C
Decode Word=> 猪俣 性交渉

おお!!ちゃんと「猪俣 性交渉」に戻ったやん!!
あ、「猪俣 公章」って打ったつもりが「猪俣 性交渉」になってた!!
取りあえず新規プロジェクトを作ってみる。


このサイトの手順に則って進める。
ただ、JSF の最新バージョンだと。このサイトのソースのままだと多分上手く動かない。
たまたまこのサイトに辿り着いた人は、下記の俺のソースを参考にしてくれたほうが良いかも。

まずは、新規プロジェクトの「入れ物」の作成。
上記ページに載っているとおり。

20170706_netbean1.jpg

最後にフレームワークを選択してプロジェクト作成終了。
借り物 PC なので、色々 Java フレームワークが入ってるけど、JavaServer Faces を選択する。

実際の開発もこのページに沿って進める。

1.バッキングビーンの作成(helloBean.java)

import java.io.Serializable;
import javax.annotation.ManagedBean;
import javax.annotation.PostConstruct;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@ManagedBean
@RequestScoped
@Named(value = "helloBean")
public class helloBean implements Serializable{

    private String name = "";
    private int age;

    public String getName() {
return name;
    }
    public void setName(String name) {
this.name = name;
    }

    public int getAge() {
return age;
    }
    public void setAge(int age) {
this.age = age;
    }

    private String msg;

    public String getMsg() {
return msg;
    }

    public helloBean() {
    }

    @PostConstruct
    public void init(){
    }

    public String send(){
        this.msg = "Hello " + this.name;
        return "output.xhtml";
    }
    
}

2.入力画面の作成(input.xhtml)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>JSFに触れてみよう</title>
        <meta charset="utf-8"/>
    </h:head>
    <h:body>
        <h:form>
            名前:<h:inputText value="#{helloBean.name}" />
            年齢:<h:inputText value="#{helloBean.age}" />
            <h:commandButton value="送信" action="#{helloBean.send()}" />
        </h:form>
    </h:body>
</html>

3.出力画面の作成(output.xhtml)

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>JSFに触れてみよう</title>
        <meta charset="utf-8"/>
    </h:head>
    <h:body>
        <h:outputText value="#{helloBean.msg}" />
    </h:body>
</html>

4.GlassFish の起動

5.テスト画面へのアクセス(http://localhost:8080/hello/faces/input.xhtml)

実際に Form に入力して動かしてみる。

20170706_netbean4.jpg

20170706_netbean5.jpg

ちゃんと動いた。
その他に今日はアノテーションについて勉強しました。
お客さんところの Java 開発のフレームワークが Struts から JavaServer Faces に変わったので、勉強のために、まずは開発環境の NetBeans IDE のインストールを行ってみる。

NetBeans IDE 8.2 ダウンロード」画面から落とした NetBeans(すべてサポート版)をインストールしてたら、なんか JDK が見つからないとか出てきた。

これ、借りてる PC で環境がよくわからないので with JDK な NetBeans を入れることにした。

JDK 8u131 with NetBeans 8.2」の画面から、(この PC、64bit CPU だけど 32bit Windows が入ってるみたい)

Windows x86 版(jdk-8u131-nb-8_2-windows-i586.exe)

を選択してダウンロード。
実行すると、JDK 8 Update 131 と NetBeans IDE 8.2 のインストールが始まる。

インストールの方は何の問題もなく終了。

さっそく起動して、新規プロジェクトを作ってみる。

20170705_netbean1.jpg

あれぇ~?プロジェクトの一覧に、「Web アプリケーション」が出てこないぞ?
Java EE が入ってないんだなあ・・・このあたりの Java のファイル構成的なものが未だによくわかってない(^^;

・・・ということで、最初に JDK が無いといって中断した「すべてサポート版 NetBeans」を再インストール。

今度はさっきのインストールで JDK は入っているので問題なくインストールは進む。

インストール終了後、新規プロジェクト作成画面を開いてみる。

20170705_netbean2.jpg

おお、今度はちゃんと「Java Web」がカテゴリに表示され、「Web アプリケーション」が選択できるぞ。

というわけで、今日はここまで。
事務所に帰って書類を一枚作らなきゃ・・・

このアーカイブについて

このページには、2017年7月以降に書かれたブログ記事のうちプログラミングカテゴリに属しているものが含まれています。

前のアーカイブはプログラミング: 2017年6月です。

次のアーカイブはプログラミング: 2018年2月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。


月別 アーカイブ

電気ウナギ的○○ mobile ver.

携帯版「電気ウナギ的○○」はこちら