This question already has an answer here:
Open a webpage in flex application
(1 answer)
Closed 8 years ago.
How to add html page into a flex web application. My requirement is when a button is clicked i want a particular html page to open as popup. Is that possible in Flex Web application,
FYI,
mx:HTML component is not supported in Flex Web Application,
StageWebView is also not supported in Flex Web Application.
I want dynamic Html content to display with in Flex(Web), Please guide me with possible solutions.
You can use RichText component
import flashx.textLayout.formats.WhiteSpaceCollapse;
import spark.utils.TextFlowUtil;
protected function importRichText():void
{
var richTextXML:XML =
<TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
<p fontSize="10">A small normal paragraph</p>
<p fontSize="14" fontWeight="bold">
A medium bold paragraph
</p>
<p fontSize="18">A large
<span fontStyle="italic">mixed-text paragraph</span>
</p>
</TextFlow>
myRichText.textFlow = TextFlowUtil.importFromXML(
richTextXML, WhiteSpaceCollapse.PRESERVE);
}
protected function exportRichText():void
{
var xmlText:XML = TextFlowUtil.export(myRichText.textFlow);
myLabel.text = xmlText.toXMLString();
}
Also you can use mx:Text component
<mx:Text id="myText" width="100%">
<mx:htmlText>
<![CDATA[This is <font color="#FF0000">HTML text</font> in a <b>Halo Text component</b>. Using the <u>htmlText attribute</u> of the <font color="#008800">Text component</font> you can use basic HTML markup.]]>
</mx:htmlText>
</mx:Text>
or
myText.htmlText = "This is <font color='#FF0000'>HTML text</font> in a <b>Halo Text component</b>. Using the <u>htmlText attribute</u> of the <font color='#008800'>Text component</font> you can use basic HTML markup.";
If you are targeting AIR (Adobe Integrated Runtime) instead of Web application, then, you can do this by using,
HTMLLoader (Air 1.0 or above)
HtmlLoader will work only on desktop air application. While StageWebView will work on desktop as well as mobile (android, ios etc) platforms.
Related
How can I dynamically change the styling on the VisualForce Page depending on the Lightning/ Classic.As we are in the process of migrating from Classic to Lightning we want the VF page to be compatible in both the User Interfaces. I am trying to set the div tag based on the UI Theme detection
<div style= "{IF($User.UIThemeDisplayed == 'Theme3'? 'position:relative;left:150': 'position:relative;left:400px')}">
<apex:outputLabel value="ABC"></apex:outputLabel>
</div>
But there is no change in the Alignment, it just shows the text towards the left in both the UI
I just go through the bootstrap framework, its a grid based css framework but I dont know how implement in IBM Websphere Portal 8.
code
<!DOCTYPE html>
<body class="lotusui30dojo tundra locale_en">
<div class="wpthemeFrame">
<header role="banner">
<div class="wpthemeHeader">
<a rel="dynamic-content" href="dyn-cs:id:customTheme_preview"></a>
<div class="wpthemeInner">
<div class="wpthemeLogo wpthemeLeft">
I suggest you to create a normal static HTML Prototype using Bootstrap. Once you make sue it's working properly (in responsive manner) you can start porting the source code to Portal. There are 3 parts:
First you have to copy paste the html part other than the middle content area (ie. the header part and the footer part) into theme_en.html in your custom folder. Then replace the css and JS links header part with
Then replace blocks of code with appropriate Dynamic Spot contents (JSP files). For instance something like,
<a rel="dynamic-content" href="res:/customTheme/themes/html/dynamicSpots/banner.jsp"></a>
Also, please make sure at the end of page you have this,
<div class="wpthemeComplementaryContent" id="wpthemeComplementaryContent" role="region" aria-labelledby="wpthemeComplementaryContentText">
<span class="wpthemeAltText" id="wpthemeComplementaryContentText" >Complementary Content</span>
<a rel="dynamic-content" href="co:config"></a>
</div>
Now we have to take the layout structure from the middle part of HTML area and use it for creating a Template Layout. Remember, in each template layout we have to keep the div for hidden widgets. Better way is to copy one existing layout.html file from Template Layouts and rename it and modify in that. If you are using Bootstrap, you don't have to use default WP classes. But few must be integrated, like DndRow,DndColumn, Componet-Container etc.
Now for each page specific styling, you can manage in Presentation template.
I am new to dojo / dojo mobile.
I am building a screen with a header and a list of items beneath. Very
classical in mobile apps.
<body id="content" style="display: none">
<div data-dojo-type="dojox.mobile.ScrollableView" id="mainView"
data-dojo-props="selected:true,scrollDir:'v'">
<h1 data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Main',fixed:'top'"></h1>
<div data-dojo-type="dojox.mobile.EdgeToEdgeList" style="margin-top: 0px;">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Take Picture...',
icon:'images/plus-30.png',
url:'TakePicture.html',
transition:'slide'">
</div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/PhoneGapDemo.js"></script>
<script src="js/messages.js"></script>
Problem : the first item on the list is hidden behind the header and not
visible.
(Same rendering in IBM Rich Page Editor, IBM Mobile App Simulator, Apple iOS
Simulator and iPhone iOS6)
I juste started the project, I don't have fancy CSS or other ... just
started from scratch, added the ScrollableView, the Header, the
EdgeToEdgeList and then the ListItems.
Workaround is to apply a style on the EdgeToEdgeList to move it 40px down.
But it is not clean and breaks cross-platform compatibility (what if the
header is not always 40px height ?)
I am using DoJo 1.8
Thanks
Seb
Hi even im new to this worklight, well im not sure but got to the properties (go to the design and right click on the edge-to-edge list and select properties) you can see the tag, style , Layout, All options.
go to styles and click the properties and change the postion / lay out. it might help.
please let me know if you get that right.
Solution is twofold
use style="visibility:hidden" in element, as following
<body id="content" style="visibility:hidden">
load "mobileDeviceTheme" explicitly with a element instead of letting Dojo load it asynchronously (this module needs to be loaded early to allow for proper height calculation)
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
before (the load of dojo/dojo.js)
Seb
I have a metro application in which am trying to design Login-screen for my application.Here I want to design my login-screen like a Microsoft login-screen.I found Popup control in XAML but didn't find in html 5.
Is there any special control existed in metro apps.I want to design my login page something like this.
Thank you.
<body style="background-color:#1d3665;">
<div class="loginPage fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Welcome to loginPage</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<table style="position: absolute;background-color:skyblue;">
<tr>
<td><input type="text"><br/></td>
</tr>
<tr>
<td>
<input type="password"/>
</td>
</tr>
</table>
</section>
</div>
Use the WinJS.UI.Flyout control. It could be use for confirmation dialogs, login, popups and other. Also, you can set the position at which is showed.
You can read the documentation here. Here you have the
Guidelines and checklist. And one example.
JavaScript Windows Store Applications don't have access to a built in popup that looks/behaves like the Microsoft Account sign-in dialog.
There is a simple message box experience in Windows.UI.Popups.MessageBox, but it doesn't have the ability to add extra controls etc.
For your experience, you're looking for a modal UI -- to build that you can built it relatively simply yourself (Just add an position: absolute element to the body, and make it fill the screen -- the rest of that elements children / position are in your full control), or as Mayur suggested, use one of the many helper libraries that are out there.
If you're authenticating against Microsoft Account (which provides default Microsoft Account Login Box), you may want to try Live SDK, which will log into Microsoft Account.
And if you want to create your own login mechanism with UI looking somewthing similar to Microsoft Account, you may try JQuery UI Plug-in and customize it. There is inbuilt pop-up control in it.
Take a look in this tutorial. It is very helpful.
http://www.c-sharpcorner.com/UploadFile/63f5c2/login-windows-store-apps/
How do I add HTML inside my Flex app just like the one Tour De Flex uses.
Here's a screenshot: http://screencast.com/t/JH6X1qUBNLI
Use the HTML Component. It is AIR only, so you won't be able to do this in a web based app.
For a web based app, you'll want to use the iFrame trick.
The tag <mx:TextArea> can have a nested <mx:htmlText> tag that can contain HTML code.
For example:
<mx:TextArea id="htmlTextWillAppear"
width="100%" height="100%"
borderStyle="none"
editable="false"
condenseWhite="true">
<mx:htmlText>
<![CDATA[
<p>This is where the HTML will go icluding Links, images, unordered lists, et.</p>
]]>
</mx:htmlText>
</mx:TextArea>
The CDATA tag is needed so that the Flex compiler knows to interpret what follows literally and not as MXML tags.
I use this method to pupulate the text in my Flex website that provides tutorials for creating accessible Flex content.