Alpha Software Mobile Development Tools:   Alpha Anywhere    |   Alpha TransForm subscribe to our YouTube Channel  Follow Us on LinkedIn  Follow Us on Twitter  Follow Us on Facebook

Announcement

Collapse

The Alpha Software Forum Participation Guidelines

The Alpha Software Forum is a free forum created for Alpha Software Developer Community to ask for help, exchange ideas, and share solutions. Alpha Software strives to create an environment where all members of the community can feel safe to participate. In order to ensure the Alpha Software Forum is a place where all feel welcome, forum participants are expected to behave as follows:
  • Be professional in your conduct
  • Be kind to others
  • Be constructive when giving feedback
  • Be open to new ideas and suggestions
  • Stay on topic


Be sure all comments and threads you post are respectful. Posts that contain any of the following content will be considered a violation of your agreement as a member of the Alpha Software Forum Community and will be moderated:
  • Spam.
  • Vulgar language.
  • Quotes from private conversations without permission, including pricing and other sales related discussions.
  • Personal attacks, insults, or subtle put-downs.
  • Harassment, bullying, threatening, mocking, shaming, or deriding anyone.
  • Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
  • Sexually explicit or violent material, links, or language.
  • Pirated, hacked, or copyright-infringing material.
  • Encouraging of others to engage in the above behaviors.


If a thread or post is found to contain any of the content outlined above, a moderator may choose to take one of the following actions:
  • Remove the Post or Thread - the content is removed from the forum.
  • Place the User in Moderation - all posts and new threads must be approved by a moderator before they are posted.
  • Temporarily Ban the User - user is banned from forum for a period of time.
  • Permanently Ban the User - user is permanently banned from the forum.


Moderators may also rename posts and threads if they are too generic or do not property reflect the content.

Moderators may move threads if they have been posted in the incorrect forum.

Threads/Posts questioning specific moderator decisions or actions (such as "why was a user banned?") are not allowed and will be removed.

The owners of Alpha Software Corporation (Forum Owner) reserve the right to remove, edit, move, or close any thread for any reason; or ban any forum member without notice, reason, or explanation.

Community members are encouraged to click the "Report Post" icon in the lower left of a given post if they feel the post is in violation of the rules. This will alert the Moderators to take a look.

Alpha Software Corporation may amend the guidelines from time to time and may also vary the procedures it sets out where appropriate in a particular case. Your agreement to comply with the guidelines will be deemed agreement to any changes to it.



Bonus TIPS for Successful Posting

Try a Search First
It is highly recommended that a Search be done on your topic before posting, as many questions have been answered in prior posts. As with any search engine, the shorter the search term, the more "hits" will be returned, but the more specific the search term is, the greater the relevance of those "hits". Searching for "table" might well return every message on the board while "tablesum" would greatly restrict the number of messages returned.

When you do post
First, make sure you are posting your question in the correct forum. For example, if you post an issue regarding Desktop applications on the Mobile & Browser Applications board , not only will your question not be seen by the appropriate audience, it may also be removed or relocated.

The more detail you provide about your problem or question, the more likely someone is to understand your request and be able to help. A sample database with a minimum of records (and its support files, zipped together) will make it much easier to diagnose issues with your application. Screen shots of error messages are especially helpful.

When explaining how to reproduce your problem, please be as detailed as possible. Describe every step, click-by-click and keypress-by-keypress. Otherwise when others try to duplicate your problem, they may do something slightly different and end up with different results.

A note about attachments
You may only attach one file to each message. Attachment file size is limited to 2MB. If you need to include several files, you may do so by zipping them into a single archive.

If you forgot to attach your files to your post, please do NOT create a new thread. Instead, reply to your original message and attach the file there.

When attaching screen shots, it is best to attach an image file (.BMP, .JPG, .GIF, .PNG, etc.) or a zip file of several images, as opposed to a Word document containing the screen shots. Because Word documents are prone to viruses, many message board users will not open your Word file, therefore limiting their ability to help you.

