Posted on

Sencha Cmd featues and Usage

Sencha Cmd is an excellent cross platform command line tool which can automate many tasks around the life cycle of our Sencha ExtJS and Sencha Touch framework based appliacations from generating a new project to deploying it for production.

Sencha Cmd tool features:
This tool provides us lots of useful features like:
• Code generation: Sencha Cmd can generate entire applications and also can extend those applications with the ExtJS MVC components.
• JS compiler: Provides a framework aware JavaScript compiler which knows the semantics of Sencha frameworks and can also produce minimal footprint builds of the application source.
• Web server: Provides a lightweight web server which can serve files from the application directory.
• Packaging: Provides native packaging to convert Sencha Touch based applications in to a mobile application that has device level functionality and can be distributed in App stores.
• Management system: Provides distributed package management system to easily integrate the packages created by others or within Sencha package repository.
• Build Scripts: Build script for the applications and packages with “before” and “after” extension so that we can easilty customize the build process.
• Tuning: Provides powerful code selection tools that we can tune our application for the final build like what should be included, determining common codes among the pages and also partition the shared coded into packages.
• Workspace: Helps in sharing frameworks, packages and code between the applications.
• Image capture: Can convert the CSS3 features into sprites for old browsers.
• Flexible configuration: Easily configurable command options.
• Logging: Useful logging system which helps us understanding and troubleshooting many poroblems.
• Third party softwares: Sencha Cmd tool includes a compatible version of Compass, Sass, and Apache Ant within it.
• Code generation hooks: Page specific or can be shared by all the pages available in the workspace. Like we may need to check the coding conventions or the guidelines as the new classes are generated.

Command line reference
sencha ant
This command invokes the embedded version of Apache Ant with helpful properties back to the Sencha Cmd.

Command options:
• –debug, -d – Enables the debug level messages for Ant.
• –file, -f – Ant file to execute. The default file is build.xml.
• –props, -p – Properties for the Ant script as name value pairs like:
name=value,…
• –target, -t – The target(s) to be executed through the Ant script.
• –verbose, -v – Enables verbose level messaging for Ant.

Command syntax:
sencha ant [options] targets…
In the above command the targets represents the Ant script to execute

There are multiple command .Check on http://docs.sencha.com/extjs/4.2.2/#!/guide/command

Happy learning.

Posted on

Adding JavaScript to a Page in Oracle ADF

In your ADF web application you may want to use javaScript functions to perform some actions in client side. You can either add inline JavaScript directly to a page or you can import JavaScript
libraries into a page. When you import libraries, you reduce the page content size, the libraries can be shared across pages, and they can be cached by the browser. You
should import JavaScript libraries whenever possible. Use inline JavaScript only for cases where a small, page-specific script is needed.

How to Use Inline JavaScript

1. Add the MyFaces Trinidad tag library to the root element of the page by adding the code

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
xmlns:trh="http://myfaces.apache.org/trinidad/html">

2.In the Component Palette, from the Layout panel, in the Core Structure group,drag and drop a Resource onto the page .

3. In the Insert Resource dialog, select javascript from the dropdown menu and click OK.

4. Create the JavaScript on the page within the tag.

<af:resource>
function sayHello()
{
alert("Hello, world!")
}
</af:resource>

5. In the Structure window, right-click the component that will invoke the JavaScript,and choose Insert inside component>ADF Faces>Client Listener.

6. In the Insert Client Listener dialog, in the Method field, enter the JavaScript function name. In the Type field, select the event type that should invoke the
function.

Note : You can add CSS as well in resource tag.

Thats it.now enjoy javascript in ADF.

Now why we write plain javascript , when we have such a well documented library like jquery or EXTJS. see how we can do that.

How to Import JavaScript Libraries

Use the af:resource tag to access a JavaScript library from a page. This tag should appear inside the document tag’s metaContainer facet.

1. Inside document tag, add the code below and replace the /path with the relative path to the directory that holds the JavaScript library. for example ,You can add Jquery and EXTJS .

<af:document>
<f:facet name="metaContainer">
<af:resource source="/path"/>
</facet>
<af:form></af:form>
</af:document>

2. Structure window, right-click the component that will invoke the JavaScript,and choose Insert inside component>ADF Faces>Client Listener.

3. In the Insert Client Listener dialog, in the Method field, enter the fully qualified name of the function. For example, if the showAlert
function was in the MyScripts library, you would enter MyScripts.showAlert . In the Type field, select the event type that should invoke the function.

That it. enjoy. Happy coding with Techartifact with Vinay Kumar….. 🙂

Posted on

Book Review : Ext JS 4 First Look

The folks at Packt asked me to review one of their book on EXTJS 4 If you are interested in buying it (a judgment you may reserve until after you have read the review)

“http://www.packtpub.com/ext-js-4-first-look/book” this is link you can go

Loiane Groner iS a EXT-JS consultant, she is expert in EXT JS. As far as I can recall, I have never met them but I follow her blog http://loianegroner.com regularly

The Packt model is an interesting one. They are an online publishing house who approach subject matter experts and offer them an advance and a good commission for writing a book for them. They have approached me a couple of times but I have turned them down on both occasions simply due to a lack of time. Given the movement towards e-readers and related devices I believe it is a business model most publishers will eventually adopt.

