Road blockers

[Norman]

As I find Kendo UI extremely well fitted for me and I love many things about it I have crucial concerns about the following things:

During my trial process I have confronted a series of road blocks. I would like to see what solutions there might be. Please let me know if they have a solution or if I should consider another html5 framework instead. I have been trying to accelerate the speed of transitions between views (screens). How can that be managed? I would like to make the time (delay) of the transitions a bit shorter (faster) and test with different types of transition effects.

Also, I have noticed the response of the touch in rows or buttons is not the way native apps behaves. They have a bit of a delay when you touch something. Native apps will react to the on Release event after a touch and then, after a short delay, do the action. How can that be done with Kendo UI? 

Is there a way of creating charts in mobile Kendo UI? Can you provide some example URLs?
 
Can I make a web URL display inside the mobile web app while keeping the navigation and tab bar? Can I see a PDF file hosted in a URL within the same mobile web app with the navigation bar on top?
 
I have also noticed that using the Google maps API makes the tiles act weird and this only happens with Kendo UI as far as I know. Check out the video included.

[Alexander Valchev]

Hi Norman,

Thank you for your interest in KendoUI. I'll go over your questions one by one:

1. I have been trying to accelerate the speed of transitions between views (screens). How can that be managed?

Currently page transitions duration can't be changed easily without changing/overriding the source.

2. Also, I have noticed the response of the touch in rows or buttons is not the way native apps behaves. They have a bit of a delay when you touch something. Native apps will react to the on Release event after a touch and then, after a short delay, do the action. How can that be done with Kendo UI?

On my side the behaviour between native and browsers buttons seems to be very similar. I am not sure what is your current implementation, but if you use the DOM click event it will most probably cause troubles. I recommend you to work with build-in click events of the buttons. This examples demonstrates the approach:

• http://demos.kendoui.com/mobile/button/events.html

3. Is there a way of creating charts in mobile Kendo UI? Can you provide some example URLs?

KendoUI Mobile itself does not contain chart widget, however you may use KendoUI DataViz Charts inside your mobile application. Please check the DataViz demos: http://demos.kendoui.com/dataviz/overview/index.html

4. Can I make a web URL display inside the mobile web app while keeping the navigation and tab bar? Can I see a PDF file hosted in a URL within the same mobile web app with the navigation bar on top?

hideAddressBar option determines whether to hide the browser address bar. Supported only in iPhone and iPod. Note that it doesn't affect standalone mode as there the address bar is always hidden. You can open PDF files in the browser using external links.

5. I have also noticed that using the Google maps API makes the tiles act weird and this only happens with Kendo UI as far as I know. Check out the video included.

I am afraid that the attachment is not available. We have a code library that demonstrates how to use Google maps inside KendoUI Mobile application. Please check it and let me know if you have any further questions.

Kind regards,
Alexander Valchev
the Telerik team

[Norman]

Hi Alexander:

Thanks for your reply.  Please take a look at my comments:

1. I have been trying to accelerate the speed of transitions between views (screens). How can that be managed?
Currently page transitions duration can't be changed easily without changing/overriding the source.

Take a look at the transition effect.
https://dl.dropbox.com/u/1288821/Transitions.MOV

Put your eyes on the right side of the screen as the transition between screens is happening. You will see sometimes that the screen that is about to go from the screen goes white in a fraction of a second. Also, the transitions are not consistent. They move faster or slower. How can that be handled to be consistent and to do the transition faster? if it is by changing the source, what file should be changed?

2. Also, I have noticed the response of the touch in rows or buttons is not the way native apps behaves. They have a bit of a delay when you touch something. Native apps will react to the on Release event after a touch and then, after a short delay, do the action. How can that be done with Kendo UI?
On my side the behaviour between native and browsers buttons seems to be very similar. I am not sure what is your current implementation, but if you use the DOM click event it will most probably cause troubles. I recommend you to work with build-in click events of the buttons. 

I am more concern on the list items when they are touched rather than buttons. How can items from a list be touched and have a delay before displaying the next screen or action?
 

4. Can I make a web URL display inside the mobile web app while keeping the navigation and tab bar? Can I see a PDF file hosted in a URL within the same mobile web app with the navigation bar on top?
hideAddressBar option determines whether to hide the browser address bar. Supported only in iPhone and iPod. Note that it doesn't affect standalone mode as there the address bar is always hidden. You can open PDF files in the browser using external links.

