This is a migrated thread and some comments may be shown as answers.

Phone vs. Tablet

27 Answers 794 Views

SplitView

This is a migrated thread and some comments may be shown as answers.

27 Answers, 1 is accepted

answered on 17 Jul 2012, 07:54 PM

Hello Josh-

Building on Atanas' input, Kendo UI does not endorse a "one-size-fits" or "write once, run everywhere" philosophy. We think this approach to HTML/JS apps tends to produce results that are average everywhere and great nowhere.

Instead, we want to help facilitate "tailored" experiences that look great on each form factor and device where they are run. Kendo UI Mobile now provides the essential building blocks you need to build experiences targeted at phones and tablets, allowing you to build tailored views while we automatically handle the differences between different platforms (iOS, Android, Blackberry, etc.) at the framework level.

At an architectural level, yes, we would promote separate views for Web, Phone, and Tablet, with a common (shared) JavaScript application and data layer. This will produce the best results and facilitate better long-term flexibility.

Hope this extra info helps. We'll get a full cross-plat application demo posted soon.

-Todd

answered on 18 Jul 2012, 06:53 PM

As always, it depends.

It sounds like you are serving your Kendo UI Mobile app from a server, and in that case it probably makes the most sense to let the server do the device detection (via UserAgent) and then return the proper HTML view to the browser. That HTML view will contain the necessary Kendo UI Mobile markup for either a Phone app or Tablet app.

In my own projects, I end-up with a structure that looks something like:

--Scripts
--Content
--Mobile
----css
----img
----script
--Tablet
----css
----img
----script

Where common or shared CSS and JavaScript live in the top-level Scripts/Content folders, and platform-specific CSS/JS live in their respective directories.

If you're trying to deploy one code base that will detect and adapt on the client, I think the solution would be a bit trickier. Let me know if that's what you're after and we can share some ideas.

-Todd

answered on 18 Jul 2012, 07:45 PM

Hi Todd,

I am building a Cordova/PhoneGap app and hoping to create a universal app which will install on both iPhone and iPad as well as Android phones and tablets. I had hoped the layout would have an attribute like "data-platform" but to detect the device type. Then I could specify the same "data-id" and Kendo would send tablets to the correct view. But I can do it manually if I can use javascript to determine if its a tablet of phone. I'm just not sure how to determine if its a tablet - some of the larger screen phones have higher screen resolutions than some of the older tablets and user agents aren't clear if its a tablet or phone. But I see Sencha Touch has an isTablet property which determines the device somehow. Any advice is greatly appreciated.

<div data-role="layout" data-id="foo" data-platform="ios" data-device="tablet">

Thanks,
Jason

answered on 18 Jul 2012, 08:21 PM

Actually, Kendo UI does provide similar framework level properties for detecting the capabilities and type of device you're using:
http://docs.kendoui.com/api/framework/kendo#properties

If you navigate to the support.mobileOS section, you'll see the property "tablet," which returns the string identifier for the tablet using your app (or false if the device is not a tablet). So, in your app, you could do something like:

if (!kendo.support.mobileOS.tablet) {

// Initialize tablet app views

} else {

//Initialize smartphone app views

}

I'll try to work on a more complete example to share. Hopefully this gives you a starting point. We'll also consider your suggestion for simplifying initialization of a universal at the framework level so extra code isn't required.

-Todd

answered on 18 Jul 2012, 10:18 PM

Here is a quick demo that shows a "Universal" app approach:

http://jsfiddle.net/toddanglin/YGUeJ/5/embedded/result/

Try using Chrome and the DevTools to change the browsers UserAgent (refreshing the page after making the change). You should see that when set to iPhone, a Phone app loads. When set to iPad, a SplitView Tablet app loads.

The key is simply including both the phone and tablet starting views in the HTML, and then, based on the type of device, choosing one or the other to initialize the app:

$(function() {

var app,

//Must be mobile and tablet

isTablet = kendo.support.mobileOS && kendo.support.mobileOS.tablet,

appElement = null,

appLayout = null;

//Get the correct app HTML container

appElement = (isTablet) ? $("#tabletApp") : $("#phoneApp");

appLayout = (isTablet) ? null : "phoneDefault";

//Initialize the app with the selected container

app = new kendo.mobile.Application(appElement, {

layout: appLayout,

transition: 'slide'

});

//Adjust visibility of proper app container (used to prevent FOUJUI)

appElement.show();

});

You can see more using the jsFiddle. Hope this example helps!

-Todd

answered on 24 Jul 2012, 09:05 PM

