Develop Reference

Whats a simple way to get a text input Alertdialog box on an Android

I want to get the password. A simple text input dialog box. Any simple way to do this?
In iPhone it creates like this.
style : Ti.UI.iphone.AlertDialogStyle.SECURE_TEXT_INPUT
But in android how can I do thi??

Use the androidView property in a UI.AlertDialog and add a TextField.

Currently Appcelerator does not provide such facility. But you can do it in a simple way by using a view, textField and button as follows
var vwAlert = Ti.UI.createView({
backgroundColor : '#311919',
width : '90%',
height : '40%',
layout : 'vertical',
borderRadius: 5
});
var lblMessage = Ti.UI.createLabel({
text : 'Alert',
top : 10,
color : 'white',
font : {fontWeight : 'bold', fontSize : '16'}
});
var textField = Ti.UI.createTextField({
width : '90%',
top : '20',
passwordMask: true,
hintText : 'Enter your text here',
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType : Ti.UI.RETURNKEY_RETURN,
maxLength : 70
});
var btnOK = Ti.UI.createButton({
title : 'OK',
width : '43%',
top : '25',
font : {fontWeight : 'bold', fontSize : '16'}
});
vwAlert.add(lblMessage);
vwAlert.add(textField);
vwAlert.add(btnOK);
The above view will look like an alert dialog box since it's customized one. This will do the trick :)

you need an EditText with android:inputType="textPassword"

EditText tf = new EditText(context);
tf.setTransformationMethod(PasswordTransformationMethod.getInstance());
or in xml
android:inputType="textPassword"

Create Custom Color Set TinyMCE

I have been able to create my own Font color picker for TinyMCE, but but the color palette is linked to the original color picker. What I am trying to do is make my custom color picker totally independent of the original one (so I can show both). Here is my current code, and this works, but the color palette is the same for both buttons:
tinymce.create('tinymce.plugins.ExamplePlugin', {
createControl: function(n, cm)
{
switch(n)
{
case "universityColors":
var o = {};
ed=tinyMCE.activeEditor;
o.scriptURL = ed.baseURI.getURI();
o['class'] = 'mce_forecolor';
o.title='University Font Colors';
o.scope=this;
o.image = '<?php echo $university->getDto()->getIcoFile();?>',
o.onclick = function (color) { ed.execCommand('Forecolor', false, color);/*this.cs.showMenu(); if (this.o.onClick) this.o.onClick(c);*/};
o.onselect = function (color) {
console.log('selected',color); /*this.color=this.o.color=c; if (this.o.onSelect) this.o.onSelect(c);*/
// execute the same command that the regular forecolor plugin uses (choosen theme needs to be advanced! in order to work)
ed.execCommand('ForeColor', false, color);
};
// limit the colors using own setting
if (v = ed.getParam('theme_advanced_text_colors')) o.colors = v;
var mcsb = cm.createColorSplitButton('universityColors', o);
// return the new ColorSplitButton instance
return mcsb;
}
return null;
}
});
tinymce.PluginManager.add('universityColorPicker', tinymce.plugins.ExamplePlugin);
tinyMCE.init({
mode: "specific_textareas",
editor_selector: "tinyMCE",
theme : "advanced",
plugins : "emotions,spellchecker,advhr,insertdatetime,preview, -universityColorPicker",
// Theme options - button# indicated the row# only
theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
theme_advanced_buttons2 : "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,code,preview,|,forecolor,backcolor, universityColors",
theme_advanced_buttons3 : "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_text_colors :"<?php echo implode(',', $university->getDto()->getColors());?>" // example
});

To apply custom fonts see this fiddle: http://fiddle.tinymce.com/jYcaab/2

This was actually very easy after reading through what was happening. All that needed to be done was alter this line:
if (v = ed.getParam('theme_advanced_text_colors')) o.colors = v;
to
if (v = ed.getParam('custom_colors')) o.colors = v;
then add add custom_colors definition in init method.

tinymce - adjust this js to affect only 1 textarea

