Last updated: 09.25.

2009

Samsung Mobile Widget SDK

Samsung Mobile Widget Development Guide

1.0 - About This Document

The Samsung Mobile Widget SDK helps you develop widgets for Samsung mobile devices running the TouchWiz user interface. This document, the Samsung Mobile Widget Development Guide, introduces you to the capabilities of the SDK and explains how to use it to quickly create widgets that run on a wide variety of TouchWiz devices. The documentation is divided into the following sections:

About This Document - The section you are looking at now, which includes a brief introduction, release notes, and copyright notifications. Introducing the Samsung Mobile Widget SDK - Describes how to install, update, and launch the SDK. The Widget Perspective - Describes the user interface of the Samsung Mobile Widget SDK and describes how to customize it. Creating a Widget Project - A simple guide to creating a project that you can use to quickly produce widgets for Samsung TouchWiz devices. Supporting Multiple Devices with Overrides - Using one widget project to support many different devices by putting customized files in override directories. Tutorial Sample - A simple widget that uses JavaScript, CSS, and images. Debugging Widget Projects - How to use publicly available debugging tools to find errors in your projects. Widget-Development Tips - Techniques and suggestions that will help you get the most out of the SDK. SDK Menu Items - A reference to the menu items that are specific to the Samsung Mobile Widget SDK.

1.1 - Document Version History

Version 0.1 1.0 Date 06-25-2009 08-04-2009 08-10-2009 08-14-2009 08-20-2009 1.0.1 09-25-2009 Beta First Release Reformatting New update site URL Modify tutorial, add platform release note Automatic update site addition, new device. Notes

1.2 - Release Notes

This section lists requirements and issues that are specific to recent releases of the Samsung Mobile Widget SDK.

1.2.1 - Version 1.0.1 update

The following features are in version 1.0.1.

Automatic Update Site: A new update site has been created for the Samsung Mobile Widget SDK. It is: http://widget.samsungmobile.com/

sdk/. Current users just need to perform an update using their current update sites. Choose Help > Check for Updates. As part of installing the 1.0.1
update, the list of update sites in Preferences > Install/Update > Available Software Sites will automatically be updated to point to the new Samsung Mobile Widget SDK update site at widget.samsungmobile.com. Future updates will then come from the new site. Use of the update site at

innovator.samsungmobile.com site is now deprecated.

Device List: The GT-M8910 Pixon12 device has been added to the device list.

1.2.2 - Version 1.0 Requirements

Java5 JRE To download Java, visit: http://java.com/. (Reference platform is Sun Java 2 Standard Edition 5.0 Update 11) For more information see: http://www.eclipse.org/downloads/moreinfo/jre.php Eclipse 3.5 for JavaEE (Galileo Release). To download Eclipse, visit: http://www.eclipse.org/downloads/

You must have the Eclipse SDK for Java EE to run the Samsung Mobile Widget SDK.

Notes for Beta Users

If you were a beta user of the Samsung Mobile Widget SDK, you will need to uninstall your beta version before installing the current version. To do this, close the widget perspective and then follow the instructions at Uninstalling the Samsung Mobile Widget SDK. If you have used earlier versions of the Samsung Mobile Widget SDK, you will need to make some modifications to preexisting widget projects. Your best course of action is to create a new project and then copy files and settings from the preexisting project into the new one.

The generic XML file, configinfo.xml, is now named project.xml. You will need to copy settings from your old XML file into the project.

xml for your new project.

The overrides directories were named by the screen resolution of the device, but now the names are a combination of the resolution and browser name. You will need to copy files from any older overrides directory into the appropriate overrides directory in your new project.

Workspace Setup
Please verify that your workspace is set up to use UTF-8 as a default text encoding. 1. Select Window > Preferences > General > Workspace 2. Click the Other radio button in the Text file encoding section and select UTF-8 from the drop-down list.

JavaScript Support

Preferences are in Window > Preferences > Web > JavaScript Do not manually add or remove libraries from your project. Libraries will be better supported in a future release. Until further notice, do not select "Enable JavaScript semantic validation" (see Window > Preferences > Web > JavaScript > Validator > Errors/ Warnings). Selecting this option currently produces some spurious errors and warnings. If you prefer not to be warned about missing semicolons, do the following: 1. Select Window > Preferences 2. Expand Web > JavaScript > Validator 3. Select Errors/Warnings 4. Check "Enable JavaScript semantic validation" 5. Expand "Potential programming problems" 6. Change "Optional Semi-Colon" to Ignore" 7. Turn off "Enable JavaScript semantic validation" 8. Click the OK button. Select Yes when asked about a full rebuild.

Run As Widget
If you see a Windows error dialog box when you use the Run As > Widget command, you might be missing some VisualStudio runtime libraries. Download and install them here.

Run As Widget - Mac OS X & Linux

Currently Run As Widget is unsupported on Mac OS X or Linux. To run your widget on Mac OS X or Linux, follow the instructions for running with a browser in the Widget Development Tips section. See: Previewing on a Browser Watch for future updates to the Samsung Mobile Widget SDK for your favorite platform.

1.3 - Help System

If you are reading this document in the form of a PDF file, you might prefer to use the integrated help system in the Samsung Mobile Widget SDK. The help system includes a persistent menu tree, a robust search facility, bookmarking capabilities, and easy access to a wealth of Eclipse documentation.

In the Widget perspective, choose Help > Help Contents. Use the Contents view to navigate to Samsung Mobile Widget Development Guide.

1.4 - Copyright Notifications

Any company and product names not explicitly mentioned below may be trademarks of the respective companies with which they are associated.

Samsung Electronics
This material is copyrighted by Samsung Electronics. Any unauthorized reproductions, use or disclosure of this material, or any part thereof, is strictly prohibited and is a violation under the Copyright Law. Samsung Electronics reserves the right to make changes in specifications at any time and without notice. The information furnished by Samsung Electronics in this material is believed to be accurate and reliable, but is not warranted true in all cases. "SAMSUNG", "SAMSUNG.com" and "SAMSUNG DIGITall Everyone's invited" are trademarks of SAMSUNG in the United States or other countries. Unauthorized use or duplication of these marks is strictly prohibited by law. The Samsung Logo is the trademark of Samsung Electronics.

Eclipse Foundation, Inc.

Eclipse is a trademark of Eclipse Foundation, Inc. Copyright 2005, 2009. All rights reserved.

Firefox
Firefox Copyright 1998-2009 Contributors. All rights reserved. Firefox and the Firefox logos are trademarks of the Mozilla Foundation. All rights reserved.

Microsoft Corporation
Windows is a registered trademark of Microsoft Corporation in the United States and other countries.

