tag:blogger.com,1999:blog-42255594803445629422024-03-25T23:05:36.345+09:00Hello WorldMayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.comBlogger44125tag:blogger.com,1999:blog-4225559480344562942.post-31053379551110043792019-11-19T18:01:00.001+09:002019-11-19T18:01:08.970+09:00Animated Container in FlutterPlease check this flutter video tutorial for detailed example and implementation of Animated Container in Flutter.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/Wpf9EfnqFoU/0.jpg" src="https://www.youtube.com/embed/Wpf9EfnqFoU?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com2tag:blogger.com,1999:blog-4225559480344562942.post-61628639448880407872019-11-19T17:59:00.002+09:002019-11-19T17:59:43.064+09:00Shared Prefrences in Flutter<div class="separator" style="clear: both; text-align: center;">
<br /></div>
This video tutorial shows the use and implementation of Shared Prefrences in your Flutter application.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/dQBUykqbshw/0.jpg" src="https://www.youtube.com/embed/dQBUykqbshw?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-67020333665855986052019-11-19T17:54:00.005+09:002019-11-19T17:54:56.955+09:00Forms and Validations in FlutterThis video tutorial shows Implementation of forms and validations in your flutter application.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/1NsXGUV5xSo/0.jpg" src="https://www.youtube.com/embed/1NsXGUV5xSo?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-35370509060004272412019-11-19T17:51:00.000+09:002019-11-19T17:51:02.195+09:00Buttons in FlutterThis video tutorial shows the implementation of Buttons in your Flutter Application.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/1NsXGUV5xSo/0.jpg" src="https://www.youtube.com/embed/1NsXGUV5xSo?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-28282190613874291782019-11-19T17:49:00.001+09:002019-11-19T17:49:51.665+09:00Tabs in Flutter ApplicationThis video tutorial shows the implementation of Tabs in your Flutter Application.<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/Zmr3ejAU2bI/0.jpg" src="https://www.youtube.com/embed/Zmr3ejAU2bI?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-50423424039311594952019-11-19T17:48:00.003+09:002019-11-19T17:48:46.237+09:00Grid View in FlutterThis flutter tutorial shows the implementation of Grid View in your flutter application.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/98UwrZSynBY/0.jpg" src="https://www.youtube.com/embed/98UwrZSynBY?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-39657340803247980922019-11-19T17:45:00.001+09:002019-11-19T17:45:32.958+09:00Horizontal List in FlutterThis Flutter video tutorial shows implementation of Horizontal List in your flutter application.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/v7_T3VEl9wA/0.jpg" src="https://www.youtube.com/embed/v7_T3VEl9wA?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-58058664495828701252019-11-19T17:43:00.003+09:002019-11-19T17:43:43.538+09:00Navigation Drawer in FlutterThis Flutter video tutorial shows implementation of Navigation Drawer in Flutter Application.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/_lR10v26lLo/0.jpg" src="https://www.youtube.com/embed/_lR10v26lLo?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-12623448459358563762019-11-19T17:40:00.002+09:002019-11-19T17:40:50.690+09:00Images in Flutter | How to use Images in Flutter ApplicationThis flutter video tutorial shows how to include images in your flutter application.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/CAGOxWBGR3g/0.jpg" src="https://www.youtube.com/embed/CAGOxWBGR3g?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-89414166436984269012019-09-17T20:52:00.003+09:002019-09-17T20:52:56.339+09:00Floating Action Button in Flutter with Example and Video ExplanationFloating Action button in Material Design, usually hovers over the content and usually placed on the right corner of Screen. In Flutter, Floating Action button is the part of the Scaffold. Floating Action buttons can have icons or text as well as both. You can also specify one or more than one floating buttons per screen as per your requirements. In this video demonstration given, I have explained on how to add floating button in your flutter applications, change the contents of the floating button, change its size etc. Hope your find the video useful.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/H9UZQtUiF9M/0.jpg" src="https://www.youtube.com/embed/H9UZQtUiF9M?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />
Happy Coding!<br />
MayuriMayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-51990775521772848192019-09-17T20:39:00.000+09:002019-09-17T20:39:58.360+09:00Rows and Columns in Flutter with Example and Video ExplanationIn Flutter, Rows and Columns are extremely essential to define your screen layouts. In Flutter, Rows and columns helps in well structuring of your app's UI. To build the most efficient UI for your application, it is a good practice to do some paper work and divide the requirement of layouts in terms of rows and columns which in turn helps to avoid any mess with designing, for this, understanding the basic concepts of Rows and Columns in Flutter is indispensable. I have created this video which will help you to get started with Rows and Columns and have cleared all the basics in the same.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/UkT7iQX3ew8/0.jpg" src="https://www.youtube.com/embed/UkT7iQX3ew8?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />
<br />
Happy Coding!<br />
Mayuri RuparelMayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-56559915942991841852019-09-17T20:12:00.002+09:002019-09-17T20:12:40.027+09:00Containers in Flutter with Example and Video Explanation Containers in Flutter serves as building blocks in your flutter application. You can use containers in your Rows or Columns and in turn use containers as the base platform for other widgets like text or images etc. Containers has ample properties for styling and displaying your widgets like padding, height, width etc. Containers can also be customized to custom shapes to be used in application. In the video below I have demonstrated the use of containers in your flutter application. Github link for the source code is also provided in the video's description box. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/k5gRoSplfnU/0.jpg" src="https://www.youtube.com/embed/k5gRoSplfnU?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />
Happy Coding!<br />
Mayuri RuparelMayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-12997651533033625602019-09-17T19:29:00.001+09:002019-09-17T19:49:00.662+09:00Text Widget in Flutter & How to use Custom Fonts in Flutter Application with Example and Video Explanation Text Widget in flutter displays Text with the custom styling specified.<br />
<br />
In the given video tutorial, I will be explaining step by step to use Text Widget in your flutter application and style them as per your project requirements. This Video tutorial will also demonstrate how to use custom fonts in your flutter application.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/gtNQMdSAv1A/0.jpg" src="https://www.youtube.com/embed/gtNQMdSAv1A?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
Happy Coding!<br />
Mayuri RuparelMayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-3347682883210487962019-09-17T13:36:00.002+09:002019-09-17T14:11:09.394+09:00App Bar in Flutter with Example and Video Explanation AppBar is the Top Bar in any mobile application UI. AppBar is an integral part of Scaffold widget in Flutter.<br />
<br />
In Flutter, Appbar typically consists of the following elements which constitutes its making.<br />
<ul>
<li>Leading</li>
<li>Title</li>
<li>Actions</li>
<li>Flexible Space</li>
<li>Bottom</li>
</ul>
In these properties, Leading is usually a back button or any text or any icon, Title usually is the Text, Actions consists of one or more group of icons and Bottom is usually for Tabs. But, again this is completely optional and you can use any of the widgets from Flutter widgets catalog to make your own customize AppBar for your mobile application.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Following is the Appbar Created using its elements, Leading, Title and Action.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI61sNcWfeMNmFwXjX-UNCeRf25xPDi8Ppl6nknF0brqOGqMDzp7vJ_ghy3CIU_DHzXjwNGVAX-8MkT9eoWJ45Yu0UbF9uQ2NleV8lwLnjZC-lGy4j1O8QIFckVMu19rOs1KXAV0eLbQ/s1600/appbar-in-flutter-1+%25282%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="782" data-original-width="414" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGmw0phbvtKgJ3HSWEzNYH3mWdtrsscCN6Bl7ST3pPmV3BUARvWNzG4A1LDsinNibujy1FriXk2LdeqMo6tOQOQRY_rmEpqNwI_K3MwQCDnMBLMEh5d7cJX1UbfIWRG5emzqkOYgcuFw/w73-h140-p/appbar-in-flutter-1+%25282%2529.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
We can also customize the App bar by using the various styling properties like elevation, change the default shape etc, I tried creating the customized AppBar as following which I have explained in detail in the video attached below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraUBrNqFdCDSjRauS0YTkLbiAj3kFThcf4ebkKaSMp8Y0CoS4HmxEpRtGQ6PEski4mSa1DBoVCFXqS7DjNeqd89G3W2yJ-9ZdhdSY0rHJ7jiwhZ_RWdf2yFwyY4heZpc60RfGpK-4_w/s1600/appbar-in-flutter-2+%25282%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="784" data-original-width="410" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVWNUxGxmXaOSbqllM67UNxtcIRphStoV7GEkyRIqjxk13Bt7YA8YBeKc16ij_ClqFAUxMXb6gAw8zCZw60gTdgjyPsePHlpGFVNaceTITL3Hh7kjIMFk3bMjKx6AuMWfGpitnba2Tg/w73-h140-p/appbar-in-flutter-2+%25282%2529.png" /></a></div>
<br />
Check out the following video to see the demonstration of creating AppBar in flutter from scratch.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/72yb9_XNIX4/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/72yb9_XNIX4?feature=player_embedded" width="320"></iframe></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Following is the Github link for the code done in the video explanation.<br />
<a href="https://github.com/mayuriruparel/flutter_demo_apps/tree/master/appbar_demo" target="_blank">App Bar Demo in Flutter</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Happy Coding!<br />
Mayuri Ruparel<br />
<br />
<br />
<br />
<span id="goog_1492933367"></span><span id="goog_1492933368"></span><br />
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-82141278478491663812018-12-19T12:27:00.000+09:002018-12-19T12:31:18.751+09:00Working with Fonts, Text Style, Colors, Basic Theme in FlutterWorking with Fonts, Text Style, Colors, Basic Theme in Flutter:<br />
<br />
In This Video I have just played with the basic styling, fonts, and colors in Flutter. I have made the basic changes in the demo flutter app (increment counter app) which is generated when we are a new project in flutter. <br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/8lov8ezbxbs/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/8lov8ezbxbs?feature=player_embedded" width="320"></iframe></div>
<br />
Happy Coding!<br />
Mayuri Ruparel<br />
<br />
<br />
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-59835208398631645742018-12-17T20:54:00.001+09:002018-12-17T20:54:31.857+09:00Hello World Flutter - Creating your First Hello World Flutter App<b>Hello World Flutter!</b><br />
<br />
Lets get started with Creating your First Flutter App!<br />
<br />
Development of Flutter Applications is Supported by Various IDEs like Android Studio, IntelliJ IDEA Idea and Visual Studio, In this example we will create Hello World application using Android Studio. Open up your Android Studio and Select '<b>Start a new Flutter Project</b>,<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5kVu_rSXsSWqunWZGg7AtHX_VEgnUbm3_No0xdcJmZiVfMV5C5DwBVMwP6IcIwj5YW8n7aorX-cKTC5bW5OskFKjShvpuMcOn0DcYQ0Cj3rqURdVo3DYkTTzbywLzbTBMNtqsx6pcxw/s1600/Screenshot+2018-12-17+at+15.36.31.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="508" data-original-width="485" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5kVu_rSXsSWqunWZGg7AtHX_VEgnUbm3_No0xdcJmZiVfMV5C5DwBVMwP6IcIwj5YW8n7aorX-cKTC5bW5OskFKjShvpuMcOn0DcYQ0Cj3rqURdVo3DYkTTzbywLzbTBMNtqsx6pcxw/s320/Screenshot+2018-12-17+at+15.36.31.png" width="305" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: left;">
New Select <b>'Flutter Application'</b> from the following dialog shown.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT1ycgbtBCRU3T4OL1GE_Wf1dAK4hS2pSqwq6Ckc21xddxhgTLUz3qppF6d4oDmnHqGKaZaD1ChNCBFaWW7ah3gPi-0G7F4RAFJLgmrXYVRfy5PwF5D4NMsdAvYdbsaiyfMOmN7ptboA/s1600/Screenshot+2018-12-17+at+15.36.49.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="671" data-original-width="804" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT1ycgbtBCRU3T4OL1GE_Wf1dAK4hS2pSqwq6Ckc21xddxhgTLUz3qppF6d4oDmnHqGKaZaD1ChNCBFaWW7ah3gPi-0G7F4RAFJLgmrXYVRfy5PwF5D4NMsdAvYdbsaiyfMOmN7ptboA/s320/Screenshot+2018-12-17+at+15.36.49.png" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now Add In your Project Name, Flutter SDK Path, Project Location and Project Description. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjilsAz7quhTQnByfE-j9Ezi0pm7_yp7IqLJK0ErgrgrhYwXCIMH2mxA96HPDa4hR_8_OdqmLDk0bn1qpbwdReOpuFCxN-voiy1OoQbyLY5wvK85OmgVyvDfYGPu0grG6qwBnyt5Fbcgg/s1600/Screenshot+2018-12-17+at+15.37.13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="675" data-original-width="802" height="269" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjilsAz7quhTQnByfE-j9Ezi0pm7_yp7IqLJK0ErgrgrhYwXCIMH2mxA96HPDa4hR_8_OdqmLDk0bn1qpbwdReOpuFCxN-voiy1OoQbyLY5wvK85OmgVyvDfYGPu0grG6qwBnyt5Fbcgg/s320/Screenshot+2018-12-17+at+15.37.13.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: left;">
Add Package Name for your Application</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgXz5n6fLiW9AxsEwIFXWQ60pRcpwFHz5RdxtQGhXsf7iDu24Cjjn4nLVM4n7Ws0Da-ElWJCxNR127pxajX6oQWSdY0aaOlD25EjLvwD-b9Ca3ZhXblqs8yUW8_3jeQ4fZf0ZxTrqEw/s1600/Screenshot+2018-12-17+at+15.37.29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="672" data-original-width="803" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgXz5n6fLiW9AxsEwIFXWQ60pRcpwFHz5RdxtQGhXsf7iDu24Cjjn4nLVM4n7Ws0Da-ElWJCxNR127pxajX6oQWSdY0aaOlD25EjLvwD-b9Ca3ZhXblqs8yUW8_3jeQ4fZf0ZxTrqEw/s320/Screenshot+2018-12-17+at+15.37.29.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This will create the basic Flutter App with increment counter which will be incremented on floating button tap. If you are developing or creating this app for first time it is recommended to go through and thoroughly read the commented part of the code, it is very well self explained and will give you the gist of the class. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_UHWkNxL7owtqvUyDJsCj5OmJ73OYzq_-4Pf0UbUAI64hTdA7ZS6_gE9T2B7_RuyvNoWTzmiFs-BCVy4TA3tt01HkhJ_1tO-xiDjYgMs6nyKqpQ1ZC5DeUGhwFlsJI8C0dJm_2J2yRg/s1600/Screenshot+2018-12-17+at+16.04.55.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="936" data-original-width="1600" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_UHWkNxL7owtqvUyDJsCj5OmJ73OYzq_-4Pf0UbUAI64hTdA7ZS6_gE9T2B7_RuyvNoWTzmiFs-BCVy4TA3tt01HkhJ_1tO-xiDjYgMs6nyKqpQ1ZC5DeUGhwFlsJI8C0dJm_2J2yRg/s320/Screenshot+2018-12-17+at+16.04.55.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now Replace the code in main.dart file with the following code which will print a simple 'Hello World' on the centre of the screen.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7scE-q9om9i1nnRso0b3Xts2oCt_rjl88O81jxEOJo2XYNRc7pxE1lfSRpr5PLTWHT_jfcFOBJP9KxsI1EXeJlonW5SZsrYJ_Fq_zlCw_8ES8BsAKMblkF9Pig8wVXws6DEqoHzddVg/s1600/Screenshot+2018-12-17+at+16.38.44.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="386" data-original-width="514" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7scE-q9om9i1nnRso0b3Xts2oCt_rjl88O81jxEOJo2XYNRc7pxE1lfSRpr5PLTWHT_jfcFOBJP9KxsI1EXeJlonW5SZsrYJ_Fq_zlCw_8ES8BsAKMblkF9Pig8wVXws6DEqoHzddVg/s320/Screenshot+2018-12-17+at+16.38.44.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Once you have changed the Code Snippet, just save the file and you could see the Magic of <b>'Hot Reloading' </b>on iPhone Simulator! </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAWxt7C5gkTNGc4Qp2TdHShPPvEFlE71PK8FSuljGvn8JmWEiQFXCjbRW9z0sDMK4EYTxgR2FlweRAPJ6bSO88t0Pd9dAm4dUI55_JJ7I_VoKoXKbWSYqW8StolFysDnmBVZWMDK-kcg/s1600/Screenshot+2018-12-17+at+16.39.45.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="845" data-original-width="409" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAWxt7C5gkTNGc4Qp2TdHShPPvEFlE71PK8FSuljGvn8JmWEiQFXCjbRW9z0sDMK4EYTxgR2FlweRAPJ6bSO88t0Pd9dAm4dUI55_JJ7I_VoKoXKbWSYqW8StolFysDnmBVZWMDK-kcg/s320/Screenshot+2018-12-17+at+16.39.45.png" width="154" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
So yes, This was simple basic Hello World Flutter App to get started!</div>
<div class="separator" style="clear: both; text-align: left;">
As I will create and try out new examples I will blog them here.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Happy Coding!</div>
<div class="separator" style="clear: both; text-align: left;">
Mayuri Ruparel</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-64653180464152914562018-12-15T17:03:00.001+09:002018-12-15T18:33:11.023+09:00What is Flutter and My Views on Google's Cross Platform Mobile Apps Development <b>Let me first tell you How I came across Flutter,</b><br />
<br />
Well, while browsing various tutorials on youtube I randomly came across one of the Video's by Google Developers and its title instantly caught my eye! I'm a big fan of cross platform development and Ionic is one of my favorites platform for the same. I have already developed lots of (can't remember the exact count!) Ionic Apps. Well Google has always been my most favorite Platform and you can see that from my previous tutorials which dates almost 6-7 years back how much I love working with various Google Frameworks weather it be Maps, Android or GWT!<br />
<br />
Now coming back to Flutter.. Flutter really caught my eye and I felt like blogging about this after so many years! My Love for Google Frameworks and Working with Cross Platform Development of Mobile Apps has been Combined! What more I could have asked for! Doing Development from last 12 years I have continuously evolved... learning and still learning whatever technology or language / frameworks my projects or clients demanded. Looking at Flutter wants me to learn more about it and I really can't wait to develop my first application on the same. Looking at one of the videos of Flutter from Google, I learned they developed 2 apps in 12 Minutes!!!! I have gone through some of the examples and I really can't wait to try my hands on and I will try my best to blog my experience.<br />
<br />
<u><b>Coming to Technicalities - Flutter and its Advantages:</b></u><br />
<br />
<b>Cross Platform Development:</b><br />
<br />
Flutter is a framework by Google which enables us to create Cross Platform Mobile Apps with a Single code base. Flutter is written in Dart Language. Cross Platform really helps in saving tons of money, resources, Time of Development, Team Size and so much more. Almost all the companies which builds Mobile Apps has their corresponding versions of Android and iOS apps. Most of the time when its in native development there are two teams working for each of the platform development. Cross Platform Development enables a single team of developers to develop the Mobile app which is compatible with both the platforms. Moreover, Flutter promises Cross Platform Development without comprising on app performance and at the same time delivering the Same Native Look and feel for users! <br />
<br />
<b>Hot Reloading: </b><br />
<br />
Flutter has this awesome feature called Hot Reloading which enables delightful developing experience. With Hot Reloading developer can instantly see the changes reflected on emulator or simulator just by saving the file. It cuts out the time taken to compile or build in traditional development.<br />
<b><br /></b>
<b>Support of Known IDEs</b><br />
<br />
Flutter Supports the development in known IDEs like Android Studio, IntelliJ Idea or Visual Studio which means developer can enjoy coding and learning new technology with out really leaving out their <b>'<i>comfort zones</i>'.</b><br />
<br />
<b>Material Design and Cupertino</b><br />
<br />
Using Flutter enables Developers to Develop Mobiles Apps with Google's Material Design as well as Cupertion (iOS - Style) Widgets which further opens up wide array of possibilities to create exciting layouts and screens.<br />
<br />
<b>Flare</b><br />
<br />
I saw one of the videos in Flutter Live where a company called 2Dimensions demonstrated Flare which is used to created awesome animations for Flutter App. Moreover, it enables Designers and Developers of an App to work in parallel throughout the development cycle. Check out more <a href="https://www.youtube.com/watch?v=6hmgkimeaEE" target="_blank">here</a>.<br />
<br />
<b>Support for Firebase / Cloud Firestore</b><br />
<br />
It is obvious that Firebase and Flutter are both from Google it will seamlessly support each other. I'm sure this wonderful combination will enable lightning fast response time and amazing end user experience at the same time eliminate lots of server side maintenance for developers too.<br />
<br />
<b>Free & Open Source</b><br />
<br />
Flutter is Free and Open Source! Could it get any better? <br />
<br />
These were the few things I learned in past couple of days with my experience and I'm sure there is so much more to it! In case I missed out any notable point please let me know through comments.<br />
<br />
Happy Coding!<br />
Mayuri RuparelMayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-14575377982112622612016-11-08T22:21:00.003+09:002016-11-08T22:21:59.824+09:00My Little Sunshine<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ZLyLj_oR8ltHH7GhtWuqADsj2tnKRYaylwXPb0r9uExO2_Cvk0cNgpasJ3IIFJ6ouSxFIw3AVjBxkiJhT_kHCZCL8ApHdWZodIo1On8lGDo5sJHp-W4wExDrugBGGEvRuDq97NW3KQ/s1600/IMG_5826+%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ZLyLj_oR8ltHH7GhtWuqADsj2tnKRYaylwXPb0r9uExO2_Cvk0cNgpasJ3IIFJ6ouSxFIw3AVjBxkiJhT_kHCZCL8ApHdWZodIo1On8lGDo5sJHp-W4wExDrugBGGEvRuDq97NW3KQ/s1600/IMG_5826+%25281%2529.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiVPBcJLXhXacS8pKVWqXK55X92CjSKKZYd5HxU_6Bhf20uNiGpkefA7WhqpNy4_8Y611F_b_QCbWvfkGzEQCp6ULzV0ebOwJsy6x2KayO7qQqdS4tGMWON0ccMd00wQyIoZ3sS-X9Nw/s1600/IMG_5826+%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiVPBcJLXhXacS8pKVWqXK55X92CjSKKZYd5HxU_6Bhf20uNiGpkefA7WhqpNy4_8Y611F_b_QCbWvfkGzEQCp6ULzV0ebOwJsy6x2KayO7qQqdS4tGMWON0ccMd00wQyIoZ3sS-X9Nw/s320/IMG_5826+%25281%2529.png" width="320" /></a></div>
<br />
My 4.5 year old daughter, Reeva, is very much fond of painting and coloring. Since she was 1.5
years old she could hold crayons and scribble. When she was 2 years old
and started going for playschool, her teacher once called me personally
and told me this incident, She said she was distributing a paper with
various shapes outline drawn and giving crayons to everyone and while
many of them could not hold crayon properly Reeva already completed
coloring those shapes!! I think its her god's gift and I try my best to
encourage her for the same. <br />
I have started to collect and
preserve ample of her paintings but this particular one is my favorite
and very close to my heart, She did this paining few months back around
August 2016, It was my usual tiring day back from office and i was super
tired, as I came back home Reeva came jumping to me and wanted to play
tea party set with me but i was super tired and told her mumma is tired
please give me some time to freshen up and I will play with you till
then you paint something for me (painting is the only thing that works
for her on those times when I'm super tired and want her to play alone) I
handed over her set of crayons and her drawing book, and I got busy
with my routine house chores trying my best to complete all the stuff
soon so I could play with her. After some time she came jumping to me
and showed me this painting saying "mom look mom look" and I turned back
and saw this paining.... before i could react or say anything she said
"Look mom sun is smiling and sun is happy with so many colours!!" My
mood was instantly lifted up looking how innocently she painted the
smiling face of sun adding so many colours around... her innocent way to
make me smile was clearly visible, I left everything and hugged her
thight <span class="_47e3" title="smile emoticon"><img alt="" class="img" height="16" src="https://www.facebook.com/images/emoji.php/v5/f4c/1/16/1f642.png" width="16" /><span class="_7oe">:)</span></span> I'm surely going to frame this picture for her to treasure. <br />
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-42157486754870536952016-04-01T03:13:00.000+09:002016-04-01T03:13:09.615+09:00That Stye in Eye..<div style="color: #222222; font-family: arial, sans-serif; font-size: small;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4yOInLnjkvtkXbMkS-M9WbD1DYrpymytGn_3RylXvbWw-amqPLfHM_1AnmPbP18N1waHbux-mdSeTUJ6Xz8APi6ADn4Ya8GKB8K9iTuna1MroOcmc5Y_jPb998IaVbvJQjoEtdMyppA/s1600/IMG_3074.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4yOInLnjkvtkXbMkS-M9WbD1DYrpymytGn_3RylXvbWw-amqPLfHM_1AnmPbP18N1waHbux-mdSeTUJ6Xz8APi6ADn4Ya8GKB8K9iTuna1MroOcmc5Y_jPb998IaVbvJQjoEtdMyppA/s320/IMG_3074.JPG" width="320" /></a></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: small;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: small;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: small;">
Past two days had been really bad..... It's just because of one stye in eye... It's totally annoying... Irritating to the core how much ever I try to get rid of it it's just getting worse.... I feel even medicine isn't working and I feel I have to wait for a day more (hopefully) and just to watch it grow until it finally burst! </div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: small;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: small;">
I have always been paranoid about eyes it is because my dad is blind, he lost his eyes at very young age and if anything happens to anyones eyes naturally get one panic attack. </div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: small;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: small;">
So coming back to stye... Ooouch it hurts! Day -1 it started with a small pin drop. Day - 2 it grew and started hurting, took medicine, rest , avoided working for half day Day - 3 morning was worst.. Felt like conjunctivitis.. It was so big that I could hardly open one of my eye... Rushed to doc he said it will grow a day more... Missed meeting up with my friends....Wait and watch... </div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: small;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: small;">
Now as I'm not working today and they say idle mind is devil's workshop...lol.. Thoughts are running marathon.... In all possible directions... In the middle of all the thoughts I just paused and started thinking in different direction... I started associating the stye with real life goals.... If we had planned a goal/target for a day and it happens that a stye (obstacle) comes in such a way that no matter hard we try to get rid of it or try to avoid it by all possible means but it will hinder out our way towards our target. At that particular time we get so much pissed off, annoyed but it hardly helps. All we can do is to wait and watch and look out for the phase to pass. No point in bending the rod with bare hands, it will only hurt us. </div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: small;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: small;">
So consider such situations as a break from routine and learn to dance in rain. I have decided until my stye gets fine will stay at home play with my daughter and spend time with her which I usually missed while I'm at work.</div>
<div>
<br /></div>
Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-16957750525403331252014-11-04T23:09:00.000+09:002016-06-27T20:23:51.737+09:00Getting Started With Phonegap / Cordova<br />
<br />
<div style="text-align: center;">
<br />
<b>Before you Start your New Phonegap / Apache Cordova Project!</b></div>
<br />
After about one and half year here's my new Blog Post, I need to blogged this out as I faced some Issues while setting up a new Phonegap OOps I should say a New Apache Cordova Project, and I will also write the reasons of facing these issues and I spent couple of hours understanding them and solving them, I hope I will help someone who is going through the same and might save couple of hours :)<br />
<br />
Okay, So here it goes... I "used" to be a phonegap developer in 2010-2011 and did couple of projects back then, Even you will find some of my blog posts of those times, What was the usual way to start off the Phonegap Project back then, as In what way I use to follow learning from various other blogs and its documentation was a pretty simple and involved few basic steps: Create a new Android Project In Eclipse, add phonegap jar in the Build path, and add Phonegap js to index.html in assets/www folder and there you go! It was enough to start with. Even the Phonegap jar and js were easily available for download from there site.<br />
<br />
And Then when Phonegap became Apache Cordova, We need to follow the specific "steps", You will not find the Cordova jar and Cordova js easily available to download on there site. Also after 2011, I have hardly got the chance to work with phonegap (I worked on various CMS platforms), And recently when I started working with the Phonegap Project, I was thrilled that so much can changed in sometime, I realized that how important is to have in touch with the technologies which we are working! <br />
<br />
So, Now going ahead, Its been wonderfully documented on there site, I will be summarize the basic steps, which will be required to install phonegap, (Yes you heard it right! you will need to install phonegap you will no longer served with the ready-made download! ),<br />
<br />
<br />
1.Node.js<br />
Yes! to install and use Phonegap / Cordova you will need to install Node.js, It is very easy to install,<br />
Just go there site, <a href="http://nodejs.org/" target="_blank">http://nodejs.org/</a> Click on Install button, and it will do the rest for you.<br />
<br />
2. To Install Phonegap on your system, Type in the following command In Terminal,<br />
<br />
<pre><code>sudo npm install -g phonegap</code></pre>
<br />
(For windows, eliminate the sudo command). <br />
<br />
For Installing Cordova,<br />
<br />
<pre class="prettyprint"><code><span class="pln">sudo npm install </span><span class="pun">-</span><span class="pln">g cordova</span></code></pre>
<pre class="prettyprint"><code><span class="pln"> </span></code></pre>
<pre class="prettyprint"><code><span class="pln"></span></code></pre>
As you write sudo command in Linux and Mac System it will prompt you to enter root password before beginning the installation.<br />
<br />
3. To create a new Cordova Project,<br />
<br />
Now Navigate to the directory where you wish to create the new Cordova Project, and execute the following command in terminal,<br />
<br />
<pre class="prettyprint"><code><span class="pln">$ cordova create hello com</span><span class="pun">.</span><span class="pln">example</span><span class="pun">.</span><span class="pln">hello </span><span class="typ">HelloWorld</span><span class="pln">
</span></code></pre>
<br />
This will create the new Blank Cordova Project by the name 'HelloWorld' in Specified directory, com.example.hello is the package name of the application and hello is the base directory name.<br />
<br />
Following is the base directory structure,<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg65REDNOhCKGhkX2OfcUPbNZeoKODK7Z7YiZjG5RbBY2Aw52SDp0r7Ws_LVXkUM5mgwzrQs1d1ELl6epJShG1b79xLI4Qg4Vhd-cOoqaTIKxu2n7s4oRwe1Rcutt-QeTUq0GPwtTsXbA/s1600/cordova_basic+structure.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg65REDNOhCKGhkX2OfcUPbNZeoKODK7Z7YiZjG5RbBY2Aw52SDp0r7Ws_LVXkUM5mgwzrQs1d1ELl6epJShG1b79xLI4Qg4Vhd-cOoqaTIKxu2n7s4oRwe1Rcutt-QeTUq0GPwtTsXbA/s1600/cordova_basic+structure.png" width="400" /></a></div>
<br />
<br />
4. Adding Platforms,<br />
<br />
To Add Platform, we need to navigate inside the project directory, Type in the following command to do so,<br />
<br />
<pre class="prettyprint"><code><span class="pln">$ cd hello</span></code> </pre>
<br />
In The above step, the blank project is being created, Now we need to add platforms which we intend to Target, As I was intending to target Android & iOS, I have added those two platforms, you can also add various platforms like windows, blackberry etc as per your requirements,<br />
<br />
To Add iOS Platform, Type this command in terminal,<br />
<br />
<pre class="prettyprint"><code><span class="pln">$ cordova platform add ios</span></code></pre>
<br />
Directory Structure of iOS Project will be as follows,<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFaqL95dNIwVcukZhQ_Ni7S47EFxXbIKBh4zeh7TktUMB8zgltZbIDzlAGlBKtBPdYKEIjUGdX4w2ePkAT1G54W2C_mlVGSHkybYqdl5vtypPTWgVXV2XlHbfnHU7T1A3o3xABV4ncVw/s1600/ios.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFaqL95dNIwVcukZhQ_Ni7S47EFxXbIKBh4zeh7TktUMB8zgltZbIDzlAGlBKtBPdYKEIjUGdX4w2ePkAT1G54W2C_mlVGSHkybYqdl5vtypPTWgVXV2XlHbfnHU7T1A3o3xABV4ncVw/s1600/ios.png" width="400" /></a></div>
<br />
<br />
This will add the basic hello world iOS project inside platforms directory, The project created is XCode ready Project, you can directly import to Xcode and get started!<br />
<br />
To Add Android Platform, Type this command in terminal,<br />
<br />
<pre class="prettyprint"><code><span class="pln">$ cordova platform add android</span></code></pre>
<br />
Directory Structure of Android Project will be as follows,<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZoGXvL4UbkVqILekyUtFwLs3dNBktajWtBRn5_u-fpmrRd0-JCz7gzthqLLlTJUa0mqcCoQMyKbbwwclSinkbDR04xnYN0m6zsGsN6iy126xKCPGGf2aps1SrhBfRI1HLAT6OUIfMpg/s1600/adt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZoGXvL4UbkVqILekyUtFwLs3dNBktajWtBRn5_u-fpmrRd0-JCz7gzthqLLlTJUa0mqcCoQMyKbbwwclSinkbDR04xnYN0m6zsGsN6iy126xKCPGGf2aps1SrhBfRI1HLAT6OUIfMpg/s1600/adt.png" width="400" /></a></div>
<br />
<br />
This will be the basic Hello World Android Project inside platforms directory, The Project created is Eclipse Ready Project ready to be Imported to Eclipse, Remember after importing the project in Eclipse add the Reference of CordovaLib to the Project, This CordovaLib is present in the same directory.<br />
<br />
Also one thing to be taken care of is to remember the ANDROID_HOME should be set to your path variable, If it is not set then above command will fail to execute, to set ANDROID_HOME in environment PATH, proceed with following commands,<br />
<br />
<pre>export ANDROID_HOME = <Path to android sdk>
<code>export PATH=$ANDROID_HOME/tools:$PATH
export PATH=$ANDROID_HOME/platform-to<wbr></wbr>ols:$PATH</code></pre>
<br />
<br />
So Now You are done with the Creating Basic Cordova Development to get you started with your desired Platform.<br />
<br />
Following this structure and steps will be very helpful in you wish to plan to add various basic plugins like InAppBrowser, AdMob etc to your Cordova Projects.<br />
<br />
I hope this Article will be helpful to People who want to get started with Apache Cordova.<br />
<br />
That is all for now.<br />
<br />
Will be back again with some useful stuff soon!<br />
<br />
Happy Blogging :)<br />
<br />
-Mayuri<br />
<br />
<br />
Best Car pool Android Application <a href="http://codecanyon.net/item/fortin-car-pool-ride-share-app-full-application-with-admin/16330583?ref=mayuri2411" target="_blank">Best Car Pool Application Source Code Download Here</a><br />
<br />
<span class="fbPhotosPhotoCaption" data-ft="{"tn":"K"}" id="fbPhotoSnowliftCaption" tabindex="0"><span class="hasCaption"><span class="text_exposed_show"><br /></span></span></span>
<br />
Best Social Network Cordova Ionic Application <a href="http://codecanyon.net/item/fortin-social-network-full-application-ionic-with-admin-panel/15899660?ref=mayuri2411" target="_blank">Best Social Networking Source Code Cordova Ioinc Application Download Here</a><br />
<br />
<br />
Best Android Application, Android Restaurant System <a href="http://codecanyon.net/item/fortin-restaurant-waiter-ordering-system-with-admin-panel/13367648?ref=mayuri2411" target="_blank">Best Android Restaurant Application Source code download here</a><br />
<br />
<br />
Best Android Application Android Chat Source code download <a href="http://codecanyon.net/item/fortin-gcm-chat-location-group-individual/10801112?ref=mayuri2411" target="_blank">Android Chat Source code download</a><br />
<br />
<br />
Best Android Quiz Source Code Download <a href="http://codecanyon.net/item/fortin-quiz-pro/9912697?ref=mayuri2411" target="_blank">Best Android Quiz Source Code Download here</a><br />
<br />
More and Lots of useful Android source codes here <a href="http://codecanyon.net/user/mayuri2411/portfolio" target="_blank">Best Android Source codes download here</a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com1tag:blogger.com,1999:blog-4225559480344562942.post-65561470993041868702013-07-23T18:29:00.000+09:002016-06-27T20:14:31.328+09:00SQLite Android ExampleHello Friends,<br />
<br />
Since Long time I was awaiting to write SQLite sample in my blogs, and finally here it is!<br />
<br />
This is a simple example where in there are 2 screens, first one to add the entries of students name and subjects marks and then to view the entries in the next page.<br />
<br />
There is a class <b>'DatabaseHandler' </b>which extends '<b>SQLiteOpenHelper</b>' where code to create database, tables, add new record, fetch records etc resides.<br />
<br />
Data is displayed in ListView using ListView adapter.<br />
<br />
Following code for the layout files and Java Files For App:<br />
<br />
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<b>activity_main.xml</b></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br />
xmlns:tools="http://schemas.android.com/tools"<br />
android:id="@+id/LinearLayout1"<br />
android:layout_width="match_parent"<br />
android:layout_height="match_parent"<br />
android:orientation="vertical"<br />
android:paddingBottom="@dimen/activity_vertical_margin"<br />
android:paddingLeft="@dimen/activity_horizontal_margin"<br />
android:paddingRight="@dimen/activity_horizontal_margin"<br />
android:paddingTop="@dimen/activity_vertical_margin"<br />
tools:context=".MainActivity" ><br />
<TextView<br />
android:id="@+id/textView1"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:text="Student Name" /><br />
<EditText<br />
android:id="@+id/etstdname"<br />
android:layout_width="match_parent"<br />
android:layout_height="wrap_content"<br />
android:ems="10" ><br />
</EditText> <br />
<TextView<br />
android:id="@+id/textView2"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:text="Physic" /><br />
<EditText<br />
android:id="@+id/etphysics"<br />
android:layout_width="match_parent"<br />
android:layout_height="wrap_content"<br />
android:ems="10" ><br />
</EditText> <br />
<TextView<br />
android:id="@+id/textView3"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:text="Biology" /><br />
<EditText<br />
android:id="@+id/etbiology"<br />
android:layout_width="match_parent"<br />
android:layout_height="wrap_content"<br />
android:ems="10" ><br />
</EditText> <br />
<TextView<br />
android:id="@+id/textView4"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:text="Chemistry" /><br />
<EditText<br />
android:id="@+id/etchemistry"<br />
android:layout_width="match_parent"<br />
android:layout_height="wrap_content"<br />
android:ems="10" ><br />
</EditText><br />
<Button<br />
android:id="@+id/btnsave"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:text="Save" /><br />
<Button<br />
android:id="@+id/btncheckdata"<br />
style="?android:attr/buttonStyleSmall"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:text="Check Data" /><br />
</LinearLayout></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<b>listview_row.xml</b></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<?xml version="1.0" encoding="utf-8"?><br />
<LinearLayout <br />
android:id="@+id/linearLayout1" <br />
android:layout_height="wrap_content" <br />
android:layout_width="fill_parent"<br />
xmlns:android="http://schemas.android.com/apk/res/android"> <br />
<TextView<br />
android:id="@+id/FirstText"<br />
android:layout_width="0dp"<br />
android:layout_height="match_parent"<br />
android:text="First" android:gravity="center" <br />
android:background="@drawable/shape"<br />
android:layout_weight="1"><br />
</TextView><br />
<TextView<br />
android:id="@+id/SecondText"<br />
android:layout_width="0dp"<br />
android:layout_height="match_parent"<br />
android:text="Second" android:gravity="center"<br />
android:background="@drawable/shape"<br />
android:layout_weight="1"> <br />
</TextView> <br />
<TextView<br />
android:id="@+id/ThirdText"<br />
android:layout_width="0dp"<br />
android:layout_height="match_parent" <br />
android:text="Third" android:gravity="center"<br />
android:background="@drawable/shape"<br />
android:layout_weight="1"><br />
</TextView> <br />
<TextView<br />
android:id="@+id/FourthText"<br />
android:layout_width="0dp"<br />
android:layout_height="match_parent"<br />
android:text="Fourth" android:gravity="center"<br />
android:background="@drawable/shape"<br />
android:layout_weight="1"><br />
</TextView><br />
</LinearLayout> </div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<b>activity_display_data.xml</b></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"<br />
xmlns:tools="http://schemas.android.com/tools"<br />
android:layout_width="match_parent"<br />
android:layout_height="match_parent"<br />
android:paddingBottom="@dimen/activity_vertical_margin"<br />
android:paddingLeft="@dimen/activity_horizontal_margin"<br />
android:paddingRight="@dimen/activity_horizontal_margin"<br />
android:paddingTop="@dimen/activity_vertical_margin"<br />
tools:context=".DisplayData" ><br />
<TextView<br />
android:id="@+id/textView1"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:layout_alignParentTop="true"<br />
android:layout_centerHorizontal="true"<br />
android:text="Student Info"<br />
android:textAppearance="?android:attr/textAppearanceLarge" /><br />
<ListView<br />
android:id="@+id/listview"<br />
android:layout_width="match_parent"<br />
android:layout_height="wrap_content"<br />
android:layout_alignParentLeft="true"<br />
android:layout_below="@+id/button1"<br />
android:background="@android:color/white" /><br />
<Button<br />
android:id="@+id/button1"<br />
style="?android:attr/buttonStyleSmall"<br />
android:layout_width="wrap_content"<br />
android:layout_height="wrap_content"<br />
android:layout_alignParentRight="true"<br />
android:layout_alignParentTop="true"<br />
android:text="Back" /> <br />
</RelativeLayout></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<b>MainActivity.java</b></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
package com.example.sqlitedemo;<br />
<br />
import android.os.Bundle;<br />
import android.app.Activity;<br />
import android.content.Intent;<br />
import android.view.Menu;<br />
import android.view.View;<br />
import android.widget.Button;<br />
import android.widget.EditText;<br />
import android.widget.Toast;<br />
<br />
public class MainActivity extends Activity {<br />
<br />
EditText etname, etchemistry, etbiology, etphysics;<br />
Button save, display;<br />
String name, biology, physic, chemistry;<br />
DatabaseHandler db;<br />
@Override<br />
protected void onCreate(Bundle savedInstanceState) {<br />
super.onCreate(savedInstanceState);<br />
setContentView(R.layout.activity_main); <br />
etname = (EditText)findViewById(R.id.etstdname);<br />
etchemistry = (EditText)findViewById(R.id.etchemistry);<br />
etbiology = (EditText)findViewById(R.id.etbiology);<br />
etphysics = (EditText)findViewById(R.id.etphysics); <br />
save = (Button)findViewById(R.id.btnsave);<br />
display = (Button)findViewById(R.id.btncheckdata); <br />
<br />
save.setOnClickListener(new View.OnClickListener() { <br />
@Override<br />
public void onClick(View v) { <br />
name = etname.getText().toString();<br />
biology = etbiology.getText().toString();<br />
chemistry = etchemistry.getText().toString();<br />
physic = etphysics.getText().toString(); <br />
db = new DatabaseHandler(getApplicationContext()); <br />
db.addContact(new Student(name, biology, chemistry, physic));<br />
Toast.makeText(getApplicationContext(), "Value Added", Toast.LENGTH_SHORT).show();<br />
}<br />
}); <br />
display.setOnClickListener(new View.OnClickListener() {<br />
@Override<br />
public void onClick(View v) { <br />
Intent i = new Intent(MainActivity.this, DisplayData.class);<br />
startActivity(i);<br />
}<br />
});<br />
}<br />
@Override<br />
public boolean onCreateOptionsMenu(Menu menu) { <br />
getMenuInflater().inflate(R.menu.main, menu);<br />
return true;<br />
}<br />
}</div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<b>Student.java</b></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
package com.example.sqlitedemo;<br />
<br />
public class Student {<br />
<br />
int id;<br />
String name, biology, chemistry, phyics;<br />
<br />
public Student()<br />
{<br />
<br />
}<br />
<br />
public int getId() {<br />
return id;<br />
}<br />
<br />
public void setId(int id) {<br />
this.id = id;<br />
}<br />
<br />
public String getName() {<br />
return name;<br />
}<br />
<br />
public void setName(String name) {<br />
this.name = name;<br />
}<br />
<br />
public String getBiology() {<br />
return biology;<br />
}<br />
<br />
public void setBiology(String biology) {<br />
this.biology = biology;<br />
}<br />
<br />
public String getChemistry() {<br />
return chemistry;<br />
}<br />
<br />
public void setChemistry(String chemistry) {<br />
this.chemistry = chemistry;<br />
}<br />
<br />
public String getPhyics() {<br />
return phyics;<br />
}<br />
<br />
public void setPhyics(String phyics) {<br />
this.phyics = phyics;<br />
}<br />
<br />
public Student(String name, String biology, String chemistry,<br />
String phyics) {<br />
super(); <br />
this.name = name;<br />
this.biology = biology;<br />
this.chemistry = chemistry;<br />
this.phyics = phyics;<br />
} <br />
<br />
}</div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<b>DatabaseHandler.java</b></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
package com.example.sqlitedemo;<br />
import java.util.ArrayList;<br />
import java.util.List;<br />
import android.content.ContentValues;<br />
import android.content.Context;<br />
import android.database.Cursor;<br />
import android.database.sqlite.SQLiteDatabase;<br />
import android.database.sqlite.SQLiteOpenHelper;<br />
<br />
public class DatabaseHandler extends SQLiteOpenHelper { <br />
private static final int DATABASE_VERSION = 1; <br />
private static final String DATABASE_NAME = "studentdetail"; <br />
private static final String TABLE_STUDENTS = "students";<br />
private static final String KEY_ID = "id";<br />
private static final String KEY_NAME = "name";<br />
private static final String KEY_PHYSICS = "physics";<br />
private static final String KEY_CHEMISTRY = "chemistry";<br />
private static final String KEY_BIOLOGY = "biology";<br />
<br />
public DatabaseHandler(Context context) {<br />
super(context, DATABASE_NAME, null, DATABASE_VERSION);<br />
}<br />
<br />
@Override<br />
public void onCreate(SQLiteDatabase db) {<br />
String CREATE_CONTACTS_TABLE = "CREATE TABLE " + TABLE_STUDENTS + "("<br />
+ KEY_ID + " INTEGER PRIMARY KEY," + KEY_NAME + " TEXT, " <br />
+ KEY_BIOLOGY + " TEXT, " + KEY_CHEMISTRY + " TEXT, " +<br />
KEY_PHYSICS + " TEXT" + ")"; <br />
db.execSQL(CREATE_CONTACTS_TABLE);<br />
}<br />
<br />
@Override<br />
public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) { <br />
db.execSQL("DROP TABLE IF EXISTS " + TABLE_STUDENTS); <br />
onCreate(db);<br />
}<br />
<br />
void addContact(Student student) {<br />
SQLiteDatabase db = this.getWritableDatabase(); <br />
ContentValues values = new ContentValues();<br />
values.put(KEY_NAME, student.getName()); <br />
values.put(KEY_BIOLOGY, student.getBiology()); <br />
values.put(KEY_CHEMISTRY, student.getChemistry()); <br />
values.put(KEY_PHYSICS, student.getPhyics()); <br />
db.insert(TABLE_STUDENTS, null, values);<br />
db.close(); <br />
}<br />
<br />
public List<Student> getAllDetails() {<br />
List<Student> studentList = new ArrayList<Student>(); <br />
String selectQuery = "SELECT * FROM " + TABLE_STUDENTS;<br />
SQLiteDatabase db = this.getWritableDatabase();<br />
Cursor cursor = db.rawQuery(selectQuery, null); <br />
if (cursor.moveToFirst()) {<br />
do {<br />
Student student = new Student();<br />
student.setId(Integer.parseInt(cursor.getString(0)));<br />
student.setName(cursor.getString(1));<br />
student.setBiology(cursor.getString(2));<br />
student.setChemistry(cursor.getString(3)); <br />
student.setPhyics(cursor.getString(4)); <br />
studentList.add(student);<br />
} while (cursor.moveToNext());<br />
}<br />
cursor.close();<br />
db.close();<br />
return studentList; <br />
}<br />
<br />
}</div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
</div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<b>listviewAdapter.java</b></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
package com.example.sqlitedemo;<br />
<br />
import static com.example.sqlitedemo.Constant.STUD_NAME;<br />
import static com.example.sqlitedemo.Constant.BIOLOGY;<br />
import static com.example.sqlitedemo.Constant.PHYSICS;<br />
import static com.example.sqlitedemo.Constant.CHEMISTRY;<br />
<br />
import java.util.ArrayList;<br />
import java.util.HashMap;<br />
import java.util.List;<br />
<br />
import android.app.Activity;<br />
import android.graphics.Color;<br />
import android.view.LayoutInflater;<br />
import android.view.View;<br />
import android.view.ViewGroup;<br />
import android.widget.BaseAdapter;<br />
import android.widget.TextView;<br />
<br />
<br />
public class listviewAdapter extends BaseAdapter<br />
{<br />
public ArrayList<HashMap> list;<br />
Activity activity;<br />
<br />
public listviewAdapter(Activity activity, ArrayList<HashMap> list) {<br />
super();<br />
this.activity = activity;<br />
this.list = list;<br />
}<br />
@Override<br />
public int getCount() {<br />
// TODO Auto-generated method stub<br />
return list.size();<br />
}<br />
@Override<br />
public Object getItem(int position) {<br />
// TODO Auto-generated method stub<br />
return list.get(position);<br />
}<br />
@Override<br />
public long getItemId(int position) {<br />
// TODO Auto-generated method stub<br />
return 0;<br />
}<br />
private class ViewHolder {<br />
TextView txtFirst;<br />
TextView txtSecond;<br />
TextView txtThird;<br />
TextView txtFourth; <br />
}<br />
<br />
@Override<br />
public View getView(int position, View convertView, ViewGroup parent) {<br />
ViewHolder holder;<br />
LayoutInflater inflater = activity.getLayoutInflater();<br />
if (convertView == null){<br />
convertView = inflater.inflate(R.layout.listview_row, null);<br />
holder = new ViewHolder();<br />
holder.txtFirst = (TextView) convertView.findViewById(R.id.FirstText);<br />
holder.txtSecond = (TextView) convertView.findViewById(R.id.SecondText);<br />
holder.txtThird = (TextView) convertView.findViewById(R.id.ThirdText);<br />
holder.txtFourth = (TextView) convertView.findViewById(R.id.FourthText);<br />
convertView.setTag(holder);<br />
} else {<br />
holder = (ViewHolder) convertView.getTag(); <br />
} <br />
HashMap map = list.get(position);<br />
holder.txtFirst.setText(""+map.get(STUD_NAME));<br />
holder.txtSecond.setText(""+map.get(BIOLOGY));<br />
holder.txtThird.setText(""+map.get(PHYSICS));<br />
holder.txtFourth.setText(""+map.get(CHEMISTRY));<br />
return convertView;<br />
}<br />
}<br />
class Constant {<br />
public static final String STUD_NAME = "First";<br />
public static final String BIOLOGY = "Second";<br />
public static final String PHYSICS = "Third";<br />
public static final String CHEMISTRY = "Fourth";<br />
<br />
}<br />
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<b>DisplayData.java</b></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
package com.example.sqlitedemo;<br />
<br />
import java.util.ArrayList; <br />
import java.util.HashMap;<br />
import java.util.List;<br />
import static com.example.sqlitedemo.Constant.STUD_NAME;<br />
import static com.example.sqlitedemo.Constant.BIOLOGY;<br />
import static com.example.sqlitedemo.Constant.PHYSICS;<br />
import static com.example.sqlitedemo.Constant.CHEMISTRY;<br />
import android.os.Bundle;<br />
import android.app.Activity;<br />
import android.content.Intent; <br />
import android.view.Menu;<br />
import android.view.View;<br />
import android.widget.Button;<br />
import android.widget.ListView;<br />
<br />
public class DisplayData extends Activity {<br />
private ArrayList<HashMap> list;<br />
Button home; <br />
String[] problemgrid = null;<br />
List<String>getnumbers =null; <br />
ListView lview;<br />
public void onCreate(Bundle savedInstanceState) {<br />
super.onCreate(savedInstanceState); <br />
setContentView(R.layout.activity_display_data); <br />
lview = (ListView) findViewById(R.id.listview);<br />
populateList();<br />
listviewAdapter adapter = new listviewAdapter(this, list); <br />
lview.setAdapter(adapter); <br />
home = (Button)findViewById(R.id.button1);<br />
home.setOnClickListener(new View.OnClickListener() { <br />
@Override <br />
public void onClick(View v) { <br />
Intent i = new Intent(DisplayData.this, MainActivity.class); <br />
finish();<br />
startActivity(i);<br />
}<br />
}); <br />
} <br />
private void populateList() {<br />
list = new ArrayList<HashMap>();<br />
HashMap temp1 = new HashMap();<br />
temp1.put(STUD_NAME, "Stud Name");<br />
temp1.put(BIOLOGY, "Biology");<br />
temp1.put(PHYSICS, "Physics");<br />
temp1.put(CHEMISTRY, "Chemistry");<br />
list.add(temp1); <br />
DatabaseHandler dbresult = new DatabaseHandler(getApplicationContext()); <br />
List<Student> recdata = dbresult.getAllDetails(); <br />
for (Student cn : recdata) { <br />
String name = cn.getName();<br />
String biology = cn.getBiology();<br />
String physics = cn.getPhyics();<br />
String chemistry = cn.getChemistry(); <br />
HashMap temp = new HashMap();<br />
temp.put(STUD_NAME, name);<br />
temp.put(BIOLOGY, biology);<br />
temp.put(PHYSICS, physics);<br />
temp.put(CHEMISTRY, chemistry); <br />
list.add(temp);<br />
}<br />
}<br />
@Override<br />
public boolean onCreateOptionsMenu(Menu menu) { <br />
getMenuInflater().inflate(R.menu.display_data, menu);<br />
return true;<br />
}<br />
}</div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<span style="color: black;"><span style="font-family: inherit;">The Screenshots of the Application is as Follows,</span></span></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqRDO84w5hDrWrtPjjSWi2hWCJmAZOKo5tqVue1koA5I8ftHMU4aB8pIxXJfq5bSX2pVvsZX27aP8yvetQeuBS1Yl2LibAIJpPxwYYkSBQ_DQUoPo2V8WUXcNHYwARDctN9WBv-wMgTw/s1600/a.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqRDO84w5hDrWrtPjjSWi2hWCJmAZOKo5tqVue1koA5I8ftHMU4aB8pIxXJfq5bSX2pVvsZX27aP8yvetQeuBS1Yl2LibAIJpPxwYYkSBQ_DQUoPo2V8WUXcNHYwARDctN9WBv-wMgTw/s320/a.JPG" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5zME4KJzp5dWQ-Yn6PTF0ZcrpVCCCSjl9ZM2KvBkYi86EYMsCPfrZiHCF0fRcihmGaAivQAPoQc0eazP6RWj9QzS5AuNWitmubL5qeZ3AiMSMOl92vM0ZpOt4vwn2E1vtjRUgkQ9Fvg/s1600/b.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5zME4KJzp5dWQ-Yn6PTF0ZcrpVCCCSjl9ZM2KvBkYi86EYMsCPfrZiHCF0fRcihmGaAivQAPoQc0eazP6RWj9QzS5AuNWitmubL5qeZ3AiMSMOl92vM0ZpOt4vwn2E1vtjRUgkQ9Fvg/s320/b.JPG" width="320" /></a></div>
<br />
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<br />
<br />
<div style="color: #660000; font-family: inherit;">
<span style="color: black;">To Verify the Data in database, Go To File Explorer Window for Eumlator, In your IDE, browse to the data/data/<package name> /databases/ , here you will see the database file created as follows,</span></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNXXXCut0lZIn7s6lPnEULAov1JKR7TLQIo4DQ3zgMkfkddw2d566c5odj2F1jDfglJh1rlkhbg4q6eGIkvoiMSVypT0snR7QN71A6f8o3-fY2xQo5NJP0NL72uBS6AqhxylYQna3Sxw/s1600/c.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNXXXCut0lZIn7s6lPnEULAov1JKR7TLQIo4DQ3zgMkfkddw2d566c5odj2F1jDfglJh1rlkhbg4q6eGIkvoiMSVypT0snR7QN71A6f8o3-fY2xQo5NJP0NL72uBS6AqhxylYQna3Sxw/s320/c.JPG" width="320" /></a></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
</div>
<br />
<div style="color: #660000; font-family: inherit;">
<span style="color: black;"> Pull this file from the emulator and view the file in SQLite database browser you can fire the query and verify your table structure and data as follows,</span></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<span style="color: black;"><span style="font-family: inherit;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR4S3oEwG6u8IeTP215ylT-9BjUlH1rWPn7L5ByhbLtxfZOMt3c2M848ASaEO5ZcK7kuoUr3bePE1KWIx5ertQT1hNBQAs3wJMD1eGmYTdNmbgXY1HE3f0ludhJElDUvd2fuzZiAsFBg/s1600/d.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR4S3oEwG6u8IeTP215ylT-9BjUlH1rWPn7L5ByhbLtxfZOMt3c2M848ASaEO5ZcK7kuoUr3bePE1KWIx5ertQT1hNBQAs3wJMD1eGmYTdNmbgXY1HE3f0ludhJElDUvd2fuzZiAsFBg/s320/d.JPG" width="320" /></a></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<span style="color: black;"><span style="font-family: inherit;"><br /></span></span></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<span style="color: black;"><span style="font-family: inherit;"> </span></span> </div>
<div style="color: black; font-family: inherit;">
That is all from my end from now.</div>
<div style="color: black; font-family: inherit;">
<br /></div>
<div style="color: black; font-family: inherit;">
Happy Coding!</div>
<div style="color: black; font-family: inherit;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<span style="color: black; font-family: "arial" , "helvetica" , sans-serif;">~Mayuri</span><br />
<br />
<br />
Best Car pool Android Application <a href="http://codecanyon.net/item/fortin-car-pool-ride-share-app-full-application-with-admin/16330583?ref=mayuri2411" target="_blank">Best Car Pool Application Source Code Download Here</a><br />
<br />
<span class="fbPhotosPhotoCaption" data-ft="{"tn":"K"}" id="fbPhotoSnowliftCaption" tabindex="0"><span class="hasCaption"><span class="text_exposed_show"><br /></span></span></span>
<br />
Best Social Network Cordova Ionic Application <a href="http://codecanyon.net/item/fortin-social-network-full-application-ionic-with-admin-panel/15899660?ref=mayuri2411" target="_blank">Best Social Networking Source Code Cordova Ioinc Application Download Here</a><br />
<br />
</div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com5tag:blogger.com,1999:blog-4225559480344562942.post-10736009932126486802013-07-12T20:21:00.000+09:002016-06-27T20:38:39.358+09:00Android PhoneGap Login Example with JQuery-Ajax & Java/Servlet/JDBCHello Friends,<br />
<br />
Following Example Illustrates the Login Functionality Implemented in simplest form using Phonegap.<br />
<br />
Following is the Algo/Logic used in the Sample Application,<br />
<ul>
<li>From the Phonegap app, User Enters User Name & Password,</li>
<li>From the app, JQuery-Ajax Request is made to the Servlet, Sending username & password as parameters,</li>
<li>Servlet Accepts the Parameters, Then Connects to Remote Database using JDBC and fetches Username and Passwords,</li>
<li>Matches the username and password from parameters and those fetched from database,</li>
<li>If credentials matches writes Response as "SUCCESS" else "FAIL"</li>
<li>At the Client side i.e. Phonegap App, Appropriate Alert message is shown depending on the Response Got from Servlet.</li>
</ul>
<br />
Following is the Server Side - Servlet Snippet Code, <br />
<br />
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
response.setContentType("text/html;charset=UTF-8");<br />
PrintWriter out = response.getWriter();<br />
Connection con = null;<br />
ResultSet resultSet = null; <br />
String param_uname = request.getParameter("uname");<br />
String param_pwd = request.getParameter("pwd");<br />
try {<br />
Class.forName("<DB Driver>").newInstance();<br />
String url = "<DB URL>";<br />
con = DriverManager.getConnection(url);<br />
String query = null;<br />
query = "SELECT * from APP.LOGIN";<br />
PreparedStatement statement = con.prepareStatement(query);<br />
resultSet = statement.executeQuery();<br />
String db_uname="";<br />
String db_pwd=""; <br />
while (resultSet.next()) {<br />
db_uname = resultSet.getString("UNAME");<br />
db_pwd = resultSet.getString("PWD"); <br />
}<br />
if( (param_uname.equals(db_uname)) && (param_pwd.equals(db_pwd))){<br />
out.write("SUCCESS");<br />
} else {<br />
out.write("FAIL"); <br />
} <br />
} catch (Exception e) {<br />
e.printStackTrace();<br />
} finally {<br />
out.close();<br />
}</div>
<br />
Following is the Snippet Of The HTML Code for PhoneGap Application,<br />
<br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> <div data-role="content" id="input_login"></span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> <ul data-role="listview" data-divider-theme="b" data-inset="true"></span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> <li data-role="list-divider" role="heading"></span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> User Name</span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> </li> </span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> <li data-role="list-divider" ></span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> <input type="text" id="txt_username"/></span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> </li> </span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> <li data-role="list-divider" role="heading"></span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> Password</span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> </li> </span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> <li data-role="list-divider" ></span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> <input type="password" id="txt_pwd"/></span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> </li> </span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> <li data-role="list-divider" > </span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> <input type="button" id="btn_login" value="Login" onclick="javascript:verifyLogin();"/></span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> </li> </span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> </ul></span><br />
<span style="color: #660000; font-family: "courier new" , "courier" , monospace;"> </div></span><br />
<br />
Following is the JavaScript Function / Code,<br />
<br />
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
function verifyLogin(){ <br />
var uname=document.getElementById("txt_username").value;<br />
var pwd=document.getElementById("txt_pwd").value; <br />
$.ajax({<br />
type : 'POST', <br />
url : /Login', // Servlet URL <br />
data:{<br />
'uname':uname,<br />
'pwd':pwd<br />
},<br />
success : function(data) { <br />
if("SUCCESS"==data){ <br />
alert("Login Success!!");<br />
} else { <br />
alert("Invalid Login!!"); <br />
}<br />
},<br />
error : function(xhr, type) { <br />
alert('server error occurred');<br />
} <br />
}); <br />
}</div>
<br />
Following are the Screenshots For the Application,<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinHXKYORCcUhn01p_y4WDsBDS3AYOV6ds6gSBSKyCw9KjDbnes5-XHlhIdwZAtxgyrCF5lcFOgWJu1t6sIT1WocqyQBNeyTVrw801Iq-aqjPrlZH0gQWPmAjoy-BLPqcLSXaNeIkrEwA/s1600/a.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinHXKYORCcUhn01p_y4WDsBDS3AYOV6ds6gSBSKyCw9KjDbnes5-XHlhIdwZAtxgyrCF5lcFOgWJu1t6sIT1WocqyQBNeyTVrw801Iq-aqjPrlZH0gQWPmAjoy-BLPqcLSXaNeIkrEwA/s320/a.JPG" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtwhce4D5Wqmw75edlkoz1GSflJoex0kqXqKVjsCvI_VUXYe-jlstFC-JIhrlL03gXGuZVsqb8e8AUz4C7vfnJIqUuoTWWLuV4Tjuzzq5W3f8MhgYQ8vCd5hW1zIaS_5exFM6nomVG6w/s1600/b.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtwhce4D5Wqmw75edlkoz1GSflJoex0kqXqKVjsCvI_VUXYe-jlstFC-JIhrlL03gXGuZVsqb8e8AUz4C7vfnJIqUuoTWWLuV4Tjuzzq5W3f8MhgYQ8vCd5hW1zIaS_5exFM6nomVG6w/s320/b.JPG" width="320" /></a></div>
<br />
I Hope this example will be useful for people learning PhoneGap,<br />
<br />
Happy Coding!!<br />
<br />
~Mayuri<br />
<br />
<br />
<br />
<br />
Best Car pool Android Application <a href="http://codecanyon.net/item/fortin-car-pool-ride-share-app-full-application-with-admin/16330583?ref=mayuri2411" target="_blank">Best Car Pool Application Source Code Download Here</a><br />
<br />
<span class="fbPhotosPhotoCaption" data-ft="{"tn":"K"}" id="fbPhotoSnowliftCaption" tabindex="0"><span class="hasCaption"><span class="text_exposed_show"><br /></span></span></span>
<br />
Best Social Network Cordova Ionic Application <a href="http://codecanyon.net/item/fortin-social-network-full-application-ionic-with-admin-panel/15899660?ref=mayuri2411" target="_blank">Best Social Networking Source Code Cordova Ioinc Application Download Here</a><br />
<br />
<br />
Best Android Application, Android Restaurant System <a href="http://codecanyon.net/item/fortin-restaurant-waiter-ordering-system-with-admin-panel/13367648?ref=mayuri2411" target="_blank">Best Android Restaurant Application Source code download here</a><br />
<br />
<br />
Best Android Application Android Chat Source code download <a href="http://codecanyon.net/item/fortin-gcm-chat-location-group-individual/10801112?ref=mayuri2411" target="_blank">Android Chat Source code download</a><br />
<br />
<br />
Best Android Quiz Source Code Download <a href="http://codecanyon.net/item/fortin-quiz-pro/9912697?ref=mayuri2411" target="_blank">Best Android Quiz Source Code Download here</a><br />
<br />
More and Lots of useful Android source codes here <a href="http://codecanyon.net/user/mayuri2411/portfolio" target="_blank">Best Android Source codes download here</a><br />
<br />
<br />
<br />
Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com28tag:blogger.com,1999:blog-4225559480344562942.post-33686043056255778952013-07-03T19:57:00.000+09:002013-07-03T20:33:51.600+09:00Dynamic Chart Using Google Chart API, Jquery Ajax, JDBC & JSONHello Friends,<br />
<br />
I was exploring and playing with the codes of various Charts APIs since many days, First it was JFreeChart for Java Applications attracted my attention and I loved using the same. Then I started looking upon JavaScript based Charting APIs and while Googling about the same what caught my eye was Google Chats. I have also mentioned in my earlier posts that I'm a Big Fat fan of Google and love using their APIs.<br />
<br />
Regarding Google Charts, so I started to explore Google Charts, tried those extremely simple yet useful examples given for various types of charts pie, bar, line etc...and without any setup needed they worked like WOW! <br />
<br />
Now the thought came to me that using this examples, I need my JavaScript client side charts to display the data stored at remote database at server, And so I started my work to accomplish this.<br />
<br />
What I did was created a Java Srevlet which connects to my database, get the data from table, converts the data to JSON Format and sends the same as a Response, And At Client Side, Jquery - Ajax Function which will call this Servlet, Gets the data which is returned as Response, parse the Json Data to javascript array which is being used by Google Chart API to Display Charts.<br />
<br />
Following Is the HTML / JavaScript Client Side Code,<br />
<br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"><html></span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> <head></span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> <script type="text/javascript" src="js/json2.js"></script></span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> <script type="text/javascript" src="js/jsonStringify.js"></script></span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> <script type="text/javascript" src="js/jquery-1.9.1.js"></script></span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> <script type="text/javascript" src="https://www.google.com/jsapi"></script></span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> <script type="text/javascript"></span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> ////////////// Getting data from server</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> var queryObject="";</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> var queryObjectLen="";</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> $.ajax({</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> type : 'POST',</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> url : 'http://localhost:8084/GoogleChartTest/GetStudentData',</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> dataType:'json',</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> success : function(data) {</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> queryObject = eval('(' + JSON.stringify(data) + ')');</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> queryObjectLen = queryObject.studDetails.length;</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> },</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> error : function(xhr, type) {</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> alert('server error occoured')</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> }</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> });</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> var arrdata="";</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> google.load("visualization", "1", {packages:["corechart"]});</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> google.setOnLoadCallback(drawChart);</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> function drawChart() {</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> arrdata = new google.visualization.DataTable();</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> arrdata.addColumn('string', 'Names');</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> arrdata.addColumn('number', 'Physics');</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> arrdata.addColumn('number', 'Chemistry');</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> arrdata.addColumn('number', 'Biology');</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> for(var i=0;i<queryObjectLen;i++){</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> var studname = queryObject.studDetails[i].studname;</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> var physics = queryObject.studDetails[i].physics;</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> var chemistry = queryObject.studDetails[i].chemistry;</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> var biology = queryObject.studDetails[i].biology;</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> arrdata.addRows([</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> [studname,parseInt(physics),parseInt(chemistry),parseInt(biology)]</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> ]);</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> }</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> var options = {</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> title: 'Students Performance'</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> };</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> var chart = new google.visualization.LineChart(document.getElementById('chart_div'));</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> chart.draw(arrdata, options);</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> }</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> </script></span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> </head></span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> <body></span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> <div id="chart_div" style="width: 900px; height: 500px;"></div></span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> </body></span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"></html></span><br />
<br />
<span style="font-family: inherit;">Following is the Server Side Servlet Code Snippet, </span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="color: #660000; font-family: Courier New, Courier, monospace;">PrintWriter out = response.getWriter();</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> Connection con = null;</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> ResultSet resultSet = null;</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> List<JSONObject> studDetails = new LinkedList<JSONObject>();</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> JSONObject responseObj = new JSONObject();</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> </span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> Class.forName("<jdbc driver>").newInstance();</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> String url = "<jdbc url>";</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> con = DriverManager.getConnection(url);</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> String query = null;</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> query = "SELECT * from APP.STUDENTS";</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> PreparedStatement statement = con.prepareStatement(query);</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> resultSet = statement.executeQuery();</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> JSONObject studObj = null;</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> while (resultSet.next()) {</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> String studname = resultSet.getString("studname");</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> String physics = resultSet.getString("physics");</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> String chemistry = resultSet.getString("chemistry");</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> String biology = resultSet.getString("biology");</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> studObj = new JSONObject();</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> studObj.put("studname", studname);</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> studObj.put("physics", physics);</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> studObj.put("chemistry", chemistry);</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> studObj.put("biology", biology);</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> studDetails.add(studObj);</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> }</span><br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> responseObj.put("studDetails", studDetails);</span><br />
<br />
<span style="color: #660000; font-family: Courier New, Courier, monospace;"> out.write(responseObj.toString());</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">And Finally, The O/P, i.e. chart is as follows,</span><br />
<span style="font-family: inherit;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihpk00m1wWbv_jzyAU16BL7Cy8Z5CYo-rFZeOpFCNsGiPc4SqvJDx1TsKqRP7YOM7Rv5j0bF0EXBvYOlXxeMfprqvx66kBvxoh0KEmjNybUuE-CMzEKRq7FuXSMR0RqIFAI6UHcbJvjw/s871/a.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihpk00m1wWbv_jzyAU16BL7Cy8Z5CYo-rFZeOpFCNsGiPc4SqvJDx1TsKqRP7YOM7Rv5j0bF0EXBvYOlXxeMfprqvx66kBvxoh0KEmjNybUuE-CMzEKRq7FuXSMR0RqIFAI6UHcbJvjw/s320/a.JPG" width="320" /></a></div>
<span style="font-family: inherit;">Preview of the Data in the Database table from which the chart is displayed is as follows,</span><br />
<span style="font-family: inherit;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQAbabiFXALE3oKH48ws7ZVsw-xaPnIyW9HNg2E4AYOwOTQUutvQFDwI87SJrEXzvV_nuLxl-hdmRMm7j58mXjrjh0CkSI6FT-qwjbZ7B46HppC0E0GAkfLvK3BEdhGmHi3W8mkpVWXQ/s484/b.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQAbabiFXALE3oKH48ws7ZVsw-xaPnIyW9HNg2E4AYOwOTQUutvQFDwI87SJrEXzvV_nuLxl-hdmRMm7j58mXjrjh0CkSI6FT-qwjbZ7B46HppC0E0GAkfLvK3BEdhGmHi3W8mkpVWXQ/s320/b.JPG" width="320" /></a></div>
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">That is All From my end for now, just </span>thought<span style="font-family: inherit;"> of </span>sharing<span style="font-family: inherit;"> what I did so could be useful for somebody.</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">Happy Coding!</span><br />
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">~ Mayuri :)</span>Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com7tag:blogger.com,1999:blog-4225559480344562942.post-75484245674472926632013-07-01T20:43:00.000+09:002013-07-03T20:29:49.868+09:00JFreeChart - Dynamic Chart Example <div style="font-family: Times,"Times New Roman",serif;">
<span style="font-size: small;">Hello Friends,</span></div>
<div style="font-family: Times,"Times New Roman",serif;">
<span style="font-size: small;"><br /></span></div>
<div style="font-family: Times,"Times New Roman",serif;">
<span style="font-size: small;">I'm back again with one of the example of JFreeChart, one of the widely used charting APIs in Java.</span></div>
<div style="font-family: Times,"Times New Roman",serif;">
<span style="font-size: small;"><br /></span></div>
<div style="font-family: Times,"Times New Roman",serif;">
<span style="font-size: small;"> This is the simple example illustrates the power of Java Charting using JFreeCharts.</span></div>
<div style="font-family: Times,"Times New Roman",serif;">
<span style="font-size: small;"><br /> This example has following features:</span></div>
<ul style="font-family: Times,"Times New Roman",serif;">
<li><span style="font-size: small;"> Displays Students Results in line chart.</span></li>
<li><span style="font-size: small;"> X-Axis corresponds to Subjects</span></li>
<li><span style="font-size: small;"> Y-Axis corresponds to Marks secured</span></li>
<li><span style="font-size: small;"> Each line that is plot on the chart represents each student.</span></li>
<li><span style="font-size: small;"> Chart is dynamically populated from the values extracted from database.</span></li>
<li><span style="font-size: small;"> Student Wise Dropdown is present</span></li>
</ul>
<div style="font-family: Times,"Times New Roman",serif;">
<br /></div>
<div style="font-family: Times,"Times New Roman",serif;">
Following is the Code For the example,</div>
<br />
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
package com.mayuri.example;<br />
<br />
import java.awt.BorderLayout;<br />
import java.awt.Color; <br />
import java.awt.FlowLayout;<br />
import java.awt.event.ActionEvent;<br />
import java.awt.event.ActionListener;<br />
import java.sql.Connection;<br />
import java.sql.DriverManager;<br />
import java.sql.PreparedStatement;<br />
import java.sql.ResultSet;<br />
import java.sql.Statement;<br />
import java.util.ArrayList;<br />
import javax.swing.AbstractAction;<br />
import javax.swing.DefaultComboBoxModel;<br />
import javax.swing.JApplet;<br />
import javax.swing.JButton;<br />
import javax.swing.JComboBox;<br />
import javax.swing.JPanel;<br />
<br />
import org.jfree.chart.ChartFactory;<br />
import org.jfree.chart.ChartPanel;<br />
import org.jfree.chart.JFreeChart;<br />
import org.jfree.chart.plot.CategoryPlot;<br />
import org.jfree.chart.plot.PlotOrientation;<br />
import org.jfree.chart.renderer.category.LineAndShapeRenderer;<br />
import org.jfree.data.category.DefaultCategoryDataset;<br />
<br />
public class ChartDemoAppletDb extends JApplet {<br />
ChartPanel chartPanel;<br />
DefaultCategoryDataset dataset = new DefaultCategoryDataset();<br />
@Override<br />
public void init() {<br />
createDataset("All");<br />
chartPanel = createChart();<br />
chartPanel.setMouseWheelEnabled(true);<br />
chartPanel.setHorizontalAxisTrace(true);<br />
chartPanel.setVerticalAxisTrace(true);<br />
chartPanel.setZoomTriggerDistance(10);<br />
setLayout(new BorderLayout(0, 5));<br />
add(chartPanel, BorderLayout.CENTER);<br />
JPanel panel = new JPanel(new FlowLayout(FlowLayout.CENTER));<br />
panel.add(studentsWise());<br />
panel.add(restoreZoom());<br />
panel.add(enableTrace());<br />
panel.add(disableTrace());<br />
add(panel, BorderLayout.SOUTH);<br />
}<br />
private JButton restoreZoom() {<br />
final JButton restore = new JButton(new AbstractAction("Restore") {<br />
@Override<br />
public void actionPerformed(ActionEvent e) {<br />
chartPanel.restoreAutoBounds();<br />
}<br />
});<br />
return restore;<br />
}<br />
<br />
<br />
private JButton enableTrace() {<br />
final JButton traceEnabled = new JButton(new AbstractAction("Enable Trace") {<br />
@Override<br />
public void actionPerformed(ActionEvent e) {<br />
chartPanel.setHorizontalAxisTrace(true);<br />
chartPanel.setVerticalAxisTrace(true);<br />
chartPanel.repaint();<br />
}<br />
});<br />
return traceEnabled;<br />
}<br />
private JButton disableTrace() {<br />
final JButton traceDisabled = new JButton(new AbstractAction("Disable Trace") {<br />
@Override<br />
public void actionPerformed(ActionEvent e) {<br />
chartPanel.setHorizontalAxisTrace(false);<br />
chartPanel.setVerticalAxisTrace(false);<br />
chartPanel.repaint();<br />
}<br />
});<br />
return traceDisabled;<br />
}<br />
private JComboBox studentsWise() {<br />
final JComboBox studentsNames = new JComboBox();<br />
ArrayList<String> studNameList = new ArrayList<String>();<br />
DataProvider dataProvide = new DataProvider();<br />
studNameList = dataProvide.getStudentsNames();<br />
studentsNames.setModel(new DefaultComboBoxModel(studNameList.toArray()));<br />
studentsNames.addActionListener(new ActionListener() {<br />
@Override<br />
public void actionPerformed(ActionEvent e) {<br />
if ("All".equals(studentsNames.getSelectedItem())) {<br />
dataset.clear();<br />
createDataset("All");<br />
} else {<br />
String selstudname = studentsNames.getSelectedItem().toString();<br />
dataset.clear();<br />
createDataset(selstudname);<br />
}<br />
}<br />
});<br />
return studentsNames;<br />
}<br />
private ChartPanel createChart() {<br />
JFreeChart chart = ChartFactory.createLineChart(<br />
"Students Results",<br />
"Subjects",<br />
"Marks",<br />
dataset,<br />
PlotOrientation.VERTICAL,<br />
true,<br />
true,<br />
false<br />
); <br />
chart.setBackgroundPaint(Color.PINK);<br />
CategoryPlot plot = (CategoryPlot) chart.getPlot();<br />
plot.setBackgroundPaint(Color.CYAN);<br />
plot.setRangeGridlinePaint(Color.BLACK);<br />
LineAndShapeRenderer renderer = (LineAndShapeRenderer) plot.getRenderer();<br />
renderer.setShapesVisible(true);<br />
renderer.setDrawOutlines(true);<br />
renderer.setUseFillPaint(true);<br />
return new ChartPanel(chart);<br />
}<br />
private void createDataset(String condition) {<br />
Connection connect = null;<br />
ResultSet resultSet = null;<br />
try{<br />
DataProvider dataProvide = new DataProvider();<br />
connect = dataProvide.getDbConnection();<br />
String query = null;<br />
if("All".equals(condition)){<br />
query="SELECT * from APP.STUDENTS";<br />
} else {<br />
query="SELECT * from APP.STUDENTS WHERE STUDNAME = '"+condition+"'";<br />
} <br />
<br />
PreparedStatement statement = connect.prepareStatement(query);<br />
resultSet = statement.executeQuery();<br />
while (resultSet.next()) {<br />
String studname = resultSet.getString("studname");<br />
String physics = resultSet.getString("physics");<br />
String chemistry = resultSet.getString("chemistry");<br />
String biology = resultSet.getString("biology");<br />
dataset.addValue(Integer.parseInt(physics), studname, "physics");<br />
dataset.addValue(Integer.parseInt(chemistry), studname, "chemistry");<br />
dataset.addValue(Integer.parseInt(biology), studname, "biology");<br />
}<br />
}catch(Exception e) {<br />
e.printStackTrace();<br />
}<br />
}<br />
}<br />
<br />
class DataProvider {<br />
public Connection getDbConnection(){<br />
Connection con = null;<br />
try{<br />
Class.forName("<JDBC Driver>").newInstance();<br />
String url = "<DB URL>";<br />
con = DriverManager.getConnection(url);<br />
}<br />
catch(Exception e){<br />
e.printStackTrace();<br />
}<br />
return con;<br />
}<br />
<br />
public ArrayList<String> getStudentsNames(){<br />
ArrayList<String> studNameList = new ArrayList<String>();<br />
Connection connect = getDbConnection();<br />
ResultSet resultSet = null;<br />
try{<br />
studNameList.add("All");<br />
Statement stmt = connect.createStatement();<br />
String query = "SELECT STUDNAME from APP.STUDENTS ";<br />
resultSet = stmt.executeQuery(query);<br />
while(resultSet.next()){<br />
studNameList.add(resultSet.getString("studname"));<br />
}<br />
}catch(Exception e){<br />
e.printStackTrace();<br />
}<br />
return studNameList;<br />
}<br />
}</div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<span style="color: black;"><span style="font-family: Times, "Times New Roman", serif;">Screenshots For the Database Table and output for the above code is as follows,</span></span></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOd4Q9CkpkteBfwsEHwoJfgd9ykojQQah_8SLrTCuA6cno7IlAygBQtoJV8yNcETZ1wZUYXmjM-LwDis35gs5Zywv0-aTKrkGRfDNvViYVyTV58Bpw2nAJ6wHDEySFRUWQicOp_MQDiw/s479/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOd4Q9CkpkteBfwsEHwoJfgd9ykojQQah_8SLrTCuA6cno7IlAygBQtoJV8yNcETZ1wZUYXmjM-LwDis35gs5Zywv0-aTKrkGRfDNvViYVyTV58Bpw2nAJ6wHDEySFRUWQicOp_MQDiw/s320/3.JPG" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi59rqZzF750y7R217UhbLROk3Jwnuh06CeShlFCRNzS_2vLzR2n_bQCbfawGKx0rVdAL1TKDJIpo1SxszL8Z4gnIA-i0T_QHTwFXqmwp4VWD5WmVhdFGRTR1c30SqpI54akreprp9sGw/s550/a.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi59rqZzF750y7R217UhbLROk3Jwnuh06CeShlFCRNzS_2vLzR2n_bQCbfawGKx0rVdAL1TKDJIpo1SxszL8Z4gnIA-i0T_QHTwFXqmwp4VWD5WmVhdFGRTR1c30SqpI54akreprp9sGw/s320/a.JPG" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_I0xrbYNgd0p0hh2xVhmqHdaz3ak_0I11bBzjw03zu9HVG0A6FpMQeUlqfnNawXr5-NKrKxDT4uF3acqjXik1xasG6NSJyVhmcKu5rAJm-gRr4hG1rwNKqhbR3OcbcTj5MvCYCHbUNg/s545/b.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_I0xrbYNgd0p0hh2xVhmqHdaz3ak_0I11bBzjw03zu9HVG0A6FpMQeUlqfnNawXr5-NKrKxDT4uF3acqjXik1xasG6NSJyVhmcKu5rAJm-gRr4hG1rwNKqhbR3OcbcTj5MvCYCHbUNg/s320/b.JPG" width="320" /></a></div>
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<br /></div>
<div style="color: #660000; font-family: "Courier New",Courier,monospace;">
<span style="color: black;"><span style="font-family: Times, "Times New Roman", serif;"> I hope this example will be useful to to some of people Googling about JFreeChart :)</span></span><br />
<span style="color: black;"><span style="font-family: Times, "Times New Roman", serif;"><br /></span></span>
<span style="color: black;"><span style="font-family: Times, "Times New Roman", serif;">Happy Coding!</span></span><br />
<span style="color: black;"><span style="font-family: Times, "Times New Roman", serif;"><br /></span></span>
<span style="color: black;"><span style="font-family: Times, "Times New Roman", serif;">~Mayuri </span></span></div>
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0tag:blogger.com,1999:blog-4225559480344562942.post-66802688074145172572013-06-07T16:15:00.002+09:002013-07-03T20:30:29.199+09:00BackboneJS Hello World ExampleHello Friends,<br />
<br />
I'm here again with am small yet useful Hello World example of BackboneJs.<br />
<br />
I love to explore and play with various JavaScript Frameworks, JQuery & Zepto being my preferred ones for web as well as phonegap apps I still love prototype and now it was time to experiment with something new and so I tried my hands on BackboneJs and here s the one example I have developed by Goggling and surfing the web.<br />
<br />
Well Backbone attracted myself as I love creating single page web application and in such page organization of the code plays the key role and a lot of chances code becomes messy if more then one developer is involved and then spend hours reformatting the code etc.<br />
Here I felt that Backbone would help! As it provides a proper structural way to organize your code.<br />
<br />
The following example, I have avoided using CSS as I just wanted to show the functionality of BackboneJs,<br />
your web page is divided into 3 sections,<br />
1. Your HTML UI<br />
2. Included JS libs i.e. Backbone uses jquery, underscore and backbone js<br />
3. JavaScript i.e. your actual BackboneJS code goes here...you can always opt using a separate js file for the same.<br />
<br />
Screens For The Example As Follows,<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVvPE5nuxGgE6GvVwj8cH3TYT5RmNvmNjbCyx_pjHDi7liBGr2ZoqUGVEKjDeR1I828qtQpQ5yq29YWXIwXlt8PSDgBWEkve27jC4Cb8W9C0hDfAu7g55V2ccfzadt2nkGybfAkoJTkg/s1600/1.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVvPE5nuxGgE6GvVwj8cH3TYT5RmNvmNjbCyx_pjHDi7liBGr2ZoqUGVEKjDeR1I828qtQpQ5yq29YWXIwXlt8PSDgBWEkve27jC4Cb8W9C0hDfAu7g55V2ccfzadt2nkGybfAkoJTkg/s1600/1.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Fig. 1 Displays Simple Greet Screen</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg50-r-2_DscPBCK5cqKdaF4Oo2V2RGb3geq7Qcsl3mUGSvzt6sEDjwymoay3-1twMnYVZZ8aLsp1E8so7m3K5Mchvcm-CM3VAv5EawLxsVlcpDfZTRtd4RLqi6z707w1Bjj4T5NP6t1w/s1600/2.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg50-r-2_DscPBCK5cqKdaF4Oo2V2RGb3geq7Qcsl3mUGSvzt6sEDjwymoay3-1twMnYVZZ8aLsp1E8so7m3K5Mchvcm-CM3VAv5EawLxsVlcpDfZTRtd4RLqi6z707w1Bjj4T5NP6t1w/s320/2.JPG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Fig. 2 Displays Alert When Clicked On Greet User Button</td></tr>
</tbody></table>
<br />
<br />
Code For The Example Is As Follows:<br />
<br />
<br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b><html></b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b><head><title>Greet User</title></head></b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b><body></b></span><br />
<b><span style="color: #990000; font-family: Courier New, Courier, monospace;"><br /></span>
<span style="color: #990000; font-family: Courier New, Courier, monospace;"> <!-- HTML UI --></span></b><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> <div id="greet_display">Loading...</div></b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> <div id='InputUI'> <br></b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> Name: <input type="text" name="hello_user" /> <br></b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> <br><button>Greet User</button></b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> </div> </b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> <!-- Libraries --></b></span><br />
<b><br /></b>
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> <script src="http:jquery.min.js" type="text/javascript"></script></b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> <script src="underscore-min.js" type="text/javascript"></script></b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> <script src="backbone-min.js" type="text/javascript"></script></b></span><br />
<b><br /></b>
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> <!-- JAVA SCRIPT --></b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> <script type="text/javascript"></b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> var AppView = Backbone.View.extend({</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> el: '#greet_display',</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> initialize: function(){</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> this.render();</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> },</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> render: function(){ </b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> this.$el.html("BackboneJS Greet User Example");</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> }</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> });</b></span><br />
<b><span style="color: #990000; font-family: Courier New, Courier, monospace;"><br /></span>
<span style="color: #990000; font-family: Courier New, Courier, monospace;"> var appView = new AppView();</span></b><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> var UserInputView = Backbone.View.extend({</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> el : '#InputUI',</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> initialize : function() {</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> this.render();</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> },</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> events : {</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> 'click button' : 'sayHii'</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> }, </b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> sayHii : function(e) {</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> alert("Hii "+this.$('input').val() + " !! Welcome To BackboneJS");</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> }</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> });</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> var userInputView = new UserInputView();</b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b> </script></b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b></body></b></span><br />
<span style="color: #990000; font-family: Courier New, Courier, monospace;"><b></html></b></span><br />
<div>
<br /></div>
<br />
In the first Section i.e. HTML UI consists of the first div which displays the title (which is populated in the js section) and then the second div which has the text input where user can enter the name and then a button where the click event is added (in js section), on click of the same an Alert will be displayed for Greeting the user.<br />
<br />
In the JS section, we need to create the backbone js views corresponding to the HTML UI views.<br />
So we have 2 views in JS first view is AppView which is used to populate the title and the second view which has the text input and the button.<br />
Notice the click event attached on the button where its corresponding function is defined which displays the welcome message along with the user input name.<br />
<br />
I hope this example is useful for the people looking for hello world sample for backbone js.<br />
<br />
Thats all for now,<br />
<br />
Happy Coding!!<br />
<br />
~Mayuri<br />
<br />
<br />
<br />
<br />
<br />
<br />Mayuri Ruparelhttp://www.blogger.com/profile/09456357883404463133noreply@blogger.com0