Similarly, if you are uploading a zipped archive, you should simply create a .ZIP file and not a self-extracting .EXE as many users will not run your EXE file.
See more
See less

Lag in Panel Transitions on Android using PhoneGap

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Lag in Panel Transitions on Android using PhoneGap

    Just curious if anyone else notices a lag in panel transitions within an app running in PhoneGap when running on Android (feedback for iOS as well but as far as I can tell I've never seen any lag here).

    Specifically I have lists that sit in their own panels within a panel navigator that as a button tab at the bottom to move between the home screen of the app and each list in a panel. When a button in the button tab is tapped I put a wait gif on the screen and then transition to that panel using the simple Javascript code below as well as run a refresh on the list.

    Code:
     {dialog.object}.panelSetActive('PANEL_NAME',true);
    About half way through the transition the screen pauses for about .5 second to a second (on Google Pixel 2 running the most updated version of Stock Android, however for other devices it is usually longer especially older devices or devices that don't run stock android).

    Do others experience this lag as well and if so have you found a way to combat it? I get complaints that my app doesn't work (due to this lag and the lag occurred when trying to tap buttons or when trying to type into fields) and just wondering what others experiences are with this and if there is something I can do.

    I do want to add in a couple caveats as I know they may be playing a role (though they don't seem to be affecting iOS devices).

    1) The main component of this mobile app is fairly robust in the fact that it has 5 list controls with detail views as well as another 9 lists that either open up their own UX or are just for information (ie some cached lists of things like truck numbers, trailer numbers, etc that can be refreshed if they need to check for new data but these are selection lists for them to use and add records to when need be). The overall size of the main component is 12.7 MB which in mobile app standards isn't massive but based on the size of most other components in my project is about 6 times as large as the next largest.

    2) I am using PhoneGap build cli-7.0.1 as I have run into issues uploading to phone gap, iTunes connect, or with functionality of my app when trying to use cli-7.1.0 or cli-8.0.0, so if you are using these and aren't seeing the lag would be good to know (though I have tested both versions even when app functionally was broken and the transition delay was still there).

    My main thing here is that I have tested this app running iOS 9 on an iPhone 5 and the lag doesn't exist which leads me to believe this has something to do with how Android handles phone gap apps (whether that be the way they handle the web view or if it has to do with the javascript code that calling the wait message and then transitioning).

    #2
    Re: Lag in Panel Transitions on Android using PhoneGap

    I definitely see/have seen "lag" problems in my apps.

    The first thing I would do is definitely turn off the animation during the panel transition. The user should no longer see that screen pause during the panel switch.

    Definitely make sure all lists use Dynamic type of virtualization (it makes a HUGE difference).

    I have quite of few lists that I only use as the source for lookups for other lists. For these, I set the virtualization Size = 1. Why render a longer list if the user will not see the lookup list? The list data is available anyway in the background. Maybe reduce the lists' layouts to very few columns. No need to keep multiplying the creation all those DIVs within DIVs within DIVs... Can you get away with creating some freeform layouts for the lists with a more simple template?

    In my case, eventually, I should to get away from creating all the lookup lists and use functions instead of source lists for my lookups.

    The following MAY help...
    https://developers.google.com/web/to.../timeline-tool
    You will surely see the lag when the FPS fall well below 60 FPS.

    Comment


      #3
      Re: Lag in Panel Transitions on Android using PhoneGap

      Thanks for the quick feedback Jeff!

      I use all freeform lists and have them filtered based on a date parameter that should keep them from loading more than 20 records at once (most of the time the lists will have 5 or less records since they are constantly refreshed when the list is moved into view, a necessity because of the tech savviness of the user base).

      I really like the animation as it shows the app is doing something and I think it's become pretty common for apps to have transitions like that (picked 5 random apps off my iPhone X and 4 of them did some sort of screen transition). I'm more curious what is actually causing the lag since it doesn't seem to exist on iOS (even on older devices specifically an iPhone 5 running iOS 9). Wonder if this is an issue with the underling web view used on Android for PhoneGap apps and if it just doesn't have the chops like the one on iOS (which I am pretty sure uses the exact same code as Safari, not sure if on Android it uses chrome or the built in Android browser).

      Look forward to hearing what others have seen on their devices as well. Hopefully with some good discussion we can come up with a solution to this issue to get app response and feedback on Android to match that of iOS.

      Comment


        #4
        Re: Lag in Panel Transitions on Android using PhoneGap

        Just wanted to add in, I was not expecting to see lag on the chrome browser on my computer (I don't use chrome on my MacBook so never really thought to check this out), but sure enough even on my computer the lag exists and it says the largest amount of time is being spent scripting, does this mean that the chrome browser is just struggling with the Javascript? Below is the code I have on the button's tap event (using tap events as I seem to get a little better feedback using this rather than the abstract on click with android but let me know if you are experiencing the opposite). Simply put I get a pointer to the list and and reset the detail view to make sure there isn't a currently edited record (which would be lost on a normal refresh but was causing problems on an incremental refresh), then do the transition of the panel and as it is transitioning I put up a wait gif and refresh the list (wait message disappears 2 seconds after the list's onListReady event fires). Doesn't seem like this code should take that much to execute but any feedback is greatly appreciated!

        Code:
        var lObj = {dialog.object}.getControl('LIST1');
        lObj.resetForm({prompt: false});
        {dialog.object}.panelSetActive('PANELCARD_1',true);
        
        
        var wo = {};
        wo.icon = 'Images/wait_dots_red.gif';
        {dialog.object}.showWaitMessage('page',wo);
        {dialog.object}.refreshListData('LIST1',{mode: "incremental"});

        Comment


          #5
          Re: Lag in Panel Transitions on Android using PhoneGap

          I have noticed also that I prefer using tap instead of click.
          ...just to quickly confirm that point.

          You could always "play around" with the setTimeout method. Put the refreshListData there so that it places that action to the end of the event queue and maybe by then, the panel transition has finished.

          For instance,
          Code:
          var lObj = {dialog.object}.getControl('LIST1');
          lObj.resetForm({prompt: false});
          {dialog.object}.panelSetActive('PANELCARD_1',true);
          
          
          var wo = {};
          wo.icon = 'Images/wait_dots_red.gif';
          {dialog.object}.showWaitMessage('page',wo);
          setTimeout(function(){{dialog.object}.refreshListData('LIST1',{mode: "incremental"}); },0);
          I like the explanation of the user, staticsan, here:
          https://stackoverflow.com/questions/...metimes-useful

          Comment


            #6
            Re: Lag in Panel Transitions on Android using PhoneGap

            You could also start with the wait message, do the refreshListData and then configure the list's Detail View event, afterRefreshListIncremental, to set the active panel.

            Comment


              #7
              Re: Lag in Panel Transitions on Android using PhoneGap

              Tried both options and neither seems to make much of a difference :(

              I have tested other much smaller components that have similar code (ie code to move a panel into view and run a refresh) using google chrome and I see a very momentary lag (nothing like with the larger component), but still a lag nonetheless. This leads me to believe that this is a DOM issue, ie when the screen transitions it is having to re-draw the whole DOM. I believe I read an article some where about this and how to use css animations and the z-index property to prevent having to redraw the DOM all the time, does that make sense as a solution? And if so do you know of a way to force the panel card transitions to be done with css animation rather than how they normally are done (being it isn't already done by css)?
              Last edited by lilmofo812; 03-08-2018, 08:31 AM.

              Comment


                #8
                Re: Lag in Panel Transitions on Android using PhoneGap

                Sound like a bug, report it with a test case.
                Insanity: doing the same thing over and over again and expecting different results.
                Albert Einstein, (attributed)
                US (German-born) physicist (1879 - 1955)

                Comment


                  #9
                  Re: Lag in Panel Transitions on Android using PhoneGap

                  I've noticed the same issue, and being relatively new to this just assumed it was normal. I am now in the habit of not using animation.

                  Comment


                    #10
                    Re: Lag in Panel Transitions on Android using PhoneGap

                    So to do a test I started a new component and slowly added in the panel cards and all the controls contained within them 1 at a time. In doing this I republished the component after each add in (the component is on an a5w page) and tested in google chrome. Animations had zero issues UNTIL I wrapped everything up in a panel navigator. As soon as I removed the panel navigator the lag went away so I am curious if any of you are using a panel navigator?

                    The only downside I am seeing visually when not using the panel navigator is that I have it set to use tab buttons and since my panels are laid out left to right when I have one of the main list panels open and click a tab button to open a panel that is to the left it doesn't animate, curious if there is a way to get it to animate in both direction without using a panel navigator since that seems to be the cause of the issue? I am setting the panelSetActive animation parameter to true so I am guessing this is just an issue since the panel being opened is to the left of the panel already opened.

                    Comment


                      #11
                      Re: Lag in Panel Transitions on Android using PhoneGap

                      I definitely use panel navigators ...and use the onPanelActivateComplete event associated with them a lot.
                      I just prefer to set the animation to false when doing a panelSetActive.
                      BTW, I don't know if you are setting focus to any input element as you arrive on a panel. I've read that it immediately causes a double reflow.
                      In my app, I have a particular panel where the user can use a bluetooth barcode scanner to quickly scan in rows to a list. It was very laggy until I found a way not to scan into (and keep getting focus of) an input element.

                      Comment


                        #12
                        Re: Lag in Panel Transitions on Android using PhoneGap

                        For me it looks like the only issue was the panel navigator (though I still need to test this on my actual android device in the phone gap environment but I feel it's promising since I'm seeing better load times in chrome on my computer which I wasn't with the other component). Looks like chrome and the underlining web view it uses on android is just not as equipped to handle this control as safari on iOS. If I ever get time to dive into the development tools in both safari and chrome I'll report back on what I am seeing as the issue (though I am sure there are smarter people here that already know what is happening and maybe they'll chime in as well).


                        Greatly appreciate all your feedback on this Jeff!

                        Comment


                          #13
                          Re: Lag in Panel Transitions on Android using PhoneGap

                          Hey Jeff could you share your test ux I give it a shot and look into it. Definely something not right.
                          Alex Collier

                          "The spread of computers and the Internet will put jobs in two categories. People who tell computers what to do, and people who are told by computers what to do"

                          AA Builds from 5221_5152 to Pre-releases >> Deploying to IIS in AWS

                          Comment


                            #14
                            Re: Lag in Panel Transitions on Android using PhoneGap

                            I know this is slightly off topic but still pertaining to lag in Android, has anyone found a good solution to cut out the 300ms button click delay? I see the delay whether I use the abstract onclick event, ontap event, or the normal onClick event?

                            Everything I have read pertaining to this says that Google Chrome as gotten rid of the delay as long as you use the following meta tag, which I have added in my PhoneGap build:

                            HTML Code:
                            <meta name="viewport" content="width=device-width">
                            I also added the following code to the Local CSS Definitions (not sure that was the right place to add it so let me know if I need to try somewhere else)

                            HTML Code:
                            html {
                              touch-action: manipulation;
                            }
                            This is the last thing I need to get fixed for my app to really have that true native feel on Android.

                            Comment


                              #15
                              Re: Lag in Panel Transitions on Android using PhoneGap

                              I've been having the opposite problem of yourself Josh. Instead of the panel transition happening slowly, it happens so quickly that the data doesn't have time to reload.

                              For instance, my list has several customer records that go to a detail view when clicked. If I click the first record, it works fine and loads info into the detail as expected. When I click back to the list and select the next record, you can visibly see the panel set...then the last record data is visibly wiped off before being replaced by the new data from the list record I just selected.

                              Does anyone know how to slow down the panelSet list event, to at least give the app time to load the NEW data before the panel is visible?

                              Comment

                              Working...
                              X