Creating and using spectrum composite components

[Roman Isitua]

I have a simple spectrum view that references a container as follows

<sp:Container id="mainGroup" className="container">
<view:SignInForm id="signInForm" includeIn="joinus">
</view:SignInForm>
<!-- <sp:Card x="200" y="200" className="login_card" includeIn="joinus">
<sp:body>
    <sp:CardBody>
      <sp:CardHeader>
        <sp:CardTitle text="Sign In"/>
      </sp:CardHeader>
      <sp:CardContent>
         <sp:Form labelPosition="left">
  <sp:FormItem>
    <sp:FormLabel text="Username*"/>
    <sp:FormField>
      <sp:TextField placeholder="Enter your user name"/>
    </sp:FormField>
  </sp:FormItem>
  <sp:FormItem>
    <sp:FormLabel text="Password*"/>
    <sp:FormField>
      <sp:TextField placeholder="Enter password"  />
    </sp:FormField>
  </sp:FormItem>
  <sp:FormItem>
      <sp:Button flavor="cta" text="Button"/>
  </sp:FormItem>
</sp:Form>
      </sp:CardContent>
    </sp:CardBody>
  </sp:body>
</sp:Card> -->
</sp:Container>


The SignInForm contains the definition of the sp:Card in a separate
SignInForm.mxml file.
I noticed that royale does not render the card. However, if I do this

<sp:Container id="mainGroup" className="container">
<!-- <view:SignInForm id="signInForm" includeIn="joinus">
</view:SignInForm> -->
<sp:Card x="200" y="200" className="login_card" includeIn="joinus">
<sp:body>
    <sp:CardBody>
      <sp:CardHeader>
        <sp:CardTitle text="Sign In"/>
      </sp:CardHeader>
      <sp:CardContent>
         <sp:Form labelPosition="left">
  <sp:FormItem>
    <sp:FormLabel text="Username*"/>
    <sp:FormField>
      <sp:TextField placeholder="Enter your user name"/>
    </sp:FormField>
  </sp:FormItem>
  <sp:FormItem>
    <sp:FormLabel text="Password*"/>
    <sp:FormField>
      <sp:TextField placeholder="Enter password"  />
    </sp:FormField>
  </sp:FormItem>
  <sp:FormItem>
      <sp:Button flavor="cta" text="Button"/>
  </sp:FormItem>
</sp:Form>
      </sp:CardContent>
    </sp:CardBody>
  </sp:body>
</sp:Card>
</sp:Container>

I have to place the full definition of the sp:Card in the sp:Container for
it to be rendered.

The disadvantage of this is that I cannot define large complex composite
components in separate mxml files and reference them in the main view mxml.


I am able to do this using jewel or material design. It is a very useful
feature.

Any ideas ? Can this be done using spectrum ?