Titanium

[ALOY-843] ListView/ListSection: Support new API elements in XML

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2014-08-05T20:43:08.000+0000
Affected Version/sn/a
Fix Version/sAlloy 1.3.0, 2013 Sprint 23
ComponentsXML
Labelsqe-manualtest
ReporterBenjamin Hatfield
AssigneeTony Lukasavage
Created2013-10-10T21:11:30.000+0000
Updated2014-08-05T20:43:08.000+0000

Description

For Ti SDK 3.2.0, there are some additional features as View proxy properties for ListView and ListSection that can be implemented in XML markup. Both ListSection and ListView support headerView and footerView. Works on both Android and iOS. ListView also has a pullView and searchView (like headerPullView and search for TableView). iOS only for now. This PR adds support for the searchView property on Android: https://github.com/appcelerator/titanium_mobile/pull/4774. Note that on Android it supports both a UI.SearchBar and UI.Android.SearchView. I updated the ListView guide with some examples: https://wiki.appcelerator.org/display/guides2/ListViews#ListViews-AdvancedCustomizations Here is the iOS doc PR with the changes: https://github.com/appcelerator/titanium_mobile/pull/4426

Comments

  1. Benjamin Hatfield 2013-10-31 [~tlukasavage] I am thinking something along the lines of this:
       <ListView>
          <!-- Either/or for searchView property -->
          <SearchBar platform="android,ios" />
          <SearchView platform="android" />
          
          <HeaderPullView platform="ios" />
              <View> ... </View>
          </HeaderPullView>
          
          <HeaderView platform="android,ios">
              <View> ... </View>
          </HeaderView>
       
           <ListSection>
           
               <HeaderView platform="android,ios">
                   <View> ... </View>
               </HeaderView>
               
               <ListItem title="Row 1"/>
               <ListItem title="Row 2"/>
               <ListItem title="Row 3"/>
               
               <FooterView platform="android,ios">
                   <View> ... </View>
               </FooterView>
               
           </ListSection>
           <ListSection>
               <ListItem title="Row 1"/>
               <ListItem title="Row 2"/>
               <ListItem title="Row 3"/>
           </ListSection>
           <ListSection>
               <ListItem title="Row 1"/>
               <ListItem title="Row 2"/>
               <ListItem title="Row 3"/>
           </ListSection>
           
           <FooterView platform="android,ios">
               <View> ... </View>
           </FooterView>
       </ListView>
       
       
  2. Tony Lukasavage 2013-11-01 Updated with TableView included to show the subtle differences between the new and old APIs
       <TableView>
       
       	<!-- headerView -->
       	<HeaderView/>
       
       	<!-- footerView -->
       	<FooterView/>
       
       	<!-- <Search> is legacy and will be removed in 1.4.0 -->
       	<!-- search, long way with Ti.UI.SearchBar -->
       	<Search>
       		<SearchBar/>
       	</Search>
       
       	<!-- search, long way with Ti.UI.Android.SearchView -->
       	<Search>
       		<SearchView/>
       	</Search>
       
       	<!-- search, shorthand with Ti.UI.SearchBar -->
       	<SearchBar/>
       
       	<!-- search, shorthand with Ti.UI.Android.SearchView -->
       	<SearchView/>
       
       	<!-- headerPullView -->
       	<HeaderPullView/>
       
       	<!-- table section -->
       	<TableViewSection>
       
       		<!-- headerView -->
       		<HeaderView/>
       
       		<!-- footerView -->
       		<FooterView/>
       
       	</TableViewSection>
       
       </TableView>
       
       <ListView>
       
       	<!-- headerView -->
       	<HeaderView/>
       
       	<!-- footerView -->
       	<FooterView/>
       
       	<!-- Ti.UI.SearchBar for property searchView-->
       	<SearchBar/>
       
       	<!-- Ti.UI.Android.SearchView for property searchView -->
       	<SearchView/>
       
       	<!-- headerPullView -->
       	<PullView/>
       
       	<!-- table section -->
       	<ListSection>
       
       		<!-- headerView -->
       		<HeaderView/>
       
       		<!-- footerView -->
       		<FooterView/>
       
       	</ListSection>
       
       </ListView>
       
  3. Tony Lukasavage 2013-11-04 PR: https://github.com/appcelerator/alloy/pull/267

    test apps

    https://github.com/appcelerator/alloy/tree/master/test/apps/ui/lists_proxy_properties

    https://github.com/appcelerator/alloy/tree/master/test/apps/advanced/proxy_property_requires

    testing

    Run both test apps for all supported platforms. Ensure that there are no compile time or runtime errors. Specific instructions for each app are below. Be aware that some proxy properties are platform-specific, so consider that when testing. For app #1, only iOS and Android 3.0+ (API 11+) are supported. Make sure that all proxy properties are all present in both the TableView and ListView tabs of the app, except where TIMOB issues are noted in the markup comments. The proxy properties should include: * headerView & footerView for both the table/list and its section * pullView/headerPullView * searchBar/searchView For app #2, simply make sure that the various proxy properties show up when the UI is rendered.
  4. Federico Casali 2013-12-02 Verified working as expected following https://github.com/appcelerator/alloy/tree/master/test/apps/ui/lists_proxy_properties and https://github.com/appcelerator/alloy/tree/master/test/apps/advanced/proxy_property_requires samples TiSDK 3.2.0.v20131127194046 CLI 3.2.0-beta Alloy 1.3.0-beta Titanium Studio 3.2.0.201311262027 iPad OS 7 and simulator Android Google Nexus Galaxy 4.3 MobileWeb (for sample #2) Closing.

JSON Source