Monthly Archives: December 2012

CSS Positioning schemes

Posted on by
Reply

PositioningScheme

In CSS 2.1, a box may be laid out according to three positioning schemes:

  1. Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
  2. Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
  3. Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an elementA is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

Event dispatch and DOM event flow

Posted on by
Reply
DOM Level 3 Events Event Flow

DOM Level 3 Events Event Flow

DOM Events
Legacy mode (DOM Level 0) DOM Level 2
Event Type onclick click
Event Listener on HTML element attribute
<button onclick=”run”>run</button>
or  object property
run.onclick = function(e){};		 register by calling addEventListener(“click”,function(e){},false)The 3rd argument, useCapture (false in the example above) determines to direct the event flow from parent to child or to bubble up from child to parent. Refer to the example.
this pointer event handler becomes a method of that document element lack of standardization. All known implementations invoke handlers registered with addEventListener() as if they were methods of that object.
Event Disposition <a href=”#” onclick=”return false;”>click me</a>  preventDefault();
Event Propagation  function (e) { e.cancelBubble = true; }   function (e) { e.stopPropagation(); }
  1. HTML DOM Events
  2. DOM Event Architecture
  3. jQuery: Event Object

Internationalization and localization

Posted on by
1

language preferences

As a developer with Traditional Chinese mother tongue, to deliver an app that targets users with different languages takes more considerations, especially the issue of internationalization (i18n) and localization (L10n). An employee of US based company in Taiwan using an English Windows can subscribe services or contents from all over the world, eg. local weather forecast, local news, and/or web pages with Japanese contents.

In Windows 8, the diversity of the issue can be summarized as follows:

  • Language preferences
    • display language
    • Input method
  • Home location for services/contents
  • Date and time formats
  • Number and currency

Before passing the app certification, Bruce’s nLabs Blog Reader – Release 2 failed twice again because of screenshots of localization. If your app supports multi-language, take justifiable screenshots and write your app description well in your Windows Store App dashboard. It’s quite common for app testers to fail your app certification because of localization. For Windows Store App developers to test the localized user interface of an app, developers can change the language sequence or override the display language in the language window.

Override display language specified in the language window

Override display language specified in the language window

Adjust Home location to see localized app description in the Windows Store

Home location for services and contents

Bruce’s nLabs Blog Reader, Release 2 Passed Certification

Posted on by
Reply
Bruce's nLabs Blog Reader - Release 2

Bruce’s nLabs Blog Reader – Release 2

Bruce’s nLabs Blog Reader – Release 2 passed the certification and is now available in the Windows Store. This application is an RSS/ATOM reader which subscribes to some feeds from Bruce’s nLabs Blog by default. Users can read posts from Bruce’s nLabs Blog and his favorite collections, subscribe to up to 5 feeds from other web sites (custom feeds), unsubscribe custom feeds, receive subscription indication from live tile badge, roam the list of subscriptions to the cloud with Microsoft Account, read posts in snapped or fill view and share posts with friends. This application supports English, Traditional Chinese, and Simplified Chinese, requires internet access and Microsoft Account. It supports both RSS and ATOM feeds.

This release supports the following features:

  1. subscribe to feeds from Bruce’s nLabs Blog
  2. subscribe to up to 5 feeds from other sites (custom feeds)
  3. unsubscribe custom feeds
  4. roam the list of subscriptions to the cloud with Microsoft Account
  5. refresh subscriptions manually
  6. indicate the number of subscriptions with live tile badge
  7. share posts with friends
  8. support snapped and fill view
  9. support English (en-US), Traditional Chinese (zh-TW), and Simplified Chinese (zh-CN)
  10. support RSS and ATOM feeds

Install Bruce’s nLabs Blog Reader and Subscribe the following syndication now:

Bruce’s nLabs Blog Reader, Release 1 Passed Certification

Posted on by
1

Bruce's nLabs Blog Reader on the Windows Store

