Getting Started with SAPUI5 - SELF LEARNING SAP

1 Getting Started with SAPUI5 Table of Contents1 Getting Started with Choose Your Browser Support: SAPUI5 for Degradations by Degradations by Browser Support: SAPUI5 for Create your First mobile App using Create a HTML Page for Your mobile Initialize the mobile Add Content Run Your First mobile Create Your First SAPUI5 Develop Your First Application using SAPUI5 Create an SAPUI5 Application Add a Control to Your View .. Implement a Method in the Create an Additional Integrate a New JavaScript Code Linking your Eclipse Editor to the Demo Use JavaScript SAPUI5 Testing SAPUI5 Applications in Test in SAPUI5 Application Test Your SAPUI5 Application on a Java Web Set up Tomcat to test SAPUI5 Use a SimpleProxyServlet for Testing to Avoid Cross-domain 2013 SAP AG or an SAP affiliate company. All rights Started with SAPUI5 Table of Contents1 IntroductionThe SAPUI5 runtime is a client-side HTML5 rendering library with a rich set of standard and extension controls.

2 It provides a lightweight programming model for desktop as well as mobile applications. Based on JavaScript, it supports RIA like client-side features. SAPUI5 complies with OpenAjax and can be used together with standard JavaScript SDKThe SDK comes together with a Demo Kit, which contains: A Developer Guide with a summary of valuable information around the used programming languages, open source technologies, development tools and APIs A Controls section containing running demo examples with descriptions and source codes API Reference with JavaScript documentation of Framework and Control API Test Suite which shows all controls running with different property settings where you can interactively adapt the controls you use for your test can access the Demo Kit online: SAPUI5 Demo Kit on SAP HANA CloudThis might not be the version of your local Specific Help for SAPUI5 SAPUI5 is delivered to different platforms. This SAPUI5 Developer Guide focusses on platform independent topics.

3 To find information on SAPUI5 functions specific to a platform, please refer to the respective guide: SAP HANA Cloud PlatformThis guide provides additional help on how to run your SAPUI5 applications on an SAP HANA Cloud platform. SAP HANA PlatformThis guide provides additional help on installing and testing in an SAP HANA platform environment. User Interface Add-On for SAP NetWeaverThis guide provides additional help on using the SAPUI5 repository and translation infrastructure on an SAP NetWeaver application server Started with SAPUI5 Introduction 2013 SAP AG or an SAP affiliate company. All rights Getting Started with SAPUI5 Here you find information on how to adjust your enviroment and to get Started with some easy examples including an introduction to the SAPUI5 PrerequisitesTo find the appropriate installation option, refer to SAP note 1747308 on installation of having installed SAP HANA Cloud Tools, SAPUI5 runtime and tools are included and ready to your browserBefore you really get Started , check the list of supported browsers to choose one that fits your Your First SAPUI5 ApplicationsTo get Started with SAPUI5 , you now have two different options: Either you just create an HTML page (even with notepad, if you want to) or you start directly using the SAPUI5 tools in Simple SAPUI5 ApplicationsThe easiest way to work with SAPUI5 is to include a set of JavaScript libraries into your HTML page.

4 After that you can use all controls provided by these libraries to construct one or more control trees and include them into your HTML page. The framework also supports the JavaScript Object Notation (JSON) to initialize controls with a reduced typing mobile Apps with SAPUI5 SAPUI5 provides an additional control library called , which is optimized for mobile Applications using SAPUI5 toolsUsing the SAPUI5 application tools in Eclipse allows you to create sophisticated SAPUI5 application projects based on the Model View Controller concept. The tools provide additional features such as SAPUI5 Snippets or JavaScript provide wizards to create SAPUI5 applications for desktop as well as for mobile your SAPUI5 applicationsDepending on the environment your application is running on, you can use different options to deploy and run your SAPUI5 applications. But you can always test locally in your Information4 2013 SAP AG or an SAP affiliate company. All rights Started with SAPUI5 Getting Started with SAPUI5 Choose Your Browser [page 6]You need to check which browser suits best to your use Your First SAPUI5 Application [page 21]You can include a bootstrap to the SAPUI5 JavaScript libraries to use SAPUI5 in an HTML page without having set up the SAPUI5 application development tools in your First mobile App using SAPUI5 [page 15]Whether you develop a SAPUI5 application for desktop or for mobile , the concepts are very similar.

