Skip to content

Template Application Axway Appcelerator Titanium Mobile SDK with native tabgroup navigation

License

Notifications You must be signed in to change notification settings

SquirrelMobile/titanium-template-native-tabgroup

Repository files navigation

Template Application Axway Appcelerator Titanium Mobile SDK with NATIVE tabgroup navigation

Template Titanium mobile tabgroup navigation

Template Titanium mobile tabgroup navigation

Handle fonts

  1. Place all your font on app/assets/fonts folder.
  2. For cross-plateform, name your font as the PostScript name, more info here : http://docs.appcelerator.com/platform/latest/#!/guide/Custom_Fonts-section-src-29004935_CustomFonts-RenamefontfiletomatchPostScriptname

Use Awesome / Material fonts

Handle assets images

  1. Install ticons package https://www.npmjs.com/package/ticons [sudo] npm install -g ticons
  2. Create all images in app/assets/iphone/images/ (you can create subfolder if you want) at @3x format then run ticons assets on your project

JS-Duck install for documentation

  1. [sudo] gem install jsduck
  2. Go into folder dossier .npm => /Users/[USERS]/.npm/ then run npm install git://github.com/jamilhassanspain/titanium-jsduck.git
  3. On the root folder of the project, initialize JSDUCK with titanium-jsduck install (that's create folder docs/ and a file named alloy.jmk)
  4. Run the documentation with : titanium-jsduck run

Form generator

Form generator contains 15 types of fields, you can create a form with only the form in xml and object in tss like this :

login.xml

<Alloy>
	<Window id="win">
		<ScrollView class="container">
			<Require src="/component/form" class="defaultForm" id="form"/>
		</ScrollView>
	</Window>
</Alloy>

login.tss

'#form': {
  champs : [
  {
    id: "email",
    title : {
      text : "Email",
    },
    textField : {
      hintText : "type your email",
    },
    type : "textFieldEmail",
    required : true,
  },
  {
    id: "password",
    title : {
      text : "Password",
    },
    textField : {
      hintText : "type your password",
    },
    type : "textFieldPassword",
    required : true,
  },
  {
    id: "valid",
    button : {
      top: 10,
      backgroundColor: Alloy.CFG.COLORS.main2,
      width: 185,
      bottom: 10
    },
    label : {
      text : L('connect'),
      color: "white",
    },
    type : "valid",
  }
  ]
}

in js you can get handle field with :

var champs = $.form.getChamps();
champs.textFieldGenericPopup.callback = function(e) {
  champs.textFieldGenericPopup.setValue(e.title);
};

Result :

result

Globals

By default the form use property in app.tss ".defaultForm", so don't forget to add class in xml component :

<Require src="/component/form" class="defaultForm" id="form" />

Properties for each fields :

TitleButtons

  • parent : set view properties of view parent (white border in the screen)(Ti.UI.View), example :
parent: {
	top: 10;
}
  • title : set label properties to the title above textfield (red border in the screen) (Ti.UI.Label), example :
title: {
  bottom: 5,
  left: 0,
  color: "white",
}
  • container : set view properties to container view of the field (light red border in the screen)(Ti.UI.View), example :
container: {
  height: 50,
  backgroundColor: "white",
  borderColor: "red",
  touchFeedback: true,
  width: Ti.UI.FILL,
}
  • buttonIcons : set view default properties to the buttons left/right (blue border in the screen) of the field (Ti.UI.Button), example :
buttonIcons: {
  font: { fontFamily: "FontAwesome5Pro-Solid", fontSize: 16 },
  color: Alloy.CFG.COLORS.black,
  width: 40,
  borderColor: 'blue',
  height: Ti.UI.FILL,
  backgroundColor: null,
}
  • fieldView : set view properties to the view container of the field type (between buttonIcons) (Ti.UI.View), example :
fieldView: {
  font: { fontFamily: "FontAwesome5Pro-Solid", fontSize: 16 },
  color: Alloy.CFG.COLORS.black,
  width: 40,
  borderColor: 'blue',
  height: Ti.UI.FILL,
  backgroundColor: null,
}
  • required : set the field required so if you valid the form it check if the field is not empty

  • groupId : set the groupId fields

groupId

You can set multiple fields with the same groupId for getting a horizontal layout with fields

example for have the same result in photo :

{
  id: "username",
  title : {
    text : L('form.username'),
  },
  textField : {
    hintText : L('form.username'),
  },
  container : {
    right : 5
  },
  type : "textField",
  required : true,
  groupId: 1
},
{
  id: "email",
  title : {
    text : L('form.email'),
  },
  textField : {
    hintText : L('form.email'),
  },
  container : {
    left : 5
  },
  type : "textFieldEmail",
  required : true,
  groupId: 1
},
{
  id: "password",
  type : "textFieldPassword",
  title : {
    text : L('form.password'),
  },
  textField : {
    hintText : L('form.password'),
  },
  required : true
},

Differents types field

Properties for all "textField" type :

textField

textField

Get a simple textfield

Properties :

- textfield : access to textField view (Ti.UI.TextField)

Exemple usage :

{
  id: "example",
  title : {
    text : "example",
  },
  type : "textField",
}

textFieldDate

date

Get a field with a fake textfield, when you click it opens a popup allowing to set a date

Properties :

- textField : access to Label view (Ti.UI.Label)

Exemple usage :

{
  id: "birthday",
  title : {
    text : "Birthday",
  },
  textField : {
    hintText : "type your birthday",
  },
  type : "textFieldDate"
},

textFieldEmail

email

Get a simple textfield with icon mail and keyboardType mail Properties :

- textfield : access to textField view (Ti.UI.TextField)

Exemple usage :

{
  id: "email",
  title : {
    text : "Email",
  },
  textField : {
    hintText : "type your email",
  },
  type : "textFieldEmail",
  required : true,
}

textFieldGenericPopup

generic

Get a field with a fake textfield, when you click it opens a popup with a controller in params Properties :

- dialog : set the dialog properties (Dialog object)
- callback : set a callback get data in controller (callback function)

Dialog object :

- title : set the title navbar (Ti.UI.Label)
- content : set the path controller (String)
- modal : set the modal property for dialog (Boolean)

Exemple usage :

{
  id: "example",
  title : {
    text : "textfield",
  },
  dialog : {
    title : {
      text : "example"
    },
    content : "partials/listExample"
  },
  type : "textFieldGenericPopup",
}

textFieldList

textFieldList

Get a field with a picker

- textfield : access to textField view (Ti.UI.TextField)
- list : set a list

Exemple usage :

{
  id: "textFieldList",
  title : {
    text : "Type",
  },
  list : [
    {text : "list"},{text : "column"}
  ],
  required : true,
  type : "textFieldList",
}

textFieldNumber

Get a simple textfield with keyboardType number

- textfield : access to textField view (Ti.UI.TextField)

Exemple usage :

{
  id: "number",
  title : {
    text : "Number",
  },
  textField : {
    hintText : "type your number",
  },
  required : true,
  type : "textFieldNumber",
}

textFieldOptionDialog

optionDialog

Get a field with a fake textfield, when you click it opens a optionDialog

- textfield : access to textField view (Ti.UI.TextField)
- optionDialog : access to optionDialog component (Ti.UI.OptionDialog)

Exemple usage :

{
  id: "option",
  title : {
    text : "Option",
  },
  optionDialog : {
    title: 'Titanium rocks!',
    options: [ 'Option A', 'Option B' ],
    cancelable: true
  },
  textField : {
      hintText : "Choose a option",
  },
  type : "textFieldOptionDialog",
}

textFieldPassword

password

Get a simple textfield with passwordMask and icon on right for disable/enable the passwordMask

- enabledIcon : set enabled icon
- disabledIcon : set disabled icon
- minLength : set the minimum length for password
- textfield : access to textField view (Ti.UI.TextField)

Exemple usage :

{
  id: "password",
  minLength : 6,
  title : {
    text : "Password",
  },
  textField : {
      hintText : "Type your password",
  },
  type : "textFieldPassword",
}

textFieldPhone

phone

get a simple textfield with keyboardType phone and a prefix for check if the field has a valid phone number

- textfield : access to textField view (Ti.UI.TextField)
- hasPrefix : show the prefix area phone, click event show a popup with different prefix (Boolean)
- prefix : access to Label prefix view (TI.UI.Label)

Exemple usage :

{
  id: "phone",
  title : {
    text : "Phone",
  },
  textField : {
    hintText : "type your phone",
  },
  type : "textFieldPhone",
}

textArea

comment

get a simple textArea

- textArea : access to textArea view (Ti.UI.TextArea)

Exemple usage :

{
  id: "comment",
  title : {
    text : "Comment",
  },
  textArea : {
      hintText : "type your comment",
  },
  type : "textArea",
}

photoSelector

optionDialog

get a component for set a photo in a field

- containerPhoto : access to view container of image/button (Ti.UI.View)
- image : access to imageView (Ti.UI.ImageView)
- button : access to button (Button Object)

Button object :

- parent : access the parent view Button (Ti.UI.View)
- icon : access the label icon  (Ti.UI.Label)
- label : access the label (Ti.UI.Label)

Exemple usage :

{
  container : {
    backgroundColor: "transparent",
    borderColor: "transparent"
  },
  image : {
    height: 200,
    width: 200,
    borderRadius: 100,
    backgroundColor: "white",
  },
  button : {
    label : {
      text: L("choosePicture")
    }
  },
  type : "photoSelector",
}

map

map

get a component for set longitude/latitude/address with maps

- label : access to Label view (Ti.UI.Label)

Exemple usage :

{
  id: "map",
  title : {
    text : "Map",
  },
  container : {
    height : 100
  }
  label : {
    text : "select"
  },
  type : "map",
},

fakeTextField

fakeTextField

Get a fake textField, it's a label use for simple click event


- faketextField : access to Label view (Ti.UI.Label)

Exemple usage :


{
id: "textfield",
title : {
  text : "textfield",
},
textField : {
  hintText : "test",
},
required : true,
  type : "fakeTextField",
}

checkbox

checkbox

Get a simple checkBox with text


- containerCheckBox : access to view container of checkbox/label (Ti.UI.View)
- checkBox : access to animationView checkBox (Ti.animation module View)
- label : access to label (Ti.UI.Label)

Exemple usage :


{
id: "checkqsdfqsd",
label :{
text: "Salut"
},
type : "checkbox",
}

buttonMultiple

multipleButton

get a component with buttons multiple choice

- activeColor : the color when item is enabled (String)
- disabledColor : the color when item is disabled(String)
- data ([Data Object])

Data object :

- active : set if this button is active (Boolean)
- view : set the parent of the button (Ti.UI.View)
- viewPadding : set the container of label/icon (Ti.UI.View)
- label : set the label property (Ti.UI.Label)
- icon : set the icon property (Ti.UI.Label)

Exemple usage :


{
  id: "example",
  activeColor : "black",
  disabledColor: "white",
  title : {
    text : "example",
  },
  data : [
   {
     active : true,
     id : 1,
     label : {
       text : "test"
     },
     icon :{
       text : "\uf00d"
     }
   },{
     id : 2,
     label : {
       text : "test"
     },
     icon :{
       text : "\uf00d"
     }
   },{
     id : 3,
     label : {
       text : "test"
     },
     icon :{
       text : "\uf00d"
     }
   }
  ],
  type : "buttonsMultiple",
}

switch

switch

Get a simple switch with text

- switch : access to switch view (Ti.UI.Switch)
- label : access to label view (Ti.UI.Label)

Exemple usage :

{
  id: "switch",
  switch : {
    right: 0
  },
  label : {
    left: 0,
    text : "activer ?"
  },
  type : "switch",
  required : true
}

Crédit : Squirrel http://www.squirrel.fr – Code Strong 🚀

About

Template Application Axway Appcelerator Titanium Mobile SDK with native tabgroup navigation

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published