CruxFramework / crux

24 stars 6 forks source link

Support controllers, resources and data binding expressions on pure HTML elements #927

Closed thiagobustamante closed 8 years ago

thiagobustamante commented 8 years ago

Support controllers, resources and data binding expressions on pure HTML elements

<v:view
  xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:v="http://www.cruxframework.org/view" 
  xmlns:crux="http://www.cruxframework.org/crux" 
  xmlns:faces="http://www.cruxframework.org/crux/smart-faces"
  xmlns:mytemplate="http://www.cruxframework.org/templates/mytemplate" 
  useResource="myResource1,myResource2,myResource3"
  title="${myMessageBundle.myTitle}" 
  useController="myController"
  styleName="myClassName"
  style="height:100%"
  on*>

  <script type="text/javascript" src="js/banner.js"></script>
  <div id="myBanner" banner-style-rotation="true">
    <img banner-front="true" src="img/img1.png"/>
    <img banner-back="true"  src="img/img2.png"/>
    <img banner-back="true"  src="${myResource.myImage}"/>
  </div>

  <div id="myDiv" onClick="{myController.onAction1}">
    <input type="text" value="@{myDataobject.myProperty}" />
    <crux:ifDevice size="large">
      <button onClick="{myController.onAction2}">${myMessages.btn}</button>
    </crux:ifDevice>
  </div>

  <google-map latitude="@{myDataobject.lat}" longitude="@{myDataobject.long}" fit-to-markers="true">
    <google-map-marker latitude="@{myDataobject.lat1}" 
                     longitude="@{myDataobject.long1}" 
                     draggable="true" title="${myMessageBundle.myProperty}"/>
  </google-map>

  <crux:dataProvider id="myDataProvider" dataObject="myDataobject" 
                     onLoadData="{myController.onLoadData}" autoLoadData="true" 
                     pageSize="5" selectionMode="single"/>

  <faces:dataGrid id="myGrid" itemVar="myDataobject" dataProvider="myDataProvider">
    <faces:column key="myProperty" 
                    header="${myMessageBundle.myProperty} ${myMessageBundle.myProperty2}" 
                    property="@{myDataobject.myProperty}" />
  </faces:dataGrid>

  <faces:image id="myImage" src="${myResource1.image1}"/>

  <faces:textBox id="myTextbox" value="${myResource1.label1}: @{person.name}"/>

   <!-- Not supported: -->  
   <button onClick="{myController.onAction2}">@@{person.name}</button>
   <button onClick="{myController.onAction2}">@{person.name} asd asdasd</button>
   <button onClick="{myController.onAction2}">@{person.name}</button>
</view>