Explore Sitecore

Monday 14 November 2016

Getting Started with Jasmine

Before Going to start i would like to tell you that you can setup jasmine test framework with three way on your project.

So i am going to start explaining and also show you snapshot and setup jasmine parallely

Way.1
Jasmine Test Framework with Visual Studio :

to begin setup i would like to tell you prerequisite to work with Jasmine

you should have
Visual Studio 2012 or more
ASP.NET MVC 5.0
Jasmine Test Framework

Now make sure that you are going to create .NET 4.5 project otherwise NuGet package manager will fail during installation process.

Create A Project:

create blank web application project.
and create directory named as App Start, Content, Controllers, Views, Models, Scripts
at root level.

now on top left select third icon View->Other Windows->Package Manager Console

and run this command

Install-Package JasmineTest

Hey wait guys, don't be hurry because we need to tell server that what to do when we request
which can be we do with creating RouteConfig.cs class inside App Start

and put this code there

public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Jasmine", action = "Run", id = UrlParameter.Optional }
            );
        }

under the class.

And now add Global.aspx to project

and make entry this code under global class

protected void Application_Start(object sender, EventArgs e)
        {
            RouteConfig.RegisterRoutes(RouteTable.Routes);
        }

Now create web.config under views direcotry
and paste the code


<?xml version="1.0"?>
<configuration>
  <configSections>
    <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
      <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    </sectionGroup>
  </configSections>

  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>
</configuration>

now run the project

Sunday 25 September 2016

carousel with angular material 2

Owl-carousel with material 2:
Myself Pradeep (Sitecore Developer & Angular Material Designer)

You are thinking why we want our own custom carousel with material 2, Because
there is no component for carousel by angular material 2 team.
And i want in my website thats why i am here....
So lets start
In previous blog i just tell you that how to setup material 2
and now i am going to create new component with material 2 for carousel.
to get source code for carousel component Source-code
first i am running my repository

and now its running successfully...

and i will be add carousel component in this button-toogle of demo-app web application.

So be careful and see all the snapshots and if any problem then please comment....
now open your repository with any IDE but i am using visual Studio Code because of intellisense

To create new component with material 2 you must come inside lib directory (src/lib)

now copy any component to create your own component with existing structure.... as i

paste inside lib directory and rename with carousel to all file

now start from down to up so first open package.json where all the setting about component and now all with carousel as i

now open index.html and rename with carousel

now open carousel .ts and remove all the code except basic requirement and rename module with MdCarouselModule

next open carousl.scss and keep it empty for future change

now in last open carousel.html and make entry for dynamic markup

now it's time to make entry inside dictionry that you have new component for this we expand all directory and open all.ts

and make entry for carousel

and scroll down make this entry also

this is also and after all this save file

and now open system.config.js inside lib directory and make entry for carousel

and make entry for external for owl-carousel.js and also map entry after that save file.

now for some moment please revise and check that everything done without any issue.if you have any issue till now then please comment with tag:1 i will understand in which part you are getting problem

Now i am going to use this component inside other project in sample project we have demo-app site
before start first go inside demo-app and open system.config and make entry for carousel to use inside this project