My first Windows Store App, Bruce’s nLabs Blog Reader – Release 1, passed the certification and is now available in the Windows Store. This application retrieves posts from Bruce’s nLabs Blog and Bruce’s favorite sties. The list of subscriptions or feeds, however, is maintained by Bruce and so, it is read-only currently. Its features are summarized as follows:

  • retrieve posts (ATOM feeds) from Bruce’s nLabs Blog
  • share posts with friends
  • localized user interface for English (en-US) and Traditional Chinese (zh-TW)

I got a good start from the MSDN tutorial, Part 6: Create a blog reader (Windows Store apps using JavaScript and HTML) (Windows). If you are interested in developing Windows Store Apps, read and study the materials from Dev Center – Windows Store Apps. It’s informative.

Concerning the app certification process, I was rejected twice before passing the certification because of privacy information, certification language and screenshots:

  • Developers must provide privacy information or policy in the app, usually an About or Privacy page in the settings charm.
  • The strings in an app must be stored in the resource file (say, in the path /strings/en-US/resources.resjson) so that the app can load the right string based on the user’s locality. Android developers take it for granted and feel happy about this because it’s a convention and they are always doing so. (Microsoft should consider including a default language resource file in the project template just like what Android Development Tools in Eclipse does.)
  • Even though your app supports en-US only, you can select all the countries as your markets. en-Us is called certification language that is unrelated to your markets.
  • If your app supports multiple certification languages, you must describe your app in details with each language. These descriptions will be displayed on the Windows Store based on the user’s location and language. A wizard will guide you to complete this.
  • Take screenshots with the Visual Studio 2012 simulator and follow the image format that Microsoft specified. If your app supports multiple languages, provide enough or the maximum of 8 screenshots to prove your app is fully localized.

To sum up, the certification process is quite simple and efficient. Just read the Windows 8 app certification requirements, develop your app based on it, describe your app well and write a good notes for testers so as to communicate your app well and the certification process will be a happy experience.

TimeBroker Kills The Metro/Modern UI

Posted on by
6

My Windows 8 Start Screen (or metro/modern UI) was killed yesterday by the TimeBroker service. The Start Screen was repeatedly frozen for minutes and intermittently released for few seconds. If it happens, the windows application log should complain an error as follows:

Log Name: Application
Source: Application Error
Event ID: 1000
Level: Error
Keywords: Classic
Description:
Faulting application name: svchost.exe_TimeBroker, version: 6.2.9200.16420, time stamp: 0x505a9a4e
Faulting module name: KERNELBASE.dll, version: 6.2.9200.16451, time stamp: 0x50988aa6

Chances are that some timer-related Windows Store Apps, say reminder, scheduler, stop watch and the like, might negatively impact the low-level timing operations. According to Noori, he suggests the Tile Time app might have caused problems.

This costs me for 10 work hours to solve it. If you are suffered from the same problem, don’t waste your time blindly uninstalling the apps you’ve installed or examining, upgrading or re-installing the devices, or rebooting again and again. Just disable the TimeBroker service and reboot your Windows 8 to uninstall the problematic timer-related Apps. Since we don’t know which app is the killer, so uninstall suspicious Apps and reboot to test the result one by one. However, the Tile Time app is the number one to be killed!

To be reminded, even though the Start Screen got frozen, the system is still responsive, slowly though. The following is the how to rescue your Windows 8:

  • Upon logging in, click the Desktop tile in 2 seconds to switch to the traditional desktop environment that is more responsive. If you are not succeeded, keep pressing the Windows key and you would win a few seconds when the system is responsive.
  • Press the shortcut combination: Windows key + R, type in “cmd” and click OK.
  • In the command window, type in “regedit” and hit enter
  • Search and navigate to the registry key:
    HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\TimeBroker
  • Modify the “Start” value to “4” (4 for disabled; 3 for manual).
  • Reboot the system and the Start Screen should work normally for you to uninstall Apps.
  • Click the Market tile to uninstall the suspicious timer-related Apps and reboot to test the result one by one until the problem is solved. (You don’t need to use PowerShell to uninstall Apps as stated in the reference 2, it’s for your information only.)
  • Restore the “Start” value to “3” and reboot.
  • done!

