Quantcast
Channel: SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 789

UI5 Mobile SplitApp Boilerplate

$
0
0

There are different approaches to start a new project with SAP UI5 or OpenUI5 (let's call it simply UI5). One way is to use the SAP UI5 Eclipse Tools described in the blog post "SAP UI5 – Quickstart".  The generated UI5 Application Project is very, very basic and you are bound to Eclipse to do your development, which is not everybody's favorite IDE of course.

 

On the other hand there are already some really nice UI5 Tools, which can help you. For example the Yeoman generator for OpenUI5, which is based on node.js and can generate a nice application structure or only single components. Another example is the Sublime Text 2 Package for UI5/OpenUI5, which contains Snippets and Templates and is very useful.

 

So whatever your favorite IDE is, either Eclipse, Sublime Text, WebStorm, IntelliJ, Xcode, Visual Studio, emacs, notepad or vi, you should be able to use Git and clone the UI5 Mobile SplitApp Boilerplate from GitHub (if not, you should try hard) resulting in a nice app structure with base features, which can be used as starting point for development:

 


Get UI5 Mobile SplitApp Boilerplate from Github


The Boilerplate can be found under the following

Github Location: https://github.com/6of5/UI5SplitApp-Boilerplate

 

Open a terminal/console and run the following command to clone the source to your local file system.

 

git clone https://github.com/6of5/UI5SplitApp-Boilerplate.git

A new folder "UI5SplitApp-Boilerplate" is generated which contains the app source code with the following file structure:

UI5BoilerplateFileStructure.png

Run UI5 SplitApp with Node.js


Assuming you have node.js (with npm) already installed on your local computer, you now have to do the following steps within the "UI5SplitApp-Boilerplate" folder. This will install express and open as node modules and finally  start a static server web server (More Infos on SCN Blog Post from John Patterson):


npm install express
npm install open
node static_server.js

You now can access the App unter the following URL:  http://localhost:8877/UI5SplitApp-Boilerplate/

SplitAppinChrome.png

Run directly from file system (in Chrome)

The most easiest way without the need of a web server, is running the app directly from the file system. Therefore you need to start Chrome with some start parameters to disable web security and enable File Access (which is ok while development):

 

 

On Windows:

chrome.exe --disable-web-security --allow-file-access-from-files

On Mac:

open /Applications/Google\ Chrome.app --args --disable-web-security --allow-file-access-from-files

With this in place you can open the index.html from the file system and start the app via Chrome Menu File -> Open File.

 

In a next post I will explain how to modify the template and extend it. And which basic features are provided.


Viewing all articles
Browse latest Browse all 789

Trending Articles