Skip to main content

Actionbar using Javascript,CSS & XML in Android

By


index.js
JavaScript

function doClickMenu(evt){
  alert(evt.source.title);
}

// we need to do some things to the Window once it is properly instanciated, so we add an event listener to its OPEN event
$.win.addEventListener('open',function(){
        var actionBar = $.win.activity.actionBar; // get a handle to the action bar
        actionBar.title='My App'; // change the App Title
        actionBar.displayHomeAsUp=true; // Show the "angle" pointing back
        actionBar.onHomeIconItemSelected = function() { // what to do when the "home" icon is pressed
               Ti.API.info("Home icon clicked!");
    }; 
})

// now open the window.  The event listener will fire right after this
$.win.open();
index.tss
"Window": {
  backgroundColor: "#fff"
},
"Label": {
        width: Ti.UI.SIZE,
        height: Ti.UI.SIZE,
        color: "#000",
        font: {
               fontSize: 20,
               fontFamily: 'Helvetica Neue'
        },
        textAlign: 'center'
},
"MenuItem": { // this tells the menu to be part of the actionbar if there's room.  Otherwise the options will be available by pressing the hardware menu button
        showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM,
},
'#menu1': {
        icon: 'images/action_about.png',
        title: 'About'
},
'#menu2': {
        icon: 'images/action_settings.png',
        title: 'Settings'
},
'#menu3': {
        icon: 'images/action_about.png',
        title: 'About'
},
'#menu4': {
        icon: 'images/action_settings.png',
        title: 'Settings'
},
'#menu5': {
        icon: 'images/action_about.png',
        title: 'About'
},
'#menu6': {
        icon: 'images/action_settings.png',
        title: 'Settings'
}
index.xml
XML
  •  
  •  
<Alloy>
  <TabGroup id="win">
               <Tab title="Tab 1" icon="KS_nav_ui.png">
                       <Window title="Tab 1">
                               <Label>I am Window 1</Label>
        <!-- this menu is styled in such a way that it becomes part of the ActionBar.  See the TSS file -->
                               <Menu id="menu" platform="android">
                                      <MenuItem id="menu1" onClick="doClickMenu" />
                                      <MenuItem id="menu2" onClick="doClickMenu" />
                                      <MenuItem id="menu3" onClick="doClickMenu" />
                                      <MenuItem id="menu4" onClick="doClickMenu" />
                                      <MenuItem id="menu5" onClick="doClickMenu" />
                                      <MenuItem id="menu6" onClick="doClickMenu" />
                               </Menu>
                       </Window>
               </Tab>
               <Tab title="Tab 2" icon="KS_nav_views.png">
                       <Window title="Tab 2">
                               <Label>I am Window 2</Label>
                       </Window>
               </Tab>
        </TabGroup>
</Alloy>
tiapp.xml
XML 

<!-- you need to add this to your tiapp.xml -->
<android xmlns:android="http://schemas.android.com/apk/res/android">
        <tool-api-level>14</tool-api-level>
        <manifest>
               <application android:theme="@android:style/Theme.Holo.Light"></application>
               <!-- You could also use @android:style/Theme.Holo -->
        </manifest>
</android>
version 2.index.tss
// this version demonstrates how to specify which menu options you want to always appear on the menu bar
// and which you want to display as additional menu items
"Window": {
  backgroundColor: "#fff"
},
"Label": {
        width: Ti.UI.SIZE,
        height: Ti.UI.SIZE,
        color: "#000",
        font: {
               fontSize: 20,
               fontFamily: 'Helvetica Neue'
        },
        textAlign: 'center'
},
'#menu1': {
        icon: 'images/action_about.png',
        title: 'About',
        showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
},
'#menu2': {
        icon: 'images/action_settings.png',
        title: 'Menu',
        showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
},
'#menu3': {
        icon: 'images/action_about.png',
        title: 'About',
        showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER
},
'#menu4': {
        icon: 'images/action_settings.png',
        title: 'Settings',
        showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER
},
'#menu5': {
        icon: 'images/action_about.png',
        title: 'About',
        showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER
},
'#menu6': {
        icon: 'images/action_settings.png',
        title: 'Settings',
        showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER
}
version2.index.js
JavaScript
// this version demonstrates how to provide a "software" way of invoking the menu button.  This is until
// Ti supports the MenuInflater
function doClickMenu(evt) {
  switch(evt.source.title){
               case "Menu": // in real life you probably wouldn't want to use the text of the menu option as your condition
                       var actionBar = $.win.activity;
                       actionBar.openOptionsMenu();
                       break;
               default:
                       alert(evt.source.title);      
        }
}

// we need to do some things to the Window once it is properly instanciated, so we add an event listener to its OPEN event
$.win.addEventListener('open', function() {
        var actionBar = $.win.activity.actionBar;
        // get a handle to the action bar
        actionBar.title = 'My App';
        // change the App Title
        actionBar.displayHomeAsUp = true;
        // Show the "angle" pointing back
        actionBar.onHomeIconItemSelected = function() {// what to do when the "home" icon is pressed
               Ti.API.info("Home icon clicked!");
        };
})
// now open the window. The event listener will fire right after this
$.win.open();

Comments

Post a Comment

Popular posts from this blog

Volley for client and server interaction (Android)

By
Volley provides client and server interaction with QUEUE basis, each and every request process separately, we can cancel our request from QUEUE. HERE is a code sample for Volley with json request format. GenerateRequest.java -------------------------------------------------------------------- package com.entrata.maintenance.network_communication.networkutils; import android.content.Context; import com.android.volley.AuthFailureError; import com.android.volley.Response; import com.android.volley.VolleyError; import com.android.volley.toolbox.JsonObjectRequest; import com.entrata.maintenance.application.ERPUserDefaults; import com.entrata.maintenance.network_communication.networkconstant.NetworkConstant; import com.entrata.maintenance.network_communication.networkexception.Error; import com.entrata.maintenance.network_communication.networkutil.SubdomainChange; import com.entrata.maintenance.utils.Logger; import com.google.gson.Gson; import org.json.JSONException; import org.js...
Post a Comment
click here
By
Java Code Examples for javax.net.ssl.HttpsURLConnection The following code examples are extracted from open source projects. You can click to vote up the examples you like. Your votes will be used in an intelligent system to get more and better code examples. Thanks for your votes! Code Example 1:   9  From project ADFS , under directory /adfs-hdfs-project/adfs-hdfs/src/main/java/org/apache/hadoop/hdfs/ . Source HsftpFileSystem.java @Override protected HttpURLConnection openConnection ( String path , String query ) throws IOException { query = addDelegationTokenParam ( query ); final URL url = new URL ( "https" , nnAddr . getHostName (), nnAddr . getPort (), path + '?' + query ); HttpsURLConnection conn =( HttpsURLConnection ) url . openConnection (); conn . setHostnameVerifier ( new DummyHostnameVerifier ()); return ( HttpURLConnection ) conn ; } Code Example 2:  ...
Post a Comment
click here

Improving Layout Performance

By
Improving Layout Performance Layouts are a key part of Android applications that directly affect the user experience. If implemented poorly, your layout can lead to a memory hungry application with slow UIs. The Android SDK includes tools to help you identify problems in your layout performance, which when combined the lessons here, you will be able to implement smooth scrolling interfaces with a minimum memory footprint. Lessons Optimizing Layout Hierarchies In the same way a complex web page can slow down load time, your layout hierarchy if too complex can also cause performance problems. This lesson shows how you can use SDK tools to inspect your layout and discover performance bottlenecks. Re-using Layouts with <include/> If your application UI repeats certain layout constructs in multiple places, this lesson shows you how to create efficient, re-usable layout constructs, then include them in the appropriate UI layouts. Loading Views On Demand Be...
Post a Comment
click here