barebones minimal example: using XUL to http POST - http

I am trying to figure out if XUL is a good candidate for GUI forms in intranet apps.
It's been difficult to find anyone who actually uses it though. Therefore I thought I'd ask for a hello world style example.
Suppose I have a php page that does nothing but display any content sent to it via HTTP POST. (e.g., http://mysite.com/postdumper.php)
Can anyone show me the bare minimum code it would take to create an XUL form that collects firstname, lastname, and age, and allows me to POST that to the URL above?
Any links or Fine Manuals or references that give such an example are more than welcome.

I use it for an intranet application and have done that for a few years now. It can be hard to start with, but once you understand a few things it's easy to make it work for you.
Forgot almost everything you knew about HTML. It's NOT HTML and there are alot of things you can't do the old way, but then there are an incredible amount of other things you can do instead.
Everything communication wise is done with javascript, and not forms.
Overlays have nothing to do with div's. But it's hugely useful for splitting up a design for larger projects.
If an XUL page is not correctly formated in all tags, the page won't even display.
There is a google groups where the main purpose is to discuss remote XUL :
http://groups.google.com/group/remotexul
It's not quite active yet, but more members are more than welcome :)
Here is an minimal example:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script language="javascript">
function send()
{
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var age = document.getElementById('age').value;
var postData = "firstName="+firstName;
postData += "&lastName="+lastName;
postData += "&age="+age;
var req = new XMLHttpRequest();
req.open("POST", "/test.php", false);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send(postData);
alert(req.responseText);
}
</script>
<hbox>
<vbox>
<hbox>
<label value="First Name" control="firstName"/>
<textbox id="firstName"/>
</hbox>
<hbox>
<label value="Last Name" control="lastName"/>
<textbox id="lastName"/>
</hbox>
<hbox>
<label value="Age" control="age"/>
<textbox id="age" value="30" type="number"/>
</hbox>
<button onclick="send()" label="Send"/>
</vbox>
</hbox>
</window>
I would also like to stress that you should look into sending data back and forth between XUL and PHP using a XMLRPC or JSON framework instead. JSON support will come as built-in in Firefox 3.5.
Another things is that until Firefox 3.5 arrives you cannot do cross-site XMLHttpRequest's unless you do some configuration in about:config. Which means that only xul on mysite.com can send requests to mysite.com/postdump.php.

Create a series of < textbox>'s, add a submit < button>, and after reading the data from the textboxes, send it using xmlhttprequest. You can use GET or POST.

you can use plain old xhtml forms provided that you use its namespace in XUL since it is XML.

Related

Force <input type="file"> to open gallery in mobile

I want to make my input to only accept files from gallery instead of allowing the user to open the camera.
How can I achieve it?
ASP.NET
<asp:FileUpload ID="filGallery" runat="server" AllowMultiple="true" />
HTML 5
<input type="file" id="filGallery" multiple="multiple" />
The behaviour I want is similar to the one found in iOS 8 or less, where input with multiple files enabled couldn't open the camera
I don't think there is a way to force using gallery - current trend is more on using camera (and suggesting using front or back) rather than disabling it.
However, there is a similar question on SO (but focus on type of capture) where that answerer has pointed to some ways of input attribute you may try out:
original SO: https://stackoverflow.com/a/40512470/2564920
More detail test he has done regard to the mobile capture: https://addpipe.com/blog/correct-syntax-html-media-capture/
A test page which you can try out: https://addpipe.com/html-media-capture-demo/
specifically one setting which is
<input type="file" accept="image/*" capture="filesystem">
looks promising - but probably won't work (since this syntax is deprecated and capture attribute in newer spec is used to say you want to use camera - choosing between front or back camera source)
just use simple method to open gallery in mobile
<input type="file" id="fileProfile2" name="fileProfile2" accept="image/png,image/jpeg" capture="filesystem">

How to resolve TableView with css in Titanium Android Emulator

xsml file as below its display good in web browser but not showing in Android Emulator.
<Alloy >
<Window id="readWin" class="bg">
<TableView id="tableView">
<TableViewRow class="titlebar"></TableViewRow>
<TableViewRow></TableViewRow>
<TableViewRow>
<TextField class="serachbar"></TextField>
</TableViewRow>
<TableViewRow></TableViewRow>
<TableViewRow center="center" width="190" height="63">
<Button class="sbtn" id="subbtn"></Button>
</TableViewRow>
</TableView>
</Window>
</Alloy>
my index.tss code is like
'#tableView':{
separatorColor:'none'
}
"View":{
layout:'vertical',
},
".bg":{
backgroundImage:'images/bg.png',
},
".titlebar":{
backgroundImage:'images/logo.png',
width:'339dp',
height:'71dp',
top:'140dp'
},
'.serachbar':{
backgroundImage:'images/searchbar.png',
width:'400dp',
height:'50dp',
borderStyle:'none',
},
'.sbtn':{
backgroundImage:'images/btn.png',
width:'187dp',
height:'60dp',
borderStyle:'none',
}
my index.js file code is
$.readWin.open();
bg css is applying at window successfully but tableview data is not showing in Andriod Emulator event its good display in Web Browser. what can be the problem please help
Kind of an old post, but I thought I'd add my 2 cents. First, there's no way we can test this code because we don't have the referenced images. Second, remove all the dp references in your code by adding this line to your tiapp.xml <property name="ti.ui.defaultunit" type="string">dp</property>. Finally, explain what you've tried, and what you're trying to accomplish. Your post lacks a great deal of information that would allow others to help you.

Extending the current publishing/unpublishing screen

I have a requirement where I need to show a an alert/popup when an editor clicks on the Unpublish menu command. I will show the popup with an Yes/No Button, if Yes is selected we proceed and show the existing UnPub screen. If No is selected No activity happens and the user return back to the screen.
How this can be achieved ?
Can we extend/override the existing CME command's without creating a new Command for ourselves?
I just learned how to do this yesterday (Thank to Nuno Linhares) - you need to be familiar with making a new Editor for the GUI first.
Next step is to find the name of the command that you want to overwrite (Probably "UnPublish" in your case). The easiest way to do that is to use "inspect element" with Chrome or FieFox in the GUI, and look for something like c:command="UnPublish" on the button you wish to extend.
Once you have a basic editor set up, you need to add your new command to overwrite your existing one something like this:
<extensions>
<ext:dataextenders />
<ext:editorextensions>
<ext:editorextension target="CME">
<ext:editurls />
<ext:listdefinitions />
<ext:taskbars />
<ext:commands />
<ext:commandextensions>
<ext:commands>
<ext:command name="UnPublish" extendingcommand="CustomUnPublishCommand"/>
</ext:commands>
<ext:dependencies>
<cfg:dependency>CustomUnPublish.CommandSet</cfg:dependency>
</ext:dependencies>
</ext:commandextensions>
<ext:contextmenus />
<ext:lists />
<ext:tabpages />
<ext:toolbars />
<ext:ribbontoolbars />
</ext:editorextension>
</ext:editorextensions>
</extensions>
Add all your dependencies (JS and CSS etc) and command references in the normal way.
Then write your JS execute function as you would any other GUI command, and call the existing command after you have worked on your popup, something like this:
CustomUnPublish.prototype._execute = function CustomUnPublish$_execute(selection, pipeline) {
//Insert some logic to make a popup and confirm
blnOkToProceed = true;
//
if (blnOkToProceed) {
//EDIT: Original code
$cme.getCommand("UnPublish")._execute(selection, pipeline);
//EDIT: Or using the suggestion from #Peter below
$commands.executeCommand("UnPublish", selection, pipeline);
//End Edit
}
return;
};

How can I use HTML5 email input type with server-side .NET

As I understand it, the <input type=email> element in HTML5 will render as a simple text field in browsers that do not support the tag. On other browsers it will render properly, like on the iPhone it will bring up the e-mail keyboard layout.
I’d like to use this in a project but my input fields are <asp:TextBox> controls. How can I use the HTML5 element but still access its data server-side like the rest of my fields?
There is an update for .NET framework 4 which allows you to specify the type attribute
http://support.microsoft.com/kb/2468871.
See feature 3 way down the page
Feature 3
New syntax lets you define a
TextBox control that is HTML5
compatible. For example, the following
code defines a TextBox control that is
HTML5 compatible:
<asp:TextBox runat="server" type="some-HTML5-type" />
you can try adding the attributes manually, like:
TextBox1.Attributes["type"] = "email";
TextBox1.Attributes["type"] = "url";
TextBox1.Attributes["type"] = "number";
Sorry I'm a bit late to the party, though I think that others can benefit from what I did. I have a page which is HTML 5 though we still have .NET 3.5. We wanted to keep the .NET element, though have the type change to email. I've tried several methods (including Milox above) to no avail, though the one which worked for me was the following: I added a JavaScript property to the element itself inline (when I put it in a script tag it wouldn't pick up for some reason...)
Here is what your tag would look like if you use my changes:
<asp:TextBox runat="server" type="email" onfocus="this.type='email'"/>
Eli
Whether or not it is accessible as a server control, you should be able to access the HttpRequest.Form collection and retrieve the value. No matter what the browser does with the tag, it has to submit a string to the server.
in your .aspx file add
<input type="text" required autofocus placeholder="Email Address"
class="txt-input txt-input-username" ID="myTextBox" runat="server"/>
in your Code Behind .cs
myTextBox.Attributes["type"] = "email";
This Worked For Me
You need to create your own custom control and override the Render routines. Feel free to use either the source code or DLLs

ASP.Net Form send click but nothing happens

I am building a german payment provider into my site.
But when I click on "Submit", nothing happens. Can someone please help me? I think I've looked at it too much and I can't see the forest for the trees anymore...
<form method="post" action="https://www.sofortueberweisung.de/payment/start">
<input name="currency_id" type="hidden" value="EUR" />
<input name="reason_1" type="hidden" value="Zambuu" />
<input name="user_id" type="hidden" value="29593" />
<input name="project_id" type="hidden" value="80145" />
<input type="submit" value="Absenden" />
</form>
Okay, so it's a little bit unclear what I want, it seems:
I have a lot of asp-sites allready, and now I must send, however, the information that is given by the hidden inputs by post-method to the site "sofortüberweisung.de/payment/start".
However I can solve it, it's not nessecary, there is no need for a form-tag, if there is another solution (e.g. with the code behind).
So: How can I send a lot of post information (these here is only an exmaple, in the real site there are a lot more) with code and redirect it to the right site?
If the code you have provided is within a standard ASP.NET form, so that you have nested form tags, try the solutions provided to this Stack Overflow question.
If it is possible to have this page be a simple html form, that is another possible solution.
Your button needs to have the runat="server" attribute set and it might be worth doing the same on your form atttribute.
Also remember in asp.net webforms you can only have one form tag.
I've had this issue a couple of times before where when creating an HTML form inside an ASP.NET form tag, the inner form just wouldn't post out.
One solution for me was to adjust the ASP.NET form tag wrapper for that page (moving the close above the HTML tag).
Another (where I needed ASP.NET controls obove and below the HTML form) was to add an iframe, passing the parameters for the form post to the iframe URL. Using JavaScript, the iframe then used those parameters to post the form to a new window/the parent window. Probably better ways, but it worked for me.

Resources