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

JSF Component state Save process

JSF can save state of component tree in either session or on clients machine inform of serialized data .
While creating component tree JSF creates a key and keep all objects of component tree as UIViewRoot in session with against it.For next JSF request it will use same key to restore that view 🙂
For client side saving has performance issues like it has to serialize whole tree and write it in response ship in form of gzip to client.Next time when same client make JSF request from same page it de-serialize it and inflate all objects in corresponding state .

Setting for state saving is done in web.xml.

Server side state saving is where the component tree and all component state are stored within the user’s session. This entry within the session is tracked by writing a key in the response that is used to lookup the entry on subsequent post-backs.

Client side state saving doesn’t leverage the server side session mechanism at all, instead, the component tree and state will be serialized using Java Serialization, GZIP compressed (at least that is the default), Base64 encoded, and written to the response. When a post-back occurs, the encoding process will be reversed which will result in the tree and state we started with.

Setting in web.xml

  <context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>

Why does JSF need to save the state of UI components on the server side ?

Because HTTP is stateless and JSF is stateful. The JSF component tree is subject to dynamic (programmatic) changes. JSF simply needs to know the exact state as it was when the form had been displayed to the enduser, so that it can successfully process the whole JSF lifecycle based on the information provided by the original JSF component tree when the form has been submitted back to the server. The component tree provides information about the request parameter names, the necessary converters/validators, the bound managed bean properties and action methods.

As a logged-in user on the application navigates though pages, will the state of components keep on accumulating on the server?

Technically, that depends on the implementation. If you’re talking about page-to-page navigation (just GET requests) then Mojarra won’t save anything in session. If they are however POST requests (forms with commandlinks/buttons), then Mojarra will save state of each form in session until the max limit. This enables the enduser to open multiple forms in different browser tabs in the same session.

Or, when the state saving is set to client, then JSF won’t store anything in session. You can do that by the following context param in web.xml:

<context-param>
    <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
    <param-value>client</param-value>
</context-param>

It will then be serialized to an encrypted string in a hidden input field with the name javax.faces.ViewState of the form.

Happy learning with Vinay in techartifact

Posted on

Get all the children components recursively for all UI Components

Problem- Need to reset all the input Components in the page on the click of a button.On first thought developer think of do this in the bean by getting the binding of the outermost layout component and then using the getChildren() method for that UIComponent.Then for all the UI components in the list,set the reset property to true.But problem here is that page contain multiple layout components. And getChildren() method would not recursively search for all the UI components (including inside the other layout components such as panelgrouplayout.


Implementation – Its plain java.Call the method recursively.get each input Component and reset it.

// reset all the child uicomponents
private void resetValueInputItems(AdfFacesContext adfFacesContext,
                                 UIComponent component){
   List<UIComponent> items = component.getChildren();
   for ( UIComponent item : items ) {
      
       resetValueInputItems(adfFacesContext,item);
      
       if ( item instanceof RichInputText  ) {
           RichInputText input = (RichInputText)item;
           if ( !input.isDisabled() ) {
               input.resetValue() ;
               adfFacesContext.addPartialTarget(input);
           };
       } else if ( item instanceof RichInputDate ) {
           RichInputDate input = (RichInputDate)item;
           if ( !input.isDisabled() ) {
               input.resetValue() ;
               adfFacesContext.addPartialTarget(input);
           };
       }
   }
}

Happy learning with Vinay Kumar in techartifact…