ICEfaces-EE
  1. ICEfaces-EE
  2. IPCK-515

Add Mobile Device Simulator to ICEfaces EE bundle & showcase

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: EE-4.0.0.GA
    • Component/s: Release, Samples
    • Labels:
      None
    • Environment:
      ICEfaces EE 4.0
    • Assignee Priority:
      P1
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      This JIRA is to introduce the ICEmobile EE Mobile Device Simulator into the the ICEfaces EE 4.0 bundle, and provide build-time configuration options for including it / using it with the ICEfaces Mobile Showcase.

        Activity

        Ken Fyten created issue -
        Ken Fyten made changes -
        Field Original Value New Value
        Fix Version/s EE-4.0.0.GA [ 11071 ]
        Ken Fyten made changes -
        Affects Documentation (User Guide, Ref. Guide, etc.),Sample App./Tutorial [ 10003, 10001 ]
        Assignee Priority P1 [ 10010 ]
        Hide
        Ken Fyten added a comment -

        Committed revision 40692 - Completed the initial commit for the Mobile Device Simulator, ported from the icemobile-ee/trunk as of svn rvn# 39164.

        Show
        Ken Fyten added a comment - Committed revision 40692 - Completed the initial commit for the Mobile Device Simulator, ported from the icemobile-ee/trunk as of svn rvn# 39164.
        Hide
        Ken Fyten added a comment -

        Remaining issues/tasks:

        • Simulator needs to be updated as follows:
          • Remove Blackberry devices
          • Remove old iPhone 3/4 devices
          • Add iPhone 6 device(s)
          • Replace iPad with iPad Air
          • Add Windows Phone device
        • The ICEfaces Showcase has the following issues when running the Simulator:
          • Opens to the Desktop Showcase instead of the Mobile Showcase
          • Mobile Showcase viewManager doesn't show "Back/Menu" button in top left corner, so no way to get to the menu from the initial page.
        Show
        Ken Fyten added a comment - Remaining issues/tasks: Simulator needs to be updated as follows: Remove Blackberry devices Remove old iPhone 3/4 devices Add iPhone 6 device(s) Replace iPad with iPad Air Add Windows Phone device The ICEfaces Showcase has the following issues when running the Simulator: Opens to the Desktop Showcase instead of the Mobile Showcase Mobile Showcase viewManager doesn't show "Back/Menu" button in top left corner, so no way to get to the menu from the initial page.
        Hide
        Philip Breau added a comment - - edited

        ipad air calculations:

        ipad air: 2048 x 1536 native device pixels
        **************************
        device pixel ratio: default 2.5, 3.5 with device-with viewport set
        total pixels = 3,145,728
        pixels divided by 3.5 = 898,779
        4:3 aspect ratio

        calculated CSS pixels
        *********************
        1000 x 750 = 750000
        1024 x 768 = 786432
        1068 x 801 = 855468
        1076 x 807 = 868332
        1084 x 813 = 881292
        1086 x 815 = 885090
        1092 x 819 = 894348
        1096 x 822 = 897624 <-------- closest match
        1097 x 823 = 902831

        The simulator will have to be updated to scale 3.5x for this device (when the scale to device option is selected). I think currently, it only scales the others to 2x.

        The ipad air images are sized so the viewport is 1096 x 822.

        The simulator control button images will also have to be updated for the ipad air.

        Show
        Philip Breau added a comment - - edited ipad air calculations: ipad air: 2048 x 1536 native device pixels ************************** device pixel ratio: default 2.5, 3.5 with device-with viewport set total pixels = 3,145,728 pixels divided by 3.5 = 898,779 4:3 aspect ratio calculated CSS pixels ********************* 1000 x 750 = 750000 1024 x 768 = 786432 1068 x 801 = 855468 1076 x 807 = 868332 1084 x 813 = 881292 1086 x 815 = 885090 1092 x 819 = 894348 1096 x 822 = 897624 <-------- closest match 1097 x 823 = 902831 The simulator will have to be updated to scale 3.5x for this device (when the scale to device option is selected). I think currently, it only scales the others to 2x. The ipad air images are sized so the viewport is 1096 x 822. The simulator control button images will also have to be updated for the ipad air.
        Hide
        Philip Breau added a comment -

        The device pixel ratio is the difference between the number of physical pixels on the screen (ie. the published screen resolution) vs the CSS "pixels" the browser uses to display content. Devices with high resolution don't display browser content at the same dimension. They scale it up, so that the content doesn't appear unusually small on the device.

        see http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html for more background.

        Show
        Philip Breau added a comment - The device pixel ratio is the difference between the number of physical pixels on the screen (ie. the published screen resolution) vs the CSS "pixels" the browser uses to display content. Devices with high resolution don't display browser content at the same dimension. They scale it up, so that the content doesn't appear unusually small on the device. see http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html for more background.
        Hide
        Philip Breau added a comment - - edited

        Note that the simulator passes the 'view' url query parameter to force large or small views. This was integrated with ICEmobile before and allowed the simulator to show the appropriate view for the selected device. see simulator.js#openIphone().

        On the server side, the 'view' param was integrated with the DeviceResourceRenderer and ClientDescriptor classes. The DeviceResourceRenderer just used the view param to select the proper theme. So we probably no longer need that. But the ClientDescriptor will have to be updated to accept the view param.

        see ClientDesciptor.getInstance() method.

        Show
        Philip Breau added a comment - - edited Note that the simulator passes the 'view' url query parameter to force large or small views. This was integrated with ICEmobile before and allowed the simulator to show the appropriate view for the selected device. see simulator.js#openIphone(). On the server side, the 'view' param was integrated with the DeviceResourceRenderer and ClientDescriptor classes. The DeviceResourceRenderer just used the view param to select the proper theme. So we probably no longer need that. But the ClientDescriptor will have to be updated to accept the view param. see ClientDesciptor.getInstance() method.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #44078 Wed Feb 18 08:32:19 MST 2015 philip.breau IPCK-515 simulator
        - add simulator hide scrollbar styles to mobile.css
        - add 'run simulator in production' setting
        - add simulator assets for custom start page settings
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/mobi/component/resources/org.icefaces.component.css/mobile.css
        Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/WEB-INF/web.xml
        Commit graph ADD /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/simulator-assets/simulator.properties
        Commit graph ADD /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/simulator-assets
        Hide
        Philip Breau added a comment -

        Added iphone 6 plus and removed iphone 3/4

        • note that the iphone 6 plus images will have to be touched up as they're missing the browser chrome and could be sharper
        Show
        Philip Breau added a comment - Added iphone 6 plus and removed iphone 3/4 note that the iphone 6 plus images will have to be touched up as they're missing the browser chrome and could be sharper
        Hide
        Philip Breau added a comment -

        Also added simulator custom settings to showcase.

        Show
        Philip Breau added a comment - Also added simulator custom settings to showcase.
        Hide
        Philip Breau added a comment -

        The simulator has now been updated with all of the new images and devices. The viewport clipping that was happening on larger devices, such as the ipad, is now also fixed. A couple of remaining minor changes should be made:

        • change icemobile header logo to icefaces logo
        • update icefaces ant script to include the simulator jar in the showcase when it's available
        Show
        Philip Breau added a comment - The simulator has now been updated with all of the new images and devices. The viewport clipping that was happening on larger devices, such as the ipad, is now also fixed. A couple of remaining minor changes should be made: change icemobile header logo to icefaces logo update icefaces ant script to include the simulator jar in the showcase when it's available
        Hide
        Ken Fyten added a comment -

        Philip,

        These changes look good. What do you think of the idea of making the iPhone 6 Plus a "large" format screen for MOBI component purposes (similar to iPads, etc.)?

        Show
        Ken Fyten added a comment - Philip, These changes look good. What do you think of the idea of making the iPhone 6 Plus a "large" format screen for MOBI component purposes (similar to iPads, etc.)?
        Hide
        Philip Breau added a comment -

        Doesn't seem feasible. The user agent strings are identical between the iphone 6 and iphone 6 plus, so server side detection isn't possible. And client side detection would have to rely on a generic media query based on the viewport dimensions. The CSS pixel dimensions are 414 x 767, which is too small for a large view layout.

        Show
        Philip Breau added a comment - Doesn't seem feasible. The user agent strings are identical between the iphone 6 and iphone 6 plus, so server side detection isn't possible. And client side detection would have to rely on a generic media query based on the viewport dimensions. The CSS pixel dimensions are 414 x 767, which is too small for a large view layout.
        Ken Fyten made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]

          People

          • Assignee:
            Ken Fyten
            Reporter:
            Ken Fyten
          • Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: