Mayaaが良い

今日、employeeのサンプルを作ってて、本当にMayaaは良いなーって思った。
やっぱり、参照画面と確認画面をいっしょくたにしてしまうより、別々にしたほうが良い感じになった。あと新規作成と更新も別けたほうがよいと思った。htmlファイル数は多くなるけど、Mayaaには強烈なコンポーネント化(insertプロセッサ)があるから問題なし。
今日は本当にMayaaが便利だなーと実感した日だった。


コンポーネント化すると紙芝居の見た目が、、、ってこともあるかもしれないけど、そこはAjaxというほどでは全然ないJavaScriptで十分カバーできるってことがわかった。
こんな感じでコンポーネントを呼び出すhtmlを書いて

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Windows-31j">
  <link href="../../css/global.css" rel="stylesheet" type="text/css"></link>
  <title id="pageTitle">
    Inquire - Employee Management Demo
  </title>
</head>
<body>

<div id="appBody">
  <div id="errorMessage"></div>
  <form method="GET" id="appForm">
    <div id="appFormView">
      <iframe src="formView.html" name=".appFormView"></iframe>
    </div>

    <input type="submit" value="previous" id="goPrevious"
            onclick="this.form.action = 'list.html';">
    <input type="submit" value="edit" id="goEdit"
            onclick="this.form.action = 'edit.html';">
    <input type="submit" value="delete" id="goDelete"
            onclick="this.form.action = 'deleteConfirm.html';">
  </form>
</div>

</body>
</html>

iframeでコンポーネントを表示しようとして、でもコンポーネントは下のようにonloadイベントで自分を呼び出したiframeを上書きしてしまう。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Windows-31j">
  <link href="../../css/global.css" rel="stylesheet" type="text/css"></link>
  <title id="pageTitle">
    FormView - Employee Management Demo
  </title>
<script type="text/javascript">
<!--
  window.onload = function() {
    if (window.name != "") {
      var name = window.name.substring(1);
      var to = window.parent.document.getElementById(name);
      var from = document.getElementById("component");
      to.innerHTML = from.innerHTML;
    }
  }
// -->
</script>
</head>
<body>

<div id="component">
  <table class="tablebg">
    <tr>
      <td class="label"><span id="labelEmpno">EmployeeNo</span></td>
      <td class="number">
        <span id="empno">7369</span>
      </td>
    </tr>
    <tr>
      <td class="label"><span id="labelEname">EmployeeName</span></td>
      <td class="text">
        <span id="ename">SMITH</span>
      </td>
    </tr>
    <tr>
      <td class="label"><span id="labelJob">Job</span></td>
      <td class="text">
        <span id="job">CLERK</span>
      </td>
    </tr>
    <tr>
      <td class="label"><span id="labelMgr">Manager</span></td>
      <td class="number">
        <span id="mgr">7902</span>
      </td>
    </tr>
    <tr>
      <td class="label"><span id="labelHiredate">HireDate</span></td>
      <td class="date">
        <span id="hiredate">1980/12/19</span>
      </td>
    </tr>
    <tr>
      <td class="label"><span id="labelSal">Salary</span></td>
      <td class="number">
        <span id="sal">800</span>
      </td>
    </tr>
    <tr>
      <td class="label"><span id="labelComm">Commission</span></td>
      <td class="number">
        <span id="comm"></span>
      </td>
    </tr>
    <tr>
      <td class="label"><span id="labelDeptno">Department</span></td>
      <td class="text">
        <span id="deptno">ACCOUNTING</span>
      </td>
    </tr>
  </table>
</div>

</body>
</html>

これで見た目はコンポーネント化する前といっしょ。デザイナーには優しくない気がするけど。。。

layoutはframeで雰囲気がでれば十分なので、紙芝居にもってこいかも。
Mayaaは良いなー