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

Splitting a large UX into smaller components

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

  • Splitting a large UX into smaller components

    Has anyone split a UX (iPad) to make it quicker to load and easier to manage?


    I have a fairly simple program.

    It shows 6,500 lines of wine data.

    I allow filtering on this list.

    I use 4 Layouts (templates) on the list data



    These shots show the main screen.

    MB Home screen.pngMB Popup.pngMB SB Home.png


    I use a window container to display a modal with extra details. Currently, multiple lines are displayed using a list,
    I have also written the code to build a table.

    There is side menu that has a tree control, I build the JSON on the server. Above


    Vertical has 2 lists a map and it displays an image. Below


    MB Vertical.pngMB Vertical 1 Main.png

    The filter uses server-side filtering and I allow the user the option of saving the filter choices to a database for future use.

  • #2
    Re: Splitting a large UX into smaller components

    Continued

    MB Vertical detail.png


    Images of filtering

    MB Filter.pngMB Alpha Filter.png


    Any suggestions on the architecture and methods would be a great help.

    The client will view this on a top end iPad

    Later I want to build a control to save choices and export to excel.

    Comment


    • #3
      Re: Splitting a large UX into smaller components

      I also have a problem if I try to display an icon in the list. It slows rendering dramatically.

      MB Layout templates.png



      Sorry to split one question over 3 pages.

      Comment


      • #4
        Re: Splitting a large UX into smaller components

        I'd say there's nothing wrong with your UX - but there sounds like something is wrong with your List, have your turned on Virtualization|Dynamic - normally when things run slow it's because the List is loading all the data. You could also try Pagination settings with auto callback. Also is the detail list set as a child of the parent?
        Insanity: doing the same thing over and over again and expecting different results.
        Albert Einstein, (attributed)
        US (German-born) physicist (1879 - 1955)

        Comment


        • #5
          Re: Splitting a large UX into smaller components

          I'd say it's impossible to tell if anything is wrong with anything without actually looking at it.

          What Alpha version/build are you working with (funny how almost know one reports that). PhoneGap Build App? Web App?

          Are you loading all Lists with all data on startup? Are some Lists set to render later? Is the data fluid? Do you need to load it from the server? Or is the data a bit more static and can be bundled with the app... if it is a PhoneGap Build app.

          Do you really need access to 6500 wines on startup? Is someone really going to troll through a list of 6500 rows? If not... why load 6500 rows of data?

          Quicker to load and easier to manage can be 2 opposing issues. Breaking the app up using embedded components makes development and debugging a joy. You get to work with one piece at a time. But... those embedded components need to be loaded at some point. Startup will be faster (if that's how you set things up)... but... then... when you need to access whatever is in the embedded components you'll wait a bit. It's a trade off.

          If you're using PhoneGap Build you can pre-load all the data using SQLite. Very fast.

          Overall... remember that you're working with the DOM (and if PhoneGap Build... a WebView). So... you're loading 6500 rows into the DOM along with all their associated divs and spans and etc., etc., etc. Thousands and thousands of lines of code created and managed.

          Comment


          • #6
            Re: Splitting a large UX into smaller components

            Michael watch this video http://www.ajaxvideotutorials.com/V1...zationDemo.swf
            Insanity: doing the same thing over and over again and expecting different results.
            Albert Einstein, (attributed)
            US (German-born) physicist (1879 - 1955)

            Comment


            • #7
              Re: Splitting a large UX into smaller components

              David

              We have lots of Alpha licenses. Both old and subscription. The displayed app is 2999/4519. There is no problem changing to the latest build.

              The data changes once a week. We download this data from a server with no API.

              We do not load list until requested, with the exception of the main 6661-row list. This list is dynamically virtualised loading 50 records.

              I am not sure if the client is going to flick through 6,500 rows. The problem is his brief, he asks for a list he can flick through. The reason we have built the filters is to reduce the list size. He has 1,500 US cabinet Sauvignon and 1,100 Burgundy wines. The storage company does not give a huge number of columns to filter these two groups.

              When you have that number of unique wines it is a problem to remember each row.


              "Overall... remember that you're working with the DOM (and if PhoneGap Build... a WebView). So... you're loading 6500 rows into the DOM along with all their associated divs and spans and etc., etc., etc. Thousands and thousands of lines of code created and managed."

              This is really where I am struggling. I need to understand these tradeoffs to have a meaningful discussion with the client.

              The client wants to be anywhere with three key presses.

              He is used to restaurant wine apps and wants the same. Unfortunately, restaurants have limited wine lists so the styling and speed relate to a smaller simpler data set.

              Peter

              I have the boys playing with pagination and virtualisation but my brief is to mimic "The French Laundry" wine list. This list scrolls quickly and there is no pagination.

              Comment


              • #8
                Re: Splitting a large UX into smaller components

                Any ideas on the issue of icons slowing the load dramatically?

                Comment


                • #9
                  Re: Splitting a large UX into smaller components

                  Really depends on the size of the icons... what they are... how they're being loaded... and from where.

                  So if only 1 list... the wine list is being loaded at startup... and with only 50 records... I wonder where the app is slow. Where is the server? What is the server?

                  2999 is quite old. There have been major improvements to how the List behaves since then. A Viewbox might be really helpful.

                  Realistically, I can't see anyone wanting to scroll through a list of 6500 rows. If they're wine people, they know what they're looking for... they're not just wandering. I would offer the full list as an option with a message that we're about to load 6500 wines... hold on a sec.

                  We still don't know if this is a web app or PhoneGap Build app.

                  Comment


                  • #10
                    Re: Splitting a large UX into smaller components

                    I have the boys playing with pagination and virtualisation but my brief is to mimic "The French Laundry" wine list. This list scrolls quickly and there is no pagination.
                    michael
                    i was curious and looked into the french laundry wine and spirits list, it is a sourced list from binwise and it does nothing but lists the names of the wines or spirits with their matching price. the list is prebuilt with the data from the french laundry and showed via the click of the link.
                    your alpha list is lot more versatile and functional, it won't be easy to mimic that list with alpha list and detail view with more information as i understand what the lists are in version 12.
                    however if your customer just wants to see the list of 6000 and some wines list without needing to do anything with it you may be able to build an a5w page with the data and place the a5w page in the dialog/ux an as embedded object. i am sure that will be faster than what alpha needs to fashion all the javascript things, css things to the list and load it in the ux. ( remember just a hello world ux takes about 700-800 lines of code )
                    there are also some javascript functionality called infinite scrolling, it is quite possible alpha virtual scrolling is that, i don't know just guessing. that is definitely an useful function to explore.
                    just my 2 cents in a world of unknown(version 12).
                    thanks for reading

                    gandhi

                    version 11 3381 - 4096
                    mysql backend
                    http://www.alphawebprogramming.blogspot.com
                    [email protected]
                    Skype:[email protected]
                    1 914 924 5171

                    Comment


                    • #11
                      Re: Splitting a large UX into smaller components

                      SO are the images on the Alpha Server or S3, is the list data bound, does it have a detail view, is the map real or an image?
                      If the answers are mages on AA Server and List is bound with a detail view then that's the issue.
                      So what is the config?
                      Insanity: doing the same thing over and over again and expecting different results.
                      Albert Einstein, (attributed)
                      US (German-born) physicist (1879 - 1955)

                      Comment


                      • #12
                        Re: Splitting a large UX into smaller components

                        Gandi

                        The french Laundry list is an app. I think they also have a list on the website bit I am not sure. Your idea of building my own display is worth investigating. I still need a complex filter.


                        Pete,

                        I am talking about font awesome icons. I think the mistake I am making is serving them conditionally. The icons that are served from the database are quick. Currently, the wine label images are causing no problem, the parent list is small just 400 lines but I display one record at a time after the user clicks on a list row. We will store the images on a CDN. I currently use no detail view.


                        David

                        Background on the client and list there are 31,000 bottles of wine with a value of $4,000,000; 6,500 lines displays the quantity of unique wines he owns. In this list a change in bottle size or year adds a line. There 6,661 rows if we also consider location. The client is going to flick through the list like reading a magazine.

                        Use cases I know of

                        Check the price paid for a wine. Simple filter. (This functionality will be in phone gap and is the only functionality required on the phone) .
                        Check verticals (Wines of the same name but different years)
                        Build a regular horizontal tasting. (compare French Bordeaux to Californian Bordeaux blend)
                        See where there are holes! in the collection. This can only be done by browsing.
                        Check which wines he is no longer collecting and build a disposal list.

                        Currently, we are building a proof of concept as a web app. The ultimate aim is to wrap it in PhoneGap as offline is advantageous. Most of the clients available free time is when traveling on a plane.

                        I see the client 4 times a year and as we are good friends, I am not allowed to talk app all of the time. I just present an "experiment" and we refine the functionality.

                        I take your point that the browse list may not be the best home page. My idea is for the client to save filters and set the default filter. This will allow him to save a search and return to this default when he returns next time.
                        If he works in this way then the filtered list will be 200 - 400 lines.

                        Comment


                        • #13
                          Re: Splitting a large UX into smaller components

                          Michael we could banging on about this for days as we don't know the ins and outs of your UX, but watch this video and you will see your 6500 records should be no issue at all for Alpha, just re think your logic.

                          Play the Video Here.

                          Cheers Pete
                          Insanity: doing the same thing over and over again and expecting different results.
                          Albert Einstein, (attributed)
                          US (German-born) physicist (1879 - 1955)

                          Comment


                          • #14
                            Re: Splitting a large UX into smaller components

                            Pete thanks for that.

                            I think the first issue is using an old version of Alpha as David suggested.

                            Some of the functionality is not available in my build, I will use the latest production build and follow your example because what you have shown is totally acceptable.

                            I am sure I need to rethink my logic. The pointers I have got from people should get me to where I want to be. The beauty of the message board is that we all come at problems from slightly different angle.

                            Thanks I will play with this and report back.

                            Comment


                            • #15
                              Re: Splitting a large UX into smaller components

                              .removed
                              may not be appropriate answer.
                              Last edited by GGandhi; 07-17-2016, 07:52 AM.
                              thanks for reading

                              gandhi

                              version 11 3381 - 4096
                              mysql backend
                              http://www.alphawebprogramming.blogspot.com
                              [email protected]
                              Skype:[email protected]
                              1 914 924 5171

                              Comment

                              Working...
                              X