search

hanchang / friar

Friar Framework helps you make beautiful Android 2.2+ apps out of HTML5 content. Inspired by the Baker Framework for iOS.
http://www.friarframework.com
75 stars 19 forks source link

Tap Navigation #12

Closed mtamony closed 11 years ago

mtamony commented 11 years ago

I have Baker/Friar working somewhat well on Android. I update Jquery and Jquery Touch Swipe in Friar. Improved the experience. Has anyone gotten the double tab navigation to do anything in Android?

SEGIS commented 11 years ago

I'm working on this too. I've build an example of Baker/friar with some modifications but double tab is still a problem to me. I was thinking that the solution involves capturing double tap event and displaying index via dialog or fragment ... but then I realized that doing like this you always need to specify the width and hight by code not by html-css as on Baker. Now I believe that the solution maybe involves using relative layouts.... any thought?

mtamony commented 11 years ago

I actually had that TOC that appears in a browser show up on an android emulator. It worked somewhat well, but I can't seem to get it back. The CSS for the example is a mess, especially when it comes to Android. I will look around for double tap solutions for other Android projects.

On Sat, Dec 15, 2012 at 5:33 PM, SEGIS notifications@github.com wrote:

I'm working on this too. I've build an example of Baker/friar with some modifications but double tab is still a problem to me. I was thinking that the solution involves capturing double tap event and displaying index via dialog or fragment ... but then I realized that doing like this you always need to specify the width and hight by code not by html-css as on Baker. Now I believe that the solution maybe involves using relative layouts.... any thought?

— Reply to this email directly or view it on GitHubhttps://github.com/hanchang/friar/issues/12#issuecomment-11413027.

SEGIS commented 11 years ago

How did you managed to show TOC? as a Dialog? or with two webview? You could remove one with Viewmanager: http://developer.android.com/reference/android/view/ViewManager.html

mtamony commented 11 years ago

So far it seems that TOC shows at a certain width. If you view in Chrome and scale the browser window down it disappears. I'm assuming I can get it to show on all widths in Android with CSS. Working on it now.

On Mon, Dec 17, 2012 at 9:09 AM, SEGIS notifications@github.com wrote:

How did you managed to show TOC? as a Dialog? or with two webview? You could remove one with Viewmanager: http://developer.android.com/reference/android/view/ViewManager.html

— Reply to this email directly or view it on GitHubhttps://github.com/hanchang/friar/issues/12#issuecomment-11450218.

mtamony commented 11 years ago

nav.css is where the answer is. It is the smaller sizes where it says display:none;

On Mon, Dec 17, 2012 at 9:37 AM, Michael SBCERA sbcera@gmail.com wrote:

So far it seems that TOC shows at a certain width. If you view in Chrome and scale the browser window down it disappears. I'm assuming I can get it to show on all widths in Android with CSS. Working on it now.

On Mon, Dec 17, 2012 at 9:09 AM, SEGIS notifications@github.com wrote:

How did you managed to show TOC? as a Dialog? or with two webview? You could remove one with Viewmanager: http://developer.android.com/reference/android/view/ViewManager.html

— Reply to this email directly or view it on GitHubhttps://github.com/hanchang/friar/issues/12#issuecomment-11450218.

SEGIS commented 11 years ago

When you talk about TOC you mean index, are you?. I've not working on this today but I don't understand where is the relationship between css and double tap event that you have to manage in android. You have to show up somehow, haven't you? are you using two webview or fragment? Will you mind explain it to me please, I'm a bit lost ;)

mtamony commented 11 years ago

So there are actually two TOC in this sample.

One is a TOC that is for desktop computer browser. If you were to open one of the .html files in a browser you will see it.

The other TOC is the one that opens with a double tab on a mobile device.

I am trying to get the desktop browser TOC to exist in Android because double tap is not working. I'm not trying to tie double tap into the other navigation at this point.

Basically this project is awesome in iOS and a nightmare in Android.

On Mon, Dec 17, 2012 at 11:57 AM, SEGIS notifications@github.com wrote:

When you talk about TOC you mean index, are you?. I've not working on this today but I don't understand where is the relationship between css and double tap event that you have to manage in android. You have to show up somehow, haven't you? are you using two webview or fragment? Will you mind explain it to me please, I'm a bit lost ;)

— Reply to this email directly or view it on GitHubhttps://github.com/hanchang/friar/issues/12#issuecomment-11458465.

mtamony commented 11 years ago

I just realized what might be confusing is that I am also using the Laker Compendium as my book in my project.

hanchang commented 11 years ago

Ah!!! This makes more sense now!

Okay, the issue with the Laker Compendium (as of version 1.4) in Friar Framework is that it uses a custom client side include library: http://www.massimocorner.com/libraries/csi/

This is nice because it makes the code more reusable by extracting repeating parts out into files that can be included in other files. You can verify this by going to "introduction.html" in Laker and viewing the source. In the opening tag, you will clearly see the following code:

<html xmlns:csi="http://www.massimocorner.com/libraries/csi/" lang="de">

Then you can find the table of content div which loads the "inc/toc.html" file into that div using a Client Side Include:

<div id="includeTOC" csi:src="inc/toc.html"></div>

However, Android doesn't seem to support any client side includes for security reasons: http://stackoverflow.com/questions/9003402/jquery-and-phonegap-include-a-html-file-clientside-with-html-or-js

This is not a standard way of making web pages so I am not surprised it does not work in Android's WebView due to its strict security settings. See point number three in the list below, this is the method that the CSI library in Laker Compendium tries to use, and which Android rejects. http://en.wikipedia.org/wiki/Server_Side_Includes#Client_Side_Includes

The standardized method to accomplish the same thing would be through something like an iframe, which is the first option listed in the link above. If you really need to get Laker working, I can recommend that you refactor the code from using the CSI library into using iframes. Alternatively, I can also recommend contacting the author of Laker in hopes that maybe he will look into it as well.

Best of luck!