Oracle JET provides NavDrawer template for Web and for Hybrid. Read how to create JET Hybrid application based on template - Create a Hybrid Mobile Application. There is significant difference in NavDrawer template implementation when we compare Web and Hybrid application.
Hybrid template draws menu structure on top of the form. Web template is pushing form to the right, when menu is opened. Such approach works fine on the Web, but you would see significant UI lag each time when menu item is selected. Probably thats the reason why hybrid NavDrawer template draws menu on top of the form - visually this provides better performance when switching between menu items. Menu is rendered on the top of the form in JET Hybrid Nav Drawer template:
Form is loaded instantly, when menu item is selected. Header in JET Hybrid NavDrawer template stays fixed, it doesnt scroll. This gives good opportunity to put there common actions:
NavDrawer template in JET Web application moves form to the right, when menu is opened - thats the main visual difference when comparing to NavDrawer Hybrid:
Index page of NavDrawer hybrid template is almost identical to Web NavDrawer, except that it doesn't contain header part. Header is implemented separate module:
I have customized default header implementation with additional items - logo and user preferences:
Header module is constructed in appController, this is how it is generated by default. If we want to have access to variables/functions from appController in the header, we need to create a mapping:
Every module must include div with fixed top JET CSS class (thats why it doesnt scroll and stays on top), where you would copy header code:
Header is bind with module, which is defined by headerConfig variable (must be located in each module) - which is initialized in appController:
Thats all about menu/header implementation.
Let's learn how to push update to Google Play. Make sure to increase application version in Cordova config.xml file:
Go to Google Play and upload new APK, it will be parsed and Google Play automatically will deactivate previous version:
You can initiate roll-out to production:
This will push new release to Google Play. Users will be automatically notified about new version:
Version 2 of our JET Hybrid app is available on Google Play:
Hybrid template draws menu structure on top of the form. Web template is pushing form to the right, when menu is opened. Such approach works fine on the Web, but you would see significant UI lag each time when menu item is selected. Probably thats the reason why hybrid NavDrawer template draws menu on top of the form - visually this provides better performance when switching between menu items. Menu is rendered on the top of the form in JET Hybrid Nav Drawer template:
Form is loaded instantly, when menu item is selected. Header in JET Hybrid NavDrawer template stays fixed, it doesnt scroll. This gives good opportunity to put there common actions:
NavDrawer template in JET Web application moves form to the right, when menu is opened - thats the main visual difference when comparing to NavDrawer Hybrid:
Index page of NavDrawer hybrid template is almost identical to Web NavDrawer, except that it doesn't contain header part. Header is implemented separate module:
I have customized default header implementation with additional items - logo and user preferences:
Header module is constructed in appController, this is how it is generated by default. If we want to have access to variables/functions from appController in the header, we need to create a mapping:
Every module must include div with fixed top JET CSS class (thats why it doesnt scroll and stays on top), where you would copy header code:
Header is bind with module, which is defined by headerConfig variable (must be located in each module) - which is initialized in appController:
Thats all about menu/header implementation.
Let's learn how to push update to Google Play. Make sure to increase application version in Cordova config.xml file:
Go to Google Play and upload new APK, it will be parsed and Google Play automatically will deactivate previous version:
You can initiate roll-out to production:
This will push new release to Google Play. Users will be automatically notified about new version:
Version 2 of our JET Hybrid app is available on Google Play:
No comments:
Post a Comment