Skip to content

Commit 0839435

Browse files
author
Robert Virkus
committed
now not applying :hover styles on touch devices by default
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" />
1 parent 0a9d7d8 commit 0839435

File tree

5 files changed

+81
-31
lines changed

5 files changed

+81
-31
lines changed

enough-polish-j2me/source/src/de/enough/polish/ui/Item.java

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
import de.enough.polish.util.ArrayList;
5151
import de.enough.polish.util.Arrays;
5252
import de.enough.polish.util.DeviceControl;
53+
import de.enough.polish.util.DeviceInfo;
5354
import de.enough.polish.util.DrawUtil;
5455
import de.enough.polish.util.HashMap;
5556
import de.enough.polish.util.RgbImage;
@@ -809,7 +810,11 @@ public abstract class Item implements UiElement, Animatable
809810
//#endif
810811
protected Style focusedStyle;
811812
protected boolean isPressed;
812-
//#if polish.css.pressed-style
813+
//#if (polish.isDynamic && !polish.Item.UseHoverStylesForTouchSystems) || (!polish.isDynamic && polish.hasPointerEvents && !polish.Item.UseHoverStylesForTouchSystems)
814+
//#define tmp.dontUseHoverForTouchSystems
815+
//#endif
816+
//#if polish.css.pressed-style || tmp.dontUseHoverForTouchSystems
817+
//#define tmp.pressedStyle
813818
private Style normalStyle;
814819
private Style pressedStyle;
815820
//#endif
@@ -1302,6 +1307,12 @@ public void setStyle( Style style ) {
13021307
if (pressed != null) {
13031308
this.pressedStyle = pressed;
13041309
}
1310+
//#if tmp.dontUseHoverForTouchSystems
1311+
if (this.pressedStyle == null && DeviceInfo.hasPointerEvents())
1312+
{
1313+
this.pressedStyle = this.focusedStyle;
1314+
}
1315+
//#endif
13051316
//#endif
13061317

13071318
//#if polish.css.complete-background
@@ -4454,7 +4465,7 @@ public boolean notifyItemPressedStart() {
44544465
System.out.println("notifyItemPressedStart for " + this);
44554466
this.isPressed = true;
44564467
boolean handled = false;
4457-
//#if polish.css.pressed-style
4468+
//#if tmp.pressedStyle
44584469
//System.out.println("notifyItemPressedStart for " + this + ", pressedStyle=" + (this.pressedStyle != null ? this.pressedStyle.name : "<null>") );
44594470
if (this.pressedStyle != null && this.style != this.pressedStyle) {
44604471
this.normalStyle = this.style;
@@ -4494,7 +4505,7 @@ public void notifyItemPressedEnd() {
44944505
//#debug
44954506
System.out.println("notifyItemPressedEnd for " + this + ", normalStyle=" + (this.normalStyle == null ? "<none>" : this.normalStyle.name ) + ", current=" + (this.style == null ? "<none>" : this.style.name) );
44964507
this.isPressed = false;
4497-
//#if polish.css.pressed-style
4508+
//#if tmp.pressedStyle
44984509
Style previousStyle = this.normalStyle;
44994510
if (previousStyle != null && this.style == this.pressedStyle) {
45004511
//#ifdef polish.css.view-type
@@ -5115,6 +5126,13 @@ public Style getFocusedStyle() {
51155126
//#endif
51165127
}
51175128
Style focStyle;
5129+
//#if tmp.dontUseHoverForTouchSystems
5130+
if (DeviceInfo.hasPointerEvents())
5131+
{
5132+
focStyle = this.style;
5133+
}
5134+
else
5135+
//#endif
51185136
if (this.focusedStyle != null) {
51195137
focStyle = this.focusedStyle;
51205138
} else if (this.parent != null) {
@@ -5177,7 +5195,7 @@ protected Style focus( Style newStyle, int direction ) {
51775195
this.isJustFocused = true;
51785196
setStyle( newStyle );
51795197

5180-
//#if polish.css.pressed-style
5198+
//#if tmp.pressedStyle
51815199
if (this.isPressed) {
51825200
this.normalStyle = newStyle;
51835201
}
@@ -6391,7 +6409,7 @@ public void onScreenSizeChanged( int screenWidth, int screenHeight ) {
63916409
System.out.println("onScreenSizeChanged(): setting new style " + newStyle.name + " for " + this);
63926410
oldStyle = this.style;
63936411
setStyle( newStyle );
6394-
//#if polish.css.pressed-style
6412+
//#if tmp.pressedStyle
63956413
if (this.isPressed) {
63966414
this.normalStyle = newStyle;
63976415
}

enough-polish-website/site/source/docs/gui-item-.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<%define inDocumentationSection.gui %>
33
<%set title = J2ME Polish: Item %>
44
<%set basedir = ../ %>
5-
<%include start.txt %>
5+
<%include start_syntax.txt %>
66

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

2626
<h2 id="Item-Configuration">Configuration</h2>
2727
<p>
28-
<pre>
28+
<pre class="brush: xml">
2929
&lt;variable name=&quot;&quot; value=&quot;&quot; /&gt;
3030
</pre>
3131
</p>

enough-polish-website/site/source/docs/gui-screenelement-focused.html

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<%define inDocumentationSection.gui %>
33
<%set title = J2ME Polish: Designing the Focused Element %>
44
<%set basedir = ../ %>
5-
<%include start.txt %>
5+
<%include start_syntax.txt %>
66

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

57-
<b>.mailBox:hover</b> {
57+
.mailBox:hover {
5858
background-border-color: focusedBorderColor;
5959
}
6060
</pre>
@@ -83,16 +83,17 @@ <h2 id="tipsandtricks">Tips and Tricks</h2>
8383
<p>The following example shows the above example in which we increase the border width in the focused state. We accordingly adjust
8484
the margins, so that there is no wobbling when the user moves to the next item:
8585
</p>
86-
<pre>
86+
<pre class="brush: css">
8787
.mailBox {
88-
<b>margin: 1;</b>
89-
padding: 2;
90-
padding-left: 9;
91-
padding-right: 9;
88+
margin: 1px;
89+
padding: 2px;
90+
padding-left: 9px;
91+
padding-right: 9px;
9292
background {
9393
type: round-rect;
9494
color: mailBoxBgColor;
9595
border-color: mailBoxBorderColor;
96+
border-width: 1px;
9697
}
9798
font {
9899
style: bold;
@@ -103,8 +104,8 @@ <h2 id="tipsandtricks">Tips and Tricks</h2>
103104
}
104105

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

127+
<h2 id="touch">Default Behavior on Touch Handsets</h2>
128+
<p>
129+
If you are targeting touch enabled devices
130+
(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
131+
when no <code>:pressed</code> style is defined.<br />
132+
If you don't want this behavior and only use <code>:pressed</code> when it is actually used and
133+
want to apply <code>:hover</code> styles on touch enabled devices as well, then you set the
134+
preprocessing variable <code>polish.Item.UseHoverStylesForTouchSystems</code> to <code>true</code>:
135+
</p>
136+
<pre class="brush: xml">
137+
&lt;variable name=&quot;polish.Item.UseHoverStylesForTouchSystems&quot; value=&quot;true&quot; /&gt;
138+
</pre>
139+
126140
<h2 id="JavaDoc">JavaDoc</h2>
127141
<ul>
128142
<li><a href="<%= javadocdir %>/javadoc/j2me/de/enough/polish/ui/UiAccess.html">UiAccess</a></li>

enough-polish-website/site/source/docs/gui-screenelement-pressed.html

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<%define inDocumentationSection.gui %>
33
<%set title = J2ME Polish: Designing the Pressed Element %>
44
<%set basedir = ../ %>
5-
<%include start_flash.txt %>
5+
<%include start_syntax.txt %>
66

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

31-
<b>menuItem:pressed {
31+
menuItem:pressed {
3232
background-color: #9f9;
3333
font-color: #222;
34-
}</b>
34+
}
35+
</pre>
36+
<p>
37+
If you are targeting touch enabled devices
38+
(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
39+
when no <code>:pressed</code> style is defined.<br />
40+
If you don't want this behavior and only use <code>:pressed</code> when it is actually used and
41+
want to apply <code>:hover</code> styles on touch enabled devices as well, then you set the
42+
preprocessing variable <code>polish.Item.UseHoverStylesForTouchSystems</code> to <code>true</code>:
43+
</p>
44+
<pre class="brush: xml">
45+
&lt;variable name=&quot;polish.Item.UseHoverStylesForTouchSystems&quot; value=&quot;true&quot; /&gt;
3546
</pre>
3647
<p>You are not limited in the design, typically you will use a different background or a different border
3748
for the pressed state of an item, but depending on the item you can also exchange icon-images, font-styles,
@@ -72,7 +83,7 @@ <h1 id="top">Designing the Pressed Element</h1>
7283
</embed>
7384
</object>
7485
</p>
75-
<pre>
86+
<pre class="brush: css">
7687
.mainCommand {
7788
padding: 0;
7889
padding-vertical: 0;
@@ -88,9 +99,9 @@ <h1 id="top">Designing the Pressed Element</h1>
8899
text-effect: shadow;
89100
}
90101

91-
<b>.mainCommand:pressed {
102+
.mainCommand:pressed {
92103
view-type: particle;
93-
}</b>
104+
}
94105
</pre>
95106

96107
<%include end.txt %>

enough-polish-website/site/source/docs/gui-touchsupport.html

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<%define inDocumentationSection.css %>
44
<%set title = J2ME Polish: Documentation: Touch Support %>
55
<%set basedir = ../ %>
6-
<%include start.txt %>
6+
<%include start_syntax.txt %>
77

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

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

206-
<h2 id="virtualkeyboard">Virtual keyboard</h2>
207-
<p>
208-
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.
209-
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
210-
have a look at the <a href="gui-item-textfield.html#textfield-virtualkeyboard">virtual keyboard documentation</a>.
211-
</p>
206+
<h2 id="focused">:hover and :pressed on devices</h2>
207+
<p>
208+
If you are targeting touch enabled devices
209+
(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
210+
when no <code>:pressed</code> style is defined.<br />
211+
If you don't want this behavior and only use <code>:pressed</code> when it is actually used and
212+
want to apply <code>:hover</code> styles on touch enabled devices as well, then you set the
213+
preprocessing variable <code>polish.Item.UseHoverStylesForTouchSystems</code> to <code>true</code>:
214+
</p>
215+
<pre class="brush: xml">
216+
&lt;variable name=&quot;polish.Item.UseHoverStylesForTouchSystems&quot; value=&quot;true&quot; /&gt;
217+
</pre>
218+
212219

213220
<h2 id="sample">Sample Application</h2>
214221
<p>

0 commit comments

Comments
 (0)