Hi all,
I was wondering if anyone has successfully used a "normal" VP (i.e not mobile VP) for users on a Ipad?
Would it be possible and work fairly good to configure and use a normal VP for Ipad users so they would basically get full functionality on the Ipad? Would all functionality work on mobile Safari? What are the "recommended" steps for doing this successfully?
Thanks in advance
Normal VP for Ipad?
Normal VP for Ipad?
Henrik (V8 Developer Ed. - Windows)
Hi hp
We have tried (2 times) to make Aware mobile module work for our apps but have abandoned it completely. It has it's benefits BUT I think it really only works for smartphone (not great for tablet) and there are many limitations that means unless your app is very simple it becomes unusable.
So... to answer your question yes we use a "normal vp" for tablet usage. There are a few things we have changed to make this work:
- we use a separate VP for tablet/mobile
- we created a new theme (adjusted the existing one), bigger buttons mostly so it is finger friendly
- we use a lot of HTML javascript buttons on forms
- we use a mobile/tablet form (different from the desktop one)
- we make extensive use of custom queries
- we "optimise" it for a 10 inch tablet (see comment below re fields and responsiveness... we would prefer NOT to have to do this as iPad minis are becomming more popular and this will be an issue in the future)
- we change some settings in startup.html to disable user zooming by pinching (would also prefer to NOT have to do this)
- we have a separate login page for tablet users and it logs straight into this mobile VP
It works great, the look and feel is much more similar to our desktop version so we don't need to re-train users (this was a major issue with the Aware Mobile version - it looked and was used completely differently to the desktop, so it confused users no end and they just didn't use it).
There are some shortcomings to this approach (but less than using the aware mobile version):
- menus are our biggest issue in terms of usability, we would LOVE a mobile/tablet friendly flyout menu (eg a little icon on the top that you hit and the menu appears/flysout from the left). The standard drop down menus on Aware the flyouts don't work, so you really have to think about where and how you are going to put all those menu options. We have tried using Javascript menus but haven't got one working that is good.
- responsiveness. when you change from portrait to landscape on the tablet. We set our forms to have no width so it fills the whole screen (regardless of orientation) but you have to give the fields a set width (we choose 200px with a 2 column layout), this works ok for 2 columns but not when you have 1 column (at say 500 px). It would be great to be able to set an aware field width to 100% of available space in the container.
Somethings you will love about this approach:
- you can have 2 columns (or more)
- the camera works straight out of the box for a Picture attribute - just click the icon and choose camera)
- google maps work
- presentations work (this was a major issue for us on Aware mobile, presentations do not display properly)
In summary, it can be done, it's a lot of testing but the results are the best possible outcome.
Good luck!
We have tried (2 times) to make Aware mobile module work for our apps but have abandoned it completely. It has it's benefits BUT I think it really only works for smartphone (not great for tablet) and there are many limitations that means unless your app is very simple it becomes unusable.
So... to answer your question yes we use a "normal vp" for tablet usage. There are a few things we have changed to make this work:
- we use a separate VP for tablet/mobile
- we created a new theme (adjusted the existing one), bigger buttons mostly so it is finger friendly
- we use a lot of HTML javascript buttons on forms
- we use a mobile/tablet form (different from the desktop one)
- we make extensive use of custom queries
- we "optimise" it for a 10 inch tablet (see comment below re fields and responsiveness... we would prefer NOT to have to do this as iPad minis are becomming more popular and this will be an issue in the future)
- we change some settings in startup.html to disable user zooming by pinching (would also prefer to NOT have to do this)
- we have a separate login page for tablet users and it logs straight into this mobile VP
It works great, the look and feel is much more similar to our desktop version so we don't need to re-train users (this was a major issue with the Aware Mobile version - it looked and was used completely differently to the desktop, so it confused users no end and they just didn't use it).
There are some shortcomings to this approach (but less than using the aware mobile version):
- menus are our biggest issue in terms of usability, we would LOVE a mobile/tablet friendly flyout menu (eg a little icon on the top that you hit and the menu appears/flysout from the left). The standard drop down menus on Aware the flyouts don't work, so you really have to think about where and how you are going to put all those menu options. We have tried using Javascript menus but haven't got one working that is good.
- responsiveness. when you change from portrait to landscape on the tablet. We set our forms to have no width so it fills the whole screen (regardless of orientation) but you have to give the fields a set width (we choose 200px with a 2 column layout), this works ok for 2 columns but not when you have 1 column (at say 500 px). It would be great to be able to set an aware field width to 100% of available space in the container.
Somethings you will love about this approach:
- you can have 2 columns (or more)
- the camera works straight out of the box for a Picture attribute - just click the icon and choose camera)
- google maps work
- presentations work (this was a major issue for us on Aware mobile, presentations do not display properly)
In summary, it can be done, it's a lot of testing but the results are the best possible outcome.
Good luck!
Rod. Aware 8.6 (latest build), Developer Edition, on OS Linux (Ubuntu) using GUI hosted on AWS EC2, MYSQL on AWS RDS
OOOOh nice post rod. Can you give me more details of the above as Its the one Gotcha I've never got to grips with, and I've never really tinkered under the hood to that extentwe change some settings in startup.html to disable user zooming by pinching (would also prefer to NOT have to do this)
Rocketman
V8.7 Developer Edition. Server 2016 Standard edition. MySql 5.5
V8.7 Developer Edition. Server 2016 Standard edition. MySql 5.5
and also great material for the knowledgebase.Hey Rocketman, add this to startup.html
Code: Select all
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />Rod. Aware 8.6 (latest build), Developer Edition, on OS Linux (Ubuntu) using GUI hosted on AWS EC2, MYSQL on AWS RDS
Great post RLJB, I'm also developing a mobile version without using mobile module.
For anyone interested, here is more info on viewport metatag:
The viewport metatag
http://davidbcalhoun.com/2010/viewport-metatag
Customize Android Browser Scaling with target-densityDpi
http://darkforge.blogspot.com.au/2010/0 ... -with.html
For anyone interested, here is more info on viewport metatag:
The viewport metatag
http://davidbcalhoun.com/2010/viewport-metatag
Customize Android Browser Scaling with target-densityDpi
http://darkforge.blogspot.com.au/2010/0 ... -with.html
Guys this is fantastic and exciting stuff. I would love to be able to use "normal vp". I can follow everything except how you modify a theme or your VP to make the text big. I can follow Rennur's Viewport tag explanation but how do you implement that? Sorry but I wouldn't know where to start in this. Can you give more detail in this area as to how you have a theme that uses the device width properly?
Cheers Rod
Cheers Rod
You don't have to modify the theme directly. The VP total width of all panels should not exceed the device's width the VP is intended for.I can follow everything except how you modify a theme or your VP to make the text big.
Create a separate CSS file and any modifications to text, buttons etc can be made there. Add a link to this CSS file to Startup.html- we created a new theme (adjusted the existing one), bigger buttons mostly so it is finger friendly
eg.. Using Notepad create a myCSS.css and save it to C:\AwareIM\Tomcat\webapps\AwareIM\ folder
I can follow Rennur's Viewport tag explanation but how do you implement that?
Viewport is a browser setting and does not affect the theme directly. Your queries' & forms' total width should not exceed the device's width either.Can you give more detail in this area as to how you have a theme that uses the device width properly?
Info on different device widths:
http://www.zingdesign.com/responsive-we ... eatsheet1/
Thanks Rennur. I have no idea re changing css and how to use in AwareIm forms etc. The viewport tag worked well in that it sized the screens to fit on the device. However I still have all text and buttons very small. Sorry but can you give details of a css file that would do this leaving all other css settings in the theme as is such as colour, fonts etc alone? And how would I then use that css file in a vp?
Sorry but I have no skills in this area at all.
Cheers Rod
Sorry but I have no skills in this area at all.
Cheers Rod
Tip: Use larger themes
Here´s another tip related to this and some of you are possible already doing/using this.
The tip is to use either the Basic themes or W8 themes for the normal VP mobile but instead of using the standard theme, use the larger versions. Both the Basic themes and the W8 (Azzurra) themes come in 3 different sizes and the size currently set as standard on these themes in Aware IM is the small size and there are 2 sizes more (medium and large). The theme creators even writes on their website that the medium and large size themes are well suited for tablet etc. devices. Here are links to info about the themes and if you look at the screenshots displaying the themes, you can see the different sizes. There is also 1 particular screenshot that shows the different sizes and how much they differ in size etc.
Basic: https://store.codaxy.com/Themes/Basic
W8 (Azzurra): https://store.codaxy.com/Themes/Azzurra
When it comes to doing this in Aware IM it is really easy and here are the steps (in this example I am doing this for the Basic theme):
1. Open up "Themes.props" located in the Aware IM/bin folder
2. Copy the line of text/code of the Basic theme
3. Paste the line of text/code to/at the bottom of the text document
4. Change the name of the theme from Basic to Basic mobile
5. Change the path of the line of text/code from:
ext-4.1.0/resources/basic-light/basic-ui-all.css
TO
ext-4.1.0/resources/basic-light-large/basic-ui-all.css
6. Restart the Aware IM server
7. Choose the Basic mobile theme as the theme for the application
8. Test
I have tested this and basically all data is shown correctly but there are some small issues that you need to correct. I have not tested everything in the larger themes so i´m not entirely sure what needs correcting but one thing that does is the Calendar query. It is shown in the theme and works as it should etc. but the font size is a lot smaller than the font in the larger themes so you need to create a specific CSS for the calendar with a larger font (see Clifton themes for tips on how to do this). I imagine the same CSS font work needs to be done for the scheduler.
I will only play with this now (normal VP for tablet etc.) because my application is far from being done and i´m not actually working on the mobile functionality yet but if any of you either use the larger themes already for a normal VP mobile or try this out, please post your results in this post / the forum. Thanks
The tip is to use either the Basic themes or W8 themes for the normal VP mobile but instead of using the standard theme, use the larger versions. Both the Basic themes and the W8 (Azzurra) themes come in 3 different sizes and the size currently set as standard on these themes in Aware IM is the small size and there are 2 sizes more (medium and large). The theme creators even writes on their website that the medium and large size themes are well suited for tablet etc. devices. Here are links to info about the themes and if you look at the screenshots displaying the themes, you can see the different sizes. There is also 1 particular screenshot that shows the different sizes and how much they differ in size etc.
Basic: https://store.codaxy.com/Themes/Basic
W8 (Azzurra): https://store.codaxy.com/Themes/Azzurra
When it comes to doing this in Aware IM it is really easy and here are the steps (in this example I am doing this for the Basic theme):
1. Open up "Themes.props" located in the Aware IM/bin folder
2. Copy the line of text/code of the Basic theme
3. Paste the line of text/code to/at the bottom of the text document
4. Change the name of the theme from Basic to Basic mobile
5. Change the path of the line of text/code from:
ext-4.1.0/resources/basic-light/basic-ui-all.css
TO
ext-4.1.0/resources/basic-light-large/basic-ui-all.css
6. Restart the Aware IM server
7. Choose the Basic mobile theme as the theme for the application
8. Test
I have tested this and basically all data is shown correctly but there are some small issues that you need to correct. I have not tested everything in the larger themes so i´m not entirely sure what needs correcting but one thing that does is the Calendar query. It is shown in the theme and works as it should etc. but the font size is a lot smaller than the font in the larger themes so you need to create a specific CSS for the calendar with a larger font (see Clifton themes for tips on how to do this). I imagine the same CSS font work needs to be done for the scheduler.
I will only play with this now (normal VP for tablet etc.) because my application is far from being done and i´m not actually working on the mobile functionality yet but if any of you either use the larger themes already for a normal VP mobile or try this out, please post your results in this post / the forum. Thanks
Henrik (V8 Developer Ed. - Windows)
Are you using Windows OS?
If so, you can play with existing theme css settings:
1. Open your app in desktop Chrome browser.
2. Open the myCSS.css file using Notepad.
In the browser, right click on the 'Home' menu button or any other button (eg. query operation button) and select 'Inspect Element'
The browser will now show you the HTML on the bottom left frame & CSS on the right frame. The button is enclosed with a HTML <div> and the CSS on right are for this selected div.
You can select on other HTML tags within that DIV until you get to the 'Home' text. which is enclosed in <span>. select this <span> and on the CSS on the right you can play with the text size settings.
You can change any of the CSS on the right (changes are not permanent) to play with different settings.
Once you have found the ideal style you can then copy that changed CSS setting (eg .x-btn-inner {font-size: 16px !Important;}) and paste that setting in myCSS.css.
Note: use !Important tag after the setting so the system will use your setting instead of the theme's setting.
As you can see you are not modfying the theme CSS directly, you are creating your own amendments stored in myCSS.css. Using this method, you can make amendments to any CSS of the theme you are using.
Create a link to myCSS.css in Startup.html below the
<!-- CSS SEPARATOR. Don't delete --> line
<link rel="stylesheet" type="text/css" href="myCSS.css">
If so, you can play with existing theme css settings:
1. Open your app in desktop Chrome browser.
2. Open the myCSS.css file using Notepad.
In the browser, right click on the 'Home' menu button or any other button (eg. query operation button) and select 'Inspect Element'
The browser will now show you the HTML on the bottom left frame & CSS on the right frame. The button is enclosed with a HTML <div> and the CSS on right are for this selected div.
You can select on other HTML tags within that DIV until you get to the 'Home' text. which is enclosed in <span>. select this <span> and on the CSS on the right you can play with the text size settings.
You can change any of the CSS on the right (changes are not permanent) to play with different settings.
Once you have found the ideal style you can then copy that changed CSS setting (eg .x-btn-inner {font-size: 16px !Important;}) and paste that setting in myCSS.css.
Note: use !Important tag after the setting so the system will use your setting instead of the theme's setting.
As you can see you are not modfying the theme CSS directly, you are creating your own amendments stored in myCSS.css. Using this method, you can make amendments to any CSS of the theme you are using.
Create a link to myCSS.css in Startup.html below the
<!-- CSS SEPARATOR. Don't delete --> line
<link rel="stylesheet" type="text/css" href="myCSS.css">
To give you more of an idea, these are my current CUSTOM CSS setting for the Blue Bay theme.
Code: Select all
@charset "utf-8";
/* BlueBay Window Header */
/* ========================================== */
.x-window-header-default-top {
padding:5px 14px 0 14px !important;
}
.x-window-body-default {
top: 17px !Important;
border-color: transparent !important;
border-width: 0px !important;
}
.x-window-body {
border-style: none !important;
}
/* BlueBay Panel */
/* ========================================== */
.x-panel {
box-shadow: none !important;
}
.x-tab-bar-strip-default, .x-tab-bar-strip-default-plain {
border-color: #ccc7c7 !important;
background-color: transparent !important;
}
.x-tab-default-top-active {
border-bottom-color: #fff !important;
}
.x-panel-body-default-framed {
padding: 5px 0px 0px 5px !important;
}
.x-panel-body-default {
border-color: #ccc7c7 !important;
}
.x-panel-header-default {
border-top-right-radius: 6px !important;
border-top-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
/* BlueBay Separator */
/* ========================================== */
/* BlueBay Separator */
.x-fieldset {
padding: 10px !important;
background-color: #F8F8F8 !important;
border: 1px solid #CDCDCD !important;
clear: both !important;
margin-top: 4px !important;
margin-bottom: 4px !important;
position: relative !important;
border-radius: 6px !important;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
/* BlueBay Separator Collapsed */
.x-fieldset-collapsed {
padding-bottom: 0 !important;
border-left-color: #b5b8c8 !important;
border-right-color: #b5b8c8 !important;
border-top-width: 1px !important;
border-right-width: 1px !important;
border-bottom-width: 1px !important;
border-left-width: 1px !important;
border-top-style: solid !important;
border-right-style: dotted !important;
border-bottom-style: dotted !important;
border-left-style: dotted !important;
border-top-color: #b5b8c8 !important;
border-bottom-color: #b5b8c8 !important;
}
.x-fieldset-header {
font: 14px/14px bold !important;
color: #835d5a !important;
}
/* BlueBay Tabs */
/* ========================================== */
.x-tab-bar ~ .x-panel-body {
top: 31px !Important;
}
.x-tab-bar {
background-color: transparent !important;
}
.x-tab-default-top {
/* border-bottom: 1px solid #ccc7c7 !important; */
}
/* BlueBay Tab Bar */
.x-tab button {
color: #555555 !important;
}
/* BlueBay Menu */
/* ========================================== */
.x-btn-default-toolbar-small {
padding: 2px 4px 4px 4px !important;
}
/* BlueBay Lablel */
/* ========================================== */
/* TOP */
.x-form-item-label-top {
margin: 2px 0 1px 0 !Important;
padding: 0 0 2px 0 !important;
color: #835d5a !important;
}
/* LEFT */
.x-form-item-label {
color: #835d5a !important;
}
/* BlueBay Toolbar */
/* ========================================== */
.x-toolbar {
border-color: #ccc7c7 !important;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
/* Selected Item */
/* ========================================== */
.x-item-selected {
background-color: rgb(238, 238, 238) !important;
}
/* Aware Custom Line */
/* ========================================== */
.aw-custom-line{
background-color:white !important
}
.aw-data-item {
margin:1px;
padding:1px
}
/* Aware Shortcut */
/* ========================================== */
.aw-shortcut {
top: 2px !important;
line-height: normal !important; }