Loading Images into your Mobile Application

Transcription

1 MOBILITY Loading Images into your Mobile Application When building a mobile application using the Sybase Unwired Platform, there are several methods for loading images. This article conducts a test to implement these methods, and deploys the result to an Android device. By Mark Gearhart Mark Gearhart is a Senior Consultant with SAP GSS. He is involved in the development of database architectures and rich internet applications for temporal and realtime systems. His background encompasses the energy and financial industries with a special interest in data storage architectures and fast user interfaces. He can be reached at mark. gearhart@sapgss.com. I rarely get excited anymore when an application finally starts working, but for this test of a mobile application using the Sybase Unwired Platform, I ll make an exception. I was pretty happy when I finally got the test of a mobile application you are about to see up and running. Although the the Sybase Unwired Platform can be downloaded from the Sybase Product Development Center in just two installation packages, the Unwired Server and the Unwired SDK, it actually takes more than that to get things running. For example, the complete set of components for an Android installation consists of the Eclipse development environment for the Sybase Unwired Workspace, along with the Sybase Unwired Platform, the Android SDK and ADT, and a network configuration that can be used to deploy mobile applications to an actual Android device. For me, that last item was the hardest. Once the Sybase Unwired Platform is installed, it is not too hard to build a mobile application and deploy it to an emulator. There are many examples of Sybase Unwired Platform applications running on emulators but few examples of applications running on actual devices. You can see this in the documentation from the Sybase and SAP development centers, and just about anywhere else you look. What about applications running on actual devices? An absence of evidence might lead one to wonder how the platform operates under actual conditions. My goal was to find out. This article describes a mobile application developed with the Sybase Unwired Platform which tests all the different ways to display an image. This is actually the first of several tests leading up to a final mobile application that will serve as an information portal. Two of the most important requirements of the portal deal with the display of images and tabular data. Tabular data is, I think, sufficiently described in the Sybase Unwired Platform documentation, and can be implemented using MBOs (Mobile Business Objects) in conjunction with automaticallygenerated screens which display result sets and allow selections to zoom into a particular item. Displaying images, on the other hand, has received less attention. So, we need a test to determine exactly what the Sybase Unwired Platform can do with images. In our test, we have created a application showing nine possible ways to display an image, as shown in Figure 1. I will go through each of these mechanisms and show the implementation. However, prior to doing this, there is quite a bit of setup. So, let s get started. 14 ISUG TECHNICAL JOURNAL

