テーブルのセルを「編集ボックス」と「値の表示」で入れ替えられるようにする

要ははてなグラフみたいな事がしたかった訳です。
http://d.hatena.ne.jp/kcha/20080619/1213854498の改善版です。

前回のコードは色々と間抜け

だと自分でも思います。最初から「編集」の領域と、「表示」の領域の2つをdivで入れておいて、片方のstyle属性をdisplay:noneしておけば簡単だったのに。


まずは指定箇所のHTMLコード。(必要な箇所しか書きません)

<table>
    <tr>
        <td>
        <div id="value" onclick="Up();">123</div>
        <div id="input" style="display:none;">
            <form style="display:inline;">
                <input type="text" id="text" value="123" onblur="Down();">
            </form>
        </div>
        </td>
    </tr>
</table>


んでjavascriptはこう。

function Up(){
    $("value").style.display = "none";
    $("input").style.display = "inline";

    $("text").select();
}
function Down(){
    $("value").innerHTML = $("text").value;

    $("value").style.display = "inline";
    $("input").style.display = "none";
}


HTML側のformタグですが、style属性にdisplay:inlineを打っておく必要がありました。でないと、入力欄が出た際に下方向に拡張されてしまいます。(IEでしか確認してませんが)


あいかわらずCSSの勉強が未だです。はよやらんと。

XMLHTTPRequestリファレンス

いままでリファレンスではなく、サンプルばかりを見てAjaxコードを組んでいたので、メモ。
MSDNのものと、
IXMLHTTPRequest | Microsoft Docs
W3Cのもの。
XMLHttpRequest Level 1


あと、恐らく標準に準拠しているであろう(まだよく見ていない)Google Codeがあったので、これもメモしておく。
http://code.google.com/p/xmlhttprequest/

テーブルのセルを入力欄を入力値の表示で切り替える

コードを書いてみました。セル(というか数値)をクリックすると入力欄に切り替わり、フォーカスを外すとその時の値で確定します。


が、何か格好悪い。
もっとスマートな方法がありそうですが。

<html>
<head>
<script type="text/javascript"><!--
function InputUp(cell){
    var valueCell = cell + "-value";
    var inputCell = cell + "-input";
    
    var text = document.getElementById(valueCell).innerHTML;
    document.getElementById(valueCell).innerHTML = '';
    
    var text = '<input type="text" id="input_area" onblur="InputDown(\'' + cell+ '\');" value="' + text + '">';
    //window.alert(text);
    document.getElementById(inputCell).innerHTML = text;
    document.getElementById("input_area").focus();
}

function InputDown(cell){
    var valueCell = cell + "-value";
    var inputCell = cell + "-input";
    
    var text = document.getElementById("input_area").value;
    
    document.getElementById(inputCell).innerHTML = '';
    document.getElementById(valueCell).innerHTML = text;
}
//--></script>
</head>
<body>
<table border="1" cellspacing="1">
    <tbody>
        <tr>
            <td>
                <span id="1-1-value" onclick="InputUp('1-1');">12</span><span id="1-1-input"></span>
            </td>
            <td>
                <span id="1-2-value" onclick="InputUp('1-2');">12</span><span id="1-2-input"></span>
            </td>
        </tr>
    </tbody>
</table>

</body>
</html>

あと、入力値を空で確定すると、領域(幅?)がなくなるので次回の編集に入れなくなる。
cssきちんとして、幅を取ればいいのだろうけど。


追記
パラグラフ単位でこのエントリを見ようとすると、javascript部分が消えるようです。日付単位で閲覧してください。

passしました。その弐。

UMTP Level1


UMTPのL1-T1を受験した後、早一ヶ月。
UMLの試験(UMTP)のL1-T2を受験してきました。
これでようやくLevel1のロゴが使用できます。(右上の小さな画像がそうです。)


さあ、次はLevel2かな。

Automation、昨日の続き

http://d.hatena.ne.jp/kcha/20080604/1212569893の続きです。
とりあえず、適当にVB2005で叩いてみた。NUnitをリンクしていないので、SetUpとTearDownも一連の動作としてつっこんであります。

Imports System.Windows.Automation

Module Module1

    Sub Main()
        Dim path As String = "..\..\..\UITest01\bin\Debug\UITest01.exe"
        Dim app As Process = Process.Start(path)

        System.Threading.Thread.Sleep(1000)

        Dim aeForm As AutomationElement = AutomationElement.FromHandle(app.MainWindowHandle)

        Dim textInput As AutomationElement = FindElement(aeForm, "TextBoxInput")
        Dim buttonAdd As AutomationElement = FindElement(aeForm, "ButtonAdd")
        Dim listbox As AutomationElement = FindElement(aeForm, "ListBoxOutput")

        '操作対象のコントロール・パターンを取得
        Dim vpTxtInput As ValuePattern = _
            CType(textInput.GetCurrentPattern(ValuePattern.Pattern), ValuePattern)
        Dim ipBtnAdd As InvokePattern = _
            CType(buttonAdd.GetCurrentPattern(InvokePattern.Pattern), InvokePattern)

        '一つ目の値を入力、追加ボタンを押下
        vpTxtInput.SetValue("わっち")
        ipBtnAdd.Invoke()

        '二つ目の値を入力、追加ボタンを押下
        vpTxtInput.SetValue("おおかみ")
        ipBtnAdd.Invoke()

        '三つ目の値を入力、追加ボタンを押下
        vpTxtInput.SetValue("萌え")
        ipBtnAdd.Invoke()

        'リストボックスの値を取得するため
        'AutomationElementCollectionオブジェクトを取得
        Dim aecListItems As AutomationElementCollection = _
            listbox.FindAll(TreeScope.Children, _
                            New PropertyCondition(AutomationElement.ControlTypeProperty, ControlType.ListItem))

        If Not "わっち" = aecListItems(0).Current.Name Then
            Console.WriteLine("一つ目の値")
        End If

        If Not "おおかみ" = aecListItems(1).Current.Name Then
            Console.WriteLine("二つ目の値")
        End If

        If Not "萌え" = aecListItems(2).Current.Name Then
            Console.WriteLine("三つ目の値")
        End If

        If Not 3 = aecListItems.Count Then
            Console.WriteLine("追加されたアイテム数")
        End If

        'teardown
        Dim wpForm As WindowPattern = CType(aeForm.GetCurrentPattern(WindowPattern.Pattern), WindowPattern)
        wpForm.Close()
    End Sub

    Public Function FindElement(ByRef rootElement As AutomationElement, _
                                ByVal automationID As String) As AutomationElement
        Dim element As AutomationElement = _
            rootElement.FindFirst(TreeScope.Element + TreeScope.Descendants, _
                                  New PropertyCondition(AutomationElement.AutomationIdProperty, automationID))

        Return element
    End Function

End Module

狼と香辛料積ん読が残ってるんだよな・・・(意味不明)