You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@isis.apache.org by da...@apache.org on 2018/01/04 13:49:46 UTC

[02/28] isis-site git commit: updates SNAPSHOT

http://git-wip-us.apache.org/repos/asf/isis-site/blob/8c263125/content/versions/SNAPSHOT/guides/ugvw/ugvw.html
----------------------------------------------------------------------
diff --git a/content/versions/SNAPSHOT/guides/ugvw/ugvw.html b/content/versions/SNAPSHOT/guides/ugvw/ugvw.html
index 031b64b..227deef 100644
--- a/content/versions/SNAPSHOT/guides/ugvw/ugvw.html
+++ b/content/versions/SNAPSHOT/guides/ugvw/ugvw.html
@@ -1320,7 +1320,7 @@ table.CodeRay td.code>pre{padding:0}
          <div class="sect3"> 
           <h4 id="_other_annotations">3.1.4. Other Annotations</h4> 
           <div class="paragraph"> 
-           <p>As of <code>1.8.0</code>, all the layout annotations have been consolidated into the various <code>XxxLayout</code> annotations: <a href="../rgant/rgant.html#_rgant-ActionLayout, "><code>@ActionLayout</code></a> <a href="../rgant/rgant.html#_rgant-CollectionLayout"><code>@CollectionLayout</code></a>, <a href="../rgant/rgant.html#_rgant-DomainObjectLayout"><code>@DomainObjectLayout</code></a>, <a href="../rgant/rgant.html#_rgant-DomainServiceLayout"><code>@DomainServiceLayout</code></a>, <a href="../rgant/rgant.html#_rgant-ParameterLayout"><code>@ParameterLayout</code></a>, <a href="../rgant/rgant.html#_rgant-PropertyLayout"><code>@PropertyLayout</code></a>, and <a href="../rgant/rgant.html#_rgant-ViewModelLayout"><code>@ViewModelLayout</code></a></p> 
+           <p>All the layout annotations (eg <code>@Regex</code> and <code>@Named</code>) have been deprecated, instead replaced by the various <code>XxxLayout</code> annotations: <a href="../rgant/rgant.html#_rgant-ActionLayout, "><code>@ActionLayout</code></a> <a href="../rgant/rgant.html#_rgant-CollectionLayout"><code>@CollectionLayout</code></a>, <a href="../rgant/rgant.html#_rgant-DomainObjectLayout"><code>@DomainObjectLayout</code></a>, <a href="../rgant/rgant.html#_rgant-DomainServiceLayout"><code>@DomainServiceLayout</code></a>, <a href="../rgant/rgant.html#_rgant-ParameterLayout"><code>@ParameterLayout</code></a>, <a href="../rgant/rgant.html#_rgant-PropertyLayout"><code>@PropertyLayout</code></a>, and <a href="../rgant/rgant.html#_rgant-ViewModelLayout"><code>@ViewModelLayout</code></a></p> 
           </div> 
          </div> 
         </div> 
@@ -1959,7 +1959,7 @@ table.CodeRay td.code>pre{padding:0}
          </div> 
         </div> 
         <div class="paragraph"> 
-         <p>The Apache Isis framework provides two mechanisms to control the arrangement of domain service actions across menubars and menus, either using annotations or (as of <code>1.16.0-SNAPSHOT</code>) using a file-based layout.</p> 
+         <p>The Apache Isis framework provides two mechanisms to control the arrangement of domain service actions across menubars and menus, either using annotations or using a file-based layout.</p> 
         </div> 
         <div class="sect2"> 
          <h3 id="_ugvw_menubars-layout_annotation-based">4.1. Annotation-based Menu Bars</h3>
@@ -2103,7 +2103,7 @@ table.CodeRay td.code>pre{padding:0}
          </div> 
         </div> 
         <div class="sect2"> 
-         <h3 id="_ugvw_menubars-layout_file-based">4.2. File-based Menu Bars (<code>1.16.0-SNAPSHOT</code>)</h3>
+         <h3 id="_ugvw_menubars-layout_file-based">4.2. File-based Menu Bars</h3>
          <div class="btn-group" style="float: right; font-size: small; padding: 6px; margin-top: -55px; ">
           <button type="button" class="btn btn-xs btn-default" onclick="window.location.href=&quot;https://github.com/apache/isis/edit/master/adocs/documentation/src/main/asciidoc/guides/ugvw/_ugvw_menubars-layout_file-based.adoc&quot;"><i class="fa fa-pencil-square-o"></i>&nbsp;Edit</button>
           <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