Basically I use TinyMCE for my text areas for easier editing and someone constructed this JS for me to make a textarea only go to 255 characters.
The only problem is that it affects all textareas on a page its included on instead of a set one, I know no JS so I am wandering if one of you wizards could guide me to add a place I can set what textarea to affect?
<script type="text/javascript" src="/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "bbcode",
theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
theme_advanced_resizing : true,
theme_advanced_path : false,
content_css : "css/bbcode.css",
entity_encoding : "raw",
add_unload_trigger : false,
remove_linebreaks : false,
inline_styles : false,
forced_root_block : '',
convert_fonts_to_spans : false,
theme_advanced_statusbar_location : "bottom",
setup: function(ed) {
ed.onKeyUp.add(function(ed, e) {
// What is the max amount of characters you want
var maxChars = 255;
var content = tinyMCE.activeEditor.getContent();
// Remove any BBCode tags from the count
var strip = content.replace(/\[\/?(?:b|i|u|url|quote|code|img|color|size)*?.*?\]/img, '');
// Set the text for what we want to display in the status bar
var text = strip.split(' ').length + " Words, " + strip.length + " Characters"
// Show the status bar message
tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + '_path_row'), text);
// Is there more Characters than we want
if (strip.length > maxChars)
{
// Show an alert (can comment out)
alert("Sorry too many characters " + strip);
// Get all characters up to the limit
cur = strip.substring(0,maxChars);
// Replace content with the max amount
tinyMCE.activeEditor.setContent(oldContent);
}
else
{
oldContent = content;
}
});
}
});

All you need to do is
//find the id of the currently active editor
var editor_name=tinyMCE.activeEditor.editorId;
then
//provide regex for list of editors to be matched
var editors_to_be_matched = /first_editor|third_editor/;
find
//if active editor matches against the list of editors
var matched = editor_name.match(editors_to_be_matched);
if
//active editor does not matches return
if(!matched) return;
else
//do character count stuff
your code here
So here is how it would look like in your case
ed.onKeyUp.add(function(ed, e) {
var editor_name =tinyMCE.activeEditor.editorId;
var editors_to_be_matched = /first_editor|third_editor/;
var matched = editor_name.match(editors_to_be_matched);
if(!matched) return;
alert("Do character count stuff here");
// your code here
// What is the max amount of characters you want
var maxChars = 255;
var content = tinyMCE.activeEditor.getContent();
........
..........
});
Here is a DEMO

to make tinymce work on only some textareas you should change mode to "exact" and specify html element IDs in element parameter like this:
tinyMCE.init({
mode : "exact",
elements : "elm1,elm2",
});
you can find more info about tinymce modes here: http://www.tinymce.com/wiki.php/Configuration:mode

Display Name here is the new code then can you check it over :), think i got it right.
<script type="text/javascript" src="/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "bbcode",
theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_styles : "Code=codeStyle;Quote=quoteStyle",
theme_advanced_resizing : true,
theme_advanced_path : false,
content_css : "css/bbcode.css",
entity_encoding : "raw",
add_unload_trigger : false,
remove_linebreaks : false,
inline_styles : false,
forced_root_block : '',
convert_fonts_to_spans : false,
theme_advanced_statusbar_location : "bottom",
setup: function(ed) {
ed.onKeyUp.add(function(ed, e) {
// What is the max amount of characters you want
var maxChars = 255;
var content = tinyMCE.activeEditor.getContent();
var editor_name = tinyMCE.activeEditor.editorId;
var editors_to_be_matched = /tagline/;
var matched = editor_name.match(editors_to_be_matched);
if(!matched) return;
// Remove any BBCode tags from the count
var strip = content.replace(/\[\/?(?:b|i|u|url|quote|code|img|color|size)*?.*?\]/img, '');
// Set the text for what we want to display in the status bar
var text = strip.split(' ').length + " Words, " + strip.length + " Characters"
// Show the status bar message
tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id + '_path_row'), text);
// Is there more Characters than we want
if (strip.length > maxChars)
{
// Show an alert (can comment out)
alert("Sorry too many characters " + strip);
// Get all characters up to the limit
cur = strip.substring(0,maxChars);
// Replace content with the max amount
tinyMCE.activeEditor.setContent(oldContent);
}
else
{
oldContent = content;
}
});
}
});
</script>

