Android framework for app layout

[Ices-Eyes]

Hi. I've published two phonegap app on the store usiing wp-appkit framework, and the users are really happy of the apps, that works extreamly well. Now I would like to make some enhancement based on the user feedbacks, but there are some things I0m not able to do giving the actual layout (ie. pull to refresh, swiping menu panel access...). I'm wondering if you think there is any easy way to use wp-appkit with some framework out there to manage hybrid app, i.e. like frasmework7, core_css, .....) Thanks, Luca

[blupu]

Thank you, it's always a pleasure to see our baby used with success :-) Is there any chance you can give us links to the apps?

Your idea using a solution like Framework7 is very interesting indeed. My guess is that it might be possible (reading this). Is that something you want to try? If so, we are ready to help you. At the moment, we are busy finalizing the PWA support but we can surely help you a Framework 7 based theme.

[Ices-Eyes]

Well, for the link to the apps, no probs, they are some sorts of twin apps, and are related to two blogs: https://play.google.com/store/apps/details?id=net.nokioteca.app https://play.google.com/store/apps/details?id=net.windowsteca.app

As far as F7 is concerned, I tryed to look at the documentation, but then stopped, when I realize that both F7 and WP-Appkit has their own history management, page/navigations/routes management, and I was wondering how this two could work together, without interfere each other... Maybe I could start with something and give this a try.... :)

[blupu]

Regarding routing, history... we can look into that with @mleroi and @lpointet. I did a research few months ago and it appeared that maybe Onsen UI might be a better solution as it is only a UI library.

Would you be ok that we communicate about your apps? We are often asked for examples of WP-AppKit based apps.

[Ices-Eyes]

Well, that was another framework I was maybe looking at :D

[mleroi]

Hi @Ices-Eyes, well done for your apps, they're really nice!

As you said the key is to find a UI framework that is compatible with WP-AppKit routing / screen transition system, meaning that you can use the UI part of the framework without its routing part.

I think Framework7, Onsen UI and core_css all have independent CSS and Javascript UI components that can be used to build a WP-AppKit theme. As Benjamin said we did not have time to test those frameworks in a WP-AppKit context yet, but it would be very interesting to do so.

From the doc I have the feeling that Framework7 is hard to use without its routing system indeed, but I would be happy to be proven wrong :) Onsen UI or Core_CSS seem to be great for a "UI only" usage.

Building the app screens layout (lists/pages/header/menus/navs etc) should be quite straight forward with those frameworks. The trickiest part is to implement screen transitions. WP-AppKit screen transition system is customizable and quite flexible and it may be possible to call the UI framework transitions from WP-AppKit page transitions hooks, but this of course depends on the framework implementation of screen transitions and would require some deeper investigations. So the simplest would probably be to stay with a custom implementation of screen transitions, like what's done in current default themes: screens rendered using the UI framework but transitions between them handled with custom homemade JS transitions.

[Ices-Eyes]

Ok...I've tried to play a bit with onsen. The main components, app bar, sidebar, seems to be tied to webcomponents and navigation routing, but it seems to be possible to override it, so woul love to try to make all of this works together. Btw, for the moment I'm stuck in the fact that when I add the onsenui-min js file on the define of the functions.js, pages are no more loaded from wp-appkit framework, and menu and content variables are just empty. So, looking into this for now.... -.-"

[mleroi]

Don't hesitate to reach us on email support joining your theme files if you want us to take a look.

[Ices-Eyes]

Well, I made some tests with onsenui, and in my opinion is not usable as it is in wp-appkit. I tried with a really vanilla app, with no logic or else. In the head.html I included just the two onsen css files, while on layout and menu.html style a simple layout with the menu.

Now I tried to load something, so in functions.js I try: 1) define([ ], function() { }); In this case, with no style and nothing working, menu entries appear in the emulator. 2) define([ 'theme/onsenui/js/onsenui.min' ], function(OnsenUI) { }); In this case, looking at the network tab of developer tools, last thing loaded is the onsen js, hence no load of menu or else, and nothing appears. No eroors or warning in the console. Just stop... (same behaviour if i do not give the OnseUI name to the require.js script).

I think I will try with something else. Core_css was promising, and been able to make somenthing nice, but it seems it is unsupported for one here now, so probably not a good idea to start with it now...

[blupu]

@mleroi @lpointet I've done a quick test and I confirm the problem @Ices-Eyes had. We may need some help with the basic setup.

• Work on a copy of q-android
• Added a onsen-ui folder to the theme folder with the whole Onsen UI package
• Added the required CSS calls in head.html > Works fine
• Added a call to the required JS file as followed in functions.js > Not working

define([
    'jquery',
    'core/theme-app',
    'core/modules/storage',
    'core/theme-tpl-tags',
    'root/config',
    'theme/js/moment.min',
    'theme/js/velocity.min',
    'theme/js/jquery.fitvids',
    'theme/onsen-ui/js/onsenui.min.js',
    ], function($,App,Storage,TemplateTags,Config,Moment,Velocity) {

I got the following error in the console:

[mleroi]

Hi, Unfortunately it seems that the way the Onsen UI module is implemented (in onsenui(.min).js) makes it impossible to use with requireJS indeed :( To get OnsenUI script to work, you'll have to include it by hand in the index.html, before require.js inclusion: include: <script src="themes/[your-onsenui-theme]/js/onsenui.min.js?wpak_app_id=[your-app-id]"></script> here: https://github.com/uncatcrea/wp-appkit/blob/master/wp-appkit/app/index.html#L25 Unfortunately for now modifying the index.html directly in plugin's core is the only way... We are thinking of a way to allow index.html customization in a future version.

So I've played with it and quickly built a very basic theme that you can find here: https://github.com/mleroi/wpak-theme-onsenui It can be seen in action as a PWA here: https://uncategorized-creations.com/pwa/onsenui/ This is only a quick proof of concept, many things to enhance inhere of course, but I find it pretty encouraging, the framework is quite straight forward to use and I've not encountered major difficulties with the features I used until now.

[Ices-Eyes]

Well, the possibility to modify the index would be really nice... In the meantime, during the weekend, I tried to implement a theme using the materializa css framework (http://next.materializecss.com). Either if absolutely less powerfoul of Onsen or F7, it permits some less code for interface managemet and other... Need to find out some good pull to refresh implementation, and will stick with this for now probably :)