projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | <?xml version="1.0" encoding="UTF-8"?>\r |
| 2 | <?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:admin="http://webns.net/mvcb/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">\r | |
| 3 | \r | |
| 4 | <channel>\r | |
| 5 | <title>Sencha Blog</title>\r | |
| 6 | <link>http://www.sencha.com/blog/</link>\r | |
| 7 | <description>\r | |
| 8 | Technical articles, company news, and customer spotlights from Sencha.\r | |
| 9 | </description>\r | |
| 10 | <dc:language>en-us</dc:language>\r | |
| 11 | <author>jamesp@sencha.com</author>\r | |
| 12 | <dc:rights>Copyright 2011</dc:rights>\r | |
| 13 | <dc:date>2011-11-22T19:00:31+00:00</dc:date>\r | |
| 14 | <admin:generatorAgent rdf:resource="http://expressionengine.com/" />\r | |
| 15 | \r | |
| 16 | \r | |
| 17 | \r | |
| 18 | <atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/extblog" /><feedburner:info uri="extblog" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item>\r | |
| 19 | <title>Sencha.io Src Update</title>\r | |
| 20 | <author>James Pearce</author>\r | |
| 21 | <description>\r | |
| 22 | We're pleased to announce a set of new and experimental features for Sencha.io Src, the image resizing service within our popular Sencha.io cloud suite.\r | |
| 23 | </description>\r | |
| 24 | <link>http://feedproxy.google.com/~r/extblog/~3/S2wACRJigyY/</link>\r | |
| 25 | <content><![CDATA[\r | |
| 26 | \r | |
| 27 | <figure class="aligncenter">\r | |
| 28 | <img src="http://img1.sencha.com/files/misc/sencha-io-devices-2.jpg" alt="Photo of an astronaut out for a spacewalk, shown on an iPad and an iPod touch" height="400" width="636">\r | |
| 29 | <figcaption>Sencha.io offers an API for smart resizing of images on many devices with different-sized screens.</figcaption>\r | |
| 30 | </figure>\r | |
| 31 | \r | |
| 32 | <p><a href='http://www.sencha.com/learn/how-to-use-src-sencha-io'>Sencha.io Src</a> is one of the cloud services offered as a part of Sencha.io, and solves a common problem that mobile developers face: how to design for multiple screen resolutions.</p>\r | |
| 33 | \r | |
| 34 | <p>We're thrilled that the service is now handling many hundreds of images <em>per second</em> for mobile sites and applications all around the world. And we also very pleased to announce a set of new and experimental features to the service, available today.</p>\r | |
| 35 | \r | |
| 36 | <h3>Support for device orientation</h3>\r | |
| 37 | \r | |
| 38 | <p>Sencha.io Src recognizes devices according to their user-agents, and scales images to their known screen sizes. This however, is not able to take account of the orientation of the device. An iPhone is well-known to have a screen of 320×480 pixels, but when an app is being used in landscape orientation, an image ought rather be constrained to 480×320.</p>\r | |
| 39 | \r | |
| 40 | <p>To solve this, you can now explicitly <a href='/learn/how-to-use-src-sencha-io#o'>set screen orientation</a>, and to do so, the service's API now accepts '<code>portrait</code>' or '<code>landscape</code>' in the URL:</p>\r | |
| 41 | \r | |
| 42 | <style>/**\r | |
| 43 | * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\r | |
| 44 | * (http://qbnz.com/highlighter/ and http://geshi.org/)\r | |
| 45 | */\r | |
| 46 | .javascript .imp {font-weight: bold; color: red;}\r | |
| 47 | .javascript .kw1 {color: #000066; font-weight: bold;}\r | |
| 48 | .javascript .kw2 {color: #003366; font-weight: bold;}\r | |
| 49 | .javascript .kw3 {color: #000066;}\r | |
| 50 | .javascript .co1 {color: #006600; font-style: italic;}\r | |
| 51 | .javascript .co2 {color: #009966; font-style: italic;}\r | |
| 52 | .javascript .coMULTI {color: #006600; font-style: italic;}\r | |
| 53 | .javascript .es0 {color: #000099; font-weight: bold;}\r | |
| 54 | .javascript .br0 {color: #009900;}\r | |
| 55 | .javascript .sy0 {color: #339933;}\r | |
| 56 | .javascript .st0 {color: #3366CC;}\r | |
| 57 | .javascript .nu0 {color: #CC0000;}\r | |
| 58 | .javascript .me1 {color: #660066;}\r | |
| 59 | .javascript span.xtra { display:block; }\r | |
| 60 | </style><pre class="javascript"><span class="sy0"><</span>img\r | |
| 61 | src<span class="sy0">=</span><span class="st0">'http://src.sencha.io/landscape/http://sencha.com/files/u.jpg'</span>\r | |
| 62 | alt<span class="sy0">=</span><span class="st0">'Constrained to WxH, W greater than H'</span>\r | |
| 63 | <span class="sy0">/></span></pre>\r | |
| 64 | \r | |
| 65 | <p>More importantly, the service now also provides a small JavaScript library which you can include in your page, and which will detect orientation if the browser's <code>window</code> API supports it, and set a cookie accordingly. Subsequent requests to sencha.io Src will then indicate the current orientation, which can be detected using '<code>detect</code>' in the URL:</p>\r | |
| 66 | \r | |
| 67 | <style>/**\r | |
| 68 | * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\r | |
| 69 | * (http://qbnz.com/highlighter/ and http://geshi.org/)\r | |
| 70 | */\r | |
| 71 | .javascript .imp {font-weight: bold; color: red;}\r | |
| 72 | .javascript .kw1 {color: #000066; font-weight: bold;}\r | |
| 73 | .javascript .kw2 {color: #003366; font-weight: bold;}\r | |
| 74 | .javascript .kw3 {color: #000066;}\r | |
| 75 | .javascript .co1 {color: #006600; font-style: italic;}\r | |
| 76 | .javascript .co2 {color: #009966; font-style: italic;}\r | |
| 77 | .javascript .coMULTI {color: #006600; font-style: italic;}\r | |
| 78 | .javascript .es0 {color: #000099; font-weight: bold;}\r | |
| 79 | .javascript .br0 {color: #009900;}\r | |
| 80 | .javascript .sy0 {color: #339933;}\r | |
| 81 | .javascript .st0 {color: #3366CC;}\r | |
| 82 | .javascript .nu0 {color: #CC0000;}\r | |
| 83 | .javascript .me1 {color: #660066;}\r | |
| 84 | .javascript span.xtra { display:block; }\r | |
| 85 | </style><pre class="javascript"><span class="sy0"><</span>script src<span class="sy0">=</span><span class="st0">'http://src.sencha.io/screen.js'</span><span class="sy0">></</span>script<span class="sy0">></span>\r | |
| 86 | <span class="sy0"><</span>img\r | |
| 87 | src<span class="sy0">=</span><span class="st0">'http://src.sencha.io/detect/http://sencha.com/files/u.jpg'</span>\r | |
| 88 | alt<span class="sy0">=</span><span class="st0">'Constrained to WxH, W greater than H'</span>\r | |
| 89 | <span class="sy0">/></span></pre>\r | |
| 90 | \r | |
| 91 | <img class="alignright" src='http://src.sencha.io/200/http://www.sencha.com/files/learn/orient.png'>\r | |
| 92 | \r | |
| 93 | <p>Try out <a href='http://src.sencha.io/tests/orientation'>the test page</a> with an iPhone, for example, and try reloading the page with different orientations.</p>\r | |
| 94 | \r | |
| 95 | <p>(As the <a href='/learn/how-to-use-src-sencha-io#ocsm'>documentation</a> points out, you cannot always guarantee that the cookie has been set prior to a non-deferred image download, so you may need to use this in conjunction with document <code>load</code> events in regular web pages, as we do in the example above.)</p>\r | |
| 96 | \r | |
| 97 | <h3 style="clear:both;">Client-side measurements</h3>\r | |
| 98 | \r | |
| 99 | <p>The same <code>screen.js</code> script also takes various <a href='/learn/how-to-use-src-sencha-io#csm'>screen-size measurements</a> through the browser's DOM and BOM APIs, and these can be also be used to adjust screen sizes as an alternative to user-agent detection.</p>\r | |
| 100 | \r | |
| 101 | <p>For example, if you want an image to be declaratively constrained by the <code>screen.width</code> value:</p>\r | |
| 102 | \r | |
| 103 | <style>/**\r | |
| 104 | * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\r | |
| 105 | * (http://qbnz.com/highlighter/ and http://geshi.org/)\r | |
| 106 | */\r | |
| 107 | .javascript .imp {font-weight: bold; color: red;}\r | |
| 108 | .javascript .kw1 {color: #000066; font-weight: bold;}\r | |
| 109 | .javascript .kw2 {color: #003366; font-weight: bold;}\r | |
| 110 | .javascript .kw3 {color: #000066;}\r | |
| 111 | .javascript .co1 {color: #006600; font-style: italic;}\r | |
| 112 | .javascript .co2 {color: #009966; font-style: italic;}\r | |
| 113 | .javascript .coMULTI {color: #006600; font-style: italic;}\r | |
| 114 | .javascript .es0 {color: #000099; font-weight: bold;}\r | |
| 115 | .javascript .br0 {color: #009900;}\r | |
| 116 | .javascript .sy0 {color: #339933;}\r | |
| 117 | .javascript .st0 {color: #3366CC;}\r | |
| 118 | .javascript .nu0 {color: #CC0000;}\r | |
| 119 | .javascript .me1 {color: #660066;}\r | |
| 120 | .javascript span.xtra { display:block; }\r | |
| 121 | </style><pre class="javascript"><span class="sy0"><</span>script src<span class="sy0">=</span><span class="st0">'http://src.sencha.io/screen.js'</span><span class="sy0">></</span>script<span class="sy0">></span>\r | |
| 122 | <span class="sy0"><</span>img\r | |
| 123 | src<span class="sy0">=</span><span class="st0">'http://src.sencha.io/screen.width/http://sencha.com/files/u.jpg'</span>\r | |
| 124 | alt<span class="sy0">=</span><span class="st0">'My JS-measured image'</span>\r | |
| 125 | <span class="sy0">/></span></pre>\r | |
| 126 | \r | |
| 127 | <p>This approach anticipates a '<a href='http://futurefriend.ly'>future-friendly</a>' alternative to user-agent detection, and also allows you to specify other types of measurements: for example, <code>document.body.clientWidth</code> will measure the inner width of your document's body, taking its margin into account. The trade-off is the possible race-condition between cookies, initial image requests, and also the way in which some measurements will vary during the loading of a page. There are more notes in the documentation, and real-device testing remains highly recommended!</p>\r | |
| 128 | \r | |
| 129 | <h3>New formulaic manipulation</h3>\r | |
| 130 | \r | |
| 131 | <p>You've long been able to manipulate image dimensions using operators like '<code>-</code>' (to deduct pixels) or '<code>x</code>' (to scale by percentage).</p>\r | |
| 132 | \r | |
| 133 | <p>Sencha.io Src now adds support for <a href='/learn/how-to-use-src-sencha-io#rnd'>rounding</a> (using '<code>r</code>') and <a href='/learn/how-to-use-src-sencha-io#max'>explicit maxima</a> (using '<code>m</code>' and '<code>n</code>') in these formulae.</p>\r | |
| 134 | \r | |
| 135 | <p>For example, <code>r20</code> will ensure that an image is always constrained by a multiple of 20 pixels. This is often important when creating tile- or column-based layouts:</p>\r | |
| 136 | \r | |
| 137 | <style>/**\r | |
| 138 | * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\r | |
| 139 | * (http://qbnz.com/highlighter/ and http://geshi.org/)\r | |
| 140 | */\r | |
| 141 | .javascript .imp {font-weight: bold; color: red;}\r | |
| 142 | .javascript .kw1 {color: #000066; font-weight: bold;}\r | |
| 143 | .javascript .kw2 {color: #003366; font-weight: bold;}\r | |
| 144 | .javascript .kw3 {color: #000066;}\r | |
| 145 | .javascript .co1 {color: #006600; font-style: italic;}\r | |
| 146 | .javascript .co2 {color: #009966; font-style: italic;}\r | |
| 147 | .javascript .coMULTI {color: #006600; font-style: italic;}\r | |
| 148 | .javascript .es0 {color: #000099; font-weight: bold;}\r | |
| 149 | .javascript .br0 {color: #009900;}\r | |
| 150 | .javascript .sy0 {color: #339933;}\r | |
| 151 | .javascript .st0 {color: #3366CC;}\r | |
| 152 | .javascript .nu0 {color: #CC0000;}\r | |
| 153 | .javascript .me1 {color: #660066;}\r | |
| 154 | .javascript span.xtra { display:block; }\r | |
| 155 | </style><pre class="javascript"><span class="sy0"><</span>img\r | |
| 156 | src<span class="sy0">=</span><span class="st0">'http://src.sencha.io/x50r20/http://sencha.com/files/u.jpg'</span>\r | |
| 157 | alt<span class="sy0">=</span><span class="st0">'Half the screen, rounded down to nearest 20 pixels'</span>\r | |
| 158 | <span class="sy0">/></span></pre>\r | |
| 159 | \r | |
| 160 | <p>The maxima operators allow you to indicate different size limits for mobile- and non-mobile devices. This is useful to ensure that, even if the actual browser cannot be recognized, its genre can be used to ensure sensible images are sent for client-side resizing. The code below, for example, will display an image no larger than 500 pixels on a desktop browser, and no larger than 100 pixels on a mobile browser:</p>\r | |
| 161 | \r | |
| 162 | <style>/**\r | |
| 163 | * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\r | |
| 164 | * (http://qbnz.com/highlighter/ and http://geshi.org/)\r | |
| 165 | */\r | |
| 166 | .javascript .imp {font-weight: bold; color: red;}\r | |
| 167 | .javascript .kw1 {color: #000066; font-weight: bold;}\r | |
| 168 | .javascript .kw2 {color: #003366; font-weight: bold;}\r | |
| 169 | .javascript .kw3 {color: #000066;}\r | |
| 170 | .javascript .co1 {color: #006600; font-style: italic;}\r | |
| 171 | .javascript .co2 {color: #009966; font-style: italic;}\r | |
| 172 | .javascript .coMULTI {color: #006600; font-style: italic;}\r | |
| 173 | .javascript .es0 {color: #000099; font-weight: bold;}\r | |
| 174 | .javascript .br0 {color: #009900;}\r | |
| 175 | .javascript .sy0 {color: #339933;}\r | |
| 176 | .javascript .st0 {color: #3366CC;}\r | |
| 177 | .javascript .nu0 {color: #CC0000;}\r | |
| 178 | .javascript .me1 {color: #660066;}\r | |
| 179 | .javascript span.xtra { display:block; }\r | |
| 180 | </style><pre class="javascript"><span class="sy0"><</span>img\r | |
| 181 | src<span class="sy0">=</span><span class="st0">'http://src.sencha.io/n500m100/http://sencha.com/files/u.jpg'</span>\r | |
| 182 | alt<span class="sy0">=</span><span class="st0">'Max 500 or 100, depending on browser'</span>\r | |
| 183 | <span class="sy0">/></span></pre>\r | |
| 184 | \r | |
| 185 | <h3>Take it for a spin</h3>\r | |
| 186 | \r | |
| 187 | <p>The full documentation for the API is <a href='/learn/how-to-use-src-sencha-io'>available here</a>, with a summary of its syntax, new formulaic operators, and client-side measurements <a href='/learn/how-to-use-src-sencha-io#summary'>here</a>.</p>\r | |
| 188 | \r | |
| 189 | <p>Please let us know how you get on with these new features, and what else you might like to see form the service in the future. Enjoy!</p>\r | |
| 190 | <style>\r | |
| 191 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 192 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 193 | </style>\r | |
| 194 | \r | |
| 195 | <div class="feedflare">\r | |
| 196 | <a href="http://feeds.feedburner.com/~ff/extblog?a=S2wACRJigyY:qVRFP-mFkE8:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=S2wACRJigyY:qVRFP-mFkE8:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=S2wACRJigyY:qVRFP-mFkE8:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=S2wACRJigyY:qVRFP-mFkE8:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=S2wACRJigyY:qVRFP-mFkE8:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=S2wACRJigyY:qVRFP-mFkE8:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=S2wACRJigyY:qVRFP-mFkE8:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=S2wACRJigyY:qVRFP-mFkE8:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=S2wACRJigyY:qVRFP-mFkE8:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=S2wACRJigyY:qVRFP-mFkE8:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 197 | </div>]]></content>\r | |
| 198 | <pubDate>Tue, 22 Nov 2011 19:00 GMT</pubDate>\r | |
| 199 | <guid isPermaLink="false">http://www.sencha.com/blog/sencha-io-src-update/#date:19:00</guid>\r | |
| 200 | <feedburner:origLink>http://www.sencha.com/blog/sencha-io-src-update/#date:19:00</feedburner:origLink></item>\r | |
| 201 | \r | |
| 202 | <item>\r | |
| 203 | <title>Sencha Touch Spotlight: Viewbeat</title>\r | |
| 204 | <author>Burc Sade</author>\r | |
| 205 | <description>\r | |
| 206 | Sencha community member Burc Sade writes a guest blog post about his experience with Sencha Touch. His application, Viewbeat, is available on the Apple App Store and makes it fast and simple to ask questions and get answers from friends and others.\r | |
| 207 | </description>\r | |
| 208 | <link>http://feedproxy.google.com/~r/extblog/~3/Tf32sPAbTaI/</link>\r | |
| 209 | <content><![CDATA[\r | |
| 210 | \r | |
| 211 | <p><a class="alignright" href="http://www.sencha.com/apps/viewbeat"><img src="http://img1.sencha.com/files/misc/viewbeat-icon.png" alt="Viewbeat app icon" height="114" width="114"></a> <a href="http://www.viewbeat.com">Viewbeat</a> is an application that makes it fast and simple to ask questions and get answers from your friends and other people, with rankings! Built using Sencha Touch and wrapped with PhoneGap, it features a simple user interface that lets you see the most popular answers at a glance (based on the rating system), so you don’t have to go through all of the answers every time.</p>\r | |
| 212 | \r | |
| 213 | <blockquote class="pullquote right">\r | |
| 214 | <p class="pullquote right"><span>“</span>Instead of worrying about the interface, I could focus on building my application—enabling me to be more creative.”</p>\r | |
| 215 | </blockquote>\r | |
| 216 | \r | |
| 217 | <p>It’s my personal project and the result of an idea that I developed after struggling to find an easy way to ask my friends about a product I was planning to buy. My goal was to build a tool that lets people ask a question on the go and get answers fast with the most basic privacy options and notification abilities.</p>\r | |
| 218 | \r | |
| 219 | <p>Viewbeat also lets you discover more about your friends and find new like-minded people based on the answers they give. Thanks to the unique matching algorithm, you can find like-minded people with similar interests at the touch of a button and group them, as well as the topics and even topic options you like so you can follow them separately.</p>\r | |
| 220 | \r | |
| 221 | <figure class="aligncenter" style="clear:both;">\r | |
| 222 | <a class="lightbox" href="http://img1.sencha.com/files/misc/viewbeat-1.png" style="display:block;float:left;margin-right:10px;width:200px;" title="Sencha Touch lets you create elegant user interfaces that look and feel like native apps"><img src="http://src.sencha.io/200/http://img1.sencha.com/files/misc/viewbeat-1.png" alt="Sencha Touch lets you create elegant user interfaces that look and feel like native apps"></a>\r | |
| 223 | <a class="lightbox" href="http://img1.sencha.com/files/misc/viewbeat-3.png" style="display:block;float:left;margin-right:10px;width:200px;" title="The component model makes it simple to create complex and easy to use interfaces"><img src="http://src.sencha.io/200/http://img1.sencha.com/files/misc/viewbeat-3.png" alt="The component model makes it simple to create complex and easy to use interfaces"></a>\r | |
| 224 | <a class="lightbox" href="http://img1.sencha.com/files/misc/viewbeat-2.png" style="display:block;float:left;width:200px;" title="Developing custom components such as a profile image button is a breeze with Sencha Touch"><img src="http://src.sencha.io/200/http://img1.sencha.com/files/misc/viewbeat-2.png" alt="Developing custom components such as a profile image button is a breeze with Sencha Touch"></a>\r | |
| 225 | <figcaption>Click each image to view larger. Check out <a href="http://www.sencha.com/apps/viewbeat">Viewbeat</a> in the Sencha Touch App Gallery.</figcaption>\r | |
| 226 | </figure>\r | |
| 227 | \r | |
| 228 | <h3>Why I Chose Sencha Touch</h3>\r | |
| 229 | \r | |
| 230 | <p>I carefully considered whether to go native or use a mobile framework that supports open web technologies. Being able to port my applications to several mobile platforms without a hassle was an important part of my criteria. After carefully examining my options, I decided to choose HTML5/JavaScript and add some PhoneGap to the mix, so I can use native application features such as notifications and access to the contacts list.</p>\r | |
| 231 | \r | |
| 232 | <p>Before starting development, it was clear that I needed a touch-based UI framework that had components like sliding panels and action sheets with the look-and-feel of modern touch devices. Among the touch frameworks I reviewed, I decided to use Sencha Touch because it has all of the required components, packaged in an easy-to-use framework that I can use to build robust applications. Instead of worrying about the interface, I could focus on building my application — enabling me to be more creative.</p>\r | |
| 233 | \r | |
| 234 | <p>With its strong Ext JS background, Sencha Touch also enabled me to develop my application using an <span class="caps">MVC</span> pattern that ensures that my application has the flexibility to be extended easily. As a developer with strong <span class="caps">MVC</span> experience, having a familiar pattern at hand made the development process more relaxing and less stressful.</p>\r | |
| 235 | \r | |
| 236 | <p>Finally, the object-oriented approach of Sencha Touch let me create custom widgets and extend the capabilities of provided elements, making it a breeze to create custom functionality which is crucial for my application.</p>\r | |
| 237 | \r | |
| 238 | <h3>Business Value of Using Sencha Touch</h3>\r | |
| 239 | \r | |
| 240 | <p>Using the Sencha Touch framework, I completed the application in three months, mostly in my spare time, and cut my development time in half. I also got the benefit of a modern, rich UX, while having the freedom to focus on the details of designing and developing the internals of my application.</p>\r | |
| 241 | \r | |
| 242 | <h3>Advice to New Developers</h3>\r | |
| 243 | \r | |
| 244 | <p>Learning to use Sencha Touch was easy. Newcomers should start by watching the Sencha Touch video tutorials which provide a good overview. I also recommend going through the Kitchen Sink demo — it includes a lot of good examples for creating a rich, high quality UI.</p>\r | |
| 245 | \r | |
| 246 | <h3>Final Thoughts</h3>\r | |
| 247 | \r | |
| 248 | <p>I am quite satisfied with the outcome of this project and I’m going to continue building my upcoming mobile projects with Sencha Touch and PhoneGap. I believe that mobile is the way of the future for computing, and Sencha Touch will definitely be a big part of it.</p>\r | |
| 249 | <style>\r | |
| 250 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 251 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 252 | </style>\r | |
| 253 | \r | |
| 254 | <div class="feedflare">\r | |
| 255 | <a href="http://feeds.feedburner.com/~ff/extblog?a=Tf32sPAbTaI:HW4evmDo9hk:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Tf32sPAbTaI:HW4evmDo9hk:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Tf32sPAbTaI:HW4evmDo9hk:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=Tf32sPAbTaI:HW4evmDo9hk:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Tf32sPAbTaI:HW4evmDo9hk:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Tf32sPAbTaI:HW4evmDo9hk:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=Tf32sPAbTaI:HW4evmDo9hk:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Tf32sPAbTaI:HW4evmDo9hk:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Tf32sPAbTaI:HW4evmDo9hk:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=Tf32sPAbTaI:HW4evmDo9hk:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 256 | </div>]]></content>\r | |
| 257 | <pubDate>Fri, 18 Nov 2011 17:00 GMT</pubDate>\r | |
| 258 | <guid isPermaLink="false">http://www.sencha.com/blog/sencha-touch-spotlight-viewbeat/#date:17:00</guid>\r | |
| 259 | <feedburner:origLink>http://www.sencha.com/blog/sencha-touch-spotlight-viewbeat/#date:17:00</feedburner:origLink></item>\r | |
| 260 | \r | |
| 261 | <item>\r | |
| 262 | <title>HTML5 Scorecard: Amazon Kindle Fire</title>\r | |
| 263 | <author>Michael Mullany</author>\r | |
| 264 | <description>\r | |
| 265 | As part of our continuing series on the HTML5 capabilities of new mobile platforms, we're taking the measure of the new Amazon Kindle Fire. Join us as we take a look at how the device stacks up as an HTML5 app platform.\r | |
| 266 | </description>\r | |
| 267 | <link>http://feedproxy.google.com/~r/extblog/~3/dxgDuAZ7Fuc/</link>\r | |
| 268 | <content><![CDATA[\r | |
| 269 | \r | |
| 270 | <figure class="aligncenter">\r | |
| 271 | <img src="http://img1.sencha.com/files/misc/Sencha-Amazon-Kindle-Fire.jpg" alt=""height="390" width="636">\r | |
| 272 | <figcaption>As part of <a href="http://www.sencha.com/blog/category/html5-developer-scorecard">our continuing series</a>, we ran the new Amazon Kindle Fire through our tests to see how it stacks up as an HTML5 app platform.</figcaption>\r | |
| 273 | </figure>\r | |
| 274 | \r | |
| 275 | <p>As part of our continuing series on the HTML5 capabilities of new mobile platforms, we’re taking the measure of the new <a href="http://www.amazon.com/Kindle-Fire-Amazon-Tablet/dp/B0051VVOB2">Amazon Kindle Fire</a>. When the Kindle Fire was announced, we were excited about getting our hands on it. As the first mass market tablet at the $200 price point, we knew it had a good shot at selling millions of units. But at the same time, we were apprehensive that Amazon might have skimped on hardware capabilities to reach that price. We were also concerned about the browser platform. The Fire runs a customized version of Android 2.3.4 (Gingerbread) and in the past, we’ve been disappointed with the quality and completeness of that browser. We were hoping that Amazon would improve the stock Gingerbread browser significantly.</p>\r | |
| 276 | \r | |
| 277 | <blockquote class="pullquote" style="width:265px;">\r | |
| 278 | <p><span>“</span>The Kindle Fire is a competent but minimal HTML5 platform that reflects its $200 price and Android 2.x lineage.”</p>\r | |
| 279 | </blockquote>\r | |
| 280 | \r | |
| 281 | <p>After putting the Kindle Fire through our test wringer, we can say that while it’s a solid browser for normal page browsing, it lags the best of the competition in HTML5 capabilities. Constrained by its Gingerbread foundation, it’s a competent but minimal HTML5 platform that reflects its $200 price point. At this stage in the tablet game, we would expect better.</p>\r | |
| 282 | \r | |
| 283 | <h3>Our First Look “Methodology”</h3>\r | |
| 284 | \r | |
| 285 | <p>Our HTML5 scorecard consists of a series of tests aimed to help mobile web developers understand new devices and new form factors as they come to market. We test in a number of areas, namely JavaScript performance, HTML5/CSS3 features, rendering performance and rendering accuracy. To get there, we use a variety of tests, including Modernizer, Acid3, SunSpider, Sencha Animator demos and our Sencha Touch Kitchen Sink.</p>\r | |
| 286 | \r | |
| 287 | <h3>Acid3 and Modernizr</h3>\r | |
| 288 | \r | |
| 289 | <p>The Fire scores a less than perfect 95/100 on the <a href="http://acid3.acidtests.org/">Acid3</a> test. Like other Android tablets, it lacks <span class="caps">SVG</span> support and incorrectly displays the Acid3 visual test compared to the reference implementation. With both the iPad2 and the BlackBerry PlayBook now scoring 100/100, this puts the Fire behind the pack. In addition. the Fire failed test 46 (media queries) and came in slower than required on three other tests including the self-described “challenging” test 26 for garbage collection speed.</p>\r | |
| 290 | \r | |
| 291 | <p>We then turned to <a href="http://www.modernizr.com/">Modernizr</a>, one of our favorite tools to look under the hood of a browser. Since the Fire hardware lacks a camera, an accelerometer and a <span class="caps">GPS</span>, some of the results (geolocation failure!) are predictable. What Modernizr did find was support for <span class="caps">CSS</span> 2D transforms and Canvas as well as other Android 2.x capabilities. Notably absent: 3D transforms, web sockets, web workers and many <span class="caps">HTML</span> form input types. Again, not that surprising considering the Android 2.x heritage.</p>\r | |
| 292 | \r | |
| 293 | <p>Happily, web fonts seem to be well supported. Both Google Fonts and Typekit dynamic fonts render correctly. But Typekit font loading and page scrolling on the Google Fonts page (with tens of different onscreen web fonts) was noticeably slow.</p>\r | |
| 294 | \r | |
| 295 | <h3>Performance Testing</h3>\r | |
| 296 | \r | |
| 297 | <p>When checking the user agent received, web servers report that our Fire was using WebKit version 533.1, which is much older than the WebKit found on the Xoom and PlayBook. On other hand, when the Kindle is put in “desktop browsing mode”, it advertises itself as Safari 5/Mac OS X/Webkit 533.16. Under the hood, according to the <a href="http://www.ifixit.com/Teardown/Amazon-Kindle-Fire-Teardown/7099/1">iFixit teardown</a>, the Fire contains a dual-core <span class="caps">ARM</span> processor, specifically the TI <span class="caps">OMAP</span> 4430, which is the same processor as the BlackBerry PlayBook. We therefore expected <a href="http://www.webkit.org/perf/sunspider/sunspider.html">SunSpider</a> scores in the same range as other tablets. As we’ve mentioned before, this current generation of tablets all ship with dual-core processors and all have roughly the same JavaScript optimizations. So the results are again fairly predictable.</p>\r | |
| 298 | \r | |
| 299 | <figure class="aligncenter">\r | |
| 300 | <img src="http://img1.sencha.com/files/misc/amazon-kindle-fire-sunspider.png" alt="Amazon Kindle Fire SunSpider results" height="416" width="636">\r | |
| 301 | <figcaption>For the most part, the Amazon Kindle Fire has similar SunSpider results compared to Apple iPad 2 and BlackBerry PlayBook.</figcaption>\r | |
| 302 | </figure>\r | |
| 303 | \r | |
| 304 | <p>The SunSpider tests are synthetic tests that push the JavaScript engine to its limit. So, next we turned our attention to some more real world tests, looking at CSS3 performance using our own Sencha Animator demos as well as a few other tests. </p>\r | |
| 305 | \r | |
| 306 | <p>We threw caution to the wind and started off on our most challenging CSS3 animation test, the <a href="http://dev.sencha.com/animator/demos/kickfu/">Kick Fu game</a> that was developed for the launch of Sencha Animator. While the game did play, the frame rate was poor and touch responsiveness while animations were running was also substandard. The Fire lacks a separate <span class="caps">GPU</span>, but the <span class="caps">CPU</span> has a competent <span class="caps">GPU</span> core – and even so, it looks like it wasn’t leveraged for hardware acceleration. The Playbook, for example, does a far better job leveraging the same <span class="caps">GPU</span> core. </p>\r | |
| 307 | \r | |
| 308 | <p>Next we tried simpler animations. The Fire performed more smoothly, but had a notably bad implementation of timing. In the video below, the wave movements are controlled by CSS3 animations and are declared at constant speed. Instead, the animation speeds of each element diverge and lag noticeably and visibly from each other. We’ve never seen artifacts of this magnitude before. This got us wondering about the Kindle’s general timer quality, so we ran John Resig’s <a href="http://ejohn.org/blog/accuracy-of-javascript-time/">classic JavaScript timer test</a> and found that the quality of the timer is similar to other Androids: with setInterval triggered every 10ms +5/-3s, with some noticeable latency spikes. (This compares to iOS 5’s best-in-class implementation of 10ms +/-1ms.) This isn’t supposed to matter as much once people get used to using requestAnimationFrame for JavaScript animations, but the Fire doesn’t have that either. </p>\r | |
| 309 | \r | |
| 310 | <figure class="aligncenter">\r | |
| 311 | <iframe src="http://player.vimeo.com/video/32230566?title=0&byline=0&portrait=0&color=4CC208" width="600" height="450" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>\r | |
| 312 | <figcaption><a href="http://dev.sencha.com/animator/demos/rocking-boat/">CSS3 Animations</a> on the Amazon Kindle Fire</figcaption>\r | |
| 313 | </figure>\r | |
| 314 | \r | |
| 315 | <p>We also tested a few other real world areas for performance and correctness. We tried a Canvas based <a href="https://github.com/mojombo/ernie/network">GitHub network graph</a>. Rendering performance was fine and the result was accurate. Pinch/zoom happily also works although Android’s tendency to toggle into low-quality mode when moving content reared its head once again. We also tried out <a href="http://www.effectgames.com/demos/canvascycle/">Canvas Cycle</a> and it worked reasonably well. The frame rate was solid and we were able to change the scene without issue. However, like all webkit implementations, all bets were off when we zoomed and panned the page. Animation stuttered, froze and occasionally the accompanying audio cut out. We also looked at other Canvas animations and they worked at reasonable frame-rates.</p>\r | |
| 316 | \r | |
| 317 | <p>Finally we tested embedded HTML5 audio and video. HTML5 audio playback seemed to work well, although the default playback controls were tiny, hard to touch and didn’t seem to work very well. HTML5 video is “supported’ but tapping play simply launches the video in the native player. Complete HTML5 video support with embedded playback and effects is not there. There also appears to be no Ogg Theora codec on the device as we couldn’t get any Ogg Theora demo to play.</p>\r | |
| 318 | \r | |
| 319 | <blockquote class="pullquote" style="float: none; width:auto;">\r | |
| 320 | <p><span>“</span>The Kindle Fire doesn’t seem designed to run HTML5 apps as a primary goal.”</p>\r | |
| 321 | </blockquote>\r | |
| 322 | \r | |
| 323 | <h3>Sencha Touch Kitchen Sink</h3>\r | |
| 324 | \r | |
| 325 | <p>Our <a href="http://dev.sencha.com/deploy/touch/examples/kitchensink/">Kitchen Sink app</a> is built with Sencha Touch and tests all aspects of our mobile web app framework. The Kitchen Sink gives mobile browsers a good workout as it exercises a huge set of browser features including a wide range of CSS3 effects.</p>\r | |
| 326 | \r | |
| 327 | <p>The first thing we noticed were the crispy <span class="caps">CSS</span> rounded corners. They’re not anti-aliased properly on the Fire. Webkit masks are also not supported. Then we got our first really big surprise of our run through. We found that the Kindle Fire has problems processing touch events with good responsiveness. <a href="http://arstechnica.com/gadgets/news/2011/11/dont-call-it-a-tablet-the-kindle-fire-reviewed.ars"> Update: and we’re not the only reviewers to notice this </a>. And similar to early <span class="caps">HTC</span> phones (since fixed), the OS and browser seem to fight over who gets touch events. Sencha Touch 2 was designed to adapt to this behavior, so the Touch 2 preview kitchen sink works better than the Touch 1 version. And of course, since the Fire is based on Android 2.x, full multi-touch with independently tracked touches is not supported either. </p>\r | |
| 328 | \r | |
| 329 | <p>As you’d expect with a device lacking a <span class="caps">GPU</span>, graphics effects like transitions were less than smooth, although display artifacts were not as bad as the full screen flashes and repaints that are a problem on honeycomb based tablets.</p></p>\r | |
| 330 | \r | |
| 331 | <h3>No to low Impact from “Accelerated Browsing”</h3>\r | |
| 332 | \r | |
| 333 | <p><img class="alignright" src="http://img1.sencha.com/files/misc/Amazon-Silk.jpg" alt="Amazon Silk" height="70" width="250"> One of the main selling points of the Kindle browser is supposed to be its cloud-caching and pipelined <span class="caps">HTTP</span> connection that uses the <span class="caps">SPDY</span> protocol. This does seem to speed up normal page browsing a little, but it’s not very noticeable and we didn’t test this rigorously. But for HTML5 web apps, where code is downloaded and executed, there doesn’t seem to be any performance difference when we tested with acceleration on and off. It doesn’t appear as if client JavaScript is executed on the server-side at all, so the Kindle does not seem to have Opera Mini-style server-side execution. And SunSpider scores were essentially the same when accelerated browsing was turned on or off.</p>\r | |
| 334 | \r | |
| 335 | <figure class="aligncenter">\r | |
| 336 | <iframe src="http://player.vimeo.com/video/32312934?title=0&byline=0&portrait=0&color=4CC208" width="601" height="398" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>\r | |
| 337 | <figcaption><a href="http://t.co/cA4XIoaE">Side-by-side comparison</a> of accelerated vs. unaccelerated browsing for some popular web home pages.</figcaption>\r | |
| 338 | </figure>\r | |
| 339 | \r | |
| 340 | <h3>Kindle Fire: Suggestions for the HTML5 App Developer</h3>\r | |
| 341 | \r | |
| 342 | <p>In summary, the Amazon Kindle Fire doesn’t seem designed to run HTML5 apps as a primary goal. It does a good job of displaying ordinary web pages and its resolution and rendering capabilities meet that need well. But there are too many sharp edges, performance issues, and missing HTML5 features for us to recommend that any developer create web apps primarily for the Kindle Fire. The iPad 2 running iOS 5 continues to be the tablet to beat, with the PlayBook a respectable runner-up in HTML5 capabilities. </p>\r | |
| 343 | <style>\r | |
| 344 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 345 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 346 | </style>\r | |
| 347 | \r | |
| 348 | <div class="feedflare">\r | |
| 349 | <a href="http://feeds.feedburner.com/~ff/extblog?a=dxgDuAZ7Fuc:tDL9ok1EGRA:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=dxgDuAZ7Fuc:tDL9ok1EGRA:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=dxgDuAZ7Fuc:tDL9ok1EGRA:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=dxgDuAZ7Fuc:tDL9ok1EGRA:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=dxgDuAZ7Fuc:tDL9ok1EGRA:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=dxgDuAZ7Fuc:tDL9ok1EGRA:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=dxgDuAZ7Fuc:tDL9ok1EGRA:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=dxgDuAZ7Fuc:tDL9ok1EGRA:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=dxgDuAZ7Fuc:tDL9ok1EGRA:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=dxgDuAZ7Fuc:tDL9ok1EGRA:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 350 | </div>]]></content>\r | |
| 351 | <pubDate>Thu, 17 Nov 2011 14:00 GMT</pubDate>\r | |
| 352 | <guid isPermaLink="false">http://www.sencha.com/blog/html5-scorecard-amazon-kindle-fire/#date:14:00</guid>\r | |
| 353 | <feedburner:origLink>http://www.sencha.com/blog/html5-scorecard-amazon-kindle-fire/#date:14:00</feedburner:origLink></item>\r | |
| 354 | \r | |
| 355 | <item>\r | |
| 356 | <title>Sencha Touch Spotlight: Dyad Communications</title>\r | |
| 357 | <author>Guest</author>\r | |
| 358 | <description>\r | |
| 359 | Dyad Communications is a design firm located in Philadelphia, PA. We build sophisticated mobile websites that integrate the same aesthetic decisions our clients expect in our desktop and print work.\r | |
| 360 | </description>\r | |
| 361 | <link>http://feedproxy.google.com/~r/extblog/~3/JynwtABf-8g/</link>\r | |
| 362 | <content><![CDATA[\r | |
| 363 | \r | |
| 364 | <figure class="aligncenter">\r | |
| 365 | <img src="http://img1.sencha.com/files/misc/ppapc-hero.jpg" alt="iPad Screenshots" height="436" width="636" />\r | |
| 366 | <figcaption>\r | |
| 367 | The tablet websites for Timothy Bryant architect and Peter Pennoyer Architects, built with Sencha Touch.<br />\r | |
| 368 | <a href="http://www.sencha.com/apps/dyad-communications/" class="more-icon">View other apps by Dyad Communications in the App Gallery</a>\r | |
| 369 | </figcaption>\r | |
| 370 | </figure>\r | |
| 371 | \r | |
| 372 | <p><a href="http://www.dyadcom.com" class="right"><img src="http://img1.sencha.com/files/misc/dyad-logo.gif" alt="Dyad Communications design office" height="40" width="267" /></a> <a href="http://www.dyadcom.com">Dyad Communications</a> is a design firm located in Philadelphia, PA. We build sophisticated mobile websites that integrate the same aesthetic decisions our clients expect in our desktop and print work. Our goal is to give clients the same experience on their mobile devices, like the iPhone and iPad, as they have on their desktop website or native apps.</p>\r | |
| 373 | \r | |
| 374 | <h3>Why We Chose Sencha Touch</h3>\r | |
| 375 | \r | |
| 376 | <p>Despite the imminent “demise” of Flash, our clientele remains adamant that we develop sites that operate with a level of design sophistication and elegance that require the use of Flash for a lot of our work. Of course, the lack of support for the Flash player in iOS left us with an issue: how do we best present clients’ websites on mobile devices, in a way that cohesively presents the pre-defined aesthetic of their Flash interface?</p>\r | |
| 377 | \r | |
| 378 | <blockquote class="pullquote right">\r | |
| 379 | <p class="pullquote right"><span>“</span>Using Sencha Touch, a small development team of 1-2 people can translate a large Flash site into an mobile HTML5 version within 3 weeks.”</p>\r | |
| 380 | </blockquote>\r | |
| 381 | \r | |
| 382 | <p>When Sencha Touch was released, we were impressed by the robust library of pre-built components and the responsiveness with which they performed. Suddenly, we could apply our proficiency with Web standards to create mobile re-interpretations that feel as rich as their desktop counterparts. It didn’t take us long to realize that the possibilities inherent in the Sencha Touch framework would help us to easily dive into the new challenges of mobile usability, without spending any time coding touch-based interaction logic.</p>\r | |
| 383 | \r | |
| 384 | <p>Sencha Touch provides a powerful framework for developing websites that feel like native apps. With Sencha Touch, we can easily implement a Carousel of large images that the user just swipes through like a native app. Using Ajax or <span class="caps">JSON</span>, it’s easy to tap into a new or existing content management system, pull data and place it onto a page. This makes it very easy to maintain multiple versions of a site, which is a key part of our efficient work philosophy.</p>\r | |
| 385 | \r | |
| 386 | <figure class="aligncenter clearing">\r | |
| 387 | <a style="float: left; margin-right:10px;" href="http://www.sencha.com/apps/wadia-associates/"><img src="http://src.sencha.io/200/http://img1.sencha.com/files/misc/wadia-associates-03.png" alt="Wadia Associates" title="Wadia Associates"></a>\r | |
| 388 | <a style="float: left; margin-right:10px;" href="http://www.sencha.com/apps/peter-pennoyer/"><img src="http://src.sencha.io/200/http://img1.sencha.com/files/misc/ppapc-01.png" alt="Peter Pennoyer Architects" title="Peter Pennoyer Architects"></a>\r | |
| 389 | <a style="float: left;" href="http://www.sencha.com/apps/les-metalliers-champenois/"><img src="http://src.sencha.io/200/http://img1.sencha.com/files/misc/les-metalliers-champenois-07.png" alt="Les Métalliers Champenois" title="Les Métalliers Champenois"></a>\r | |
| 390 | <figcaption><a href="http://www.sencha.com/apps/wadia-associates/">Wadia Associates</a>, <a href="http://www.sencha.com/apps/peter-pennoyer/">Peter Pennoyer Architects</a>, and <a href="http://www.sencha.com/apps/les-metalliers-champenois/">Les Métalliers Champenois</a><br />\r | |
| 391 | Click through to view these Sencha Touch apps in the App Gallery.</figcaption>\r | |
| 392 | </figure>\r | |
| 393 | \r | |
| 394 | <h3>Business Value of Using Sencha Touch</h3>\r | |
| 395 | \r | |
| 396 | <p>Using Sencha Touch, a small development team of 1-2 people can translate a large Flash site into an mobile <span class="caps">HTML</span> version within 3 weeks. Smaller sites can be developed in a matter of days. This saves a considerable amount of time in development. Using the built-in components of Sencha Touch, we reduce development time by days since we don’t have to implement many usability features like Carousel swiping and multimedia loading including video and audio.</p>\r | |
| 397 | \r | |
| 398 | <p>It also reduces the time we spend debugging for other devices, such as Android, since Sencha Touch has built-in support for those devices. The reliable structure of Sencha Touch ensures that if the site is functional on one device, it will work comparatively on all other devices that support it. In the end, our clients get a robust mobile version of their desktop website that is enhanced with special touch features.</p>\r | |
| 399 | \r | |
| 400 | <figure class="aligncenter clearing">\r | |
| 401 | <a style="float: left; margin-right:10px;" href="http://www.sencha.com/apps/vella-interiors/"><img src="http://src.sencha.io/200/http://img1.sencha.com/files/misc/vella-interiors-05.png" alt="Vella Interiors" title="Vella Interiors"></a>\r | |
| 402 | <a style="float: left; margin-right:10px;" href="http://www.sencha.com/apps/timothy-bryany-architect/"><img src="http://src.sencha.io/200/http://img1.sencha.com/files/misc/timothybryant-06.png" alt="Timothy Bryant" title="Timothy Bryant"></a>\r | |
| 403 | <a style="float: left;" href="http://www.sencha.com/apps/hilton-vanderhorn/"><img src="http://src.sencha.io/200/http://img1.sencha.com/files/misc/hilton-vanderhorn-05.png" alt="Hilton Vanderhorn"></a>\r | |
| 404 | <figcaption><a href="http://www.sencha.com/apps/vella-interiors/">Vella Interiors</a>, <a href="http://www.sencha.com/apps/timothy-bryany-architect/">Timothy Bryant</a>, and <a href="http://www.sencha.com/apps/hilton-vanderhorn/">Hilton Vanderhorn</a><br />\r | |
| 405 | Click through to view these Sencha Touch apps in the App Gallery.</figcaption>\r | |
| 406 | </figure>\r | |
| 407 | \r | |
| 408 | <h3>Our Advice to Developers</h3>\r | |
| 409 | \r | |
| 410 | <p>When approaching a new Sencha Touch project, we aim to incorporate the latest usability paradigms we see gaining traction in popular native apps with the aesthetic already defined in the Flash site we’re adapting. This means extending the <span class="caps">API</span> to build custom interactive components, so a strong understanding of <span class="caps">OOP</span> is a must. Getting your head wrapped around Sencha layout management is a great place to begin, and extensive use of the Sencha Touch <span class="caps">API</span> will give you many new options you didn’t know existed. If you are just starting out, Sencha offers very quick and easy video tutorials that give you a jumpstart on learning the basics about the Sencha Touch framework.</p>\r | |
| 411 | \r | |
| 412 | <h3>Final Thoughts</h3>\r | |
| 413 | \r | |
| 414 | <p>Sencha Touch has allowed us to open up new business opportunities with existing clients and expand the scope of what we can offer new clients without compromising time and profit. We highly recommend using Sencha Touch for not only apps but for mobile websites as well.</p>\r | |
| 415 | <style>\r | |
| 416 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 417 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 418 | </style>\r | |
| 419 | \r | |
| 420 | <div class="feedflare">\r | |
| 421 | <a href="http://feeds.feedburner.com/~ff/extblog?a=JynwtABf-8g:JcyaevvnB9s:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=JynwtABf-8g:JcyaevvnB9s:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=JynwtABf-8g:JcyaevvnB9s:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=JynwtABf-8g:JcyaevvnB9s:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=JynwtABf-8g:JcyaevvnB9s:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=JynwtABf-8g:JcyaevvnB9s:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=JynwtABf-8g:JcyaevvnB9s:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=JynwtABf-8g:JcyaevvnB9s:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=JynwtABf-8g:JcyaevvnB9s:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=JynwtABf-8g:JcyaevvnB9s:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 422 | </div>]]></content>\r | |
| 423 | <pubDate>Fri, 11 Nov 2011 16:59 GMT</pubDate>\r | |
| 424 | <guid isPermaLink="false">http://www.sencha.com/blog/dyad-communications-spotlight/#date:16:59</guid>\r | |
| 425 | <feedburner:origLink>http://www.sencha.com/blog/dyad-communications-spotlight/#date:16:59</feedburner:origLink></item>\r | |
| 426 | \r | |
| 427 | <item>\r | |
| 428 | <title>Sencha Touch Roadshow Coming to a City Near You</title>\r | |
| 429 | <author>Aditya Bansod</author>\r | |
| 430 | <description>\r | |
| 431 | Today we're excited to let you know that we're hosting a free roadshow at five cities in the United States to help developers get up to speed on HTML5 and also Sencha technologies. This free, half-day workshop is designed to educate developers on how they can leverage HTML5 in mobile and how to build rich applications built on open standards. If you're new to HTML5 or new to mobile, this is the perfect workshop for you.\r | |
| 432 | </description>\r | |
| 433 | <link>http://feedproxy.google.com/~r/extblog/~3/ycUMBKot9R8/</link>\r | |
| 434 | <content><![CDATA[\r | |
| 435 | \r | |
| 436 | <figure class="aligncenter"><a href="http://www.sencha.com/products/touch/tour"><img src="http://img1.sencha.com/files/misc/sencha-touch-on-the-road.jpg" alt=""height="362" width="633"></a><figcaption>Catch up with Sencha Touch experts in 5 cities this December at <a class="more-icon" href="http://www.sencha.com/products/touch/tour">our free mobile HTML5 workshops</a>.</figcaption></figure>\r | |
| 437 | \r | |
| 438 | <p>It’s been a really exciting month of news in the mobile app development space. HTML5 is coming in to its own as the premier application platform for building mobile apps. And while it’s been around for a while, it’s still new and unfamiliar to a lot of developers. There are folks looking at HTML5 for the first time, as well as people who are looking to take their HTML5 skills to mobile.</p>\r | |
| 439 | \r | |
| 440 | <p>So, today we’re excited to let you know that <a href="http://www.sencha.com/products/touch/tour">we’re hosting a free roadshow at five cities in the United States</a> to help developers get up to speed on HTML5 and also Sencha technologies! This free, half-day workshop is designed to educate developers on how they can leverage HTML5 in mobile and how to build rich applications built on open standards. If you’re new to HTML5 or new to mobile, this is the perfect workshop for you.</p>\r | |
| 441 | \r | |
| 442 | <p>Bring your own laptop and join us to learn how to build mobile HTML5 applications. We’ll have Sencha experts on hand to show you the ropes of HTML5, and help walk you through app development in a fun, workshop environment. We’ll have coffee ready in the morning and work with you all the way through the free lunch in the afternoon. You’ll be building mobile web apps that work on the best touchscreen devices in no time.</p>\r | |
| 443 | \r | |
| 444 | <p>We’ll be covering the following three topics:</p>\r | |
| 445 | \r | |
| 446 | <ul>\r | |
| 447 | <li>HTML5 basics: what it is and how it’s different from other mobile platforms</li>\r | |
| 448 | <li>Sencha Touch 101: getting your environment ready, and getting started</li>\r | |
| 449 | <li>Building with Native Packaging: get your app to the App Store fast</li>\r | |
| 450 | </ul>\r | |
| 451 | \r | |
| 452 | <p>Space is limited, so if you’re interested, <a href="http://www.sencha.com/products/touch/tour">sign up now</a>!</p>\r | |
| 453 | <style>\r | |
| 454 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 455 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 456 | </style>\r | |
| 457 | \r | |
| 458 | <div class="feedflare">\r | |
| 459 | <a href="http://feeds.feedburner.com/~ff/extblog?a=ycUMBKot9R8:SKUua6nvwro:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=ycUMBKot9R8:SKUua6nvwro:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=ycUMBKot9R8:SKUua6nvwro:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=ycUMBKot9R8:SKUua6nvwro:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=ycUMBKot9R8:SKUua6nvwro:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=ycUMBKot9R8:SKUua6nvwro:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=ycUMBKot9R8:SKUua6nvwro:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=ycUMBKot9R8:SKUua6nvwro:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=ycUMBKot9R8:SKUua6nvwro:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=ycUMBKot9R8:SKUua6nvwro:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 460 | </div>]]></content>\r | |
| 461 | <pubDate>Thu, 10 Nov 2011 12:00 GMT</pubDate>\r | |
| 462 | <guid isPermaLink="false">http://www.sencha.com/blog/sencha-touch-roadshow-coming-to-a-city-near-you/#date:12:00</guid>\r | |
| 463 | <feedburner:origLink>http://www.sencha.com/blog/sencha-touch-roadshow-coming-to-a-city-near-you/#date:12:00</feedburner:origLink></item>\r | |
| 464 | \r | |
| 465 | <item>\r | |
| 466 | <title>Apple iOS 5: HTML5 Developer Scorecard</title>\r | |
| 467 | <author>Aditya Bansod</author>\r | |
| 468 | <description>\r | |
| 469 | Whenever a new device or mobile operating system comes out, we do a HTML5 Developer Scorecard, to help folks who are building mobile web apps understand how to take advantage of these new devices. Today, we look at HTML5 on Apple’s iOS 5.\r | |
| 470 | </description>\r | |
| 471 | <link>http://feedproxy.google.com/~r/extblog/~3/PqoO3_eIHB0/</link>\r | |
| 472 | <content><![CDATA[\r | |
| 473 | \r | |
| 474 | <p><img class="alignleft" src="http://img1.sencha.com/files/misc/iPhone-4S-Sencha.png" alt="Apple iPhone 4S with Sencha logo" width="250"> Whenever a new device or mobile operating system comes out, we do our HTML5 Developer Scorecard to help folks who are building mobile web apps understand how to take advantage of these new devices. In early October, iOS 5 (and the iPhone 4S) was released. In our last few reviews, iOS has come head and shoulders above other device platforms as the best platform for HTML5 developers. High performance, hardware accelerated rendering, super quick JavaScript, and speed of adoption of new HTML5 features, it’s been the best platform to build modern web apps on.</p>\r | |
| 475 | \r | |
| 476 | <blockquote class="pullquote">\r | |
| 477 | <p><span>“</span>Mobile Safari continues to hold the crown as the best mobile browser, providing the best HTML5 developer platform.”</p>\r | |
| 478 | </blockquote>\r | |
| 479 | \r | |
| 480 | <p style="clear:both;">The latest Mobile Safari on iOS 5 continues in that tradition. Mobile Safari continues to hold the crown as the best mobile browser, providing the best HTML5 developer platform as well as adding new features and improving others.</p>\r | |
| 481 | \r | |
| 482 | <p>As usual, we looked at the basics of the browser: JavaScript and <span class="caps">HTML</span>/CSS rendering. For raw JavaScript execution speed, iOS 5 (with the iPhone 4S) isn’t much of a surprise and looks a lot like any other dual-core mobile device (such as the PlayBook and the iPad 2). It scored 2,275ms on the SunSpider benchmark: a solid score, but nothing new in the current hardware landscape. Things that iOS was good at continued to be good, such as smooth and fast hardware accelerated CSS3 transitions and animations. Our typical Sencha Animator tests ran smoothly and continued to render at a higher frame-rate than any other mobile device we’ve seen.</p>\r | |
| 483 | \r | |
| 484 | <p>Given how good Mobile Safari has been, we didn’t run the browser through the usual paces we would have. Instead for this HTML5 Developer Scorecard, we took a look at the things that are new or better on the latest Mobile Safari:</p>\r | |
| 485 | \r | |
| 486 | <ul>\r | |
| 487 | <li><strong>Canvas is crazy fast</strong>. In iOS 5, Canvas is between 5x – 8x faster. We tried two examples to see this work. First, the IE HTML5 <a href="http://ie.microsoft.com/testdrive/Performance/SpeedReading/default.html">Speed Reading</a> Test. In iOS 4.x, the draw durations last roughly ~850ms, versus iOS 5, where they are a constant 10ms. Since that might be too synthetic, we also tried the Flash Canvas <a href="http://flashcanvas.net/examples/accelart.jp/blog/CanvasBench/CanvasBenchFlashCanvas.html">image manipulation benchmark</a>. It reports the number of milliseconds the manipulation sequence takes. On iOS 4.x, this was ~19,000ms, but on iOS 5 it reported ~450ms. As with all benchmarks, take the result with a grain of salt, but for game developers building on Canvas, iOS 5 is a <strong>much</strong> more attractive platform for graphics.</li>\r | |
| 488 | </ul>\r | |
| 489 | \r | |
| 490 | <ul>\r | |
| 491 | <li><img class="alignright" src="http://img1.sencha.com/files/misc/WebGL_logo.png" alt="WebGL logo"><strong>WebGL is supported</strong>. Sort of. If you’re an iAd developer, you can use WebGL in your ads, but you can’t use it through Mobile Safari or through a wrapped UIWebView. This is a limitation put in place intentionally by Apple as it’s possible to <a href="http://atnan.com/blog/2011/11/03/enabling-and-using-webgl-on-ios/">work around</a> the restriction in a wrapped UIWebView, but only by linking to private <span class="caps">API</span>s — which means you can’t submit the resulting app to the app store.</li>\r | |
| 492 | </ul>\r | |
| 493 | \r | |
| 494 | <ul>\r | |
| 495 | <li><strong>You can use compass directions</strong>! The DeviceOrientationEvent now supports compass headings via a new webkitCompassHeading property. The property gives you the device’s orientation relative to magnetic north. Check out James’ <a href="http://jamesgpearce.github.com/compios5/">sample</a> on your iOS 5 device to see it working.</li>\r | |
| 496 | </ul>\r | |
| 497 | \r | |
| 498 | <ul>\r | |
| 499 | <li><strong>Better <span class="caps">CSS</span> <code>position</code> and <code>overflow</code> support</strong>. In iOS 5, <code>position: fixed</code> and <code>overflow: scroll</code> both work. If you’re looking to add some scrollable areas with native feeling bounce, you can now do it with these <span class="caps">CSS</span> properties. You don’t get a ton of control but if you’re looking to have a scrollable area in your web app, this is a really quick way to get it. There’s also a special iOS property, <code>-webkit-overflow-scrolling: touch</code>, which changes the scroll behavior to be more “iPhone”-like.</li>\r | |
| 500 | </ul>\r | |
| 501 | \r | |
| 502 | <ul>\r | |
| 503 | <li><strong>WebWorkers work!</strong> In our testing we confirmed that WebWorkers — the <span class="caps">API</span> to let you spin up background “threads” is now enabled in iOS 5. It makes sense that this arrives just as the iPhone goes multi-core. This is great for developers who need to do some background processing in their application. That can be data updates to a server, or preprocessing some information, or anything else you can imagine when you don’t want to block the main browser UI thread. Now that iOS 5 has support for the <span class="caps">API</span>, we’re interested to see how it’ll end up being used in mobile (and in using it ourselves).</li>\r | |
| 504 | </ul>\r | |
| 505 | \r | |
| 506 | <ul>\r | |
| 507 | <li><strong>HTML5 form fields are supported</strong>, including number, range, and date picker. This is great for an HTML5 developer because iOS now opens the appropriate on-screen keyboard based on the input tag type.</li>\r | |
| 508 | </ul>\r | |
| 509 | \r | |
| 510 | <ul>\r | |
| 511 | <li><strong>XmlHttpRequest, level 2 is supported</strong>. Anybody who builds complex apps that use <span class="caps">XHR</span> to talk to a server is used to the hacks that <span class="caps">XHR</span> level 1 required. In iOS 5, <span class="caps">XHR</span> level 2 is supported so you can use capabilities like cross-origin support, binary data support, and more.</li>\r | |
| 512 | </ul>\r | |
| 513 | \r | |
| 514 | <p><img class="alignright" src="http://img1.sencha.com/files/misc/apple-ios5.jpg" alt="Apple iOS5 icon" height="165" width="153"> Mobile Safari in iOS 5 continues Apple’s tradition of delivering a first class browser and innovating in device <span class="caps">API</span>s. Of course, there are more we’d like to see soon, primarily the MediaCapture <span class="caps">API</span>s so web developers can get better access to the device camera. We’re particularly happy about the super-fast Canvas and really interested to see what developers will do with WebWorker support in mobile. </p>\r | |
| 515 | <style>\r | |
| 516 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 517 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 518 | </style>\r | |
| 519 | \r | |
| 520 | <div class="feedflare">\r | |
| 521 | <a href="http://feeds.feedburner.com/~ff/extblog?a=PqoO3_eIHB0:irKfBWvbLYA:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=PqoO3_eIHB0:irKfBWvbLYA:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=PqoO3_eIHB0:irKfBWvbLYA:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=PqoO3_eIHB0:irKfBWvbLYA:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=PqoO3_eIHB0:irKfBWvbLYA:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=PqoO3_eIHB0:irKfBWvbLYA:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=PqoO3_eIHB0:irKfBWvbLYA:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=PqoO3_eIHB0:irKfBWvbLYA:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=PqoO3_eIHB0:irKfBWvbLYA:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=PqoO3_eIHB0:irKfBWvbLYA:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 522 | </div>]]></content>\r | |
| 523 | <pubDate>Fri, 04 Nov 2011 16:00 GMT</pubDate>\r | |
| 524 | <guid isPermaLink="false">http://www.sencha.com/blog/apple-ios-5-html5-developer-scorecard/#date:16:00</guid>\r | |
| 525 | <feedburner:origLink>http://www.sencha.com/blog/apple-ios-5-html5-developer-scorecard/#date:16:00</feedburner:origLink></item>\r | |
| 526 | \r | |
| 527 | <item>\r | |
| 528 | <title>The Sencha Hackathon Recap</title>\r | |
| 529 | <author>James Pearce</author>\r | |
| 530 | <description>\r | |
| 531 | SenchaCon in Austin last week really reaffirmed our belief in the strength of the Sencha community - and most especially on day three, when we hosted our biggest ever Sencha Hackathon.\r | |
| 532 | </description>\r | |
| 533 | <link>http://feedproxy.google.com/~r/extblog/~3/r594fgyN5oU/</link>\r | |
| 534 | <content><![CDATA[\r | |
| 535 | \r | |
| 536 | <p><img class="alignright rounded shadow" src="http://src.sencha.io/240/http://img1.sencha.com/files/misc/senchacon-hackathon-slide.jpg" alt="The Sencha Hackathon Recap"> There are hackthons. And then there is the SenchaCon hackathon.</p>\r | |
| 537 | \r | |
| 538 | <p>Day three of our awesome conference in Austin last week really reaffirmed our belief in the strength of the Sencha community. I’ve rarely seen such a concentration of talent, enthusiasm, and friendship—not mention amazing productivity—come together so well.</p>\r | |
| 539 | \r | |
| 540 | <p>We wanted to stimulate competition and organized a number of prize categories for the event. The Google Chrome team sponsored the event as a whole, and also kindly offered Chromebook hardware as a prize for ‘Best use of HTML5 <span class="caps">API</span>’. We also offered ‘Best Desktop’ and ‘Best Mobile’ categories, as well as spot prizes for additional interesting application categories.</p>\r | |
| 541 | \r | |
| 542 | <p>Once our introductory pleasantries were over, we decided to make sure that teams could get coding as quickly as possible. The amicable vibe of the whole conference helped immediately, as cohesive groups quickly formed around exciting ideas that community members proposed.</p>\r | |
| 543 | \r | |
| 544 | <figure class="aligncenter clearing">\r | |
| 545 | <a style="float: left; margin-right:10px;" href="http://www.flickr.com/photos/nils-dehl/6287802051/"><img src="http://src.sencha.io/205/http://farm7.static.flickr.com/6055/6287802051_e154fbe0d8_m.jpg" alt=""></a>\r | |
| 546 | <a style="float: left; margin-right:10px;" href="http://www.flickr.com/photos/nils-dehl/6288322832/"><img class="photomatte" src="http://src.sencha.io/205/http://farm7.static.flickr.com/6116/6288322832_c8f6687b1f_m.jpg" alt="Hackathon hackers."></a>\r | |
| 547 | <a style="float: left;" href="http://www.flickr.com/photos/nils-dehl/6288321780/"><img src="http://src.sencha.io/205/http://farm7.static.flickr.com/6092/6288321780_1ce717cb81_m.jpg" alt="Arthur Kay"></a>\r | |
| 548 | <figcaption style="clear:both;">Hackathon hackers. Photos by <a href="http://www.flickr.com/photos/nils-dehl/">Nils Dehl</a>.</figcaption>\r | |
| 549 | </figure>\r | |
| 550 | \r | |
| 551 | <p>Caffeine, power, and a decent wifi connection are the other ingredients required to keep teams working hard during the day. We just about managed all three, and certainly the arrival of the Red Bull support team helped any flagging programmers get through the final few hours.</p>\r | |
| 552 | \r | |
| 553 | <p>By the time we reached 4pm—after over 6 hours of frantic coding, an astonishing 20 teams were ready to jump up onto our vast stage and present the results.</p>\r | |
| 554 | \r | |
| 555 | <p>And what results they were: we had news visualizations, signal strength detectors, web-based file sharing, games, database administration tools, collaborative drawing and learning tools, social networks, and many many more. The variety was almost as amazing as the quality.</p>\r | |
| 556 | \r | |
| 557 | <figure class="aligncenter clearing">\r | |
| 558 | <a style="float: left; margin-right:10px;" href="http://www.flickr.com/photos/nils-dehl/6288323098/"><img src="http://src.sencha.io/205/http://farm7.static.flickr.com/6099/6288323098_bf0d1968e5_m.jpg" alt=""></a>\r | |
| 559 | <a style="float: left; margin-right:10px;" href="http://www.flickr.com/photos/nils-dehl/6287803939/"><img class="photomatte" src="http://src.sencha.io/205/http://farm7.static.flickr.com/6112/6287803939_736d6bc0d6_z.jpg" alt="Hackathon hackers."></a>\r | |
| 560 | <a style="float: left;" href="http://www.flickr.com/photos/nils-dehl/6287802935/"><img src="http://src.sencha.io/205/http://farm7.static.flickr.com/6235/6287802935_a28dd27288_m.jpg" alt="Andrea Cammarata"></a>\r | |
| 561 | </figure>\r | |
| 562 | \r | |
| 563 | <p>After a very tough judging session, we announced the main winners. And they were:</p>\r | |
| 564 | \r | |
| 565 | <h4>Best use of an HTML5 <span class="caps">API</span>: Lamp Post</h4>\r | |
| 566 | \r | |
| 567 | <p>Multi-user music file sharing using Chrome’s File <span class="caps">API</span>, featuring real-time chat and notification of shared directories using a Node JS backend with <a href='https://github.com/storminwalker/node-extjs'>node-extjs</a>. The team won a Chromebook and $500, kindly sponsored by Google Chrome.</p>\r | |
| 568 | \r | |
| 569 | <h4>Best Desktop App: Code Cowboys</h4>\r | |
| 570 | \r | |
| 571 | <p>A crowd-sourced unit testing application for Ext JS and Sencha Touch. The team won an iPad 2 and $500.</p>\r | |
| 572 | \r | |
| 573 | <h4>Best Mobile / Tablet App: Presencha</h4>\r | |
| 574 | \r | |
| 575 | <p>Upload slides in <span class="caps">PDF</span> form, and present live to any device for collaborative viewing by an audience. The team won an iPad 2 and $500.</p>\r | |
| 576 | \r | |
| 577 | <p>The <a href="http://www.presencha.com/">Presencha</a> team have made their code available on <a href="https://github.com/cianclarke/Presencha">GitHub</a>, and are aiming to have their service available soon.</p>\r | |
| 578 | \r | |
| 579 | <p>We then had a number of additional categories which teams were gunning for. Each of these teams won $250.</p>\r | |
| 580 | \r | |
| 581 | <p><strong>Best Social App: LinkedUp</strong><br />\r | |
| 582 | A mobile social network for entrepreneurs and innovators.</p>\r | |
| 583 | \r | |
| 584 | <p><strong>Best Austin-related App: Dirty 6th</strong><br />\r | |
| 585 | Shows bars, clubs and other venues near a user’s location or and in downtown Austin.</p>\r | |
| 586 | \r | |
| 587 | <p><strong>Best Educational App: <a href='http://www.box.net/shared/fuyl92f0e98mocy89ugv'>iKnow</a></strong><br />\r | |
| 588 | A mobile application to learn or memorize anything</p>\r | |
| 589 | \r | |
| 590 | <p><strong>Best App by a Novice Team: Doodleshare</strong><br />\r | |
| 591 | A screen-sharing application to allow games such as Charades and Pictionary on mobile and tablet devices.</p>\r | |
| 592 | \r | |
| 593 | <p>We also had two discretionary prizes for apps that impressed the judges above and beyond these categories. These were <strong>TouchMySql</strong> and the <strong>German Rockstars</strong> team.</p>\r | |
| 594 | \r | |
| 595 | <p>At events like this, we hope that every one feels they are a winner! If you were there, I hoped you enjoyed the experience of being able to rub shoulders with your peers and the Sencha teams. It was an awesome way to wrap up the whole conference, and we look forward to hosting you all next year!</p>\r | |
| 596 | <style>\r | |
| 597 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 598 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 599 | </style>\r | |
| 600 | \r | |
| 601 | <div class="feedflare">\r | |
| 602 | <a href="http://feeds.feedburner.com/~ff/extblog?a=r594fgyN5oU:fVqlGBelXvg:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=r594fgyN5oU:fVqlGBelXvg:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=r594fgyN5oU:fVqlGBelXvg:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=r594fgyN5oU:fVqlGBelXvg:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=r594fgyN5oU:fVqlGBelXvg:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=r594fgyN5oU:fVqlGBelXvg:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=r594fgyN5oU:fVqlGBelXvg:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=r594fgyN5oU:fVqlGBelXvg:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=r594fgyN5oU:fVqlGBelXvg:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=r594fgyN5oU:fVqlGBelXvg:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 603 | </div>]]></content>\r | |
| 604 | <pubDate>Wed, 02 Nov 2011 17:00 GMT</pubDate>\r | |
| 605 | <guid isPermaLink="false">http://www.sencha.com/blog/the-sencha-hackathon-recap/#date:17:00</guid>\r | |
| 606 | <feedburner:origLink>http://www.sencha.com/blog/the-sencha-hackathon-recap/#date:17:00</feedburner:origLink></item>\r | |
| 607 | \r | |
| 608 | <item>\r | |
| 609 | <title>SenchaCon 2011—The Mega Recap</title>\r | |
| 610 | <author>Michael Mullany</author>\r | |
| 611 | <description>\r | |
| 612 | SenchaCon 2011 was an awesome event for the team and the community. We had over 600 attendees attending more than 50 unique sessions, a rocking party and a fantastic hackathon. Here's the highlights of last week's mega-event!\r | |
| 613 | </description>\r | |
| 614 | <link>http://feedproxy.google.com/~r/extblog/~3/LKH7gKvjFEg/</link>\r | |
| 615 | <content><![CDATA[\r | |
| 616 | \r | |
| 617 | <p><img class="aligncenter" src="http://img1.sencha.com/files/misc/SenchaCon-Thank-You-blog-image.jpg" alt="SenchaCon 2011" height="292" width="636"></p>\r | |
| 618 | \r | |
| 619 | <p>We had a fantastic time last week in Austin, hosting the Sencha Community for SenchaCon 2011! Once again, we had record attendance, with over 600 developers attending more than 50 sessions over two days, and a full day hackathon that produced some pretty impressive apps. We were incredibly humbled by the huge commitment that so many of the community made to spend three days engaging with the Sencha team and sharing their experiences with us and with each other. </p>\r | |
| 620 | \r | |
| 621 | <p>At Sencha, we want to equip application developers to create the next generation of awesome apps. What we’ve seen in the last four years is a huge discontinuity in how and where end-users want to interact with data and content. The most obvious trend is the rise of mobile devices, but equally as important is the now-ubiquitous integration of social sharing and the emergence of HTML5 as the consensus technology platform of the future. As we go forward, we see a world with an ever-increasing diversity of devices and device <span class="caps">API</span>s. It’s a world where HTML5 powers the client apps, and they’re enriched with local <span class="caps">API</span>s that execute on everything from traditional desktops to Smart TV’s. And cloud services provide the fabric that enables continuous, shared experiences across the diversity of end-devices. We think this is the platform for the web.</p>\r | |
| 622 | \r | |
| 623 | <p>It’s clear that the world is going through what we call “The Big App Rewrite”. And one of our big goals at SenchaCon was to outline how our products are going to evolve to help you create applications for that world. As we shared in our keynote, we’re focused on the three building blocks you’ll need to build your apps: frameworks, tools and cloud services. In frameworks, we showed off the latest in Ext JS 4, Sencha Touch 2 and Ext <span class="caps">GWT</span> 3. In tools, we demonstrated the latest in Sencha Designer and Animator. And we were also very excited to launch the full set of Sencha.io mobile cloud services. </p>\r | |
| 624 | \r | |
| 625 | <p><img class="aligncenter" src="http://img1.sencha.com/files/misc/aditya-bansod-sencha-platform.jpg" alt="Aditya Bansod details the Sencha Platform." height="375" width="600"></p>\r | |
| 626 | \r | |
| 627 | <h3>The Big Announcements and Introductions!</h3>\r | |
| 628 | \r | |
| 629 | <p>As mentioned above, SenchaCon attendees got first look at some pretty cool stuff that we’ve been working on. We’ll be blogging about these in more detail soon. But here are the highlights:</p>\r | |
| 630 | \r | |
| 631 | <ul>\r | |
| 632 | <li>The official beta of Sencha.io—an insanely easy-to-use set of mobile cloud services designed to plug easily into Sencha Touch.</li>\r | |
| 633 | <li>The developer preview of Sencha Designer 2.0, now with support for creating Sencha Touch apps, event bindings, code editing and even native packaging</li>\r | |
| 634 | <li>The preliminary performance numbers from Ext JS 4.1 showing the 2x performance improvement we’ve been able to engineer over 4.0</li>\r | |
| 635 | <li>Live demos of the developer preview of Sencha Touch 2 showing the much improved Android and orientation change performance</li>\r | |
| 636 | <li>The latest preview of the all-new Ext <span class="caps">GWT</span> 3 with Cell-based data widgets, Cell-based fields, a new data <span class="caps">API</span>, new charts, and theming.</li>\r | |
| 637 | </ul>\r | |
| 638 | \r | |
| 639 | <p>We also announced that we’ve raised another $15M in Series B funding. The round was led by Jafco Ventures with the participation of our existing funding partners, Sequoia Capital and Radar Partners. We’d like to welcome Jafco to the Sencha community!</p>\r | |
| 640 | \r | |
| 641 | <p><img class="aligncenter" src="http://img1.sencha.com/files/misc/aditya-bansod-apps.jpg" alt="Aditya Bansod shows off the rich app economy produced with Sencha technologies." height="412" width="613"></p>\r | |
| 642 | \r | |
| 643 | <h3>The Ever Growing Sencha Community</h3>\r | |
| 644 | \r | |
| 645 | <p>There are now over 1.6 million Sencha developers in 201 countries and in 33 different timezones. And 300,000 of you are now registered on our forums. We truly are a worldwide community! We’ve had 68 meet ups this year! And we’re proud to say that we see more and more community members starting up new groups in your cities. We gave sneak peeks of a couple of really cool things coming down the road for the community and our partners. The first was a new partnership program that adds two new tiers of service partnerships to the existing community tier of www.senchadevs.com. (We’ll be rolling this out fully in Q1 of next year.) And we also showed a super-fast sneak peek of the Sencha Marketplace, a listing service for the community to showcase their user extensions, themes, templates and plugins. We’re really excited about this and look forward to your feedback as we move toward launching this. </p>\r | |
| 646 | \r | |
| 647 | <p><img class="aligncenter" src="http://img1.sencha.com/files/misc/sencha-community.jpg" alt="Sencha community members" height="412" width="613"></p>\r | |
| 648 | \r | |
| 649 | <p><img class="alignright" src="http://img1.sencha.com/files/misc/jacky-nguyen.jpg" alt="Jacky Nguyen delivered a great presentation on the Sencha Class System." height="200" width="289"></p>\r | |
| 650 | \r | |
| 651 | <h3>The Top Rated Sessions</h3>\r | |
| 652 | \r | |
| 653 | <p>This year’s session content got a huge thumbs up—thanks in part to listening to all of your suggestions from last year’s SenchaCon. By far the crowd favorite of the conference was Jacky Nguyen’s commanding performance on the new Ext JS 4 class system. Jacky also showed off some very cool performance wizardry for Sencha Touch that we hope to ship in Touch 2. In addition, we want to give a special shout-out to Craig Walker of Xero, whose node.js session also got huge thumbs up from our crowd. </p>\r | |
| 654 | \r | |
| 655 | <h3>Slides and Video Recordings</h3>\r | |
| 656 | \r | |
| 657 | <p>The Sencha Team and all our community code presenters made a huge effort to create fantastic content for this year’s conference. And soon, we’ll be able to share it with the whole community. We’ll start uploading session slides later this week, and as soon as the videos are finished in post-processing we’ll also be releasing those. Conference attendees will be able to access videos first, but shortly thereafter, we’ll release them to the general community. </p>\r | |
| 658 | \r | |
| 659 | <p>We had an awesome time hosting SenchaCon 2011. We want to thank everyone for their amazing contributions and we look forward to seeing you at the next conference!</p>\r | |
| 660 | <style>\r | |
| 661 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 662 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 663 | </style>\r | |
| 664 | \r | |
| 665 | <div class="feedflare">\r | |
| 666 | <a href="http://feeds.feedburner.com/~ff/extblog?a=LKH7gKvjFEg:OYnNeTAPfxY:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=LKH7gKvjFEg:OYnNeTAPfxY:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=LKH7gKvjFEg:OYnNeTAPfxY:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=LKH7gKvjFEg:OYnNeTAPfxY:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=LKH7gKvjFEg:OYnNeTAPfxY:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=LKH7gKvjFEg:OYnNeTAPfxY:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=LKH7gKvjFEg:OYnNeTAPfxY:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=LKH7gKvjFEg:OYnNeTAPfxY:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=LKH7gKvjFEg:OYnNeTAPfxY:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=LKH7gKvjFEg:OYnNeTAPfxY:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 667 | </div>]]></content>\r | |
| 668 | <pubDate>Tue, 01 Nov 2011 17:00 GMT</pubDate>\r | |
| 669 | <guid isPermaLink="false">http://www.sencha.com/blog/senchacon-2011-recap/#date:17:00</guid>\r | |
| 670 | <feedburner:origLink>http://www.sencha.com/blog/senchacon-2011-recap/#date:17:00</feedburner:origLink></item>\r | |
| 671 | \r | |
| 672 | <item>\r | |
| 673 | <title>SenchaCon 2011 Contest Winners</title>\r | |
| 674 | <author>James Pearce</author>\r | |
| 675 | <description>\r | |
| 676 | Our SenchaCon 2011 Contest encouraged our community to build the best apps possible with Sencha technologies. And, as ever, the entries did not disappoint! We had hundreds of application submissions, and the standard was extremely high.\r | |
| 677 | </description>\r | |
| 678 | <link>http://feedproxy.google.com/~r/extblog/~3/p2ukcC1IWxQ/</link>\r | |
| 679 | <content><![CDATA[\r | |
| 680 | \r | |
| 681 | <p><figure class="aligncenter">\r | |
| 682 | <img src="http://img1.sencha.com/files/misc/share-contest-hero.jpg" alt="Share Contest winners" height="418" width="636">\r | |
| 683 | <figcaption>Congrats to Getographer, WikPic, and Wrike—winners of our SenchaCon Share Contest!</figcaption><br />\r | |
| 684 | </figure></p>\r | |
| 685 | \r | |
| 686 | <p>Our <a href='http://www.sencha.com/share-contest'>SenchaCon 2011 Contest</a> encouraged our community to build the best apps possible with Sencha technologies. And, as ever, the entries did not disappoint! We had hundreds of application submissions, and the standard was extremely high.</p>\r | |
| 687 | \r | |
| 688 | <p>The contest encouraged the entrants to build apps with a number of characteristics. We were looking for the use of contemporary Sencha frameworks, cloud- & sync-based services, and apps which exhibited sharing and social functionality. And this week, at SenchaCon 2011 itself, in Austin, we announced the short list, the finalists, and the winner.</p>\r | |
| 689 | \r | |
| 690 | <p><a class="alignright" href="http://www.sencha.com/apps/getographer/"><img src="http://img1.sencha.com/files/misc/getographer.png" alt="Getographer, Sencha Touch app icon" height="80" width="122"></a> We had great pleasure to announce that the winner of the contest was <strong>Getographer</strong>. This is a photo sharing application with a difference: as well as being able to take and share photographs, you are also able to make requests to have certain photographs taken for you in certain locations.</p>\r | |
| 691 | \r | |
| 692 | <p>The judges loved this application partly because its user interface is elegant and easy to use, but belies a complex application underneath. The camera integration into this Sencha Touch app is seamless and effective, as was the use of system notifications. The app is themed elegantly and works equally well on both Android and iOS devices.</p>\r | |
| 693 | \r | |
| 694 | <p>The application is already available for download from each of the two app stores, and of course <a href="http://www.sencha.com/apps/getographer/">we’ve also listed it on our new app gallery</a>. And we’re thrilled that the team wins nothing less than a 2011 Nissan Leaf!</p>\r | |
| 695 | \r | |
| 696 | <p><a class="alignright" href="http://www.sencha.com/apps/wikpic/"><img src="http://img1.sencha.com/files/misc/wikpic.png" alt="WikPic, Sencha Touch app icon" height="80" width="122"></a> Our second placed app, winning a MacBook Pro and $10,000, was <strong>WikPic</strong>, a tablet-based gallery viewer. Judges loved the simplicity of the controls and the social interaction—such as being able to comment on photos and pull up galleries created by members of your social networks. A great demonstration of how a web application can look and feel like a native one, and how social network integration can be easily integrated into a client-side web app.</p>\r | |
| 697 | \r | |
| 698 | <p><a class="alignright" href="http://www.wrike.com/"><img src="http://img1.sencha.com/files/misc/wrike.png" alt="Wrike, Ext JS application icon" height="80" width="122"></a> In third place, winning an iPad 2 and $2,500, was <strong>Wrike</strong>, an Ext-JS-based project-management application designed for enterprise collaboration. The application allows the creation of tasks, status updates and comments, and strongly encourages social interaction between employees. Judges particularly liked the app’s subtle and contemporary theme, as well as some excellent user interface components, such as its Gantt chart.</p>\r | |
| 699 | \r | |
| 700 | <p>Special mention should also go to our seven other runners up, each of whom receive $1,500 in prize money. They are, in alphabetical order, <strong>Crave</strong>, <strong>Cube Drive</strong>, <strong>Latte Connect</strong>, <strong>Rapasso</strong>, <strong>Record Evolution</strong>, <strong>S-Circles</strong>, and <strong>YoBlurty</strong>. Well done to them all!</p>\r | |
| 701 | \r | |
| 702 | <p>We had a lot of fun judging this contest, and as ever, are humbled by the quality of applications that our community creates. We hope that everyone who entered enjoyed rising to the challenge as much as we did putting it on. You can be sure there will be more contests in the future like this one!</p>\r | |
| 703 | \r | |
| 704 | <p>In the meantime, please go and try out these applications—as well as those of the runners-up. Many congratulations to all involved.</p>\r | |
| 705 | <style>\r | |
| 706 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 707 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 708 | </style>\r | |
| 709 | \r | |
| 710 | <div class="feedflare">\r | |
| 711 | <a href="http://feeds.feedburner.com/~ff/extblog?a=p2ukcC1IWxQ:L0ZsaZW87w0:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=p2ukcC1IWxQ:L0ZsaZW87w0:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=p2ukcC1IWxQ:L0ZsaZW87w0:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=p2ukcC1IWxQ:L0ZsaZW87w0:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=p2ukcC1IWxQ:L0ZsaZW87w0:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=p2ukcC1IWxQ:L0ZsaZW87w0:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=p2ukcC1IWxQ:L0ZsaZW87w0:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=p2ukcC1IWxQ:L0ZsaZW87w0:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=p2ukcC1IWxQ:L0ZsaZW87w0:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=p2ukcC1IWxQ:L0ZsaZW87w0:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 712 | </div>]]></content>\r | |
| 713 | <pubDate>Thu, 27 Oct 2011 12:02 GMT</pubDate>\r | |
| 714 | <guid isPermaLink="false">http://www.sencha.com/blog/senchacon-2011-contest-winners/#date:12:02</guid>\r | |
| 715 | <feedburner:origLink>http://www.sencha.com/blog/senchacon-2011-contest-winners/#date:12:02</feedburner:origLink></item>\r | |
| 716 | \r | |
| 717 | <item>\r | |
| 718 | <title>Ext JS 4.1 Performance Preview</title>\r | |
| 719 | <author>Ed Spencer</author>\r | |
| 720 | <description>\r | |
| 721 | Today we're pleased to release a performance preview of Ext JS 4.1. As we've blogged before, this release is all about performance. Read on to find out more about the latest version of our flagship JavaScript framework.\r | |
| 722 | </description>\r | |
| 723 | <link>http://feedproxy.google.com/~r/extblog/~3/Fx-WV1x_Bos/</link>\r | |
| 724 | <content><![CDATA[\r | |
| 725 | \r | |
| 726 | <p><img class="alignright" src="http://img1.sencha.com/files/misc/ext-js-4-1-developer-preview-thumb.png" alt="Ext JS 4.1 Performance Preview" height="90" width="120"> Today we’re excited to release a preview of the performance improvements coming in Ext JS 4.1. We’ve been working hard over the last several months to dramatically improve load time, render and layout performance across the entire framework. For the last several months we’ve been benchmarking and performance tuning with our own examples as well as a number of your apps across a range of browsers, and we’ve made some significant improvements.</p>\r | |
| 727 | \r | |
| 728 | <p>Today we’d like to open the current build up to everyone so you can see the speed increase in your own apps. We’d like you to test this release out with your own apps, but want to be very upfront about the nature of this build. This is a <strong>pre-beta performance preview</strong> and has known issues with some components. We don’t recommend using this in production but we would love to hear its impact on loading, rendering and layout performance in your apps.</p>\r | |
| 729 | \r | |
| 730 | <p class="button-group">\r | |
| 731 | <a class="button-link inline small arrow" href="http://cdn.sencha.io/ext-4.1-pr1.zip" title="Download Ext JS 4.1 Developer Preview"><span>Download Ext JS 4.1 Developer Preview</span></a>\r | |
| 732 | </p>\r | |
| 733 | \r | |
| 734 | <h3>What Makes a Web App Fast</h3>\r | |
| 735 | \r | |
| 736 | <p>When we look at what takes up time in a web application, we find it falls into three main categories:</p>\r | |
| 737 | \r | |
| 738 | <ul>\r | |
| 739 | <li><strong>Initialization</strong>: setting up all the class definitions and preparing for launch</li>\r | |
| 740 | <li><strong>Rendering</strong>: creating the HTML markup for all of your components, putting it in the DOM</li>\r | |
| 741 | <li><strong>Layout</strong>: reading CSS information, sizing and positioning all of the components on the page</li>\r | |
| 742 | </ul>\r | |
| 743 | \r | |
| 744 | <p>Measuring the relative impacts of these three areas is important in understanding what to optimize. We’re going to use the SDK’s Theme Viewer example to demonstrate hard data for this post, but the same general outcome follows all of the examples we have been testing.</p>\r | |
| 745 | \r | |
| 746 | <p>The Themes Viewer is pretty heavy–it contains over 300 Components, all rendered to the screen on startup. It’s more complex than most startup screens, even in the biggest apps, so we think it’s a good guide to what happens in highly complex UIs.</p>\r | |
| 747 | \r | |
| 748 | <p>All of the numbers presented here are measured on Internet Explorer 8 running on commodity, consumer grade hardware. (We test across a range of browsers and examples but this is a representative example). When we run the benchmarks with this setup on the themes viewer, we find that the page takes 4.5 seconds to finish loading. Obviously, we want to make it faster than that and we set ourselves the ambitious goal of halving the load time.</p>\r | |
| 749 | \r | |
| 750 | <h3>How We Made It Faster</h3>\r | |
| 751 | \r | |
| 752 | <p>Obviously, layout is enormously expensive when dealing with screens filled with this many components, but rendering and initialization could be improved too. We tackled each in turn, yielding substantial improvements:</p>\r | |
| 753 | \r | |
| 754 | <h4>Layouts</h4>\r | |
| 755 | \r | |
| 756 | <p>Layouts were by far the biggest component of application time in 4.0. Layouts have to do a lot–figuring out the sizes and positions of every Component on the page, allowing for margins, padding and borders specified in CSS, then writing all of those values into the DOM. But by altering the order of operations, we’ve been able to substantially improve performance.</p>\r | |
| 757 | \r | |
| 758 | <p>Browsers are optimized to do DOM reads and writes in chunks–so interspersing lots of reads and writes can lead to diminished performance through reflows, repaints and cache invalidations. In 4.0 this was well optimized at the individual Component level but was not well optimized when lots of Components were laid out together.</p>\r | |
| 759 | \r | |
| 760 | <p>With 4.1 we have developed a system that batches DOM reads and writes into a small number of read/write cycles, which vastly reduces the number of reflows and repaints the browser has to perform. We’ll be following up with a lot more detail on what’s changed with the layout engine in another blog post.</p>\r | |
| 761 | \r | |
| 762 | <h4>Bulk Rendering</h4>\r | |
| 763 | \r | |
| 764 | <p>Moving beyond layouts, we next addressed rendering. Rendering 300 Components in one go is quite demanding of the browser, but just like with layouts we were able to batch together the DOM writes required to render everything to the page. Whereas before each Component was rendered separately, in 4.1 the entire Component tree from the Viewport down is rendered in a single write.</p>\r | |
| 765 | \r | |
| 766 | <p>This approach yields another big reduction in startup time. Compared with 1100ms in 4.0, 4.1 renders all 300 of the theme viewer Components in <strong>350ms</strong>–that’s a about 1ms per Component, and a 3x speedup over 4.0.7.</p>\r | |
| 767 | \r | |
| 768 | <h4>Initialization</h4>\r | |
| 769 | \r | |
| 770 | <p>Finally, we next addressed the lower levels of the framework and optimized a number of functions from the class system through to utilities like MixedCollection. The cumulative effect of these improvements took us from 730ms in 4.0.7 to <strong>300ms</strong> in 4.1–again more than a 2x speed-up.</p>\r | |
| 771 | \r | |
| 772 | <h4>Results</h4>\r | |
| 773 | \r | |
| 774 | <p>All of this adds up. While Ext JS 4.0.7 took 4.5 seconds to render this large screen full of Components, the Ext JS 4.1 developer preview does it in just 2.2 seconds. This is a 2x speed improvement on this complex example running on IE8.</p>\r | |
| 775 | \r | |
| 776 | <p><figure class="aligncenter">\r | |
| 777 | <img src="http://img1.sencha.com/files/misc/Themes-viewer-load-performance.png" alt="Themes Viewer load performance on Ext JS 4.0.7 vs 4.1.0" height="360" width="636">\r | |
| 778 | <figcaption>Themes Viewer load performance on Ext JS 4.0.7 vs 4.1.0</figcaption>\r | |
| 779 | </figure></p>\r | |
| 780 | \r | |
| 781 | <p>The themes example isn’t the only one that got faster, we’re seeing significant performance improvements across all of our examples and in all browsers. We’ve been benchmarking every single example in the SDK, and when we add together the total load times for each we find significant speed improvements once more:</p>\r | |
| 782 | \r | |
| 783 | <p><figure class="aligncenter">\r | |
| 784 | <img src="http://img1.sencha.com/files/misc/IE-performance-on-4.0.7-vs-4.1.png" alt="IE performance on 4.0.7 vs 4.1.0" height="345" width="636">\r | |
| 785 | <figcaption>IE6, IE7, and IE8 performance on Ext JS 4.0.7 vs 4.1.0</figcaption>\r | |
| 786 | </figure></p>\r | |
| 787 | \r | |
| 788 | <p>These numbers are preliminary, so you should expect them to fluctuate as we lock down and head towards final release. However, our own testing combined with real world verification from a group of advance testers tells us a that we’re achieving substantial performance gains.</p>\r | |
| 789 | \r | |
| 790 | <h3>Neptune Preview</h3>\r | |
| 791 | \r | |
| 792 | <p><figure class="aligncenter">\r | |
| 793 | <a href="http://dev.sencha.com/deploy/ext-4.1-pr1/examples/kitchensink/index.html" target="_blank"><img src="http://img1.sencha.com/files/misc/Neptune-kitchen-sink.jpg" alt="Neptune Theme in Ext JS 4.1 Developer Preview" height="340" width="636"></a>\r | |
| 794 | <figcaption>Neptune Theme in Ext JS 4.1 Developer Preview</figcaption>\r | |
| 795 | </figure></p>\r | |
| 796 | \r | |
| 797 | <p>While the focus of this release was performance, it’s not the only thing that made it in. At last year’s SenchaCon we demonstrated an exciting new concept theme called Neptune. While it was only a screenshot on a slide, it caused quite a stir and has been one of the most requested features ever since.</p>\r | |
| 798 | \r | |
| 799 | <p>Since we first gave a glimpse into Neptune we’ve been iterating like crazy on it. We’ve tested it with the various ways you can put Components together, making sure the colors, margins and borders all look great from netbooks to projector screens. We’re not quite done yet but today we’re excited to be able to release it along with Ext JS 4.1 Developer Preview.</p>\r | |
| 800 | \r | |
| 801 | <p><strong>In this preview release we’re targeting modern browsers only</strong>–Chrome, Safari and Firefox all look great so for everyone who develops using those browsers (almost everyone we’ve asked falls into this group) you’ll be able to develop using Neptune from day one. As we finalize Neptune based on your feedback we’ll roll out support to older browsers, all the way back to IE6.</p>\r | |
| 802 | \r | |
| 803 | <h3>Warning–Preview Code</h3>\r | |
| 804 | \r | |
| 805 | <p>While we’re very happy with the performance improvements we’ve obtained with 4.1, we’d like to be up front about what this release is. We wanted to get 4.1 into your hands so that you can verify the performance improvements in your app and test out the new theme. At the moment we expect that your app will experience visual glitches, odd behavior and even hard JS errors. We strongly recommend against attempting to use this build in production–we’re looking for feedback on performance and Neptune only with this release.</p>\r | |
| 806 | \r | |
| 807 | <p>We are expecting some applications to need changes to migrate to 4.1 using this preview–especially if you have written custom layouts and components. This is because we altered some of the low-level architecture of the layout engine, which can have some impact on some more advanced usage of the framework. We will work with you to resolve these issues, and have created a <a href="http://www.sencha.com/forum/forumdisplay.php?93-Ext-4.1-Performance-Preview">dedicated forum to collect any migration problems you encounter</a> so that we can improve that experience as we approach 4.1 beta.</p>\r | |
| 808 | \r | |
| 809 | <p class="button-group">\r | |
| 810 | <a class="button-link inline small arrow" href="http://cdn.sencha.io/ext-4.1-pr1.zip" title="Download Ext JS 4.1 Developer Preview"><span>Download Ext JS 4.1 Developer Preview</span></a>\r | |
| 811 | </p>\r | |
| 812 | \r | |
| 813 | <p>We hope you like what you see above and that you’ll give Ext JS 4.1 Performance Preview a spin with your own apps. We can’t wait to hear what you think of it and look forward to your responses in the comments!</p>\r | |
| 814 | \r | |
| 815 | <style>\r | |
| 816 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 817 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 818 | </style>\r | |
| 819 | \r | |
| 820 | <div class="feedflare">\r | |
| 821 | <a href="http://feeds.feedburner.com/~ff/extblog?a=Fx-WV1x_Bos:xZtNR-ilDMk:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Fx-WV1x_Bos:xZtNR-ilDMk:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Fx-WV1x_Bos:xZtNR-ilDMk:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=Fx-WV1x_Bos:xZtNR-ilDMk:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Fx-WV1x_Bos:xZtNR-ilDMk:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Fx-WV1x_Bos:xZtNR-ilDMk:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=Fx-WV1x_Bos:xZtNR-ilDMk:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Fx-WV1x_Bos:xZtNR-ilDMk:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Fx-WV1x_Bos:xZtNR-ilDMk:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=Fx-WV1x_Bos:xZtNR-ilDMk:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 822 | </div>]]></content>\r | |
| 823 | <pubDate>Mon, 24 Oct 2011 21:00 GMT</pubDate>\r | |
| 824 | <guid isPermaLink="false">http://www.sencha.com/blog/ext-js-4-1-developer-preview/#date:21:00</guid>\r | |
| 825 | <feedburner:origLink>http://www.sencha.com/blog/ext-js-4-1-developer-preview/#date:21:00</feedburner:origLink></item>\r | |
| 826 | \r | |
| 827 | <item>\r | |
| 828 | <title>Introducing Sencha.io—The First Mobile HTML5 Cloud</title>\r | |
| 829 | <author>Aditya Bansod</author>\r | |
| 830 | <description>\r | |
| 831 | Today we’re very excited to announce the beta availability of Sencha.io, the first cloud built for the mobile web developer. Sencha.io makes it easy for you to build applications that deliver shared experiences. The Sencha.io platform provides a set of cloud services that make it easier for mobile web app developers to deliver robust web functionality to users. Your mobile apps goes well beyond just the client itself and your apps need to be able to create, store, and share data and messages with the app’s users.\r | |
| 832 | </description>\r | |
| 833 | <link>http://feedproxy.google.com/~r/extblog/~3/FgkCm2rtPRM/</link>\r | |
| 834 | <content><![CDATA[\r | |
| 835 | \r | |
| 836 | <p><img class="alignright" src="http://img1.sencha.com/files/misc/sencha-io-badge.png" alt="Sencha.io" height="230" width="240"> Today we’re very excited to announce the beta availability of Sencha.io, the first cloud built for the mobile web developer. Sencha.io makes it easy for you to build applications that deliver shared experiences. </p>\r | |
| 837 | \r | |
| 838 | <p>The Sencha.io platform provides a set of cloud services that make it easier for mobile web app developers to deliver robust web functionality to users. Your mobile apps goes well beyond just the client itself and your apps need to be able to create, store, and share data and messages with the app’s users. </p>\r | |
| 839 | \r | |
| 840 | <p>Imagine you need to build an expense reporting application for your company using Sencha Touch. Typically you’d need a place to store your data, a way to route approvals, a way to have your users log in. You’d pick databases and build business logic, and write thousands of lines of server code along the way. With Sencha.io, with only a few lines of JavaScript code—running just in the browser—you can power this entire experience. </p>\r | |
| 841 | \r | |
| 842 | <p>Sencha.io is an entirely new way for the client developer to think about the cloud. To store data, you simply tell your model to store data. And it does the rest. If you need to send messages to other users, you enable messaging with just one line of code. If you need to listen for messages, just set up a callback. And Sencha.io does the rest. If you need to log users in from Facebook, you just request the login with an <span class="caps">API</span>, and Sencha.io automates the whole process. And if you need a place to deploy your application, Sencha.io provides that, too.</p>\r | |
| 843 | \r | |
| 844 | <p>Today we’re launching the beta with four services: Data, Messages, Login, and Deployment.</p>\r | |
| 845 | \r | |
| 846 | <h3>Sencha.io Data</h3>\r | |
| 847 | \r | |
| 848 | <p><img class="alignleft" src="http://img1.sencha.com/files/misc/sencha-io-sync60x60.png" alt="Sencha.io Data" height="60" width="60"> Data is the heart of many applications—you users need to store data and share it on all their devices. They also want to share that data with their friends. Sencha.io Data makes it easy to for apps to store data in the cloud and access it any time. It’s a synchronized store that lets you write data to any device, seamlessly merge conflicts, and keep working when the network isn’t available—a necessity with mobile considering the unreliability of the network. As a Sencha Touch developer, all you need to do to get started using Data is change the proxy in your app, and automatically your data store synchs with the cloud. </p>\r | |
| 849 | \r | |
| 850 | <h3>Sencha.io Messages</h3>\r | |
| 851 | \r | |
| 852 | <p><img class="alignleft" src="http://img1.sencha.com/files/misc/sencha-io-messaging60x60.png" alt="Sencha.io Messaging" height="60" width="60"> Structured data is the right solution for storing and sharing “row” based data, but there are so many times when rows and columns aren’t the right solution. Messages lets an app send one-to-one and one-to-many messages to tell other users that something has changed. Messages lets you send small <span class="caps">JSON</span> objects to users and to devices, stores them, and makes them available on callbacks for pickup. If you want to listen for messages, just register a callback in your app and it starts picking them up.</p>\r | |
| 853 | \r | |
| 854 | <h3>Sencha.io Login</h3>\r | |
| 855 | \r | |
| 856 | <p><img class="alignleft" src="http://img1.sencha.com/files/misc/sencha-io-login60x60.png" alt="Sencha.io Social Login" height="60" width="60"> All apps need user data, and Login makes it easy for an app to provide registration and login functionality, enable users to have accounts, and soon, to bring in users from Facebook and Twitter. Using Sencha.io Login, your application can be set to require a login when a user visits your <span class="caps">URL</span> or after the user has already downloaded or started using your app. It’s up to you. Then store the user data in the cloud so it’s available on any device the user logs in to.</p>\r | |
| 857 | \r | |
| 858 | <h3>Sencha.io Deployment</h3>\r | |
| 859 | \r | |
| 860 | <p><img class="alignleft" src="http://img1.sencha.com/files/misc/sencha-io-deploy60x60.png" alt="Sencha.io Deployment" height="60" width="60"> The deployment service makes it easy for you to deploy your client application, and gives you a place to manage your app and the services it’s using. Sencha.io’s domain for app deployment is “senchafy.com”. Sencha.io also provides a developer console you use to upload apps, perform version management, and push apps to the production environment or a development environment (“senchafy-dev.com”). You can also manage your team, manage your user groups, and see the Sencha.io system status. </p>\r | |
| 861 | \r | |
| 862 | <h3>Getting Started</h3>\r | |
| 863 | \r | |
| 864 | <p>Full documentation, including <span class="caps">API</span> documentation for how to integrate the Sencha.io <span class="caps">SDK</span> into your application, and guides on all the services are available at the <a href="http://docs.sencha.com/io/1-0/">Sencha Documentation Center</a>.</p>\r | |
| 865 | \r | |
| 866 | <p>Of course, we’ll be adding features and adding polish as we go through the beta. We’ve set up a forum for you to share your feedback and your questions with us, and we’ll be communicating our plans there and on the Sencha blog. We’re excited to have you try Sencha.io and to see what kind of apps you’ll build with it.</p>\r | |
| 867 | \r | |
| 868 | <p>So head on over to <a href="http://developer.sencha.io">http://developer.sencha.io</a>, create a team, and download the <span class="caps">SDK</span>. If you have a Sencha ID (from our Forums, or Designer or Animator) you’re already registered. Login, and get started!</p>\r | |
| 869 | \r | |
| 870 | <p>P.S. if you had been using Sync before, your application will continue to work. Sync has become a part of Data. If you’ve been using Src before, again, your application will continue to work as it’s become a part of the Deployment service. They both continue to work as-is.</p>\r | |
| 871 | <style>\r | |
| 872 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 873 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 874 | </style>\r | |
| 875 | \r | |
| 876 | <div class="feedflare">\r | |
| 877 | <a href="http://feeds.feedburner.com/~ff/extblog?a=FgkCm2rtPRM:N6Lah107X2E:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=FgkCm2rtPRM:N6Lah107X2E:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=FgkCm2rtPRM:N6Lah107X2E:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=FgkCm2rtPRM:N6Lah107X2E:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=FgkCm2rtPRM:N6Lah107X2E:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=FgkCm2rtPRM:N6Lah107X2E:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=FgkCm2rtPRM:N6Lah107X2E:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=FgkCm2rtPRM:N6Lah107X2E:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=FgkCm2rtPRM:N6Lah107X2E:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=FgkCm2rtPRM:N6Lah107X2E:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 878 | </div>]]></content>\r | |
| 879 | <pubDate>Mon, 24 Oct 2011 14:00 GMT</pubDate>\r | |
| 880 | <guid isPermaLink="false">http://www.sencha.com/blog/introducing-sencha-io-the-first-mobile-html5-cloud/#date:14:00</guid>\r | |
| 881 | <feedburner:origLink>http://www.sencha.com/blog/introducing-sencha-io-the-first-mobile-html5-cloud/#date:14:00</feedburner:origLink></item>\r | |
| 882 | \r | |
| 883 | <item>\r | |
| 884 | <title>Doc Center Updates: User Commenting and More</title>\r | |
| 885 | <author>Nick Poulden</author>\r | |
| 886 | <description>\r | |
| 887 | Improving the documentation experience for our customers is a top priority at Sencha. One often requested feature is the ability for our customers to add comments directly to the class documentation. Today we're happy to announce the availability of this functionality in our latest documentation update.\r | |
| 888 | </description>\r | |
| 889 | <link>http://feedproxy.google.com/~r/extblog/~3/Q8AJUGhOTKE/</link>\r | |
| 890 | <content><![CDATA[\r | |
| 891 | \r | |
| 892 | <p>We <a href="http://www.sencha.com/blog/new-ext-js-4-documentation-center/">recently blogged</a> about the brand new documentation center created for Ext JS 4. Great documentation is one of the pillars of Ext JS 4 and Sencha Touch 2 so today I’d like to share a few updates we’ve been making to take our docs to the next level. </p>\r | |
| 893 | \r | |
| 894 | <p>While we put enormous amounts of effort into our docs, there’s often a snippet of information invaluable to a newcomer or a gotcha that may be missing from the official documentation. </p>\r | |
| 895 | \r | |
| 896 | <h3>Introducing Documentation Comments</h3>\r | |
| 897 | \r | |
| 898 | <p>One commonly requested feature of any <span class="caps">API</span> documentation is ability to add comments directly to classes. It’s also one of the most challenging features to implement. How do you offer comments when you’re reading the docs locally? How do you handle authentication? How do you make it easy and friendly to use?</p>\r | |
| 899 | \r | |
| 900 | <p>So we set out to make adding a comment quick and easy and instantly sharable to the entire Sencha developer community. Today we’re happy to announce the availability of this functionality on the Ext JS 4 and Sencha Touch 2 documentation.</p>\r | |
| 901 | \r | |
| 902 | <p><a class="more-icon" href="http://docs.sencha.com/ext-js/4-0/">Click to view the Ext JS 4</a> or <a class="more-icon" href="http://docs.sencha.com/touch/2-0/">Sencha Touch 2 documentation</a></p>\r | |
| 903 | \r | |
| 904 | <p>When you visit the live documentation, the first thing you will notice are comment icons on the <span class="caps">API</span> index page. This lets you know how many comments are on both the class introduction and any members within that class (methods, config options, events, etc). Note that comments on parent class members are carried through to child classes. For example, comments on the ‘border’ config option of Ext.AbstractComponent will be shown on sub-classes such as Ext.button.Button.</p>\r | |
| 905 | \r | |
| 906 | <p>Individual class documentation pages have a new toolbar icon indicating the number of comments on the main class. You can also see the number of comments on members’ items in the shortcut links that pop up when you hover over member type in the toolbar:</p>\r | |
| 907 | \r | |
| 908 | <p><img src="http://img1.sencha.com/files/misc/docs-comments.png" alt="Comments highlighted in new Sencha Documentation" height="250" width="636"></p>\r | |
| 909 | \r | |
| 910 | <p>To read comments, scroll down to the comment section at the end of each class intro or class member section and expand the comment box:</p>\r | |
| 911 | \r | |
| 912 | <p><img src="http://src.sencha.io/636/http://img1.sencha.com/files/misc/docs3.jpg" alt="Previewing a comment"></p>\r | |
| 913 | \r | |
| 914 | <p><img class="alignright" src="http://img1.sencha.com/files/misc/rating.png" alt="Comments can be rated by users" height="91" width="48"></p>\r | |
| 915 | \r | |
| 916 | <p>We have also included the ability to rate a comment. Each logged in user will be able to vote a comment up or down based on how useful they find the content. Comments with negative ratings will be flagged for removal. </p>\r | |
| 917 | \r | |
| 918 | <p>We hope this system will encourage comments of a higher quality. User contributed comments enable experienced developers to offer their valuable insights directly on the <span class="caps">API</span> documentation. We hope you share your knowledge!</p>\r | |
| 919 | \r | |
| 920 | <p>In order to make a comment, you must be logged in using your Sencha forum account, after which you may post a comment formatted with Markdown. There is a Markdown cheatsheet accessible by clicking the ‘Help’ link while you are posting a comment.</p>\r | |
| 921 | \r | |
| 922 | <h4>Implementation Challenges</h4>\r | |
| 923 | \r | |
| 924 | <p>Although we encourage our users to use the live documentation so they always have the most up to date content, many prefer to use the documentation tool locally. In order to support offline comment usage, we enabled <span class="caps">CORS</span> support so that authentication and comment posting could be achieved cross domain. If the network is not available locally, commenting is silently disabled to minimise user interruption.</p>\r | |
| 925 | \r | |
| 926 | <p>We welcome any comments (!) or feedback you may have regarding additional functionality you would like to see to make our documentation more interactive.</p>\r | |
| 927 | \r | |
| 928 | <h3>Content Updates</h3>\r | |
| 929 | \r | |
| 930 | <p>It’s not just new features though, we really care about the content too. When we launched Sencha Touch 2 Developer Preview it shipped with over one hundred thousand words of documentation. And in the last few weeks alone, we’ve added five brand new Ext JS 4 guides:</p>\r | |
| 931 | \r | |
| 932 | <ul>\r | |
| 933 | <li><a href="http://docs.sencha.com/ext-js/4-0/#!/guide/keyboard_nav">Keyboard Navigation</a></li>\r | |
| 934 | <li><a href="http://docs.sencha.com/ext-js/4-0/#!/guide/localization">Localization</a></li>\r | |
| 935 | <li><a href="http://docs.sencha.com/ext-js/4-0/#!/guide/direct_grid_pt1">Mapping a Grid to a MySQL table using Direct and <span class="caps">PHP</span> Part 1</a> and <a href="http://docs.sencha.com/ext-js/4-0/#!/guide/direct_grid_pt2">Part 2</a></li>\r | |
| 936 | <li><a href="http://docs.sencha.com/ext-js/4-0/#!/guide/editable_grid"><span class="caps">CRUD</span> with an Editable Grid backed by Node.js and MongoDB</a></li>\r | |
| 937 | </ul>\r | |
| 938 | \r | |
| 939 | <h3>JS Duck Everywhere</h3>\r | |
| 940 | \r | |
| 941 | <p>JS Duck now brings <span class="caps">API</span> reference, guides, examples, videos and more to one centralized place, making it easy to find learning materials for our frameworks. Over the past week we’ve rolled out JS Duck to all of the frameworks, including <a href="http://docs.sencha.com/ext-js/3-4/">Ext JS 3.4</a> and <a href="http://docs.sencha.com/touch/1-1">Sencha Touch 1.1</a>.</p>\r | |
| 942 | \r | |
| 943 | <p>Finally, we maintain <a href="http://www.sencha.com/forum/showthread.php?135037-API-Documentation-Content-Bugs">open threads in the forums</a> dedicated to receiving feedback from you on what we’re doing well and where we can improve. To date we’ve received over 300 replies and I’d like to take this opportunity to thank everyone for taking the time to help us create the best docs we can. We’ve <a href="https://github.com/senchalabs/jsduck">open sourced</a> JS Duck on Sencha Labs, so feel free to fork and contribute with code as well.</p>\r | |
| 944 | \r | |
| 945 | <p>As always, we’d love to hear your feedback and ideas in the comments!</p>\r | |
| 946 | <style>\r | |
| 947 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 948 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 949 | </style>\r | |
| 950 | \r | |
| 951 | <div class="feedflare">\r | |
| 952 | <a href="http://feeds.feedburner.com/~ff/extblog?a=Q8AJUGhOTKE:IrQ0MfdmlM0:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Q8AJUGhOTKE:IrQ0MfdmlM0:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Q8AJUGhOTKE:IrQ0MfdmlM0:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=Q8AJUGhOTKE:IrQ0MfdmlM0:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Q8AJUGhOTKE:IrQ0MfdmlM0:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Q8AJUGhOTKE:IrQ0MfdmlM0:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=Q8AJUGhOTKE:IrQ0MfdmlM0:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Q8AJUGhOTKE:IrQ0MfdmlM0:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=Q8AJUGhOTKE:IrQ0MfdmlM0:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=Q8AJUGhOTKE:IrQ0MfdmlM0:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 953 | </div>]]></content>\r | |
| 954 | <pubDate>Fri, 21 Oct 2011 15:00 GMT</pubDate>\r | |
| 955 | <guid isPermaLink="false">http://www.sencha.com/blog/commenting-on-documentation/#date:15:00</guid>\r | |
| 956 | <feedburner:origLink>http://www.sencha.com/blog/commenting-on-documentation/#date:15:00</feedburner:origLink></item>\r | |
| 957 | \r | |
| 958 | <item>\r | |
| 959 | <title>Introducing the SenchaCon Mobile App</title>\r | |
| 960 | <author>James Pearce</author>\r | |
| 961 | <description>\r | |
| 962 | Yes, SenchaCon 2011 is finally upon us! We're excited about seeing you all in Austin for what will surely be our most exciting conference ever: jam-packed with 58 sessions and 52 amazing speakers. To help you navigate all this goodness we're proud to introduce the SenchaCon2011 mobile web app--built, of course, with our very own Sencha Touch 2.\r | |
| 963 | </description>\r | |
| 964 | <link>http://feedproxy.google.com/~r/extblog/~3/9jtsh3oiFTk/</link>\r | |
| 965 | <content><![CDATA[\r | |
| 966 | \r | |
| 967 | <p><figure class="aligncenter">\r | |
| 968 | <a class="more-icon" href="/apps/senchacon-2011/"><img src="http://img1.sencha.com/files/misc/senchacon-2011-app-hero.jpg" alt="SenchaCon 2011 web app, built with Sencha Touch" height="436" width="636"></a>\r | |
| 969 | <figcaption>SenchaCon 2011 app has session details, favorites, and more. Thanks to ModusCreate for helping us build it!<br />\r | |
| 970 | <a class="more-icon" href="/apps/senchacon-2011/">Download the app to your smartphone or tablet today!</a></figcaption><br />\r | |
| 971 | </figure></p>\r | |
| 972 | \r | |
| 973 | <p><strong>Yes, <a href="http://www.sencha.com/senchacon">SenchaCon 2011</a> is finally upon us! The rooms are prepared, the laptops are warming up, and the barbecue is on. It’s time to look ahead to next week’s awesome event.</strong></p>\r | |
| 974 | \r | |
| 975 | <p>If you haven’t heard by now, where have you been? SenchaCon 2011, our annual user conference, is just days away, and it’s jam-packed with <a href='http://secure.lenos.com/lenos/sencha/SenchaCon2011/sessions.htm'>7 tracks containing 58 sessions</a>—and <a href='http://secure.lenos.com/lenos/sencha/SenchaCon2011/speakers.htm'>52 amazing speakers</a>—as well as the biggest Sencha hackathon ever, on Wednesday.</p>\r | |
| 976 | \r | |
| 977 | <p>You’ll hear what’s hot and new with Sencha technologies from the development teams themselves, and from important partners in the industry, like AT&T, the Google Chrome team and BlackBerry. This year, we’ve also worked hard to involve as many of our developers as possible too: you’ll see we have a whole ‘<strong>Community Code</strong>‘ track where you’ll hear your peers talking through the technical details of more than 10 fantastic projects they have built.</p>\r | |
| 978 | \r | |
| 979 | <p>And, of course, there is the party Monday night!</p>\r | |
| 980 | \r | |
| 981 | <p>To make sure you get the most of this intense agenda, we’re excited to announce the launch of the <a href="http://senchacon.senchafy.com">SenchaCon 2011 Mobile App</a>. We hooked up with the smart guys at <a href='http://moduscreate.com'>Modus Create</a> and asked them to create an application that would help out, and also showcase Sencha Touch 2 live at the conference.</p>\r | |
| 982 | \r | |
| 983 | <p><figure style="float:right;width:240px;">\r | |
| 984 | <a href="http://senchacon.senchafy.com"><img src='https://chart.googleapis.com/chart?chs=240x240&cht=qr&chl=http://senchacon.senchafy.com'></a>\r | |
| 985 | <figcaption style="padding-left:31px;">You can find the app at <a href='http://senchacon.senchafy.com'>http://senchacon.senchafy.com</a> or by snapping the above QR code.</figcaption><br />\r | |
| 986 | </figure></p>\r | |
| 987 | \r | |
| 988 | <p>When you start the app, it displays a tab for each day of the conference, containing a schedule of the sessions on throughout. Click to slide to details of each session and the speakers involved, and mark a session as a favorite so you can plan your program for the day. </p>\r | |
| 989 | \r | |
| 990 | <p>Pull the top-bar menu out, and you can switch to a full list of speakers, details of our generous sponsors, and other information about the conference.</p>\r | |
| 991 | \r | |
| 992 | <p>On the back-end, the application hooks up to our live conference database, so you can be sure the details are always up-to-date. And of course the application uses local storage and an app cache manifest so it will even work offline. (Not that we’re expecting any problems with the conference WiFi, but you never know…). And in fact Jay Garcia himself will be running a technical session on how he built the app <strong>at 2pm on Tuesday</strong> in the Grand Ballroom.</p>\r | |
| 993 | \r | |
| 994 | <p>So, can you tell I’m excited? Grab the app now, and start planning… it’s going to be intense. We look forward to seeing you all there!</p>\r | |
| 995 | <style>\r | |
| 996 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 997 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 998 | </style>\r | |
| 999 | \r | |
| 1000 | <div class="feedflare">\r | |
| 1001 | <a href="http://feeds.feedburner.com/~ff/extblog?a=9jtsh3oiFTk:WUniaOppp-o:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=9jtsh3oiFTk:WUniaOppp-o:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=9jtsh3oiFTk:WUniaOppp-o:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=9jtsh3oiFTk:WUniaOppp-o:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=9jtsh3oiFTk:WUniaOppp-o:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=9jtsh3oiFTk:WUniaOppp-o:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=9jtsh3oiFTk:WUniaOppp-o:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=9jtsh3oiFTk:WUniaOppp-o:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=9jtsh3oiFTk:WUniaOppp-o:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=9jtsh3oiFTk:WUniaOppp-o:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 1002 | </div>]]></content>\r | |
| 1003 | <pubDate>Wed, 19 Oct 2011 21:00 GMT</pubDate>\r | |
| 1004 | <guid isPermaLink="false">http://www.sencha.com/blog/introducing-the-senchacon-mobile-app/#date:21:00</guid>\r | |
| 1005 | <feedburner:origLink>http://www.sencha.com/blog/introducing-the-senchacon-mobile-app/#date:21:00</feedburner:origLink></item>\r | |
| 1006 | \r | |
| 1007 | <item>\r | |
| 1008 | <title>Ext GWT 3.0 Developer Preview 5</title>\r | |
| 1009 | <author>Darrell Meyer</author>\r | |
| 1010 | <description>\r | |
| 1011 | The Ext GWT team has been hard at work on Ext GWT 3.0 and we’re happy to announce the availability of Ext GWT 3.0 PR5. This will be the last developer preview release as we move toward our 3.0 beta releases. There are a tremendous number of improvements and features added since PR4. As a result, we are closing in on being feature complete.\r | |
| 1012 | </description>\r | |
| 1013 | <link>http://feedproxy.google.com/~r/extblog/~3/2FYwl8rggRg/</link>\r | |
| 1014 | <content><![CDATA[\r | |
| 1015 | \r | |
| 1016 | <p><img class="alignright" src="http://img1.sencha.com/files/misc/ext-gwt-3-dp5.png" alt="Ext GWT 3.0 Developer Preview 5" height="180" width="240"> The Ext GWT team has been hard at work on Ext GWT 3.0 and we’re happy to announce the availability of Ext GWT 3.0 PR5. This will be the last developer preview release as we move toward our 3.0 beta releases. There are a tremendous number of improvements and features added since PR4. As a result, we are closing in on being feature complete.</p>\r | |
| 1017 | \r | |
| 1018 | <p>Now is a great time to grab the SDK and to get familiar with the API. All major changes to the public API are complete so this release is a good representation of how the final API will work. As with any developer preview release, keep in mind there are still bugs, missing features, and rendering issues, some of which may pop up as you explore the API.</p>\r | |
| 1019 | \r | |
| 1020 | <p class="button-group">\r | |
| 1021 | <a class="button-link inline small arrow" href="http://cdn.sencha.io/extgwt/gxt-3.0.0-dp5.zip" title="Download Ext GWT 3.0 Developer Preview 5"><span>Download Ext GWT 3.0</span></a> \r | |
| 1022 | <a class="button-link inline small blue" href="http://dev.sencha.com/deploy/gxt-3.0.0-dp5/javadoc/gxt/" title="View Docs for Ext GWT 3.0 Developer Preview 5">View Documentation</a>\r | |
| 1023 | </p>\r | |
| 1024 | \r | |
| 1025 | <h3>Module Separation</h3>\r | |
| 1026 | \r | |
| 1027 | <p>With previous versions of Ext GWT there is a single monolithic module. With 3.0, we have separated the library into a number of smaller, more logical modules. This provides more fine-grained control of what features of the library you want to use.</p>\r | |
| 1028 | \r | |
| 1029 | <p>The core modules include:</p>\r | |
| 1030 | \r | |
| 1031 | <ul>\r | |
| 1032 | <li><strong>Core:</strong> com.sencha.gxt.core.Core</li>\r | |
| 1033 | <li><strong>Cell Components:</strong> com.sencha.gxt.cell.Core</li>\r | |
| 1034 | <li><strong>Data and Binding:</strong> com.sencha.gxt.data.Data</li>\r | |
| 1035 | <li><strong>Drag and Drop:</strong> com.sencha.gxt.dnd.DND</li>\r | |
| 1036 | <li><strong>Effects and Animations:</strong> com.sencha.gxt.fx.Fx</li>\r | |
| 1037 | <li><strong>Localized Messages:</strong> com.sencha.gxt.messages.Messages</li>\r | |
| 1038 | <li><strong>State:</strong> com.sencha.gxt.state.State</li>\r | |
| 1039 | <li><strong>Base Theme:</strong> com.sencha.gxt.theme.Base</li>\r | |
| 1040 | <li><strong>Blue Theme:</strong> com.sencha.gxt.theme.Blue</li>\r | |
| 1041 | <li><strong>Complete Framework:</strong> com.sencha.gxt.ui.GXT</li>\r | |
| 1042 | <li><strong>Components:</strong> com.sencha.gxt.widget.Core</li>\r | |
| 1043 | </ul>\r | |
| 1044 | \r | |
| 1045 | <p>As before, all core modules can be included by inheriting com.sencha.gxt.ui.GXT in your application’s module, as the GXT module will inherit each other modules, as well as combine permuatations and set certain default settings.</p>\r | |
| 1046 | \r | |
| 1047 | <h3>GWT Widget Support</h3>\r | |
| 1048 | \r | |
| 1049 | <p>In previous releases of Ext GWT, Components are not rendered the same way as GWT Widgets. Components are rendered “lazily” meaning their DOM elements are not created until they are actually needed. With GWT Widgets, the DOM elements are created when the widgets are constructed. Because of this difference, you would use Components and GWT Widgets differently. With 3.0, Components are not rendered lazily and work the same was as GWT Widgets.</p>\r | |
| 1050 | \r | |
| 1051 | <p>Furthermore, prior to 3.0, Ext GWT Containers worked only with Components. Any non-components would need to be wrapped in a component wrapper. With 3.0, containers work with Widgets directly and no wrapping is required.</p>\r | |
| 1052 | \r | |
| 1053 | <p>Because of the two changes mentioned above, it is much easier and feasible to maintain consistent behavior when using GWT Widgets in Ext GWT Containers and using Ext GWT Components in GWT Panels.</p>\r | |
| 1054 | \r | |
| 1055 | <h3>Appearance Pattern and Themes</h3>\r | |
| 1056 | \r | |
| 1057 | <p>We’ve removed the need for external CSS and images in Ext GWT 3.0. If you’ve used Ext GWT before, you’re familiar with the resources folder - a folder of static images and CSS files used by the library. In the past, setting up a new Ext GWT project would involve copying this folder into your project and linking the gxt-all.css style sheet.</p>\r | |
| 1058 | \r | |
| 1059 | <p>In 3.0, we’ve implemented the GWT <a href="http://code.google.com/p/google-web-toolkit/wiki/CellBackedWIdgets#Appearance_Pattern">Appearance</a> pattern and now take full advantage of ClientBundle and CssResource. There is no longer a need to reference the gxt-all.css and the associated images. All CSS and images are contained within the library source code and module public folder. Also for Maven users, the Ext GWT jar now includes both the Java source code and style resources (CSS and images). There is no longer a resources jar, just the single Ext GWT jar.</p>\r | |
| 1060 | \r | |
| 1061 | <p>The only requirement for theming is to add a reference to reset.css in your application’s host page. reset.css is a small CSS file that clears the default (and browser-specific) padding and margins from most HTML elements. Here’s the host page for the Explorer demo:</p>\r | |
| 1062 | \r | |
| 1063 | <div><style>/**\r | |
| 1064 | * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\r | |
| 1065 | * (http://qbnz.com/highlighter/ and http://geshi.org/)\r | |
| 1066 | */\r | |
| 1067 | .xml .imp {font-weight: bold; color: red;}\r | |
| 1068 | .xml .es0 {color: #000099; font-weight: bold;}\r | |
| 1069 | .xml .br0 {color: #66cc66;}\r | |
| 1070 | .xml .sy0 {color: #66cc66;}\r | |
| 1071 | .xml .st0 {color: #ff0000;}\r | |
| 1072 | .xml .sc-1 {color: #808080; font-style: italic;}\r | |
| 1073 | .xml .sc0 {color: #00bbdd;}\r | |
| 1074 | .xml .sc1 {color: #ddbb00;}\r | |
| 1075 | .xml .sc2 {color: #339933;}\r | |
| 1076 | .xml .sc3 {color: #009900;}\r | |
| 1077 | .xml .re0 {color: #000066;}\r | |
| 1078 | .xml .re1 {color: #000000; font-weight: bold;}\r | |
| 1079 | .xml .re2 {color: #000000; font-weight: bold;}\r | |
| 1080 | .xml span.xtra { display:block; }\r | |
| 1081 | </style><pre class="xml"><span class="sc0"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></span>\r | |
| 1082 | <span class="sc3"><span class="re1"><html<span class="re2">></span></span></span>\r | |
| 1083 | <span class="sc3"><span class="re1"><head<span class="re2">></span></span></span>\r | |
| 1084 | <span class="sc3"><span class="re1"><title<span class="re2">></span></span></span>Ext GWT Explorer Demo - ${build.description}<span class="sc3"><span class="re1"></title<span class="re2">></span></span></span>\r | |
| 1085 | <span class="sc3"><span class="re1"><link</span> <span class="re0">rel</span>=<span class="st0">"stylesheet"</span> <span class="re0">type</span>=<span class="st0">"text/css"</span> <span class="re0">href</span>=<span class="st0">"explorer/reset.css"</span> <span class="re2">/></span></span>\r | |
| 1086 | <span class="sc3"><span class="re1"></head<span class="re2">></span></span></span>\r | |
| 1087 | <span class="sc3"><span class="re1"><body<span class="re2">></span></span></span>\r | |
| 1088 | <span class="sc3"><span class="re1"><script</span> <span class="re0">language</span>=<span class="st0">'javascript'</span> <span class="re0">src</span>=<span class="st0">'explorer/explorer.nocache.js'</span><span class="re2">></span><span class="re1"></script<span class="re2">></span></span></span>\r | |
| 1089 | <span class="sc3"><span class="re1"><iframe</span> <span class="re0">src</span>=<span class="st0">"javascript:''"</span> <span class="re0">id</span>=<span class="st0">"__gwt_historyFrame"</span> <span class="re0">style</span>=<span class="st0">"position:absolute;width:0;height:0;border:0"</span><span class="re2">></span><span class="re1"></iframe<span class="re2">></span></span></span>\r | |
| 1090 | <span class="sc3"><span class="re1"></body<span class="re2">></span></span></span>\r | |
| 1091 | <span class="sc3"><span class="re1"></html<span class="re2">></span></span></span></pre></div>\r | |
| 1092 | \r | |
| 1093 | <p>Also note the first line - the HTML document type declaration. Ext GWT 3.0 works only in strict mode, which is activated in browsers when an appropriate declaration is placed at the beginning of the document. The <a href="http://dev.w3.org/html5/spec/Overview.html#the-doctype">HTML5 doctype</a> can also be used to trigger strict mode:</p>\r | |
| 1094 | \r | |
| 1095 | <p><style>/**\r | |
| 1096 | * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\r | |
| 1097 | * (http://qbnz.com/highlighter/ and http://geshi.org/)\r | |
| 1098 | */\r | |
| 1099 | .xml .imp {font-weight: bold; color: red;}\r | |
| 1100 | .xml .es0 {color: #000099; font-weight: bold;}\r | |
| 1101 | .xml .br0 {color: #66cc66;}\r | |
| 1102 | .xml .sy0 {color: #66cc66;}\r | |
| 1103 | .xml .st0 {color: #ff0000;}\r | |
| 1104 | .xml .sc-1 {color: #808080; font-style: italic;}\r | |
| 1105 | .xml .sc0 {color: #00bbdd;}\r | |
| 1106 | .xml .sc1 {color: #ddbb00;}\r | |
| 1107 | .xml .sc2 {color: #339933;}\r | |
| 1108 | .xml .sc3 {color: #009900;}\r | |
| 1109 | .xml .re0 {color: #000066;}\r | |
| 1110 | .xml .re1 {color: #000000; font-weight: bold;}\r | |
| 1111 | .xml .re2 {color: #000000; font-weight: bold;}\r | |
| 1112 | .xml span.xtra { display:block; }\r | |
| 1113 | </style><pre class="xml"><span class="sc0"><!DOCTYPE html></span></pre></p>\r | |
| 1114 | \r | |
| 1115 | <p>For more information about the Appearance pattern, see this <a href="http://www.sencha.com/blog/ext-gwt-3-appearance-design/">blog article</a>.</p>\r | |
| 1116 | \r | |
| 1117 | <h3>UiBinder Support</h3>\r | |
| 1118 | \r | |
| 1119 | <p>GWT 2.0 release introduced the ability to construct user interfaces declaratively using XML templates. To allow for composing widgets in UiBinder, there are several conventions to which to adhere. These include using the HasWidgets interface to allow a Widget to behave as a container, implementing HasHTML to allow raw HTML directly in panels, and adding @UiConstructor and @UiChild annotations in Widgets to facilitate custom behavior.</p>\r | |
| 1120 | \r | |
| 1121 | <p>Ext GWT 2 was released prior to GWT 2.0 and did not have any support for UiBinder. Compatibility between Ext GWT 3.0 and UiBinder has been one of the major driving factors for many of the API changes in Ext GWT 3.0.</p>\r | |
| 1122 | \r | |
| 1123 | <p>Here’s a very simple example of a UiBinder template containing Ext GWT 3.0 components:</p>\r | |
| 1124 | \r | |
| 1125 | <div><style>/**\r | |
| 1126 | * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\r | |
| 1127 | * (http://qbnz.com/highlighter/ and http://geshi.org/)\r | |
| 1128 | */\r | |
| 1129 | .xml .imp {font-weight: bold; color: red;}\r | |
| 1130 | .xml .es0 {color: #000099; font-weight: bold;}\r | |
| 1131 | .xml .br0 {color: #66cc66;}\r | |
| 1132 | .xml .sy0 {color: #66cc66;}\r | |
| 1133 | .xml .st0 {color: #ff0000;}\r | |
| 1134 | .xml .sc-1 {color: #808080; font-style: italic;}\r | |
| 1135 | .xml .sc0 {color: #00bbdd;}\r | |
| 1136 | .xml .sc1 {color: #ddbb00;}\r | |
| 1137 | .xml .sc2 {color: #339933;}\r | |
| 1138 | .xml .sc3 {color: #009900;}\r | |
| 1139 | .xml .re0 {color: #000066;}\r | |
| 1140 | .xml .re1 {color: #000000; font-weight: bold;}\r | |
| 1141 | .xml .re2 {color: #000000; font-weight: bold;}\r | |
| 1142 | .xml span.xtra { display:block; }\r | |
| 1143 | </style><pre class="xml"><span class="sc3"><span class="re1"><ui:UiBinder</span></span>\r | |
| 1144 | <span class="sc3"><span class="re0">xmlns:ui</span>=<span class="st0">"urn:ui:com.google.gwt.uibinder"</span></span>\r | |
| 1145 | <span class="sc3"><span class="re0">xmlns:gxt</span>=<span class="st0">"urn:import:com.sencha.gxt.widget.core.client"</span></span>\r | |
| 1146 | <span class="sc3"><span class="re0">xmlns:button</span>=<span class="st0">"urn:import:com.sencha.gxt.widget.core.client.button"</span><span class="re2">></span></span>\r | |
| 1147 | \r | |
| 1148 | <span class="sc3"><span class="re1"><gxt:FramedPanel</span> <span class="re0">collapsible</span>=<span class="st0">"true"</span> <span class="re0">headingText</span>=<span class="st0">"Example"</span> <span class="re0">pixelSize</span>=<span class="st0">"100, 80"</span><span class="re2">></span></span>\r | |
| 1149 | <span class="sc3"><span class="re1"><button:TextButton</span> <span class="re0">ui:field</span>=<span class="st0">"exampleButton"</span> <span class="re0">text</span>=<span class="st0">"Click Me"</span> <span class="re2">/></span></span>\r | |
| 1150 | <span class="sc3"><span class="re1"></gxt:FramedPanel<span class="re2">></span></span></span>\r | |
| 1151 | \r | |
| 1152 | <span class="sc3"><span class="re1"></ui:UiBinder<span class="re2">></span></span></span></pre></div>\r | |
| 1153 | \r | |
| 1154 | <p>For more information on using UiBinder with Ext GWT, see this <a href="http://www.sencha.com/learn/ext-gwt-3-declarative-markup-with-uibinder/">article</a>.</p>\r | |
| 1155 | \r | |
| 1156 | <h3>Charts</h3>\r | |
| 1157 | \r | |
| 1158 | <p>This release includes many new features in the chart framework. There is now a greater level of customization available to developers who use Ext GWT charts. Some of the main points of customization include the use of series renderers and label providers.</p>\r | |
| 1159 | \r | |
| 1160 | <p><a href="http://www.sencha.com/examples-dev/#ExamplePlace:columnrendererchart" title="Column Renderer"><img src="http://img1.sencha.com/files/misc/columnrendererchart.gif" alt="Column Renderer" /></a> <a href="http://www.sencha.com/examples-dev/#ExamplePlace:scatterrendererchart" title="Scatter Renderer"><img src="http://img1.sencha.com/files/misc/scatterrendererchart.png" alt="Scatter Renderer" /></a></p>\r | |
| 1161 | \r | |
| 1162 | <p>All series provide labeling of their data points. Labels provide a more precise interpretation of the data on the chart.</p>\r | |
| 1163 | \r | |
| 1164 | <p><a href="http://www.sencha.com/examples-dev/#ExamplePlace:barrendererchart" title="Bar Renderer"><img src="http://img1.sencha.com/files/misc/barrendererchart.gif" alt="Bar Renderer" /></a></p>\r | |
| 1165 | \r | |
| 1166 | <p>There is also now event support in charts. Try clicking the pie slices in this chart.</p>\r | |
| 1167 | \r | |
| 1168 | <p><a href="http://www.sencha.com/examples-dev/#ExamplePlace:pierendererchart" title="Pie Renderer"><img src="http://img1.sencha.com/files/misc/pierendererchart.gif" alt="Pie Renderer" /></a></p>\r | |
| 1169 | \r | |
| 1170 | <p>Using the time axis, it is easy to visualize data values by date. This example shows data being updated continuously, much like what you’d see in a live monitoring application.</p>\r | |
| 1171 | \r | |
| 1172 | <p><a href="http://www.sencha.com/examples-dev/#ExamplePlace:livechart" title="Live Chart"><img src="http://img1.sencha.com/files/misc/livechart.gif" alt="Live Chart" /></a></p>\r | |
| 1173 | \r | |
| 1174 | <p>The new draw examples show the underlying sprite framework on which the Ext GWT 3.0 charts are built. Be sure to try resizing the logos to see the dynamic nature of vector graphics.</p>\r | |
| 1175 | \r | |
| 1176 | <p><a href="http://www.sencha.com/examples-dev/#ExamplePlace:basicdraw" title="Basic Draw"><img src="http://img1.sencha.com/files/misc/basicdraw.gif" alt="Basic Draw" /></a> <a href="http://www.sencha.com/examples-dev/#ExamplePlace:logos" title="Sencha Logo"><img src="http://img1.sencha.com/files/misc/sencha.gif" alt="Sencha Logo" /></a></p>\r | |
| 1177 | \r | |
| 1178 | <h3>Cells and Cell Widgets</h3>\r | |
| 1179 | \r | |
| 1180 | <p>Cells are a fairly new design pattern and implementation by GWT. “Cell widgets (data presentation widgets) are high-performance, lightweight widgets composed of Cells for displaying data.” See this <a href="http://code.google.com/webtoolkit/doc/latest/DevGuideUiCellWidgets.html">guide</a> for background information on cells.</p>\r | |
| 1181 | \r | |
| 1182 | <p>With this release we have added support for cells in all our data widgets, including: Grid, ListView, Tree and TreeGrid.</p>\r | |
| 1183 | \r | |
| 1184 | <p><img src="http://img1.sencha.com/files/misc/Screen_Shot_2011-10-18_at_2.09.23_PM.png" alt="Cell Grid" /></p>\r | |
| 1185 | \r | |
| 1186 | <p>In previous versions of Ext GWT, it was possible to add widgets to data components. Although this functioned properly, performance was quite slow. This is because there is a large overhead in creating and adding widgets to data components. For each row, a new widget instance is created.</p>\r | |
| 1187 | \r | |
| 1188 | <p>In the cell pattern, a single Cell instance renders each row’s value (be it a number, a button, or a date picker) in the column. In addition, cells do not listen for events directly. Instead, they are passed to the cell from its container.</p>\r | |
| 1189 | \r | |
| 1190 | <p>Here’s an example of a custom Cell that listens for click events:</p>\r | |
| 1191 | \r | |
| 1192 | <p><style>/**\r | |
| 1193 | * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\r | |
| 1194 | * (http://qbnz.com/highlighter/ and http://geshi.org/)\r | |
| 1195 | */\r | |
| 1196 | .java .imp {font-weight: bold; color: red;}\r | |
| 1197 | .java .kw1 {color: #000000; font-weight: bold;}\r | |
| 1198 | .java .kw2 {color: #000066; font-weight: bold;}\r | |
| 1199 | .java .kw3 {color: #003399;}\r | |
| 1200 | .java .kw4 {color: #000066; font-weight: bold;}\r | |
| 1201 | .java .co1 {color: #666666; font-style: italic;}\r | |
| 1202 | .java .co2 {color: #006699;}\r | |
| 1203 | .java .co3 {color: #008000; font-style: italic; font-weight: bold;}\r | |
| 1204 | .java .coMULTI {color: #666666; font-style: italic;}\r | |
| 1205 | .java .es0 {color: #000099; font-weight: bold;}\r | |
| 1206 | .java .br0 {color: #009900;}\r | |
| 1207 | .java .sy0 {color: #339933;}\r | |
| 1208 | .java .st0 {color: #0000ff;}\r | |
| 1209 | .java .nu0 {color: #cc66cc;}\r | |
| 1210 | .java .me1 {color: #006633;}\r | |
| 1211 | .java .me2 {color: #006633;}\r | |
| 1212 | .java span.xtra { display:block; }\r | |
| 1213 | </style><pre class="java">SimpleSafeHtmlCell<span class="sy0"><</span>String<span class="sy0">></span> cell <span class="sy0">=</span> <span class="kw1">new</span> SimpleSafeHtmlCell<span class="sy0"><</span>String<span class="sy0">></span><span class="br0">(</span>SimpleSafeHtmlRenderer.<span class="me1">getInstance</span><span class="br0">(</span><span class="br0">)</span>, <span class="st0">"click"</span><span class="br0">)</span> <span class="br0">{</span>\r | |
| 1214 | @Override\r | |
| 1215 | <span class="kw1">public</span> <span class="kw4">void</span> onBrowserEvent<span class="br0">(</span><a href="http://www.google.com/search?hl=en&q=allinurl%3Acontext+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span class="kw3">Context</span></a> context, <a href="http://www.google.com/search?hl=en&q=allinurl%3Aelement+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span class="kw3">Element</span></a> parent, <a href="http://www.google.com/search?hl=en&q=allinurl%3Astring+java.sun.com&btnI=I%27m%20Feeling%20Lucky"><span class="kw3">String</span></a> value, NativeEvent event,\r | |
| 1216 | ValueUpdater<span class="sy0"><</span>String<span class="sy0">></span> valueUpdater<span class="br0">)</span> <span class="br0">{</span>\r | |
| 1217 | <span class="kw1">super</span>.<span class="me1">onBrowserEvent</span><span class="br0">(</span>context, parent, value, event, valueUpdater<span class="br0">)</span><span class="sy0">;</span>\r | |
| 1218 | <span class="kw1">if</span> <span class="br0">(</span><span class="st0">"click"</span>.<span class="me1">equals</span><span class="br0">(</span>event.<span class="me1">getType</span><span class="br0">(</span><span class="br0">)</span><span class="br0">)</span><span class="br0">)</span> <span class="br0">{</span>\r | |
| 1219 | Info.<span class="me1">display</span><span class="br0">(</span><span class="st0">"Click"</span>, <span class="st0">"You clicked "</span><span class="st0">" + value + "</span><span class="st0">"!"</span><span class="br0">)</span><span class="sy0">;</span>\r | |
| 1220 | <span class="br0">}</span>\r | |
| 1221 | <span class="br0">}</span>\r | |
| 1222 | <span class="br0">}</span><span class="sy0">;</span></pre></p>\r | |
| 1223 | \r | |
| 1224 | <h3>Field Cells</h3>\r | |
| 1225 | \r | |
| 1226 | <p>Most field components in 3.0 are cell based. This means that you can easily use a field cell such as a TextInputCell in a data widget like a grid. You can also use these cells individually by using the corresponding component. For example, to use a TextInputCell as a component, use the included TextField. The component works together with the cell to provide a cohesive component that works like any other GWT component including working with the GWT event system.</p>\r | |
| 1227 | \r | |
| 1228 | <p>We’ve also applied the appearance pattern to our cells. With these changes, it’s now possible to have interactive behavior in our data widgets by using cells. More importantly, this behavior is possible without the overhead and performance problems of working with widgets.</p>\r | |
| 1229 | \r | |
| 1230 | <p>Our cells require some changes in order for them to work properly in our editors and cell based data widgets. At this time the cells are not fully functioning. These changes will be in place before the beta release.</p>\r | |
| 1231 | \r | |
| 1232 | <h3>Data Loading and Writer</h3>\r | |
| 1233 | \r | |
| 1234 | <p>The Store classes continue to be the basis for client-side data management in Ext GWT, and Loaders, DataProxys, and Readers are still an ideal way to provide the data for Stores. As in 2.0, there is no requirement to use them - data can be added directly to the stores. However, we’ve greatly improved the generics on them and made it easier to send data to and from the server in a variety of ways. For those who choose to take advantage of the convenience of using these classes, the Ext GWT 3.0 data classes are a huge improvement in developer convenience and productivity.</p>\r | |
| 1235 | \r | |
| 1236 | <p>Previously, Ext GWT used the introspection-like features of ModelData to allow access to the data within an object. With 3.0, ValueProvider instances can be used to generically refer to individual nested properties, and GWT’s AutoBean functionality can be used to turn bean interfaces into and from data loaded from the server. The HttpProxy and ScriptTagProxy classes can both be asked to generated XML or JSON for the objects sent to the server. Alternatively, they can also generate simple url-encoded data. Furthermore, readers are available to easily map JSON properties or simple XML x-paths to bean properties.</p>\r | |
| 1237 | \r | |
| 1238 | <p>Loaders and Proxies now use specific generics to avoid confusion about the type of model or data that is expected or that will be produced by any particular object. This avoids many common problems, such as class cast exceptions, that occur when less stringent typing is used. These additional type parameters can make object declarations more verbose, but also more precise. These changes result in better static code checking from your IDE or compiler and will point out the error instead of waiting for someone to use every single service. The Explorer demo shows how to turn both XML and JSON into trees or lists to be consumed by their appropriate Stores.</p>\r | |
| 1239 | \r | |
| 1240 | <h3>New Examples</h3>\r | |
| 1241 | \r | |
| 1242 | <p>We have added several new examples to the Explorer Demo since PR4. These include:</p>\r | |
| 1243 | \r | |
| 1244 | <ul>\r | |
| 1245 | <li><strong>Charts:</strong> ToolTip Chart</li>\r | |
| 1246 | <li><strong>Combos:</strong> Advanced ComboBox</li>\r | |
| 1247 | <li><strong>Drag & Drop:</strong> Grid to Grid, List to List, Tree to Tree, TreeGrid to TreeGrid</li>\r | |
| 1248 | <li><strong>Draw:</strong> Basic Draw, Logos</li>\r | |
| 1249 | <li><strong>Forms:</strong> DualListField, FileUpload</li>\r | |
| 1250 | <li><strong>Grid:</strong> Aggregation, Cell, Basic, Grouping, Json, Live Grid, Paging, Xml</li>\r | |
| 1251 | <li><strong>Layouts:</strong> AccordionLayout, Center Layout,, HtmlLayout, PortalLayout</li>\r | |
| 1252 | <li><strong>Template & Lists:</strong> DateCell ListView</li>\r | |
| 1253 | <li><strong>ToolBar & Menu:</strong> Advanced ToolBar, MenuBar, Overflow ToolBar, Status ToolBar</li>\r | |
| 1254 | <li><strong>Tree:</strong> Cell Action Tree, Fast Tree, Filter Tree</li>\r | |
| 1255 | <li><strong>TreeGrid:</strong> Async TreeGrid, Basic TreeGrid, Editable TreeGrid</li>\r | |
| 1256 | <li><strong>Window:</strong> Accordion Window</li>\r | |
| 1257 | </ul>\r | |
| 1258 | \r | |
| 1259 | <p>These examples can be viewed at <a href="http://sencha.com/examples-dev/">here</a>.</p>\r | |
| 1260 | \r | |
| 1261 | <h3>External Links</h3>\r | |
| 1262 | \r | |
| 1263 | <p>Here is a list of previously released content about 3.0. Some of the code samples may be using API’s that have changed since the content was published. Make sure to take a look at the examples in the current release for current and proper API usage.</p>\r | |
| 1264 | \r | |
| 1265 | <ul>\r | |
| 1266 | <li><a href="http://www.sencha.com/blog/ext-gwt-3-appearance-design/">Appearance Design</a></li>\r | |
| 1267 | <li><a href="http://www.sencha.com/blog/ext-gwt-3-drawing-and-charting/">Drawing & Charting</a></li>\r | |
| 1268 | <li><a href="http://www.sencha.com/learn/ext-gwt-3-declarative-markup-with-uibinder/">Declarative Markup with UiBinder</a></li>\r | |
| 1269 | <li><a href="http://www.sencha.com/blog/ext-gwt-3-xtemplate-redesign/">Template Redesign</a></li>\r | |
| 1270 | </ul>\r | |
| 1271 | \r | |
| 1272 | <h3>What’s Missing</h3>\r | |
| 1273 | \r | |
| 1274 | <p>There are a handful of features / components that are not in this preview release. These include:</p>\r | |
| 1275 | \r | |
| 1276 | <ul>\r | |
| 1277 | <li>Grid row expander, Grid row numberer, Grid filtering, Grouping summary view</li>\r | |
| 1278 | <li>Grid column reordering</li>\r | |
| 1279 | <li>RowEditor</li>\r | |
| 1280 | <li>CheckBox selection model</li>\r | |
| 1281 | <li>TimeField</li>\r | |
| 1282 | <li>Tri-state Tree and TreeGrid</li>\r | |
| 1283 | <li>Desktop and Mail demo</li>\r | |
| 1284 | <li>Gray theme</li>\r | |
| 1285 | </ul>\r | |
| 1286 | \r | |
| 1287 | <h3>What’s Next</h3>\r | |
| 1288 | \r | |
| 1289 | <p>The team is working on adding the missing features. In addition, we have handed over the code to our QA team and started more robust testing. We will release the first beta release once we are feature complete which should be fairly soon.</p>\r | |
| 1290 | \r | |
| 1291 | <p>We are also working on documentation for 3.0. This includes cleaning up and adding new content to JavaDocs. In addition, we are working on an manual for 3.0.</p>\r | |
| 1292 | \r | |
| 1293 | <p>We are looking forward to presenting Ext GWT 3.0 at our upcoming conference. We will cover the various features and changes in 3.0 in more detail.</p>\r | |
| 1294 | \r | |
| 1295 | <h3>Nightly Build</h3>\r | |
| 1296 | \r | |
| 1297 | <p>We have setup a nightly build and deployment of the Explorer demo. This is a good place to see the latest code running in the demo. See:</p>\r | |
| 1298 | \r | |
| 1299 | <p><a href="http://staging.sencha.com:8080/examples-dev">http://staging.sencha.com:8080/examples-dev</a></p>\r | |
| 1300 | \r | |
| 1301 | <h3>Maven</h3>\r | |
| 1302 | \r | |
| 1303 | <p>The final release of 3.0 will be put into Maven central and no extra repository is required. However, the releases before GA are released as snapshot releases.</p>\r | |
| 1304 | \r | |
| 1305 | <p>To get the <a href="https://oss.sonatype.org/content/repositories/snapshots/com/sencha/gxt/">snapshot releases</a>, you will need to add the following repository section to your pom.xml:</p>\r | |
| 1306 | \r | |
| 1307 | <p><style>/**\r | |
| 1308 | * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\r | |
| 1309 | * (http://qbnz.com/highlighter/ and http://geshi.org/)\r | |
| 1310 | */\r | |
| 1311 | .xml .imp {font-weight: bold; color: red;}\r | |
| 1312 | .xml .es0 {color: #000099; font-weight: bold;}\r | |
| 1313 | .xml .br0 {color: #66cc66;}\r | |
| 1314 | .xml .sy0 {color: #66cc66;}\r | |
| 1315 | .xml .st0 {color: #ff0000;}\r | |
| 1316 | .xml .sc-1 {color: #808080; font-style: italic;}\r | |
| 1317 | .xml .sc0 {color: #00bbdd;}\r | |
| 1318 | .xml .sc1 {color: #ddbb00;}\r | |
| 1319 | .xml .sc2 {color: #339933;}\r | |
| 1320 | .xml .sc3 {color: #009900;}\r | |
| 1321 | .xml .re0 {color: #000066;}\r | |
| 1322 | .xml .re1 {color: #000000; font-weight: bold;}\r | |
| 1323 | .xml .re2 {color: #000000; font-weight: bold;}\r | |
| 1324 | .xml span.xtra { display:block; }\r | |
| 1325 | </style><pre class="xml"><span class="sc3"><span class="re1"><repository<span class="re2">></span></span></span>\r | |
| 1326 | <span class="sc3"><span class="re1"><id<span class="re2">></span></span></span>sonatype-snapshots<span class="sc3"><span class="re1"></id<span class="re2">></span></span></span>\r | |
| 1327 | <span class="sc3"><span class="re1"><name<span class="re2">></span></span></span>Sonatype Snapshots<span class="sc3"><span class="re1"></name<span class="re2">></span></span></span>\r | |
| 1328 | <span class="sc3"><span class="re1"><url<span class="re2">></span></span></span>https://oss.sonatype.org/content/repositories/snapshots/<span class="sc3"><span class="re1"></url<span class="re2">></span></span></span>\r | |
| 1329 | <span class="sc3"><span class="re1"><snapshots<span class="re2">></span></span></span>\r | |
| 1330 | <span class="sc3"><span class="re1"><enabled<span class="re2">></span></span></span>true<span class="sc3"><span class="re1"></enabled<span class="re2">></span></span></span>\r | |
| 1331 | <span class="sc3"><span class="re1"></snapshots<span class="re2">></span></span></span>\r | |
| 1332 | <span class="sc3"><span class="re1"></repository<span class="re2">></span></span></span></pre></p>\r | |
| 1333 | \r | |
| 1334 | <p>We have several artifacts available:</p>\r | |
| 1335 | \r | |
| 1336 | <ul>\r | |
| 1337 | <li><strong>gxt-release</strong> - A zip of the release, similar to how Ext <span class="caps">GWT</span> was released before 3.0</li>\r | |
| 1338 | <li><strong>gxt</strong> - The core component and data classes</li>\r | |
| 1339 | <li><strong>gxt-charts</strong> - The new drawing and charting API</li>\r | |
| 1340 | <li><strong>gxt-legacy</strong> - Classes to ease porting projects from earlier Ext GWT versions</li>\r | |
| 1341 | <li><strong>uibinder-bridge</strong> - Optional support to allow complete configuring non Widget types using <ui:with> in UiBinder XML. Will not be required when Google releases 2.5</li>\r | |
| 1342 | </ul>\r | |
| 1343 | \r | |
| 1344 | <h3>Summary</h3>\r | |
| 1345 | \r | |
| 1346 | <p>Thanks for reading this article and for trying Ext GWT 3.0 PR5. We’re very excited about Ext GWT 3.0, and we hope this release will show you the potential of this next major update to Ext GWT.</p>\r | |
| 1347 | \r | |
| 1348 | <p class="button-group">\r | |
| 1349 | <a class="button-link inline small arrow" href="http://cdn.sencha.io/extgwt/gxt-3.0.0-dp5.zip" title="Download Ext GWT 3.0 Developer Preview 5"><span>Download Ext GWT 3.0</span></a> \r | |
| 1350 | <a class="button-link inline small blue" href="http://dev.sencha.com/deploy/gxt-3.0.0-dp5/javadoc/gxt/" title="View Docs for Ext GWT 3.0 Developer Preview 5">View Documentation</a>\r | |
| 1351 | </p>\r | |
| 1352 | \r | |
| 1353 | <p>Also please visit the <a href="http://sencha.com/examples-dev/">Explorer Demo</a>. Release notes for PR5 are <a href="http://dev.sencha.com/deploy/gxt-3.0.0-dp5/release_notes.html">here</a>.</p>\r | |
| 1354 | \r | |
| 1355 | <style>\r | |
| 1356 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 1357 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 1358 | </style>\r | |
| 1359 | \r | |
| 1360 | <div class="feedflare">\r | |
| 1361 | <a href="http://feeds.feedburner.com/~ff/extblog?a=2FYwl8rggRg:ZBRi2x5yIOc:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=2FYwl8rggRg:ZBRi2x5yIOc:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=2FYwl8rggRg:ZBRi2x5yIOc:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=2FYwl8rggRg:ZBRi2x5yIOc:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=2FYwl8rggRg:ZBRi2x5yIOc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=2FYwl8rggRg:ZBRi2x5yIOc:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=2FYwl8rggRg:ZBRi2x5yIOc:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=2FYwl8rggRg:ZBRi2x5yIOc:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=2FYwl8rggRg:ZBRi2x5yIOc:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=2FYwl8rggRg:ZBRi2x5yIOc:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 1362 | </div>]]></content>\r | |
| 1363 | <pubDate>Wed, 19 Oct 2011 16:00 GMT</pubDate>\r | |
| 1364 | <guid isPermaLink="false">http://www.sencha.com/blog/ext-gwt-3-developer-preview-5/#date:16:00</guid>\r | |
| 1365 | <feedburner:origLink>http://www.sencha.com/blog/ext-gwt-3-developer-preview-5/#date:16:00</feedburner:origLink></item>\r | |
| 1366 | \r | |
| 1367 | <item>\r | |
| 1368 | <title>Sencha Touch 2 Developer Preview</title>\r | |
| 1369 | <author>Ed Spencer</author>\r | |
| 1370 | <description>\r | |
| 1371 | Today we're thrilled to share with you the first developer preview of Sencha Touch 2.0. Sencha Touch 1.0 launched just one year ago and has quickly become the standard by which mobile HTML5 app frameworks are judged. Today, we're delivering a preview of our next big release.\r | |
| 1372 | </description>\r | |
| 1373 | <link>http://feedproxy.google.com/~r/extblog/~3/tdzdKy-5-iw/</link>\r | |
| 1374 | <content><![CDATA[\r | |
| 1375 | \r | |
| 1376 | <p><img class="alignright" src="http://img1.sencha.com/files/misc/sencha-touch-2.png" alt="Sencha Touch 2.0: Developer Preview" height="100" width="100"> Today we’re thrilled to share with you the <strong>first developer preview of Sencha Touch 2</strong>. Sencha Touch 1.0 launched just one year ago and has become the leading framework to build mobile HTML5 apps. Today, we’re delivering a preview of our biggest update to the framework yet. We’ve focused on three key areas: Performance, Ease of Use, and Native Packaging. We’d like to share with you the details of each of these.</p>\r | |
| 1377 | \r | |
| 1378 | <p class="button-group">\r | |
| 1379 | <a class="button-link inline small arrow" href="http://cdn.sencha.io/touch/sencha-touch-2-pr2.zip" title="Download Sencha Touch 2.0.0 Developer Preview"><span>Download Touch</span></a> \r | |
| 1380 | <a class="button-link inline small blue" href="http://docs.sencha.com/touch/2-0/" title="View Docs for Sencha Touch 2.0.0 Developer Preview">View Documentation</a>\r | |
| 1381 | <a class="button-link inline small blue" href="http://cdn.sencha.io/sdk-tools/SenchaSDKTools-2.0.0-Developer-Preview.tar.gz" title="Download Sencha SDK Tools 2.0.0 Developer Preview">Download <span class="caps">SDK</span> Tools (Mac-only)</a> \r | |
| 1382 | </p>\r | |
| 1383 | \r | |
| 1384 | <h3>Performance First</h3>\r | |
| 1385 | \r | |
| 1386 | <p>Our number one goal for Sencha Touch 2 is performance. Web apps can’t be beaten for convenience, but you want them to be fast too. There’s the measurable stuff: fast to boot up, fast to layout, fast to switch orientation, and fast to render. But there’s also the intangible aspects—scrolling needs to feel smooth and animations should be fluid and flicker-free. </p>\r | |
| 1387 | \r | |
| 1388 | <h4>A Brand New Layout Engine</h4>\r | |
| 1389 | \r | |
| 1390 | <p>One of the key targets for performance improvement was the layout engine. The Sencha Touch 1.0 layout engine was extremely powerful and great for laying out apps just the way you want them, but the price for all that power was often reduced performance. This was especially evident when rotating the device, where layout updates could take up to a second to complete.</p>\r | |
| 1391 | \r | |
| 1392 | <p>Our mission in Touch 2 was to dramatically improve layout performance while maintaining the flexibility that developers are accustomed to. To achieve this, we rethought how to size and position things on screen. The result is massively improved layout performance across the board. Screens pop onto the page much faster when navigating through the app, giving a much more fluid experience, but the most dramatic improvement is when changing a device’s orientation. The new layout engine is so fast we had to use a high-speed camera to measure it. Here’s the Kitchen Sink buttons example running on 1.x and 2.x, slowed down to one quarter speed:</p>\r | |
| 1393 | \r | |
| 1394 | <p><figure class="aligncenter">\r | |
| 1395 | <a href="http://vimeo.com/30296006" target="_blank"><img src="http://img1.sencha.com/files/misc/20111010-video-full.jpg" alt="Sencha Touch Kitchen Sink orientation change on Motorola Atrix, Touch 1.1 vs. Touch 2.0" height="246" width="636"></a>\r | |
| 1396 | <figcaption>The new layout engine is so fast we had to use a high-speed camera to measure it. Sencha Touch Kitchen Sink orientation change on an Android Motorola Atrix, Touch 1.1 versus 2.0.0-pr1.<br />\r | |
| 1397 | <a class="more-icon" href="http://vimeo.com/30296006" target="_blank">Watch this video on Vimeo</a></figcaption><br />\r | |
| 1398 | </figure></p>\r | |
| 1399 | \r | |
| 1400 | <p>That’s a Motorola Atrix rotating with 1.1 and 2.0. Shooting at 120 frames per second, Sencha Touch 1.1.0 takes 118 frames (0.98 seconds) to update the application layout. With Sencha Touch 2.0, it takes just 42 frames (0.35 seconds) for the exact same example. You’ll see see similar speedups throughout all the demo apps with Sencha Touch 2.0.</p>\r | |
| 1401 | \r | |
| 1402 | <h4>Android Performance</h4>\r | |
| 1403 | \r | |
| 1404 | <p><figure class="alignright" style="width: 300px;">\r | |
| 1405 | <a href="http://vimeo.com/30324079" target="_blank"><img src="http://img1.sencha.com/files/misc/20111010-video-sm.jpg" alt="Sencha Touch 2 (developer preview) performs much better on Android. Here's an interaction test shown running on a Motorola Atrix." height="236" width="300"></a>\r | |
| 1406 | <figcaption>Interaction test shown running on a Motorola Atrix. Touch 2 performs much better on Android. <br />\r | |
| 1407 | <a class="more-icon" href="http://vimeo.com/30324079" target="_blank">Watch this video on Vimeo</a></figcaption><br />\r | |
| 1408 | </figure></p>\r | |
| 1409 | \r | |
| 1410 | <p>The second big improvement we’ve made in Sencha Touch 2.0 is Android performance, particularly when it comes to scrolling and animation. Many of you noted the fact that Android devices were noticeably slower when scrolling through large lists, and that animations could be choppy and exhibit weird visual artifacts.</p>\r | |
| 1411 | \r | |
| 1412 | <p>Touch 2 gives Android its own optimized mechanism for achieving both smooth scrolling and fast, fluid animations. We’ll go further into the technology behind these advances at <a href="http://www.sencha.com/senchacon2011">SenchaCon</a> later this month, but for now here’s the Motorola Atrix again, showing just how much faster 2.0 feels on Android devices.</p>\r | |
| 1413 | \r | |
| 1414 | <h4 style="clear:both;">Startup Time</h4>\r | |
| 1415 | \r | |
| 1416 | <p>The third major area of performance improvement is in Sencha Touch startup time. We’ve optimized everything we can put our hands on with startup. And so far we’re seeing between 10% to 25% improvement in startup time on a range of devices, when testing our Kitchen Sink example. This app is sizable—it demonstrates almost every component in the framework and on many devices loads almost a second faster in 2.x:</p>\r | |
| 1417 | \r | |
| 1418 | <p><figure class="aligncenter">\r | |
| 1419 | <img src="http://img1.sencha.com/files/misc/20111010-sencha-touch-startup-times.png" alt="Sencha Touch startup times on various devices, 1.1.1 versus 2.0" height="377" width="715">\r | |
| 1420 | <figcaption>Sencha Touch Kitchen Sink startup times on various devices, 1.1.1 versus 2.0. The app loads almost a full second faster on every device.</figcaption><br />\r | |
| 1421 | </figure></p>\r | |
| 1422 | \r | |
| 1423 | <h3>Easy to Use</h3>\r | |
| 1424 | \r | |
| 1425 | <p>The second objective of Sencha Touch 2 is to make it easier to create applications. There are many things we’ve done to improve this, from simplifying configuration options, to providing more example code and completely overhauling the documentation.</p>\r | |
| 1426 | \r | |
| 1427 | <h4>Class System and Apps</h4>\r | |
| 1428 | \r | |
| 1429 | <p>Sencha Touch 2 uses the powerful new class system from Ext JS 4. This gives us all of the benefits of dynamic loading, intelligent builds that only include the classes you use, mixins, configurations and all the other features of the new engine. We have a full <a href="http://docs.sencha.com/touch/2-0/#!/guide/class_system">guide to the new class system</a> on the documentation site.</p>\r | |
| 1430 | \r | |
| 1431 | <p>We’ve also brought across the improved application architecture from Ext JS 4, that includes ComponentQuery and production build support. All these features haven’t been at the expense of download size. We’ve been able to keep the total download payload roughly the same size, and that’s before build optimization. </p>\r | |
| 1432 | \r | |
| 1433 | <h4>Streamlined Component Configuration</h4>\r | |
| 1434 | \r | |
| 1435 | <p>In the past, if you ever needed to set/get a config like “label” you would need to create your setters and getters yourself. Now, with Sencha Touch 2 you get this out of the box. The new class system gives you the ability to set up <code>configs</code>—simple properties that are automatically given getter and setter functions, defaults and more.</p>\r | |
| 1436 | \r | |
| 1437 | <p>Sencha Touch 2 makes use of the config system throughout the framework so whenever you see a config on a class you already know that you can reconfigure it at any time (even after it is rendered). Even better, because the config’s setter name always follows the same pattern you already know what function to call.</p>\r | |
| 1438 | \r | |
| 1439 | <p>For example, we can give a Text Field a label when we instantiate it and then know we can easily change it later:</p>\r | |
| 1440 | \r | |
| 1441 | <style>/**\r | |
| 1442 | * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann\r | |
| 1443 | * (http://qbnz.com/highlighter/ and http://geshi.org/)\r | |
| 1444 | */\r | |
| 1445 | .javascript .imp {font-weight: bold; color: red;}\r | |
| 1446 | .javascript .kw1 {color: #000066; font-weight: bold;}\r | |
| 1447 | .javascript .kw2 {color: #003366; font-weight: bold;}\r | |
| 1448 | .javascript .kw3 {color: #000066;}\r | |
| 1449 | .javascript .co1 {color: #006600; font-style: italic;}\r | |
| 1450 | .javascript .co2 {color: #009966; font-style: italic;}\r | |
| 1451 | .javascript .coMULTI {color: #006600; font-style: italic;}\r | |
| 1452 | .javascript .es0 {color: #000099; font-weight: bold;}\r | |
| 1453 | .javascript .br0 {color: #009900;}\r | |
| 1454 | .javascript .sy0 {color: #339933;}\r | |
| 1455 | .javascript .st0 {color: #3366CC;}\r | |
| 1456 | .javascript .nu0 {color: #CC0000;}\r | |
| 1457 | .javascript .me1 {color: #660066;}\r | |
| 1458 | .javascript span.xtra { display:block; }\r | |
| 1459 | </style><pre class="javascript"><span class="kw2">var</span> text <span class="sy0">=</span> Ext.<span class="me1">create</span><span class="br0">(</span><span class="st0">'Ext.form.Text'</span><span class="sy0">,</span> <span class="br0">{</span>\r | |
| 1460 | label<span class="sy0">:</span> <span class="st0">'My Field'</span>\r | |
| 1461 | <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>\r | |
| 1462 | <span class="co1">// anything we can configure also has a setter function</span>\r | |
| 1463 | <span class="co1">// its name always follows the setConfigName pattern</span>\r | |
| 1464 | text.<span class="me1">setLabel</span><span class="br0">(</span><span class="st0">'Another Field'</span><span class="br0">)</span><span class="sy0">;</span></pre>\r | |
| 1465 | \r | |
| 1466 | <p>From the <a href="http://docs.sencha.com/touch">Sencha Touch documentation</a>, every listed config option has a getter and setter function. They all follow the exact same pattern of getConfigName and setConfigName. This makes it really easy to configure and reuse components throughout your app.</p>\r | |
| 1467 | \r | |
| 1468 | <h4>Great Documentation</h4>\r | |
| 1469 | \r | |
| 1470 | <p><a href="http://cdn.sencha.io/touch/sencha-touch-2.0.0-pr2/"><img class="alignright" src="http://img1.sencha.com/files/misc/20111011-touch-docs.png" alt="Touch Docs" height="267" width="284"></a></p>\r | |
| 1471 | \r | |
| 1472 | <p>We’re totally obsessed with improving our documentation for Sencha Touch 2. The new docs feature all of our examples and videos baked right in, but the real improvements are in the class reference. </p>\r | |
| 1473 | \r | |
| 1474 | <p>All of the most widely used classes in Sencha Touch 2 feature excellent documentation right in the <span class="caps">API</span> reference. Interspersed with the class docs are dozens of live examples that run right in your browser and let you see (and even modify) the example code on the fly. We’ve also brought all of the <span class="caps">SASS</span> variables for each Component into the <span class="caps">API</span> docs, making it much easier to see what you can customize.</p>\r | |
| 1475 | \r | |
| 1476 | <p>Finally, <strong>we’re shipping 11 brand new guides</strong> out of the box. Check out our work in progress with guides that explain core concepts like <a target="_blank" href="http://docs.sencha.com/touch/2-0/#!/guide/layouts">Layouts</a>, <a target="_blank" href="http://docs.sencha.com/touch/2-0/#!/guide/components">Components</a> and <a target="_blank" href="http://docs.sencha.com/touch/2-0/#!/guide/class_system">Classes</a>, and others that cover how to use components like <a target="_blank" href="http://docs.sencha.com/touch/2-0/#!/guide/tabs">tab panels</a>, <a target="_blank" href="http://docs.sencha.com/touch/2-0/#!/guide/forms">forms</a> and <a target="_blank" href="http://docs.sencha.com/touch/2-0/#!/guide/carousel">carousels</a>. For Sencha Touch veterans there’s a <a target="_blank" href="http://docs.sencha.com/touch/2-0/#!/guide/whats_new">What’s New in 2 guide</a>, and the new <a target="_blank" href="http://docs.sencha.com/touch/2-0/#!/guide/getting_started">Getting Started guide</a> takes you through building your first app from scratch.</p>\r | |
| 1477 | \r | |
| 1478 | <h3>Native Packaging</h3>\r | |
| 1479 | \r | |
| 1480 | <p>One of the most common questions developers ask when building Sencha Touch apps is “how do I get my app in front of customers?” In many scenarios, building and deploying apps to the web is exactly what developers want and customers expect. In some cases, getting apps in to app stores is an added bonus.</p>\r | |
| 1481 | \r | |
| 1482 | <p>Today, along with Sencha Touch 2 preview, we’re shipping a developer preview of our <span class="caps">SDK</span> Tools 2.0. This first preview is available on Mac <span class="caps">OSX</span> and packages your app for submission to the Apple App Store. The new <span class="caps">SDK</span> Tools include a new <code>sencha package</code> command that enables you to take your Sencha Touch app and package it up for submission to Apple. </p>\r | |
| 1483 | \r | |
| 1484 | <p>To make a developer’s life easier, on iOS the packager doesn’t require the native <span class="caps">SDK</span> so you can package without having to download the iOS <span class="caps">SDK</span>. Just <a href="http://cdn.sencha.io/sdk-tools/SenchaSDKTools-2.0.0-Developer-Preview.tar.gz">download the <span class="caps">SDK</span> Tools</a> and you’re ready to build. For developers who do have the the native <span class="caps">SDK</span>s, you can use the <span class="caps">SDK</span> Tools to directly push your app to the iOS emulator so you can see how your app will run on device.</p>\r | |
| 1485 | \r | |
| 1486 | <p>There will be many more capabilities in our packaging tool by final release. If you’re interested in getting started, embedded in the documentation is a <a target="_blank" href="http://docs.sencha.com/touch/2-0/#!/guide/native_packaging">new guide that has all the details</a> on how to use the new packaging capabilities. We think you’ll be as excited as we are with how easy it is now to build and package your web app for native distribution.</p>\r | |
| 1487 | \r | |
| 1488 | <h3>Developer Preview</h3>\r | |
| 1489 | \r | |
| 1490 | <p>This is just a developer preview so we’re not quite feature complete yet. At the moment the main items missing from the release are multiple carousel animations, sortable tabs, draggables and history/deep linking support. These will all be coming back into the framework before general release.</p>\r | |
| 1491 | \r | |
| 1492 | <p>As a preview release, <strong><span class="caps">API</span>s are not yet frozen.</strong> This should be fair warning. Because the <span class="caps">API</span> is not yet frozen, we’re also not yet guaranteeing backwards compatibility with Sencha Touch 1.x. </p>\r | |
| 1493 | \r | |
| 1494 | <p>Everyone attending SenchaCon later this month will also be able to attend <a href="http://secure.lenos.com/lenos/sencha/SenchaCon2011/sessions.htm">Jamie Avins’ talk</a> on migrating apps from Sencha Touch 1 to Sencha Touch 2.</p>\r | |
| 1495 | \r | |
| 1496 | <h3>Conclusion</h3>\r | |
| 1497 | \r | |
| 1498 | <p>From faster startup time to Android advances, from fluid scrolling to amazing documentation, from native packaging to the new class system, Sencha Touch 2 will be a major step forward for developers looking to build mobile HTML5 applications. We’re very excited about all the improvements to Sencha Touch, and we’re excited to see what developers will accomplish. Join us in the forums and keep an eye on the blog as we post more articles on Touch 2.</p>\r | |
| 1499 | \r | |
| 1500 | <p>And of course, if you want to meet the folks behind Touch, join us at <a href="http://www.sencha.com/senchacon2011">SenchaCon</a> in Austin, Texas!</p>\r | |
| 1501 | \r | |
| 1502 | <p class="button-group">\r | |
| 1503 | <a class="button-link inline small arrow" href="http://cdn.sencha.io/touch/sencha-touch-2-pr2.zip" title="Download Sencha Touch 2.0.0 Developer Preview"><span>Download Touch</span></a> \r | |
| 1504 | <a class="button-link inline small blue" href="http://docs.sencha.com/touch/2-0/" title="View Docs for Sencha Touch 2.0.0 Developer Preview">View Documentation</a>\r | |
| 1505 | <a class="button-link inline small blue" href="http://cdn.sencha.io/sdk-tools/SenchaSDKTools-2.0.0-Developer-Preview.tar.gz" title="Download Sencha SDK Tools 2.0.0 Developer Preview">Download <span class="caps">SDK</span> Tools (Mac-only)</a> \r | |
| 1506 | </p>\r | |
| 1507 | <style>\r | |
| 1508 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 1509 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 1510 | </style>\r | |
| 1511 | \r | |
| 1512 | <div class="feedflare">\r | |
| 1513 | <a href="http://feeds.feedburner.com/~ff/extblog?a=tdzdKy-5-iw:r4oblFaLZ4Q:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=tdzdKy-5-iw:r4oblFaLZ4Q:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=tdzdKy-5-iw:r4oblFaLZ4Q:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=tdzdKy-5-iw:r4oblFaLZ4Q:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=tdzdKy-5-iw:r4oblFaLZ4Q:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=tdzdKy-5-iw:r4oblFaLZ4Q:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=tdzdKy-5-iw:r4oblFaLZ4Q:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=tdzdKy-5-iw:r4oblFaLZ4Q:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=tdzdKy-5-iw:r4oblFaLZ4Q:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=tdzdKy-5-iw:r4oblFaLZ4Q:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 1514 | </div>]]></content>\r | |
| 1515 | <pubDate>Tue, 11 Oct 2011 16:00 GMT</pubDate>\r | |
| 1516 | <guid isPermaLink="false">http://www.sencha.com/blog/sencha-touch-2-developer-preview/#date:16:00</guid>\r | |
| 1517 | <feedburner:origLink>http://www.sencha.com/blog/sencha-touch-2-developer-preview/#date:16:00</feedburner:origLink></item>\r | |
| 1518 | \r | |
| 1519 | <item>\r | |
| 1520 | <title>Ext JS 4.1 Update</title>\r | |
| 1521 | <author>Michael Mullany</author>\r | |
| 1522 | <description>\r | |
| 1523 | We’re committed to Ext JS as the best application framework for desktop applications, and we hope that you’ll be pleased with our work in Ext JS 4.1. Here's an update on our current plan for the upcoming Ext JS 4.1.\r | |
| 1524 | </description>\r | |
| 1525 | <link>http://feedproxy.google.com/~r/extblog/~3/PF8RkWPL3Rg/</link>\r | |
| 1526 | <content><![CDATA[\r | |
| 1527 | \r | |
| 1528 | <p><img class="alignright" src="http://img1.sencha.com/files/misc/Ext-JS-4-1.png" alt="Ext JS 4.1 Update" height="90" width="120"> In August, we did a preview blog on Ext JS 4.1. In it, we explained that we were going to concentrate on Performance and Documentation for our release. We also said that we expected to ship it in “mid-to-late September”. To our disappointment, we haven’t been able to make that date, and now I wanted to update you on our new product delivery schedule.</p>\r | |
| 1529 | \r | |
| 1530 | <h4>Update: Ext JS 4.0.7 is now available <a href="http://www.sencha.com/products/extjs/download" class="button-link inline small arrow">Download Ext JS 4.0.7</a></h4>\r | |
| 1531 | \r | |
| 1532 | <h3>The Challenge: Ext JS 4.0 Performance in IE7/8</h3>\r | |
| 1533 | \r | |
| 1534 | <p>Our goal for Ext JS 4.1 is to meaningfully accelerate performance on older IE browsers. Compared to IE9, Chrome and other modern browsers, IE 7 and IE8 have slow JavaScript engines and <span class="caps">DOM</span> interactions. Ext JS 4.0 exercises these functions particularly hard. As a result while Ext JS 4 performance is solid on modern browsers, its page display time for complex layouts is quite slow in IE7 and IE8.</p>\r | |
| 1535 | \r | |
| 1536 | <h3>Optimization Sources for IE</h3>\r | |
| 1537 | \r | |
| 1538 | <p>The Ext JS 4.1 release is focused on speeding up page display time in IE7/8. Based on initial performance profiling, we ascertained that moving from incremental rendering to batch rendering would greatly speed up page display time. We initially scoped this as a two month project. However, moving to batched rendering proved to be only half the battle. We subsequently uncovered another set of performance bottlenecks in post-rendering in IE7/8 which has taken us time to re-engineer. As a result, while we’re finally code-complete on the core refactoring, we now need stabilization and beta time. Because of this, we now expect to see a beta of 4.1 at the end of October, which we anticipate will deliver a significant speed-up in complex layouts. (Due to the similarity of IE6 with IE7/8, IE6 performance will also improve significantly). We have good confidence in our ability to hit this new date – although unexpected issues may still arise.</p>\r | |
| 1539 | \r | |
| 1540 | <h3>Releasing 4.0.7 to General Community</h3>\r | |
| 1541 | \r | |
| 1542 | <p>We’re disappointed about not being able to bring you 4.1 in the time frame we promised. As a result, we will be making our 4.0.7 release – normally only available to commercial support subscribers – available to the entire community in the next week. 4.0.7 contains almost two hundred bug releases subsequent to 4.0.2a, and we want you to have them on an accelerated time-table. </p>\r | |
| 1543 | \r | |
| 1544 | <p>We’ll be making periodic progress reports on 4.1 on the forums as we approach final release, and providing performance workarounds in the short-term for those of you who can’t wait for 4.1 to release.</p>\r | |
| 1545 | \r | |
| 1546 | <h3>Performance Data from Complex Layouts</h3>\r | |
| 1547 | \r | |
| 1548 | <p>If you are currently encountering performance problems with your Ext JS 4.0 app on IE7/8, we’re also making a performance profiler available with <a href="http://www.surveymonkey.com/s/WLLPM8M">instructions on how to send us performance data</a>. We’ve identified additional areas we want to optimize for 4.2, and we’d like to gather more test data from as many applications with complex layouts as possible.</p>\r | |
| 1549 | \r | |
| 1550 | <h3>Changing How We Communicate Release Dates and Status</h3>\r | |
| 1551 | \r | |
| 1552 | <p>As we look over our ability to predict release dates, we just haven’t done a good job at this in 2011. Ext JS 4 was later than we originally announced, and our other releases have slipped past their initial launch targets. While I could take refuge in the statement “software is hard and unpredictable”, I don’t think excuses are much use to you when you have projects with hard dependencies on our ability to deliver on time. Apologies.</p>\r | |
| 1553 | \r | |
| 1554 | <p>As a result, starting today, we’re going to be more conservative about communicating dates and we will be careful to communicate our level of confidence in those dates. In addition, we want to start providing more detail on what we’re working on and what we’re not. Using blog posts and forum posts seems to be insufficient. So, we’re looking at better ways of sharing what we’re doing with you on a continuous and transparent basis, including potentially providing open read-only access to our bug tracker.</p>\r | |
| 1555 | \r | |
| 1556 | <p>We’re committed to Ext JS as the best application framework for desktop applications, and we hope that you’ll be pleased with our work in Ext JS 4.1.</p>\r | |
| 1557 | <style>\r | |
| 1558 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 1559 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 1560 | </style>\r | |
| 1561 | \r | |
| 1562 | <div class="feedflare">\r | |
| 1563 | <a href="http://feeds.feedburner.com/~ff/extblog?a=PF8RkWPL3Rg:cpH4pog2WKM:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=PF8RkWPL3Rg:cpH4pog2WKM:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=PF8RkWPL3Rg:cpH4pog2WKM:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=PF8RkWPL3Rg:cpH4pog2WKM:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=PF8RkWPL3Rg:cpH4pog2WKM:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=PF8RkWPL3Rg:cpH4pog2WKM:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=PF8RkWPL3Rg:cpH4pog2WKM:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=PF8RkWPL3Rg:cpH4pog2WKM:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=PF8RkWPL3Rg:cpH4pog2WKM:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=PF8RkWPL3Rg:cpH4pog2WKM:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 1564 | </div>]]></content>\r | |
| 1565 | <pubDate>Mon, 10 Oct 2011 20:00 GMT</pubDate>\r | |
| 1566 | <guid isPermaLink="false">http://www.sencha.com/blog/ext-js-4-1-update/#date:20:00</guid>\r | |
| 1567 | <feedburner:origLink>http://www.sencha.com/blog/ext-js-4-1-update/#date:20:00</feedburner:origLink></item>\r | |
| 1568 | \r | |
| 1569 | <item>\r | |
| 1570 | <title>Sencha Touch Spotlight: Group Commerce</title>\r | |
| 1571 | <author>Eric Entin</author>\r | |
| 1572 | <description>\r | |
| 1573 | We spoke to Group Commerce about building their cross-platform mobile app for Boston.com\r | |
| 1574 | </description>\r | |
| 1575 | <link>http://feedproxy.google.com/~r/extblog/~3/JFBhN8IEv60/</link>\r | |
| 1576 | <content><![CDATA[\r | |
| 1577 | \r | |
| 1578 | <p><figure class="aligncenter">\r | |
| 1579 | <img src="http://img1.sencha.com/files/misc/boston-deals-hero.jpg" alt="Boston Deals, a Sencha Touch app built by Group Commerce for Boston.com" height="380" width="636">\r | |
| 1580 | <figcaption>\r | |
| 1581 | Boston Deals, a Sencha Touch app built by Group Commerce for Boston.com.<br />\r | |
| 1582 | \r | |
| 1583 | <a class="more-icon" href="http://www.sencha.com/apps/boston-com-deals/">View Boston Deals app in the Sencha Touch App Gallery</a>\r | |
| 1584 | </figcaption><br />\r | |
| 1585 | </figure></p>\r | |
| 1586 | \r | |
| 1587 | <p><a class="alignright" href="http://groupcommerce.com"><img src="http://img1.sencha.com/files/misc/group-commerce-logo.png" alt="Group Commerce logo" height="75" width="280"></a> <a href="http://groupcommerce.com">Group Commerce</a> is a white-label group buying platform built to serve the needs of publishers and merchants. Browsing deals is something people love doing during down-time. Buying deals should be simple on whatever device they’re using, so mobile-optimized access was a common customer request. Plus, our deals are often local, so we wanted to be able to deliver nearby deals to consumers when and where they’re most relevant.</p>\r | |
| 1588 | \r | |
| 1589 | <blockquote class="pullquote">\r | |
| 1590 | <p><span>“</span>Other companies in the deals space have mobile sites, so we needed our mobile offering to stand out.”</p>\r | |
| 1591 | </blockquote>\r | |
| 1592 | \r | |
| 1593 | <p>Other companies in the deals space (both direct-to-consumer and other white-label platforms) have mobile sites, so we needed our mobile offering to stand out. Time-to-market was another consideration — our first client that required a mobile app asked to launch as soon as possible, and we wanted to support at least iOS and Android (and quickly add more platforms in the future).</p>\r | |
| 1594 | \r | |
| 1595 | <p>So — we needed a way to build a mobile deals site with a great user experience, on a short time frame, for iOS and Android. It was a tall order…</p>\r | |
| 1596 | \r | |
| 1597 | <p>Our apps let customers browse and buy deals selected — and often sourced — by their favorite publishers. The first app we launched using Group Commerce’s Sencha Touch-based deal app framework was for <a href="http://boston.com">Boston.com</a>, the online home of The Boston Globe. Boston.com’s audience, which generally lives in and around Boston, was already accustomed to purchasing great deals from local businesses at <a href="http://deals.boston.com">boston.com/deals</a> (via desktop). Our challenge was translating that strong desktop experience to an equally powerful mobile one.</p>\r | |
| 1598 | \r | |
| 1599 | <p>As a tech startup working with premium publishers that have lots of brand equity and incredibly high expectations, we weren’t willing to accept a subpar experience in exchange for minor improvements in speed or cost.</p>\r | |
| 1600 | \r | |
| 1601 | <p>Now, people who visit the site with their mobile devices receive a might-as-well-be-native experience tailored to the form factor and usability patterns of their devices. They view, buy, and share the latest deals, subscribe to our email lists, invite friends, and even contact customer support directly from the app.</p>\r | |
| 1602 | \r | |
| 1603 | <p><a class="alignright lightbox" href="http://img1.sencha.com/files/misc/group-commerce-boston-com-02.png" title="Boston Deals, a Sencha Touch app built by Group Commerce for Boston.com"><img src="http://img1.sencha.com/files/misc/group-commerce-boston-com-02-sm.jpg" alt="Boston Deals, a Sencha Touch app built by Group Commerce for Boston.com" height="312" width="166"></a></p>\r | |
| 1604 | \r | |
| 1605 | <p>The Sencha Touch support for Google Maps integration was a major help when implementing our “deals near you” map. Apple’s MapKit <span class="caps">API</span> is certainly not as easy to use or customize as the Google Maps <span class="caps">API</span>. Adding a map to the application that had great look and feel took very little work. It even has support for Street View, a great feature the iOS MapKit <span class="caps">API</span> lacks.</p>\r | |
| 1606 | \r | |
| 1607 | <p>Individual deals often have several images attached to them, so the Sencha Touch carousel made adding a beautiful native-like scrolling picture gallery easy and fast. We even decided to alter the appearance of the page indicators (easy with Sencha) to make them stand out better against the various images.</p>\r | |
| 1608 | \r | |
| 1609 | <p>Allowing users to buy deals within the mobile app was an important feature that Sencha Touch helped us implement quickly. By taking advantage of Sencha forms, we were able to easily create great-looking purchase forms, perform any needed validation, and handle any errors returned by the server.</p>\r | |
| 1610 | \r | |
| 1611 | <h3>Why We Chose Sencha Touch</h3>\r | |
| 1612 | \r | |
| 1613 | <p>Most importantly, Sencha Touch is, at its core, based on open web technologies. This means that you get the important “write once, run everywhere” effect on all mobile devices that Sencha Touch supports. Up until recently, it was possible to get away with only supporting iOS because that’s where most of the mobile app users were. For Group Commerce today, foregoing Android support and failing to serve a huge and growing portion of our users is not an option. Sencha support for more obscure platforms is just icing on the cake. If you eventually wrap your Sencha Touch app in a native shell like PhoneGap for distribution as a “native” app, the actual code that provides the functionality of your application can run on the same open web technologies probably used for your desktop sites, so maintenance and upgrades become much more efficient.</p>\r | |
| 1614 | \r | |
| 1615 | <p>We used <a href="http://nodejs.org/">Node.js</a> to build the backend server for the mobile application, which meant that we were able to build both the client and the server in JavaScript. Removing the “context switches” between adding something to the backend and adding something to the client speeds development. You can also take advantage of awesome libraries like <a href="http://socket.io/">Socket.io</a> to push data in real time between the server and client. If you’re clever, you can even use the same code for the client and the server… how cool is that? That would never be possible if you built the clients natively. Not only would you have to write the backend <span class="caps">API</span>, but also client libraries for each platform you wanted to support. We were also able to take advantage of technologies like <a href="http://coffeescript.org">CoffeeScript</a> and <a href="http://jade-lang.com/">Jade</a> to make writing and maintaining our JS even easier and cleaner.</p>\r | |
| 1616 | \r | |
| 1617 | <p>To be fair, other mobile application frameworks provide similar tooling around the <span class="caps">MVC</span> pattern, but the fact is that none of them are as visually elegant by default as Sencha Touch. It’s also so insanely theme-able (with <span class="caps">CSS</span>!) that future clients with different color schemes and layout requirements can easily have their own mobile app with its own look and feel without us needing to touch any code.</p>\r | |
| 1618 | \r | |
| 1619 | <p><a class="alignleft lightbox" href="http://img1.sencha.com/files/misc/group-commerce-boston-com-05.png" title="Boston Deals, a Sencha Touch app built by Group Commerce for Boston.com"><img src="http://img1.sencha.com/files/misc/group-commerce-boston-com-05-sm.jpg" alt="Boston Deals, a Sencha Touch app built by Group Commerce for Boston.com" height="312" width="166"></a></p>\r | |
| 1620 | \r | |
| 1621 | <h3>Business Value of Using Sencha Touch</h3>\r | |
| 1622 | \r | |
| 1623 | <p>We were able to go from requirements gathering to launch in 3 weeks with a “team” of 1 engineer. That pretty much speaks for itself. Even if it took the same amount of time to develop a native iOS or Android application as it does to develop a Sencha Touch app (which it doesn’t) that would mean a time savings of 50%… but Sencha Touch supports more than just those 2 platforms.</p>\r | |
| 1624 | \r | |
| 1625 | <p>The amount of time it would have taken to write proprietary touch-scrolling libraries, mobile UI widgets, and an <span class="caps">MVC</span> framework (which would have to be compatible over multiple mobile browsers) would have been several orders of magnitude greater than the amount of time it took to write the app using Sencha Touch. We’ll also get bugfixes and new features automatically with each new Sencha release.</p>\r | |
| 1626 | \r | |
| 1627 | <h3 style="clear:both;">Our Advice to New Developers</h3>\r | |
| 1628 | \r | |
| 1629 | <p>Don’t be afraid to dive into the Sencha Touch source code. It’s very well written, formatted, organized, and commented. If something isn’t working the way you expect it to, just start reading the library until you know exactly why!</p>\r | |
| 1630 | \r | |
| 1631 | <h3>Final Thoughts</h3>\r | |
| 1632 | \r | |
| 1633 | <p>We’re currently working on wrapping our Sencha Touch apps in PhoneGap, so we can incorporate native-only features like push notifications. It’s pretty easy to define a nice <span class="caps">API</span> that abstracts things like whether the app is running in a browser, so we’ll be able to continue using the exact same code base for our all of our apps.</p>\r | |
| 1634 | <style>\r | |
| 1635 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 1636 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 1637 | </style>\r | |
| 1638 | \r | |
| 1639 | <div class="feedflare">\r | |
| 1640 | <a href="http://feeds.feedburner.com/~ff/extblog?a=JFBhN8IEv60:5baTZpXD2aE:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=JFBhN8IEv60:5baTZpXD2aE:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=JFBhN8IEv60:5baTZpXD2aE:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=JFBhN8IEv60:5baTZpXD2aE:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=JFBhN8IEv60:5baTZpXD2aE:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=JFBhN8IEv60:5baTZpXD2aE:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=JFBhN8IEv60:5baTZpXD2aE:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=JFBhN8IEv60:5baTZpXD2aE:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=JFBhN8IEv60:5baTZpXD2aE:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=JFBhN8IEv60:5baTZpXD2aE:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 1641 | </div>]]></content>\r | |
| 1642 | <pubDate>Fri, 07 Oct 2011 18:30 GMT</pubDate>\r | |
| 1643 | <guid isPermaLink="false">http://www.sencha.com/blog/sencha-touch-spotlight-group-commerce-boston-com-deals/#date:18:30</guid>\r | |
| 1644 | <feedburner:origLink>http://www.sencha.com/blog/sencha-touch-spotlight-group-commerce-boston-com-deals/#date:18:30</feedburner:origLink></item>\r | |
| 1645 | \r | |
| 1646 | <item>\r | |
| 1647 | <title>Sencha Touch Spotlight: Freescale</title>\r | |
| 1648 | <author>Jay Robinson</author>\r | |
| 1649 | <description>\r | |
| 1650 | Pentagram is the world's largest independent design consultancy. Ponticlaro is a leading developer of websites, user interfaces and mobile apps. Together they created an engaging and easy-to-use catalog of Freescale’s diverse product line-up that could be easily updated using their pre-existing database structure. Read on to find out more about this Sencha Touch app.\r | |
| 1651 | </description>\r | |
| 1652 | <link>http://feedproxy.google.com/~r/extblog/~3/XqtAKe99sHk/</link>\r | |
| 1653 | <content><![CDATA[\r | |
| 1654 | \r | |
| 1655 | <p><figure class="aligncenter">\r | |
| 1656 | <img src="http://img1.sencha.com/files/misc/freescale-hero.jpg" alt="Freescale iPad app, built with Sencha Touch" height="436" width="636">\r | |
| 1657 | <figcaption>Pentagram Austin and Ponticlaro partnered to produce the Freescale iPad app.<br>\r | |
| 1658 | <a class="more-icon" href="http://www.sencha.com/apps/freescale/">View Freescale iPad app in the Sencha Touch App Gallery</a>\r | |
| 1659 | </figcaption>\r | |
| 1660 | </figure></p>\r | |
| 1661 | \r | |
| 1662 | <p><a href="http://pentagram.com">Pentagram</a> is the world’s largest independent design consultancy. The firm is owned and run by 16 partners, a group of friends who are all leaders in their individual creative fields. Each of our clients works directly with one or more of our partners. This reflects our conviction that great design cannot happen without passion, intelligence, and personal commitment, which is demonstrated by a portfolio of work that spans five decades.</p>\r | |
| 1663 | \r | |
| 1664 | <p><a href="http://ponticlaro.com">Ponticlaro</a> is a leading developer of websites, user interfaces and mobile apps. Their clients include universities, creative agencies, Fortune 1000 companies and forward-thinking individuals.</p>\r | |
| 1665 | \r | |
| 1666 | <p>Our goals were to create an engaging and easy-to-use catalog of Freescale’s diverse product line-up that could be easily updated using their pre-existing database structure. This database is constantly updated and refined using their custom CMS by many different members of their company, so it was critical for us to normalize the data into a usable format and present this catalog of products elegantly on the iPad.</p>\r | |
| 1667 | \r | |
| 1668 | <p><figure class="aligncenter clearing">\r | |
| 1669 | <a class="lightbox-set" href="http://img1.sencha.com/files/misc/freescale-2.jpg"><img src="http://img1.sencha.com/files/misc/freescale-2sm.jpg" alt="Freescale iPad app, built with Sencha Touch" height="155" width="200"></a>\r | |
| 1670 | <a class="lightbox-set" href="http://img1.sencha.com/files/misc/freescale-5.jpg"><img src="http://img1.sencha.com/files/misc/freescale-5sm.jpg" alt="Freescale iPad app, built with Sencha Touch" height="155" width="200"></a>\r | |
| 1671 | <a class="lightbox-set" href="http://img1.sencha.com/files/misc/freescale-3.jpg"><img src="http://img1.sencha.com/files/misc/freescale-3sm.jpg" alt="Freescale iPad app, built with Sencha Touch" height="155" width="200"></a>\r | |
| 1672 | <figcaption>Freescale’s iPad app allows customers to navigate different product families, while the ‘Explore Freescale’ section shows all of the different applications made of Freescale products.</figcaption>\r | |
| 1673 | </figcaption>\r | |
| 1674 | </figure></p>\r | |
| 1675 | \r | |
| 1676 | <p>We enabled the app to work offline and be portable to future iOS, Android and other HTML5-based tablet devices. We also included native iOS functionality by leveraging our custom builds of PhoneGap and PhoneGap plugins, incorporating native email composition, multi-tasking detection and an introductory video animation.</p>\r | |
| 1677 | \r | |
| 1678 | <blockquote class="pullquote">\r | |
| 1679 | <p><span>“</span>We easily saved 3-4 months of development time by leveraging the functionality in Sencha Touch and look forward to seeing version 2.0!”</p>\r | |
| 1680 | </blockquote>\r | |
| 1681 | \r | |
| 1682 | <h3>App Features</h3>\r | |
| 1683 | \r | |
| 1684 | <p>The app allows electrical engineers to filter products that fit their design needs based on their chosen parametric values. The app also allows the user to save lists of products for later and share these lists with co-workers and friends. The app self-updates everyday with the latest product information pulled from Freescale’s servers and provides extensive product specs.</p>\r | |
| 1685 | \r | |
| 1686 | <p>This satisfies Freescale’s core audience of technically-savvy engineer types, but what about other iPad users who might come across the app? For this, we developed the “Explore Freescale” section that highlights many of the applications and uses Freescale’s technology in a more consumer-accessible way. Freescale serves many different sectors of the economy including medical, industrial, automotive and networking customers, all of which are highlighted in the app. It’s amazing how many products have Freescale components inside of them, so we highlighted these in large side-scrolling lists that illustrate how big Freescale’s influence really is, whether the public knows it or not.</p>\r | |
| 1687 | \r | |
| 1688 | <h3>Why We Chose Sencha Touch</h3>\r | |
| 1689 | \r | |
| 1690 | <p>We chose to use Sencha Touch because of the extremely flexible layout engine and built-in Compass theming. We used the many different layout options to split up our views into different usable regions. The built-in support for popover elements in Sencha Touch was really useful and became a common interaction technique.</p>\r | |
| 1691 | \r | |
| 1692 | <p><figure class="aligncenter clearing">\r | |
| 1693 | <a class="lightbox-set" href="http://img1.sencha.com/files/misc/freescale-1.jpg"><img src="http://img1.sencha.com/files/misc/freescale-1sm.jpg" alt="Freescale iPad app, built with Sencha Touch" height="155" width="200"></a>\r | |
| 1694 | <a class="lightbox-set" href="http://img1.sencha.com/files/misc/freescale-4.jpg"><img src="http://img1.sencha.com/files/misc/freescale-4sm.jpg" alt="Freescale iPad app, built with Sencha Touch" height="155" width="200"></a>\r | |
| 1695 | <a class="lightbox-set" href="http://img1.sencha.com/files/misc/freescale-6.jpg"><img src="http://img1.sencha.com/files/misc/freescale-6sm.jpg" alt="Freescale iPad app, built with Sencha Touch" height="155" width="200"></a>\r | |
| 1696 | <figcaption class="clearing">\r | |
| 1697 | 1) Freescale products can be filtered by many different parametric values to match any engineering project.<br>\r | |
| 1698 | 2) All Freescale products include an excerpt, full description and link to the product’s webpage.<br>\r | |
| 1699 | 3) App users can save their favorite products into lists that can be shared and accessed later.\r | |
| 1700 | </figcaption>\r | |
| 1701 | </figure></p>\r | |
| 1702 | \r | |
| 1703 | <p>We required full control over the look-and-feel of the app to match our pixel-perfect mockups and strict corporate guidelines. Sencha Touch allowed us to replicate the exact user experience we created through our wireframing and design process. Since we were initially targeting iOS, we were also able to take advantage of a number of exciting CSS3 techniques.</p>\r | |
| 1704 | \r | |
| 1705 | <p>The Sencha Touch store gave us an optimized foundation for filtering based on multiple parametric values. We relied heavily on the store API and the ability to create custom filters. The object-oriented framework also made it easy to extend the parts that we liked and add more functionality and metadata. We also used the localstorage API to handle all of our “save for later” product lists.</p>\r | |
| 1706 | \r | |
| 1707 | <p>We easily saved 3-4 months of development time by leveraging the functionality in Sencha Touch and look forward to seeing version 2.0!</p>\r | |
| 1708 | \r | |
| 1709 | <h3>Our Advice for New Developers</h3>\r | |
| 1710 | \r | |
| 1711 | <p>Get to know the layout options and simplify your views. In cases where you don’t need the features that Sencha Touch Lists give you and you want optimal scrolling performance, use a stripped-down HTML representation of your data styled with CSS instead of the built-in Sencha Touch list objects which require more memory. The fewer panels/views you nest, the snappier your interface will be. Don’t forget to destroy hidden views correctly to avoid interaction and performance issues.</p>\r | |
| 1712 | \r | |
| 1713 | <p>We recommend that you use “cache-blockers” in your CSS and JavaScript code. A cache-blocker is something that you append to the end of a stylesheet or image URI to force the browser to reload it, such as:</p>\r | |
| 1714 | \r | |
| 1715 | <pre><code>http://example.com/foo/bar/js-lib.js?v=1.2\r | |
| 1716 | </code></pre>\r | |
| 1717 | \r | |
| 1718 | <p>Whenever you change this, it’s good practice to increment that cache blocker (i.e. v=1.2 changes to v=1.3) to make sure your app is seeing this change.</p>\r | |
| 1719 | \r | |
| 1720 | <p>It probably goes without saying, but save yourself some trouble, and do most of your testing on the device. Don’t assume that the speed or functionality you are seeing in a desktop browser will replicate on the device. Critical design decisions must be made based on device-tested prototypes. Don’t be afraid to re-write to get the initial speed optimizations you require!</p>\r | |
| 1721 | \r | |
| 1722 | <h3>Final Thoughts</h3>\r | |
| 1723 | \r | |
| 1724 | <p>We enjoyed working with Sencha Touch and feel confident that it is ready for commercial app development. Our plans are to develop new app prototypes and deliver the best apps running on the next wave of iOS and Android tablets for our clients. We look forward to finding new clients that want to use Sencha Touch for their mobile or tablet app and push the envelope with regard to what is possible with touch-based user experiences. Contact us at <a href="mailto:howdy@texas.pentagram.com">howdy@texas.pentagram.com</a> or <a href="mailto:info@ponticlaro.com">info@ponticlaro.com</a>.</p>\r | |
| 1725 | \r | |
| 1726 | <style>\r | |
| 1727 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 1728 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 1729 | </style>\r | |
| 1730 | \r | |
| 1731 | <div class="feedflare">\r | |
| 1732 | <a href="http://feeds.feedburner.com/~ff/extblog?a=XqtAKe99sHk:EnyEo685miM:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=XqtAKe99sHk:EnyEo685miM:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=XqtAKe99sHk:EnyEo685miM:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=XqtAKe99sHk:EnyEo685miM:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=XqtAKe99sHk:EnyEo685miM:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=XqtAKe99sHk:EnyEo685miM:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=XqtAKe99sHk:EnyEo685miM:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=XqtAKe99sHk:EnyEo685miM:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=XqtAKe99sHk:EnyEo685miM:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=XqtAKe99sHk:EnyEo685miM:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 1733 | </div>]]></content>\r | |
| 1734 | <pubDate>Wed, 05 Oct 2011 17:00 GMT</pubDate>\r | |
| 1735 | <guid isPermaLink="false">http://www.sencha.com/blog/sencha-touch-spotlight-freescale/#date:17:00</guid>\r | |
| 1736 | <feedburner:origLink>http://www.sencha.com/blog/sencha-touch-spotlight-freescale/#date:17:00</feedburner:origLink></item>\r | |
| 1737 | \r | |
| 1738 | <item>\r | |
| 1739 | <title>Sencha Animator Released: A Revolution in Mobile Animation</title>\r | |
| 1740 | <author>Luca Candela</author>\r | |
| 1741 | <description>\r | |
| 1742 | Today we’re very proud to announce the first release of Sencha Animator, a desktop application for the creation of rich media animations based on web standards for modern mobile devices. Sporting an innovative technology in a familiar working environment for designers, Sencha Animator enables interactive designers to transition their skills to open web standards.\r | |
| 1743 | </description>\r | |
| 1744 | <link>http://feedproxy.google.com/~r/extblog/~3/ZCwlAbhfGHk/</link>\r | |
| 1745 | <content><![CDATA[\r | |
| 1746 | \r | |
| 1747 | <p><a href="http://www.sencha.com/products/animator/"><img class="aligncenter" src="http://img1.sencha.com/files/misc/20110930-animator-hero-blog.jpg" alt="Sencha Animator Released: A Revolution in Mobile Animation" height="353" width="636"></a></p>\r | |
| 1748 | \r | |
| 1749 | <h3>Introducing Sencha Animator 1.0</h3>\r | |
| 1750 | \r | |
| 1751 | <p>We spent the last few months working very hard (and very quietly) to bring you a product that we think will redefine the creation of animations on mobile devices. And now it’s here: today we’re very proud to announce the first release of Sencha Animator.</p>\r | |
| 1752 | \r | |
| 1753 | <p><a href="http://www.sencha.com/products/animator/demos/" class="more-icon">View Sencha Animator CSS3 Demos</a> <a href="http://www.sencha.com/products/animator/download/" class="more-icon" style="padding-left:12px;">Download Sencha Animator</a></a></p>\r | |
| 1754 | \r | |
| 1755 | <h3>What is Sencha Animator?</h3>\r | |
| 1756 | \r | |
| 1757 | <p>Sencha Animator is a desktop application that enables interactive designers to easily create rich media animations based on web standards for modern mobile devices. Until recently, rich media advertising on the desktop web has been enabled by the Flash plugin. But with no Flash support on iOS, interactive designers have been looking for a way to bring animations and rich interactivity to mobile devices without hand-coding hundreds, if not thousands of lines of JavaScript, CSS3, Canvas, or native code.</p>\r | |
| 1758 | \r | |
| 1759 | <p><figure class="alignleft" style="width:320px;">\r | |
| 1760 | <a href="http://dev.sencha.com/animator/demos/museum/" target="_blank">\r | |
| 1761 | <img src="http://img1.sencha.com/files/misc/museum-ipad-blog.jpg" alt="Museum of Science demo advertisement" height="399" width="300">\r | |
| 1762 | </a>\r | |
| 1763 | <figcaption>Museum of Science demo advert, tailored for iPad dimensions</figcaption><br />\r | |
| 1764 | </figure></p>\r | |
| 1765 | \r | |
| 1766 | <p>Last year, we looked at the various techniques for mobile animation and decided to focus initially on CSS3 Animations. Animations built with CSS3 have a considerable advantage over any other mobile animation technique: they look, feel, and run beautifully. And on most mobile browsers CSS3 is hardware accelerated, so it consumes very little <span class="caps">CPU</span> power while running at high framerates. In addition, since CSS3 Animations are just styling, browsers that don’t support them can still fall back to viewing un-animated content.</p>\r | |
| 1767 | \r | |
| 1768 | <p>For these reason, we decided to start out using CSS3 animations. We try to be as faithful as possible to the underlying technology in Animator. We’re giving designers a simpler way to build animations while making the output friendly to hand-editing and further extension.</p>\r | |
| 1769 | \r | |
| 1770 | <p><a href="http://vimeo.com/29442218" class="more-icon" target="_blank">View Museum of Science Demo video</a></p>\r | |
| 1771 | \r | |
| 1772 | <h3 style="clear:both;">The road to CSS3 animations</h3>\r | |
| 1773 | \r | |
| 1774 | <p>During the last year, the Animator team at Sencha has worked to bring an innovative technology in a familiar working experience to interactive designers and creative agencies. Those of you who followed the evolution of Sencha Animator will appreciate how much we’ve refined your working experience.</p>\r | |
| 1775 | \r | |
| 1776 | <p>Every area of the product has been honed and perfected with community feedback and a fantastic group of professional designers and user experience experts contributed to the creation of a user interface that is both easy to use, yet extremely powerful.</p>\r | |
| 1777 | \r | |
| 1778 | <p>And while the first release of Sencha Animator produces WebKit compatible animations, but now that <span class="caps">CSS</span> Animations are also part of Firefox, Opera and IE10, we’ll be adding support for those browsers in time as well.</p>\r | |
| 1779 | \r | |
| 1780 | <p>Each design decision has been made with a conscious effort to help designers be as productive as possible, as quickly as possible. So let’s go over the major features of Sencha Animator 1.0:</p>\r | |
| 1781 | \r | |
| 1782 | <p><img class="alignright" src="http://img1.sencha.com/files/misc/Sencha_Animator_3.png" alt="Sleek Dark UI" width="288"></p>\r | |
| 1783 | \r | |
| 1784 | <h4>A UI that gets out of your way</h4>\r | |
| 1785 | \r | |
| 1786 | <p>The Sencha Animator interface is designed using dark tones to let designers concentrate on what really matters — their own creative work — while the tool chrome fades into the background. Key actions in the UI are highlighted with accent blues to guide designers to available actions.</p>\r | |
| 1787 | \r | |
| 1788 | <p>On top of the visual design, Animator focuses on productivity. To make it easier to work on small screens, almost every panel is collapsible so you can maximize the canvas area. Keyboard jockeys can use the arrow keys to nudge objects. Smart guides are triggered when moving objects on the canvas to help align things properly on the fly. To make it easier to see the results of edits, properties in the Property panel feature “drag to edit” and keyboard increments/decrements so designers can adjust properties to exactly the effect they want.</p>\r | |
| 1789 | \r | |
| 1790 | <h4>Intuitive timeline, multiple scene support</h4>\r | |
| 1791 | \r | |
| 1792 | <p>The timeline is the heart of any animation: it’s here where you can take a static object and bring your artwork to life. For each object on the stage, the animation track shows its visibility, the presence of keyed animations and their timing. The track is easily editable with the mouse, and can be finely customized by using one of our pre-set easing curves or with the powerful custom easing tool.</p>\r | |
| 1793 | \r | |
| 1794 | <p>Every object, and object group, can be locked and hidden to facilitate tweaking of individual elements, and a simple but effective “scene end” marker lets you define the length of each scene.</p>\r | |
| 1795 | \r | |
| 1796 | <p>Animator supports complex nested objects, but it’s easy to tell if anything is happening inside a collapsed nested group at a glance by using the nested animation indicator.</p>\r | |
| 1797 | \r | |
| 1798 | <p><img class="aligncenter" src="http://img1.sencha.com/files/misc/Sencha_Animator_5.png" alt="Nested timeline collapsed" width="460"></p>\r | |
| 1799 | \r | |
| 1800 | <p><img class="aligncenter" src="http://img1.sencha.com/files/misc/Sencha_Animator_4.png" alt="Nested Timeline Expanded" width="460"></p>\r | |
| 1801 | \r | |
| 1802 | <p>For bigger and interactive projects, putting everything in a single timeline can become confusing and hard to manage. The Scene system allows you to split your projects into several scenes keeping the timeline free from clutter and your project better organized.</p>\r | |
| 1803 | \r | |
| 1804 | <p>By default, when a scene is finished, the animation will go to the next scene, however this can be customized in different ways (more on this later). Scenes can even be previewed by hovering on its thumbnail, making it easy to find the right one to edit.</p>\r | |
| 1805 | \r | |
| 1806 | <p><img class="aligncenter" src="http://img1.sencha.com/files/misc/Sencha_Animator.png" alt="Multiple scenes at your fingertips" height="122" width="440"></p>\r | |
| 1807 | \r | |
| 1808 | <h4>Object Library</h4>\r | |
| 1809 | \r | |
| 1810 | <p>Animator also offers an Object Library that lets you save your objects for later reuse in the same project, and for use in a different project via export. This new feature facilitates the creation of multiple animations using the same branded elements (logos, buttons, etc) and simplifies the job of maintaining a consistent look and feel across multiple projects and collaborators.</p>\r | |
| 1811 | \r | |
| 1812 | <p><img class="aligncenter" src="http://img1.sencha.com/files/misc/Sencha_Animator_6.png" alt="Object Library" height="375" width="433"></p>\r | |
| 1813 | \r | |
| 1814 | <h4>Templates</h4>\r | |
| 1815 | \r | |
| 1816 | <p>In studios and agencies, interactive designers often find themselves working on multiple projects for the same client, or building multiple creatives for the same device. Animator makes this easy for designers, letting you save a project as a template, then start a new project from that template. Templates are simple Animator files that can easily be shared with colleagues and collaborators and used as a consistent starting point for projects. </p>\r | |
| 1817 | \r | |
| 1818 | <h4>Advanced interactivity and output options</h4>\r | |
| 1819 | \r | |
| 1820 | <p>This is the piece interactive designers are going to love the most: Animator lets you use JavaScript almost everywhere. You can add JavaScript to objects, to scenes or in the head of the exported <span class="caps">HTML</span> + <span class="caps">CSS</span> output. In a scene’s properties for example, you have the ability to add interaction at the scene’s start, at the end and on mouse/touch move. There’s a choice of pre-packaged interactions like opening a <span class="caps">URL</span> in the same window, skipping to another scene, or adding your own JavaScript. In addition to this, Animator output is intentionally highly human readable. </p>\r | |
| 1821 | \r | |
| 1822 | <p>You can also choose to minify your export, or to activate <span class="caps">ORMMA</span> support. Designers unfamiliar with web technologies have direct access to the exported code, so they can easily understand how their creations work under the hood, while advanced users have complete control over the output, giving them the freedom to push the envelope. And pushing the envelope is not an expression we’re using lightly here. Just take a look at the demo that our beta tester agency gskinner.com created with Animator:</p>\r | |
| 1823 | \r | |
| 1824 | <p><figure class="aligncenter">\r | |
| 1825 | <a href="http://dev.sencha.com/animator/demos/kickfu/" target="_blank">\r | |
| 1826 | <img src="http://img1.sencha.com/files/misc/kickfu.jpg" alt="KickFu game demo" height="343" width="600">\r | |
| 1827 | </a>\r | |
| 1828 | <figcaption>KickFu game demo, made with Sencha Animator by gskinner.com. <a class="more-icon" href="http://vimeo.com/29406903">View video of demo</a></figcaption><br />\r | |
| 1829 | </figure></p>\r | |
| 1830 | \r | |
| 1831 | <p>When we saw this for the first time, the offices at Sencha were speechless with what a skilled designer can do with Sencha Animator, and we hope you will be too.</p>\r | |
| 1832 | \r | |
| 1833 | <h4><span class="caps">ORMMA</span> Support</h4>\r | |
| 1834 | \r | |
| 1835 | <p>Animations are a key part of any interactive brand campaign, and Sencha Animator makes it incredibly easy to build advertising assets. Animator produces creatives that are compatible with any mobile ad network that can serve rich media ads. This is thanks to our support for an up-and-coming standard called <span class="caps">ORMMA</span> (Open Rich Media Mobile Advertising). All major mobile networks support it, and it eliminates the need to code an ad for a specific network, and reduces re-work that’s often required to run campaigns on multiple systems and apps.</p>\r | |
| 1836 | \r | |
| 1837 | <p><img class="alignright" src="http://img1.sencha.com/files/misc/ormma.png" alt="ORMMA logo" height="43" width="181"></p>\r | |
| 1838 | \r | |
| 1839 | <p>With Sencha Animator, designers don’t have to develop for the lowest common denominator anymore, but build experiences that are designed to work on different devices, ad networks and delivery methods.</p>\r | |
| 1840 | \r | |
| 1841 | <h3 style="clear:both;">Go ahead, amaze us</h3>\r | |
| 1842 | \r | |
| 1843 | <p>As you can probably tell, we’re incredibly excited to release Sencha Animator, but we didn’t do it alone: we had the help and support of an incredible group of artists and developers from various backgrounds that were so gracious to help us test the product and helped us fine tune it. A special thanks goes to the many people that have contributed their critiques, suggestions and guidance to Animator. We should also note here that we built Sencha Animator itself using Ext JS wrapped with native packaging: this has allowed us to simultaneously ship versions for Mac, Windows and Linux.</p>\r | |
| 1844 | \r | |
| 1845 | <p><img class="alignright" src="http://img1.sencha.com/files/misc/sencha-animator-icon.png" alt="Sencha Animator icon" height="135" width="180"></p>\r | |
| 1846 | \r | |
| 1847 | <p>We can’t wait to see what all of you will be able to do with Animator, and we are excited that you will surpass our wildest expectations. Go ahead, download the trial and we look forward to being amazed.</p>\r | |
| 1848 | \r | |
| 1849 | <h3>Pricing and availability</h3>\r | |
| 1850 | \r | |
| 1851 | <p>Sencha Animator is available today at $199 from <a href="http://www.sencha.com/store/animator">the Sencha Store</a>. Discount packs are also available.</p>\r | |
| 1852 | <style>\r | |
| 1853 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 1854 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 1855 | </style>\r | |
| 1856 | \r | |
| 1857 | <div class="feedflare">\r | |
| 1858 | <a href="http://feeds.feedburner.com/~ff/extblog?a=ZCwlAbhfGHk:R_JRtoA38Ac:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=ZCwlAbhfGHk:R_JRtoA38Ac:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=ZCwlAbhfGHk:R_JRtoA38Ac:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=ZCwlAbhfGHk:R_JRtoA38Ac:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=ZCwlAbhfGHk:R_JRtoA38Ac:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=ZCwlAbhfGHk:R_JRtoA38Ac:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=ZCwlAbhfGHk:R_JRtoA38Ac:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=ZCwlAbhfGHk:R_JRtoA38Ac:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=ZCwlAbhfGHk:R_JRtoA38Ac:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=ZCwlAbhfGHk:R_JRtoA38Ac:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 1859 | </div>]]></content>\r | |
| 1860 | <pubDate>Mon, 03 Oct 2011 12:00 GMT</pubDate>\r | |
| 1861 | <guid isPermaLink="false">http://www.sencha.com/blog/sencha-animator-released/#date:12:00</guid>\r | |
| 1862 | <feedburner:origLink>http://www.sencha.com/blog/sencha-animator-released/#date:12:00</feedburner:origLink></item>\r | |
| 1863 | \r | |
| 1864 | <item>\r | |
| 1865 | <title>Using Sencha.io Sync</title>\r | |
| 1866 | <author>Aditya Bansod</author>\r | |
| 1867 | <description>\r | |
| 1868 | Sencha.io Sync was made available as an open beta last week, so we wanted to give a more detailed look at how to use Sync. We announced Sencha.io Sync in the early summer and have spent time honing and tuning the service based on feedback from our private beta customers, and we’re excited to invite the Sencha community to try their hands at our Sync service.\r | |
| 1869 | </description>\r | |
| 1870 | <link>http://feedproxy.google.com/~r/extblog/~3/zhGep1X8B8Y/</link>\r | |
| 1871 | <content><![CDATA[\r | |
| 1872 | \r | |
| 1873 | <p><img class="alignright" src="http://www.sencha.com/files/misc/20110918-sencha-io-sync.png" alt="Sencha.io"> <a href="http://www.sencha.com/products/io/">Sencha.io Sync</a> was made available as an open beta last week, so we wanted to give a more detailed look at how to use Sync. We announced Sencha.io Sync in the early summer and have spent time honing and tuning the service based on feedback from our private beta customers, and we’re excited to invite the Sencha community to try their hands at our Sync service.</p>\r | |
| 1874 | \r | |
| 1875 | <p>Since Sync is now in open beta, feel free to use it, but it’s still a beta. There are a few things that we suggest you be careful of during the beta. Particularly, please don’t run any production applications against Sync yet. While we don’t expect any data loss (and by its nature, you have a whole replica in your local browser!), it’s still a beta so there may be some edge cases or behaviors we haven’t yet tested. It’s also likely that after the beta period is over we’ll reset the stores, so there may be a migration of your data at the end of the beta before the service goes v1. Of course, we’ll communicate anything that we do here and in the Sencha Forums.</p>\r | |
| 1876 | \r | |
| 1877 | <p>Using Sync, apps can operate offline, ensuring that all writes made to the local storage are replicated to the cloud master; apps can use Sync to backup data so the cloud has a replica of everything that’s in the client, and to recover data if the mobile data set gets lost. Better still, since Sync is multi-master, if an app expects a user to be on multiple devices, the data set can be edited and synced seamlessly between devices; or, if the app is multi-user, the same data set can be edited by multiple users from their own mobile devices.</p>\r | |
| 1878 | \r | |
| 1879 | <p><img class="alignright" src="http://www.sencha.com/img/sencha-io-diagrams-sync.png" alt="Sencha.io Sync"> Essentially, Sencha.io Sync provides the app with a distributed object store. A complete replica of the entire object store is available to each client, and each replica can receive updates and exchange updates with its peers through Sencha.io Sync. If the network is lost, the clients can continue to update and edit the data and it will get synced back together across all the peers when the network is available again.</p>\r | |
| 1880 | \r | |
| 1881 | <p>It’s easy to get started with Sync. First, you need a developer key. During the beta, the developer key is your Sencha login ID, the same ID you use to log in to the Forums or Designer. Second, you need to change your proxy from ‘localstorage’ or whatever else your app is using to ‘syncstorage’. And that’s it. From there, your model will get replicated to Sencha.io Sync, with a local copy kept in local storage.</p>\r | |
| 1882 | \r | |
| 1883 | <p>Here’s a code snippet that shows what you need to change on proxy:</p>\r | |
| 1884 | \r | |
| 1885 | <pre><code>/**\r | |
| 1886 | * @class Contact\r | |
| 1887 | * @extends Ext.data.Model\r | |
| 1888 | * The Contact model\r | |
| 1889 | */\r | |
| 1890 | Ext.regModel("Contact", {\r | |
| 1891 | fields: [\r | |
| 1892 | {name: "id", type: "string"},\r | |
| 1893 | {name: "firstName", type: "string"},\r | |
| 1894 | {name: "lastName", type: "string"},\r | |
| 1895 | {name: "email", type: "string"},\r | |
| 1896 | ],\r | |
| 1897 | \r | |
| 1898 | proxy: {\r | |
| 1899 | id: 'contacts',\r | |
| 1900 | type: 'syncstorage',\r | |
| 1901 | key: 'yoursenchaidname'\r | |
| 1902 | }\r | |
| 1903 | });\r | |
| 1904 | </code></pre>\r | |
| 1905 | \r | |
| 1906 | <p>It’s exactly as easy as it looks. As a reminder, during the beta, your key will be the same as your Sencha ID. For example, if you log in to the Forums as ‘johndoe,’ your key will be ‘johndoe.’ Also during the beta, you will need a special “Sencha Touch 1.2.0-alpha-sync-only” build. We’ve included the new syncstore in this build specifically, otherwise it’s identical to Sencha Touch 1.1. You can download the new special Sencha Touch bits, plus a more detailed Getting Started guide in the <a href="http://www.sencha.com/forum/showthread.php?147166-Sencha.io-Sync-Beta-Open-for-Public">Sencha Forum</a> and get started today!</p>\r | |
| 1907 | \r | |
| 1908 | <style>\r | |
| 1909 | .right, .alignright { float: right; margin: 0 0 10px 10px; }\r | |
| 1910 | .left, .alignleft { float: left; margin: 0 10px 10px 0; }\r | |
| 1911 | </style>\r | |
| 1912 | \r | |
| 1913 | <div class="feedflare">\r | |
| 1914 | <a href="http://feeds.feedburner.com/~ff/extblog?a=zhGep1X8B8Y:V2To-WwUg3g:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/extblog?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=zhGep1X8B8Y:V2To-WwUg3g:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/extblog?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=zhGep1X8B8Y:V2To-WwUg3g:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/extblog?i=zhGep1X8B8Y:V2To-WwUg3g:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=zhGep1X8B8Y:V2To-WwUg3g:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/extblog?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=zhGep1X8B8Y:V2To-WwUg3g:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/extblog?i=zhGep1X8B8Y:V2To-WwUg3g:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=zhGep1X8B8Y:V2To-WwUg3g:l6gmwiTKsz0"><img src="http://feeds.feedburner.com/~ff/extblog?d=l6gmwiTKsz0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/extblog?a=zhGep1X8B8Y:V2To-WwUg3g:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/extblog?i=zhGep1X8B8Y:V2To-WwUg3g:gIN9vFwOqvQ" border="0"></img></a>\r | |
| 1915 | </div>]]></content>\r | |
| 1916 | <pubDate>Fri, 30 Sep 2011 07:00 GMT</pubDate>\r | |
| 1917 | <guid isPermaLink="false">http://www.sencha.com/blog/using-sencha-io-sync/#date:07:00</guid>\r | |
| 1918 | <feedburner:origLink>http://www.sencha.com/blog/using-sencha-io-sync/#date:07:00</feedburner:origLink></item>\r | |
| 1919 | \r | |
| 1920 | </channel>\r | |
| 1921 | </rss>\r |