Jquery Mobile Custom Buttons

Hello Dreamweaver Gurus... I need some help here. How do you go about changing the default style buttons that jquery has, you know, those rectangle buttons with curved corners... I'm looking at have some buttons like this example.. Any help is greatly appreciated. Thanks.

It only took me a while but i finally got it figured out.
BEFORE: AFTER:

Similar Messages

Kaltura video widget and jquery mobile navigation buttons

Greetings,
I inserted the Kaltura video player widget into a jquery mobile project I built in Dreamweaver 5.5. The video works fine, but all of my navigation buttons were compromised. For example, where once there was a circle with a > symbol--indicating Press to Advance--there is now just a circle. And, in my collapsable block fields, the circle with the + or - symbols are also just circles. I believe that the Javascript that Kaltura inserts conflicts with the existing jQuery JS, but I can't find a fix.
I posted a screen shot below to show the buttons missing the > symbol.
Anybody?
Thanks in advance.

Change the theme to ui- theme darkness
@import url("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/darkness/jquery-ui.css");
this will bring back your arrows.
The problem is in the css. And the redmond theme
I will look at it later and see if i can isolate the issue .
Go to kaltura widget folder > skins > ui-themes to see the css
I am interested in how your testing with this widget is working for Android (iOS works fine). I have a few issues and as I can find very few folks working on this could we maybe collaborate? Thanks Tom

Paypal button for jquery mobile app in DW CS5.5

Using the jquery mobile app framework in DW CS5.5 and need help in using Paypal mobile.
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="bn" value="webassist.dreamweaver.4_5_0" />
<input type="hidden" name="business" value="[email protected]" />
<input type="hidden" name="item_name" value="Odor Cat" />
<input type="hidden" name="amount" value="19.50" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="shipping" value="5.50" />
<input type="hidden" name="return" value="http://www.mysite.com/checkout_success.php" />
<input type="hidden" name="cancel_return" value="http://www.mysite.com/checkout_failure.php" />
<input type="hidden" name="undefined_quantity" value="1" />
<input type="hidden" name="receiver_email" value="@hotmail.com" />
<input type="hidden" name="mrb" value="R-3WH47588B4505740X" />
<input type="hidden" name="pal" value="ANNSXSLJLYR2A" />
<input type="hidden" name="no_shipping" value="0" />
<input type="hidden" name="no_note" value="0" />
<input type="submit" name="submit1" id="submit1" value="Pay with PayPal">
</form>
This form button will take the user to paypal for payment, but is not for mobile app.
thanks for your help,
-Jim Balthrop

How do I get someone to respond to my question here?
Let me try again.
With DW CS5.5 when I try to insert a PayPal button into a table (which I always did with DW8) the table in Design View gets scrambled, making it unusable. Please would one of you out there who is much more knowledgeable about DW than me try it and see if there is a solution? If you create a new HTML page in Design view, create a table in it, place the insertion point inside one of the table cells, go to the code view and locate the insertion point there, then paste the PayPal button code at that point. Here's the code:
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="XSXQ9CUMUVLQC">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
Now go back to Design view and see how it looks. If it acts the way it does for me, the table is no longer visible, but if you go to Live View everything looks fine with the table and the button inside it. Of course, I can't design in Live View.
PLEASE can someone out there help me.
Many thanks.

JQuery mobile button icons missing in dwcs6?

Hi
Does anyone know why the button icons for jquery mobile would not be showing in swatches panel?
Any help much appreciated.
dw cs6 v12 b5808
osx 10.7.4

Hi Corey_,
This is NOT an Adobe support site. It's a user-to-user forum.
Have you selected a Theme?
http://www.htmlgoodies.com/html5/mobile/jquery-mobile-in-adobe-dreamweaver-cs6.html#fbid=T J4wk_LxRHZ
Nancy O.

New jquery mobile theme not rendering properly

