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.