@@ -2115,7 +2115,7 @@ table.CodeRay td.code>pre{padding:0}
           </ul>
          </div> 
          <div class="paragraph"> 
-          <p>(As of <code>1.16.0-SNAPSHOT</code>) the domain service actions can be arranged across menu items using the <code>menubars.layout.xml</code> file. Not only is this easier to work with, it also can be reloaded dynamically (if in prototype mode), substantially redu.</p> 
+          <p>The domain service actions can be arranged across menu items using the <code>menubars.layout.xml</code> file. Not only is this easier to work with, it also can be reloaded dynamically (if in prototype mode), substantially redu.</p> 
          </div> 
          <div class="paragraph"> 
           <p>As for <a href="#_ugvw_layout_file-based">file-based object layouts</a>, this offers a number of benefits:</p> 
@@ -2422,7 +2422,7 @@ table.CodeRay td.code>pre{padding:0}
            <td class="tableblock halign-left valign-top">
             <div>
              <div class="paragraph"> 
-              <p><code>isis.viewer.wicket.</code><br> <code>disableDependentChoiceAutoSelection</code></p> 
+              <p><code>isis.viewer.wicket.</code><br> <code>disableDependent</code><br> <code>ChoiceAutoSelection</code></p> 
              </div>
             </div></td> 
            <td class="tableblock halign-left valign-top"><p class="tableblock"><code>true</code>,<code>false</code><br> (<code><em>false</em></code>)</p></td> 
@@ -2488,7 +2488,7 @@ table.CodeRay td.code>pre{padding:0}
            <td class="tableblock halign-left valign-top">
             <div>
              <div class="paragraph"> 
-              <p><code>isis.viewer.wicket.</code><br> <code>maxTitleLengthInParentedTables</code></p> 
+              <p><code>isis.viewer.wicket.</code><br> <code>maxTitleLength</code><br> <code>InParentedTables</code></p> 
              </div>
             </div></td> 
            <td class="tableblock halign-left valign-top"><p class="tableblock">+ve integer<br> (<code><em>12</em></code>)</p></td> 
@@ -2503,7 +2503,7 @@ table.CodeRay td.code>pre{padding:0}
            <td class="tableblock halign-left valign-top">
             <div>
              <div class="paragraph"> 
-              <p><code>isis.viewer.wicket.</code><br> <code>maxTitleLengthInStandaloneTables</code></p> 
+              <p><code>isis.viewer.wicket.</code><br> <code>maxTitleLength</code><br> <code>InStandaloneTables</code></p> 
              </div>
             </div></td> 
            <td class="tableblock halign-left valign-top"><p class="tableblock">+ve integer,<br> (<code><em>12</em></code>)</p></td> 
@@ -2533,7 +2533,7 @@ table.CodeRay td.code>pre{padding:0}
            <td class="tableblock halign-left valign-top">
             <div>
              <div class="paragraph"> 
-              <p><code>isis.viewer.wicket.</code><br> <code>preventDoubleClickForFormSubmit</code></p> 
+              <p><code>isis.viewer.wicket.</code><br> <code>preventDoubleClick</code><br> <code>ForFormSubmit</code></p> 
              </div>
             </div></td> 
            <td class="tableblock halign-left valign-top"><p class="tableblock"><code>true</code>,<code>false</code><br> (<code><em>true</em></code>)</p></td> 
@@ -2548,7 +2548,7 @@ table.CodeRay td.code>pre{padding:0}
            <td class="tableblock halign-left valign-top">
             <div>
              <div class="paragraph"> 
-              <p><code>isis.viewer.wicket.</code><br> <code>preventDoubleClickForNoArgAction</code></p> 
+              <p><code>isis.viewer.wicket.</code><br> <code>preventDoubleClick</code><br> <code>ForNoArgAction</code></p> 
              </div>
             </div></td> 
            <td class="tableblock halign-left valign-top"><p class="tableblock"><code>true</code>,<code>false</code><br> (<code><em>true</em></code>)</p></td> 
