Skip to content
Appcelerator widget for display a tutorial
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
controllers
styles
views
.gitignore
README.md
widget.json

README.md

Widget for display a tutorial

Demonstration

You can test this widget on this link https://github.com/SquirrelMobile/titanium-template-tabgroup

Screenshot

Screenshot

Use it

index.js

var tutorial = Alloy.createWidget("fr.squirrel.tutorial",{
  indicatorSelect : {
    image: "/images/ellipseblue.png"
  },
  indicatorUnselect : {
    image: "/images/ellipseblueinactive.png"
  },
  titleBtnStart: "Suivant",
  titleBtnEnd : "Fermer",
  success : function(e){
    tutorial.close();
  }
});
tutorial.setPages([
  {
    page : {
      image : "/images/photoTutorial1.jpg"
    },
    title : {
      text : "Lorem ipsum dolor.",
    },
    subtitle :{
      text : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin magna eget velit aliquet, id facilisis nulla commodo. Fusce a hendrerit dolor, sed volutpat lacus.",
    },
    logo:{
      image :"/images/logo.png"
    }
  },
  {
    page : {
      image : "/images/photoTutorial2.jpg"
    },
    title : {
      text : "Curabitur scelerisque justo.",
    },
    subtitle :{
      text : "Nam viverra gravida quam varius aliquam",
    },
    logo:{
      image :"/images/logo.png"
    }
  },
  {
    page : {
      image : "/images/photoTutorial3.jpg"
    },
    title : {
      text : "Cras in tincidunt eros.",
    },
    subtitle :{
      text : "Aenean fringilla mi sit amet luctus tristique. Cras ultrices dolor non lacus bibendum tristique.",
    },
    logo:{
      image :"/images/logo.png"
    }
  }
]);

Initialize the widget

var tutorial = Alloy.createWidget("fr.squirrel.tutorial",{
  indicatorSelect : {
    image: "/images/ellipseblue.png"
  },
  indicatorUnselect : {
    image: "/images/ellipseblueinactive.png"
  },
  titleBtnStart: "Suivant",
  titleBtnEnd : "Fermer",
  success : function(e){
    tutorial.close();
  }
});

Properties available:

  • "indicatorSelect" : this property is for edit the page indicator when is the current page.
  • "indicatorUnselect" : this property is for edit the page indicator when is not the current page.
  • "titleBtnStart" : this property is for edit the button title when the current page is not the last page.
  • "titleBtnEnd" : this property is for edit the button title when the current page is the last page.
  • "success" : Event call when we click the close button.

Methods

setPages(argument);

"argument" this argument is a collection of each page in tutorial . You can handle each data with different properties :

  • "page" : this property edit the background photo of the page
  • "title" : this property edit the page's title
  • "subtitle" :this property edit the page's subtitle
  • "logo" :this property edit the logo
close();

close the window

You can’t perform that action at this time.