NetFront
Copyright 2009, ACCESS CO., LTD. ACCESS and NetFront are trademarks or registered trademarks of ACCESS Co., Ltd. in Japan and other countries.

Opera
Copyright 1995-2009 Opera Software ASA. All rights reserved.

Safari
Copyright 2007-2009 Apple Inc. All rights reserved.

Sun Microsystems, Inc.

Java is a trademark of Sun Microsystems, Inc.

WebKit, Apple, and JavaScriptCore

The WebKit Open Source Project (including portions from the khtml, kcanvas, kdom, and ksvg2 projects) and JavaScriptCore Project (including portions from the kjs project) Copyright 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009

Copyright 2009 Samsung Electronics | All rights reserved.

Last updated: 09.25.2009

Samsung Mobile Widget SDK

Introducing the Samsung Mobile Widget SDK

The Samsung Mobile Widget SDK is a widget-development environment based on the Eclipse open development platform. Samsung Mobile Widget SDK helps you develop widgets for Samsung mobile devices running the TouchWiz user interface. This guide shows you how to create a widget project, launch the widget on the device emulator, and package it for release. In addition, you will find a stepby-step description of creating a sample widget that answers many common questions about widget development. Samsungs TouchWiz user interface includes 3D-effects, haptic feedback, and gesture and voice controls. The TouchWiz widget dock makes it easy for customers to manage and download widgets that customize and personalize their devices. Samsung Mobile Widget SDK simplifies the task of developing widgets in a number of ways:

It uses templates to create projects you can use as a starting point. It provides an emulator that makes it easy to visualize the final product on multiple devices, browsers, and platforms. It simplifies the customization of widgets for different sizes of device screens. It provides IDE features like autocomplete, context menus, and error tracking. It imports existing widgets, enabling you to examine and modify them. It packages and exports widgets for distribution.

This guide assumes that you have some familiarity with Eclipse and that you are familiar with HTML, CSS, and JavaScript.

2.0 - Installing the Samsung Mobile Widget SDK

The Samsung Mobile Widget SDK widget development environment is implemented as a series of Eclipse plug-ins. To install it, go to the Eclipse Help menu and select Install New Software. The Install dialog box appears:

Click the Add button to add the Samsung Mobile Widget SDK distribution site to your list of available software sites. The Add Site dialog box appears:

Give the update site an identifiable name in the Name field - something like "Samsung Mobile Widget SDK update site" - and specify the URL in the

Location field. The URL for the Samsung Mobile Widget SDK update site is http://widget.samsungmobile.com/sdk/. Click the OK button when
you are finished. From the Work with: combo box, select the update site that you just added.

The Install dialog box should now display "Samsung Mobile Widget SDK" in the list of available software:

Select the checkbox next to "Samsung Mobile Widget SDK" and then click the Next button. A progress bar across the bottom of the window shows you that Eclipse is "Calculating requirements and dependencies." An Install Details screen appears, listing the items to be installed:

Select the "Samsung Mobile Widget SDK" item and click the Next button. Review and accept the license, and click the Finish button. When the "Operation in progress" progress bar tells you that the installation is finished, a Software Updates dialog box "strongly recommends" that you restart Eclipse. Click Yes to follow this suggestion.

2.1 - Updating the Samsung Mobile Widget SDK

After you have entered the Samsung Mobile Widget SDK installation site as part of the installation procedure, it is easy to stay up-to-date. Just go to Help > Check for Updates. Any Samsung Mobile Widget SDK updates will be listed in the Available Updates dialog box. If you need to view or change the Samsung Mobile Widget SDK update site you have specified, go to Window > Preferences, expand the Install/Update node, and choose Available Software Sites.

2.2 - Uninstalling the Samsung Mobile Widget SDK

If you ever needed to uninstall the Samsung Mobile Widget SDK, you would begin by going to Help > About Eclipse SDK and clicking the Installation Details button.

You should see "Samsung Mobile Widget SDK Widget Development" in the list on the Installed Software tab. To uninstall the Samsung Mobile Widget SDK, you would select "Samsung widget development core" in the list and click the Uninstall button.

2.3 - Launching the Samsung Mobile Widget SDK

After you have installed the Samsung Mobile Widget SDK, you can launch it by opening the new Widget perspective in Eclipse. To do this, click the Open Perspective icon at the right side of the Eclipse window and choose Other from the bottom of the list.

Choose "Widget" from the list in the Open Perspective dialog box and click the OK button. The Widget perspective opens, revealing the views and editors you will use to help build widgets for the TouchWiz interface.

Copyright 2009 Samsung Electronics | All rights reserved.

Last updated: 09.25.2009

Samsung Mobile Widget SDK

The Widget Perspective

The Widget perspective in Eclipse looks like this:

Most of this is familiar to experienced Eclipse developers:

Project Explorer view shows you the names and structures of your current projects. Note that widget projects are decorated with an open folder containing an "S". Source Editor views display the editable files in your project and provide tools for editing them. Outline view gives you an easy way to see the organization of the file that is currently open in the editor and allows you to jump quickly to given point in the file. Device view displays the devices that are emulated when you preview your widget. Enables widget developers to add new devices to their projects by dragging them into the project's Device List. Instance Management views give you information you can use to add devices to your project, diagnose problems, and browse search results.

3.0 - Customizing a Perspective

A perspective contains multiple views into the files that make up your project. The Source Editor views must remain inside the main Eclipse window, but the other views can be dragged outside and positioned wherever you like. This can give you more room to work in the Source editors. Move or restore a view by clicking its tab and dragging it to a new position.

To return a perspective to its default appearance, choose Window > Reset perspective. If you find that you usually modify the default perspective, you can save your preferred configuration by choosing Window > Save Perspective as and giving your configuration a unique name. This new perspective now appears among the choices in the Open Perspective dialog box. You can add views to your perspective, if you like. To see a list of views you can add, choose Window > Show View. If you choose Other... in the menu that appears, you will be presented with a Show View dialog box that gives you access to a large number of possibilities. Another common customization is to use filters to choose which features to hide and show. For example, you might want to hide any closed projects in the Project Explorer view. To close a project, right-click the name of the project in Project Explorer and choose Close Project from the context menu. The icon decorating the project name changes from an open folder to a closed folder.

To hide closed projects, click the View Menu icon in Project Explorer (a small inverted triangle) and choose the Customize View option.

In the Available Customizations dialog box that appears, select the "Closed projects" filter in the Filters tab and click the OK button.

Copyright 2009 Samsung Electronics | All rights reserved.

Last updated: 09.25.2009

