OpenUI5 DataBinding and setModel(model) vs setModel(model, "myModel")

The data binding has been driving me crazy and I wasn't able to find an explanation of the different syntaxes used in many of the examples I've seen.

var model = new JSONModel({
   "isValid" : true
});

If I do this.getView().setModel(model), how is that different from this.getView().setModel(model, "myModel")?   How do I reference them from the xml view definition?

The setModel(model) version

When you do this.getView().setModel(model) it actually sets the data into the model in an "undefined" area of the model.  (Check in the browser debugger).   So when you reference it in the xml view, you use a system like:

<Text text="{isValid}"/>

It appears if you try and set 2 models this way, one will not be set and will be unavailable.

The setModel(model, "myModel") version

When you do this.getView().setModel(model, "myModel) you are now seting the data into the model with the "myModel" name.   So if you look in the browser debugger it will be nicely nested inside the view's model data structure.  So now to reference it you use the ">" notation to tell it to grab the named model instead of the generic one.  So it looks like this:

<Text text = "{myModel>/isValid}"/>

If you are referencing array data like in a list or table, then you drop the / after the > to make it a relative reference:

<Text text = "{myModel>isValid}"/>

OpenUI5 - Don't use console.log!

Sap has a built in logging functionality.   You can set your logging level and leave in all your log statements.

jQuery.sap.log.debug("onInit");

jQuery.sap.log.error("failed to get id");

Then you can set up your logging level in the javascript, so in dev/qa you could have:
jQuery.sap.log.setLevel(jQuery.sap.log.Level.DEBUG);
But in production, you can do:
jQuery.sap.log.setLevel(jQuery.sap.log.Level.NONE);

OpenUI5 - Data Binding a fragment from within the XML View definition

When using fragments I had terrible trouble finding how to bind the fragment to
my data from my XML view.  Every example showed the code binding version:

this._MyDialog.bindElement("/myData");

But when using a code fragment in an XML view I didn't want to have to 
bind it from the controller.  Finally I found the answer!

<VBox>
    <core:Fragment binding="{/billingAddress}" fragmentName="myApp.Address" type="XML"
                   id="billingAddress"
    />

    <core:Fragment binding="{/shippingAddress}" fragmentName="myApp.Address" type="XML"
                   id="shippingAddress"
    />
</VBox>




This links the fragment to the billingAddress in the view's Model.   Now 
everything in the fragment is relative to that link.  
Here is the fragment definition:


<core:FragmentDefinition
        xmlns:core="sap.ui.core"
        xmlns="sap.m">
                <VBox>
                    <Input
                            id="address"
                            value="{address}"
                            tooltip="Enter Street Address"
                    />
                    <Input
                            id="city"
                            value="{city}"
                            tooltip="Enter City"
                            description="City"
                    />
                    <Input
                            id="state"
                            value="{state}"
                            tooltip="Enter State"
                            description="State"
                    />
                </VBox>
</core:FragmentDefinition>


So when the fragment is shown on the screen, the first fragment will 
update the billingAddress object and the second fragment will update
 this shippingAddress object.

OpenUI5 - Adding a background image to a Panel

<Panel    class="my-panel-background">

</Panel

Then in your CSS (you are using a CSS right?) Put

.my-panel-background {
    background-image: url('../background.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1;
}


background-size: contain; will size the background to match your panel size

The URL entry is relative to your CSS file, so path accordingly.

IDE for OpenUI5 Development

Next was which IDE to use to write the code.

Eclipse seemed like the natural choice given SAP has the plugins made for it, but overall support for Javascript is poor and.... well... it's still Eclipse, which I've never liked.

Netbeans had better Javascript support and loads the maven war project much easier.   I did get the openui5 schemas loaded, but they only did the code completion when at the top level of your view.xml file.  I also could not find a way to get code completion on the javascript libraries.

WebStorm is great and following this guide can get both code completion in the views (xml) and in the controllers (js).  Webstorm setup for OpenUI5

Winner

For our uses and when working with the maven war build, IntelliJ Ultimate was even better.  We could build the war file, download the openui5 dependency and then use it locally for quick development.  I used the above guide for webstorm with some minor tweaks and it worked in IntelliJ.

1. Install Java JDK
2. Install JIdea (Ultimate Version)
3. Install SAP UI5 SDK
4. Open JIdea
5. Open File->Settings
1. Open Languages & Frameworks -> Javascript -> Libraries
2. Click Add and enter the name OpenUI5
3. Click on the Global button for the visibility setting
4. Click the + to add a file and select attach files, then browse to where you installed openUI5 and put in these files
   1. resources/sap-ui-core-all-dbg.js
   2. resources/sap/m/library-all-dbg.js
5. Open Languages & Frameworks -> Schemas and DTDs
6. Click the Green +
7. Switch to explorer tab and browse to where you installed openUI5, then downloads/schemas and select
   1. URI: sap.ui.core and select the file sap.ui.core.xsd
   2. URI: sap.m and select the file sap.m.xsd
8. Deselect the checkboxes next to each entry so they are globally available and not just for this project

Note: the options are a bit different if running on a Mac.  This was on my Linux box.

OpenUI5 Intro

We just started moving our coding to HTML5/javascript and decided on using OpenUI5 as our platform of choice.   As I've started investingating/using OpenUI5 there have been many questions that were hard to find the answers to, especially when using the UI5 xml view setup.  So I wanted to note them here both for my own (and my team's) reference, but for others to use as well.