What I ment was to keep the navigation bar of the web app not the Address bar. In iOS, when you add to the home screen a web app, you get ride of the URL bar. The only thing available to navigate between screens is the navigation bar and the back button if you create one in the html. I want to know if I am able to display a PDF URL in a screen but still keep navigation bar to be able to return to another screen in the Kendo app and not to open a PDF or URL by jumping into a new Safari full screen session and not having a way to return back to the app. In Android this is not an issue because you have the physical Back button.


5. I have also noticed that using the Google maps API makes the tiles act weird and this only happens with Kendo UI as far as I know. Check out the video included.

Check how the tiles are coming out in this video.

https://dl.dropbox.com/u/1288821/Google%20Maps.MOV

This was created using the link you provided which was the original one I saw. It works but it doesn't work well. When you zoom out or move side to side, the tiles should appear gray before they refresh. It is keeping the map floating around instead and then refreshing on top of it. It looks very weird. Can that be fixed?

Is there any Kendo Apps that could be shared besides the examples on the website?

[Alexander Valchev]

Hello Norman,

Thank you for the feedback. Regarding your comments:

1. The behaviour that you showed is not expected. I will forward the issue with inconsistent transitions to the corresponding team members for further investigation.
   
   The file that which contains the transition object is named kendo.fx.js. I would like to remind you that providing directions how to modify the source code is out of the scope of our standard support service.
   
   
2. I am afraid that this is the default behaviour of the ListView's click event. If you wish you may navigate manually after given timeout or to customize the touch area and how user-initiated touch events are handled by using KendoUI touch events.
   
   
3. What you would like to achieve is not supported. When you navigate to external link (in your case a pdf file) mobile application will be 'quitted'. There is no way to add a navigation bar or prevent the default iOS behaviour. As a workaround you may consider displaying the pdf file inside an iframe - in this way there will be no need to leave the application.
   
   
4. I am not sure how exactly your implementation looks like. Could you please provide a small example which I can inspect and test locally? Does the same problem persists if you do not build KendoUI Mobile Application but leave only google maps? Please provide such example and I will check it right away. Thank you in advance for the cooperation.
   
   
5. Is there any Kendo Apps that could be shared besides the examples on the website?
   
   Available examples are: the demos, code library projects, the samples from GitHub, Sushi application.

Kind regards,
Alexander Valchev
the Telerik team

[Norman]

This is the complete code I am using in that google maps screen.

<!-- hook up to the init event of the view and initialize the google map -->
<div data-role="view" data-init="buildMap" id="map" data-title="Map" zoom="true">
    <div id="map_canvas" style="width:100%;"></div>
</div>

<script>
new kendo.mobile.Application(document.body, {layout: "default"});

//initialize the google map
function buildMap(e) {
    var myOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };

    var mapElement = $("#map_canvas");
    var container = e.view.content;

    var map = new google.maps.Map(mapElement[0], myOptions);
}

</script>

[Alexander Valchev]

Hi Norman,

To avoid problems with Google Maps you should disable the View scroller by making the View stretched (data-stretch="true").

I tested the following code on iPhone 4S and got everything working as expected.

<!-- hook up to the init event of the view and initialize the google map -->
<div data-role="view" data-init="buildMap" id="map" data-title="Map" data-stretch="true">
    <div id="map_canvas" style="width:100%;"></div>
</div>

<script>
    new kendo.mobile.Application(document.body, {layout: "default"});

    //initialize the google map
    function buildMap(e) {
        var myOptions = {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };

        var mapElement = $("#map_canvas");
        var container = e.view.content;

        var map = new google.maps.Map(mapElement[0], myOptions);
    }

</script>

Kind regards,
Alexander Valchev
the Telerik team

[Norman]

I added the data-stretch="true"> to the code and it continues to do the same behavior as provided in the video.

[Alexander Valchev]

Hi Norman,

I cannot reproduce the behaviour from your screen cast on iOS device (iPhone 4S). Could you please check this video and let me know what I am missing?
For your convenience I am attaching the full code of my test page.

Kind regards,
Alexander Valchev
the Telerik team

[Norman]

HI Alexander:

I found the problem. I was using a screen before getting to the google maps screen. For that reason, I had to load the js files in the initial screen and add a few things to have the navigation bar in it. The style section was being included in the initial file and not in the google map file. When I changed the style code to the google maps screen, it is how behaving correctly. 

The other situation I have now is that the app continues to reload itself every time I minimize the web app. I always display the splash screen again and I have to wait for it to reload even when the web app icon is in the multi-task bar of the iphone. How can I make the web app stay in memory and not have to reload? 

[Alexander Valchev]

Hello Norman,

