### Eclipse Workspace Patch 1.0
#P fluid-engage-kettle
Index: src/main/webapp/services/codeEntry/js/codeEntryService.js
===================================================================
--- src/main/webapp/services/codeEntry/js/codeEntryService.js	(revision 9652)
+++ src/main/webapp/services/codeEntry/js/codeEntryService.js	(working copy)
@@ -121,15 +121,31 @@
         
         var handler = fluid.engage.mountRenderHandler(renderHandlerConfig);
         
+        // TODO: find a better way to create working URLs
+        var rewriter = renderHandlerConfig.baseOptions.renderOptions.urlRewriter;
+        
         handler.registerProducer("codeEntry", function (context, env) {
             var params = context.urlState.params;
-            var strings = fluid.kettle.getBundle(renderHandlerConfig, params);                
+            var strings = fluid.kettle.getBundle(renderHandlerConfig, params);
             var options = {
                 codeCheckUrlTemplate: "../artifacts/codeEntry.json" + "?" + $.param({
                     db: params.db,
                     lang: params.lang,
                     code: "%objectCode"
-                })
+                }),
+                blankImage: rewriter("../../../../fluid-engage-core/components/codeEntry/images/blank.png"),
+                digitImages: [
+                    rewriter("../../../../fluid-engage-core/components/codeEntry/images/0.png"),
+                    rewriter("../../../../fluid-engage-core/components/codeEntry/images/1.png"),
+                    rewriter("../../../../fluid-engage-core/components/codeEntry/images/2.png"),
+                    rewriter("../../../../fluid-engage-core/components/codeEntry/images/3.png"),
+                    rewriter("../../../../fluid-engage-core/components/codeEntry/images/4.png"),
+                    rewriter("../../../../fluid-engage-core/components/codeEntry/images/5.png"),
+                    rewriter("../../../../fluid-engage-core/components/codeEntry/images/6.png"),
+                    rewriter("../../../../fluid-engage-core/components/codeEntry/images/7.png"),
+                    rewriter("../../../../fluid-engage-core/components/codeEntry/images/8.png"),
+                    rewriter("../../../../fluid-engage-core/components/codeEntry/images/9.png")                              
+                ]
             };
             
             if (strings) {
#P fluid-engage-core
Index: components/codeEntry/messages/messages_fr.json
===================================================================
--- components/codeEntry/messages/messages_fr.json	(revision 9652)
+++ components/codeEntry/messages/messages_fr.json	(working copy)
@@ -4,5 +4,8 @@
    "instruction": "Entrez le code numérique affiché sur l'étiquette pour en apprendre plus sur cet objet.",
    "redirecting": "Ouverture de la page de l'objet",
    "invalidCode": "Numéro inconnu. Veuillez réessayer",
-   "deleteLabel": "Effacer"
+   "deleteLabel": "Effacer",
+   "firstDigitAlt: "First digit %digit",
+   "secondDigitAlt: "Second digit %digit",
+   "blank: "blank"
 }
\ No newline at end of file
Index: tests/component-tests/codeEntry/js/CodeEntryTests.js
===================================================================
--- tests/component-tests/codeEntry/js/CodeEntryTests.js	(revision 9656)
+++ tests/component-tests/codeEntry/js/CodeEntryTests.js	(working copy)
@@ -9,10 +9,7 @@
 https://source.fluidproject.org/svn/LICENSE.txt
 */
 
-/*global jQuery*/
-/*global fluid*/
-/*global jqUnit*/
-/*global expect*/
+/*global jQuery, fluid, jqUnit, expect, start, stop*/
 
 (function ($) {
     var tests = {};
@@ -34,10 +31,23 @@
                 ".flc-codeEntry");
         
         component = fluid.engage.codeEntry(".flc-codeEntry",
-            {getArtifactUrlFn: simulateCheck});
+            {getArtifactUrlFn: simulateCheck, digitImages: []});
     };
     
     tests = jqUnit.testCase("Code Entry Tests", setup);