@@ -2848,8 +2848,109 @@ table.CodeRay td.code>pre{padding:0}
              <div class="paragraph"> 
               <p>Whether the WicketSource plugin should be enabled; by default it is not enabled.</p> 
              </div> 
+             <div class="admonitionblock warning"> 
+              <table> 
+               <tbody>
+                <tr> 
+                 <td class="icon"> <i class="fa icon-warning" title="Warning"></i> </td> 
+                 <td class="content"> 
+                  <div class="paragraph"> 
+                   <p>Enabling this setting can significantly slow down rendering performance of the Wicket viewer.</p> 
+                  </div> </td> 
+                </tr> 
+               </tbody>
+              </table> 
+             </div>
+            </div></td> 
+          </tr> 
+         </tbody> 
+        </table> 
+        <div class="paragraph"> 
+         <p>Also:</p> 
+        </div> 
+        <table class="tableblock frame-all grid-all spread"> 
+         <colgroup> 
+          <col style="width: 33.3333%;"> 
+          <col style="width: 16.6666%;"> 
+          <col style="width: 50.0001%;"> 
+         </colgroup> 
+         <thead> 
+          <tr> 
+           <th class="tableblock halign-left valign-top">Property</th> 
+           <th class="tableblock halign-left valign-top">Value<br> (default value)</th> 
+           <th class="tableblock halign-left valign-top">Description</th> 
+          </tr> 
+         </thead> 
+         <tbody> 
+          <tr> 
+           <td class="tableblock halign-left valign-top">
+            <div>
+             <div class="paragraph"> 
+              <p><code>isis.viewers.</code><br> <code>paged.parented</code></p> 
+             </div>
+            </div></td> 
+           <td class="tableblock halign-left valign-top"><p class="tableblock">positive integer (12)</p></td> 
+           <td class="tableblock halign-left valign-top">
+            <div>
+             <div class="paragraph"> 
+              <p>Default page size for parented collections (as owned by an object, eg <code>Customer#getOrders()</code>)</p> 
+             </div>
+            </div></td> 
+          </tr> 
+          <tr> 
+           <td class="tableblock halign-left valign-top">
+            <div>
+             <div class="paragraph"> 
+              <p><code>isis.viewers.</code><br> <code>paged.standalone</code></p> 
+             </div>
+            </div></td> 
+           <td class="tableblock halign-left valign-top"><p class="tableblock">positive integer (25)</p></td> 
+           <td class="tableblock halign-left valign-top">
+            <div>
+             <div class="paragraph"> 
+              <p>Default page size for standalone collections (as returned from an action invocation)</p> 
+             </div>
+            </div></td> 
+          </tr> 
+          <tr> 
+           <td class="tableblock halign-left valign-top">
+            <div>
+             <div class="paragraph"> 
+              <p><code>isis.viewers.</code><br> <code>propertyLayout.</code><br> <code>labelPosition</code></p> 
+             </div>
+            </div></td> 
+           <td class="tableblock halign-left valign-top"><p class="tableblock"><code>TOP</code>, <code>LEFT</code><br> (<code>LEFT</code>)</p></td> 
+           <td class="tableblock halign-left valign-top">
+            <div>
+             <div class="paragraph"> 
+              <p>Default for label position for all properties if not explicitly specified using <a href="../rgant/rgant.html#_rgant-PropertyLayout_labelPosition"><code>@PropertyLayout#labelPosition()</code></a></p> 
+             </div> 
+             <div class="paragraph"> 
+              <p>If you want a consistent look-n-feel throughout the app, eg all property labels to the top, then it’d be rather frustrating to have to annotate every property.</p> 
+             </div> 
+             <div class="paragraph"> 
+              <p>If these are not present then Apache Isis will render according to internal defaults. At the time of writing, this means labels are to the left for all datatypes except multiline strings.</p> 
+             </div>
+            </div></td> 
+          </tr> 
+          <tr> 
+           <td class="tableblock halign-left valign-top">
+            <div>
+             <div class="paragraph"> 
+              <p><code>isis.viewers.</code><br> <code>collectionLayout.</code><br> <code>defaultView</code></p> 
+             </div>
+            </div></td> 
+           <td class="tableblock halign-left valign-top"><p class="tableblock"><code>hidden</code>, <code>table</code><br> (<code>hidden</code>)</p></td> 
+           <td class="tableblock halign-left valign-top">
+            <div>
+             <div class="paragraph"> 
+              <p>Default for the default view for all (parented) collections if not explicitly specified using <a href="../rgant/rgant.html#_rgant-CollectionLayout_defaultView"><code>@CollectionLayout#defaultView()</code></a></p> 
+             </div> 
+             <div class="paragraph"> 
+              <p>By default the framework renders (parented) collections as "hidden", ie collapsed. These can be overridden on a case-by-case basis using the <a href="../rgant/rgant.html#_rgant-CollectionLayout_defaultView"><code>@CollectionLayout#defaultView()</code></a> or the corresponding <code>&lt;collectionLayout defaultView="…​"&gt;</code> element in the <code>Xxx.layout.xml</code> layout file.</p> 
+             </div> 
              <div class="paragraph"> 
-              <p>Prior to <code>1.12.0</code> this was enabled by default for prototyping (not production). However it can significantly slow down rendering, hence the introduction of this configuration setting.</p> 
+              <p>If the majority of collections should be displayed as "table" form, then it is more convenient to specify the default view globally.</p> 
              </div>
             </div></td> 
           </tr> 
@@ -4632,23 +4733,145 @@ public WebRequest newWebRequest(HttpServletRequest servletRequest, String filter
           </ul> 
          </div> 
          <div class="paragraph"> 
-          <p>The above FAQ was raised against <code>1.10.0</code>. As of <code>1.11.0</code> (due to <a href="https://issues.apache.org/jira/browse/ISIS-1093">ISIS-1093</a>) it <em>is</em> now possible to internationalize both the Wicket viewer’s labels as well as the regular translations of the domain object metadata using the <code>.po</code> translation files as supported by the <a href="../rgsvc/rgsvc.html#_rgsvc_presentation-layer-spi_TranslationService"><code>TranslationService</code></a>.</p> 
+          <p>Yes, it <em>is</em> possible to internationalize both the Wicket viewer’s labels as well as the regular translations of the domain object metadata using the <code>.po</code> translation files as supported by the <a href="../rgsvc/rgsvc.html#_rgsvc_presentation-layer-spi_TranslationService"><code>TranslationService</code></a>.</p> 
          </div> 
          <div class="paragraph"> 
           <p>Full details of the <code>msgId</code>s that must be added to the <code>translations.po</code> file can be found in <a href="../ugbtb/ugbtb.html#__ugbtb_i18n_wicket-viewer">i18n</a> section of the <a href="../ugbtb/ugbtb.html">beyond the basics</a> guide.</p> 
          </div> 
+        </div> 
+        <div class="sect2"> 
+         <h3 id="_ugvw_hints-and-tips_highlight-current-row">8.3. Highlight Current Row</h3>
+         <div class="btn-group" style="float: right; font-size: small; padding: 6px; margin-top: -55px; ">
+          <button type="button" class="btn btn-xs btn-default" onclick="window.location.href=&quot;https://github.com/apache/isis/edit/master/adocs/documentation/src/main/asciidoc/guides/ugvw/_ugvw_hints-and-tips_highlight-current-row.adoc&quot;"><i class="fa fa-pencil-square-o"></i>&nbsp;Edit</button>
+          <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
+          <ul class="dropdown-menu">
+           <li><a href="https://github.com/apache/isis/edit/master/adocs/documentation/src/main/asciidoc/guides/ugvw/_ugvw_hints-and-tips_highlight-current-row.adoc" target="_blank"><i class="fa fa-pencil-square-o fa-fw" aria-hidden="true"></i>&nbsp; Edit</a></li>
+           <li><a href="https://github.com/apache/isis/commits/master/adocs/documentation/src/main/asciidoc/guides/ugvw/_ugvw_hints-and-tips_highlight-current-row.adoc" target="_blank"><i class="fa fa-clock-o fa-fw" aria-hidden="true"></i>&nbsp; History</a></li>
+           <li><a href="https://github.com/apache/isis/raw/master/adocs/documentation/src/main/asciidoc/guides/ugvw/_ugvw_hints-and-tips_highlight-current-row.adoc" target="_blank"><i class="fa fa-file-text-o fa-fw" aria-hidden="true"></i>&nbsp; Raw</a></li>
+           <li><a href="https://github.com/apache/isis/blame/master/adocs/documentation/src/main/asciidoc/guides/ugvw/_ugvw_hints-and-tips_highlight-current-row.adoc" target="_blank"><i class="fa fa-hand-o-right fa-fw" aria-hidden="true"></i>&nbsp; Blame</a></li>
+          </ul>
+         </div> 
          <div class="paragraph"> 
-          <p>In prior releases (<code>1.10.0</code> and earlier) it was necessary to use <a href="https://ci.apache.org/projects/wicket/guide/6.x/guide/i18n.html#i18n_3">Wicket’s internationalization support</a>, namely resource bundles. This is still supported (as a fallback):</p> 
+          <p>Demo App: Highlighting Current As a by-the-by, the demo app has one further "trick up its sleeve". If you run the app you’ll notice that the currently selected <code>DemoObject</code> is highlighted in the left-hand table of the <code>HomePageViewModel</code>.</p> 
          </div> 
-         <div class="ulist"> 
-          <ul> 
-           <li> <p>create a directory structure inside the webapp resource folder following that pattern <code>org.apache.isis.viewer.wicket.ui.components.actions</code></p> </li> 
-           <li> <p>Inside there create an equivalent <code>ActionParametersFormPanel_xx_XX.properties</code> or <code>ActionParametersFormPanel_xx.properties</code> file for the various locales that you want to support (eg <code>ActionParametersFormPanel_en_UK.properties</code>, <code>ActionParametersFormPanel_en_US.properties</code>, <code>ActionParametersFormPanel_de.properties</code> and so on).</p> </li> 
-          </ul> 
+         <div class="paragraph"> 
+          <p>This is accomplished by having the view model collaborate with a subscribing domain service that configures a CSS class.</p> 
+         </div> 
+         <div class="paragraph"> 
+          <p>We start by ensuring that the <code>DemoObject</code> emits an event for its CSS class:</p> 
+         </div> 
+         <div class="listingblock"> 
+          <div class="title">
+           DemoObject.java
+          </div> 
+          <div class="content"> 
+           <pre class="CodeRay highlight"><code data-lang="java"><span class="annotation">@DomainObjectLayout</span>(
+...
+cssClassUiEvent = DemoObject.CssClassUiEvent.class
+)
+<span class="directive">public</span> <span class="type">class</span> <span class="class">DemoObject</span> ... {
+
+<span class="directive">public</span> <span class="directive">static</span> <span class="type">class</span> <span class="class">CssClassUiEvent</span>
+<span class="directive">extends</span> org.apache.isis.applib.services.eventbus.CssClassUiEvent&lt;DemoObject&gt; {}
+...
+}</code></pre> 
+          </div> 
+         </div> 
+         <div class="paragraph"> 
+          <p>Next, we define the domain service to act as the subscriber:</p> 
+         </div> 
+         <div class="listingblock"> 
+          <div class="title">
+           HomePageViewModel.java
+          </div> 
+          <div class="content"> 
+           <pre class="CodeRay highlight"><code data-lang="java"><span class="directive">public</span> <span class="type">class</span> <span class="class">HomePageViewModel</span> ... {
+    <span class="annotation">@DomainService</span>(nature = NatureOfService.DOMAIN)
+    <span class="directive">public</span> <span class="directive">static</span> <span class="type">class</span> <span class="class">CssHighlighter</span> <span class="directive">extends</span> AbstractSubscriber {
+        <span class="annotation">@EventHandler</span>
+        <span class="annotation">@Subscribe</span>
+        <span class="directive">public</span> <span class="type">void</span> on(DemoObject.CssClassUiEvent ev) {
+            <span class="keyword">if</span>(getContext() == <span class="predefined-constant">null</span>) { <span class="keyword">return</span>; }
+            <span class="keyword">if</span>(ev.getSource() == getContext().getSelected()) {      <i class="conum" data-value="1"></i><b>(1)</b>
+                ev.setCssClass(<span class="string"><span class="delimiter">"</span><span class="content">selected</span><span class="delimiter">"</span></span>);
+            }
+        }
+        <span class="directive">private</span> HomePageViewModel getContext() {                    <i class="conum" data-value="2"></i><b>(2)</b>
+            <span class="keyword">return</span> (HomePageViewModel) scratchpad.get(<span class="string"><span class="delimiter">"</span><span class="content">context</span><span class="delimiter">"</span></span>);
+        }
+        <span class="type">void</span> setContext(<span class="directive">final</span> HomePageViewModel homePageViewModel) {
+            scratchpad.put(<span class="string"><span class="delimiter">"</span><span class="content">context</span><span class="delimiter">"</span></span>, homePageViewModel);
+        }
+        <span class="annotation">@Inject</span>
+        Scratchpad scratchpad;                                      <i class="conum" data-value="3"></i><b>(3)</b>
+    }
+}</code></pre> 
+          </div> 
+         </div> 
+         <div class="colist arabic"> 
+          <table> 
+           <tbody>
+            <tr> 
+             <td><i class="conum" data-value="1"></i><b>1</b></td> 
+             <td>If the domain object is the currently selected then set the CSS class</td> 
+            </tr> 
+            <tr> 
+             <td><i class="conum" data-value="2"></i><b>2</b></td> 
+             <td>Provide methods to set and get the current <code>HomePageViewModel</code> (acting as the context)</td> 
+            </tr> 
+            <tr> 
+             <td><i class="conum" data-value="3"></i><b>3</b></td> 
+             <td>Store the context using the <code>Scratchpad</code> domain service (request-scoped so thread-safe).</td> 
+            </tr> 
+           </tbody>
+          </table> 
+         </div> 
+         <div class="paragraph"> 
+          <p>The <code>HomePageViewModel</code> is responsible for setting itself as the context for the domain service:</p> 
+         </div> 
+         <div class="listingblock"> 
+          <div class="title">
+           HomePageViewModel.java
+          </div> 
+          <div class="content"> 
+           <pre class="CodeRay highlight"><code data-lang="java"><span class="directive">public</span> <span class="type">class</span> <span class="class">HomePageViewModel</span> ... {
+    ...
+    public TranslatableString title() {
+        cssHighlighter.setContext(<span class="local-variable">this</span>);        <i class="conum" data-value="1"></i><b>(1)</b>
+        ...
+    }
+    ...
+    <span class="annotation">@javax</span>.inject.Inject
+    CssHighlighter cssHighlighter;
+}</code></pre> 
+          </div> 
+         </div> 
+         <div class="colist arabic"> 
+          <table> 
+           <tbody>
+            <tr> 
+             <td><i class="conum" data-value="1"></i><b>1</b></td> 
+             <td>set the context on the domain service</td> 
+            </tr> 
+           </tbody>
+          </table> 
+         </div> 
+         <div class="paragraph"> 
+          <p>Finally we just need some CSS, in the <code>application.css</code> file:</p> 
+         </div> 
+         <div class="listingblock"> 
+          <div class="title">
+           application.css
+          </div> 
+          <div class="content"> 
+           <pre class="CodeRay highlight"><code data-lang="css"><span class="class">.selected</span> {
+    <span class="key">font-style</span>: <span class="value">italic</span>; <span class="key">font-weight</span>: <span class="value">bolder</span>;
+}</code></pre> 
+          </div> 
          </div> 
         </div> 
         <div class="sect2"> 
-         <h3 id="_ugvw_hints-and-tips_svg-support">8.3. SVG Support</h3>
+         <h3 id="_ugvw_hints-and-tips_svg-support">8.4. SVG Support</h3>
          <div class="btn-group" style="float: right; font-size: small; padding: 6px; margin-top: -55px; ">
           <button type="button" class="btn btn-xs btn-default" onclick="window.location.href=&quot;https://github.com/apache/isis/edit/master/adocs/documentation/src/main/asciidoc/guides/ugvw/_ugvw_hints-and-tips_svg-support.adoc&quot;"><i class="fa fa-pencil-square-o"></i>&nbsp;Edit</button>
           <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>