05.md

Overview	Prerequisites	Discovery	Configuration	Development

Development

Creating the View

Locate the "View1.view.xml" file located in your workspace in the webapp folder and open it for editing. If you named the file different when creating the project, open that file instead. Find the empty content tags and add the markup which will create a simple UI for this workshop as well as upcoming workshops:

  <content>

    <!-- markup to add inside page content -->
    <sap.ui.layout:Grid xmlns:sap.ui.layout="sap.ui.layout" id="grid0">
	    <sap.ui.layout:content>
    	  <ObjectListItem title="Maps" intro="Demo" icon="sap-icon://map-2" id="itemMap" type="Active" />
    	  <!-- more to come in future workshops -->
      </sap.ui.layout:content>
    </sap.ui.layout:Grid>
    
    <Panel id="panelMap" headerText="Map Results" xmlns="sap.m" width="auto" expandable="true" expanded="true" >
      <headerToolbar>
          <Toolbar id="toolbarMap">
              <Title text="Map Results"/>
          </Toolbar>
      </headerToolbar>
      <content>
        <HBox width="100%" id="hbox0">
          <!-- content to add in next steps -->
        </HBox>
      </content>
    </Panel>
  </content>

Under the comment inside the HBox tags, add the following markup:

<VBox id="BoxMapDefault">
  <Label id="labelMapDefault" xmlns="sap.m" text="Default Map" width="450px"/>
  <Image id="imageDefault" densityAware="false" width="450px" height="450px" alt="map" 
         src="/map/mia/1.6/mapview?app_id={here>appId}&amp;app_code={here>appCode}" />
</VBox>

This will add a label positioned above the image of a map. Note the src attribute of the Image element. It starts with "/map" which will resolve to the HERE Map API we configured in a previous step. The remainder of the value executes the API using the values you provided from your HERE developer account - stored in the "here.properties" file. With no other parameters, this will return the default map, which is the city of Berlin.

Save the file. From the top menu option, find the "Run" command, and select "Run as Web Application". You should see the map of Berlin.

Adding Parameters to Change Map

Place the following markup under what you just added, before the closing HBox element:

<VBox id="BoxMapPhoenix">
  <Label id="labelMapPhoenix" xmlns="sap.m" text="Map of Phoenix" width="450px"/>
  <Image id="imagePhoenix" densityAware="false" width="450px" height="450px" alt="map" 
         src="/map/mia/1.6/mapview?app_id={here>appId}&amp;app_code={here>appCode}&amp;s=phoenix&amp;z=4" />
</VBox>

This new addition adds another map image to the view, but this time shows the city of Phoenix with a broader zoom level. Upon looking at the src attribute of this image, the difference is the 's' and 'z' parameters. The 's' (search) parameter is provided the value of phoenix. Try changing to another city. the 'z' (zoom) parameter changes the level of zoom (1=global to 15 street).

Save the file and run the web application again. You should now see two maps on the screen as shown here:

Congratulations, you have completed this workshop!

For your review, here is the completed markup of the view:

<mvc:View controllerName="demo.SAPUI5_Workshop.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" xmlns="sap.m">
	<App id="idAppControl">
		<pages>
			<Page title="{i18n>title}">
				<content>
					<sap.ui.layout:Grid xmlns:sap.ui.layout="sap.ui.layout" id="grid0">
						<sap.ui.layout:content>
					    <ObjectListItem title="Maps" intro="Demo" icon="sap-icon://map-2" id="itemMap" type="Active" />
					    	<!-- more to come in future workshops -->
					      </sap.ui.layout:content>
					</sap.ui.layout:Grid>
					
					<Panel id="panelMap" headerText="Map Results" xmlns="sap.m" width="auto" expandable="true" expanded="true" >
            <headerToolbar>
                <Toolbar id="toolbarMap">
                    <Title text="Map Results"/>
                </Toolbar>
            </headerToolbar>
            <content>
							<HBox width="100%" id="hbox0">
							  <!-- add default map-->
                <VBox id="BoxMapDefault">
						 	    <Label id="labelMapDefault" xmlns="sap.m" text="Default Map" width="450px" textAlign="Center" />
								  <Image id="imageDefault" densityAware="false" width="450px" height="450px" alt="map" 
									src="/map/mia/1.6/mapview?app_id={here>appId}&amp;app_code={here>appCode}" />
								</VBox>
							  <!-- add map zoomed in on Phoenix-->
                <VBox id="BoxMapPhoenix">
						 	    <Label id="labelMapPhoenix" xmlns="sap.m" text="Map of Phoenix" width="450px" textAlign="Center" />
						 	    <Image id="imagePhoenix" densityAware="false" width="450px" height="450px" alt="map" 
									src="/map/mia/1.6/mapview?app_id={here>appId}&amp;app_code={here>appCode}&amp;s=phoenix&amp;z=4" />
							  </VBox>
							</HBox>
						</content>
					</Panel>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>