+
+    /**
+     * Helper function to retrieve the alt text of the code entry fields.
+     * 
+     * @param digitField, the digit field number 0 or 1.
+     * @param digit, the digit
+     */
+    var getAltForDigit = function (digitField, digit) {
+        var template = digitField === 0 ? component.options.strings.firstDigitAlt : 
+            component.options.strings.secondDigitAlt;
+        
+        return fluid.stringTemplate(template, {digit: digit || digit === 0 ? digit : "blank"});
+    };
     
     var codeEntryTests = function () {
         tests.test("Component construction test", function () {
@@ -58,12 +68,12 @@
             $(buttons[0]).click();
             del.click();
             
-            jqUnit.assertEquals("Delete button working.", "", firstDigitField.text());
+            jqUnit.assertEquals("Delete button working.", getAltForDigit(0), firstDigitField.attr("alt"));
             
             for (var i = 0; i < buttons.length; i++) {
                 var buttonNumber = (i + 1) % 10;
                 $(buttons[i]).click();
-                jqUnit.assertEquals("Button number " + buttonNumber + " working.", buttonNumber + "", firstDigitField.text());
+                jqUnit.assertEquals("Button number " + buttonNumber + " working.", getAltForDigit(0, buttonNumber), firstDigitField.attr("alt"));
                 // Delete
                 del.click();
             }
@@ -77,42 +87,50 @@
             var headBlock = component.locate("headMessage");
             
             // First the two code fields are blank
-            jqUnit.assertEquals("First Digit blank.", "", firstDigitField.text());
-            jqUnit.assertEquals("Second digit blank.", "", secondDigitField.text());
+            jqUnit.assertEquals("First Digit blank.", getAltForDigit(0), firstDigitField.attr("alt"));
+            jqUnit.assertEquals("Second digit blank.", getAltForDigit(1), secondDigitField.attr("alt"));
             
             // We enter a digit
             component.enterDigit(3);
-            jqUnit.assertEquals("First digit is 3.", "3", firstDigitField.text());
-            jqUnit.assertEquals("Second digit blank.", "", secondDigitField.text());
+            jqUnit.assertEquals("First digit is 3.", getAltForDigit(0, 3), firstDigitField.attr("alt"));
+            jqUnit.assertEquals("Second digit blank.", getAltForDigit(1), secondDigitField.attr("alt"));
             
             // Then delete it
             component.deleteLastDigit();
-            jqUnit.assertEquals("First Digit blank.", "", firstDigitField.text());
-            jqUnit.assertEquals("Second digit blank.", "", secondDigitField.text());
-            
+            jqUnit.assertEquals("First Digit blank.", getAltForDigit(0), firstDigitField.attr("alt"));
+            jqUnit.assertEquals("Second digit blank.", getAltForDigit(1), secondDigitField.attr("alt"));
+
             // Enter two digits to make a invalid code - the code fields should
             // be blanked and an error message shown
             component.enterDigit(3);
             component.enterDigit(7);
-            jqUnit.assertEquals("First digit blank.", "", firstDigitField.text());
-            jqUnit.assertEquals("Second digit blank.", "", secondDigitField.text());
             jqUnit.assertEquals("Invalid code message shown.",
                     component.options.strings.invalidCode, headBlock.text());
             
-
-            // Enter one digit - the error message persists
-            component.enterDigit(2);
-            jqUnit.assertEquals("First digit is 2.", "2", firstDigitField.text());
-            jqUnit.assertEquals("Second digit blank.", "", secondDigitField.text());
-            jqUnit.assertEquals("Invalid code message shown.",
-                    component.options.strings.invalidCode, headBlock.text());
+            // Stop the execution of the test to allow for asynchronous events to happen 
+            stop();
             
-            // Enter second digit - the code fields are shown until redirection
-            // happens
-            component.enterDigit(0);
-            jqUnit.assertEquals("First digit is 2.", "2", firstDigitField.text());
-            jqUnit.assertEquals("Second digit is 0.", "0", secondDigitField.text());            
-            jqUnit.assertEquals("Redirecting message shown.", component.options.strings.redirecting, headBlock.text());
+            setTimeout(function () {            
+                
+                jqUnit.assertEquals("First digit blank.", getAltForDigit(0), firstDigitField.attr("alt"));
+                jqUnit.assertEquals("Second digit blank.", getAltForDigit(1), secondDigitField.attr("alt"));
+    
+                // Enter one digit - the error message persists
+                component.enterDigit(2);
+                jqUnit.assertEquals("First digit is 2.", getAltForDigit(0, 2), firstDigitField.attr("alt"));
+                jqUnit.assertEquals("Second digit blank.", getAltForDigit(1), secondDigitField.attr("alt"));
+                jqUnit.assertEquals("Invalid code message shown.",
+                        component.options.strings.invalidCode, headBlock.text());
+                
+                // Enter second digit - the code fields are shown until redirection
+                // happens
+                component.enterDigit(0);
+                jqUnit.assertEquals("First digit is 2.", getAltForDigit(0, 2), firstDigitField.attr("alt"));
+                jqUnit.assertEquals("Second digit is 0.", getAltForDigit(1, 0), secondDigitField.attr("alt"));            
+                jqUnit.assertEquals("Redirecting message shown.", component.options.strings.redirecting, headBlock.text());
+                
+                start();
+            }, component.options.redirectDelay);
         });
     };
     
