7 Replies Latest reply on Jun 28, 2015 12:23 PM by Djwaas

    AIR AS3 : Best way to display a long text document in an app

    Djwaas Level 1

      So I’m finishing an AIR app that will be deployed for both Android and iOS phones.

      I wanted to include a manual that explains in detail how to use the app.

      First, I wrote the instructions manual in english, french and spanish on WORD.

      It turned out that each document weighs 8Mo with 20 pages and dozen of pictures.

      Tweeking the DPI, each file converted to PDF weighs now 0.5Mo.

       

      My goal is: How to include this manual within my app, preferably without an external reader, and internet connection, and with smooth and intuitive document navigation.

       

      My researches on the net led me to quite a few solutions, I Would like to share them here, and collect from you as much ideas and opinions please.

      1

      Including a PDF reader within my app to read internal PDF file (PDF from the application storage directory)
      PROS: The pdf is always available for the user, no need for an internet connection or an external reader.
      CONS: Given that the ANE lister below work for one OS only, I will need to write different code for android and iOS environment. Not sure also if the ANE below will be compatible with latest 64bits OS versions (some are not updated on the last 2 years).
      Links:

      Anybody used PurePDF? Since it’s 100% AS3 code, it should work on all OS, sounds promising. But I have no clue how to use it!!

      2 Launching an external PDF reader to read an internal PDF file (within the app).PROS: Perhaps the same code may work for both OS with use of openWithDefaultApplication() method.
      Some users on forums find issues pointing to the internal PDF file especially on mobiles.
      CONS: Obviously, if the user didn’t install a PDF reader, he won’t be able to read the document.
      Some ANE are also available to achieve this goal:

       

      3. Convert my PDF to a SWF, then display it in my app.
      Using special tools, I convert my PDF to a SWF, then I embed it in my IPA or APK.
      PROS: It works on desktop. Also, some of the tools below offer a navigation interface and zoom option.
      CONS: I haven’t figured out how to embed the SWF in my final IPA or APK (after adding the SWF to Flash CS6 FLA library), also the navigation interface is not customizable to fit mobile environment.
      Links:

       

      4.

      Creating a movieclip with a lot of frames (+50); then divide my document content across the frames and paste my text inside textFields. Then add some basic navigation buttons.

      PROS: 100% multi-platform solution.
      CONS: Time-consuming. You may lose your layout. You lose the zoom feature usually found in PDF readers. Scrolling up and down is not smooth. Text length inside Textfield is limited etc..

       

      5.

      Launching an external PDF reader to read an external PDF file (stored in a server).

      PROS: Perhaps the same code may work for both OS.
      CONS: User needs an internet connection and an installed PDF reader.I will have to pay for a remote storage service that will (maybe) impose a download limit.

      on iOS: Online PDFs can be opened via navigateToUrl and then imported into iBooks.

       

      6.

      Use StageWebView class (or StageWebViewBridge class) to display an HTML file (after converting my PDF to HTML).

      https://forums.adobe.com/message/3434329

      http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/StageWebVie w.html

      CONS: It seems tricky to embed the HTML file with its pictures inside the final IPA or APK file.

       

      The irony is that ADOBE is the creator of the PDF format, and AIR is at its 17th major update.

      But to my knowledge, no easy and satisfying solution is offered by AIR to display PDF on all platforms.


      Does anybody of you know a multi-platform solution to display pdfs, with nice performance (smooth scrolling and zoom)?

      The reader should have page thumbs, basic controls (next/previous page etc.) and shall read pdfs in local storage or online (as last resort).

       

      Waiting for your kind replies!

       

      BR

        • 1. Re: AIR AS3 : Best way to display a long text document in an app
          Colin Holgate MVP & Adobe Community Professional

          6.

           

          If you can get the HTML version working with all the files in a folder, you only have to add that folder to your app, and open its index.html in a StageWebView. You would also have the option of putting the folder online somewhere, and only let them read the manual if they are online.

          • 2. Re: AIR AS3 : Best way to display a long text document in an app
            Djwaas Level 1

            Colin Holgate

            Thanks for your suggestion.

             

            I created an HTML file ("index.html") with all related pictures in same directory  ("output-html") (no sub-directory).

            I took 1h30 testing the StageWebView lead this afternoon.

             

            Not having an iOS device on me today, I tested apps compiled with AIR for Desktop and AIR for ANDROID (v17).

            On all listed solutions below, none worked on both environments.

             

            Perhaps there's another way to use StageWebView that I'm missing, or maybe I should give a try to StageWebViewBridge class.

            What do you think?

             

            Here are the solutions tested today:

             

                 //SOLUTION #1, DOESN'T WORK ANYWHERE

                 //webView.loadURL("output-html/index.html");

                

                 //SOLUTION #2, WORKS ON AIR DESKTOP NOT ANDROID

                 var file:File = File.applicationDirectory.resolvePath("index.html");

                 webView.loadURL(file.nativePath);

                

                 //SOLUTION #3, WORKS ON ANDROID (NOT DESKTOP) (WILL TEST IT ON iOS and let you guys know)

                 //We create a folder "output-html" containing the HTML file and pictures (no sub-folders to be used here!!!)

                 //Then we add this folder "output-html" to our project

                 var source:File = File.applicationDirectory.resolvePath("output-html");

                 var destination:File = File.applicationStorageDirectory; 

                 source.copyTo(destination, true);//We copy in the application Storage Directory our folder containing the HTML file

                 //get path to the html page within copied folder 

                 var resultsPageUrl:String = "file://" + destination.resolvePath("index.html").nativePath; //Using nativePath returns a String

                 webView.loadURL(resultsPageUrl);

                

                 //SOLUTION #4, WORKS ON AIR DESKTOP NOT ANDROID

                 var resultsPageUrl:String = File.applicationDirectory.resolvePath("output-html/index.html").nativePath; 

                 webView.loadURL(resultsPageUrl); 

                

                 //SOLUTION #5, WORKS ON AIR DESKTOP NOT ANDROID

                 var fPath:String = new File(new File("app:/output-html/index.html").nativePath).url;

                 webView.loadURL( fPath );

                

                 //SOLUTION #6, WORKS ON ANDROID (NOT DESKTOP) (WILL TEST IT ON iOS and let you guys know)

                 //Copy the html file outside the app directory

                 var originalFile:File = File.applicationDirectory.resolvePath("output-html/index.html");

                 var workingFile:File = File.createTempFile();

                 originalFile.copyTo(workingFile, true);

                 webView.loadURL( workingFile.url );

                

                 //SOLUTION #7, WORKS NOWHERE

                 var f:File = File.documentsDirectory.resolvePath(String("output-html/index.html"));

                 webView.loadURL( f.url );

             

            BR

            • 3. Re: AIR AS3 : Best way to display a long text document in an app
              Colin Holgate MVP & Adobe Community Professional

              Try this variation:

               

              var fPath:String = new File(new File("app:/foldername/index.html").nativePath).url;

              webView.loadURL( fPath );

              • 4. Re: AIR AS3 : Best way to display a long text document in an app
                Djwaas Level 1

                Already did try it.

                In my precedent post, I wrote the same code as solution #5:

                 

                //SOLUTION #5, WORKS ON AIR DESKTOP NOT ANDROID

                     var fPath:String = new File(new File("app:/output-html/index.html").nativePath).url;

                     webView.loadURL( fPath );

                 

                BR

                • 5. Re: AIR AS3 : Best way to display a long text document in an app
                  Colin Holgate MVP & Adobe Community Professional

                  You gave so many that I missed that one!

                   

                  I found the article you must have been looking at. It suggests that the app:// approach works on non-Android, which should mean it's good for desktop and iOS. Would there be any harm in using two techniques, one for Android, and another for other platforms?

                  1 person found this helpful
                  • 6. Re: AIR AS3 : Best way to display a long text document in an app
                    Djwaas Level 1

                    Using the StageWebViewBridge class, I used the same AS3 code and my local HTML page with pictures was perfectly displayed on AIR for Android and AIR for Windows.

                    Which is so far the best solution!

                    It's a pity I couldn't find a way to jump from an anchor to the following one using navigation buttons though..

                     

                    Same code will be tested soon on iOS.

                     

                    Cheers!

                    • 7. Re: AIR AS3 : Best way to display a long text document in an app
                      Djwaas Level 1

                      I finally found some time to test on iphone (AIR v18 for iOS on iOS v8.1.2).

                      Here’s my final word on the matter:

                       

                      • On iphone, accessing the HTML file didn’t work using the StageWebViewBridge class.
                        Instead, I used StageWebView, through the method below, and it worked:


                                     var fPath:String = new File(new File("app:/output-html/index.html").nativePath).url;

                                     webView.loadURL( fPath );


                      • StageWebViewBridge class worked with AIR for Android and AIR for Windows.

                       

                      So it’s half a success, since I had to write different code for different platforms.

                      But hey, better something that works than nothing

                       

                      Best regards.