Wednesday 14 November 2018

What is MVVM (Model View- ViewModel) in Knokout JS?

KnockoutJS is based on MVVM pattern. It is an architectural pattern used to design software applications.
MVVM was developed by Microsoft Architect John Gossman in 2005.
The biggest benefit of the model is that it separates the business logic from graphical user interface.
Derived from ViewModel Controller Pattern, this very model makes it very easy to manage and represent data by allowing you to handle underlying data easly.
The ViewModel and Model classes do not know that the view classes exist and the vice versa. Similarly, Model has no idea that both the View and ViewModel exist.

View:
View is a Graphical User Interface created using markup language to represent data.
View is communicating to ViewModel layer through data binding. If any changes in ModelView layer automatically it will reflect to view layer. 

Model:
Model is domain data or business object, which holds real-time data. It’s responsible for managing state of the application in object(s).
It also comprises of business Logic which operates on the state.
Also it has a data access layer responsible for persisting and fetching model object.

View Model:
ViewModel is the main processing unit of the MVVM and holds dynamic data. It’s the one which binds Model and View together.
It retrieves data from the model (M) and exposes it to the view (V) as properties in a form that the view can easily can consume.
Note that this is not the UI itself: it does not have any concept of buttons or display styles.
In KO, view models are pure JavaScript objects that hold no knowledge of HTML.

Thanks..!!

Tuesday 13 November 2018

What is Knockout JS? Features and why KO?

Introduction:
  • Knockout(KO) is JavaScript library that helps us to create rich, responsive and interactive user interface with a data model of an application.
  • It has declarative bindings, which allows us to bind the html elements of UI to any data model in a simple and convenient way.
  • It is based on MVVM architecture which fosters separation of concerns by separating application into application model, view and view model.
  • Unlike jQuery which is mostly for animation or event handling, Knockout.js is focused only on designing scalable and data-driven UI.
KO main features:
  • Language: As the Knockout.js framework is written with pure JavaScript, it is easily rendered on most browsers, and gels up easily with server-side technologies such as Java, .NET, RoR, or PHP
  • Declarative Binding: It is very simple to bind application data with html UI elements via simple and easy data-binding syntax. This helps improve responsiveness of the application.
  • Automatic view Refresh: With the two-way binding, the changes on the data model automatically update the view components (HTML UI) with the newer values.
  • Dependency Tracking: It automatically updates the UI whenever your data model changes. The same behavior in other words we can say “Tow way data binding”.
  • UI Template: Rapid template generation for the data model-driven UI component tree structure.
  • Trivially Extensible: implement custom behaviors as now declarative binding for easy reuse in just a few line of code.
  • Easily Enhanced: you can easily add new features to knockoutJS applications.
Why Knockout JS?
  • It is absolutely free and open source.
  • It library is very light weight and puts no extra load on the webpage.
  • It is pure java script library
  • It can be added on top of your existing application
  • It works on any mainstream browser.

Thanks..!!

Monday 22 October 2018

Managing and running the oracle JET project using NetBeans IDE

This below post we will see, how to build and run the Oracle JET application.

Open the project in netbean IDE, which will looks like the below


Right click on the project root folder and selecting the Build command like the below


The Build option prompts you to configure project actions to call Grunt tasks from within NetBeans IDE. Click on Yes to open the configuration window.


Select all the checkboxes and click OK to run Grunt commands enabled in the project actions


Right click on the project root folder again and click on the Build option to let Grunt build the project within the IDE like the below 


Now built is done, select the project by clicking on the project root folder, and choose the Chrome option from the menu icons as shown in the below screenshot


It will prompt you to select the start file and you can choose the web/index.html as the start file for the project. Click OK to run the project

The application should open and run in the Chrome browser.
Note: For first time, it will ask you to install the Chrome NetBeans connector plugin; click Yes and install it.


Note : Make sure you always make code changes in the src directory only, and if you make changes to the resources under the web directory, they will be lost in the next build. Once grunt build is successful and the web directory is updated with the latest changes, we can run the grunt serve command to deploy the application and review the output on the browser.
 
Thanks..

Wednesday 10 October 2018

Setting Up an Oracle JET Application

JET stands for JavaScript Extension Toolkit . The below steps we need to follow to setting up an Oracle JET application

1. Download the latest version of Node JS from https://nodejs.org/en/ and Install it. 
2. Now check the installed version of node js. It must be more than 5.  


3. Install the Oracle JET Command Line (ojet-cli) tool. Run the below command

npm -g install ojet-cli

The ojet-cli tool installs and uses popular JavaScript tools, such as Yeoman and Grunt.

4. The -g argument in the previous step should have installed the ojet command globally, so that you should be able to run ojet anywhere, i.e., not in any specific folder or location since the ojet command should now be globally available. To try it out, run the following:

ojet help


The terminal window should now show all the commands available to be used with ojet. If not, you can manually configure the PATH of your system to include ojet-cli.

5. Now you can create an Oracle JET application.

