From 0839435e64c08f48009aa7272bb8b61bb0ce0a21 Mon Sep 17 00:00:00 2001 From: Robert Virkus Date: Mon, 26 Aug 2013 23:01:41 +0200 Subject: [PATCH] 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: --- .../source/src/de/enough/polish/ui/Item.java | 28 ++++++++++++--- .../site/source/docs/gui-item-.html | 4 +-- .../docs/gui-screenelement-focused.html | 34 +++++++++++++------ .../docs/gui-screenelement-pressed.html | 25 ++++++++++---- .../site/source/docs/gui-touchsupport.html | 21 ++++++++---- 5 files changed, 81 insertions(+), 31 deletions(-) diff --git a/enough-polish-j2me/source/src/de/enough/polish/ui/Item.java b/enough-polish-j2me/source/src/de/enough/polish/ui/Item.java index d3a7aa0..a645ec0 100644 --- a/enough-polish-j2me/source/src/de/enough/polish/ui/Item.java +++ b/enough-polish-j2me/source/src/de/enough/polish/ui/Item.java @@ -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; @@ -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 @@ -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 @@ -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 : "") ); if (this.pressedStyle != null && this.style != this.pressedStyle) { this.normalStyle = this.style; @@ -4494,7 +4505,7 @@ public void notifyItemPressedEnd() { //#debug System.out.println("notifyItemPressedEnd for " + this + ", normalStyle=" + (this.normalStyle == null ? "" : this.normalStyle.name ) + ", current=" + (this.style == null ? "" : 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 @@ -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) { @@ -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; } @@ -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; } diff --git a/enough-polish-website/site/source/docs/gui-item-.html b/enough-polish-website/site/source/docs/gui-item-.html index cd1a7ae..fe89911 100644 --- a/enough-polish-website/site/source/docs/gui-item-.html +++ b/enough-polish-website/site/source/docs/gui-item-.html @@ -2,7 +2,7 @@ <%define inDocumentationSection.gui %> <%set title = J2ME Polish: Item %> <%set basedir = ../ %> -<%include start.txt %> +<%include start_syntax.txt %>

Item

    @@ -25,7 +25,7 @@

    Design

    Configuration

    -

    +
     <variable name="" value="" />
 
    
 	
    
diff --git a/enough-polish-website/site/source/docs/gui-screenelement-focused.html b/enough-polish-website/site/source/docs/gui-screenelement-focused.html
index a1e44b7..53b1ecd 100644
--- a/enough-polish-website/site/source/docs/gui-screenelement-focused.html
+++ b/enough-polish-website/site/source/docs/gui-screenelement-focused.html
@@ -2,7 +2,7 @@
 <%define inDocumentationSection.gui %>
 <%set title = J2ME Polish: Designing the Focused Element %>
 <%set basedir = ../ %>
-<%include start.txt %>
+<%include start_syntax.txt %>
 
 	
    Designing the Focused Element
    
 	
      
@@ -28,7 +28,7 @@ 
      Designing the Focused Element
      
 	In the above screenshot we just exchange the orange border against a black border for the currently focused mail box by using
 	the mailbox:hover CSS style:
 	
      
-
      +
       colors {
 	focusedFontColor: #111;
 	focusedBorderColor: #444;
@@ -54,7 +54,7 @@ 
      Designing the Focused Element
      
 	layout: expand | left;
 }
 
-.mailBox:hover {
+.mailBox:hover {
 	background-border-color: focusedBorderColor;
 }
 
      
@@ -83,16 +83,17 @@ 
      Tips and Tricks
      
 	
      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:
 	
      
-
      +
       .mailBox {
-	margin: 1;
-	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;
@@ -103,8 +104,8 @@ 
      Tips and Tricks
      
 }
 
 .mailBox:hover {
-	margin: 0;
-	background-border-width: 2;
+	margin: 0px;
+	background-border-width: 2px;
 	background-border-color: focusedBorderColor;
 }
 
      
@@ -123,6 +124,19 @@ 
      Programming
      
 	
      You can focus an item and showing the corresponding screen at the same time by calling Display.setCurrentItem( Item item ).
 	
      
 	
+	
      Default Behavior on Touch Handsets
      
+	
      
+	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" />
+	
      
+	
 	
      JavaDoc
      
 	
        
 		
      • UiAccess
        • 
diff --git a/enough-polish-website/site/source/docs/gui-screenelement-pressed.html b/enough-polish-website/site/source/docs/gui-screenelement-pressed.html
index 8812098..2556c43 100644
--- a/enough-polish-website/site/source/docs/gui-screenelement-pressed.html
+++ b/enough-polish-website/site/source/docs/gui-screenelement-pressed.html
@@ -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 %>
 
 	
        Designing the Pressed Element
        
 	
          
@@ -17,7 +17,7 @@ 
          Designing the Pressed Element
          
 	In J2ME Polish you can give your user a visual feedback by defining a 
 	[style-name]:pressed style:
 	
          
-
          +
           menuItem {
 	padding: 2;
 	font-color: black;
@@ -28,10 +28,21 @@ 
          Designing the Pressed Element
          
 	font-color: white;
 }
 
-menuItem:pressed {
+menuItem:pressed {
 	background-color: #9f9;
 	font-color: #222;
-}
+}
+
          
+
          
+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" />
 
          
 	
          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, 
@@ -72,7 +83,7 @@ 
          Designing the Pressed Element
          
         
 	
 	
          
-
          +
           .mainCommand {
 	padding: 0;
 	padding-vertical: 0;
@@ -88,9 +99,9 @@ 
          Designing the Pressed Element
          
 	text-effect: shadow;
 }
 
-.mainCommand:pressed {
+.mainCommand:pressed {
 	view-type: particle;
-}
+}
 
          
 
 <%include end.txt %>
diff --git a/enough-polish-website/site/source/docs/gui-touchsupport.html b/enough-polish-website/site/source/docs/gui-touchsupport.html
index 633f4a6..6349e23 100644
--- a/enough-polish-website/site/source/docs/gui-touchsupport.html
+++ b/enough-polish-website/site/source/docs/gui-touchsupport.html
@@ -3,7 +3,7 @@
 <%define inDocumentationSection.css %>
 <%set title = J2ME Polish: Documentation: Touch Support %>
 <%set basedir = ../ %>
-<%include start.txt %>
+<%include start_syntax.txt %>
 	
 	
          Touch Support
          
 	
@@ -203,12 +203,19 @@ 
          Touch Support and Focus
          
 	With this preprocessing variable set to true, the focus remains on the last selected item when a scrollable area is dragged or scrolled.
 	
          
 	
-	
          Virtual keyboard
          
-	
          
-	When using TextFields in your Screens you can also use an virtual keyboard 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 virtual keyboard documentation.
-	
          
+	
          :hover and :pressed on devices
          
+	
          
+	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" />
+	
          
+	
 	
 	
          Sample Application