Index: components/codeEntry/js/CodeEntryView.js
===================================================================
--- components/codeEntry/js/CodeEntryView.js	(revision 9652)
+++ components/codeEntry/js/CodeEntryView.js	(working copy)
@@ -18,14 +18,43 @@
 (function ($) {
 
     /**
+     * Sets the digit or blank image and the corresponding alt text.
+     * 
+     * @param {Object} that, the component.
+     * @param {Object} digit, the digit position 0 or 1.
+     * @param digitStr, the digit.
+     */
+    var updateDigitField = function (that, digit, digitStr) {
+        var element;
+        var template;
+        if (digit === 0) {
+            element = that.locate("firstDigitField");
+            template = that.options.strings.firstDigitAlt;
+        } else if (digit === 1) {
+            element = that.locate("secondDigitField");
+            template = that.options.strings.secondDigitAlt;
+        }
+
+        if (!digitStr && digitStr !== 0) {
+            element.attr("src", that.options.blankImage);
+            element.attr("alt", fluid.stringTemplate(template,
+                    {digit: that.options.strings.blank}));
+        } else {
+            element.attr("src", that.options.digitImages[digitStr]);
+            element.attr("alt", fluid.stringTemplate(template,
+                    {digit: digitStr}));
+        }
+    };
+    
+    /**
     * Clears the digit entry fields and allows input.
     * Also resets the code and atDigit values.
     * 
     * @param {Object} that, the component.
     */
     var reset = function (that) {
-        that.locate("firstDigitField").text("");
-        that.locate("secondDigitField").text("");
+        updateDigitField(that, 0);
+        updateDigitField(that, 1);
         that.code = "";
         that.atDigit = 0;
         that.deleteEnabled = true;
@@ -90,14 +119,6 @@
         return artifactLink;
     };
 
-    /**
-     * Return the current digit dom element - if no digit has been entered this
-     * is the first one, otherwise it is the second one.
-     */
-    var getCurrentDigitField = function (that) {
-        return that.atDigit === 0 ? that.locate("firstDigitField") : that.locate("secondDigitField");
-    };
-    
     var setupDelete = function (that, button) {
         var label = that.options.strings.deleteLabel;
         that.locate("delLabel").text(label);
@@ -151,7 +172,7 @@
         var that = fluid.initView("fluid.engage.codeEntry", container, options);
         
         that.enterDigit = function (digitStr) {
-            getCurrentDigitField(that).text(digitStr);
+            updateDigitField(that, that.atDigit, digitStr);
             that.code += digitStr;
             if (that.atDigit === 0) {                
                 that.atDigit++;
@@ -174,7 +195,7 @@
             if (that.atDigit === 1) {
                 that.atDigit--;
                 that.code = "";
-                getCurrentDigitField(that).text("");
+                updateDigitField(that, that.atDigit);
             }
         };
         
@@ -206,7 +227,10 @@
             instruction : "Enter code from the object's label to learn more about the object.",
             invalidCode : "Invalid code. Please try again",
             redirecting : "Opening artifact page.",
-            deleteLabel: "Delete"
+            deleteLabel: "Delete",
+            firstDigitAlt: "First digit %digit",
+            secondDigitAlt: "Second digit %digit",
+            blank: "blank"
         },
         codeCheckUrlTemplate: "",
         redirectDelay : 1000,
Index: tests/component-tests/codeEntry/html/CodeEntryView-test.html
===================================================================
--- tests/component-tests/codeEntry/html/CodeEntryView-test.html	(revision 9656)
+++ tests/component-tests/codeEntry/html/CodeEntryView-test.html	(working copy)
@@ -15,6 +15,7 @@
         <script type="text/javascript" src="../../../../../fluid-infusion/src/webapp/tests/test-core/jqUnit/js/jqUnit.js"></script>
 
         <script type="text/javascript" src="../../../../../fluid-engage-core/components/navigationBar/js/NavigationBar.js"></script>
+        <script type="text/javascript" src="../../../../../fluid-engage-core/framework/js/URLUtilities.js"></script>
 		<script type="text/javascript" src="../../../../../fluid-engage-core/components/codeEntry/js/CodeEntryView.js"></script>
 
 		<script type="text/javascript" src="../../../../../fluid-engage-core/tests/component-tests/codeEntry/js/CodeEntryTests.js"></script>
Index: components/codeEntry/html/codeEntry.html
===================================================================
--- components/codeEntry/html/codeEntry.html	(revision 9652)
+++ components/codeEntry/html/codeEntry.html	(working copy)
@@ -45,61 +45,61 @@
         	<div class="flc-codeEntry-headMessage fl-codeEntry-headMessage"></div>            
 	
 	        <div class="flc-codeEntry-block fl-codeEntry-block">
-	            <span class="flc-codeEntry-firstDigit fl-codeEntry-digitField"></span>
-	            <span class="flc-codeEntry-secondDigit fl-codeEntry-digitField"></span>
+	            <img class="flc-codeEntry-firstDigit fl-codeEntry-digitField"  src="../../../../fluid-engage-core/components/codeEntry/images/blank.png" alt="First digit blank"/>
+	            <img class="flc-codeEntry-secondDigit fl-codeEntry-digitField" src="../../../../fluid-engage-core/components/codeEntry/images/blank.png" alt="Second digit blank"/>
 			</div>
         
         <div class="flc-codeEntry-numpad fl-codeEntry-numpad fl-table">
  				<div class="fl-table-row">
                     <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img src="../../../../fluid-engage-core/components/codeEntry/images/1.png" alt="1"/>
+    					<img src="../../../../fluid-engage-core/components/codeEntry/images/1kp.png" alt="1"/>
                         <span class="fl-codeEntry-hidden">1</span>
                     </a>
                     <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-					    <img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/2.png" alt="2"/>
+					    <img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/2kp.png" alt="2"/>
                         <span class="fl-codeEntry-hidden">2</span>
                     </a>
                     <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-					    <img src="../../../../fluid-engage-core/components/codeEntry/images/3.png" alt="3"/>
+					    <img src="../../../../fluid-engage-core/components/codeEntry/images/3kp.png" alt="3"/>
                         <span class="fl-codeEntry-hidden">3</span>
                     </a>
  				</div>
  				<div class="fl-table-row">
 				    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img src="../../../../fluid-engage-core/components/codeEntry/images/4.png" alt="4"/>
+    					<img src="../../../../fluid-engage-core/components/codeEntry/images/4kp.png" alt="4"/>
                         <span class="fl-codeEntry-hidden">4</span>
                     </a>
                     <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/5.png" alt="5"/>
+    					<img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/5kp.png" alt="5"/>
                         <span class="fl-codeEntry-hidden">5</span>
                     </a>
                     <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img src="../../../../fluid-engage-core/components/codeEntry/images/6.png" alt="6"/>
+    					<img src="../../../../fluid-engage-core/components/codeEntry/images/6kp.png" alt="6"/>
                         <span class="fl-codeEntry-hidden">6</span>
                     </a>
  				</div>
  				<div class="fl-table-row">
 				    <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img src="../../../../fluid-engage-core/components/codeEntry/images/7.png" alt="7"/>
+    					<img src="../../../../fluid-engage-core/components/codeEntry/images/7kp.png" alt="7"/>
                         <span class="fl-codeEntry-hidden">7</span>
                     </a>
                     <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/8.png" alt="8"/>
+    					<img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/8kp.png" alt="8"/>
                         <span class="fl-codeEntry-hidden">8</span>
                     </a>
                     <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img src="../../../../fluid-engage-core/components/codeEntry/images/9.png" alt="9"/>
+    					<img src="../../../../fluid-engage-core/components/codeEntry/images/9kp.png" alt="9"/>
                         <span class="fl-codeEntry-hidden">9</span>
                     </a>
  				</div>
  				<div class="fl-table-row">
-				    <img class="fl-codeEntry-numpadItem" src="../../../../fluid-engage-core/components/codeEntry/images/blank.png" alt=""/>
+				    <img class="fl-codeEntry-numpadItem" src="../../../../fluid-engage-core/components/codeEntry/images/blankkp.png" alt=""/>
                     <a class="flc-codeEntry-numButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/0.png" alt="0"/>
+    					<img class="fl-codeEntry-middleButton" src="../../../../fluid-engage-core/components/codeEntry/images/0kp.png" alt="0"/>
                         <span class="fl-codeEntry-hidden">0</span>
                     </a>
                     <a class="flc-codeEntry-delButton fl-codeEntry-numpadItem" role="button" href="#">
-    					<img src="../../../../fluid-engage-core/components/codeEntry/images/del.png" alt="Delete"/>
+    					<img src="../../../../fluid-engage-core/components/codeEntry/images/delkp.png" alt="Delete"/>
                         <span class="flc-codeEntry-delLabel fl-codeEntry-hidden">Delete</span>
                     </a>
  				</div>
Index: components/codeEntry/css/codeEntry.css
===================================================================
--- components/codeEntry/css/codeEntry.css	(revision 9652)
+++ components/codeEntry/css/codeEntry.css	(working copy)
@@ -23,16 +23,10 @@
 }
 
 .fl-codeEntry-digitField {
-	width: 64px;
-	height: 64px;
 	margin-top: 10px;
 	margin-bottom: 10px;
-	font-size: 43px;
-	line-height: 64px;
-	text-align: center;
-	vertical-align: middle;
-	background-color: white;
 	display: inline-block;
+	border: solid #ebebeb;
 }
 
 .fl-codeEntry-numpad {