So I'm finalizing some things on a mobile website that is looking great! m.whitewatertours.com...but we wanted to make a few changes to the theming and used ThemeRoller from jQuery to do so. But after downloading my new theme and applying it to a test page our fabulous looking site now looks like something a 5 yr old created!
I replaced the original <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> code in the Head tag with the new ones mentioned below their respective pages...(generated with the "add new css" button from DW6)
Here's the orginal page looking great: http://m.whitewatertours.com/rafting-hot-deals.html
than the test page with ThemeRoller Theme: http://m.whitewatertours.com/rafting-hot-deals-css-test.html
new code = <link href="jquery-mobile/twt-mobile-theme.css" rel="stylesheet" type="text/css">
Than I tested with a theme created from Fireworks CS6, still looking terrible...
test page with FWCS6 theme: http://m.whitewatertours.com/rafting-hot-deals-css-test-fw.html
I feel like I must've have done something wrong ... but have triple checked everything I can think of!
Jenny

Thanks Sudarshan!
So that did solve part of the problem at first, but was overriding my custom css.
Found there was an extra </script> in the head tag that was screwing up things...
So the css. from Fireworks works!
The css from jQuery ThemeRoller did take a little extra tweaking, did get 2 codes from them one from the file download "index":
the first code worked with the .min extension so thats what im using
<link rel="stylesheet" href="themes/twt-mobile-theme.min.css" />
and another from the download screen:
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
the first code worked with the .min extension so thats what im using
I also ended up creating the "themes" folder within my jquery-mobile folder with all their stuff in there.
Thanks for the help again and getting me pointed in the right direction!!
Jenny

JQuery Mobile Swatches "No Theme Applied."

I am trying to use the new "jQuery Mobile Swatches" tool. To start I followed the video tutorial and created a new "jQuery Mobile with theme" page from the sample provided. No matter what I do, or what I select, or modify in the css, etc.. the window alays says "No Theme Appied." What am I missing?