2 LOADING IMAGES INTO YOUR MOBILE APPLICATION Figure 1: Application Start Screen Installing the Components Depending on the extra device-specific installations for the platform, it is not always as simple as running the Sybase Unwired Platform installshield, and then voilà!, you have a platform ready to go. These device-specific installations are from the operating system vendors for Android, Apple, Blackberry, and others. Depending on the device, they can be involved. For the Android device, I ve documented the process in a 20-page write-up titled How to Install and Use the Sybase Unwired Platform for Android Devices. This article can be downloaded from: When installing the Sybase Unwired Platform for an Android device, you should expect to spend a least a day collecting software packages and going through the installation. I have not described the implementation for non-android devices, so you will have to do some extra research here. Setting up the Network In the minimum scenario, when you are just developing a native Android application using the Android Development Kit (ADT) from android.developer.com you can deploy it from your laptop (the Server) to a device by transmitting the package across a USB cable which connects your laptop to the device. Once deployed in this manner, the mobile application runs in a standalone mode. It does not transmit data back and forth to the server. For a full-blown Sybase Unwired Platform application, instead of deploying using the Android Development Kit, we are going to use the deployment capabilities of the Sybase Unwired Platform. This is more complicated since deployment will be across the network rather than across a USB cable. Obviously if you are going into the business of deploying applications, you don t want to go around plugging devices into your laptop with a USB cable, therefore the Sybase Unwired Platform network deployment method is the way to go. In addition, when your device and server are both on the network, transmission of data is possible. Therefore, you can use your mobile application on the device, in conjunction with the Unwired Server on your laptop, to select, insert, update, and delete data from any database which the Unwired Server can connect to. So, instead of plugging in your Android device into your laptop with a USB cable, connect both the laptop and Android device to a network that allows them to communicate with each other. At this point, I ran into some problems. The first method I tried failed miserably. I connected both my laptop and device to the corporate Wi-Fi network, and immediately ran into blocked ports and corporate firewall issues. When the Sybase Unwired Server downloads the mobile application to the device, by default it uses port This port as well as any other port I configured was blocked, and no amount of coercion would sway the system administrators. One solution to this problem is to use the Sybase Relay Server or Sybase Afaria product which can proxy ports. Both products are sold separately. Before going down this route, I decided to try a smaller solution to my small 2-machine problem. The next option was acceptable and worked perfectly. I set up a private Wi-Fi network consisting of 2 machines, my laptop and my Android device. To do this, I set up my laptop as a Wi-Fi hotspot. As a hotspot, my laptop became an access point with its own hotspot IP address. Other devices could then connect to my access point by opening the Wi-Fi connection of the access point. My access point contains applications (such as the Sybase Unwired Server). It could connect to the public internet and could also do all types of other things expected from a service provider. This is exactly how coffee shops and airports do it all around the world, but in my case, the scope is limited to my laptop and my Android device (and anyone else who knows about my hotspot and the hotspot password). A product called Connectify can turn your machine into a hotspot. This product is located at APRIL

3 LOADING IMAGES INTO YOUR MOBILE APPLICATION me (See Figure 2). I downloaded Connectify Lite to my laptop, installed it, configured it, and set the password for my hotspot. I had to give my hotspot a name in order to identify its Wi-Fi location. I called it: Connectify-grasshopper1. Figure 2: Connectify was used to Create a Hotspot When Connectify Lite starts up, you get the screen shown in Figure 3 in your tray. There is a button at the bottom of the screen which lets you start and stop the hotspot. You should start the hotspot. 3 The IP address assigned to your laptop can be obtained by typing ipconfig /all at the DOS prompt. The IP address listed for the IPv4 entry is important when configuring your device to Figure 3: Connectify Settings communicate with the Sybase Unwired Platform on port The procedure for doing this was described in the installation article referenced earlier. The IP address of my laptop was: Now, on to the Android device, connect to the Wi-Fi by going to Setting -> Wireless & networks -> Wi-Fi Settings. In the resulting screen, you should be able to find Connectifygrasshopper1. Connect to it and enter the password for the connection. Once connected, the Connectify Lite screen on Figure 4: Connectify Clients your laptop should show an entry for your Android device (See Figure 4). On your Android device, you should also see the connection information for Connectifygrasshopper1 as shown in Figure 5. With this, we now have a private network between the Sybase Unwired Platform on the laptop, and the Android device. Now, instead of testing things with an emulator, we can download and test on a real device! Figure 5: Android Connection Building the Application Let s build the mobile application. I will skip over the details of creating the database, creating the Mobile Business Object, and creating the Workflow, and instead focus on setting up the nine types of images to display, plus the background image on the start screen. For reference, I have included the entire project along with installation instructions at: mgearhart.com/attachments/ ImageTest.zip As you go through the project, you will see a workflow consisting of a client-initiated start screen and 9 image display screens. This workflow is shown in Figure 6. The start screen as shown in Figure 7 contains 9 buttons which, when clicked, call up each of the screens. There are only 3 prerequisites for this workflow. First, a connection to the SQL Anywhere database called sampledb must be set up. Second, a connection to the Unwired Server must be set up. Third, a table called ImageData, containing the image to display must be loaded into sampledb. 16 ISUG TECHNICAL JOURNAL