TinyMCE outer wrap selected elements

I am having a problem getting TinyMCE to wrap the contents of the selection.
The first style_format simple adds the class to the selected element, this works fine.
The problem is with the second style_format I want it to wrap the selected elements inside of the
E.g.
BEFORE
<p>test text</p>
<p>test text</p>
<p>test text</p>
<p>test text</p>
AFTER
<p class="accordion_top">test text</p>
<div class="accordion_middle">
<div class="accordion_middle-wrapper">
<p>test text</p>
<p>test text</p>
<p>test text</p>
</div>
</div>
Using the jQuery version I have below, the code in question is the bottom style formats
$("#tinymce").tinymce({
script_url : HOME+"/webapp/shared/javascript/tiny_mce/tiny_mce.js",
mode : "textareas",
theme : "advanced",
skin : "cirkuit",
width: "726",
plugins : "advlist,insertdatetime,paste,print,searchreplace,spellchecker,table,wordcount,visualchars,xhtmlxtras,template,codemagic",
theme_advanced_buttons1 : "cut,copy,paste,pastetext,pasteword,selectall,undo,redo,|,hr,acronym,charmap,blockquote,replace,|,insertdate,inserttime,|,cleanup,removeformat,codemagic,",
theme_advanced_buttons2 : "wrap_div,styleselect,formatselect,|,bold,italic,underline,bullist,numlist,|,table,|,link,unlink,insertimage,spellchecker|mybutton",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
//theme_advanced_buttons1 : "|,,table,pasteword",
theme_advanced_blockformats : "p,h2,h3,h4,h5,h6",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
forced_root_block : "p",
force_br_newlines : false,
force_p_newlines : true,
valid_elements : "span[class|id],br[class|id],a[href|target|title],img[src|id|width|height|class|alt],i,"+
"li[class|id],ul[class|id],ol[class|id],p[class|id],"+
"table[class|id],th[class|id],tr[class|id],td[class|id],thead,tbody,"+
"h1[class|id],h2[class|id],h3[class|id],h4[class|id],h5[class|id],h6[class|id],strong[class|id],"+
"div[class|id]",
content_css : TEMPLATE_HOME+"/css/tinymce.css?" + new Date().getTime(),
plugin_insertdate_dateFormat : "%d/%m/%Y",
plugin_insertdate_timeFormat : "%H:%M",
paste_auto_cleanup_on_paste : true,
convert_urls: false,
relative_urls: false,
// Style formats
style_formats : [
{title : 'Accorion Top', selector : 'p,h2,h3,h4,h5,h6', classes : 'accordion_top'},
{title : 'Accorion Middle', block : 'div', classes : 'accordion_middle'}
],
setup: function (ed) {
// Create an wrap DIV button
ed.addButton ('wrap_div', {
'title' : 'Wrap Accordion',
'image' : HOME+'/webapp/shared/javascript/tiny_mce/themes/advanced/img/createlink.gif',
'onclick' : function () {
var text = ed.selection.getContent({ 'format' : 'text' });
if (text) {
tinyInsert('<div class="accordion_middle"><div class="accordion_middle-wrapper">' + text + '</div></div>');
}
}
});
}
});

It requires big changes in the tinymce core (Formatter.js) to get what you want using the style plugin.
I would write an own function placed in an own tinymce plugin.
To achieve your goal you wouldn'tneed that much code.
EDIT: You got it almost correct. Try this first using spans to make sure this works in your editor.
setup: function (ed) {
// Create an wrap DIV button
ed.addButton ('wrap_div', {
'title' : 'Wrap Accordion',
'image' : HOME+'/webapp/shared/javascript/tiny_mce/themes/advanced/img/createlink.gif',
'onclick' : function () {
var text = ed.selection.getContent({ 'format' : 'text' });
if (text && text.length > 0) {
ed.execCommand('mceInsertContent', false, '<span class="accordion_middle"><span class="accordion_middle-wrapper">' + text + '</span></span>');
}
}
});
}
Next step will be to replace the spans withs divs and make sure your tinymce settings will allow nested div tags (see the valid_children setting).

