Ext JS Stencils 2.0 is Now Available

We’re excited to announce the release of Ext JS Stencils 2.0, an update to our UI kit for Illustrator, Sketch, and Balsamiq. Stencils 1.0 for Omnigraffle featuring components from the Classic toolkit can still be downloaded. PNG and SVG are also now available and can be imported into any program. All of the components that exist in Ext JS have been converted into visual assets that will help designers create UI mockups.

Download Now

In Stencils 1.0, Ext JS Classic toolkit components were available. In this release, we’ve created Stencils for all of the components available in the Modern Toolkit as well. These Modern Toolkit assets work with the Triton and Neptune themes. Having Stencils that emulate the Modern Toolkit is helpful for designers and developers who are creating mobile or universal applications.

Ext JS Stencils 2.0

Using Ext JS Stencils, designers can effectively communicate their ideas to developers quickly and efficiently. The design process starts with a rough idea that becomes refined after several iterations. The first and most crucial step in the design process is ideation, and it has never been easier with the use of Stencils. Designers can simply drag and drop the pre-made components to build their mocked up applications. Using Stencils will expedite the ideation process which will allow designers to efficiently share their ideas and quickly alter any of their designs, if necessary.

Sketch is a simple vector drawing program that has become popular for designing user interfaces. In our first release of Stencils for Illustrator, users were able to drag and drop symbols from the symbol library onto their canvas to create their designs. Now, users will find that same functionality within the Sketch symbols library. The Symbols feature allows designers to easily reuse elements across all artboards and pages. We have organized our symbols in the Symbols menu using categories including Buttons, Form Fields, Grids, etc. to make it easier to find a specific component.

Balsamiq is another popular tool for rapidly drawing wireframes. For those who are interested in creating low-fidelity wireframes, we have converted all of the Ext JS components into symbols using Balsamiq. The ability to produce multiple iterations of a design in an efficient manner is key to developing great products. Ext JS components can be found in the UI Library using the Symbols filter. Balsamiq makes it easy for designers to rearrange components to form different iterations of their design.

Using Ext JS Stencils with Balsamiq

We used Stencils to construct sample wireframes that can be found in the Illustrator and Sketch files. In this example, we created a Mailing List application that demonstrates how an array grid can be implemented in a design.

Ext JS Stencils Example - Mailing List app

In the following example, we designed a survey application that uses a tree navigation, grid, buttons, and graphs.

Ext JS Stencils Example - Survey app

With the addition of support for the Modern toolkit, new features in Sketch, and Stencils for Balsamiq, we have our most complete design asset kit yet. We use Stencils to create mockups for Sencha products, and we hope that you find these UI kits as useful as we do. Share your feedback in the Comments and let us know how you’re using Stencils.

More Resources

Stencils 2.0 for Sketch – This video shows how you can quickly create application mockups using Ext JS Stencils.
Ext JS Design Community Forum – ask questions and share your experience

Apigility 1.0.0beta1 Released!

We are pleased to announce the immediate availability of Apigility 1.0.0beta1! http://apigility.org/download This is our first beta release of Apigility, marking its initial API stability, and providing a solid preview of what to expect for the first stable release. What is Apigility? Apigility is the world’s easiest way to create and provide secure, well-formed APIs.  Apigility provides tools for describing and documenting your APIs, both RESTful and RPC.  You can indicate the URL that provides a service, what HTTP methods are allowed, what representations e.g., JSON, HTML, XML can be provided, how many items to present per page of a collection, and more.

via ZF Blog.

ORM Designer 2

I thought I’ll help plug a tool that looks to be quite useful and that is basing their development on direct community input, I’ve made my suggestions hope you do too 🙂

Martin Kulhavy writes; ORM Designer. It’s primary target is to create ORM Definitions fast and easily with the help of visual diagram instead of manually written text definitions.
Most distinctive features allows you to:
  • Save time and work 4 times faster.
  • Repeatedly export your definition files.
  • Import and visualize existing project schemas.
  • Eliminate errors and the need to look for typos.
Download our 14-day trial version and let us know what you think. If you write a review, we will give you 20% discount off the price of ORM Designer. Either way, let us know, what you think about it. If you found it helpful, and if not, why not. Any feedback is incredibly valuable to us, as we strive to make our product the best we possibly can.

Running ZendServerGateway on the embedded PHP 5.4 Server

Michael Andrew Davidson writes; So you have discovered ZendServerGateway and you are like, “Wow, this makes web services easy”. However, you quickly discover that there is a little magic behind the scenes, and that this add-on works best within the context of Zend Server 6. That can be a little frustrating, especially if you or your organization does not use Zend Server 6. Never fear, there is a way around this “implied” requirement. In just a moment I will walk the reader through setting up the embedded PHP 5.4 webserver to utilize the ZendServerGateway. All the steps should easily translate to whatever environment you use for serving your PHP pages. I am going to assume a Window environment for development.

read the rest Michael Andrew Davidson’s Blog.

My Workflow for Developing PhoneGap Applications

Andrew Trice wrote; I am asked all the time “How do I get started developing PhoneGap applications?”. My normal answer is to advise people to check out the PhoneGap Getting Started Guides, which provide a great starting point for every platform. However after further thought, I’m not sure this is always what people are asking. Rather than “how do I get started?”, I think people are often looking for insight into the workflow for developing PhoneGap applications. Everything from tools to developer flow, to getting the app on devices. The Getting Started Guides are essential for setting up the initial project structure, but once you get that setup, you might be wondering “what do I do next?”. In this post, I’ll try to shed some light on the workflow and tools that I use when developing PhoneGap applications.


What’s New in PhoneGap Android 2.3.0

Well we’ve tagged Apache Cordova 2.3.0 release candidate 2 which means that Cordova 2.3.0 will be out soon in source release form which will be followed quickly by the binary PhoneGap 2.3.0 release. Shaz wrote up a post on what’s new in iOS so I followed suit to do this one for Android. So without further ado here’s what you should expect on Android:

via Simon Mac Donald.

How to Get the Device’s Phone Number Using PhoneGap Android

I was a bit surprised when three people asked me how to do this in one day. I figured if there was enough interest in it then maybe it deserved a post of it’s own. Basically you want to know the primary phone number of the device your app is running on. In order to do that in PhoneGap you will need to write a plugin to access the TelephonyManager service on Android.

As always the code for this plugin is is GitHub at myTelephoneNumberPlugin repo. If you’d rather have a more detailed walk through please read on.
First up let’s code our JavaScript interface which we will use to get the telephone number. We’ll setup a new interface at”cordova/plugin/telephonenumber” to avoid name collisions. Then the rest is fairly boiler plate code where we declare and error object that we won’t even use and finally provide a get method. When you call the get method you should provide a success callback. The success callback will be invoked with a string that will contain the devices phone number. If something goes wrong the failure callback will be invoked.

Full source at Simon Mac Donald

Module specific layouts in ZF2

Rob Allen writes; If you need different layout scripts to be rendered for different modules in Zend Framework 2, then Evan Coury has made this extremely easy. His new module EdpModuleLayouts is just the ticket!

Once installed, you simply have to add a new array to a config file in the config/autoload folder with the following in it:

    'module_layouts' => array(
        'Application' => 'layout/application',
        'ZfcUser' => 'layout/user',

i.e. you provide a list of the module name against the layout script to use.

What could be easier?

via Rob Allen’s DevNotes.