tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:BootstrapがVisualforceで簡単に使えるようになる「VisualStrap」を試してみました

BootstrapをVisualforce向けに最適化したVisualStrapというものが公開されているとのことなので、Developer環境で試してみました。これを使うとVisualforceページで簡単にBootstrapを使うことができるようになります。

f:id:tyoshikawa1106:20140311201042p:plain

VisualStrap


画面中央の"Managed Package / Installation"ボタンをクリックすると管理パッケージをインストールできるようになっていました。

f:id:tyoshikawa1106:20140311201919p:plain:w300

f:id:tyoshikawa1106:20140311201943p:plain

画面右側の"Unmanaged Package / Installation"ボタンをクリックすると未管理パッケージをインストールできるみたいです。


パッケージをインストールするとVisualforceページで"vs"タグがつかえるようになります。サンプルコードによると次の形が基本になるみたいです。

<apex:page docType="html-5.0" showChat="true"  sidebar="false">
  <vs:importVisualStrap theme="default" />
   
  <vs:visualStrapBlock >
    <!--All the  Visualstrap content and Visualforce content here -->
  </vs:visualStrapBlock >
</apex:page>

※サイトに載っていたサンプルコードをコピーして試してみたところエラーとなりましたが、最後のapexタグのところで"/"が抜けているためエラーになっていました。


以下、サイトに載っていたサンプルコードを一通り試してみました。

1. Panel

f:id:tyoshikawa1106:20140311211815p:plain

2. Alert

f:id:tyoshikawa1106:20140311212113p:plain

3. Well

f:id:tyoshikawa1106:20140311212638p:plain

4. Label

f:id:tyoshikawa1106:20140311213016p:plain

5. Badges

f:id:tyoshikawa1106:20140311213309p:plain

6. Jumbotron

f:id:tyoshikawa1106:20140311213717p:plain

7A. Formblock - Vertical

f:id:tyoshikawa1106:20140311214043p:plain

7B. Formblock - Horizontal

f:id:tyoshikawa1106:20140311214238p:plain

8. Glyphicons

f:id:tyoshikawa1106:20140311214458p:plain

9. Grid System

f:id:tyoshikawa1106:20140311214638p:plain

10 A. Thumbnail

f:id:tyoshikawa1106:20140311215004p:plain

10 B. Thumbnail - Custom Content

f:id:tyoshikawa1106:20140311215252p:plain

11. Tables

f:id:tyoshikawa1106:20140311215738p:plain

11 A. Tables : Striped Rows

f:id:tyoshikawa1106:20140311215915p:plain

11 B. Tables : Bordered

f:id:tyoshikawa1106:20140311220005p:plain

11 C. Tables : Hover Rows

f:id:tyoshikawa1106:20140311220129p:plain

11 D. Tables : Condensed table

f:id:tyoshikawa1106:20140311220420p:plain

12. Buttons

f:id:tyoshikawa1106:20140311220658p:plain

13. Button Group

f:id:tyoshikawa1106:20140311220753p:plain

14. Button Toolbar

f:id:tyoshikawa1106:20140311221042p:plain

15. Button dropdowns

f:id:tyoshikawa1106:20140311221245p:plain

16. Split button dropdowns

f:id:tyoshikawa1106:20140311221412p:plain

17. Page header

f:id:tyoshikawa1106:20140311221533p:plain

18. Progress Bar

f:id:tyoshikawa1106:20140311221907p:plain

19. ListGroup and ListGroupItem

f:id:tyoshikawa1106:20140311222037p:plain

20. Tooltip

f:id:tyoshikawa1106:20140311222155p:plain

21. Modal

f:id:tyoshikawa1106:20140311222717p:plain


showHeader="true"の状態でも正常に実行されました。自分が試したときは21のModalだけうまく実行できませんでした。モーダルポップアップが表示されたあとにクローズしてしてしまったので、どこか使い方を間違えているみたいです。(エラーの件無事に解決しました。詳細については下記に追記してあります)


実際に試してみて本当に簡単にBootstrapを使うことができました。パッケージをインストールするだけで使えるのですごく便利だと思います。


今回検証につかったコードは次のとおりです。

VisualStrap Demo ①

VisualStrap Demo ②

VisualStrap Demo ③

VisualStrap Demo ④

VisualStrap Demo ⑤

追記

Modalで発生したエラーですが、apex:commandButtonに 「onclick="return false;"」を付けたら動くようになることを教えてもらいました。次のように変更して確認してみたところバッチリ動くようになりました。

<apex:commandButton value="Launch My Modal Popup" html-data-toggle="modal" html-data-target="#myModal" onClick="return false;" styleClass="btn-primary brn-lg"/>