TinyMce imagemanager won't generate image path when used with an iframe

I have successfully setup tinymce to work on a page within an iframe. Everything works perfectly.
However, when you use imagemanager to pick an image to be inserted or replaced in the editor it will not copy the path(and filename) of the image to the "Image URL" input in the "Insert/edit image" box. The box will either remain empty or keep the address of the previous image.
The behaviour is the same with the filemanager plugin.
tinyMCE.init(
{
mode : "none",
editor_selector : "mceEditor",
theme : "advanced",
plugins : "filemanager,imagemanager,autoresize,safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,spellchecker",
theme_advanced_buttons1 : "insertfile,insertimage,advimage,imagemanager,bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,nonbreaking,cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist",
theme_advanced_buttons2 : "blockquote,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,|,forecolor,backcolor,|,charmap,iespell,media,advhr",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,strikethrough",
theme_advanced_buttons4 : "styleselect,formatselect,fontselect,fontsizeselect,|,undo,redo,|,spellchecker",
theme_advanced_toolbar_location : "external",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
relative_urls : true,
document_base_url : "http://xxxxxxxxxxx.com/",
auto_resize : true,
content_css : "/custom/css/style.css",
extended_valid_elements : "iframe[height|width|src|frameborder|scrolling]",
});
/*
The following code comes from- http://tinymce.moxiecode.com/punbb/viewtopic.php?id=12966
Without it the editor only loads 10% of the time. With it, it's pretty much 100% consistent.
The other changes mentioned in the post have also been implemented.
*/
var setupTiny = function()
{
var ifrObj = document.getElementById('pageEditIFrame');
var win = ifrObj;
if (win.contentWindow)
{
win = win.contentWindow;
}
var d;
if(ifrObj.contentDocument)
{
d = ifrObj.contentDocument;
}
else if (ifrObj.contentWindow)
{
d = ifrObj.contentWindow.document;
}
else if (ifrObj.document)
{
d = ifrObj.document;
}
textAreas.each(function(txtEl)
{
tinyMCE.execCommand('mceAddFrameControl', false,
{
element_id : txtEl,
window : win,
doc : d
});
});
};
//Waiting 1 second seems to make the editor load more reliably.
setTimeout("setupTiny();",1000);

I ran across a similar issue that only shows up in more recent versions of Firefox - Chrome and IE work fine for me. Not sure if it is exactly the same problem (I'm not using iframes) but it presents in the same way.
Here's where I found my solution:
http://tinymce.moxiecode.com/punbb/viewtopic.php?id=23302
As you can read there, one of the coders for TinyMCE thinks its a bug in FF, though the fixes look more like it's tiny_mce assuming a bug still exists in Firefox that was fixed at some point in 3.5. Here's the solution that worked for me (quoted from the post):
1)
Go to tiny_mce.js
2)
Find this line: this.isGecko = ua.indexOf('Gecko') != -1;
under it add:
this.isGecko369 = (this.isGecko && ua.indexOf('irefox/3.6.')!= -1 && parseInt(ua.substr(ua.indexOf('irefox/3.6.')+11,2)) >= 9);
this.isGecko369 = (this.isGecko369 || (this.isGecko && ua.indexOf('irefox/3.5.')!= -1 && parseInt(ua.substr(ua.indexOf('irefox/3.5.')+11,2)) >= 9 ) );
3)
Find this line: fixGeckoBaseHREFBug : function(m, e, h) {
below that there is this line: if (tinyMCE.isGecko) {
alter it with: if (tinyMCE.isGecko && !tinyMCE.isGecko369) {