I am afraid that questions related to the memory management of iDevices are not directly related to the functionality or features that KendoUI Mobile provides and as such is out of the scope of our standard support services. My recommendation is to look for advice at Apple developer forums.
Thank you in advance for the understanding.

Regards,
Alexander Valchev
the Telerik team

[Norman]

The problem is not an iDevice issue. It is an sdk issue. I have mobile web apps developed with Sencha Touch and they are retained in the multitask bar and it doesn't reload the entire app again. This is only happening to me with Kendo UI web apps. Is there a way to keep cache the app when it was already opened and it is still in the multitask bar?

[Petyo]

Hi Norman,

I tried to reproduce the problem you describe using PhoneGap 2.5.0 and a very simple Hello World app. Please see the screen recording attached. After minimized, the app restores itself correctly to the state left.  What am I missing in this case? 

Greetings,
Petyo
the Telerik team

[Norman]

What you are missing is that I never mentioned anything about PhoneGap. I am referring to web app behavior on iOS, not native behavior of a web app wrapped with PhoneGap. KendoUI, as a web app, should retain the web app in the multitask bar as any native app once it is opened and it is not doing that. A web app can have it's own app icon and splash screen if you define it in the index.html file so, once it is a web app and it is in the iOS device's home screen, it will behave very similar to a native app using a full screen Safari web viewer (by default of iOS). No PhoneGap at all.  When you are opening a web app created with Kendo UI (at least the ones I have created), it is not displaying the app immediately when I click on the icon from the multi-task bar (if it was already opened, otherwise it shouldn't be in the multi-task bar). It is not holding up the content in the phone and have to reload again. This is something other web app SDKs don't have a problem. They can be reopened from the multi-task bar and they will open immediately without displaying the splash screen and going back to the server to get the content.  I was hoping to see that same behavior on KendoUI. Is it possible?

[Petyo]

Hi Norman,

I tested the scenario you describe with several mobile frameworks - they behave in the same manner as Kendo UI Mobile. Perhaps you may provide more concrete instructions on how to observe it? If such behavior is possible, we may be able to replicate it with Kendo UI Mobile, too.

Regards,
Petyo
the Telerik team

[Norman]

You can check the files I am using here in this zip file.  Check the code and let me know if I am doing something wrong. If you see the transitions between one screen and the other (sliding from left to right) it is not behaving like a native app. Put attention on the right side of the screen almost at the end of the transition how it jumps or removes the background in a fraction of a second. It is also not consistent in the speed of the transitions between the tabs and it is not moving with the easing that native transitions will do.

Here are the files
https://dl.dropbox.com/u/1288821/Archive.zip

[Petyo]

Hi Norman,

Perhaps I was not clear enough. I was asking for an example which works the in the way you describe in terms of resuming the app state.  

As per your other question - our next release will feature several improvements in terms of view transition behavior, addressing the problem you describe. 

Regards,
Petyo
the Telerik team

[Norman]

Hi:

I thought I was able to see an app made with another SDK that was retaining in cache the web app but it seem I was looking at some other thing. I can't find it now and I have tested with many other web apps. That means I'm ok with it because that is a normal behavior of all web apps then.

My main concern is the transitions with Kendo UI. That seems to be not fixed in the new upcoming version, at least with the beta that is already available. I read about the new changes in the upcoming version and there is nothing mentioned about transitions or animations. I see that the tab example apps under the new upcoming version is not doing any animations to transition between screens. They just appear. That is an easy way of hiding the issue of the transitions because it will not show up. But the reality is that iOS transitions (from left to right and right to left) are not working properly in the current version.  I wish that could be either really resolved in the next version or be customizable and adjusted by the developer.

[Petyo]

Hello Norman,

The optimization I refer to is not part of the beta, and will be available in the official release, due this week. After the release, you may review the performance of the transitions in our online demos and decide if they match your requirements.

I would like to share some more details about the transitions and their perceived performance. The transition "smoothness" has three major factors:

- Time it takes for the app to react to the user input (usually, touchend);
- The frame rate of the transition;
- The transition speed itself.

If the view about to be displayed is complex, the time it takes for the transition to be initiated increases significantly, as just showing (changing CSS display from none to block) the view (before it is transitioned) may take significant amount of time.

Moreover, complex views (for example, images and textured elements) usually result in lower frame rate. In such case, tweaking the transition speed would not improve the first two factors and can't improve the perception of the transition itself. In fact, it may worsen the frame rate. 

Hopefully this information will be useful for people who are looking into optimizing their application performance. 

Regards,
Petyo
the Telerik team