Widget example code Experimental

Last modified by David Nestle on 2019/02/15 09:11

For the general Widget Framework Documenation see The OGEMA Widgets framework page.

User name currently logged in

The following code can be used to get the user currently logged in:

import org.ogema.accesscontrol.Constants;

HttpSession session = req.getReq().getSession();
SessionAuth sauth = (SessionAuth) session.getAttribute(Constants.AUTH_ATTRIBUTE_NAME);
final String user = sauth.getName();

Note that this requires access to the bundle internal-api.

See also LoginInitSingelEmpty for an init widget that provides a user context based on this.

Datepicker and ProgressBar

Simple page providing a Datepicker that allows to choose a new framework time. Setting the framework time can be activated via a Button. If the operation is not possible a message is shown in an Alert. Progress of moving forward to the new framework time is shown in a ProgressBar. See code on Github.

ScheduleViewerBasic widget

Simple page providing a widget of type ScheduleViewerBasic. The widgets displays hard coded schedules provided as resource paths. See code on Github.

From version 2.1.2 the ScheduleViewerConfigurationBuilder class contains an extensive documentation on the ScheduleViewer capabilities and options.

Generate pages and tables for viewing and editing resources

Automated viewing and editing of resources can be realized with PatternEditor / PatternCreator (see widget reference, TODO CN: Add example code / tutorial). If this concept does not offer enough flexibility, using the ResourceGUIHelper should be checked if resources need to be displayed/edited in a edit mask form. There are two options for usage:

Please note that the ResourceGUIHelper requires an additional bundle from the OGEMA Alliance Repository:

<bundle dir="bin/apps" groupId="org.smartrplace.apps" artifactId="smartrplace-util-proposed" version="&widgets-version;" startLevel="30" />

The bundle is available on Github at https://github.com/smartrplace/api-draft/tree/master/src/util-public/smartrplace-util-public. See the Repository Documentation for more information.

These examples also show how you can mix the simple widget generation via ResourceGUIHelper with the conventional generation of widgets that are not supported by the ResourceGUIHelper itself.

Facelifting of your widget page

Provide navigation between pages of your application

If your application contains more than one page you may want to add a navigation entry into the top navigation bar. The code required for this looks like this:

  widgetApp = guiService.createWidgetApp(urlPath, appManager);
  WidgetPage page = widgetApp.createStartPage();
  mainPage = new MainPage(page, appMan);
  WidgetPage page2 = widgetApp.createWidgetPage("users.html");
 new UserPage(page2, appMan);
  WidgetPage page3 = widgetApp.createWidgetPage("comments.html");
 new CommentPage(page3, appMan);
 
  NavigationMenu customMenu = new NavigationMenu(" Select page");
  customMenu.addEntry("Apps", page);
  customMenu.addEntry("Users", page2);
  customMenu.addEntry("Comments", page3);
  MenuConfiguration mc = page.getMenuConfiguration();
  mc.setCustomNavigation(customMenu);
  mc = page.getMenuConfiguration();
  mc.setCustomNavigation(customMenu);
  mc = page2.getMenuConfiguration();
  mc.setCustomNavigation(customMenu);
  mc = page3.getMenuConfiguration();
  mc.setCustomNavigation(customMenu);

In this example we have three pages. The entries in the navigation menu are determined by the Strings given in customMenu.addEntry.

Set Button styles

To give your page some color and to highlight the buttons, which are usually one of the most important elements of the page for the user, give all buttons on a page the same color:

public static final WidgetStyle<Button> ButtonStdStyle = ButtonData.BOOTSTRAP_GREEN;

Add the style to each button on the page, e.g.:

  RedirectButton backButton =
   new RedirectButton(page, "backButton",
   "back", "index.html");
  backButton.setDefaultOpenInNewTab(false);
  backButton.addDefaultStyle(ButtonStdStyle);
 
  Button checkForUpdatesButton = new Button(page, "checkForUpdates", "Check for Updates now") {
  ...
 };
  checkForUpdatesButton.addDefaultStyle(ButtonStdStyle);

In this example the RedirectButton is also configured NOT to open a new tab by backButton.setDefaultOpenInNewTab(false), which is more user friendly in many cases.

Additional Widget Styles

Styles that can be applied to all widgets (especially to Tables, Labels and Headers) to determine alignment:

TEXT_ALIGNMENT_CENTERED

TEXT_ALIGNMENT_LEFT

TEXT_ALIGNMENT_RIGHT