Todd, Thank you for your responses! I am increasingly leveraging kendo wherever I can but a recurring theme of late is integration. I am building an application that will span web/tablet/mobile as I have said in previous post and I am finding it painful to incorporate all of the kendo suites when taken into the context of tablet/mobile. Those 2 suites will display the native applications but when using dataviz inconjunction with it is it up to the user to display the dataviz theme black for the android template as it is the only 1 that displays well. It would be nice if telerik.. 1. post a full blown example spanning web/tablet/mobile to see best practices 2. Put some forethought into integration across all suites and add some automatic things that will make the experience more streamlined. Being a developer myself I understand the struggles it is to deliver projects in a timely fashion sometimes but if you were to take the full blown experience into account I think the users that are on the fence about using all of the kendo suites are more likely to convert and use them all IF and only IF using all 3 provides a "ready to go" streamlined/integrated experience. After all, 1 of the core competencies of the kendo framework is seamless integration so integration between the libraries should be a a use case that is considered early on. Hope all of that makes sense, at the end of a coding session and tired. Despite the tone kendo is looking better everyday..keep it up!

answered on 24 Jul 2012, 09:42 PM

Thanks for the additional feedback, Josh. Let me try to address your points in order:

DataViz Themes on Mobile: This is an interesting idea! We primarily focus on auto-adapting the Kendo UI Mobile widgets across platforms, so we haven't applied that technique to DataViz. Definitely something we can investigate. In the meantime, hopefully you're taking advantage of the kendo.support.mobileOS object to detect and change data viz themes as you prefer.
Integration Example: We've heard the feedback on this loud and clear. We're working hard to produce more large/medium size demos and complete integration demos across all platforms, as you suggest. That's high on our TODO list, and hopefully we'll have a few ready for our next release.

Other than theme adapting and DataViz, if you have specific trouble using pieces of Kendo UI together, definitely let us know. In general, the pieces of Kendo UI are designed to work seamlessly together, so we like to hear where users are having trouble.

Thanks again for taking the time to share. Happy to you are enjoying Kendo UI overall!

-Todd

answered on 29 Sep 2012, 05:31 PM

Todd,

Thanks for the nice example on how to diplay a tablet versus phone view. My only problem is that if I use your solution below, i get element id conflicts because i'm re-using views from my tablet view down in the phone root div. I want to use the same javascript code base for both leveraging datasources, jquery selectors etc... but this breaks my app when both root divs are loaded in the dom.

<div id="tabletApp" style="display:none;">

</div>

<div id="phoneApp" style="display:none;">

</div>

which leads me to my question:

is there a recommended way to remotely load the tablet or phone root div during app initialization, so both views are NOT in the browser's dom at the same time?

something like this:

//Initialize the app with the selected container

app = new kendo.mobile.Application(appElement, {

layout: http://myapp/phone or http://myapp/tablet,

transition: 'slide'

});

Thanks in advance.

answered on 29 Sep 2012, 11:40 PM

Hi Josh, yes...i too am using MVC 4 and Web Api. I see where you can define display mode conditions in MVC 4 and it will automatically route you to the correct page based on extenion, but i wasn't sure of which user agent filters to set in the condition for all kendo mobile supported phones and tablets. I'd love to use that aproach if i knew the filters to set.

Again, i would like to filter based on device type. for example:

Index.tablet.cshtml (kendo mobile supported tablets)
Index.phone.cshtml (kendo mobile supported phones)

Below is an example filter set in Global.asax Application_Start(). It would be great if someone would provide a complete sample filter for phones and tablets. Telerik? Can you help?

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("phone")

{

ContextCondition = (

context => context.GetOverriddenUserAgent().IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0 ||

context.GetOverriddenUserAgent().IndexOf("iPod", StringComparison.OrdinalIgnoreCase) >= 0

)

});

answered on 30 Sep 2012, 01:41 PM

I ran into the same issue, my project is mainly concerned with IPHONE/IPAD and the android is just icing on the cake. I will tell you up front I am not concerned with Blackberry at all as I think that company is on the way out in their marketplace.

In my globa.ascx.cs class I have a few methods that I use:

private static bool IsMobile(HttpContextBase context)
        {
            //return (context.GetOverriddenBrowser().IsMobileDevice || context.Request.Browser.IsMobileDevice);
            return context.Request.Browser.IsMobileDevice;
        }

        //ensure blackberry, iphone, android
        public static bool Mobile_ContextCheck(HttpContextBase objHttpContextBase)
        {
            string strUserAgent = objHttpContextBase.Request.UserAgent;
            Regex strBrowser = new System.Text.RegularExpressions.Regex(@"android.+mobile|blackberry|ip(hone|od)", RegexOptions.IgnoreCase | RegexOptions.Multiline);
            
            if (IsMobile(objHttpContextBase) && strBrowser.IsMatch(strUserAgent))
            {
                return true;
            }
 
            return false;
        }
 
        //ensure TABLETS
        public static bool Tablet_ContextCheck(HttpContextBase objHttpContextBase)
        {
            string strUserAgent = objHttpContextBase.Request.UserAgent;
            Regex strBrowser = new System.Text.RegularExpressions.Regex(@"ipad|blackberry|android", RegexOptions.IgnoreCase | RegexOptions.Multiline);
            int iTabletQualifyingSize = 1000;
 
            //Determine if dimensions are 640x480 (generic size that is put in there for desktop and some tablets)
            bool isGenericTabletDesktopScreenSize = (
                (objHttpContextBase.Request.Browser.ScreenPixelsWidth == 640 || objHttpContextBase.Request.Browser.ScreenPixelsWidth == 480) &&
                (objHttpContextBase.Request.Browser.ScreenPixelsHeight == 640 || objHttpContextBase.Request.Browser.ScreenPixelsHeight == 480));
 
            /*LOGIC
             * 1. Determine if IPAD
             * 2. Next determine if Blackberry | Android
             * 3. If 2 == true, judge tablet based on screen size/width
             *      a. If 640x480 OR 480x640 (generic size reported), must be tablet
             *      b. Otherwise judge if width OR height > threshold qualifying size
             */
            if (strUserAgent.ToUpper().Contains("IPAD") ||
                (strBrowser.IsMatch(strUserAgent) &&
                (isGenericTabletDesktopScreenSize ||
                (objHttpContextBase.Request.Browser.ScreenPixelsWidth >= iTabletQualifyingSize || objHttpContextBase.Request.Browser.ScreenPixelsHeight >= iTabletQualifyingSize))))  //if vendor AND size is big enough
            { 
                return true;
            }
 
            ////For tablets, must be mobile AND meet a min size requirement
            //if (strBrowser.IsMatch(strUserAgent) && //is particular tablet vendor
            //    (objHttpContextBase.Request.Browser.ScreenPixelsWidth >= iTabletQualifyingSize || objHttpContextBase.Request.Browser.ScreenPixelsHeight >= iTabletQualifyingSize))
            //{
            //    return true;
            //}
 
            return false;
        }

Then in my App_Start Method I have:

 // Enable the mobile detection provider.
            //HttpCapabilitiesBase.BrowserCapabilitiesProvider = new FiftyOne.Foundation.Mobile.Detection.MobileCapabilitiesProvider();
 
            /*********CUSTOM VIEW MODES
             * 1. Normal View
             * 2. Tablet
             * 3. Mobile
             * ***/
 
            /*MOBILE*/
            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("Mobile")
            {
                ContextCondition = context => Mobile_ContextCheck(context)
            });
 
            /*TABLET*/
            DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("Tablet")
            {
                ContextCondition = context => Tablet_ContextCheck(context)
            });

Now the only library that I integrated with was 51.Mobie.Foundtation's free library. It can give you the device screen/width and some other properties to help you detect devices. They DO have a IsTablet method but it is in the paid version of their library so you can buy that you like. I have tested for awhile and the above code is working well and I do a screen size/measurement test to decide vs android phone vs. android tablet (basically if either the screen width or height exceeds a size, i am looking at a tablet).

Detecting the iphone/ipad is easy as they use thier keywords. Let me know if that helps you out.

answered on 05 Nov 2012, 08:02 PM

Hi all,

I am a relative newbee to x-platform apps so please excuse any ignorance.

I am having trouble detecting the difference between an android cell phone and an android table using kendo.support.mobileOS.tablet property. This returns true in the ICENIUM (a nifty hybrid mobile app IDE from Telerick http://www.icenium.com/) for both the Android and Android Tablet emulators. Is this just a bug in ICENIUM or in the property itself.
It seems to work fine for iPad.

I am trying to get my management sold on Kendo, and ICENIUM and am developing a quick POC. Would be great to take it all the way.

Thanks
Richard

answered on 02 Sep 2014, 10:48 PM

Hi Todd,

When I tried this, the content of the views did not display, as display value remained as display:none;.

I then tried this to rectify that:

function showLogin() {
//clearLogin();
console.log("showing");
if (!kendo.support.mobileOS.tablet) {
// Initialize tablet app views
$("#tabletApp").css('display','block');
}
else {
//Initialize smartphone app views
$("#phoneApp").css('display','block');
}
}

But it didn't work because it did change the view to display:block, but then inside the view there was a container div that had display:none;

How to I make the display:none change to display:block for the correct view depending on if a tablet or phone is being used?

Thanks!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Phone vs. Tablet

27 Answers, 1 is accepted