2017년 8월 9일 수요일

How to Create App Books by Appinventor?


I am new in App Inventor. What I was trying to make - an app which is just a BOOK which have lots of pages. Here is the outline i have. 

Page 1: Book Cover Page ( A link at a bottom to enter on the book). 

Page 2. Index

Page 3: The Book's content...it may go to several pages

Now my question is: 

How can i create Text Pages in Appinventor?
How do i connect all the pages from the Index pages? 
Do i have to add separate Screens for each of my Book page? 
How can I link the indexed and other pages of my book from the Cover Page? What is linking system of Inventor? 

Looking forward a complete suggestions. 

--
See below in BLUE.

I am new in App Inventor. What I was trying to make - an app which is just a BOOK which have lots of pages. Here is the outline i have. 

Page 1: Book Cover Page ( A link at a bottom to enter on the book). 

Page 2. Index

Page 3: The Book's content...it may go to several pages

Now my question is: 

How can i create Text Pages in Appinventor?
There are several ways... one is to read them into screens from text files embedded in the app, but if there are a lot of graphics and tons of text, you'll approach the AI 5MB limit.  The BEST way for you to do this is to do the book as an HTML page online, and read it into a web viewer or web component.  That way, there's no overhead in your app for the document.  If the HTML document is not TOO big, you could include it in the app as an asset and just load that into the web or webviewer components on startup.  If you use HTML, you can link all of your chapters and pages as any web page would and have that functionality in AI's components. 

How do i connect all the pages from the Index pages? See above
Do i have to add separate Screens for each of my Book page? NO!  If you use the web component, it would handle all of it in that one component.  If you read them in from text files, you just replace the text in a disabled Textbox, so you'd have the scrolling.
How can I link the indexed and other pages of my book from the Cover Page? What is linking system of Inventor? Again, see above!

Looking forward a complete suggestions. 

--
How to read a HTML page stored as asset inside of App Inventor 

--
I just put the entire book, Treasure Island by Robert L. Stevenson in a book using just text files.  All 37 Chapters!!!

I change chapters with buttons, but now that I know that the text blocks can take a LOT of text, I am going to build this with a ListPicker to change chapters.
A 'book' is doable this way.  Formatting for paragraphs is an issue which might be overcome by inserting  the \n character within the text to create line breaks 
between paragraphs.    I think I can do that using a text editor replacing the #10#13 s with \n s.

I hope to post something tomorrow.

What a neat idea.  Yes, you can use AI2 to write a 'book' app.   

--
Thank you very much. Some terms seem unknown to me. Lets solve these by using Google Search. Will let you guys know if i face any problem at near future. 

--
I have uploaded some html pages which is like frontpage.html. But when i will use the Call Webviewer1.GoToURL and URL: file//android_assets/frontpage.html...it couldn't loaded...and showing an error like the requested file was not found.  What would be the exact URL to placed upon there? I mean, If I place any html file on Media; then what the URL it will have that I can later use on Blocks. 

--
see again this link for the path to be used 
I have three ways to do the App Book.  You asked:

How can i create Text Pages in Appinventor?   

There are several ways.  Taifun's suggestion is a very good one.
You can load the book as a single html.  If you use a single html, going to specific chapters becomes an issue.
If you use a separate html for each chapter you can control the 'chapters' as Taifun controls the html pages or you
can use a ListPicker to request individual html files.

A different way, if your book is short might be to use.
Text blocks attached to Label controls.

LIke this:

The example used buttons to control chapters.  If I were developing the app for myself, I would use a ListPicker to change chapters.

I did not attempt to include an image for the cover.  I would use an image control, put the cover png in it, then  hide the control and use a button,
listpicker to show it when needed using the above method.    Using an html, you embed the image in the html.

How do i connect all the pages from the Index pages? 

Good question.  That depends on the method used to present the text.   Html or Labels with Text.
With html, you can use html coding.  Taifun's example demonstrates how.   You can also go directly to numerous html resources 
using a listpicker and the basic goto url page, each item pointing a different html chapter if each chapter is a separate html.

Or, using an html, you can control everything using html commands on the "Book Web Page" you create.

With text blocks, you would use either labeled buttons or a ListPicker to select the appropriate chapter global variable.

Do i have to add separate Screens for each of my Book page? 
No.   Either method will allow you to use a single screen. 

How can I link the indexed and other pages of my book from the Cover Page? 
Lots of ways to do this:   Buttons, ListPicker , html code in the CoverPage html.   I bet you can think of other ways.

Oh, the third way... a combination of the two mentioned.  AI2 is fairly flexible in dealing with text.

You may want to experiment a lot.  Have fun.

Hope this is helpful to you and others.

--
Did you omit the colon (:) from between "file" and "//" in your app too?
That might have been the cause of your problem.

--
Thanks Everyone for your time. Thank You. :)

--

댓글 1개:

  1. Submit your blog or website now for inclusion in Google and over 300 other search engines!

    Over 200,000 sites submitted!

    SUBMIT NOW using I NEED HITS!!!

    답글삭제