AppSuite:Mobile - Revision history

Khgras at 09:12, 15 May 2019

2019-05-15T09:12:06Z

← Older revision		Revision as of 09:12, 15 May 2019
Line 1:		Line 1:
	The content on this page has moved to https://documentation.open-xchange.com/~~latest~~/ui/~~how-to/mobile-development.html~~		The content on this page has moved to https://documentation.open-xchange.com/7.10.2/ui/

	Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition.		Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition.

Khgras: Replaced content with "The content on this page has moved to https://documentation.open-xchange.com/latest/ui/how-to/mobile-development.html Note: Open-Xchange is in the process of migrating al..."

2017-05-22T09:55:16Z

Replaced content with "The content on this page has moved to https://documentation.open-xchange.com/latest/ui/how-to/mobile-development.html Note: Open-Xchange is in the process of migrating al..."

← Older revision		Revision as of 09:55, 22 May 2017
Line 1:		Line 1:
	~~<!-- !!! -->~~		The content on this page has moved to https://documentation.open-xchange.com/latest/ui/how-to/mobile-development.html
	~~<!-- PLEASE APPLY CHANGES ONLY TO THE NEW TECHNICAL DOCUMENTATION~~: ~~wd/frontend~~/~~web~~/documentation -->
	~~<!-- !!! -~~->

	~~{{Stability~~-~~experimental}}~~		Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition.

	~~<div class="title">Developing for mobile devices</div>~~

	~~==Introduction==~~

	~~App Suite~~ is ~~designed to work on all device types and sizes. The UI uses responsive design principles to scale nicely on each device size. We do define three display sizes to macht~~ the ~~majority~~ of ~~devices. These are simply named "small", "medium" and "large". Theses classes are used~~ to ~~match smartphones, tablets and desktop PCs. If you are developing~~ a ~~app for App Suite make sure it runs nicely~~ and ~~looks great on all of these three device categories.~~ (~~If you are not familiar with latest CSS techniques and the principles of responsive design you should have a look at this [https://~~documentation.open-xchange.com~~/latest/ui/00-getting-started/01-skills-needed.html article]~~).

	~~Often the simple use of media queries is not enough to customize your app for small and medium screens, you may need to customize your application code~~ as ~~well. We have integrated a function to detect everything you might want to know during runtime in your javascript code.~~

	~~==Sizes==~~

	~~The minimum device target size is 320 x 480 pixels. Your App should work on devices with this resolution.~~

	~~{\| border=1~~
	\|-
	~~\|small \|\| up to 480px~~
	\|-
	~~\|medium \|\| 481px up to 1024px~~
	\|-
	~~\|large \|\| 1025px and higher~~
	\|}

	~~==The _.device function==~~

	~~We extended underscore with a new function called <tt>_.device</tt>~~

	~~The <tt>_.device()</tt> function can be used to retrieve informations about~~ the ~~device. The function~~ takes ~~a string as argument which contains a boolean expression. This expression will be evaluated and the result is returned as a boolean.~~

	~~The device function uses <tt>_.browser</tt> object for informations in combination with <tt>_.screenInfo</tt>~~

	~~The device class <tt>'smartphone'</tt> is used to determine a mobile device and is detected by several criteria. For~~ more ~~details, see this [[AppSuite:UI_smartphone_device_classification \| article about smartphone classification. ]]~~

	~~==Examples for _.device==~~
	~~<pre class="language-javascript">~~
	~~// handle different mobile operating systems~~
	~~if (_.device('ios')) {~~
	~~// true for all devices running iOS, no matter what version~~
	~~console.log('you are running iOS');~~
	}

	~~// combined statements~~
	~~if (_.device('ios && android')) {~~
	~~// true for all android and iOS devices~~
	}

	~~// negation~~
	~~if (_.device('!android')) {~~
	~~// true for all devices except android~~
	}

	~~// screen~~ information
	~~if (_.device('small && iOS ')) {~~
	~~// true for iPhone, not for iPad~~
	}

	~~// shorthands~~
	~~_.device('smartphone')~~
	~~// true for small devices running a mobile OS (iOS, Android, BB or Windowsphone)~~

	~~_.device('tablet')~~
	~~// true for medium sized devices running a mobile OS~~

	~~_.device('desktop')~~
	~~// true for all devices not running a mobile OS~~

	~~// getting version informations~~
	~~_.device('ios > 5 \|\| android > 4')~~
	~~// true for ios > 5, i.e. 5.1 and 6. Same for Android, 4.0 will fail 4.1 or 4.2~~ will be ~~true.~~

	~~// enhanced screen information~~
	~~_.device('iOS && retina && small')~~
	~~// true for iPhone 4, 4s and 5 (retina display)~~

	~~_.device('landscape && android && medium')~~
	~~// true for android tablet held in landscape mode~~

	~~// other information, simple browser detection~~
	~~_.device('safari \|\| firefox')~~

	~~</pre>~~

	~~Please note that information about device orientation may change during usage.~~

	~~==Mobile considerations==~~

	~~As of today mobile usage has become much more important than some years ago. Always consider the the fact a user may want to use your App~~ on ~~a smartphone. So, optimizing for mobile should not be last step in your development process, it should be one of~~ the ~~first. This will safe you a lot of painful debugging~~ and ~~layout fixes.~~

	~~You should ask you a simple question: Does function X in my App do have a mobile use case? Or more simple: Will anybody use this~~ on ~~a smartphone?~~
	~~If not, disable or remove~~ this ~~function on a mobile device~~. ~~Nobody will perform a complex 35-click action in your App on a smartphone.~~

	~~Developing~~ for ~~mobile should follow some simple rules:~~
	* Mobile phones do have small screens. Safe space in your ~~layout, reduce margins and paddings.~~
	* Touch is not click, keep buttons and links big enough to be touchable. 40px should be a minium.
	* Mobile networks are slow and have a high latency. Safe network requests and handle failing requests properly
	* Mobile devices are not as fast as desktop PCs. Not everybody has a high end smartphone so keep your code clean and fast
	* Always test your App on a real device

	~~==Remote Debugging==~~

	~~To setup remote debugging on windows, mac and linux you can follow the instructions from the chrome developer tools website.~~

	~~[https://developer.chrome.com/devtools/docs/remote-debugging Remote Debugging on Android with Chrome]~~


	If this ~~is not working or not applicable for you, use the following description:~~

	~~[[AppSuite:UI_remote_debugging_android_mac \| How to setup remote debugging for Chrome on android devices with a mac~~.]]

Khgras at 09:02, 22 May 2017

2017-05-22T09:02:13Z

← Older revision		Revision as of 09:02, 22 May 2017
Line 9:		Line 9:
	==Introduction==		==Introduction==

	App Suite is designed to work on all device types and sizes. The UI uses responsive design principles to scale nicely on each device size. We do define three display sizes to macht the majority of devices. These are simply named "small", "medium" and "large". Theses classes are used to match smartphones, tablets and desktop PCs. If you are developing a app for App Suite make sure it runs nicely and looks great on all of these three device categories. (If you are not familiar with latest CSS techniques and the principles of responsive design you should have a look at this [https://documentation.open-xchange.com/latest/ui/00-getting-started/01-skills-needed.html article]]).		App Suite is designed to work on all device types and sizes. The UI uses responsive design principles to scale nicely on each device size. We do define three display sizes to macht the majority of devices. These are simply named "small", "medium" and "large". Theses classes are used to match smartphones, tablets and desktop PCs. If you are developing a app for App Suite make sure it runs nicely and looks great on all of these three device categories. (If you are not familiar with latest CSS techniques and the principles of responsive design you should have a look at this [https://documentation.open-xchange.com/latest/ui/00-getting-started/01-skills-needed.html article]).

	Often the simple use of media queries is not enough to customize your app for small and medium screens, you may need to customize your application code as well. We have integrated a function to detect everything you might want to know during runtime in your javascript code.		Often the simple use of media queries is not enough to customize your app for small and medium screens, you may need to customize your application code as well. We have integrated a function to detect everything you might want to know during runtime in your javascript code.

Khgras at 09:02, 22 May 2017

2017-05-22T09:02:02Z

← Older revision		Revision as of 09:02, 22 May 2017
Line 9:		Line 9:
	==Introduction==		==Introduction==

	App Suite is designed to work on all device types and sizes. The UI uses responsive design principles to scale nicely on each device size. We do define three display sizes to macht the majority of devices. These are simply named "small", "medium" and "large". Theses classes are used to match smartphones, tablets and desktop PCs. If you are developing a app for App Suite make sure it runs nicely and looks great on all of these three device categories. (If you are not familiar with latest CSS techniques and the principles of responsive design you should have a look at this [~~[AppSuite~~:~~UI_developer_primer \|~~ article]]).		App Suite is designed to work on all device types and sizes. The UI uses responsive design principles to scale nicely on each device size. We do define three display sizes to macht the majority of devices. These are simply named "small", "medium" and "large". Theses classes are used to match smartphones, tablets and desktop PCs. If you are developing a app for App Suite make sure it runs nicely and looks great on all of these three device categories. (If you are not familiar with latest CSS techniques and the principles of responsive design you should have a look at this [https://documentation.open-xchange.com/latest/ui/00-getting-started/01-skills-needed.html article]]).

	Often the simple use of media queries is not enough to customize your app for small and medium screens, you may need to customize your application code as well. We have integrated a function to detect everything you might want to know during runtime in your javascript code.		Often the simple use of media queries is not enough to customize your app for small and medium screens, you may need to customize your application code as well. We have integrated a function to detect everything you might want to know during runtime in your javascript code.

Frank.paczynski at 13:34, 10 February 2016

2016-02-10T13:34:20Z

← Older revision		Revision as of 13:34, 10 February 2016
Line 1:		Line 1:
			<!-- !!! -->
			<!-- PLEASE APPLY CHANGES ONLY TO THE NEW TECHNICAL DOCUMENTATION: wd/frontend/web/documentation -->
			<!-- !!! -->

	{{Stability-experimental}}		{{Stability-experimental}}

Richard.petersen: /* The _.device function */

2014-10-29T08:46:49Z

The _.device function

← Older revision		Revision as of 08:46, 29 October 2014
Line 29:		Line 29:

	The device function uses <tt>_.browser</tt> object for informations in combination with <tt>_.screenInfo</tt>		The device function uses <tt>_.browser</tt> object for informations in combination with <tt>_.screenInfo</tt>

			The device class <tt>'smartphone'</tt> is used to determine a mobile device and is detected by several criteria. For more details, see this [[AppSuite:UI_smartphone_device_classification \| article about smartphone classification. ]]

	==Examples for _.device==		==Examples for _.device==

Richard.petersen at 09:00, 22 October 2014

2014-10-22T09:00:12Z

← Older revision		Revision as of 09:00, 22 October 2014
Line 97:		Line 97:
	==Remote Debugging==		==Remote Debugging==

			To setup remote debugging on windows, mac and linux you can follow the instructions from the chrome developer tools website.

			[https://developer.chrome.com/devtools/docs/remote-debugging Remote Debugging on Android with Chrome]


			If this is not working or not applicable for you, use the following description:

	[[AppSuite:UI_remote_debugging_android_mac \| How to setup remote debugging for Chrome on android devices with a mac.]]		[[AppSuite:UI_remote_debugging_android_mac \| How to setup remote debugging for Chrome on android devices with a mac.]]

David.bauer: /* Remote Debugging */

2013-06-24T12:40:29Z

Remote Debugging

← Older revision		Revision as of 12:40, 24 June 2013
Line 99:		Line 99:


	[[AppSuite:UI_remote_debugging_android_mac \| How to setup remote debugging for android devices on a mac.]]		[[AppSuite:UI_remote_debugging_android_mac \| How to setup remote debugging for Chrome on android devices with a mac.]]

David.bauer at 11:33, 24 June 2013

2013-06-24T11:33:24Z

← Older revision		Revision as of 11:33, 24 June 2013
Line 94:		Line 94:
	* Mobile devices are not as fast as desktop PCs. Not everybody has a high end smartphone so keep your code clean and fast		* Mobile devices are not as fast as desktop PCs. Not everybody has a high end smartphone so keep your code clean and fast
	* Always test your App on a real device		* Always test your App on a real device

			==Remote Debugging==



			[[AppSuite:UI_remote_debugging_android_mac \| How to setup remote debugging for android devices on a mac.]]

Alexander.quast at 13:48, 10 May 2013

2013-05-10T13:48:24Z

← Older revision		Revision as of 13:48, 10 May 2013
Line 92:		Line 92:
	* Touch is not click, keep buttons and links big enough to be touchable. 40px should be a minium.		* Touch is not click, keep buttons and links big enough to be touchable. 40px should be a minium.
	* Mobile networks are slow and have a high latency. Safe network requests and handle failing requests properly		* Mobile networks are slow and have a high latency. Safe network requests and handle failing requests properly
	* Mobile devices are not as fast as ~~dekstop PC~~. Not everybody has a high end smartphone so keep your code clean and fast		* Mobile devices are not as fast as desktop PCs. Not everybody has a high end smartphone so keep your code clean and fast
	* Always test your App on a real device		* Always test your App on a real device