Simbul / baker

The HTML5 ebook framework to publish interactive books & magazines on iPad & iPhone using simply open web standards
http://bakerframework.com
1.53k stars 380 forks source link

Add an "About" button to the shelf on the right-hand side of the top menu #525

Open tstegart opened 11 years ago

tstegart commented 11 years ago

This is a suggestion to add a button on the right hand side of the shelf menu. It should say "About" or some other generic phrase that people can change to their liking.

I'm not sure of the easiest way to implement this, but at the very least it should display text that the developer can easily change, for example, a privacy policy, contact or support information, or a help paragraph.

Ideally, it will display a bundled book that developers can design to their liking to display information about their company, rather than having to include it inside every single issue. This will make issues smaller as well, since a lot of information can be included in the bundled book.

I suggest a modal view that covers most of the screen and can be closed. This would display an HTML page that is included in a bundled book. Alternatively, the about button could open up a book completely, leaving the shelf behind. I don't think an index bar needs to be included, if that will make things simpler.

folletto commented 11 years ago

Thanks :)

nin9creative commented 11 years ago

What about starting off with something that pops open a window (minus the bundled book suggestions above etc?) Perhaps even just a XIB file that someone can easily edit and that is static with the binary?

folletto commented 11 years ago

In fact, that would be a nice idea to start with, without the hellish complexity of a UIWebView. :) Do you think it is going to be complex to add such a button? :)

nin9creative commented 11 years ago

I guess the question is how do you make it flexible enough to work for both iPad and iPhone. If it were just iPad, it'd be easy to use a popover from the nav bar.

nin9creative commented 11 years ago

The simplest thing that I have now is just a little settings / gear icon that pops open a Alert View that can at least display some copyright or other information in a simple popup alert.

folletto commented 11 years ago

Personally, I would avoid implementing that: too minimal to be useful. :)

nin9creative commented 11 years ago

lol

On Nov 22, 2012, at 3:43 PM, Davide Casali notifications@github.com wrote:

Personally, I would avoid implementing that: too minimal to be useful. :)

— Reply to this email directly or view it on GitHub.

nin9creative commented 11 years ago

Do you guys want me to put in a pull request for this? Or does it not look like a good idea? I thought it was a good compromise, allowing the user a canvas (the XIB) file for iPad and iPhone to create some sort of static screen that will pop up (the same way on iPad and iPhone) when clicking on the info icon on the top right of the shelf.

Let me know if you think it will work or not. Personally, I think that I will go this route for my own app as it's pretty simple and works.

nin9creative commented 11 years ago

I got this working for all versions of iPad / iPhone (retina non retina) / iPhone 5.

There is an icon on the top right hand corner of the shelf menu bar (info icon). 1) User taps it, and a modal window animates in from the bottom. a) On iPad it is presented as a modal Form Sheet (smaller than whole screen and dims the edges) b) On iPhone it's a whole view (iPhone doesn't support Form Sheets) 2) There are a few XIB files that a user can customize for display. Each has a Portrait and Landscape view (needed for iPhone). The shelf determines which to display depending on the device and uses the TPMultiLayoutViewController (another Github class) to handle the correct display / rotation of the modal views.

It's pretty simple and allows a developer flexibility in what they want to put on their shelf info page.

I think this is a good first step towards implementing this feature.

Let me know if you want me to push it for you guys to review and think about pulling in to the master.

About View

About View

About View

About View

About View

About View

tstegart commented 11 years ago

How hard are XIB files to code, I've never done one. Can they contain hyperlinks?

nin9creative commented 11 years ago

At the most basic level, you could just use the interface builder to add labels, images, text and whatnot to the UI.

If you wanted a button or something to link to a url and pop open safari, then there is a little more work that has to be done in the Viewcontroller.  Not hard really.

Andrew


