How To: Develop HTML Panel for X1

[Evostance]

With this tool you can easily create HTML panels for Sony Ericsson Xperia X1.

Quick guide (You can not create your panel without reading this):
To build a html panel, the bare minimum files are:

1)
Screenshots (landscape, portrait, large landscape, large portrait). These are the images you will see into the panels grid on your phone, or when the panel will be loading. Each screenshot must be in BMP 24 (windows bitmap, 24 bits per pixel) format, otherwise the device will not show them
The screenshots must have the following sizes:

• Landscape: 200x94
• Portrait: 120x174
• Large landscape:240px 348
• Large portrait: 400x188

2)
A file called index.html (the panel itself) with some content.

It's enough to create these images/files with your favorite editor, and upload them to the program, which will create the package to load on Xperia. As starting point we provide the archive demo.zip that contains some demo files to understand better how to create Xperia html panels.
If you think you know already everything about this program and about Xperia html panels, click "Continue", otherwise continue to read below.

Complete guide
Key points:

1. This program is distributed hoping it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
2. This program can create html panels for Sony Ericsson Xperia X1 mobile phone. This program can not create native c++ panels.
3. This program suits to people who are not familiar with Windows/Windows Mobile programming environment, but it can build an HTML page, and it would obviously like a custom panel in their own Xperia device.
4. This program can build full functional panels, like those generated by MS Visual Studio. You will not need to install any specific software on your computer. Thus, the only thing will be necessary for you, it's a measure of imagination, creativity and individuality when you design your panel.

How to create an HTML panel for Xperia X1.

To create the panel HTML, you need to create a html file first, which will become the panel itself. The file can be builded like any other HTML file, using the possibilities of markup and CSS style sheets. You can enter several DOM elements, check this URL for a more detailed list: XHTML Elements .

You can insert images, linked images, etc. The size of the Xperia panel's window is 240x400 in portrait mode and 400x240 in the landscape mode. Any image/css sheet must be uploaded in the form of the next page. All components of the panel must be located in the same folder, and must be linked bearing in mind that rule. So
<img src="immagine.jpg" />
- it's ok, but
<img src="images/immagine.jpg" />
- it's not ok.
You should pay attention to the sizes of the containers in your html file. The Xperia screen has 400x240px resolution (and 240x400 in the landscape mode). The html panels do NOT have the scroll feature, so the outside content of your panel will remain outside.

The panel also must have 4 Screenshots (landscape, portrait, large landscape, large portrait). The screenshots are the images you will see into the panels grid on your phone, or when the panel will be loading.
Each screenshot must be in BMP 24 (windows bitmap, 24 bits per pixel) format, otherwise the device will not show them.
The screenshots must have the following sizes:

• Landscape: 200x94
• Portrait: 120x174
• Large landscape:240x348
• Large portrait: 400x188

Alternatively, the program can convert and resize any image you provide (just check the appropriate checkbox on the next page). But in this case, since the sizes are forced without mantaining the original proportion, you might get unexpected results.

In the form on the next page, you'll have to simply upload these essential 5 files in the appropriate fields, and eventually any other used file(css, images, js) in the rest 15 available fields. The total size should not exceed 2MB.


We recommend for the first time to download the demo.zip archive that contains a set of demo files that will help you to create your first project.. For the rest, follow the indications after clicking on



FAQ

— Why I should use this program?
It is very simple. Because the alternatives suck.
At this point we should also explain the reason why we create this program. The author of this tool, as I guess many of you, have heard for months and months about the possibility to create HTML panels for the new Xperia phone. When he finally had an X1, and went to read the documentation and download the SDK provided by Sony Ericsson, he realised that "html panels for everyone" was only a viral marketing slogan. Yes, technically these panels are written in HTML, but you must anyway have the Microsoft Visual Studio on your pc, you must compile the installer CAB file, you must include a dll in the package, you must modify some registry strings of the project, etc. So, because the author did not programmed on the windows platform since the visual studio 6, he has spent a half day to: download Visual Studio 2008 (a 90 days trial, 3.5 GB) to open the test project provided by Sony Ericsson and understand what it is, download the Windows Mobile 6 SDK, ActiveSync, and some other software which he did not know either the existence. So, 4 GB in total downloads, a "fast and furious" introduction to the new world of Visual Studio, and thousands of other things that would make this document too large. All this things for making 5 files to upload on the phone and use as a panel..
At this point the author had the idea to write a simple tool to use online, without having to install anything on the computer.
So, returning to the initial question.. the answer is simple: You can user this program, othervise you can have all the fun i had with the Visual Studio. Obviously if you can use it..

— What is the difference between a html panel and a native panel?
With a native panel you can do almost anything whith your phone, but you need to know some language like c++ to write it, and you have to know how to write software under Windows Mobile platform. With the html panel you are limited to the html (but below we will see how to start programs on your phone, check the missed calls, etc).

— Why my panel is not scrollable?
Please note that an HTML Panel is not a full featured browser, so some features that browsers implement will not be available in an HTML Panel. There is no scroll, no browser navigation, etc.

— I do not know the HTML but I want anyway my own html panel!
If you do not know the HTML you can always ask some buddy that knows it. Certainly you will find one, currently there are more webmasters than sites.

— What elements can be inserted in the html?
We have already provided a link on this page that lists them. The panel also supports the javascript language. We didn't test the flash language, but the mobile version should be supported. Also, the internet explorer mobile (the panel uses this engine) can support Ajax, Jscript, DHTML, etc., but we didn't test none of those. If you could provide more accurate informations, just report them here Create Xperia X1 Web HTML Panels with our X1 panel creator.

— How do I access the phone features with the html panel?
An example is already provided in the demo archive. Below are more examples
With the html panel you can start the programs on you Xperia phone, by using normal links like
<a href="extended://app:start?app=poutlook.exe&arg=contacts">Contacts</a>
<a href="extended://app:start?app=poutlook.exe&arg=calendar">Calendar</a>
<a href="extended://app:start?app=poutlook.exe&arg=tasks">Tasks</a>
<a href="extended://app:start?app=iexplore.exe&arg=http://www.google.it">Open google.it</a>
<a href="extended://app:start?app=cprog.exe">Phone</a>Obviously instead of text you can use images, icons, etc.
Note: it is better to use linked images, they are more clickable than the text links.
Moreover, there are the pseudo-handler go:, for example <a href="extended://go:callog">Call lists</a>. But there is no documentation on this, so if you will find some new features you can share them in the comments of the post Create Xperia X1 Web HTML Panels with our X1 panel creator.

— Help! My Panel sucks!
Retry. Certainly you will need several tests before start making decent panels. First you will make wrong proportions, images, after you will search for new features, etc. For each try, you can uninstall the previously installed panel (start->settings->system->app uninstall, be careful to not do this with the panel in opened state, or you will need to restart the phone) and redo the prodecure. You can also install the panel without uninstalling the old one, if they have same name, the system will ask to install the new panel erasing the old one, answer yes.

— Where i can write comments/suggests/ask for help on this program?
In the comments section of the post Create Xperia X1 Web HTML Panels with our X1 panel creator.

Source: My Sony Ericsson Xperia X1 html panel creator