tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:VisualStrapのvs:column内でコンポーネントを使ってみたときの話

f:id:tyoshikawa1106:20140804210347p:plain

VisualStrapのvs:column内でコンポーネントを使ってみたときにエラーに遭遇したので、検証用のコードを用意して動作確認してみました。


まず、次のような書き方をしたときにはコンポーネントは問題無く表示されます。

<apex:page showHeader="true" sidebar="false">
    <style>
        .divStyle {
            background-color: #717ECD;
            color: white;
            border: 1px solid #FFFFFF;
            padding: 20px;
        }
    </style>
    <vs:importVisualStrap theme="default" />   
    <apex:form id="vsform">
        <vs:visualStrapBlock >
            <vs:row>
                <vs:column type="col-md-12">
                    <div class="divStyle">col-md-12</div>
                </vs:column>
            </vs:row>
            <vs:row>
                <vs:column type="col-md-6">
                    <div class="divStyle">col-md-6</div>
                </vs:column>
                <vs:column type="col-md-6">
                    <div class="divStyle">col-md-6</div>
                </vs:column>
            </vs:row>
        </vs:visualStrapBlock >

        <!-- コンポーネント -->
        <c:VS_ColumnDemoComponent />

    </apex:form>
</apex:page>

ちなみにコンポーネントは文字を表示するだけのシンプルな作りです。

<apex:component >
    <style>
        .componentDivStyle {
            background-color: #D96383;
            color: white;
            border: 1px solid #FFFFFF;
            padding: 20px;
        }
    </style>
    <div class="componentDivStyle">Component</div>
</apex:component>


このコンポーネントを次のように"col-md-12"の部分に入れてみます。

<vs:visualstrapblock >
    <vs:row >
        <vs:column type="col-md-12">
            <!-- コンポーネント -->
            <c:VS_ColumnDemoComponent />
        </vs:column>
    </vs:row>
    <vs:row >
        <vs:column type="col-md-6">
            <div class="divStyle">col-md-6</div>
        </vs:column>
        <vs:column type="col-md-6">
            <div class="divStyle">col-md-6</div>
        </vs:column>
    </vs:row>
</vs:visualstrapblock>


これで画面を表示させてみると次のようにエラーが発生しました。

f:id:tyoshikawa1106:20140804211457p:plain


このようにvs:column内ではコンポーネントは認識されないみたいです。普通に使うときには特に問題ないのですが、VisualStrapと一緒にコンポーネントを使いたいときには、このようなルールがあるということを意識しておいた方が良さそうです。