4 JANUARY 2012 PB DECEMBER LOADING IMAGES INTO YOUR MOBILE APPLICATION Figure 6: Workflow Diagram For our sample application, we ll be working with 3 images. The first image is a large 360x589 pixel background image used for the start screen. The second image is a small 160x160 pixel background image of a 1910 Wright Model B Flyer used to test the background repeat feature. Image 2: A Wright Flyer Image 1: A Coastline The third is a small 100x150 pixel image of Thomas Edison contemplating his light bulb, loaded into the Image- Data table and used to test image loading capabilities. Image 3: Thomas Edison Figure 7: The Start Screen The ImageData table as shown in Figure 8 contains one row which contains the binary data for an image of Thomas Edison, plus the image type, which is image/jpeg, and the location of the jpg file within the project. Figure 8: The ImageData Table Figure 9: Project Layout Project Layout As shown in Figure 9, I created an Assets folder to contain the image files. When the project is deployed, an identical Assets folder is automatically created within the Generated Workflow folder and the files are automatically copied over. Then, the entire contents of the MOBILITY APRIL

5 LOADING IMAGES INTO YOUR MOBILE APPLICATION There are only 3 prerequisites for this workflow. First, a connection to the SQL Anywhere database called sampledb must be set up. Second, a connection to the Unwired Server must be set up. Third, a table called ImageData, containing the image to display must be Then click the Static image source radio button and you are done. When the screen comes up, the image will automatically display as shown in Figure 11. The jpg file must be located on the device. To get the file onto the device, you can place it into the Assets folder within the project. The Assets folder is automatically downloaded to the device when the project is deployed via the Unwired Workspace. loaded into sampledb. Generated Workflow folder is automatically zipped up and shipped to the Unwired Server for deployment. While we are here, also note the javascript file located under Generated Workflow.Image2.html.js.Custom.js. If you d like to customize the way in which your mobile application operates, this file can be modified. It is not overwritten during deployment. We will, in fact, customize this file later in this article. Setting a Background Image in the Start Screen Setting the background image in the start screen is easy. All you need to do is go into the screen design view for this screen and set the attributes of the screen as in Figure 10. Figure 11: Image Component, Static Image Component, Dynamic To load an image by referencing its binary data rather than a jpg file name, the binary data must first be loaded into the ImageData table. The Image component can be used to load the image onto the screen. Drag this component onto the screen and set the Key to specify the attribute in the Image- Data table which contains the binary data for the image. Then click the Dynamic image source radio button and you are done (See Figure 12).The binary image data does not have to be located on the device. Rather, it is in the ImageData table which is read from the server by the application. Figure 10: Setting a Background Image in the Start Screen Image Component, Static To load an image by referencing the name of the jpg file, you can use the Image component. Drag this component onto the screen and set the Key to specify the attribute in the ImageData table which contains the name of the jpg file. AttachmentViewer, Auto Load The AttachmentViewer component can be used to load various assets, such as pdf files and images. In our case, we are loading an image by referencing its binary data. In the same manner as loading an image dynamically with the Image component, the binary data must first be loaded into the ImageData table. From the AttachmentViewer, drag this component onto the screen and set the Key to specify the 18 ISUG TECHNICAL JOURNAL

6 JANUARY 2012 PB DECEMBER LOADING IMAGES INTO YOUR MOBILE APPLICATION Figure 12: Image Component, Dynamic attribute in the ImageData table which contains the binary data for the image as shown in Figure 13. Now things get interesting. Normally, the Attachment- Viewer works by clicking it. On the screen, it looks like a hyperlink. It has an underlined blue text, which I have entered into the Label attribute as Image goes here. When you click the text, the image appears in a new window on the device. However, we can override this behavior and automatically load it. Why would we do this? Well, one big reason, aside from having it automatically load, is that we d like to customize the appearance of the image. For example, instead of loading Thomas Edison at the original 100x150 pixels, we d like to load to fill up all the available screen area. To do this, we can add some code to the javascript file located in the project directory at Generated Workflow.Image2.html. js.custom.js. This file, produced automatically when the project is first deployed, contains screen methods which can be customized. By default, the methods just return true. What you can do is insert custom code in the method called custombeforescreen(). This method is called before any screen is loaded. As shown in Figure 14, we can add code to automatically load the image referenced by the AttachmentView component on the screen called ImageDataDetail3. Figure 13: AttachmentViewer, Auto Load Figure 14: Custom.js Code MOBILITY APRIL