5 SAPUI5 provides an additional control library called , which is optimized for mobile Your First Application using SAPUI5 Tools [page 25]The SAPUI5 application development tools in Eclipse support you in developing web applications according to the Model View Controller concept (MVC).Testing SAPUI5 Applications in Eclipse [page 45]You have different options to test your applications locally in Started with SAPUI5 Getting Started with SAPUI5 2013 SAP AG or an SAP affiliate company. All rights Choose Your BrowserYou need to check which browser suits best to your use BrowsersFor displaying mobile apps for testing purposes locally on your Desktop computer, you need a WebKit based browser such as Google InformationBrowser Support: SAPUI5 for Desktop [page 6]The UI development toolkit for HTML5 ( SAPUI5 ) is a control library based on CSS3, HTML5 and the new JavaScript API. That's why only browsers with HTML5 capabilities are Support: SAPUI5 for mobile [page 12] Browser Support: SAPUI5 for DesktopThe UI development toolkit for HTML5 ( SAPUI5 ) is a control library based on CSS3, HTML5 and the new JavaScript API.

6 That's why only browsers with HTML5 capabilities are Support for Core and Standard LibrariesNoteAlso refer to SAP note 1716423 Supported BrowsersThe following browsers are supported for Microsoft Windows platforms only: Microsoft Internet Explorer 9 and upwards, so including Microsoft Internet Explorer 10 Mozilla Firefox 17 (aka Firefox Extended Support Release - ESR) and latest version Google Chrome latest versionThe following browser is only supported for MAC OS X: Safari and upwards6 2013 SAP AG or an SAP affiliate company. All rights Started with SAPUI5 Choose Your BrowserBrowsers with Restricted SupportInternet Explorer 8 (IE8): There are degradations in visual design and over time also restricted more information, see Degradations by Feature. Degradations by Control [page 9]Not supported BrowsersInternet Explorer 6 and 7 are not supported. All browsers not mentioned above are also not Support for VIZ ChartingThe VIZ charting library ( ) relies on the open source component D3 which in turn relies on the availability of Scalable Vector Graphics (SVG).

7 As SVG is not supported by IE8 and not fully supported by FF ESR, the VIZ charting library is also not supported on those Degradations by FeatureThe following sections describe the degradations for older Browser versions, such as FireFox or Internet Explorer 8 (IE8).Rounded CornersIE8 and lower versions of IE do not support the CSS property border-radius. As a result, controls in themes that use this property have square corners instead of rounded the UX theme this affects the following controls: Button ComboBox DatePicker and its popup DropdownBox ListBox MessageBar Panel ProgressIndicatorGetting Started with SAPUI5 Choose Your Browser 2013 SAP AG or an SAP affiliate company. All rights TextArea TextFieldButton in FireFox in Internet Explorer 8 Box ShadowIE 8 and lower versions of IE do not support the CSS property box-shadow. As a result, controls in themes that use this property do not have a shadow. This property is usually used to enhance a 3D effect, for example, along vertical edges or to drop a shadow for a box "floating" above other content, which is used for all kinds of popup the UX theme, this affects the following controls: Button(3D) ComboBox(Popup) DatePicker(Popup) DropdownBox(Popup) Menu(Popup) MenuButton(Popup) MessageBar(+Popup) ProgressIndicator(3D) RichTooltip TextArea(3D) TextField(3D) Toolbar(OverflowMenu)ComboBox in FireFox in Internet Explorer 8 Background SizeIE 8 and lower versions of IE do not support the property background-size which allows to stretch a background image or affects the Button 2013 SAP AG or an SAP affiliate company.

