Road blockers

18 posts, 0 answers
  1. Norman
    Norman avatar
    18 posts
    Member since:
    Feb 2013

    Posted 19 Feb 2013 Link to this post

    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.
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 21 Feb 2013 Link to this post

    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:

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Norman
    Norman avatar
    18 posts
    Member since:
    Feb 2013

    Posted 24 Feb 2013 Link to this post

    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?
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 27 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Norman
    Norman avatar
    18 posts
    Member since:
    Feb 2013

    Posted 27 Feb 2013 Link to this post

    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>

  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 01 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Norman
    Norman avatar
    18 posts
    Member since:
    Feb 2013

    Posted 01 Mar 2013 Link to this post

    I added the data-stretch="true"> to the code and it continues to do the same behavior as provided in the video.
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 05 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Norman
    Norman avatar
    18 posts
    Member since:
    Feb 2013

    Posted 05 Mar 2013 Link to this post

    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? 
  11. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 07 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Norman
    Norman avatar
    18 posts
    Member since:
    Feb 2013

    Posted 07 Mar 2013 Link to this post

    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?
  13. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 11 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Norman
    Norman avatar
    18 posts
    Member since:
    Feb 2013

    Posted 11 Mar 2013 Link to this post

    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?
  15. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 13 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  16. Norman
    Norman avatar
    4 posts
    Member since:
    Mar 2013

    Posted 13 Mar 2013 Link to this post

    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

  17. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 15 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  18. Norman
    Norman avatar
    4 posts
    Member since:
    Mar 2013

    Posted 16 Mar 2013 Link to this post

    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.
  19. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 18 Mar 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready