Ui5Strap
  • About
  • Manual
  • API
  • Code Examples
  • Demos
  • License

Table of Contents

  •   Quickstart
    •   Installation
    •   Hello World
    •   Run

Basics

  •   Project Structure
    •   File Structure
    •   Binaries
    •   Build Tools
    •   Dev Server
    •   Web App Folder
  •   Bootstrapping
    •   Index File
    •   App Icons
    •   Splash Screen
    •   Initialization
  •   Configuration
    •   Overview
    •   App Settings
    •   Developers & Licenses
    •   Environments
    •   Stylesheets
    •   Root Navigation
    •   Pages
    •   Routing
    •   Libraries
    •   Models
    •   Options
    •   Components
    •   Actions
    •   Events
    •   Scripts
  •   Layout
    •   Using Controls
    •   Composing Views
    •   Fragments
  •   Styling
    •   Themes
    •   Custom Style
    •   Style Options
  •   Binding
    •   Element Binding
    •   Property Binding
    •   Aggregation Binding
    •   Formatters
  •   Logic
    •   Controllers
    •   Events
    •   Actions

Appendix

  •   Change Log
    •   0.11.x -> 1.0.0
    •   1.0.0 -> 1.0.1

  Hello World

  1. Create app directory

    Create a new directory helloworld inside the folder apps.

    • myproject
    • www
    • apps
    • helloworld
  2. Create app configuration

    Create a new file app.json inside the newly created folder helloworld.

    • myproject
    • www
    • apps
    • helloworld
    • app.json
      app.json
    {
        "app" : {
            "id" : "mycompany.helloworld",
            "name" : "Hello World"
        },
    	
        "rootNavigation" : {
            "type" : "pks.ui5strap.core.NavContainer",
            "initialPages" : [
                "pageHelloWorld"
            ]
        },
        
        "pages" : [
            {
                "id" : "pageHelloWorld",
                "viewName" : ".view.HelloWorld"
            }
        ]
    }
    
  3. Create initial page

    Create a new directory view inside the folder helloworld.

    • myproject
    • www
    • apps
    • helloworld
    • view
    • HelloWorld.view.xml
    • app.json

    Inside the folder view, create a file HelloWorld.view.xml with the following contents:

      HelloWorld.view.xml
    <!-- XML Root Node -->
    <sapUiCoreMvc:View controllerName="pks.ui5strap.viewer.ActionController" xmlns="pks.ui5strap.bs3" xmlns:sapUiCoreMvc="sap.ui.core.mvc"
                          xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
        <!-- START Page Content -->
    
        <Container type="Website">
            <!-- We only show ""Hello World" as Heading in a Website Container. -->
            <Heading text="Hello, World!" level="1" />
        </Container>
        
        <!-- END Page Content -->
    </sapUiCoreMvc:View>
    
Next: Run »

© 2013 - 2023 PKSoftware.de

  • Contact