Overview and Structure of the Book

The first thing you will probably notice is the size of the document. This is no brief summary of the new features. This is over 340 pages covering what has changed since EXT JS 3 in EXT JS 4 with a full index in the back. The structure of the book is:

• The usual preliminary bits (About the Authors, Acknowledgement, Table of Contents etc.)
• Chapter 1: What new in EXT JS 4.
• Chapter 2: The new Data package
• Chapter 3: Upgraded Layout
• Chapter 4: Upgraded Charts
• Chapter 5: Upgraded Grid, Tree and Form
• Chapter 6: Ext JS 4 Themes
• Chapter 7: MVC Application Architecture
• Appendix
• Index

I like this structure as it parallels the steps one would take in setting up a EXT JS4. The titles are also plain English e.g. ‘Ext JS 4 First Look’ making it easier to know where to go. To add a bit of a flow to the book, they also put it in the examples,real life scenarios
What is missing is – This book is not for the beginners who are learning EXT JS from scratch. Major feature release.
Ext JS 4 introduces major changes compared to Ext JS 3..You will find lot of changes There is a new data package, new charts, and new, updated layouts. The framework was completely changed from EXT JS 3 for increasing the performance.
This book covering all changes in EXT JS 4 , all new features using coding example with detailed explanation and screenshot of code as well the result too. Book will make you understand the changes in EXT JS 4 with presented examples and using this book you can easily migrate the application from EXT JS 3 to EXT JS 4 application

Chapter 1: What’s New in Ext JS 4

This chapter provides an introduction to all major changes between Ext JS 3 and Ext JS 4. Ext JS 4 presents a vast improvement in all packages; the framework was completely rewritten to boost performance and make learning and configuring easy. This chapter covers all these changes, from class system, to an overview, to the new Sencha platform
Good high-level review to introduce the reader to these completely new features

Chapter 2: The New Data Package

This chapters covers all the changes in the data packageI am amazed to see the Sencha Touch framework for mobile application This chapter introduces the new Model class, associations, proxies, operations, batches, and the new features of the Store class.
What this means is the book lends itself to system architects with a good understanding of the configuration options of the system but not so much to people who are new to either system.

Chapter 3: Upgraded Layouts

This is a great chapter on the awesome work Sencha Team has done on improving the layout. It covers all changes made to the existing layouts, and the new component layout engines, such as dock, toolbar, field, and trigger field layouts. It also covers the changes made to the container layouts, such as fit, border, table, anchor, card, accordion, and so on..
If you are stuck in designing the layout of application then reading this chapter is worth of. 

Chapter 4: Upgraded Charts

I like this chapter after reading this a lot. Chapters presents the new JavaScript-powered Ext JS 4 charts. And what you can expect more the no flash is required anymore. This chapter introduces the new draw package, which is the base package for the new chart package. It also covers how to configure chart axis, legend, customized themes, and Ext JS 4 chart series, such as Bar, Column, Line, Area, Scatter, Pie, Radar, and Gauge.

Chapter 5: Upgraded Grid, Tree, and Form

Again, this is a big topic for one chapter. It mention and demonstrates the upgraded Ext JS Components. Very well explained the more performance and more developer flexibility. Some new features and plugins for Components covered in this chapter are: grid, tree, and forms.

Chapter 6: Ext JS 4 Themes

This is probably one of the best example or step by step way of creating on how developer can customize and create a new theme by using CSS architecture, which uses Sass and Compass.

Chapter 7: MVC Application Architecture

. One nice touch in this chapter how MVC architecture applied or implemented to Ext JS 4 applications. This chapter as with others is designed to give the reader a feel for creating a MVC EXT JS 4 application. Steps by steps instruction given in this chapter. Chapter also includes the structure of EXT JS 4 application project structure and how reader can manage the component, files in EXT project structure.
Appendix A, Ext JS 4 Versus Ext JS 3 Class Names,
It presents a comparison list between Ext JS 3 classes and Ext JS 4 class names. In this new version of Ext JS, the names of some classes have changed, and this list can help you find the new Ext JS 4 class names easily, while migrating an application from Ext JS 3 to Ext JS 4 Beta.

Conclusions

This book is not a comprehensive guide to the learn EXT JS 4 or EXT JS. Rather, it is an introduction to some of the new features of the product, compared to EXT JS 3. .It is good guide if you want to migrate an application from EXT JS 3 to EXT JS 4 or if you want learn ,understand the new feature and advanced topic on EXT JS 4.The way author mentioned he pseudo code with example and detailed description is really good. Features of the product they do cover are covered very well. What I mean by this is their high-level summaries of large topics, such as Layout ,tree and form, cover the essential elements and their treatment of smaller topics, such as EXT JS 4 Theme, MVC Application Architecture topic are some of the best I have seen.

While there is not as much bang for buck as, say, Loiane Groner’s book, the EXT JS 4 developer will not have to filter out a rehash of the version 4 features as this book assumes that knowledge. Where I see this book working is as good migration guide. While those volumes allow the reader to drill down into a specific topic, this book, uniquely, gives a much greater context to the features in question, providing a practical example as an integral part of the narrative