Samsung Mobile Widget SDK

Creating a Widget Project

You can create a new widget project in just a few minutes.

4.0 - Creating a New Project

A widget project is populated with the folders and files you need to start developing a new widget. Open the Widget perspective, if you havent done so already, as described in Launching the Samsung Mobile Widget SDK.

4.1 - Configuring your Project

Choose File > New > Widget Project. In the Widget Project dialog that appears, specify a name for your project. You can use the default Eclipse workspace or you can specify a new location.

The configuration information defines several important things about your widget.

Widget ID: A unique identifier for your widget. You should provide the namespace of your company or organization where <yourdomain> is suggested and a further refinement of your company's namespace where <yourdomain> is suggested. For more information, see Unique Widget Identifiers. Description: A brief description of your widget. Version: A version number that identifies your widget. Unlike the Widget ID, this version number may be exposed to the user. Width and Height: The size, in pixels, of the widget when it appears on the target device. Access Network: Designates whether the widget accesses the network. The default setting is TRUE. You should uncheck this box if your widget does not the network, as shown in the preceding screen shot.

You can edit these settings later, if necessary, by opening the project.xml file in the root of your widget project. The project.xml file is a generic configuration file that the Samsung Mobile Widget SDK uses to generate the config.xml file that is required by the finished widget. Different versions of the config.xml file are required for different platforms. The Samsung Mobile Widget SDK generates the correct form of config.xml whenever you export a project, based on your project's project.xml file and the platform of the target device. When you have finished with this Create a Widget Project screen, click the Next button.

4.2 - Selecting Devices

The next screen in the "Widget Project" wizard enables you to choose one or more devices for your project:

You can select more than one device by using the usual Ctrl+Click and Shift+Click key combinations, as shown in the preceding screen shot.

You can add new devices to a project at any time by dragging them from the Device view to your project's Device List node.

When you have finished with this Select Devices screen, click the Next button.

4.3 - Selecting a Template

In the next dialog box, Select a Template, you can choose between a simple template for a "Hello World" widget and a more complicated "RSS Reader" widget.

The "RSS Reader" widget implements many good ideas in cross-platform widget design. For more information, see Best Practices for Widget Development. Click the Finish button to create your Widget project.

4.4 - Structure of a Widget Project

Your new widget project looks like this in the Project Explorer view:

Most of the files in a new project are starting points for your code; as you would expect, the "Hello World" template creates a very simple widget.

Device List Lists the target devices for your widget. You can add to this list after you have created the project by dragging devices here from the Device view. css > style.css Lists the CSS files defining the appearance of your HTML file(s). The default file, style.css, is linked to at the top of the default

HTML file; you can supply more CSS files in this directory, if necessary, and link to them from the HTML file.

images Lists the PNG images used by your widget. PNG is the preferred file format, because PNG files support transparency and have ample color depth. project.xml Supplies configuration information, including the information you specified when you created the project. If you needed to change a widgets width and height, for instance, you would need to edit this file. overrides - Lists groups that define the screen resolutions and browsers supported by your project's devices. You can use these groups to customize your widget for particular browsers and resolutions. In this case, the 240x400 NetFront group is for the Pixon device, and the 240x400 Opera group is for the Omnia device. icon.png An icon that is displayed in the devices widget tray to identify your widget. The size of the icon varies with the screen size of the target device:
r r r r

QVGA (240 x 320) the maximum width of the tray is 56 pixels. A square icon should be no wider than 44 pixels. WQVGA (240 x 400) the maximum width of the tray is 60 pixels. A square icon should be no wider than 50 pixels. QHD (360 x 640) the maximum width of the tray is 81 pixels. A square icon should be no wider than 65 pixels. WVGA (480 x 800) the maximum width of the tray is 126 pixels. A square icon should be no wider than 102 pixels.

index.html Provides the HTML code that implements the appearance of your widget. Most widgets use only one HTML file. You might use more than one HTML file if your widget were implemented in multiple languages; the index.html file would allow users to choose a language, and each language would be implemented in its own HTML file. JavaScript Resources - A read-only list of the libraries that are available to your widget. As you add devices to your project, libraries available on that device are automatically added to this directory. You can browse through the libraries to look for functions or documentation on functions in the supported libraries.

js > main.js Lists the JavaScript files that supply the functionality of your widget. The default file, main.js, is specified at the top of the default

HTML file.

Your icon file must be named icon.png and your root-level HTML file must be named index.html.

4.5 - Previewing a Widget Project

To preview your new widget, right-click the device on which you would like to run the preview and choose Run As > Widget. The Samsung Mobile Widget SDK uses two different emulators to preview your widget. An emulator based on the WebKit (NetFront) browser handles the previews for many devices. For example, a preview of the "Hello World" widget on the Pixon (NetFront) device looks like this when the emulator appears:

The SDK's second emulator is based on the Opera browser. This emulator is used for Windows Mobile devices. For example, a preview of the "RSS Reader" widget on the Omnia (Opera) device looks like this when the emulator appears:

The RSS Reader widget retrieves headlines from Yahoo! News. The Opera browser runs behind the emulated widget, as shown above. When you choose one of the stories in the list, the widget displays story details:

The back arrow above the story returns the reader to the list of stories. The plus button launches a browser that displays the full story on the Yahoo! News site. You can use the Run button as a shortcut after you have run several widget previews. When you click the small arrow to the right of the Run button ( ), a list of recent launches appears. Choose the project you want to preview from this list.

4.6 - Exporting a Widget

When you have written and debugged your widget, you are ready to export it. Exporting a widget project bundles all of the widget files together into a .WGT file. The exported widget includes any customized files you may have included in the project's overrides directory and a device-specific config.xml file that the IDE produces automatically from your project's project.xml file. Bring up the Export dialog box by doing one of the following:

Right-click a device in your Device List and choose Export from the context menu that appears. Select any file in your project and press the CONTROL+SHIFT+X key combination. Select the root of the "Choose_a_Button" project and choose File > Export. In the Export dialog box that appears, expand the Samsung node, select

Export Widget, and click the Next button.

The Export Widget dialog box gives you the opportunity to select the project you want to export, the device(s) you are targeting, and the output directory in which the .WGT file will be saved. To export a widget for the Pixon device, select the checkbox next to it, specify a convenient output directory, and click the Finish button.

An exported widget is given a name in the form Project_Name.Device_Name.WGT. In this case, the widget is named Choose_a_Button.Pixon.

WGT. A .WGT file is really a standard compressed file with a .WGT filename extension; to view its contents, you can rename the file by adding a .ZIP
extension and then open it with any compression utility.