had the same problem (wrote webpages in HTML 5.0 and CSS 3.0, and linked up the custom themes in the appropriate place). Custom themes were not displayed (i.e. they were all rendered in white color). I tried this:
when creating themes with the ThemeRoller, make sure to check no fields are empty in the Theme Settings (left hand side column) of the themes you created (in my case, the text color field was empty in "button:normal", "button:hover" and "button:pressed". Enter a color there.
when I loaded my page in IE9, it didn't work. I then opened my page with Firefox - there it did work. Afterwards opened it with IE9 again where then it worked too. However, it only worked on my computer. When I opened my page with IE9 on a different computer the custom themes where ... white.
I tried a few more things, like locally hosting the default themes and editing the default themes, but no use, IE won't read it even though it is linked up correctlty.

Help with JQuery Mobile App- Passwords

Hello,
I just downloaded the Dreamweaver CS5.5 trial today onto my MacBook Pro (OS 10.6.6) and am trying to make a JQuery Mobile web app. Once users get to the webpages on their iphone/android, I need them to be able to login so that they can get data specific to that specific user. So far, I have
<div data-role="content">
<form id="form1" name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
<p>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" />
</p>
<p>
    <label for="pwd">Password:</label>
<input type="password" name="pwd" id="pwd" />
</p>
<p>
<input type="submit" name="doLogin" id="doLogin" value="Login" />
</p>
</form>
     </div>
This makes a nice looking username and password login area, but now I do not know what to do after the user inputs their information and clicks on the "Login" button. Somehow, I need it to recognize a correct username/password, and link to a different page if it is correct, and produce an error if the username/password combination is incorrect. Any help would be greatly appreciated; I'm really new at this.
Thank you.

Hi Lydia, first off welcome to the world of Dreamweaver!
Much like anything in DW it takes time to learn these things, especially the new technologies. Here is a page in the Adobe Developer Center that has many tutorials to help you get on the right track with the mobile stuff.
Build dynamic websites and web applications | Dreamweaver Developer Center http://adobe.ly/kBZmhL

User Login with jquery mobile

I have this code that works perfectly but when i embed with Jquery mobile it fails to work. its a user authenication code
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

<%
    ' *** Validate request to log in to this site.
    MM_LoginAction = Request.ServerVariables("URL")
    If Request.QueryString <> "" Then MM_LoginAction = MM_LoginAction + "?" + Server.HTMLEncode(Request.QueryString)
    MM_valUsername = CStr(Request.Form("username"))
    If MM_valUsername <> "" Then
        Dim MM_fldUserAuthorization
        Dim MM_redirectLoginSuccess
        Dim MM_redirectLoginFailed
        Dim MM_loginSQL
        Dim MM_rsUser
        Dim MM_rsUser_cmd
        MM_fldUserAuthorization = ""
        MM_redirectLoginSuccess = "source.asp"
        MM_redirectLoginFailed = "error.asp"
        MM_loginSQL = "SELECT Username, Password"
        If MM_fldUserAuthorization <> "" Then MM_loginSQL = MM_loginSQL & "," & MM_fldUserAuthorization
        MM_loginSQL = MM_loginSQL & " FROM dbo.Test_Register_Users WHERE Username = ? AND Password = ?"
        Set MM_rsUser_cmd = Server.CreateObject ("ADODB.Command")
        MM_rsUser_cmd.ActiveConnection = MM_VT_STRING
        MM_rsUser_cmd.CommandText = MM_loginSQL
        MM_rsUser_cmd.Parameters.Append MM_rsUser_cmd.CreateParameter("param1", 200, 1, 70, MM_valUsername) ' adVarChar
        MM_rsUser_cmd.Parameters.Append MM_rsUser_cmd.CreateParameter("param2", 200, 1, 50, Request.Form("password")) ' adVarChar
        MM_rsUser_cmd.Prepared = true
        Set MM_rsUser = MM_rsUser_cmd.Execute
        If Not MM_rsUser.EOF Or Not MM_rsUser.BOF Then
            ' username and password match - this is a valid user
            Session("MM_Username") = MM_valUsername
            If (MM_fldUserAuthorization <> "") Then
                Session("MM_UserAuthorization") = CStr(MM_rsUser.Fields.Item(MM_fldUserAuthorization).Value)
            Else
                Session("MM_UserAuthorization") = ""
            End If
            if CStr(Request.QueryString("accessdenied")) <> "" And true Then
                MM_redirectLoginSuccess = Request.QueryString("accessdenied")
            End If
            MM_rsUser.Close
            Response.Redirect(MM_redirectLoginSuccess)
        End If
        MM_rsUser.Close
        Response.Redirect(MM_redirectLoginFailed)
    End If
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
    <h1>Header</h1>
</div>
<div data-role="content">
    <form id="form1" name="form1" method="POST" action="login_code.asp">
      <table width="325" border="0" cellpadding="3" cellspacing="3">
        <tr>
          <td width="94"> </td>
          <td width="210"> </td>
        </tr>
        <tr>
          <td>Username</td>
          <td><input type="text" name="username" id="username" /></td>
        </tr>
        <tr>
          <td>Password</td>
          <td><input type="text" name="password" id="password" /></td>
        </tr>
        <tr>
          <td colspan="2"><div align="center">
            <input type="submit" name="button" id="button" value="Submit" />
          </div></td>
        </tr>
      </table>
    </form>
</div>
<div data-role="footer">
    <h4>Footer</h4>
</div>
</div>
</body>
</html>

"Fails to work" in what way?

WCEM:clicking on custom button(Excel Downlaod) giving message "An error occurred; please try again. If the error persists, please contact technical support."

Hi Expert,
I need help.
I created a custom button to download data to an excel sheet. after clicking the button I am getting message
"An error occurred; please try again. If the error persists, please contact technical support.".
I tried debugging WCEM, but it is not even reaching that point.
Your help will be highly appreciated.
here is the code.
BitContentview.XHTML
<wec:commandButton id="bdtexcel" immediate="true" actionListener="#{cc.vch.DownloadBITData}" type="submit" value="#{i18n['invoices.ui.openitems.printSelected']}"/>
UI-repository.xml
<ViewComponent name="BITContentView" componentHandlerClassName="com.cpr.cprwec.app.comm.module.ebpp.ui.handler.impl.BITDetailViewVCHandler"/>
BITDetailViewVCHnadler.java
package com.cpr.cprwec.app.comm.module.ebpp.ui.handler.impl;
import com.cpr.cprwec.app.comm.module.ebpp.backendobject.interf.EbppBackend;
import java.io.IOException;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import javax.faces.context.FacesContext;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import com.cpr.cprwec.app.comm.module.ebpp.modulemgmt.impl.EbppModuleAccessImpl;
import com.cpr.cprwec.app.comm.module.ebpp.modulemgmt.interf.EbppModuleAccess;
import com.cpr.cprwec.app.comm.module.ebpp.ui.dto.impl.DisputeDataDTOImpl;
import com.cpr.cprwec.app.comm.module.ebpp.ui.dto.impl.OpenItemDTOImpl;
import com.cpr.cprwec.app.comm.module.ebpp.ui.dto.interf.DisputeDataDTO;
import com.cpr.cprwec.app.comm.module.ebpp.ui.dto.interf.OpenItemDTO;
import com.cpr.cprwec.app.comm.module.ebpp.ui.dto.impl.BITDataDTOImpl;
import com.cpr.cprwec.app.comm.module.ebpp.ui.dto.interf.BITDataDTO;
import com.cpr.cprwec.app.comm.module.ebpp.ui.dto.impl.BITDetailDTOImpl;
import com.cpr.cprwec.app.comm.module.ebpp.ui.dto.interf.BITDetailDTO;
import com.sap.wec.app.common.module.common.attachment.businessobject.interf.Attachment;
import com.sap.wec.tc.core.backend.sp.jco.JCoConnection;
import com.sap.wec.tc.core.businessobject.BusinessObjectException;
import com.sap.wec.tc.core.common.exceptions.ApplicationBaseRuntimeException;
import com.sap.wec.tc.core.common.logging.WCFLocation;
import com.sap.wec.tc.core.common.searching.businessobject.impl.GenericSearch;
import com.sap.wec.tc.core.common.searching.businessobject.interf.GenericSearchReturnResultData;
import com.sap.wec.tc.core.common.util.GenericFactory;
import com.sap.wec.tc.core.common.util.Message;
import com.sap.wec.tc.core.common.util.MessageList;
import com.sap.wec.tc.core.common.util.table.Table;
import com.sap.wec.tc.core.common.util.table.TableRow;
import com.sap.wec.tc.core.modulemgmt.ForeignModuleAccess;
import com.sap.wec.tc.core.modulemgmt.ModuleAccess;
import com.sap.wec.tc.core.modulemgmt.exceptions.ModuleInactiveException;
import com.sap.wec.tc.core.modulemgmt.exceptions.ModuleLifecycleException;
import com.sap.wec.tc.core.runtime.WecFrameworkRuntime;
import com.sap.wec.tc.core.runtime.WecSession;
import com.sap.wec.tc.core.runtime.jsf.WecFrameworkRuntimeJSF;
import com.sap.wec.tc.core.runtime.jsf.composition.PageManagerBean;
import com.sap.wec.tc.core.runtime.navigation.NavigationCondition;
import com.sap.wec.tc.core.ui.composition.menu.MenuManager;
import com.sap.wec.tc.core.ui.composition.menu.MenuMetadataException;
import com.sap.wec.tc.core.ui.vc.BuildTime;
import com.sap.wec.tc.core.ui.vc.NavigationParameterBinding;
import com.sap.wec.tc.core.ui.vc.RequestParameterBinding;
import com.sap.wec.tc.core.ui.vc.impl.ViewComponentHandlerBaseImpl;
import com.cpr.cprwec.app.comm.module.ebpp.businessobject.interf.BIT;
import com.cpr.cprwec.app.comm.module.ebpp.businessobject.impl.BITImpl;
public class BITDetailViewVCHandler extends
        ViewComponentHandlerBaseImpl<EbppModuleAccess> {
    protected static final WCFLocation LOCATION = WCFLocation
            .getInstance(BITDetailViewVCHandler.class.getName());
    public BITDataDTO bitDataDTO;
    public BITDetailDTO bitDetailDTO;
    public List<BITDataDTO> BITDataDTOList;
    public List<BITDetailDTO> BITDetailDTOList;
    public boolean noBITData;
    public boolean noBITDetail;
    public boolean renderPanel = true;
    public boolean isDownloadBITData;
    public boolean isDownloadBITDetail;
    public boolean downloadStarted=false;
    public boolean BITFound =false;
    public boolean isBITFound() {
        return BITFound;
    public void setDownloadStarted( boolean downloadStarted ){
        this.downloadStarted = downloadStarted;
    public boolean getDownloadStarted(){
        return this.downloadStarted;
    public void setBITFound(boolean BITFound) {
        this.BITFound = BITFound;
    public String getObjectID() {
        return objectID;
    public void setObjectID(String objectID) {
        this.objectID = objectID;
    public List<BITDataDTO> getBITDataDTOList() {
        return BITDataDTOList;
    public List<BITDetailDTO> getBITDetailDTOList() {
        return BITDetailDTOList;
    public Boolean getNoBITData() {
        return noBITData;
    public Boolean getNoBITDetail() {
        return noBITDetail;
    public Boolean getRenderPanel() {
        return renderPanel;
    private static final int DEFAULT_BUFFER_SIZE = 1024000;
    public Attachment attachmentData;
    public Attachment getAttachmentData() {
        return attachmentData;
    @RequestParameterBinding(maxLength = 1024)
    protected String objectID;
    @BuildTime
    public String processBuildTime() throws BusinessObjectException {
        BIT BIT = null;
        noBITData = noBITDetail = false;
        renderPanel = true;
        if (isLoggedIn()) {
            if ( isDownloadBITData == true ){
                this.downloadBITDataExcel();
            else {
            this.getModuleAccess().getBITBO().clearMessages();
            BIT = this.moduleAccess.getBITBO().getBITFromBackend(objectID);
            BITDataDTOList = BIT.getBITDataDTOList();
            BITDetailDTOList = BIT.getBITDetailDTOList();
            MessageList objectData = this.getModuleAccess().getBITBO()
                    .getMessageList();
            if (objectData.size() > 0) {
                noBITData = noBITDetail = true;
                renderPanel = false;
                this.addMessageList(objectData);
        return checkLoginCondition();
    private boolean isLoggedIn() {
        return checkLoginCondition() == null;
    private String checkLoginCondition() {
        NavigationCondition navCondition = getNavigationCondition("login");
        if (!navCondition.isFullfiled()) {
            navCondition.addToNavigationStack();
            return navCondition.getOutcome();
        return null;
    public String downloadBITData(){
        downloadStarted = true;
        isDownloadBITData = true;
        downloadBITDataExcel();
        return checkLoginCondition();
    public void downloadBITDataExcel() {
    //    dummyDebug("downloadBITDataExcel", BITDataDTOList.size(), "", "" );
        if (BITDataDTOList.size() > 0) {
            try {
                attachmentData = this.getModuleAccess().getDownloadBO()
                        .getBITDataExcel(BITDataDTOList);
                if (attachmentData != null) {
                    FacesContext faces = FacesContext.getCurrentInstance();
                    HttpServletResponse response = (HttpServletResponse) faces
                            .getExternalContext().getResponse();
                    response.reset();
                    response.setContentType(attachmentData
                            .getAttachmentMimeType());
                    response.setContentLength(attachmentData
                            .getAttachmentContent().length);
                    response.setHeader("Content-disposition",
                            "attachment;filename="
                                    + attachmentData.getAttachmentName());
                    response.setBufferSize(DEFAULT_BUFFER_SIZE);
                    ServletOutputStream out;
                    try {
                        out = response.getOutputStream();
                        out.write(attachmentData.getAttachmentContent());
                        out.flush();
                        faces.responseComplete();
                    } catch (IOException e) {
                        throw new ApplicationBaseRuntimeException(
                                "Problem opening file", e);
                    } finally {
                        attachmentData = null;
            } catch (BusinessObjectException e) {
                e.printStackTrace();
        isDownloadBITData = false;

Thanks Hamendra for checking the issue.
I am setting up breakpoints in WCEM, tab JAVA EE then from menu RUN->Toggle brekpoints and then debug configuration.
the breakpoints are in several places in handler class BITDetailviewVCHandler class including method downloadBITData.
this method I am calling from BitContentview.XHTML
<wec:commandButton id="bdtexcel" immediate="true" actionListener="#{cc.vch.DownloadBITData}" type="submit" value="#{i18n['invoices.ui.openitems.printSelected']}"/>
When the BIT page is loading the control stops at the breakpoint.
but it is not stopping there when i click the 'Excel Download' button.
How do I get the log file. I am very new to WCEM, please guide me.
I tried to debug the UI using Google chrome. it is giving me the following error.
POST https://<>/<>/<>/<>HomePage.jsf?wec-appid=<>MAINAPP6&wec-locale=en_US 500 (Internal Server Error)
when I expand the node
c.event.trigger:<>/<>/javax.faces.resource/sap/comp.theme/templates/jquery/lib/jquery-1.4.2.min.js.jsf:54
c.event.trigger:<>/<>/javax.faces.resource/sap/comp.theme/templates/jquery/lib/jquery-1.4.2.min.js.jsf:54
c.event.trigger:<>/<>/javax.faces.resource/sap/comp.theme/templates/jquery/lib/jquery-1.4.2.min.js.jsf:66
(anonymous function):<>/<>/javax.faces.resource/sap/comp.theme/templates/jquery/lib/jquery-1.4.2.min.js.jsf:30
c.extend.each:<>/<>/javax.faces.resource/sap/comp.theme/templates/jquery/lib/jquery-1.4.2.min.js.jsf:24 c.fn.c.each:<>/<>/javax.faces.resource/sap/comp.theme/templates/jquery/lib/jquery-1.4.2.min.js.jsf:66 c.fn.extend.trigger:<>/<>/javax.faces.resource/<>dev/comp.theme/templates/jquery/js/commandButton.js.jsf:31
com.sap.wec.commandButton.submitForm:<>/<>/main/<>HomePage.jsf?wec-appid=<>MAINAPP6&objectID=500000233&page=D61CFFF8E75D48A1B348F315D209EFF9&wec-locale=en_US:48 onclick
Navigated to https://wsapdjd803.<>.ca:<>/<>/main/<>HomePage.jsf?wec-appid=<>MAINAPP6&wec-locale=en_US
Seems to be it is failing somewhere commandButton-related JavaScript functions
Thanks
Subassish

Jquery Mobile Website does not preview properly in Dreamweaver's Live View or in my web browser

I'm using Dreamweaver 12.0 Build 5861.
I can't figure out what I'm doing wrong. I go
File / New / Page from Sample / Mobile Starters / JQuery Mobile with theme (local).
I then save my page.
Then when I go to preview my new page in Live View, it shows a page without any styles, etc.
When I upload the page and additional files created by Dreamweaver to my server. I preview it and it will look like the default style JQuery page, but when I click on the button to see the content for that page, there is not a "back" button to come back to my home page.
Also, when I try to implement a JQuery mobile swatch, the Swatch window says "No Theme Applied."
I feel like I'm missing something really simple,,, but what? Is there a setting I need to change or am I missing a step? I have looked at many video tutorials online and I believe I am taking the same steps.

You're missing the viewport meta attribute. Add ths to your <head> section.
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
And add this to Line 13:
<div data-role="page" id="page" data-add-back-btn="true">
Do this for all page IDs.

JQuery Mobile on Phone Gap for Android DW CS 5.5

Hi,
I thought that I should take my dynamic Jquery Mobile site to the test as a native application by building it with the Dreamweaver CS 5.5 Phone Gap extension. Building it and getting it up as an application on the Android SDK emulator was pretty straightforward.
The Jquery Mobile site consists of 1 multipage page starting with a login form (userid, password and a submit button). The PHP page with the MySQL database access is called using AJAX. If login successful, PHP returns an XML array with a number of categories that will be listed (ul/li) on the subsequent page. Now, this is all we need to know for now.
The corresponding Phone Gap application loads fine on the Android emulator, a click on the app icon kicks off the splash page and the login form comes up exactly like it does when run as a Jquery Mobile web page but nothing happens when I click the submit button. Trying to understand I started the emulator loggin (adb logcat) and found this (I am listing only the latest log items):
===
I/InputDispatcher(   74): Dropped event because it is stale.
D/dalvikvm(   74): GC_CONCURRENT freed 525K, 14% free 9234K/10695K, paused 37ms+46ms
D/dalvikvm( 396): GC_CONCURRENT freed 896K, 13% free 6997K/8007K, paused 23ms+40ms
D/dalvikvm( 137): GC_CONCURRENT freed 457K, 6% free 7729K/8199K, paused 24ms+11ms
D/SntpClient(   74): request time failed: java.net.SocketException: Address family not supported by protocol
W/webview ( 396): Stale touch event ACTION_DOWN received from webcore; ignoring
W/webview ( 396): Got ACTION_DOWN but still waiting on stale event. Catching up.
W/webview ( 396): Stale touch event ACTION_DOWN received from webcore; ignoring
===
Every time I click/tap the submit button I get "Stale touch event..." which I strongly relate to that nothing happens.
Anyone tried this (Phone Gapping Jquery Mobile) or having a clue of where to look next?
Thanks
/Ralf

wow....Matt is has been a while since i first build the sample app using the jquery mobile and phonegap in DW5.5. Since I faced lots of challenge with getting the app to talk to mysql, i decided to go with "Flash Builder 4.5.1". I have already develped and deployed both android and ios app using flash builder.
I don't recall how i develped the sample app with jquery mobile and phonegap in DW5.5. As far as i can recall...i followed a tutorial provided on Adobe Developer Connection under DW5.5. I don't have the link anymore...i will try to find it for you.

JQuery Mobile with Adobe Spry?

Hi everyone,
I'd like to use a Spry dataset in a jQuery Mobile page. At the moment it doesn't work, only displaying the field names instead of actual data. It seems like nothing Spry works on the page, I wondered if the two are compatible?
I created a separate page with minimal code with a Spry dataset and it works OK, so I guess the code is OK? When it's copied to the jQuery Mobile page no data is displayed, just the field names.
Can anyone help? I'd really like to have Spry functionality in the mobile application!
Thanks

I have this problem also, as posted in the jquery mobile forum:
What would cause Spry Validation to allow my Form to be submitted when the "Required" fields are left blank? Here is what is happening:
- I leave the fields blank and click my "Submit" button
- I briefly see the fields go Red with message "A Value is required"
- Then the Form submits anyway (tables update/no errors)
Here is the full code listing: http://cerberus.clearwave.com/jerry/spry_example_ctt1b.pdf
Notice:
- I'm using jquery mobile 1.1.0 on my page
- I'm inserting data into two tables at one time (Lines 8, 196, 203)
- I have Spry text Validation on only a few fields for now (ex. Line 483)
Here is a design view of my page:

JQuery Mobile with Trinidad/ADF Faces

Hi
Is it possible to use JQuery Mobile with Trinidad/ADF Faces? I tried using JQuery Mobile with Trinidad, but the trinidad components are not rendering on the page. Is there a way out?
Below is my code:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html" xmlns:trh="http://myfaces.apache.org/trinidad/html"
xmlns:tr="http://myfaces.apache.org/trinidad" xmlns:dvtt="http://xmlns.oracle.com/dss/trinidad/faces">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<trh:html>
<trh:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css"/>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</trh:head>
<trh:body>
<div data-role="page" data-theme="c" id="page">
<div data-role="header" data-theme="e" id="header">
<h1>Wireless > Logon</h1>
<a href="../../ data-icon="home" data-iconpos="notext" data-direction="reverse"
class="ui-btn-right jqm-home">Home</a>
</div>
</div>
<tr:form>
<tr:commandButton id="cbt" text="command button"/>
</tr:form>
</trh:body>
</trh:html>
</f:view>

</jsp:root>
Regards
Navin

With out the JQuery mobile settings ie the css and js entries. The trinidad components are rendering. Below is my web.xml file.
<?xml version = '1.0' encoding = 'windows-1252'?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.faces.PARTIAL_STATE_SAVING</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<description>If this parameter is true, there will be an automatic check of the modification date of your JSPs, and saved state will be discarded when JSP's change. It will also automatically check if your skinning css files have changed without you having to restart the server. This makes development easier, but adds overhead. For this reason this parameter should be set to false when your application is deployed.</description>
<param-name>org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION</param-name>
<param-value>false</param-value>
</context-param>
<filter>
<filter-name>trinidad</filter-name>
<filter-class>org.apache.myfaces.trinidad.webapp.TrinidadFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>trinidad</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>FORWARD</dispatcher>
<dispatcher>REQUEST</dispatcher>
<dispatcher>ERROR</dispatcher>
</filter-mapping>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>resources</servlet-name>
<servlet-class>org.apache.myfaces.trinidad.webapp.ResourceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>resources</servlet-name>
<url-pattern>/adf/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>resources</servlet-name>
<url-pattern>/afr/*</url-pattern>
</servlet-mapping>
</web-app>

Adding custom buttons to the Rich Text Editor in CQ

Hi,
I have added custom buttons to the rich text editor in order to allow our editors to add specific content, such as popovers, custom videos and other data necessary data.
I have successfully modifed the Rich Text editor so, that it includes the custom buttons in the actions panel.
I have also managed to make the buttons work and include the data where necessary, when user highlights the text and clicks on a certain button.
The last bit I am struggling with, is the visual feedback we give to the users when this text has associated action with it.
E.g. when we select this text and make it bold when we click on the word B the button B becomes highlighted in the actions panel, later when we continue typing our text and click again on "bold" the letter B becomes highlighted again.
Is there any button related callback/method I could overwrite to add this functionality and make my button highlighted ?
Thanks,
Puzanovs

After lot's of thinking found a solution....
Essentially the first step is to extend the CQ.form.rte.plugins.Plugin in your custom button.
Then during the UI initialisation we create our "custom"
var pressButton = new ui.TbElement("press-button", this, true,this.getTooltip("press-button")); // Essential extend of the button
setInterval(function() {
                 if(window.jQuery) {
                     window.jQuery(document).ready(function () {
                         window.jQuery(".x-edit-glossary-insert").css({width:45,"background-image":"none"}); // Ignore the background
                         window.jQuery(".x-edit-glossary-insert").text("Press Button"); // Set the name
                        $(document).on({
                            mouseenter: function(){
                              window.jQuery(".x-edit-glossary-insert").html("<b>Press Button</b>"); // Set the name bold
                            mouseleave: function(){
                           window.jQuery(".x-edit-glossary-insert").html("Press Button"); // Set the name normal
                         }}, '.press-button');
             }, 100);
tbGenerator.addElement("press-button", plg.Plugin.SORT_LISTS, pressButton, 10); // element is inserted
Every time the element is inserted I add the following html
<span class="press-button">Test peter</span>
Now, every time in the editor, the content editor mouse overs the custom button it is higlighted in the RTE))

SAPUI5 custom button control based on SAPUI5 button

I would like to build a custom button with. The reason for this is because I reuse this button a lot of time.
- It has two style classes.
- The button should extend the SAPUI5 button.
- Uses the jQuery append() function.
How I built my button up to now:
this.btnMyTeam = new sap.ui.commons.Button({
text : "My Team" + "\n\n" + LanguageEntityAdapter.getInstance().getTextForLabelname("APP_NAME_MYTEAM")+"\n\n\n\n\n",
press : function() {
oController.onMyTeamButton();
this.btnMyTeam.addStyleClass("StartScreenButton MyTeamImage");
//in the onAfterRendering function of the controller
this.btnMyTeam.$().append(
"<span style=\"color: #8DA3D3 !important; font-size: 25px;\">" + this.getNumberOfDays() + "</span><span>\n\n" + LanguageEntityAdapter.getInstance().getTextForLabelname("MY_TIME_CORRECTION_ISSUES") + "</span>");
This is not a nice way !!!
So I would like to extend the sap-ui.commons.button. And tried like this. but no success at all.
sap.ui.commons.Button.extend("StartScreenButton", {
metadata : {
properties : {
upperText : {type : "string"},
htmlAppend1 : {type : "string"},
htmlAppend2 : {type : "string"},
upperText : {type : "string"},
backgroundImgStyleClass : {type : "string"},
events : {
onPress : {
init : function() {
this.innerButton = new sap.ui.commons.Button({
text:this.upperText,
this.innerButton.addStyleClass(this.backgroundImgStyleClass);
this.innerButton.addStyleClass("StartScreenButton");
onAfterRendering : function() {
this.append("");
renderer : {
render : function(oRm, oControl){
oRm.renderControl(oControl);
oRm.renderControl(this.innerButton);

Hi Dominik,
maybe you can use the following example as an orientation.
Regards
Michael

Jquery Mobile Custom Buttons

Similar Messages

Maybe you are looking for