From: Tom notifications@github.com To: Simbul/baker baker@noreply.github.com Cc: Andrew andrew@nin9creative.com Sent: Monday, December 3, 2012 4:53 PM Subject: Re: [baker] Add an "About" button to the shelf on the right-hand side of the top menu (#525)

How hard are XIB files to code, I've never done one. Can they contain hyperlinks? — Reply to this email directly or view it on GitHub.

nin9creative commented 11 years ago

I guess a more complicated implementation would be to instead create a UIWebView in the modal dialog that rendered a local HTML file that is bundled with the App Binary. That would be easier for folks to deal with from a customization standpoint I suppose. Then there would be no need to have anyone have to do any Objective-C coding etc.

I'm sure there is some info somewhere on Google on how to do this. I'll go look and see how hard it might be to implement on top of the stuff that I've already done here.

tstegart commented 11 years ago

That's what I would love as a user. It also makes it easier to include in the basic Baker version because everyone who uses Baker has to know how to code HTML just to use it, while a XIB file would confuse most basic users (myself included). Can't you reuse some of the Baker code that does this already, when it opens a book or index view?

nin9creative commented 11 years ago

Perhaps. Basically though I just want to implement a stripped down super basic version for the info view though. I'll check it out and see what I can come up with. However you are right it's a better solution. Personally for me the more basic XIB would suffice but as you state the majority of Baker users would probably prefer HTML.

thejtate commented 11 years ago

Very nice, thanks for looking into this! I do prefer HTML compared to Objective-C coding (been diving into that these past few weeks). So this really helped out for what I needed.

nin9creative commented 11 years ago

Well, I went ahead and implemented a UIWebView on the popup modal window. It works by loading a local file packaged with the Baker binary.... I had to do a lot of jumping through hoops to get this to work on the iPhone5, iPhone, and iPad. Not sure if using XIB files is the absolute best way to get this done. But it does work pretty well.

So this example code.

<html>
<head>
<meta name="viewport" content="width=100%,user-scalable=false">
</head>
    <body>
    <img style="margin:0px auto;display:block" src="infoimage@2x.png" width="150" height="110"/>
    <p>Baker is a HTML5 ebook framework to publish interactive books &amp; magazines
    on iPad &amp; iPhone using simply open web standards.</p>
    <h4>Visit our Website!</h4>
    <p>Don't forget to visit our website at <a href="http://www.bakerframework.com">BakerFramework.com</a>.</p>
    </body>
</html>

Would get rendered as. The first screenshot. Clicking on the link for example will launch Safari out of the app.

Screenshot1

Screenshot1

Screenshot1

nin9creative commented 11 years ago

On second thought I might try approaching this different... Right now this is still using XIB files for the interface portion. I should try to either reuse the Baker ModalViewController class or copy that class and strip it down so that it works for this purpose of showing local html files without all the top bar navigation etc...

Simbul commented 11 years ago

I think it makes sense: if all the customisation is happening in the HTML anyway, there's probably no need for a XIB :)

ghost commented 11 years ago

Hi Andrew,

Could you post the code you added to have the UIWebView load from a local file please?

I've added your info view to my app and I would love to have something in there before I submit it to iTunes Connect today.

nin9creative commented 11 years ago

Won't have time until this evening.....

Warm Regards, Andrew

Sent from my iPhone

On Dec 12, 2012, at 2:27 PM, Mitchell Willocks notifications@github.com wrote:

Hi Andrew,

Could you post the code you added to have the UIWebView load from a local file please?

I've added your info view to my app and I would love to have something in there before I submit it to iTunes Connect today.

— Reply to this email directly or view it on GitHub.

ghost commented 11 years ago

That's okay. I'll hold out until this evening then. :)

Regards, Mitchell.

On 13/12/2012, at 6:33 AM, Andrew notifications@github.com wrote:

Won't have time until this evening.....

Warm Regards, Andrew

Sent from my iPhone

On Dec 12, 2012, at 2:27 PM, Mitchell Willocks notifications@github.com wrote:

Hi Andrew,

Could you post the code you added to have the UIWebView load from a local file please?

I've added your info view to my app and I would love to have something in there before I submit it to iTunes Connect today.

— Reply to this email directly or view it on GitHub.

— Reply to this email directly or view it on GitHub.

nin9creative commented 11 years ago

@mit1818 So the implementation from my master-nin9creative branch which you referred to now has the local HTML loading... If you get the changes from the last 2 commits on that branch it should work for you. The HTML file it loads is under BakerShelf/info/html/info.html

Good luck!

I will probably at some point rewrite this to not use the XIB files however honestly to support all the different dimensions in portrait and landscape for the iPad / iPhone / iPhone 5 it works. I just haven't had time to look to refactor it.