Skip to content

Commit

Permalink
now not applying :hover styles on touch devices by default
Browse files Browse the repository at this point in the history 
If you are targeting touch enabled devices (or a dynamic device such as
Generic/AnyPhone and run the app on a touch enabled device), then J2ME
Polish will use the :hover style when no :pressed style is defined.
If you don't want this behavior and only use :pressed when it is
actually used and want to apply :hover styles on touch enabled devices
as well, then you set the preprocessing variable
polish.Item.UseHoverStylesForTouchSystems to true:

<variable name="polish.Item.UseHoverStylesForTouchSystems" value="true"
/>
  • Loading branch information
Robert Virkus committed Aug 26, 2013
1 parent 0a9d7d8 commit 0839435
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 31 deletions.
28 changes: 23 additions & 5 deletions enough-polish-j2me/source/src/de/enough/polish/ui/Item.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
import de.enough.polish.util.ArrayList;
import de.enough.polish.util.Arrays;
import de.enough.polish.util.DeviceControl;
import de.enough.polish.util.DeviceInfo;
import de.enough.polish.util.DrawUtil;
import de.enough.polish.util.HashMap;
import de.enough.polish.util.RgbImage;
Expand Down Expand Up @@ -809,7 +810,11 @@ public abstract class Item implements UiElement, Animatable
//#endif
protected Style focusedStyle;
protected boolean isPressed;
//#if polish.css.pressed-style
//#if (polish.isDynamic && !polish.Item.UseHoverStylesForTouchSystems) || (!polish.isDynamic && polish.hasPointerEvents && !polish.Item.UseHoverStylesForTouchSystems)
//#define tmp.dontUseHoverForTouchSystems
//#endif
//#if polish.css.pressed-style || tmp.dontUseHoverForTouchSystems
//#define tmp.pressedStyle
private Style normalStyle;
private Style pressedStyle;
//#endif
Expand Down Expand Up @@ -1302,6 +1307,12 @@ public void setStyle( Style style ) {
if (pressed != null) {
this.pressedStyle = pressed;
}
//#if tmp.dontUseHoverForTouchSystems
if (this.pressedStyle == null && DeviceInfo.hasPointerEvents())
{
this.pressedStyle = this.focusedStyle;
}
//#endif
//#endif

//#if polish.css.complete-background
Expand Down Expand Up @@ -4454,7 +4465,7 @@ public boolean notifyItemPressedStart() {
System.out.println("notifyItemPressedStart for " + this);
this.isPressed = true;
boolean handled = false;
//#if polish.css.pressed-style
//#if tmp.pressedStyle
//System.out.println("notifyItemPressedStart for " + this + ", pressedStyle=" + (this.pressedStyle != null ? this.pressedStyle.name : "<null>") );
if (this.pressedStyle != null && this.style != this.pressedStyle) {
this.normalStyle = this.style;
Expand Down Expand Up @@ -4494,7 +4505,7 @@ public void notifyItemPressedEnd() {
//#debug
System.out.println("notifyItemPressedEnd for " + this + ", normalStyle=" + (this.normalStyle == null ? "<none>" : this.normalStyle.name ) + ", current=" + (this.style == null ? "<none>" : this.style.name) );
this.isPressed = false;
//#if polish.css.pressed-style
//#if tmp.pressedStyle
Style previousStyle = this.normalStyle;
if (previousStyle != null && this.style == this.pressedStyle) {
//#ifdef polish.css.view-type
Expand Down Expand Up @@ -5115,6 +5126,13 @@ public Style getFocusedStyle() {
//#endif
}
Style focStyle;
//#if tmp.dontUseHoverForTouchSystems
if (DeviceInfo.hasPointerEvents())
{
focStyle = this.style;
}
else
//#endif
if (this.focusedStyle != null) {
focStyle = this.focusedStyle;
} else if (this.parent != null) {
Expand Down Expand Up @@ -5177,7 +5195,7 @@ protected Style focus( Style newStyle, int direction ) {
this.isJustFocused = true;
setStyle( newStyle );

//#if polish.css.pressed-style
//#if tmp.pressedStyle
if (this.isPressed) {
this.normalStyle = newStyle;
}
Expand Down Expand Up @@ -6391,7 +6409,7 @@ public void onScreenSizeChanged( int screenWidth, int screenHeight ) {
System.out.println("onScreenSizeChanged(): setting new style " + newStyle.name + " for " + this);
oldStyle = this.style;
setStyle( newStyle );
//#if polish.css.pressed-style
//#if tmp.pressedStyle
if (this.isPressed) {
this.normalStyle = newStyle;
}
Expand Down
4 changes: 2 additions & 2 deletions enough-polish-website/site/source/docs/gui-item-.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<%define inDocumentationSection.gui %>
<%set title = J2ME Polish: Item %>
<%set basedir = ../ %>
<%include start.txt %>
<%include start_syntax.txt %>

<h1 id="top">Item</h1>
<ul class="relatedtechnologies">
Expand All @@ -25,7 +25,7 @@ <h2 id="Item-Design">Design</h2>

<h2 id="Item-Configuration">Configuration</h2>
<p>
<pre>
<pre class="brush: xml">
&lt;variable name=&quot;&quot; value=&quot;&quot; /&gt;
</pre>
</p>
Expand Down
34 changes: 24 additions & 10 deletions enough-polish-website/site/source/docs/gui-screenelement-focused.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<%define inDocumentationSection.gui %>
<%set title = J2ME Polish: Designing the Focused Element %>
<%set basedir = ../ %>
<%include start.txt %>
<%include start_syntax.txt %>

<h1 id="top">Designing the Focused Element</h1>
<ul class="relatedtechnologies">
Expand All @@ -28,7 +28,7 @@ <h1 id="top">Designing the Focused Element</h1>
In the above screenshot we just exchange the orange border against a black border for the currently focused mail box by using
the <code>mailbox:hover</code> CSS style:
</p>
<pre>
<pre class="brush: css">
colors {
focusedFontColor: #111;
focusedBorderColor: #444;
Expand All @@ -54,7 +54,7 @@ <h1 id="top">Designing the Focused Element</h1>
layout: expand | left;
}

<b>.mailBox:hover</b> {
.mailBox:hover {
background-border-color: focusedBorderColor;
}
</pre>
Expand Down Expand Up @@ -83,16 +83,17 @@ <h2 id="tipsandtricks">Tips and Tricks</h2>
<p>The following example shows the above example in which we increase the border width in the focused state. We accordingly adjust
the margins, so that there is no wobbling when the user moves to the next item:
</p>
<pre>
<pre class="brush: css">
.mailBox {
<b>margin: 1;</b>
padding: 2;
padding-left: 9;
padding-right: 9;
margin: 1px;
padding: 2px;
padding-left: 9px;
padding-right: 9px;
background {
type: round-rect;
color: mailBoxBgColor;
border-color: mailBoxBorderColor;
border-width: 1px;
}
font {
style: bold;
Expand All @@ -103,8 +104,8 @@ <h2 id="tipsandtricks">Tips and Tricks</h2>
}

.mailBox:hover {
<b>margin: 0;
background-border-width: 2;</b>
margin: 0px;
background-border-width: 2px;
background-border-color: focusedBorderColor;
}
</pre>
Expand All @@ -123,6 +124,19 @@ <h2 id="Programming">Programming</h2>
<br />You can focus an item and showing the corresponding screen at the same time by calling <code>Display.setCurrentItem( Item item )</code>.
</p>

<h2 id="touch">Default Behavior on Touch Handsets</h2>
<p>
If you are targeting touch enabled devices
(or a dynamic device such as <i>Generic/AnyPhone</i> and run the app on a touch enabled device), then J2ME Polish will use the <code>:hover</code> style
when no <code>:pressed</code> style is defined.<br />
If you don't want this behavior and only use <code>:pressed</code> when it is actually used and
want to apply <code>:hover</code> styles on touch enabled devices as well, then you set the
preprocessing variable <code>polish.Item.UseHoverStylesForTouchSystems</code> to <code>true</code>:
</p>
<pre class="brush: xml">
&lt;variable name=&quot;polish.Item.UseHoverStylesForTouchSystems&quot; value=&quot;true&quot; /&gt;
</pre>

<h2 id="JavaDoc">JavaDoc</h2>
<ul>
<li><a href="<%= javadocdir %>/javadoc/j2me/de/enough/polish/ui/UiAccess.html">UiAccess</a></li>
Expand Down
25 changes: 18 additions & 7 deletions enough-polish-website/site/source/docs/gui-screenelement-pressed.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<%define inDocumentationSection.gui %>
<%set title = J2ME Polish: Designing the Pressed Element %>
<%set basedir = ../ %>
<%include start_flash.txt %>
<%include start_syntax.txt %>

<h1 id="top">Designing the Pressed Element</h1>
<ul class="relatedtechnologies">
Expand All @@ -17,7 +17,7 @@ <h1 id="top">Designing the Pressed Element</h1>
In J2ME Polish you can give your user a visual feedback by defining a
<code>[style-name]:pressed</code> style:
</p>
<pre>
<pre class="brush: css">
menuItem {
padding: 2;
font-color: black;
Expand All @@ -28,10 +28,21 @@ <h1 id="top">Designing the Pressed Element</h1>
font-color: white;
}

<b>menuItem:pressed {
menuItem:pressed {
background-color: #9f9;
font-color: #222;
}</b>
}
</pre>
<p>
If you are targeting touch enabled devices
(or a dynamic device such as <i>Generic/AnyPhone</i> and run the app on a touch enabled device), then J2ME Polish will use the <code>:hover</code> style
when no <code>:pressed</code> style is defined.<br />
If you don't want this behavior and only use <code>:pressed</code> when it is actually used and
want to apply <code>:hover</code> styles on touch enabled devices as well, then you set the
preprocessing variable <code>polish.Item.UseHoverStylesForTouchSystems</code> to <code>true</code>:
</p>
<pre class="brush: xml">
&lt;variable name=&quot;polish.Item.UseHoverStylesForTouchSystems&quot; value=&quot;true&quot; /&gt;
</pre>
<p>You are not limited in the design, typically you will use a different background or a different border
for the pressed state of an item, but depending on the item you can also exchange icon-images, font-styles,
Expand Down Expand Up @@ -72,7 +83,7 @@ <h1 id="top">Designing the Pressed Element</h1>
</embed>
</object>
</p>
<pre>
<pre class="brush: css">
.mainCommand {
padding: 0;
padding-vertical: 0;
Expand All @@ -88,9 +99,9 @@ <h1 id="top">Designing the Pressed Element</h1>
text-effect: shadow;
}

<b>.mainCommand:pressed {
.mainCommand:pressed {
view-type: particle;
}</b>
}
</pre>

<%include end.txt %>
21 changes: 14 additions & 7 deletions enough-polish-website/site/source/docs/gui-touchsupport.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<%define inDocumentationSection.css %>
<%set title = J2ME Polish: Documentation: Touch Support %>
<%set basedir = ../ %>
<%include start.txt %>
<%include start_syntax.txt %>

<h1 id="top">Touch Support</h1>

Expand Down Expand Up @@ -203,12 +203,19 @@ <h2 id="virtualkeyboard">Touch Support and Focus</h2>
With this preprocessing variable set to true, the focus remains on the last selected item when a scrollable area is dragged or scrolled.
</p>

<h2 id="virtualkeyboard">Virtual keyboard</h2>
<p>
When using TextFields in your Screens you can also use an <a href="gui-item-textfield.html#textfield-virtualkeyboard">virtual keyboard</a> to enter text.
This allows you to edit text inline instead of opening up a native editor which might require more clicks or which might confuse the user. Please
have a look at the <a href="gui-item-textfield.html#textfield-virtualkeyboard">virtual keyboard documentation</a>.
</p>
<h2 id="focused">:hover and :pressed on devices</h2>
<p>
If you are targeting touch enabled devices
(or a dynamic device such as <i>Generic/AnyPhone</i> and run the app on a touch enabled device), then J2ME Polish will use the <code>:hover</code> style
when no <code>:pressed</code> style is defined.<br />
If you don't want this behavior and only use <code>:pressed</code> when it is actually used and
want to apply <code>:hover</code> styles on touch enabled devices as well, then you set the
preprocessing variable <code>polish.Item.UseHoverStylesForTouchSystems</code> to <code>true</code>:
</p>
<pre class="brush: xml">
&lt;variable name=&quot;polish.Item.UseHoverStylesForTouchSystems&quot; value=&quot;true&quot; /&gt;
</pre>


<h2 id="sample">Sample Application</h2>
<p>
Expand Down

0 comments on commit 0839435

Please sign in to comment.