ojet create MyApp --template=navdrawer


The application structure will create like the below 

Once the application is created, use the terminal window to navigate into the root folder, i.e., the top folder, which is named MyApp, and build and serve the application, as follows:


After run the screen will looks like 


Thanks..!!

Friday 22 June 2018

How to monitor the Heap size in jDeveloper IDE

This below blog we will see how to monitor the heap size in jDeveloper IDE. There is chance to monitor during runtime consumed heap and permgen memory by jDeveloper IDE. Even it is possible at runtime through jDeveloper user can force garbage collection.

Now open your jdev.conf file (path:C:\Oracle\Middleware\jdeveloper\jdev\bin[path depends upon installation directory]) and add the below property
AddVMOption -DMainWindow.MemoryMonitorOn=true

Now you can see in the jDeveloper lower right corner - heap and permgen memory statistics will be available, along with garbage collector button.


Generally maximum range for heap memory is set in ide.conf (C:\Oracle\Middleware\jdeveloper\ide\bin[path depends upon installation directory]) file.


Thanks...

Clear the table filters programmatically


This blog we will see how to clear the table filters programmatically.

The below code we need to add to clear the table filter
jspx/jsff:
 Bean:

    public void resetFilter(ActionEvent actionEvent) {
        FilterableQueryDescriptor fqd = (FilterableQueryDescriptor)t1.getFilterModel();
               if (fqd != null && fqd.getFilterCriteria() != null) {
                 fqd.getFilterCriteria().clear();
                 t1.queueEvent(new QueryEvent(t1, fqd));          
              }
    }

  Thanks..

Wednesday 10 January 2018

Failed to start Integrated Weblogic instance in Windows10

Generally, if you are running your jdeveloper in windows 10 OS first time, while starting the integrated WebLogic server it will fail and we will get the below error.


If you will go and check the log file which is mentioned in the error log of jdeveloper, you will get the below error.

Adding environment variable to WLST script USER_MEM_ARGS = -Xms32m -Xmx1024m -XX:MaxPermSize=384m
Log File:      C:\Users\.....\AppData\Roaming\JDeveloper\system12.2.1.0.42.151011.0031\o.j2ee.adrs\BuildDefaultDomain.log
Label:         JDEVADF_MAIN_GENERIC_151011.0031.S
Product Home:  F:\Installations\jdevinstallation\Oracle\Middleware\Oracle_Home\jdeveloper\jdev\
Domain:        C:\Users\.....\AppData\Roaming\JDeveloper\system12.2.1.0.42.151011.0031\DefaultDomain

BuildDefaultDomain1.py      2018-01-09 23:27:54

cmd.exe /c ""F:\Installations\jdevinstallation\Oracle\Middleware\Oracle_Home\oracle_common\common\bin\wlst.cmd" "C:\Users\....\AppData\Roaming\JDeveloper\system12.2.1.0.42.151011.0031\o.j2ee.adrs\BuildDefaultDomain1.py""
Process started
wlst >
wlst > Initializing WebLogic Scripting Tool (WLST) ...
wlst >
wlst > Welcome to WebLogic Server Administration Scripting Shell
wlst >
wlst > Type help() for help on available commands
wlst >
wlst > Failed to get environment, environ will be empty: (0, 'Failed to execute command ([\'sh\', \'-c\', \'env\']): java.io.IOException: Cannot run program "sh": CreateProcess error=2, The system cannot find the file specified')
wlst > Error:  ADRS_DOMAIN_PASSWORD environment variable not set.
wlst >
wlst >
wlst > Exiting WebLogic Scripting Tool.
wlst >
wlst > Java HotSpot(TM) 64-Bit Server VM warning: ignoring option MaxPermSize=384m; support was removed in 8.0
Elapsed time:  5479 ms

For this above problem we need to follow the below steps

1. Go to your jdeveloper install directory and search jython-modules.jar file.

NOTE: the same file path depends upon your installation directory. For me path is like
F:\Installations\jdevinstallation\Oracle\Middleware\Oracle_Home\wlserver\common\wlst\modules

2. extract the jython-modules.jar using an utility like zip.

3. Open javashell.py python script inside lib folder

4. Add the entry for Windows 10 e.g. ‘Windows 10’ and Save it.

The same file should looks like the below

_osTypeMap = (
        ( "nt", ( 'nt', 'Windows NT', 'Windows NT 4.0', 'WindowsNT',
                  'Windows 2000', 'Windows 2003', 'Windows XP', 'Windows CE',
                  'Windows Vista', 'Windows Server 2008', 'Windows 7', 'Windows 8', 'Windows 10',
                  'Windows Server 2012' )),
        ( "dos", ( 'dos', 'Windows 95', 'Windows 98', 'Windows ME' )),
        ( "mac", ( 'mac', 'MacOS', 'Darwin' )),
        ( "None", ( 'None', )),
        )

Now restart your jdeveloper and start your server.

Thanks..!!