Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Encouragement of ListView

Encouragement of ListView

Introduction of Titanium 3.1 ListView

Ryutaro Miyashita

July 14, 2013
Tweet

More Decks by Ryutaro Miyashita

Other Decks in Technology

Transcript

  1. 5JUBOJVN΋͘΋͘ձJO/*'5:
    -JTU7JFXͷεεϝ
    5BCMF7JFXͱ͸Ұମͳʹ͕ҟͳΔͷ͔

    View Slide

  2. 3ZVUBSP.JZBTIJUB
    $IBU8PSL.PCJMF"QQ&OHJOFFS
    5JUBOJVN.PCJMFϢʔβʔձॻه



    SZVHPP@
    SZVUBSPNJZBTIJUB
    SZVHPP
     JNUIJOLFSOFU
    5JUBOJVN΋͘΋͘ձJO/*'5:

    View Slide

  3. 5JUBOJVN΋͘΋͘ձJO/*'5:
    ࠓळɺϞόΠϧΞϓϦΛશ໘ϦχϡʔΞϧ
    5JUBOJVN΋͘΋͘ձJO/*'5:

    View Slide

  4. ύϑΥʔϚϯε
    5JUBOJVN΋͘΋͘ձJO/*'5:
    5JUBOJVNΞϓϦͰ೰·͞ΕΔ՝୊ͷͭ

    View Slide

  5. 5J6*5BCMF7JFX
    5JUBOJVN΋͘΋͘ձJO/*'5:
    ΈΜͳେ޷͖͍ͬͺ͍࢖͏

    View Slide

  6. ࣮͸ੑೳʷ
    5JUBOJVN΋͘΋͘ձJO/*'5:
    ෼͔ͬͯΔͳ "OESPJEͳ

    View Slide

  7. Ȓ
    5JUBOJVN΋͘΋͘ձJO/*'5:
    ࢒೦ɺզʑͷ5JUBOJVN͸ऴΘͬͯ͠·ͬͨ

    View Slide

  8. 5JUBOJVN΋͘΋͘ձJO/*'5:
    ʘʘaaᵋ Т
    ʯʗʗ
    ͦΜͳ5JUBOJVNʹٹੈओ͕
    ʘʘaaᵋ Т
    ʯʗʗ
    5JUBOJVN΋͘΋͘ձJO/*'5:
    ͦΜͳ5JUBOJVNʹٹੈओ͕

    View Slide

  9. 5J6*-JTU7JFX
    5JUBOJVN΋͘΋͘ձJO/*'5:
    5JUBOJVNYʹݱΕͨ৽͍͠"1*

    View Slide

  10. -JTU7JFX͸୔ࢁͷSPXΛ࣋ͭ৔߹ੑೳ͕ྑ͍
    5JUBOJVN΋͘΋͘ձJO/*'5:
    “ListView is designed to perform better
    with a large number of rows.”

    View Slide

  11. Ξϓϩʔνͷҧ͍
    5JUBOJVN΋͘΋͘ձJO/*'5:
    -JTU7JFXͱ5BCMF7JFXͷҧ͍

    View Slide

  12. σʔλͱϏϡʔ
    5JUBOJVN΋͘΋͘ձJO/*'5:
    -JTU7JFX͸σʔλࢦ޲5BCMF7JFX͸Ϗϡʔࢦ޲

    View Slide

  13. 5JUBOJVN΋͘΋͘ձJO/*'5:

    View Slide

  14. 5JUBOJVN΋͘΋͘ձJO/*'5:
    σʔλ Ϗϡʔ
    ৘ใͷҰཡ ԿΒ͔ͷը໘

    View Slide

  15. l-BCFM΍*NBHF7JFXΛஔ͍ͨ
    5BCMF7JFX3PXΛ୔ࢁ࡞ͬͯ
    5BCMF7JFXͰදࣔ͢Δz
    5BCMF7JFXͷΞϓϩʔν
    5JUBOJVN΋͘΋͘ձJO/*'5:

    View Slide

  16. l-BCFM΍*NBHF7JFXΛஔ͍ͨ
    5BCMF7JFX3PXΛ୔ࢁ࡞ͬͯ
    5BCMF7JFXͰදࣔ͢Δz
    5BCMF7JFXͷΞϓϩʔν
    5JUBOJVN΋͘΋͘ձJO/*'5:
    ύϑΥʔϚϯεͷϘτϧωοΫ

    View Slide

  17. l-JTU7JFXͷ্Ͱ
    -BCFM΍*NBHF7JFXΛ
    Ͳ͏දࣔ͢Δͷ͔Λ༧ΊܾΊ͓ͯ͘z
    -JTU7JFXͷΞϓϩʔν
    5JUBOJVN΋͘΋͘ձJO/*'5:

    View Slide

  18. l-JTU7JFXͷ্Ͱ
    -BCFM΍*NBHF7JFXΛ
    Ͳ͏දࣔ͢Δͷ͔Λ༧ΊܾΊ͓ͯ͘z
    -JTU7JFXͷΞϓϩʔν
    ΞΠςϜςϯϓϨʔτ
    5JUBOJVN΋͘΋͘ձJO/*'5:

    View Slide

  19. ίʔυΛݟͤΖ
    5JUBOJVN΋͘΋͘ձJO/*'5:
    ͝΋ͬͱ΋

    View Slide

  20. var plain_template = {
    childTemplates: [{
    type: "Ti.UI.Label",
    bindId: "myLabel",
    properties: { left: "10dp" },
    events: { click: reportFunction }
    }]
    };
    var list = Ti.UI.createListView({
    templates: { plain: plain_template },
    defaultItemTemplate: "plain"
    });
    5JUBOJVN΋͘΋͘ձJO/*'5:
    ςϯϓϨʔτͷઃఆ

    View Slide

  21. var data = [];
    [1,2,3,4,5].forEach(function (idx) {
    data.push({
    myLabel: { text: "Row #" + idx },
    properties: { itemId: "item" + idx }
    });
    });
    var section = Ti.UI.createListSection({
    items: data
    });
    list.sections = [section];
    5JUBOJVN΋͘΋͘ձJO/*'5:
    ςϯϓϨʔτΛ࢖ͬͯΞΠςϜΛ࡞Δ

    View Slide

  22. 5JUBOJVN΋͘΋͘ձJO/*'5:
    list.addEventListener(
    "itemclick",
    function (e) {
    // Get clicked item reference
    var item = e.section.getItemAt(e.itemIndex);
    console.log(item.properties.itemId);
    // Replace clicked item
    e.section.UpdateItemAt(e.itemIndex, item);
    }
    );
    -JTU7JFXͷΠϕϯτϋϯυϦϯά

    View Slide

  23. -JTU7JFXͱ͸
    ܾΊͨͱ͓ΓͷܗͰσʔλΛදࣔͤ͞ΔͨΊͷ΋ͷ
    5JUBOJVN΋͘΋͘ձJO/*'5:

    View Slide

  24. ύϑΥʔϚϯε͸
    ͦΕͰɺ5BCMF7JFXΑΓ΋ੑೳ͸ྑ͍ͷ͔Ͷ
    5JUBOJVN΋͘΋͘ձJO/*'5:

    View Slide

  25. 5JUBOJVN΋͘΋͘ձJO/*'5:
    3PXT-JTU5BCMF
    3PXΛ༻ҙ͢Δ࣌ؒಈ࡞ͷػහੑ
    .Z5BTL
    3FOEFSJOHUJNFBU&QPDI NT

    *NBHF7JFX -BCFM
    -BCFM
    5BCMF7JFX3PX

    View Slide

  26. 5JUBOJVN΋͘΋͘ձJO/*'5:
    )5$%FTJSF4
    "OESPJE
    Y
    4OBQESBHPO()[
    .#3".
    (PPHMF/FYVT4
    ˺

    View Slide

  27. 5JUBOJVN΋͘΋͘ձJO/*'5:

    View Slide

  28. NT
    Y
    NT
    Y
    1SFQBSF 1SFQBSF
    5JUBOJVN΋͘΋͘ձJO/*'5:

    View Slide


  29. 5JUBOJVN΋͘΋͘ձJO/*'5:
    ੌ͍
    5JUBOJVN΋͘΋͘ձJO/*'5:
    ੌ͍
    "OESPJEͰ΋௒଎͍
    "OESPJEͰ΋௒଎͍

    View Slide

  30. -JTU7JFX 5BCMF7JFX ˚
    "OESPJE Y
    J1IPOF
    4JNVMBUPS
    Y
    J1IPOF Y
    ୯Ґ
    5JUBOJVN΋͘΋͘ձJO/*'5:

    View Slide



  31. 5JUBOJVN΋͘΋͘ձJO/*'5:
    J04΋ޮՌൈ܈
    J04"OESPJEڞʹ଎͍
    J04΋ޮՌൈ܈
    5JUBOJVN΋͘΋͘ձJO/*'5:
    J04"OESPJEڞʹ଎͍

    View Slide

  32. ࢖ͬͨίʔυ
    5JUBOJVN΋͘΋͘ձJO/*'5:
    IUUQTHJUIVCDPNSZVHPP5JUBOJVN-JTU7JFX4BNQMF

    View Slide

  33. 5JUBOJVN΋͘΋͘ձJO/*'5:
    ʘʘaaᵋ Т
    ʯʗʗ
    ͜ΕͰղܾͩ
    ʘʘaaᵋ Т
    ʯʗʗ
    5JUBOJVN΋͘΋͘ձJO/*'5:
    ͜ΕͰղܾͩ

    View Slide

  34. éĕÕǤʌñʞìè
    5JUBOJVN΋͘΋͘ձJO/*'5:
    ΋ͪΖΜɺ·ͩɺશ͕ͯղܾ͢ΔΘ͚Ͱ͸ͳ͍

    View Slide

  35. 5JUBOJVN΋͘΋͘ձJO/*'5:
    ࣮͸ɺ·ͩ·ͩ"1*͕଍Γͯͳ͍
    “A complete list of implemented features is
    schedule for the next list version,
    which is planned for Release 3.2.0.”

    View Slide

  36. 5JUBOJVN΋͘΋͘ձJO/*'5:
    1SPQT
    FEJUJOHFEJUBCMF
    TFQBSBUPS$PMPS4UZMF
    &WFOUT
    ESBHTUBSUESBHFOE
    TDSPMMTDSPMMFOE
    IFBEFS7JFXGPPUFS7JFX EFMFUFNPWF
    ʜ ʜ

    View Slide

  37. 5JUBOJVN
    5JUBOJVN΋͘΋͘ձJO/*'5:
    Β͍͠
    8BJUJOH

    View Slide

  38. ·ͱΊ
    5JUBOJVN΋͘΋͘ձJO/*'5:
    $PODMVTJPO

    View Slide

  39. -JTU7JFX͸଎͍
    5JUBOJVN΋͘΋͘ձJO/*'5:
    5BCMF7JFXͷYY͙Β͍଎͍

    View Slide

  40. ͪΐͬͱ೉͍͠
    5JUBOJVN΋͘΋͘ձJO/*'5:
    5BCMF7JFX΄Ͳͷॊೈੑ͸ແ͍

    View Slide

  41. ·࣮ͩ૷్த
    5JUBOJVN΋͘΋͘ձJO/*'5:
    5JUBOJVNͰҰ௨Γͷ࣮૷͕ऴΘΔΒ͍͠

    View Slide

  42. Ͱ΋଎͍
    5JUBOJVN΋͘΋͘ձJO/*'5:
    ෳࡶͳॲཧΛ࢖Θͳ͚Ε͹े෼ʹ࢖͑Δ

    View Slide

  43. ࢼ͢Ձ஋͋Γ
    5JUBOJVN΋͘΋͘ձJO/*'5:
    5BCMF7JFX͚͔ͩ͠࢖Θͳ͍ͷ͸໪ମͳ͍

    View Slide

  44. CODESTRONG !
    5JUBOJVN΋͘΋͘ձJO/*'5:

    View Slide