Device Stylesheet

Version 1 by Steve Maryka
on Aug 12, 2011 18:14.


 
compared with
Current by Philip Breau
on Aug 15, 2014 12:55.


 
Key
These lines were removed. This word was removed.
These lines were added. This word was added.

View page history


There are 5 changes. View first change.

 h3.
  h3. deviceStylesheet
  
h4. DeviceStylesheet Component
  With each mobile device having distinct looks and feels, all mobility components available with this distribution are styled according to the device upon which they appear. Each of these components was themed, and only the theme for each device is loaded for the application. An iPhone user will only have the iphone css files served for their application as will an Android and Blackberry user. The function of this component has been copied over into the newer DeviceResource component which also adds support for view port meta information in the head of the page.
  
With the each mobile device having distinct looks and feels, all mobility components available with this distribution are styled according to the device upon which they appear. Each of these components was themed, and only the theme for each device is loaded for the application. An iPhone user will only have the iphone css files served for their application as will an Android and Blackberry user.
  
 h4. Usage
  
 There are really two ways to use this component. The main usage is to detect the device being used and to serve only the css pertaining to that device in a single css file. Users of Blackberry, Android, iPhone, iPad and desktop users will be able to connect to the same application yet see the theme that resembles their individual device without any extra effort on the developer's behalf.
  
  
 Simply place this tag in the head of your template or facelet page.
  
 {code}
 <html.....xmlns:mobi="http://www.icesoft.com/icefaces/mobile/component">
 ...
 <h:head>
  <mobi:deviceStylesheet/>
 </h:head>
 <h:body>
 ........
  
 </h:body>
  
 </html>
  
 {code}
 This component will take care of loading the correct device-detected css. Currently those are iPhone, Android and Blackberry. Default will be iPhone for desktop browsers and iPad.
  
 This tag may also be used to load the various css resources as it does in mobile-showcase application:\-
  
 {code}
  <mobi:deviceStylesheet name="#{themeSwitcher.theme}" />
  
 {code}
 Since all themes reside in a single library, the library will default to the correct library of
 *org.icefaces.component.skins*
  
h3. Attributes
  h4. Themes
 * *base*: Structural CSS required for custom themes or when using 3rd party jQuery Mobile Themes
 * *iphone*: iPhone (iOS6) Theme
 * *ipad*: iPad (iOS6) Theme
 * *bberry*: BlackBerry 6/7 Theme
 * *bb10*: BlackBerry 10 Theme
 * *android_light*: Android Holo Light Theme
 * *android_dark*: Android Holo Dark Theme
 * *ios7*: iOS7 Theme
  
 This section covers attributes supported for this component in typical use-case format. The most common use-case of this component will be to use it without attributes as a detection mechanism for loading the correct css for each device.
 {panel}
 *name* denotes the jsf resource name of the css resource to be loaded if not using this device to detect the css to be delivered.
 {panel}
 {panel}
 *library* specifies the jsf resource library from where to serve this resource. Default is "org.icefaces.component.skins" if no library is specified
 {panel}
 {panel}
 *media* CSS media type, screen, print. Will default to screen, but developers can develop their own css to include styling for various media types and annotate their css file to contain all css definitions within one file.
 {panel}
   
 h3. Component Documentation
 [deviceStylesheet|http://res.icesoft.org/docs/icemobile/v1_latest/jsf/tld/mobi/deviceStylesheet.html]

© Copyright 2016 ICEsoft Technologies Canada Corp.