Quantcast
Channel: SCN : All Content - SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 6178

UI5 Development with WAMP & Sublime Text

$
0
0

Hi All,

 

I am using WAMP as my web server and Sublime text as my editor. I have created following directory structure under C:\wamp\www folder

C:\wamp\www

------------------------>resources (UI5 folder containing all JS libraries)

------------------------>myApp (UI5 app folder)

------------------------------------>index.html

------------------------------------>WebContent (folder)

----------------------------------------->myApp (folder)

---------------------------------------------------->view1.js

---------------------------------------------------->view1.controller.js

----------------------------------------->WEB-INF (folder)

---------------------------------------------->web.xml

------------------------------------>resources (folder)

----------------------------------------->sap(folder)

----------------------------------------------->ui(folder)

------------------------------------------------------>commons(folder)

--------------------------------------------------------------->themes(folder)

---------------------------------------------------------------------------->custom_styles(folder)

------------------------------------------------------------------------------------->library.css (Custom style for my site)

 

Now when I execute this site using localhost:8001/myApp, I see my custom theme applied, but the view does not appear. The code is written.

 

 

 

 

The code in my index.html is this.

 

<script src="../resources/sap-ui-core.js" <----pointing towards files in resources folder @ root level.

                id="sap-ui-bootstrap"

                data-sap-ui-libs="../resources/sap.ui.commons" <----pointing towards files in resources folder @ root level.

                data-sap-ui-theme="fmg_style"

                src = "resources/sap/ui/commons/themes/fmg_style/library.css">

</script>

 

sap.ui.localResources("view1");

 

                var view1 = sap.ui.view(id:"view1",

                                        viewName:"myApp.view1",

                                        type:sap.ui.core.mvc.ViewType.JS});

                view1.placeAt("content"); <---A DIV with id content. There is some HTML before this code, part of branding and making layout consistent.

 

The code in my view1.js file is as follows.

 

//create a layout to update employee address

        var oLayout1 = new sap.ui.layout.form.GridLayout("L1", {singleColumn: true});

 

  var oForm1 = new sap.ui.layout.form.Form("F1",{

            title: new sap.ui.core.Title({text: "Address Data", icon: "../../commons/demokit/images/address.gif", tooltip: "Title tooltip"}),

            width: "60%",

            layout: oLayout1,

            formContainers: [

                new sap.ui.layout.form.FormContainer("C1",{

                    formElements: [

                        new sap.ui.layout.form.FormElement({

                            label: new sap.ui.commons.Label({text: "Name", layoutData: new sap.ui.layout.form.GridElementData({hCells: "2"})}),

                            fields: [new sap.ui.commons.TextField({layoutData: new sap.ui.layout.form.GridElementData({hCells: "auto"})}),

                                    new sap.ui.commons.TextField({layoutData: new sap.ui.layout.form.GridElementData({hCells: "auto"})})

                            ]

                        }),

                        new sap.ui.layout.form.FormElement({

                            label: new sap.ui.commons.Label({text: "Street / Number", layoutData: new sap.ui.layout.form.GridElementData({hCells: "2"})}),

                            fields: [new sap.ui.commons.TextField({layoutData: new sap.ui.layout.form.GridElementData({hCells: "auto"})}),

                                    new sap.ui.commons.TextField({layoutData: new sap.ui.layout.form.GridElementData({hCells: "1"})})

                            ]

                        }),

                        new sap.ui.layout.form.FormElement({

                            label: new sap.ui.commons.Label({text: "Zip Code / City", layoutData: new sap.ui.layout.form.GridElementData({hCells: "2"})}),

                            fields: [new sap.ui.commons.TextField({layoutData: new sap.ui.layout.form.GridElementData({hCells: "2"})}),

                                    new sap.ui.commons.TextField({layoutData: new sap.ui.layout.form.GridElementData({hCells: "auto"})})

                            ]

                        }),

                        new sap.ui.layout.form.FormElement({

                            label: new sap.ui.commons.Label({text: "Country", layoutData: new sap.ui.layout.form.GridElementData({hCells: "2"})}),

                            fields: [new sap.ui.commons.TextField({layoutData: new sap.ui.layout.form.GridElementData({hCells: "auto"})})

                            ]

                        }),

                        new sap.ui.layout.form.FormElement({

                            label: new sap.ui.commons.Label({text: "Phone Number", layoutData: new sap.ui.layout.form.GridElementData({hCells: "2"})}),

                            fields: [new sap.ui.commons.TextField({layoutData: new sap.ui.layout.form.GridElementData({hCells: "1"})}),

                                    new sap.ui.commons.TextField({layoutData: new sap.ui.layout.form.GridElementData({hCells: "2"})}),

                                    new sap.ui.commons.TextField({layoutData: new sap.ui.layout.form.GridElementData({hCells: "2"})})

                            ]

                        }),

                    ]

                })

            ]

        });

 

        oForm1.placeAt("view1");

 

 

 

Any idea what might be wrong? Any help appreciated.


Viewing all articles
Browse latest Browse all 6178

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>