Copyright 2009 Samsung Electronics | All rights reserved.

Last updated: 09.25.2009

Samsung Mobile Widget SDK

Supporting Multiple Devices with Overrides

5.0 - Developing for Multiple Devices

The Samsung Mobile Widget SDK makes it easy to customize your widget for different devices. Instead of having to create a new widget project for each new device, you can use overrides to customize your widget. Whenever you need to provide a customized file in your project - an icon, image, CSS file, JavaScript tweak, HTML file, or project.xml - you should supply it in one of your project's overrides directories. When you preview or export your project, the IDE automatically picks up the customized files from the overrides directory for the target device.

5.1 - Device Groups

Every device you can use in the Samsung Mobile Widget SDK is a member of a group. Groups classify devices by their screen size and the browser they support. The Group column in Device view gives this information for each device. Your project's overrides directory contains a subdirectory for each group to which your project's devices belong. For example, in the following screen shot the project uses five devices: a BeatDJ, an Omnia, a Star, and a Tocco. The overrides directory contains subdirectories for four groups. There are two Dolfin groups - one for the Tocco, whose screen is 240x320, and one for the Star, whose screen is 240x400. The 240X400 NetFront group supports both the BeatDJ and the Pixon device. The Opera group supports the Omnia.

5.2 - Overrides
You might choose to lay out your widget differently for different screen sizes, or to use special-case code for different browsers. You can do this by putting modified files into the overrides directory for a specified group. The files at the root of your project are used by default whenever you run or export a widget; if you put a modified file into one of the overrides directories, that file will override the default file. You could use a single widget project to support both a QVGA (240 x 320) device and a WVGA (480 x 800) device, for example. Let's say that the HTML and JavaScript files were the same for both of these devices; the HTML is simple, and the JavaScript contains any required special-case code for window resizing. In this case, you might need to support the different screen resolutions with customized icon files, separate images, different CSS files for positioning objects, and separate project.xml files containing the size of the widgets. A schematic view of the project might look something like this:

In this case, whenever you previewed or exported your widget for Device One, the IDE would pick up the default files: the styles, images, icon, HTML, XML, and JavaScript. When you previewed or exported the widget for Device Two, the IDE would build a widget using the default HTML and JavaScript, but would override the other files with the contents of the 240x320 BrowserA directory. Similarly, when you previewed or exported the widget for Device Three, the IDE would build a widget using the default HTML and JavaScript, but would use the contents of the 480x800 BrowserB directory.

Example: Overriding index.html

For example, you could change the index.html file for the Tocco's smaller screen to say "Hello Smaller World." Copy and paste the projects index.

html file into the overrides > 240x320 Dolfin directory (or CTRL + Drag), edit the text in the HTML file, and preview the result on the Tocco
and the other devices. The changes you make to the files in the overrides > 240x320 Dolfin appear only when you preview on the Tocco - the widgets for the other devices have not changed. Note that you do not need to copy any JavaScript or CSS files in this case - the only file you need to put in the 240x320 Dolfin directory is the file that is changing for this override. To preview your widget on a particular device, select the device in the Device List, click the small triangle next to the Run icon, and choose Run As > Widget.

Alternatively, you can right-click on the desired device and choose Run As > Widget.

Yet another way of doing this is by using the Run menu: Run > Run As > Widget. The output on the Tocco emulator looks like this:

The new copy of index.html in the 240x320 Dolfin directory is picked up automatically when you preview the Tocco. Notice that the size of the text in this example has been changed with an inline style to prevent line-wrap problems.

Copyright 2009 Samsung Electronics | All rights reserved.

Last updated: 09.25.2009

Samsung Mobile Widget SDK

Tutorial Sample

This section of the Samsung Mobile Widget Development Guide leads you through the process of creating a simple widget. This widget uses simple CSS and JavaScript to animate buttons and change the visibility of paragraphs - it is only slightly more complicated than the "Hello World" template

6.0 - Create the Project

First, create a widget project, as outlined in the preceding sections. There is one important difference in the procedure given in the following list, however. When you create this project, you should not use a template as a starting point. 1. Ensure that you are using the Widget perspective. 2. Choose File > New > Widget Project and give your project a name. This sample uses the name "Choose_a_Button". Give your project a unique ID and add other configuration information. For the "Choose_a_Button" project, use 200px for the height and 150px for the width. Uncheck the Access Network checkbox and click the Next button. 3. Select the Pixon from the list of Devices on the next dialog box and click Finish. Do not click the Next button - we do not want to start with either of the templates for this project. The "Choose_a_Button" project appears in the Project Explorer view. This project is even simpler than the project created by the "Hello World" template; it has an empty HTML file.

6.1 - Add a Device

When you expand the nodes of the "Choose_a_Button" project in Project Explorer view, it should look like this:

To ensure that the project was set up successfully, right-click the root of the "Choose_a_Button" project in Project Explorer and select Run As > Widget. A white box should appear in the emulator.

6.2 - Edit the CSS File

Add a style.css to the css directory, and add the following to the style.css file to change the appearance of any paragraph text in the widget:

body { background-color:white; } p { color:#882222; font-family:sans-serif; font-size: medium; }

The body section ensures that the widget's background color is white, rather than the default transparent color.

6.3 - Create and Import the Images

Create PNG files for the images you will use as buttons in this widget. We need a "Yes" button and a "No" button. Each button also needs a version that gives the user feedback when it has been selected. The four buttons might look like this:

In the sample code, these buttons are named yes.png, yes_inverted.png, no.png, and no_inverted.png. After you have created the buttons, you can drag them from a window in the file system to the images directory in Project Explorer to import them into your project.

6.4 - Create and Import the Icon

Create a PNG file that will serve as an icon for this widget. The screen size of the Samsung Pixon is given in the Device view as 240 x 400 therefore, according to the list given in Structure of a Widget Project, the icon should be no wider than 50 pixels. The new file should be named icon.png if you give it another name, you should change the icon entry in project.xml to match the new name. Replace the default icon.png file in the "Choose_a_Button" project with your new icon. Here is one possible icon for the project:

6.5 - Edit the JavaScript File

Create a main.js file in the js directory. The Choose_a_Button widget creates two buttons and reacts to user input. The code that animates the buttons is in the mouseClick(button) function. Add the following to the main.js file.

/*================================================================= * The start() function is called when the onload() event occurs. * It ensures that the responses to button presses are initially * hidden. ================================================================*/ function start() { document.getElementById("yesreaction").style.visibility="hidden";

document.getElementById("noreaction").style.visibility="hidden"; } /*================================================================= * The mouseClick() function is called when the onclick() event * occurs. It animates the buttons and changes the visibility * of the paragraphs that display responses to the click. * * button parameter - string identifying the button that was clicked ================================================================*/ function mouseClick(button) { if (button=="yesbutton") { // change the button image for 300 milliseconds document.yesbutton.src ="images/yes_inverted.png"; setTimeout("document.yesbutton.src ='images/yes.png'", 300); // ensure other button is in unselected state document.nobutton.src ="images/no.png"; // change visibility of button responses document.getElementById("yesreaction").style.visibility="visible"; document.getElementById("noreaction").style.visibility="hidden"; } else if (button=="nobutton") { document.nobutton.src ="images/no_inverted.png"; setTimeout("document.nobutton.src ='images/no.png'", 300); document.yesbutton.src ="images/yes.png"; document.getElementById("yesreaction").style.visibility="hidden"; document.getElementById("noreaction").style.visibility="visible"; } else { document.write("Something went wrong."); } }

6.6 - Edit the HTML File

Finally, you need to edit the index.html file so that the widget will use the images, CSS, and JavaScript you have just put in place. When the page loads, the onload event calls the JavaScript start() function to hide the sentences that are displayed when the user clicks a button. The buttons are animated when the buttons are clicked. The onclick event calls JavaScript that is implemented in the main.js file. Finally, the responses to the button clicks are displayed, with their positions given in absolute coordinates, so that the "yes" and "no" responses appear in the same place.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript" src="js/main.js"></script> </head> <body onload="start()"> <p>Would you care to <br />press a button?</p> <img src="images/yes.png" name="yesbutton" onclick="mouseClick('yesbutton')"></img> <img src="images/no.png" name="nobutton" onclick="mouseClick('nobutton')"></img> <p id="yesreaction" style="position:absolute;top:100px"> Thank you for your input.</p> <p id="noreaction" style="position:absolute;top:100px"> You are trying <br />to confuse me.</p> </body> </html>

6.7 - Preview the Widget

Now that the images, CSS file, JavaScript file, and HTML file are in place, it is possible to preview the widget. Right-click the "Choose_a_Button" project in Project Explorer and choose Run As > Widget. The emulator should look like this:

Use your mouse to verify that the buttons animate correctly and that they handle the mouse clicks.

6.8 - Export the Widget

When you are satisfied with "Choose_a_Button," export it and verify that it works successfully outside the emulator. A good way to test an exported widget is on an Opera browser. First, drag an Omnia device from the Devices view to your project's Device List. The Omnia uses Opera as its browser. Any widget exported for an Omnia device will run on Opera. Right-click the Omnia device inside your Device List and choose Export. Then follow the directions in Exporting a Widget to produce a .WGT file. Double-click the .WGT file to launch the Opera browser, or drag the .WGT file into an Opera window. Drag the Opera window away from the widget to verify that the widget is running on your desktop. The following screen shot shows the Create_a_Button widget running on the desktop, with the Opera window behind it:

To close the widget, right-click it and choose Close.

Copyright 2009 Samsung Electronics | All rights reserved.

Last updated: 09.25.2009

Samsung Mobile Widget SDK

Debugging Widget Projects

This section of the documentation will help you choose a good debugger for your widget project.

7.0 - Platforms and Browsers

You can choose among several good debuggers when you are writing your widget. Most of the time - especially when you pay careful attention to interoperability/cross-browser issues - your JavaScript problems can be solved by any debugger. In browsers with debuggers, you may browse the DOM, examine source, and set breakpoints as needed. You may also use the browser page (or widget) reload mechanism to start over at will. However, editing must be done in the Samsung Mobile Widget SDK. After editing, re-run the widget from the SDK to relaunch the browser with all your changes and overrides included. The most popular browsers on current TouchWiz devices are:

NetFront (ACCESS), for some Samsung Handset Platform (SHP) devices Opera, for Windows Mobile devices Dolfin (WebKit), for some SHP devices

You can preview your widget on any web browser you have installed by setting up a new run configuration for your project. For more information, see Previewing on a Browser. Most users of the Samsung Mobile Widget SDK attempt to develop widgets that will reach as many TouchWiz devices as possible. The most successful widgets will run on any platform and on any browser. Building widgets like this requires careful attention to interoperability issues, as outlined in Best Practices for Widget Development.

7.1 - Debugging with Firefox and Firebug

The Firebug debugger is an add-on for Mozilla's Firefox browser. It has many useful features, including:

HTML editor
CSS metrics JavaScript debugging, with breakpoints, stepping through code, expression watching, stack tracing, and more. DOM exploration

The following screen shot shows Firebug displaying information about the "Hello World" code, while the output is displayed at the top of the screen. The Layout view is a graphical representation of the current styles.

Firefox does not allow you to use XMLHttpRequest from a local file. If your widget uses XMLHttpRequest and you want to debug it in Firebug, add the following (temporarily) to your code. This will present a dialog box when the request is made:

try { netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); } catch (e) { // There should be no errors. This try/catch construction should allow // you to run this code in any browser. }
For more information about working with XMLHttpRequest, see XMLHttpRequest Issues. You can learn more about Firebug and download it here: http://getfirebug.com/

7.2 - Debugging using Safari

Another browser you can use to debug your widgets is Safari. First, ensure that your local version of Safari is set up to enable debugging. 1. Launch Safari. 2. Choose Edit > Preferences. 3. In the Advanced tab, check the box for "Show Develop menu in menu bar." A new menu item, Develop, appears in your Safari window. Now you need to add Safari as a run configuration for the device and project you want to debug. Setting up a new run configuration is described in Previewing on a Browser. When you have set up a run configuration for Safari, click the Run button at the bottom of the Run Configurations dialog box to launch your widget inside Safari. Choose Develop > Show Web Inspector and click the Enable Debugging button to start Safari's Web Inspector debugger.

You can use the Scripts tab to examine your project's JavaScript files and the Elements tab to examine your HTML and CSS files. The name of the current JavaScript file is next to a drop-down list that enables you to switch between files:

7.3 - Debugging for Windows Mobile using Opera

Samsung's Windows Mobile devices use the Opera browser to display widgets. Therefore, the Samsung Mobile Widget SDK launches Opera automatically whenever you select a Windows Mobile device and choose Run As > Widget. Debugging on Opera can be a good way of uncovering problems that might occur on those devices. Dragonfly is the name of Opera's debugger. To open the Dragonfly views choose Run As > Widget, and then after Opera launches, select Tools > Advanced > Developer Tools in Opera. A new work area appears at the bottom of the screen, labeled "Loading Dragonfly." When Dragonfly has finished loading, debugging windows appear. The following screen shot shows Dragonfly displaying information about the "RSS Reader" widget, while the Opera Speed Dial feature is displayed at the top of the screen. Dragonfly is displaying part of the widget's main.js file.

When you first run Dragonfly, you will see a drop-down window in the Scripts tab labeled "Select a window." Click the down arrow and choose "Widget Emulator" to start your debugging session.

If the "Select a window" drop-down window is empty, please close other instances of Opera that you have running.

You can use the Dragonfly views to see the HTML and script files for both the emulator and your widget. You should be sure to work with the widget files when you are debugging, not the emulator files. To do this, click the DOM tab above the Dragonfly work area and then the Documents tab at the bottom of the window, and choose the path that ends with ...DeviceName/widgets/ProjectName/index.html, not ...opera_emulator/

DeviceName/index.html.

The Scripts view also shows the script for both the emulator itself and for your widget. Normally, your source files will be under the second index.html tree control. Information about Dragonfly can be found at http://www.opera.com/dragonfly. A discussion of using Dragonfly to debug widgets is here: http://dev.opera.

com/articles/view/debugging-widgets-using-opera-dragonfly/.

Copyright 2009 Samsung Electronics | All rights reserved.

Last updated: 09.25.2009

Samsung Mobile Widget SDK

Widget-Development Tips

This part of the Samsung Mobile Widget Development Guide discusses advanced topics for widget development.

8.0 - Widget SDK User Interface Tips

This section introduces several ideas for using the Samsung Mobile Widget SDK in ways you may not have discovered on your own.

Viewing the Error Log

You can add an Error Log view to the Instance Management views at the bottom of the IDE window. You can use the Error Log to track problems as you work with the Samsung Mobile Widget SDK. To add this view: 1. Select Window > Show View 2. Choose Other to display the Show View dialog box 3. Expand the General node and select Error Log from the list 4. Click the OK button

Viewing TouchWiz API

You can look at the implementations of the TouchWiz API whenever you like, by expanding the JavaScript Resources node in the Project Explorer view and then expanding the TouchWiz Mobile Widget API node:

Both the comments in this code and the implementation details can help you develop your widgets. Many of these API elements work in different ways on different platforms; you should implement cross-browser strategies in your code to accommodate these differences. For information, see Best Practices for Widget Development and Samsung Mobile Widget Specification V0.93.

Using Open With Web Page Editor

When you right-click an HTML file in Project Explorer view, you can choose Open With > Web Page Editor and work with the file in an interesting way. The Source Editor view opens with two windows: the top window shows a preview of the HTML output and the bottom window shows the editable source code:

There are tabs along the bottom of this view. In the preceding screen shot we are looking at the Design tab. For a better preview of the HTML file you can click the Preview tab. The mouse cursor in the preceding screen shot is near a small left arrow that you can click to reveal a palette of visual items you can drag into the editor. For example, in the following illustration, the Line Break item has been dragged from the HTML 4.0 menu and dropped between "Hello" and "World":

8.1 - Previewing on a Browser

Sometimes you might prefer to preview your widget on a web browser instead of in the IDE's device emulator. To do this, you must set up a new run configuration for your widget project. First, select the name of the project in Project Explorer that you would like to run in a browser. Then select the small triangle next to the Run icon and choose the Run Configurations... item.

Ensure that the Widget node is selected in the Run Configurations dialog box that appears. Give this new run configuration a descriptive name. The

Project and Device entry fields are filled in with values taken from the project that was selected when you opened this dialog box. Select "Web Browser"
in the Run with section. The dialog box should look something like this:

Click the Web Browser Preference... button to choose the web browser on which you would like to test your widget:

Ensure that the "Use external Web browser" radio button is selected, as shown above. To add a new browser to this list, click the New... button and navigate to the browser's location on your hard drive.

Browsers handle security with XMLHttpRequest in different ways. For example, the Dolfin browser used by many Samsung devices (based on the WebKit browser used in the Samsung Mobile Widget SDK) allows XMLHttpRequest access to remote sites, but other browsers may not. For more information, see Working with Multiple Browser Platforms.

8.2 - Importing an Existing Widget

You may sometimes need to bring an existing widget into the Samsung Mobile Widget SDK. Follow this procedure to import it successfully: 1. Choose File > Import 2. Expand the Samsung node and choose Widget. Click the Next button. 3. Click the Browse button and navigate to the directory containing the .WGT file you want to import. 4. Select the desired .WGT file and click the Open button.

5. Click the Finish button. 6. Drag a device into the Device List for the new project. The following screen shot shows a list of available widget files that could be displayed when a user clicks the Browse button.

When you import an existing widget, the Samsung Mobile Widget SDK reads the widget's config.xml file and transfers the values to the new project's generic project.xml file. Different versions of a widget's config.xml file are required for different platforms. When you export a project, the Samsung Mobile Widget SDK generates the correct form of config.xml, based on the project's project.xml file and the platform of the target device. For information about exporting a project, see Exporting a Widget. Note for earlier widgets developed using the Opera Widget Emulator: Widgets written to work with the Opera Widget Emulator may have the following line of code in the head of index.html to allow them work with the Opera Widget Emulator:

<script type="text/javascript">if(parent.emulator)parent.emulator.begin(window);</script>
You should remove this line from your index.html file. The Samsung Mobile Widget SDK automatically works with the Opera Widget Emulator. Calling

emulator.begin again overwrites the Samsung Mobile Widget API widget object, causing incorrect emulation behavior for setScroll and resizeWindow.

8.3 - Unique Widget Identifiers

Every widget and widget project must have a unique identifier that is used to prevent name and version collisions at the Samsung application store. The Samsung Mobile Widget SDK makes it easy to ensure that your project's ID is unique. When you first create a widget project, you are asked to supply a device identifier. The default value supplied in the dialog box looks like this:

If you follow the suggestions given in the angle brackets and allow the IDE to add the name of your project at the end of the string, your widget project is certain to have a unique identifier. Your identifier might look like this:

Company URL - The namespace of your company or organization. For example, com.samsung Group ID - A further refinement of the company namespace. For example, sprc.dev.widgets Project name - The name of your widget project.

The IDE combines these values with an identifier for the target device to produce the final unique widget identifier. A link in the Create a Widget Project dialog box makes it easy for you to set a preference that saves your identifier prefix, freeing you from having to enter

it every time you create a new widget project. Click Set Widget ID default prefix to display the Preferences dialog box:

You can also save your widget identifier's prefix by choosing Window > Preferences and clicking the Widget node.

8.4 - Best Practices for Widget Development

You can use these "best practices" to reduce development time and avoid frustrations. Following these tips ensures that your use of the Samsung Mobile Widget SDK is efficient and that your widgets will run on multiple platforms. 1. Test your widget in multiple browsers. See Working with Multiple Browsers, below, for more information. 2. Use overrides, not different projects, to support multiple screen resolutions and browsers. For an example of handling window resizing in your code, see Window Resizing, below. 3. Handle differences caused by multiple screen resolutions in your CSS files, rather than by hard-coding the sizes in JavaScript or HTML. 4. Be careful about differences in how browsers handle events. See Event Handling, below, for more information. 5. There are a number of cross-platform issues with the XMLHttpRequest DOM API, including security restrictions and the possibility of a null response. For more information, see XMLHttpRequest Issues, below. For technical details about some of the requirements of cross-platform design, see the Samsung Mobile Widget Specification V0.93.

Working with Multiple Browser Platforms

New mobile devices use many different web browsers. Samsung devices might use NetFront (ACCESS), Opera, or Dolfin (WebKit), and more browsers are likely to be supported soon. It is important to test your widget on the browsers for all of your target devices. JavaScript engines vary from browser to browser and sometimes from version to version within a single browser. This means you many not be able to use some browser objects and their corresponding event handlers to develop your widget, depending on the target browser and its JavaScript implementation. You can run your widget in the emulator or in any browser you have set up in the Run Configurations dialog box (see Previewing on a Browser). In addition, you can export your widget and run it in Opera. To export your widget, choose File > Export (or use the CONTROL+SHIFT+X key combination), and select your device and output directory in the Export Widget dialog box. You can find a complete description of exporting widgets in Exporting a Widget. To preview your widget, double-click the .WGT file or drag the file into an Opera window. Please note that Opera caches the widget, so you will need to close both the widget and Opera when making changes.

Window Resizing
A common cross-browser issue is window resizing. SHP devices support the resizeWindow API, but Windows Mobile devices may support only the

resizeTo API. You can solve this problem with a try/catch construction like this:

try { widget.window.resizeWindow(width,height); } catch(e) { window.resizeTo(width,height); }

You should use overrides to support devices that have different screen sizes. For more information, see Overrides.

Event Handling

This is a good idiom to use in event handlers:

function doSomething(e) { if (!e) { var e = window.event; // e gives access to the event in all browsers } }
If you use this idiom with inline event handling, you must pass the event to the handler manually. Restrict event handling to the W3C DOM Level 2 Event specification: http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/ For additional information, use resources such as http://www.quirksmode.org/js/introevents.html and http://www.quirksmode.org/js/events_access.html.

XMLHttpRequest Issues
Various browsers have different security restrictions when using XMLHttpRequest from a local file.

IE - allowed with warning dialog Safari - allowed Opera - disallowed - test as widget instead Firefox - disallowed - add the following (temporarily) to your code. This will present a dialog box when the request is made:

try { netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); } catch (e) { // There should be no errors. This try/catch construction should allow // you to run this code in any browser. }
The responseXML from a XMLHttpRequest can be null if the request header has not been initialized correctly. The results can vary on different browsers. To correctly get the desired response, set the content header before making the request. For example:

request.setRequestHeader("Content-type", "text/xml");
The XMLHttpRequest API is not currently supported by Internet Explorer. Your code should create a cross-browser XMLHttpRequest object by creating a new ActiveXObject, when necessary, as in the following sample from the RSS Reader template's network.js file:

function getXMLHttpRequest() { var xmlHttp = null; try { xmlHttp = new XMLHttpRequest(); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } return xmlHttp; }

8.5 - Using a Proxy Server

If your development environment uses a proxy server to connect to the Internet, you will need to set up an environment variable to successfully work with the Samsung Mobile Widget SDK. This change must be made both in your system and in any external browser you use. In future releases, these settings will be

integrated into the IDE.

Setting the System's Environment Variable

You will need to add a system-wide http_proxy environment variable so that the IDE's emulator can find your proxy server. To do this, follow these steps: 1. Open Control Panel > System. 2. Click the Advanced tab. 3. Click the Environment Variables button. 4. Click the New button in the System variables section. 5. In the New System Variable dialog box, specify the variable name as:

http_proxy
This must be in lowercase letters, as shown. 6. Specify the variable value in this form:

http://proxy_server_name:port_number
A variable value might look like this:

http://ourproxy.widget.com:8081
7. Reboot your computer. The next time you run the emulator, it will use the proxy as specified.

Configuring Opera
You can find the proxy settings in Opera like this: 1. Tools > Preferences 2. Advanced tab 3. Network node 4. Proxy Servers button Use the information given above, in Setting the System's Environment Variable, to set up the proxy server.

Configuring Safari
You can find the proxy settings in Safari like this: 1. Edit > Preferences 2. Select Advanced 3. Proxies: Change Settings button 4. LAN Settings button 5. Select the checkbox for "Use a proxy server for your LAN" Use the information given above, in Setting the System's Environment Variable, to set up the proxy server.

Configuring Firefox
You can find the proxy settings in Firefox like this: 1. Tools > Options 2. Advanced tab 3. Network tab 4. Settings button in the "Connection: Configure how Firefox connects to the Internet" section. 5. Select the "Manual proxy configuration" radio button. Use the information given above, in Setting the System's Environment Variable, to set up the proxy server.

Copyright 2009 Samsung Electronics | All rights reserved.

Last updated: 09.25.2009

Samsung Mobile Widget SDK

SDK Menu Items

This section of the Samsung Mobile Widget Development Guide is a reference to the menu items that are specific to the Samsung Mobile Widget SDK. Not every menu item is listed here. Menu items are discussed only when they are new or extended for the Samsung Mobile Widget SDK, when their use could be confusing without some explanation, or when they are used so commonly in widget development that omitting them would appear to be an oversight. For information about the Eclipse user interface, use the following links into the IDE's integrated help system. These links work only when you are viewing this document inside the IDE, by choosing Help > Help Contents and expanding the Samsung Mobile Widget Development Guide node. To return to this page, click the yellow left arrow ( Eclipse menu items:

) immediately above this text.

File menu Edit menu Navigate menu Project menu Window menu Help menu

Eclipse buttons and icons:

Project Explorer icons Editor area marker bar Tasks view Toolbar buttons

You can find a great deal of useful information about Eclipse in the help file, under Workbench User Guide. The preceding links take you to pages in Workbench User Guide > Reference > User interface information.

9.0 - Sequential Menu List

This section lists menu items in the order in which you will find them in the user interface.

File Menu

New > Widget Project creates a new widget project. For a description of using this menu item, see Creating a New Project. Import imports an existing widget, creating a new project for it. For a description of using this menu item, see Importing an Existing Widget. Export packages a widget for release, creating a .WGT file in the destination you specify. For a description of using this menu item, see Exporting a Widget Properties gives you information about the selected project. You should select a project name before choosing this menu item. Information that may be useful to widget developers includes:
r

Resource node identifies the workspace for the project. Run/Debug Settings enables you to work with launch configurations for your project. For information about launch configurations, see
Previewing on a Browser.

Validation > HTML Syntax enables you to configure project-specific HTML validation settings and provides a link to a dialog box where you
can configure settings for your entire workspace.

Run Menu

Run As > Widget enables you to test your widget in the device emulator. There are several other ways to do this - you can also use the context menu in Project Explorer view or the Run button in the menu bar ( ). For a description of using this menu item, see Testing a Widget Project.

Run Configurations enables you to create selectable launch environments for your widget project; for instance, you could create a configuration that allowed you to choose to run the widget in Internet Explorer. In the Run Configurations dialog box, choose Widget > New_configuration to reveal the Widget Preview Mode settings. You can use the same alternative ways of doing this as you could for Run As > Widget above. For information about launch configurations, see Previewing on a Browser.

Window Menu

Open Perspective > Other reveals a dialog box that allows you to choose the Widget perspective. You can also use the Open Perspective icon to do this. For a description, see Launching the Samsung Mobile Widget SDK. Show View enables you to show any views that may be hidden and to choose any views that are not part of the default Widget perspective. If you select Show View > Other you will be able to choose from many different views that are supplied by the Eclipse IDE. Save Perspective As enables you to save a customized version of the Widget perspective. For more information, see Customizing a Perspective. Reset Perspective resets the Widget perspective to its default settings. Preferences reveals a dialog box where you can change a wide array of different settings for Eclipse.
r

Install/Update > Available Software Sites lists the URLs of web sites that might contain Eclipse updates. One of these sites is the Samsung widget update site. You can use this page to modify or test your connection to this site. Web reveals a large number of preferences that are interesting to widget developers, including CSS Files, HTML Files, and JavaScript. Widget enables you to specify the default domain name for your projects. For more information, see Unique Widget Identifiers.

r r

Help Menu

Help Contents opens the Eclipse integrated help system. One of the items in the Contents pane is Samsung Mobile Widget Development Guide - this documentation. You may sometimes find it useful to restrict the scope of your searches to this document; to do this, click the Search scope link to the right of the Search entry field and define a search scope that is restricted to this guide.

Check for Updates causes Eclipse to check a list of web sites for updates to any of its plug-ins. Any updates to the Samsung Mobile Widget SDK will be downloaded and installed with you choose this menu item. Install New Software enables you to specify a site from which you would like to download new Eclipse plug-ins. For more information, see Installing the Samsung Mobile Widget SDK. About Eclipse reveals a dialog box with Build identifiers and buttons that display features of individual Eclipse components. One of these buttons is decorated with the widget icon; this will take you to information about the Samsung Mobile Widget SDK. Clicking the Installation Details button at the bottom of the About Eclipse dialog box brings up an Eclipse Installation Details dialog box, which contains a wealth of information about the plug-ins that comprise the IDE.

Project Explorer View Menu

You gain access to a view menu by clicking the small inverted triangle in the view's icon bar (

).

Customize View enables you to specify items you want to hide or reveal in the Project Explorer view. For more information, see Customizing a Perspective. Link with Editor is a persistent setting that causes the name of the file you are working on in the Source Editor view to be highlighted in Project Explorer.

Project Explorer Context Menu

You gain access to a view's context menu by right-clicking in the view. The context menu changes depending on what item is selected when you click the right mouse button. Some of the following menu items appear only when a file of a particular type is selected.

New > Project opens a New Project dialog box, which you can use to create a new widget project. Inside this dialog box, you can expand the Samsung node, select Widget Project, click the Next button, and complete the creation process as described in Creating a New Project. Import opens an Import dialog box. For information about importing an existing widget into the IDE, see Importing an Existing Widget. Export opens an Export dialog box. For information about exporting a widget, see Exporting a Widget Run As > Widget enables you to test your widget in the device emulator. There are several other ways to do this - you can also use the Run > Run As menu item in the menu bar or the Run button ( ). For a description of using this menu item, see Testing a Widget Project. Properties gives you information about the selected project. For more about this menu item, see File Menu, above. Open With > Web Page Editor - available only when you have selected an HTML file. This source editor may help visualize your work as you produce a widget. It includes a visual preview, a palette of user-interface elements that you can drag into your project, and Design and Preview modes.

9.1 - Menu Index

This is an alphabetical index of the menu items that are described in the preceding section.

About Eclipse See Help Menu.

Available Software Sites, Preferences > Install/Update See Window Menu, Preferences. Check for Updates See Help Menu. Configurations, Run See Run Menu, Run Configurations. Customize View See Project Explorer View Menu. Eclipse, About See Help Menu, About Eclipse. Eclipse, Installation Details See Help Menu, About Eclipse. Editor, Link with See Project Explorer View Menu, Link with Editor. Export See File Menu and Project Explorer Context Menu. Help Contents See Help Menu. HTML Syntax, Validation See File Menu, Properties. Import See File Menu and Project Explorer Context Menu. Install/Update > Available Software Sites, Preferences See Window Menu, Preferences. Install New Software See Help Menu. Link with Editor See Project Explorer View Menu. New > Project See Project Explorer Context Menu. New > Widget Project See File Menu. Open Perspective > Other See Window Menu. Open With > Web Page Editor See Project Explorer Context Menu Perspective, Open > Other See Window Menu. Perspective, Reset See Window Menu, Reset Perspective. Perspective, Save As See Window Menu, Save Perspective As. Preferences See Window Menu. Project, New See Project Explorer Context Menu, New Project. Project, New Widget See File Menu. Properties See File Menu. and Project Explorer Context Menu Reset Perspective See Window Menu. Run/Debug Settings See File Menu, Properties. Run As > Widget See Run Menu. and Project Explorer Context Menu Run Configurations See Run Menu. Save Perspective As See Window Menu. Show View See Window Menu. Software, Install New See Help Menu, Install New Software. Updates, Check for See Help Menu, Check for Updates. Validation See File Menu, Properties. View, Customize See Project Explorer View Menu, Customize View. View, Show See Window Menu, Show View. Web, Preferences See Window Menu, Preferences. Widget, Run As See Run Menu, Run As. and Project Explorer Context Menu Widget Project, New See File Menu.

Copyright 2009 Samsung Electronics | All rights reserved.