7 LOADING IMAGES INTO YOUR MOBILE APPLICATION There are a couple things to note. First, image loading is not supported for the Windows Mobile device so we put a condition to catch this. Second, we need to find the component (identified by its Key) on the screen so we can replace it with an image. All the screen definitions are located in a single file called workflow.xml. We could just grab the key called ImageData_pic1_attribKey, but this would be a mistake since that same key name may be on several forms. Instead, we should loop through the tags on the ImageDataDetail3 form by instantiating an elements array with the results of the getelementsbytagname(form, * ) call. You should examine the elements in this manner. Do not simply loop through form.elements. The value of form.elements.length will be 0 because, from a javascript perspective, an AttachmentView component is not a recognized element of a form. On the other hand, if you had a text field on the form then form. elements.length would be 1 and you d be able to locate the text field but not the AttachmentViewer. I took me a while to figure this one out. Once the component has been found on the form, all we need to do is replace the AttachmentViewer with an Image, set the height and width as desired, and then set the source of the image to be the binary data for the image. As you can imagine, if you can do this, then there are all kinds of other things you can do behind the scenes like sending , launching applications, sending messages, and so on. AttachmentViewer, Manual Load The AttachmentViewer with manual load is fairly straightforward. For this component, drag it onto the screen and set the label to display the text for the hyperlink which will appear on the screen. In this case, I entered the text Click here to load image. Then set the Key to specify the attribute in the ImageData table which contains the binary data for the image. Then set the MIME type to the attribute in the ImageData table which contains the type of image, in this case image/jpeg. You are done. The binary image data is read from the ImageData table on the sever when you click the hyperlink. The image is displayed in a new window on the device as shown in Figure 15. Figure 15: AttachmentViewer, Manual Load Background Image, Repeat A repeating background image will fill the screen with the image specified in the Background image attribute for the screen (See Figure 16). As you can imagine, if you can do this, then there are all kinds of other things you can do behind the scenes like sending , launching applications, sending messages, and so on. 20 ISUG TECHNICAL JOURNAL Figure 16: Background Image, Repeat

8 LOADING IMAGES INTO YOUR MOBILE APPLICATION Background Image, Repeat-X A repeat-x setting for the background image will produce a single occurrence of the image, repeated horizontally as shown in Figure 17. Figure 19: Background Image, No-Repeat Step 5: A User Session Figure 17: Background Image, Repeat-X Background Image, Repeat-Y A repeat-y setting for the background image will produce a single occurrence of the image, repeated vertically (See Figure 18). Background Image, Inherit The inherit setting for the screen will cause it to take its background image from the parent screen. In this case, the parent screen is the start screen as shown in Figure 20. Figure 20: Background Image, Inherit Background Image, No-Repeat As shown in Figure 19, a no-repeat setting for the background image will produce a single occurrence of the image, with its registration point in the upper left corner of the screen. APRIL MOBILITY Figure 18: Background Image, Repeat-Y Conclusion That s it. We now have images displaying on our Android device. In this article, the goal was to view a Sybase Unwired Platform mobile application through an actual Android device, and test the various ways in which the platform displays images. By far, the hardest part of this effort is the set up. Once you have your platform and network operational, it can be smooth sailing for your mobile application efforts if you also take some time and research the details. Hopefully, the details surrounding image processing has helped highlight some of the capabilities of the Sybase Unwired Platform.