8 All rights Started with SAPUI5 Choose Your BrowserButton in FireFox in Internet Explorer 8 Gradient BackgroundsIE8 only supports gradients in a limited way, so some gradients may be affects tables. In the example, compare the table header and row Background in FireFox Background in Internet Explorer 8 Native ScrollbarsFor native scrollbars, see the ComboBox example in the Box Shadow Degradations by ControlThe following table gives an overview of SizeGradientsScrollbarsDegradation in IE8 AccordionButtonXXXNo rounded corners, vertical edges without 3D effect and background has no scale when button size differs from default heightGetting Started with SAPUI5 Choose Your Browser 2013 SAP AG or an SAP affiliate company. All rights SizeGradientsScrollbarsDegradation in IE8 CheckBoxComboBoxXXXNo rounded corners, no 3D effect for vertical edges and popup has no shadowDatePickerXXXNo rounded corners, no 3D effect for vertical edges and popup has no shadowDialogXNative scrollbarsDropdownBoxXXXNo rounded corners, no 3D effect for vertical edges and popup has no shadowFileUploaderXXInherited from the components used (InputField and Button)HorizontalDividerImageLabelLinkLi stBoxXXXNo rounded corners, no 3D effect for vertical edgesMenuXPopup without shadowMenuButtonXXXNo rounded corners, vertical edges without 3D effect, background does not scale when button size differs from 10 2013 SAP AG or an SAP affiliate company.

9 All rights Started with SAPUI5 Choose Your BrowserControlCornersShadowBG SizeGradientsScrollbarsDegradation in IE8default height, popup without shadowMenuBarXMenu items without rounded cornersMessageBarXXNo rounded corners, no shadow, message list popup without shadowMessageBoxPanelXNative scrollbarsProgressIndicatorXXNo rounded corners, vertical edges without 3D effectRadioButtonRichTooltipXXNo shadow; if it had a shadow, the shadow would not have rounded cornersSliderSplitterTableXXNative scrollbars, headers/line markers only show 2-colors instead of gradientTextAreaXXXNo rounded corners, vertical edges without 3D effectTextFieldXXNo rounded corners, vertical edges without 3D effectTextViewGetting Started with SAPUI5 Choose Your Browser 2013 SAP AG or an SAP affiliate company. All rights SizeGradientsScrollbarsDegradation in IE8 ToolbarXOverflow menu without Browser Support: SAPUI5 for MobileThe following tables give an overview of the platforms supported by the library of SAPUI5 for mobile .

10 Depending on the theme you use - SAP mobile Visual Identity or SAP Blue Crystal - different platforms and browsers are is supported as of platform version ViewSupported with SAP Blue Crystal YesYesSupported with SAP mobile Visual Identity Yes (iOS5 and iOS6)Yes (iOS5 and iOS6)Chrome and Opera are not supported. When using SAP mobile Visual Identity, iOS7 is not supportedAndroidAndroid is supported as of platform version BrowserChromeWeb ViewSupported with theme:SAP Blue Crystal YesYesYesSAP mobile Visual Identity YesYesYesOpera, Opera mini and Firefox are not supported on Android is supported as of platform version 2013 SAP AG or an SAP affiliate company. All rights Started with SAPUI5 Choose Your BrowserNoteThe library supports the same platforms as mobile Visual Identity theme excluding BlackBerry BrowserWeb ViewSupported for both themesYesYesTheme style when using SAP mobile visual IdentityAndroidAndroidOpera Mini is not supported on BlackBerry MobileWindows mobile is not DesktopWhen using Windows running on a desktop device, there is no touch ExplorerFireFoxChromeSupported versions9 or higherlatest and Extended Support Releaselatest versionSafari and Opera are not for mobile is not supported on the desktop for SAP mobile Visual Identity.