If applied to a table the respective setting is applied to all cells, but can be overwritten for single cells when another alignment is applied to therespective widget.Setting a style is done like this:

  commentTable.addDefaultStyle(DynamicTableData.TEXT_ALIGNMENT_LEFT);

or

  header.addDefaultStyle(HeaderData.TEXT_ALIGNMENT_CENTERED);

Configure Menu Bar and User Access

To configure the menu bar with a custom logo, first register a web resource (the custom logo should be in the app in the folder src/main/resources/webresources ):

static final String URL_PATH_WEBRESOURCES = "/appstore/resources";

appMan.getWebAccessManager().registerWebResource(AppstoreGuiDevApp.URL_PATH_WEBRESOURCES, "webresources");

When the application is stopped, do not forget to unregister the web resource:

 try {
   appMan.getWebAccessManager().unregisterWebResource(AppstoreGuiDevApp.URL_PATH_WEBRESOURCES);
 } catch (Exception ignore) {}

To configure a menu configuration without navigation between apps, messages and language selection call this:

private final static void configureMenu(final WidgetPage page) {
    final MenuConfiguration menuConfig = page.getMenuConfiguration();
  menuConfig.setLanguageSelectionVisible(false);
  menuConfig.setShowMessages(false);
  menuConfig.setNavigationVisible(false);
  menuConfig.setIconPath(AppstoreGuiDevApp.URL_PATH_WEBRESOURCES + "/custom_logo.png");
}

Now you should set up a user that can only access the custom app and you should close the REST access to provide an OGEMA system that offers just a defined set of applications to a customer or to the public.

Add Icons

Give the most important elements in your application icons and even allow the user to upload icons for relevant elements. Generally there are two types of icons: App-cons that are provided in the jar-File of an OGEMA-App and FlexIcons that are provided from the run directory and/or can be uploaded by the user. App-Icons should also be placed in a folder registered as web resource (see Configure Menu Bar above). You can now set the icon as backgound image:

   WidgetPage page4 = widgetApp.createWidgetPage("editApp.html");
   configureMenu(page4, isViewer);
   page4.setBackgroundImg(AppstoreGuiDevApp.URL_PATH_WEBRESOURCES + "/"+AppstoreGuiDevApp.BACKGROUND_IMAGE);

or insert the icon into your widget page (append the icon to the page, to a table cell etc.):

  Icon downloadIcon = new Icon(page, "downloadIcon");
  downloadIcon.setDefaultIconType(new IconType(AppstoreGuiDevApp.URL_PATH_WEBRESOURCES + "/download-arrow-down.png"));
  downloadIcon.setWidth("48px");

You can also use the use IconService instead:

  Icon descriptionIcon = new Icon(page, "descriptionIcon");
  String url = iconService.getIcon(Resource.class);
  descriptionIcon.setDefaultIconType(new IconType(url));

The standard implementation of the IconService contains icons for the following resource types: TemperatureSensor, HumiditySensor, Schedule, Room, Sensor, Thermostat, Radiator, ElectricityMeter, Vehicle, PhysicalElement, ElectricLight, CoolingDevice, Resource and Actor.

Optimize user interaction (basic)

  • Provide a message in the page Alert when values cannot be processed and other relevant information that help users to understand what they could/should do next and what is going on
  • Consider using a ButtonConfirm instead of a simple Button when a user confirmation makes sense before the action is performed
  • Disable buttons / widgets when they have no functionality / cannot be used

Optimize user interaction (advanced)

  • Provide a ProgressBar that is activated for any process that takes some time until the page displays the result (TODO: Provide ProgressBarSimple that automatically displays/hides itself and shows time-based progress)
  • Optimize widget polling: Do not poll when no values can be expected, but perform polling when updated values might be available and would help the user

FlexIcons (not fully available yet, to be completed)

To load an icon fron the rundir you have to define the storage location. Usually this is the bundle storage of a central data management bundle of your application where also users might be able to upload additional icons for the categories using icons in your appliation. You should attach the icon to a category (e.g. a resource type) by which it can be found later on. The category is given as a String here, so in principle this is very flexible:

  PictureFileSetter.setPicture("LegalEntity", ResourceUtils.getValidResourceName("Max_Mustermann"),
    Paths.get("icons", "MM_icon.svg.png"), null, FrameworkUtil.getBundle(MyBundleApp.class),
   "destinationBundle", "", appMan);

You can access the icon later on like this

TODO (requires implementation of org.smartrplace.store.picwriter.IconById)

Debugging

see Concepts of the Widget Framework, Section Debugging.

Tags:
Created by David Nestle on 2017/02/07 14:53