MTDDC Meetup TOKYO 2016

631 views

Published on

MT7を先取り!? DataAPI と Riot.js で作るユーザフレンドリーなダッシュボード

MTの管理画面カスタマイズといえば MTAppjQuery と紹介いただくことが多くなりました。 しかし案件ごとにDataAPIを使ったオリジナルダッシュボードを作れば使いやすさはどこまでよくなるのでしょう? jQuery に変わるとも言われるJSフレームワークが多く出てきている中、DataAPIとRiot.js でオリジナルダッシュボードを作って検証してみました

Published in: Internet
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
631
On SlideShare
0
From Embeds
0
Number of Embeds
490
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

MTDDC Meetup TOKYO 2016

  1. 1. @mersy
  2. 2.
  3. 3. NZ New !!
  4. 4. ƭ ƭ
  5. 5. 
 NEW
  6. 6.
  7. 7.
  8. 8.
  9. 9.
  10. 10. 
 ⭐
 
 
 ⭐
 ⭐
  11. 11. <mt:setvarblock name="scheduled_button_title"><__trans phrase="Save this [_1]" params="<mt:var name="object_label">"></mt:setvarblock> <mtapp:setting id="status" label="<__trans phrase="Status">" label_class="top-label" help_page="entries" help_section="status"> <mt:unless name="sitepath_configured"> <input type="hidden" name="status" id="status" value="1" /> <span><__trans phrase="Unpublished"></span> <span class="alert-warning-inline"><img src="<$mt:var name="static_uri"$>images/status_icons/warning.gif" alt="<__trans
  12. 12. sub foo { my ($cb, $app, $param, $tmpl) = @_; ... $innerHTML =~ s/(,s)$//; my $pointer_field = $tmpl->getElementById('ip'); my $label = '<__trans_section component="commentrating"><__trans phrase="Rating"></__trans_section>'; my $hint = '<__trans_section component="commentrating"><__trans phrase="It is the value that evaluated a entry with five phases."></ __trans_section>'; my $nodeset = $tmpl->createElement('app:setting', { id => 'rating', label => $label, hint => $hint, show_hint => 0 }); $nodeset->innerHTML($innerHTML); 

  13. 13.
  14. 14.
  15. 15.
  16. 16. 
 

  17. 17.
  18. 18.
  19. 19.
  20. 20.
  21. 21. ‣ ‣
  22. 22. ‣ 
 ‣ 
 ‣ 

  23. 23. ‣ ‣ ‣
  24. 24. 
 <mtapp-entries
 table_label=" "
 site_id="1"
 api_limit="20"
 api_fields=“id,title,tags"></mtapp- entries>
  25. 25. 
 
 <mtapp-form-entry></mtapp-form-entry>

  26. 26. <!-- --> <mtapp-entries> <table class="table table-bordered bp-view" id="{ table_id }"> <thead class="thead-inverse"> <tr>...</tr> </thead> <tbody> <tr each="{ item, items_index in items }"> <td each="{ field in fields }" class="align-middle">
 { item[field] }</td> </tr> </tbody> </table> HTML
  27. 27. <style scoped> .bp-items { overflow-x: scroll; } </style> <script> // Data API api.listEntries(that.site_id, params, function (response) { // `mtapp-items` that.items = response.items; that.update(); }); </script> </mtapp-entries> JavaScript CSS
  28. 28. 
 
 
 

  29. 29.
  30. 30. <div class="form-group">
 <label> </label>
 <input class="form-control" 
 type="color" name="keywords">
 </div> <mtapp-form-parts 
 form_type="color" basename="keywords"
 label=" "></mtapp-form-parts>
  31. 31. 
 

  32. 32. 5mini
  33. 33.
  34. 34. MT::Lover::bitpart Update bit part, everyday!!

×