Tag: Selectors

Customization of selectors in Java

Customization of selectors in Java

When iizi doesn’t provide a predefined function that is suitable, you can write Java code to return a boolean.

To do so, create a class implementing the interface com.iizix.api.ISelectorExpression. If you click on the editor link create a new Java class, a wizard will help you to create the class.

Example expression:

{ Java: "myapp.MySelector" }

Sample of such a Java Expression:

From the envProps, you can reach mostly everything. These environment properties come from the end-user device. You can also grab an instance of the AppSessionGyroor ClientSessionGyroas shown above to access e.g. client or application states for more advanced expressions

Using Selectors

Using Selectors

Perhaps the most common Selector is the device match, Dev, used to match a feature belonging to the end-user device. The available device properties are divided into the following feature groups with the following prefixes: Capabilities cap, Orientation orient, Size size, Type type and Operating System os. A selector expression with Dev is used to provide a UI design that matches a device, a specific device capability, device type or device operating system.

There are two ways to match environment variables using either the Wild Card WC, or RegExp to match an environment variable in a regular expression. Selector expressions using an environment variable can be used to find progressive devices such as wearables and WebTV.

Further customization is possible through selector expressions using the Java keyword that allow you to direct your application flow through a custom java class designed to handle advanced or unknown devices. The Selector editor will create a Java class for you or guide you to connect an existing class.

Anatomy of a Selector expression

Anatomy of a Selector expression

The Selector is made up of one or more function tags written inside curly brackets { } that begin with one of the six keywords: Dev, Lang, WC, RegExp, Java, and Sel, followed by a colon. Each keyword enables you to make different types of matches; it is possible to match devices, device capabilities, environment variables, language, and changes in geographical locations. A Selector may also refer to another selector expression that has been defined in the same or another Module project.

{ Dev: "device" } Matches a device type, OS and/or size.
{ Lang: "languageCode" } Matches a language.
{ WC: environmentVariable:  "Wild*Card?String" } Matches an environment variable using wild cards * ? ^ characters.
{ RegExp: environmentVariable:  "RegularExpression" } Matches an environment variable in a Regular Expression.
{ Java: "javaClassName" } Executes a Java class implementing the interface com.iizix.api.ISelectorExpression.
{ Sel: "selectorReference" }  Used to get the result of another selector (circular references not allowed).

The predefined functions are written inside curly brackets { }. To edit a selection of e.g. a device match, double-click on the expression. The selection dialog box will then be shown.

If you place the mouse over an expression, a tool tip will be displayed that displays a summary of the expression and the match value of the last device that accessed the internal iizi server. If no device accessed it, the values will be matched against the Eclipse-internal browser, e.g. Internet Explorer for Windows.

[java]{Dev: “orient-portrait”} && {Dev: “dev-isSmartphone”}[/java]

Example of a selector expression with function tags and boolean operators.

The second part of the tag is a selector property within single or double quotes. These bracketed function tags are joined together by Boolean operators to create a boolean selector expression called an iizi Selector Expression.

A note on Responsive design

A note on Responsive design

Finding the best UI experience on mobile and desktop, in both portrait and landscape and across all mobile devices is an art. All Layout Managers offer ways to achieved responsive design. The iiziGo design workbench offers Responsive horizontal and Responsive vertical properties of components when placed in the Absolute Layout. This feature allows a component to be assigned a different size or position when the device orientation is changed.

An example of layout properties for a component in Absolute Layout

With a Border Layout, you must assign components a region property of value: top, center, bottom or left and right. These regions resize in relation to one another when device orientation is changed. Responsive design for mobile devices can also be achieved by working with iizi selectors. Selectors can be set on the Phone and Tablet packages in your easy project, as well as for portrait and landscape for any given Panel, by creating and assigning selectors to portrait and landscape packages. For a full description of how to use selectors, see section Selectors of this chapter.

Social media & sharing icons powered by UltimatelySocial

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.