Good luck to you!

TimeBrokerErrorLog

The error log

DisableTimeBroker

Modify TimeBroker Start Type

JavaScript Intellisense Not Working on Visual Studio 2010

Posted on by
Reply

We are using JavaScript to manipulate the HTML document or more specifically, the DOM (document object model). jQuery as a JavaScript framework now seems to be the first choice of developers for efficiency and productivity. You can use NuGet to install the jQuery package in the Visual Studio 2012, which supports JavaScript intellisense very well.

To be reminded that we are programming against an HTML document with JavaScript or jQuery, just remember to establish some kind of connection between the HTML document and the JavaScript files or the JavaScript intellisense won’t work properly. You would receive the following message:

“intellisense was unable to determine an accurate completion list for this expression, The provided list contains all identifiers in the file“

If you installed jQuery from NuGet and JavaScript intellisense won’t work, do either of the following:

  • in the HTML document, add the <script> tag  to import your JavaScript file or
  • at the beginning of your JavaScript file, add a remarked reference to the HTML document you’re working with
    /// <reference path=”../default.html” />
    You can drag and drop the HTML document into the JavaScript file if you are using Visual Studio 2012

JavaScriptIntellisenseHTML JavaScriptIntellisensSource

Visual Studio 2012 Windows 8 Apps Simulator won’t Start

Posted on by
Reply

To start debugging in Visual Studio 2012 (VS 2012), you have three options: simulator, local machine and remote machine. VS 2012 comes along with a Windows 8 apps simulator which is awesome in that developers can test their apps from different kinds of perspectives, eg. landscape/portrait, screen resolutions, gestures and geolocations.

However, if you have a VPN connection activated when debugging, the simulator may not start properly. It occurs especially when the Windows account you logged on is different from the one that you use to authenticate to the remote VPN server.

If your Windows 8 apps simulator fails to start, just enable “Automatically use my Windows logon name and password (and domain, if nay)“.

SimulatorFailedOnVPN

The Maps Sample from Google Play Services

Posted on by
Reply

After struggling for two days, I finally have the Google maps sample from the Google Play Services as an SDK extra build and run successfully. The sample is available if you install the Google Play Services in the extras section from the Android SDK Manager. It should be located at the path, C:\adt-bundle-windows\sdk\extras\google\google_play_services\samples\maps.

The following are the critical parts to successfully build and run the sample:

  • Google Play Services Library: how to import and set reference to
  • Android Support Library: how to add the support library
  • Google Play Services on the client side: probably requested to upgrade
  • Physical Android device required to test the app: Android Virtual Device is not supported

The procedures to build and run the sample are summarized as follows:

  1. Import the maps code
    • Import>Existing Android Code Into Workspace
    • C:\adt-bundle-windows\sdk\extras\google\google_play_services\samples\maps
  2. Import the Google Play Service Library code
    • Be careful! it’s the LIBRARY support code, not the service itself
    • Import>Existing Android Code Into Workspace
    • C:\adt-bundle-windows\sdk\extras\google\google_play_services\libproject\google-play-services_lib
  3. Reference the Google Play Service Library project
    • Be careful! This is the most critical step. Open the maps Project properties page, choose the Android item in the list and add a Library reference at the bottom edge.
    • DO NOT be confused with the Java Build Path Libraries or the Project References.
  4. Add Android Support Library
    • simply copy them as static libraries into your project or
    • right-click on the project and choose from the context menu, Android Tools>Add Support Library
  5. Assign your key for Google Map Android API v2
    • DO NOT be confused with the Google Map API v2, which is for browser apps.
    • You gotta turn on Google Map Android API v2 service and create new Android key in the Google API Console
    • Assign your key in the AndroidManifest.xml.
  6. Test the app in a physical devices
    • You may be requested to upgrade the Google Play Services on your device.
    • Be careful! Android Virtual Devices are not supported this time.

GoogleApiConsole GoogleMapAndroidApiKey AndroidLibrary GooglePlayServices