During the 68th Independence Day, the Indian Prime Minister gave a significant recognition to the IT Professionals for contributing to the growth of Indian economy. We salute the spirit of millions of software developers and hope to continue to make their jobs easier and best of class.
In the month of September, our webinar series will cover the latest technology trends sweeping the development world. Register using the links below:
The audio will be streamed via the GoToMeeting. Use of headset is recommended.
On popular request, we are pleased to bring back our T-Shirt givewaway during each webinar. They now come in new cooler designs that you can wear to show your Ninja pride.
On Jul 31 I presented a webinar titled “Build HTML5 Sites/Apps for Free with Kendo UI Core”. This webinar was part of the monthly webinars we do here in Telerik India. This blog post is a recap of the webinar. You will find the slide deck, video recording and Q&A from the webinar.
Kendo UI core
On April 16th, we i.e. Telerik announced the introduction of an Open Source Software called Kendo UI Core. Kendo UI Core includes 24 of the UI widgets that are found currently in Kendo UI Web and all of the widgets & features formerly available under Kendo UI Mobile. Kendo UI Core also includes the core framework features that are available in Kendo UI for e.g. DataSource, MVVM, SPA etc.
Here is a recap of the questions that we received during the webinar.
Q: Recently Kendo team integrated Angular JS framework in kendo UI core. Is there any dependencies to create Angular JS apps or just include kendo-ui-core.min.js and jQuery.js?
A: You need to have a reference to angular.js script file before referencing kendo script file. That’s the only dependency we have for working with angular.
Q: How can I select only date from the datetime picker control that is without showing default time? A: Date Time Picker is for showing both date and time. If you just need Date, you should try DatePicker widget – http://docs.telerik.com/kendo-ui/api/web/datepicker
Q: How we can implement offline behaviour of application using Kendo UI? A: At the moment we don’t have out of the box support for offline. But you can always cache the data in local storage and use it when offline.
As usual we have picked two winners for our t-shirt giveaway. The following persons will get our .NET Ninja T-Shirt shipped to them.
Chandra Bhushan
Vinay Kumar
Congratulations. We will contact you on our email to get your address and ship it to you. For rest of you, don’t worry – we do have a lot of webinars lined up through the year.
This is a wrap up blog post for my series on mobilizing your SAP data with Kendo UI Mobile. So far I have written 4 parts on this series. Here are the links to the 4 parts of this series:
Here is a quick summary of what we have achieved so far with each part of the blog posts:
Part 1 – We took a look at the SAP demo system, got the credentials for the system and set up our environment to start work on Mobilizing SAP data.
Part 2 – We started out with building a mobile app using Telerik AppBuilder which is part of the Telerik Platform. We understood the project structure and created our first screen – Business Partners Listing.
Part 3 – In Part 2 we had built the listing of Business Partners. In Part 3 we went a step forward and built the Partner Details screen. When a Partner is clicked in the listing, we navigated to details screen.
Part 4 – we built a new screen to add new Business Partner to the system.
Things ahead:
I have provided you the basic structure of the mobile application so far. What you can do is to build upon the same techniques and add additional screens. For e.g. From a Partner details screen, we can navigate to his Orders. From Orders listing screen, we can then navigate to Order details. From Order details we can navigate to Order Item details screen. And in Item details screen we can list all the items in the order as a grid. I leave it up to you to try all this out.
Screen Shots:
Partners Listing
Partner Details
Orders Listing
Order Details
Order Items Listing
Summary:
The primary goal of the 5 part blog series on “Mobilizing SAP Data with Kendo UI Mobile” was to showcase the power of Kendo UI Mobile and the ease with which you can mobilize your SAP data. One of the highlight of Kendo UI is its ability to consume and interact with OData Service endpoint out of the box. It does all the heavy lifting in terms of read, create, update and delete.
Hope this series helps you if you are trying to mobilize your SAP data. If you need further information or want to get in touch with us to help you out – feel free to reach out to me @ lohith.nagaraj@telerik.com.
On Jul 24 2014 we conducted yet another webinar titled “Build a Mobile Dashboard using HTML 5 and Telerik Platform”. This is part of the monthly webinars we do here in Telerik India. This blog post is a recap of the webinar with resource links and video recording of the webinar.
Kendo UI:
Kendo UI is a flagship product from Telerik which is a HTML5 based client side UI framework. It contains Kendo UI Web for web apps, Kendo UI DataViz for Data Visualization and Kendo UI Mobile for Hybrid Mobile Application Development.
Kendo UI
You can know more about Kendo UI here. Also the Kendo UI demos are all online and can be found here.
Video Recording:
We record all our webinars so that if there is anybody who missed attending live, they have another chance to go through the webinar. So here is the video recording of the webinar:
Q & A:
Q: how to contert telerik asp.net web application to mobile compactable?
A: If you are using Telerik ASP.NET WebForms controls it is Mobile ready. If you are developing ASP.NET MVC application, you can use Kendo UI which is HTMl5 based controls set and can run on Desktop Browser as well as Mobile Browsers.
Q: Where can we find kendo chart keywords used in JavaScript?
A: Please refer Kendo UI documentation here.
Q: Can you give me the URL to try App builder directly?
A: AppBuilder is part of our Telerik Platform. Please sign up for Telerik Platform here.
Q: What is the difference with singlepage app and a mobile app?
A: Single Page App or SPA as it is known as is just a pattern that many app developers utilize to build modern day web site/apps and Mobile Apps.
Q: How did u initiate simulator?
A: From the AppBuilder select Run > In Simulator to launch the simulator.
Q: What is the relation between Appbuilder and Kendo UI Mobile chart?
A: AppBuilder is the IDE for Hybrid Mobile App development. Kendo UI DataViz is the data visualization control set to be used in a mobile app.
Q: How we can implement offline behaviour of application using Kendo UI?
A: Kendo UI DataSource in future will provide the capability of offline caching of data. As of now you as a developer will need to take care of caching the data.
Q: Can the Kendo UI support access of Native component of os? like camera , media library etc?
A: Kendo UI is a UI control set and hence wont provide any device capability access. Where as you can use Cordova JavaScript library to access the device capability in your mobile apps.
T-Shirt Winners:
We usually pick 2 random attendees from the webinar and they receive our Telerik .NET Ninja T-Shirts. Following folks are the winners of the t-shirt for this webinar:
Ashok Rapaka
Ajithkumar Rai
Congratulations to the winners. We will contact you to get your address and ship the t-shirt.
This is 4th blog post in the series “Mobilizing Your SAP Data with Kendo UI”. So far we have seen how to set up the environment, create a mobile application and list business partners from the SAP Sales Order System and show a particular partners details. If you want to go through the first 3 part of this series, find the links below:
In this blog post we will be creating a screen to add a new partner to the business partner’s collection. So without much further ado, let’s get on with the business.
Home View Recap:
If you have been following the series, you will know by now that our home view is a listing of the Business Partners in the Sales Order system. In the footer of this view, we had created a tab in the tab strip with an add button. By clicking this add button we will navigate to “newPartnerview.html”. Here is the code snippet of home view:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
The way we navigate to new partner view is just by pointing the href attribute of the anchor to “view/newPartnerView.html”. Kendo will do the navigation to the new screen by adding the default transition that is slide.
New Partner View:
Create a new HTML file in views folder and name it “newPartnerView.html”. We will create the form as below:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Notice that we use the Partner view model as the data model for new partner view. We have placed a save button in the header on the right hand side of the navbar. It is data bound to “add” method on the partner view model. The rest of the form is self-explanatory. Here is the code snippet of add method that we have added on the partner view model:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
In add method, we build a JSON object and make use of Partners view model > partners datasource and call add on data source and tell the data source to sync the changes with the server. That’s all it is there to save a record if you use Kendo UI Data Source.
Update to Partners Data Source:
In part 2 of this series, we had created Partners view model and it had a partner’s data source. At that point we just had Read URL set up. But since we want to create a new record now, we set up Create URL on the data source. Here are the changes to the partners data source:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Notice the addition of create property to transport of Kendo UI data source. We also had to change the read property a little bit. If we have to send a create request to OData service, it is expecting a CSRF token. So, before we issue read instruction, we ask for CSRF token to be sent back to the client, and after read operation is completed, we fetch the token from the header and store it for further use. During create operation, we add the token to the header using the before send method of Kendo UI data source.
Running the App:
Now, our Create New Partner screen is complete. Time to run the app and see the output. Here is the screenshot of the new partner creation screen:
New Partner View
Summary:
In this blog post we saw an entity creation scenario. We created a data entry screen for adding a new business partner to the system. And we hardly wrote any code. With Kendo UI Data Source, handling CRUD scenarios is very easy as the data source does all the heavy lifting.
Telerik provides a plethora of tools for Test Automation including Test Case Management, Functional & Load Testing, Performance Profiling and Mocking. This webinar briefly touches on each of these areas.
The recording for the webinar is as follows:
Free 30 day trials of various products is also available:
This blog post is a 3rd one in the series of “Mobilizing your SAP Data with Telerik Platform”. If you have not read my first 2 parts I suggest you take a look at those first. Here is the link to first 2 parts of this series:
In Part 1 I wrote about how to get started with SAP. In Part 2 I talked about building a mobile app using Kendo UI Mobile. We connected with the SAP data through the OData service that SAP Netweaver Gateway system provides. We were also able to build the first screen of the app namely the Partners listing screen. In this blog post we will look at how to build a screen that shows the details of the selected Partner. Let’s get started
Recap – Partner Item Template:
In the part 1 when we built the Partners listing screen, we used Kendo UI Mobile ListView to list the partners from the system. Each item in the ListView will be rendered by making use of an item template we provided. Just to recap that code, here is the code snippet of the item template:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Notice the usage of data-role=touch on the div and the data bind syntax where we trap the tap event and provide an event handler named “partnerSelected”. Here is the code snippet of the partnersViewModel where we have defined the partnerSelected event handler:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
We saw that we have an event handler which handles the tap event of the partners listing listview. The code just navigates to a new view called partnerView. But the view name is not hard coded. It is coming from appsettings object which contains viewsettings and the value for partnerView. Also notice that we are passing the currently selected partner UID in the querystring. UID is the unique identifier that the Kendo UI Data Source maintains for each item in its data collection. We will use this information to get a single partner object from the collection using datasource method getbyid().
First let’s update the appsettings.js with viewsettings data. Here is the code snippet:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Notice that we have the URI of the new view set to “views/partnerView.html”. Let’s create a new folder under the root of the project by name “views” and create a new html file called “partnerView.html”.
Partner View Screen
When you add a new HTML file, the file content will have bare bone HTML code. Remove that basic HTML code as we don’t need that. Next we will create the partnerView UI.
Partner View UI:
As part of the partner view screen, we will just list out all the details of a partner like name, email, phone, address, etc. Here is the code snippet of the partner view:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Let’s go over the code once. It’s a simple div with its data role set to view. This is how Kendo UI knows that this is a page or screen in the app. We are trapping the show method of the view through data-show attribute and is bound to Partner object’s show() method. We will see the partner object in next section. Then we have spans to output different property of the partner and we have data bound different properties to the text property of the span. Next let’s take a look at the Partner JavaScript file.
Partner JavaScript Object:
In previous section we saw that the partner view screen is data bound to partner JavaScript object. Create a new JavaScript file named “partner.js” in scripts folder. And paste the following code in the script file:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Pay close attention to show() method. Remember that when we navigate from the partners listing screen, we had passed a querystring value which was the UID of the partner object. Here in partner view show method, we retrieve the UID and piggyback on app.Partners.partners data source and use the data source method getByUid() to retrieve the partner object. Once we get the object we use kendo.bind() method to data bind it to the view. With this the view at runtime get data bound with the partner object and the spans will show the appropriate data as they have the data-bind syntax.
Running the App:
One last thing to do is adding a reference to partner.js. Add a script reference to partner.js in the script block of index.html. After adding the reference, select Run > In Simulator from the toolbar. Here is the screen shot of the partner view:
Partner Details Screen
Don’t question me on the UI – I am a design handicap when it comes to UX. But we now have 2 screens as part of the application itself. We now have the Partners Listing screen and Partner Details screen. And we are making progress.
Summary:
In this blog post we looked at how to create Partner details screen. We created a HTML page and a corresponding JavaScript file. With the concept of DataBinding we were able to bind different properties of a Partner object to different span on the view. In the next part of this blog series, we will take a look at how to create a new partner right from the mobile app itself. So stay tuned.
The Union Budget 2014 has been announced. Individual tax payers are getting additional money in their hands. As you open up your calculators for counting the monies, you may want to budget some time for enhancing your learning with Telerik India Webinars. We don’t want you getting drenched in the monsoon rain. These free webinars can be attended from the comfort of your home/ office.
The webinar schedule for July & August is as follows:
This is the second post in the series of “Mobilizing Your SAP Data with Kendo UI Mobile”. If you haven’t read my first post, it’s a good idea to read it now and can be found here. In the first post I talked about getting the environment ready. In this second post I will be writing about how to create a mobile application with Kendo UI Mobile for the SAP data. So if that’s sounds interesting to you, stay along with me for the rest of the blog post.
Get the tools of the trade:
As part of Telerik Platform, we offer a service called AppBuilder. AppBuilder is a complete IDE for building a Hybrid Mobile Application using Kendo UI Mobile. Using AppBuilder you can build iOS, Android and Windows Phone 8 hybrid mobile apps using a single pure HTML5, CSS & JavaScript codebase. Kendo UI Mobile is an adaptive rendering Mobile control set that will be used for the UI elements of the mobile app. You can know more about Kendo UI Mobile here. Visit the AppBuilder product overview page and sign up for a trial. You will have 30 days to try out AppBuilder and post that we will downgrade you to a starter tier. In starter tier you are allowed to build only 2 Mobile apps.
Telerik AppBuilder
IDE Choices:
AppBuilder provide 5 IDE choices and you can choose the one that suits you best. Here are the choices:
In-Browser Client – develop hybrid mobile apps on the go with a web client that runs on all browsers
Command-Line Interface – access AppBuilder capabilities from command line on Windows or OS X
For the sake of this blog post I will be using the Windows Client of AppBuilder. I already have signed up for Telerik Platform and I have created a workspace in the Platform and will create a new hybrid mobile app in that workspace. To know more about the Telerik platform, check our documentation here.
Create a Mobile App:
Now that we have the required tool for creating an app, lets get going. I am assuming at this point of time you have the AppBuilder Windows Client installer. Launch the AppBuilder windows client application. Since this is the first time, it will ask you for your Telerik Platform credentials.
Telerik Platform Credentials
Once you log in with your credentials, you will be presented with a “New” project creation dialog. From here you can select “Hybrid” > “Kendo UI Mobile App”. Provide a name for your mobile app and click create.
AppBuilder New Project Dialog
Here is the project structure that the IDE creates. Notice that Kendo UI Mobile control is added by default as we had selected Kendo UI Mobile App.
AppBuilder Project Structure
When you create a new project, IDE adds a dummy application out of the box. The app contains Home, Login, Location and Weather screen. In the scripts folder, you will find four scripts namely app.js, location.js, login.js and weather.js. The app.js contains the Kendo Mobile app creation code and other script files for the respective screens. At this moment if you just run the app by selecting Run > In Simulator or by pressing F5 in the IDE, you will see the following output:
Kendo UI Default Mobile App
We will clean up whatever default code has been created and start building our UI for Sales Order application.
Creating Mobile Application Layout:
Open the index.html and clear off everything that was added by default. Keep the reference to Kendo UI stylesheet, Cordova JavaScript file, jquery and app.js and remove rest of the things. The index.html, after the changes should look like below:
Cleaned Up Index Page
Now that we have a clean slate, let’s get started with our UI building process. First we will create a mobile layout that is required for our app.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Let’s go over the code. We have a div whose data role is set to layout and we have given it an identifier. Then we create a header div and place a navbar inside it. Navbar will contain a place holder for the title that will be shown for the current active screen. The keywords “layout”,”navbar” and “view-title” are Kendo UI specific and the Kendo UI Mobile app engine understand what needs to be done. Now that we are done with the markup for layout, we need to let Kendo UI mobile app engine know that it has to use this layout as a default layout for the app. Open app.js and replace the following code:
app.application = new kendo.mobile.Application(document.body, { layout: “tabstrip-layout” });
with
app.application = new kendo.mobile.Application(document.body, { layout: “applayout” });
Next we will create our first screen in the app which will list all the partners in the Sales Order system
Create Partners Listing Screen:
The Sales Order System that we are using for this demo app has a Business Partners endpoint and lists all the partners in the system. So our first screen would be to list all partners alphabetically as a mobile list view. So let’s start coding. First let’s create a view and within the view we will keep mobile list view. I will used MVVM pattern and create a view model for this screen. The Kendo UI Mobile Views provides a way to bind the view model to the view itself. Here is the markup for the view:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
It’s a simple div with a data role set to “View” and data model set to “app.Partners”. We will create the Partners view model next. Then I have a header where I have the navbar with a title. Then I create a mobile list view with an unordered list. By setting the data role of <ul> as listview, Kendo UI engine will work its magic at runtime and convert the <ul> to a mobile list view. The mobile list view requires item template which we will have to create next. The data source to listview is set to “partners” property on the view model.
Partner Item Template:
For the list view to display each item, it needs a template to be provided. Here is a simple template I have created:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
You will notice the usage of ${} syntax. It is Kendo UI template syntax where you are telling the rendering engine that at run time it has to get the value of the property of the currently bound data object and emit that into the template.
Partners View Model JavaScript File:
We will create a view model which exposes the business partner’s related functionality like listing and details of a business partner. Add a new JS file in the Scripts folder and name it Partners.js. Here is the code snippet for the view model:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
As of now it’s a place holder and we will build the functionality as we proceed further.
Partner Data Model Object:
I will model the Business Partner entity that is exposed by the SalesOrder system as a JavaScript object in the partners.js file. Here is how my JavaScript object looks like:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Next we need to create a data source to connect to the OData service exposed by the Sales Order system. I am using Kendo UI Data source as my data source in the application. In order to read data from a service end point we need just set the URI on transport > read property of the data source. I will add this to partner data model itself. Here is the code snippet with the data source added:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Believe it or not, that data source is all you need to connect to any service which returns data in JSON format. Notice that for reading a service I am making use of a appSettings object. That is nothing but a simple JavaScript file with a bunch of settings. We will shortly take a look at that.
Partners View Model Object:
Now that we have the Partner Data Model and Data Source ready, we now create the partners view model which will expose a property called partners and partners is nothing but the instance of the kendo UI data source in the partner data model object. Here is the code snippet:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Here is the complete code listing of Partners.js we have implemented so far:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
In the code snippet for data source, the URL to read data was got from data settings of appsettings object. I have created a new JavaScript file “settings.js” in the scripts folder. Here is the code snippet for the same:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Now that we have finished creating the pieces of the application there is one last thing to do. We need to add reference to partner.js & settings.js in index.html. Once we add that, just press F5 on the IDE and the simulator will simulate the app we just built. Here is the screen shot of the app being simulated in iOS platform:
Business Partners Listing Screen
Wrap Up:
We have successfully created a mobile app which connects to a SAP backend and in particular a Sales Order system using Netweaver Gateway OData service and built a listing screen in the app. The listing screen is listing the business partners that are available in the system. One thing to note is how easy it was to create the app. The main point of this whole exercise is that of the Kendo UI Data Source which makes it super easy to connect to a service end point, invoke, retrieve data and bind it to the control. I didn’t sweat a lot to achieve this. So this is a good starting point. Next up we will create the Business Partner Details page. Stay tuned till my next blog post.
I was reading this excellent article by Gouri Sohoni comparing various automated testing tools. The article is an excellent introduction to automation in testing and the various tools available to do the same. She compares the following tools: Selenium, QTP (Quality Test Professional) and Coded UI Test (CUIT) with Visual Studio 2012. I am taking this opportunity to extend the article and include Telerik Test Studio in the mix.
The following is written in the same format followed by the linked article:
Ease of Use
– Recording and Playback Functionality
Test Studio supports recording on various browsers i.e. IR, Chrome & Firefox. All the scripts can be played back on different browsers too.
– IDE and tools with which the tester can write the scripts
Test Studio comes with its own IDE and also integrates with Visual Studio. You can use Test Studio as a standalone IDE for recording and writing scripts or from within Visual Studio.
– Ease of Test Case execution
Test Studio test cases can be run from within Test Studio or using the Test Studio scheduler. The scheduler can be used to run all test suites or selected test cases at pre-defined schedule. Integration with CI tools is also supported via a command line test runner.
Platform Support
-Language Support
Test Studio doesn’t require you to write code in a lot of scenarios. However, if you do need to it supports C# and VB.NET.
– Support for various application types
Test Studio comes with testing for web applications, Silverlight applications, web services, mobile devices and WPF applications.
– Support for various browsers
Test Studio supports recording and playback in almost all browsers – IE, Chrome, Firefox and Safari.
– Support for Data Driven Testing
Test Studio supports Excel, XML, CSV and Databases (MS SQL Server, Oracle, MySQL and any QLEDB or ODBC supported DB) for data driven testing.
– Exception Handling
You can configure Test Studio to ignore all errors that happen during a test execution. If unexpected situations are expected to occur in a test suite you can convert them to Coded Steps and then use try and catch blocks for exception handling.
– Validations or Assertions
Test Studio supports Verify and Wait without need for writing any code. Any assert can also be included as needed using coded steps.
– Support for Objects
Test Studio has a unique Object Finder UI called DOM explorer that helps you locate elements on the application being tested easily. You can also customize the names and the locator logic that is used to identify the object.
Integration with Application Lifecycle Management and going beyond
– ALM Integration
Test Studio integrates with Telerik TeamPulse, HPs Quality Center and Microsoft TFS. Integration with TeamPulse allows for bug submission and linking test cases to its automation script. All the features of TFS are also available if you utilize the TFS as the ALM tool.
Additionally, submission of bugs is also supported for JIRA.
– Going beyond
Test Studio can easily automate JavaScript based applications. Special constructs like “Simulate RealTimeClick” and “Simulate RealTimeTyping” makes this possible. Test Studio provides you the capability to convert your functional tests to load tests. It also has the capability to take the workload from Fiddler traces and run it in Test Studio for performance test.
The RoI for the tool is enhanced as it is also available in the pay per use model. The minimum time that you need to buy Test Studio for is 1 month.
On Jun 26 2014, we presented a webinar titled “Mobilizing Your SAP Data with Telerik Platform”. This was part of our regular webinars we do here in Telerik India. This is a recap of that webinar. You will find the slide deck that was used in the webinar and the video recording of the webinar.
This webinar we focused on a enterprise story. Most of the enterprises today have SAP rolled out in their organization. As you all know SAP is a enterprise software to manage business operations and customer relations. One of the challenges that enterprises face is – how to mobilize the SAP data. You may want to expose the SAP data and make that data available through a Mobile Application so that people on the field can use it.
In this webinar I explain how you can expose data from SAP and use Kendo UI Mobile controls which are part of Telerik Platform to create a Hybrid Mobile App and target it to any mobile platform.
Telerik Platform
Slidedeck:
Here is the slide deck that was used in the webinar:
Video Recording:
Here is the video recording of the webinar:
T-Shirt Giveaway:
As with any other webinars of ours, we have 2 lucky audience selected to receive our .NET Ninja t-shirt. Here are the 2 attendees who have been choosen:
Eknath Pawar
Ujjwal Kumar
Congratulations to the winners. We will contact you and ship your t-shirt. Others don’t worry as we still have a lot of webinars lined up. We look forward to your presence in our future webinars.
On Jun 19 we conducted a webinar titled “Build Hybrid Mobile Applications for Nokia Lumia Devices”. This was part of our monthly webinar we do for APAC region. This blog post is a recap of the webinar and you will find the slide deck used in the webinar, video recording of the webinar, Q & A section and of course the t-shirt winners details. So read on.
AppBuilder
As part of the demo I used our AppBuilder Visual Studio extension to build a Hybrid Mobile App. AppBuilder is a service we offer as part of our Telerik Platform. Using our AppBuilder you can build iOS, Android and Windows Phone 8 hybrid apps using a single pure HTML5, CSS and JavaScript codebase. You can know more about our AppBuilder here. We use our Kendo UI Mobile control as the UI control set. Kendo UI Mobile is a adaptive rendering mobile control which provide native looking UI on platform they run. You can know more about Kendo UI here.
Telerik AppBuilder
Slidedeck:
As with any webinar recap, here is the slide deck from the webinar:
Video Recording:
Q&A:
Q: What is difference between mobile app and hybrid app?
A: Hybrid App is a paradigm or a type of Mobile Application Development technique
Q: Can mobile web apps run without net connection also what about hybrid apps?
A: Mobile Web Apps are served from a server. So if there is no internet connection on the device, you can connect to your mobile web app. Where as a Hybrid App gets installed on the device. So you can pretty much handle the scenario of no connection and show a user friendly message.
Q: What is the basic Diff. B/w cordova (Phonegap) and Telerik Hybrid Mobile Developement?
A: Telerik Hybrid Mobile Apps use Kendo UI Mobile which can adapt to the platform they are running on and provide you a native look and feel for your app. Where as when you develop an app with Cordova, you will be using UI control sets like Jquery Mobile UI.
Q: Is Cordova a standard API across all hybrid applications OR do other equivalent APi’s exist?
A: With respect to Hybrid Mobile Apps, Cordova is the only JS API which can provide you with the device capabilities.
Q: How many platforms can we target?
A: Windows Phone, iOS, Android and BlackBerry
Q: How much effort is required to repackage for diff platforms?
A: Using AppBuilder, you can package for iOS, Android and Windows Phone with one Button click.
Q: Are these controls free of cost?
A: The Kendo UI Mobile controls are free and open source. They are available as part of the Kendo UI Core. You can know more about Kendo UI Core here
Q: Can we develop for BlackBerry using Kendo UI ?
A: Yes you can. Kendo UI Mobile controls support Black Berry platform.
Q: Is AppBuilder only for creating hybrid apps and that too using Telerik?
A: Yes. AppBuilder is like Visual Studio for creating Hybrid Mobile Apps. AppBuilder can be used to build Hybrid Mobile App using any UI control set. For e.g. you can use Jquery Mobile as the UI control set for your application but use AppBuilder for coding, simulating and Building
Q: Does AppBuider work with VS 2012 as well?
A: Yes it does
Q: Can we add other plugins to this Kendo UI Mobile App?
A: Yes. Custom Cordova plugins can be added to Kendo UI Mobile Apps
Q: Does we have manifest file to put icons and dev information?
A: AppBuilder provides a project property feature where all meta data can be entered and during packaging it will convert it into a manifest.
Q: Where can i check other demos or source codes for mobile?
A: We have a whole list of Hybrid Mobile Application samples and can be found here.
T-Shirt Giveaway:
In each of our webinars, we give away our famous .NET Ninja t-shirt for 2 lucky audience. So in this webinar we have picked the following two folks as the winners of our t-shirts:
Ruth Pushpalatha
Rohit Vardhan
Congratulations to the winners. Those of you who did not win, dont worry. We have a lot of webinars lined up for the year. So keep coming back and try your luck.
On Jul 12 2014, we conducted a webinar titled “Integrate Video and Photos in your ASP.NET applications with ease”. This is part of the monthly webinars we have been doing here in Telerik India. This blog post is a recap of that webinar.
RadImageGallery & RadMediaPlayer:
As the name goes, RadImageGallery can be used to create Image Gallery in your apps with minimal coding. Similarly, RadMediaPlayer can be used to create a YouTube like Media Player with minimal coding. Both of these controls are part of our “UI for ASP.NET AJAX” suite. If you are not familiar with our “UI for ASP.NET AJAX” suite of controls, head over to our product overview page here.
UI for ASP.NET AJAX
You can know more about RadImageGallery here and about RadMediaPlayer here.
Slidedeck:
Here is the slide deck that was used in the webinar:
Video Recording:
We record all our webinars and the videos are available for on demand viewing. So here is the video recording of this webinar:
Q & A:
Q: Is the library of these controls free to download or require any license?
A: A trial of 30 days is available. This is a paid product from Telerik
Q: Does it take Images from online services/providers like Flicker/OneDrive and stream here in control?
A: Both of these controls provide a feature of binding data from the client side. So you can get the data as JSON on page load and bind it to the control client side.
Q: Can we have this Image Gallery in MVC?
A: No. This is a ASP.NET AJAX control. Cannot be used in MVC.
Q: does RadImageGallery provides paging?
A: Yes. RadImageGallery supports the paging
Q: Can we specify how many thumbnails to show/ or customize thumbnail settings?
A: RadImageGallery provides a thumbnails settings where we can set Width, Height, Thumbnail Width, Thumbnail Height and Thumbnail spacing.
Q: How to get and integrate these controls to Visual studio?
A: Download the controls from http://www.telerik.com/products/aspnet-ajax.aspx. Run the Installer and that will integrate the controls in the control toolbox. Go ahead from there.
Q: Can we incrase the size of the preview display and keep the thumbnails in different dimensions?
A: Yes. RadImageGallery provide Image Area Settings and Thumbnails Area Settings.
Q: Can we give the source dynamically to the rad media player?
A: Yes. The data can be bound to RadMediaPlayer through code also.
Q: Does it require any media player to be installed at client side like Silverlight/Adobe media player?
A: No. RadMediaPlayer uses the build-in HTML5 <video> and <audio> element functionality to bring powerful media capabilities to your apps without the necessity of installing additional plug-ins. It provides a quick and easy to setup way to deliver rich media web experience for websites, blogs, online TV channels, e-commerce pages, etc. For older browsers which don’t support HTML5 natively, Internet Explorer 8 and 7 in particular, the player provides a Flash fallback method to play the video or audio file by rendering a Flash object.
In our webinars, we usually give away 2 t-shirts to 2 lucky attendees. We randomly pick from the webinar attendees and they get our .NET Ninja T-Shirt. In this webinar, the winners are:
Ashish Bhat
Surya Vinukonda
Don’t worry if you didn’t win the t-shirt. Try your luck in our next webinar.
Over the last couple of years that I have been evangelizing for Telerik, I have met a lot of customers and in particular enterprise customers. Most of the big enterprises have SAP deployed in their organization. This gives them the flexibility of having point to point information with respect to their projects or revenue or even an employee. In short SAP is one of the widely used system in enterprises. But it comes with its own environment and applications. The number one question from enterprise customers for us has always been “how does your offering work with SAP?” A fair question especially when it comes to engaging with a third party vendor. This question was more of a high priority question when it came to Mobile teams in the enterprises. How soon can you go to market with an application and expose the SAP data.
The questions from the enterprises led me to write this 2 part series on how to mobilize your SAP data. This blog post is the first in this series and below is how I have planned out the 3 part series blog post:
Mobilizing Your SAP Data with Kendo UI Mobile – Get the Environment Ready – Part 1
Mobilizing Your SAP Data – Mobile App Development – Part 2
If you are as excited as I am, then be with me in this journey of 2 blog posts. So let’s get started.
What is SAP ERP?
According to the dictionary of the web i.e. Wikipedia, SAP ERP is defined as follows:
SAP ERP is an Enterprise Resource Planning software which provides an integrated solution that incorporates key business functions of an organization.
I will not be delving too much in to SAP as a software as that is not the intention of the blog post. Now that we know what is SAP let’s see how to expose data from SAP so that applications outside of SAP can consume them.
SAP Netweaver Gateway:
In order for the SAP data to be exposed to outside world you use a technology called SAP Netweaver Gateway to develop REST based ODATA services. According to SAP, Netweaver Gateway is defined as:
Technology that provides a simple way to connect devices, environments and platforms to SAP software based on market standards.
SAP Netweaver Gateway offers connectivity to SAP applications using any programming language and you do not need to have SAP knowledge. SAP Netweaver Gateway leverages the REST Services and OData/ATOM protocols for data exchange.
SAP Netweaver Gateway System
Again I won’t be getting into too much details as to how you do this. SAP Community Network (SCN) has tutorials on how to do this.
SalesOrders All the Sales Orders can be read using this collection
SalesOrderItems Items of a Sales Order can be read from this collection
Products Collection of products which can be purchased
BusinessPartners Collection of Partners with whom the company does transaction
Setting Up Reverse Proxy:
Services exposed by SAP Netweaver Gateway Demo system are all protected and need credentials to access them. In the previous section we talked about getting access to the demo system. During that process you would have used a username and password. You need the same credentials to authenticate against the demo system when querying for data.
In order for us to perform full CRUD on the demo system we will need to setup a reverse proxy in order to overcome the Same Origin policy restriction. A reverse proxy should be used for sending client HTTP requests designated to its domain to the correct server. Reverse proxy can be achieved in 2 ways. They are:
We can also create a simple reverse proxy using ASP.NET Web API.
Reverse Proxy using ASP.NET Web API:
A simple reverse proxy can be easily created using ASP.NET Web API. Idea is to create a Web API and pass the SAP URI we need query data as a query string parameter. The Web API will read the query string value and use that as a URI to connect to the SAP Service. Response from SAP Service will be relayed back to the client as JSON. Following code snippet shows the Web API Controller and in particular the Get action method:
public class ProxyController : ApiController
{
string username = "<username>";
string password = "<password>";
// GET: api/Proxy
public async Task<JsonResult<string>> Get(string url)
{
var sapUri = new Uri(url);
using (var client = new HttpClient())
{
var base64String = GetBase64String(username, password);
client.DefaultRequestHeaders.Add("Accept", "application/json");
client.DefaultRequestHeaders.Add("Authorization", "Basic " + base64String);
var response = await client.GetAsync(sapUri);
HttpContext.Current.Response.StatusCode = (int)response.StatusCode;
return Json(await response.Content.ReadAsStringAsync());
}
}
}
Instead of querying the SAP service directly from the mobile application, we will querying the proxy we just created above and pass the SAP service URL as a query string. Here is the usage:
Notice that we pass an Authorization header when making a request. SAP Services expect an authorization header and we pass the username:password string converted to base 64 and pass it as a request header. I have showed the example of a Read or Get. But on the similar grounds you can create the Create/Update/Delete actions also.
Summary:
With this blog post we start a journey to read data from SAP and use that data in a mobile application. As a first step we learnt that SAP data can be exposed to outside world using the SAP Netweaver Gateway system. We looked at various the demo services and picked the Sales Order system as a candidate to build the mobile app. In next post we will create a mobile application using Kendo UI Mobile framework and Telerik App Builder.
Recently I was browsing MSN India when I encountered a dead link by clicking on a story. How embarrassing!
That set me thinking that there should be a way to automate checking the URLs that are displayed on this content aggregation portal. I think the same is true for all portals that rely on external content for their functionality.
Below, I propose a mechanism to automate testing of such requirement. Some peculiarities of this web portal:
The news article displayed is changed frequently (maybe every few hours)
Alongwith the news article text, the URL of the article will change
We need to verify that the URL is a live URL
We will be using Telerik Test Studio v 2014.1 to do this test. We can start by creating a new project in Telerik Test Studio:
Click on OK.
Right Click on the project name and create a new test of type Web Test. Call this Sports_Section_MainStory_Verification Test.
Double Click on this test to start recording this test. You should be in the “Test” section of the Ribbon. Click on Record button located at the top.
Select the browser you want to record the test in (I am using Internet Explorer):
This will launch a new IE window with automation enabled (notice the small toolbar on the top of the screen). Now type in the MSN URL: http://www.msn.com and press enter.
Click on “Enable/Disable Hover Highlighting” icon on the Test Studio toolbar. Hover over the Sport Section Main Story Headline (shown in the screenshot below):
Clicking on the blue bubble exposes the “Element Menu” from where you should select “Add to Project Elements”:
Name the element appropriately and click on Add Element:
Now close the browser. We will be working with this element in coded steps. The first step is to correct the identification logic of this element. Go back to Test Studio and highlight the element in the “Element Explorer” of Test Studio:
Right Click and select “Edit Element”. Click on “Find in Live Version” -> New Browser -> Browse and Navigate”:
This will open a new automated window in a browser. We are interested in the “Find Element” window:
Notice the suggestions pane in the left of the screen. We are going to be using HtmlPath this time. Click on HTMLPath to add it to the right section of the screen. By clicking on the one logic present in the right section, you will be able to delete the same. The screen should now look like:
Click on Save to return to the Test Studio. Now add a coded step in Test Studio using the Add menu -> Script Step:
We are going to use C# to author our scripts. Please select C# in the next window. In the bottom pane of Test Studio, you will be able to write your script. A single line of code will do:
Next we will need to add Reference to System.Net namespace. To do that go to Project menu ribbon and click on settings:
Click on Add Reference and select the System.Net.dll located here: C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\v3.5
Then Click on Open, followed by OK in the Project Settings Window. Next, click on the below shown icon to view the entire code behind file in the “Code Viewer” section.
Scroll to the top of the code file, and add:
using System.Net;
Next add a new coded step and copy the following code there:
Save the test and Run the test by using the Start button. The test would pass!
Congratulations, you have now automated verification of dynamic content with its associated URL using Test Studio. One can similarly author different tests for each section of the webpage and accordingly verify of the links are active.
If you want to take the next step, think about data driving the find expression of each of the elements. Interesting??
During the 68th Independence Day, the Indian Prime Minister gave a significant recognition to the IT Professionals for contributing to the growth of Indian economy. We salute the spirit of millions of software developers and hope to continue to make their jobs easier and best of class.
Helping Ninja Technologists 