I am developing a screen using ADF (Jdeveloper). As shown in the image the red dotted line must be aligned well, meaning the start of all the fields should be in the same line. Please let me know how can I attain this using Oracle ADF.
Image Screenshot
I need my screen to look like this:
Image Screenshot
I am currently using panelHeader for the heading and panelGroupLayout for the horizontal and vertical alignment and PanelFormLayout for the aligned form blocks. I also tried using PanelGridLayout which also did not give me desired results.
<af:panelHeader text="#{TESTviewcontrollerBundle.REPLENISHMENT}" id="ph10"
size="3" styleClass="AFStretchWidth">
<f:facet name="context"/>
<f:facet name="menuBar"/>
<f:facet name="toolbar"/>
<f:facet name="legend"/>
<f:facet name="info"/>
<af:panelGroupLayout id="pgl20" layout="vertical">
<af:panelGroupLayout id="pgl18" layout="horizontal"
styleClass="AFStretchWidth"
valign="top">
<af:panelFormLayout id="pfl5" maxColumns="1"
inlineStyle="border-color:Lime; border-width:3px; border-style:dotted;"
styleClass="AFStretchWidth">
<f:facet name="footer"/>
<af:selectBooleanCheckbox value="#{bindings.DefaultSizeProfile.inputValue}"
shortDesc="#{bindings.DefaultSizeProfile.hints.tooltip}"
id="sbc1"
label="#{bindings.DefaultSizeProfile.label}"/>
<af:selectBooleanCheckbox value="#{bindings.ApplyProfPresStock.inputValue}"
shortDesc="#{bindings.ApplyProfPresStock.hints.tooltip}"
id="sbc2"
label="#{bindings.ApplyProfPresStock.label}"/>
<af:selectBooleanCheckbox value="#{bindings.WhCrossLinkInd.inputValue}"
shortDesc="#{bindings.WhCrossLinkInd.hints.tooltip}"
id="sbc3"
label="#{bindings.WhCrossLinkInd.label}"/>
<af:selectBooleanCheckbox value="#{bindings.LocActivityInd.inputValue}"
shortDesc="#{bindings.LocActivityInd.hints.tooltip}"
id="sbc4"
label="#{bindings.LocActivityInd.label}"/>
<af:selectBooleanCheckbox value="#{bindings.LocDlvryInd.inputValue}"
shortDesc="#{bindings.LocDlvryInd.hints.tooltip}"
id="sbc5"
label="#{bindings.LocDlvryInd.label}"/>
<af:selectBooleanCheckbox value="#{bindings.RejectStoreOrdInd.inputValue}"
shortDesc="#{bindings.RejectStoreOrdInd.hints.tooltip}"
id="sbc6"
label="#{bindings.RejectStoreOrdInd.label}"/>
</af:panelFormLayout>
<af:panelFormLayout id="pfl7" maxColumns="1"
inlineStyle="border-color:Gray; border-width:3px; border-style:groove;"
styleClass="AFStretchWidth">
<f:facet name="footer"/>
<af:selectOneChoice value="#{bindings.DistributionRule.inputValue}"
label="#{bindings.DistributionRule.label}"
required="#{bindings.DistributionRule.hints.mandatory}"
shortDesc="#{bindings.DistributionRule.hints.tooltip}"
id="soc15">
<f:selectItems value="#{bindings.DistributionRule.items}"
id="si15"/>
</af:selectOneChoice>
<af:selectOneChoice value="#{bindings.StorageType.inputValue}"
label="#{bindings.StorageType.label}"
required="#{bindings.StorageType.hints.mandatory}"
shortDesc="#{bindings.StorageType.hints.tooltip}"
id="soc16">
<f:selectItems value="#{bindings.StorageType.items}"
id="si16"/>
</af:selectOneChoice>
<af:inputText value="#{bindings.ReplOrderDays.inputValue}"
label="#{bindings.ReplOrderDays.hints.label}"
required="#{bindings.ReplOrderDays.hints.mandatory}"
columns="#{bindings.ReplOrderDays.hints.displayWidth}"
maximumLength="#{bindings.ReplOrderDays.hints.precision}"
shortDesc="#{bindings.ReplOrderDays.hints.tooltip}"
id="it1">
<f:validator binding="#{bindings.ReplOrderDays.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.OrdWorksheetCleanUpDelay.inputValue}"
label="#{bindings.OrdWorksheetCleanUpDelay.hints.label}"
required="#{bindings.OrdWorksheetCleanUpDelay.hints.mandatory}"
columns="#{bindings.OrdWorksheetCleanUpDelay.hints.displayWidth}"
maximumLength="#{bindings.OrdWorksheetCleanUpDelay.hints.precision}"
shortDesc="#{bindings.OrdWorksheetCleanUpDelay.hints.tooltip}"
id="it2">
<f:validator binding="#{bindings.OrdWorksheetCleanUpDelay.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.WfOrderLeadDays.inputValue}"
label="#{bindings.WfOrderLeadDays.hints.label}"
required="#{bindings.WfOrderLeadDays.hints.mandatory}"
columns="#{bindings.WfOrderLeadDays.hints.displayWidth}"
maximumLength="#{bindings.WfOrderLeadDays.hints.precision}"
shortDesc="#{bindings.WfOrderLeadDays.hints.tooltip}"
id="it3">
<f:validator binding="#{bindings.WfOrderLeadDays.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.LookAheadDays.inputValue}"
label="#{bindings.LookAheadDays.hints.label}"
required="#{bindings.LookAheadDays.hints.mandatory}"
columns="#{bindings.LookAheadDays.hints.displayWidth}"
maximumLength="#{bindings.LookAheadDays.hints.precision}"
shortDesc="#{bindings.LookAheadDays.hints.tooltip}"
id="it4">
<f:validator binding="#{bindings.LookAheadDays.validator}"/>
</af:inputText>
<af:panelLabelAndMessage label="#{bindings.CostMoney.hints.label}"
id="plam13">
<af:panelGroupLayout id="pgl22" layout="horizontal">
<af:inputText value="#{bindings.CostMoney.inputValue}"
required="#{bindings.CostMoney.hints.mandatory}"
columns="#{bindings.CostMoney.hints.displayWidth}"
maximumLength="#{bindings.CostMoney.hints.precision}"
shortDesc="#{bindings.CostMoney.hints.tooltip}"
id="it5" simple="true">
<f:validator binding="#{bindings.CostMoney.validator}"/>
</af:inputText>
<af:spacer width="5" height="10" id="s8"/>
<af:outputText id="ot12"
value="#{TESTviewcontrollerBundle.PERCENT}"
styleClass="RetailInputOutputFormFieldText"/>
</af:panelGroupLayout>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage id="plam14"
label="#{bindings.TargetRoi.hints.label}">
<af:panelGroupLayout id="pgl26" layout="horizontal">
<af:inputText value="#{bindings.TargetRoi.inputValue}"
required="#{bindings.TargetRoi.hints.mandatory}"
columns="#{bindings.TargetRoi.hints.displayWidth}"
maximumLength="#{bindings.TargetRoi.hints.precision}"
shortDesc="#{bindings.TargetRoi.hints.tooltip}"
id="it6" simple="true">
<f:validator binding="#{bindings.TargetRoi.validator}"/>
</af:inputText>
<af:spacer width="5" height="10" id="s9"/>
<af:outputText value="#{TESTviewcontrollerBundle.PERCENT}"
id="ot13"
styleClass="RetailInputOutputFormFieldText"/>
</af:panelGroupLayout>
</af:panelLabelAndMessage>
<af:inputText value="#{bindings.MaxWeeksSupply.inputValue}"
label="#{bindings.MaxWeeksSupply.hints.label}"
required="#{bindings.MaxWeeksSupply.hints.mandatory}"
columns="#{bindings.MaxWeeksSupply.hints.displayWidth}"
maximumLength="#{bindings.MaxWeeksSupply.hints.precision}"
shortDesc="#{bindings.MaxWeeksSupply.hints.tooltip}"
id="it7">
<f:validator binding="#{bindings.MaxWeeksSupply.validator}"/>
</af:inputText>
<af:inputText value="#{bindings.MaxScalingIterations.inputValue}"
label="#{bindings.MaxScalingIterations.hints.label}"
required="#{bindings.MaxScalingIterations.hints.mandatory}"
columns="#{bindings.MaxScalingIterations.hints.displayWidth}"
maximumLength="#{bindings.MaxScalingIterations.hints.precision}"
shortDesc="#{bindings.MaxScalingIterations.hints.tooltip}"
id="it8">
<f:validator binding="#{bindings.MaxScalingIterations.validator}"/>
</af:inputText>
</af:panelFormLayout>
</af:panelGroupLayout>
<af:panelGroupLayout id="pgl19" layout="horizontal"
valign="top">
<af:panelHeader text="#{TESTviewcontrollerBundle.WAREHOUSE_STORAGE}"
id="ph1" size="3"
inlineStyle="border-color:Black; border-style:solid; border-width:2.0px;"
styleClass="AFStretchWidth">
<f:facet name="context"/>
<f:facet name="menuBar"/>
<f:facet name="toolbar"/>
<f:facet name="legend"/>
<f:facet name="info"/>
<af:panelFormLayout id="pfl9"
styleClass="AFStretchWidth"
inlineStyle="border-color:Gray; border-style:dotted; border-width:2px;">
<f:facet name="footer"/>
<af:selectOneChoice value="#{bindings.CostWhStorageMeas.inputValue}"
label="#{bindings.CostWhStorageMeas.label}"
required="#{bindings.CostWhStorageMeas.hints.mandatory}"
shortDesc="#{bindings.CostWhStorageMeas.hints.tooltip}"
id="soc17" autoSubmit="true">
<f:selectItems value="#{bindings.CostWhStorageMeas.items}"
id="si17"/>
</af:selectOneChoice>
<af:panelLabelAndMessage label="#{bindings.CostWhStorageUom.hints.label}"
id="plam10">
<af:panelGroupLayout id="pgl16"
layout="horizontal">
<af:inputComboboxListOfValues id="inputComboboxListOfValues1"
popupTitle="Search and Select: #{bindings.CostWhStorageUom.hints.label}"
value="#{bindings.CostWhStorageUom.inputValue}"
model="#{bindings.CostWhStorageUom.listOfValuesModel}"
required="#{bindings.CostWhStorageUom.hints.mandatory}"
columns="#{bindings.CostWhStorageUom.hints.displayWidth}"
shortDesc="#{bindings.CostWhStorageUom.hints.tooltip}"
simple="true"
partialTriggers="soc17"
autoSubmit="true">
<f:validator binding="#{bindings.CostWhStorageUom.validator}"/>
</af:inputComboboxListOfValues>
<af:outputText value="#{bindings.CostWhStorageUomDesc.inputValue}"
id="ot9"
partialTriggers="soc17 inputComboboxListOfValues1"
styleClass="RetailInputOutputFormFieldText"/>
</af:panelGroupLayout>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.CostWhStorage.hints.label}"
id="plam18">
<af:panelGroupLayout id="pgl27"
layout="horizontal">
<af:inputText value="#{bindings.CostWhStorage.inputValue}"
required="#{bindings.CostWhStorage.hints.mandatory}"
columns="#{bindings.CostWhStorage.hints.displayWidth}"
maximumLength="#{bindings.CostWhStorage.hints.precision}"
shortDesc="#{bindings.CostWhStorage.hints.tooltip}"
id="it9" partialTriggers="soc17"
simple="true">
<f:validator binding="#{bindings.CostWhStorage.validator}"/>
</af:inputText>
<af:spacer width="5" height="10" id="s10"/>
<af:outputText value="#{bindings.DiCurrencyCode1.inputValue}"
id="ot17"
styleClass="RetailInputOutputFormFieldText"/>
</af:panelGroupLayout>
</af:panelLabelAndMessage>
</af:panelFormLayout>
</af:panelHeader>
<af:panelHeader text="#{TESTviewcontrollerBundle.OUTSIDE_STORAGE}"
id="ph2" size="3"
inlineStyle="border-color:Lime; border-style:solid; border-width:2.0px;"
styleClass="AFStretchWidth">
<f:facet name="context"/>
<f:facet name="menuBar"/>
<f:facet name="toolbar"/>
<f:facet name="legend"/>
<f:facet name="info"/>
<af:panelFormLayout id="pfl10"
styleClass="AFStretchWidth"
inlineStyle="border-color:Gray; border-style:dotted; border-width:2px;">
<f:facet name="footer"/>
<af:selectOneChoice value="#{bindings.CostOutStorageMeas.inputValue}"
label="#{bindings.CostOutStorageMeas.label}"
required="#{bindings.CostOutStorageMeas.hints.mandatory}"
shortDesc="#{bindings.CostOutStorageMeas.hints.tooltip}"
id="soc18" autoSubmit="true">
<f:selectItems value="#{bindings.CostOutStorageMeas.items}"
id="si18"/>
</af:selectOneChoice>
<af:panelLabelAndMessage label="#{bindings.CostOutStorageUom.hints.label}"
id="plam11">
<af:panelGroupLayout id="pgl17"
layout="horizontal">
<af:inputComboboxListOfValues id="inputComboboxListOfValues10"
popupTitle="Search and Select: #{bindings.CostOutStorageUom.hints.label}"
value="#{bindings.CostOutStorageUom.inputValue}"
model="#{bindings.CostOutStorageUom.listOfValuesModel}"
required="#{bindings.CostOutStorageUom.hints.mandatory}"
columns="#{bindings.CostOutStorageUom.hints.displayWidth}"
shortDesc="#{bindings.CostOutStorageUom.hints.tooltip}"
simple="true"
partialTriggers="soc18"
autoSubmit="true">
<f:validator binding="#{bindings.CostOutStorageUom.validator}"/>
</af:inputComboboxListOfValues>
<af:outputText value="#{bindings.CostOutStorageUomDesc.inputValue}"
id="ot10"
partialTriggers="soc18 inputComboboxListOfValues10"/>
</af:panelGroupLayout>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{bindings.CostOutStorage.hints.label}"
id="plam19">
<af:panelGroupLayout id="pgl28"
layout="horizontal">
<af:inputText value="#{bindings.CostOutStorage.inputValue}"
required="#{bindings.CostOutStorage.hints.mandatory}"
columns="#{bindings.CostOutStorage.hints.displayWidth}"
maximumLength="#{bindings.CostOutStorage.hints.precision}"
shortDesc="#{bindings.CostOutStorage.hints.tooltip}"
id="it26" partialTriggers="soc18"
simple="true">
<f:validator binding="#{bindings.CostOutStorage.validator}"/>
</af:inputText>
<af:spacer width="5" height="10" id="s11"/>
<af:outputText value="#{bindings.DiCurrencyCode2.inputValue}"
id="ot18"
styleClass="RetailInputOutputFormFieldText"/>
</af:panelGroupLayout>
</af:panelLabelAndMessage>
</af:panelFormLayout>
</af:panelHeader>
</af:panelGroupLayout>
</af:panelGroupLayout>
</af:panelHeader>
I am pretty sure that you can achieve the layout that you desire by using af:panelSplitter
Here is a snippet with the code that should help with your layout:
<af:panelHeader text="#{TESTviewcontrollerBundle.REPLENISHMENT}" id="ph10"
size="3" styleClass="AFStretchWidth">
<af:panelSplitter id="ps1" orientation="vertical" styleClass="AFStretchWidth" inlineStyle="height:543px;"
splitterPosition="347">
<f:facet name="first">
<af:panelSplitter id="ps2" styleClass="AFStretchWidth" splitterPosition="624">
<f:facet name="first">
<af:panelHeader text="panelHeader 2" id="ph4">
<af:panelFormLayout id="pfl5" maxColumns="1"
inlineStyle="border-color:Lime; border-width:3px; border-style:dotted;"
styleClass="AFStretchWidth">
<af:selectBooleanCheckbox value="#{bindings.DefaultSizeProfile.inputValue}"
shortDesc="#{bindings.DefaultSizeProfile.hints.tooltip}" id="sbc1"
label="#{bindings.DefaultSizeProfile.label}"/>
</af:panelFormLayout>
</af:panelHeader>
</f:facet>
<f:facet name="second">
<af:panelHeader text="panelHeader 1" id="ph3">
<af:panelFormLayout id="pfl7" maxColumns="1"
inlineStyle="border-color:Gray; border-width:3px; border-style:groove;"
styleClass="AFStretchWidth">
<af:selectOneChoice value="#{bindings.DistributionRule.inputValue}"
label="#{bindings.DistributionRule.label}"
required="#{bindings.DistributionRule.hints.mandatory}"
shortDesc="#{bindings.DistributionRule.hints.tooltip}" id="soc15">
<f:selectItems value="#{bindings.DistributionRule.items}" id="si15"/>
</af:selectOneChoice>
</af:panelFormLayout>
</af:panelHeader>
</f:facet>
</af:panelSplitter>
</f:facet>
<f:facet name="second">
<af:panelSplitter id="ps3" styleClass="AFStretchWidth" splitterPosition="624">
<f:facet name="first">
<af:panelHeader text="#{TESTviewcontrollerBundle.WAREHOUSE_STORAGE}" id="ph1" size="3"
inlineStyle="border-color:Black; border-style:solid; border-width:2.0px;"
styleClass="AFStretchWidth">
<af:panelFormLayout id="pfl9" styleClass="AFStretchWidth"
inlineStyle="border-color:Gray; border-style:dotted; border-width:2px;">
<af:selectOneChoice value="#{bindings.CostWhStorageMeas.inputValue}"
label="#{bindings.CostWhStorageMeas.label}"
required="#{bindings.CostWhStorageMeas.hints.mandatory}"
shortDesc="#{bindings.CostWhStorageMeas.hints.tooltip}" id="soc17"
autoSubmit="true">
<f:selectItems value="#{bindings.CostWhStorageMeas.items}" id="si17"/>
</af:selectOneChoice>
</af:panelFormLayout>
</af:panelHeader>
</f:facet>
<f:facet name="second">
<af:panelHeader text="#{TESTviewcontrollerBundle.OUTSIDE_STORAGE}" id="ph2" size="3"
inlineStyle="border-color:Lime; border-style:solid; border-width:2.0px;"
styleClass="AFStretchWidth">
<af:panelFormLayout id="pfl10" styleClass="AFStretchWidth"
inlineStyle="border-color:Gray; border-style:dotted; border-width:2px;">
<af:selectOneChoice value="#{bindings.CostOutStorageMeas.inputValue}"
label="#{bindings.CostOutStorageMeas.label}"
required="#{bindings.CostOutStorageMeas.hints.mandatory}"
shortDesc="#{bindings.CostOutStorageMeas.hints.tooltip}" id="soc18"
autoSubmit="true">
<f:selectItems value="#{bindings.CostOutStorageMeas.items}" id="si18"/>
</af:selectOneChoice>
</af:panelFormLayout>
</af:panelHeader>
</f:facet>
</af:panelSplitter>
</f:facet>
</af:panelSplitter>
</af:panelHeader>
Have a look at where all of the <af:panelSplitter> blocks are.
Hope this helps!
Use panelFormLayouts and set the width for labels to be the same.
This is shown in this demo - https://blogs.oracle.com/shay/entry/controlling_tab_order_in_an_ad
add --> label style="width:100px" on every component of your project. set "px" width according to your requirement to make all of them appear in the design you want.
Related
Basically I am trying to work on a login page for my app. I am nearly done with it, but the window is scrollable and the panelBox (please see login source code below) is at the far left of the window. I thought putting it in the center facet would solve the issue but it didn't. How can a prevent the window from scrolling and center the panelBox
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<af:document title="LoginPage.jsf" id="d1">
<af:form id="f1" inlineStyle="background-color:#c3de2f;" defaultCommand="b1">
<af:panelStretchLayout id="psl1" dimensionsFrom="children" startWidth="100" endWidth="100" topHeight="200"
bottomHeight="500">
<f:facet name="bottom">
<af:spacer width="10" height="100" id="s1"/>
</f:facet>
<f:facet name="center">
<af:panelBox text="Hi!" id="pb1" showDisclosure="false" background="light"
type="stretch"
immediate="true" inlineStyle="background-color:#c3de2f;">
<af:outputText value="Testing" id="ot1"
inlineStyle="font-size:x-large; font-weight:bolder;"/>
<af:panelFormLayout id="pfl1"
inlineStyle="background-image:none; ">
<f:facet name="footer">
<af:button id="b1" action="#{loginBean.Login.doLogin}"
icon="resources/images/button.png"/>
<af:message id="m1"
message="see admin for assistance"/>
</f:facet>
<af:outputText value="enter username and password" id="ot2"
inlineStyle="font-style:italic; font-weight:bold; font-size:small;"/>
<af:inputText label="Username:" id="it1"
value="#{loginBean.Login.username}"/>
<af:inputText label="Password:" id="it2"
value="#{loginBean.Login.password}"
secret="true" showRequired="true"/>
</af:panelFormLayout>
</af:panelBox>
</f:facet>
<f:facet name="start"/>
<f:facet name="end"/>
<f:facet name="top">
<af:panelGridLayout id="pgl2">
<af:gridRow height="auto" id="gr1">
<af:gridCell width="100%" id="gc1">
<af:image source="/resources/images/logo.png" id="i1"/>
</af:gridCell>
</af:gridRow>
</af:panelGridLayout>
</f:facet>
</af:panelStretchLayout>
</af:form>
</af:document>
</f:view>
Try this ,This will help you
<?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:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1" title="Login Page">
<af:form id="f1" defaultCommand="#{'pgTplt:cbLogin'}">
<af:panelStretchLayout id="psl1" startWidth="33%" endWidth="33%"
topHeight="33%" bottomHeight="33%">
<f:facet name="center">
<af:panelGroupLayout id="pgl1" layout="vertical"
halign="center">
<af:panelFormLayout id="pflLogin" rows="2" maxColumns="1">
<af:inputText id="itUsername" label="Username"
value="#{Login.username}"/>
<af:inputText label="Password" id="itPassword" secret="true"
value="#{Login.password}"/>
<af:spacer width="10" height="10" id="s1"/>
<af:commandButton text="Login" id="cbLogin"
actionListener="#{Login.doLogin}"/>
</af:panelFormLayout>
</af:panelGroupLayout>
</f:facet>
<f:facet name="bottom">
<af:panelGroupLayout id="pgl2"/>
</f:facet>
<f:facet name="top">
<af:panelGroupLayout id="pgl3"/>
</f:facet>
</af:panelStretchLayout>
</af:form>
</af:document>
</f:view>
</jsp:root>
Very Simple.
In PanelStretch Layout, Change the bottomHeight="100" value, 500 is really high.
Keep it less. If you increase the bottomHeight, it will add page scroll option automatically.
In a nutshell, I need to provide a ribbon QuickAccessToolbar without the ribbon being visible. This is quite easily achieved, but a great problem for me is that the labels on the toolbar items are not visible. Here is my Ribbon:
<Ribbon x:Name="ShellRibbon" Grid.Row="0" IsMinimized="True">
<Ribbon.QuickAccessToolBar>
<RibbonQuickAccessToolBar>
<RibbonSplitButton x:Name ="Save" Label="Save" />
<RibbonSplitButton Label="Employee Access" LabelPosition="Header" >
<RibbonMenuItem Header="Undo action #1" />
<RibbonMenuItem Header="Undo action #2" />
<RibbonMenuItem Header="Undo action #3" />
</RibbonSplitButton>
</RibbonQuickAccessToolBar>
</Ribbon.QuickAccessToolBar>
<RibbonTab>
<RibbonButton Label="One"></RibbonButton>
</RibbonTab>
<RibbonTab></RibbonTab>
</Ribbon>
The RibbonMenuItem headers are visible when I drop down the RibbonSplitButton, but its header isn't visible, and neither that of the Save button. What am I doing wrong?
You have to place your ribbon controls inside a DockPanel :
<Ribbon.QuickAccessToolBar>
<RibbonQuickAccessToolBar>
<DockPanel>
<RibbonSplitButton x:Name ="Save" Label="Save" />
<RibbonSplitButton Label="Employee Access" LabelPosition="Header" >
<RibbonMenuItem Header="Undo action #1" />
<RibbonMenuItem Header="Undo action #2" />
<RibbonMenuItem Header="Undo action #3" />
</RibbonSplitButton>
</DockPanel>
</RibbonQuickAccessToolBar>
</Ribbon.QuickAccessToolBar>
I am rendering XPS using WPF. This is completely dynamic (XAML free).
In my code, I have following code to set up text rotation.
Private Shared Sub ApplyRotation(style As BoxStyleData, run As TextElement)
If style IsNot Nothing Then
If Math.Abs(style.TextRotation) > Double.Epsilon Then
Dim effects = New TextEffectCollection
Dim effect = New TextEffect()
effect.Transform = New RotateTransform(style.TextRotation)
effect.PositionCount = 100
effects.Add(effect)
run.TextEffects = effects
End If
End If
End Sub
It is inside FlowPanel, therefore some bug is preventing me from setting rotation for whole paragraph (more on that here http://social.msdn.microsoft.com/Forums/nl/wpf/thread/931f1995-d039-4364-b09b-fcd0a43fd737)
My problem is, even when I use the fix, result is not correct. After certain amount of characters, text is not rotated anymore:
Note, that screenshot is from XPS to which I render result.
When I render it to XAML, you can see that effect is correctly mapped to all Runs in text.
<Paragraph Margin="0,0,0,0" Padding="0,18.9,0,0" TextAlignment="Center" ClearFloaters="None" FontSize="14.62">
<Span FontSize="14.62"><Run><Run.TextEffects><TextEffect PositionCount="100"><TextEffect.Transform><RotateTransform Angle="356.7" /></TextEffect.Transform></TextEffect></Run.TextEffects>Denken Sie frühzeitig</Run></Span><LineBreak />
<Span FontSize="14.62"><Run><Run.TextEffects><TextEffect PositionCount="100"><TextEffect.Transform><RotateTransform Angle="356.7" /></TextEffect.Transform></TextEffect></Run.TextEffects>an den</Run></Span><LineBreak />
<Span FontSize="14.62"><Run><Run.TextEffects><TextEffect PositionCount="100"><TextEffect.Transform><RotateTransform Angle="356.7" /></TextEffect.Transform></TextEffect></Run.TextEffects>Räderwechsel!</Run></Span><LineBreak />
<LineBreak />
<Span FontSize="14.62"><Run><Run.TextEffects><TextEffect PositionCount="100"><TextEffect.Transform><RotateTransform Angle="356.7" /></TextEffect.Transform></TextEffect></Run.TextEffects>Unser</Run></Span><LineBreak />
<Span FontWeight="Bold" FontSize="14.62"><Run><Run.TextEffects><TextEffect PositionCount="100"><TextEffect.Transform><RotateTransform Angle="356.7" /></TextEffect.Transform></TextEffect></Run.TextEffects>Winter Check-Point</Run></Span><LineBreak />
<Span FontSize="14.62"><Run><Run.TextEffects><TextEffect PositionCount="100"><TextEffect.Transform><RotateTransform Angle="356.7" /></TextEffect.Transform></TextEffect></Run.TextEffects>ist für Sie offen!</Run></Span></Paragraph>
Now, does anyone has any idea how to achieve rotation for whole text as I really need it.
Thanks
EDIT:
For quick test that it does not work properly, you can create WPF application and just paste following XAML Code
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<FlowDocumentPageViewer>
<FlowDocument>
<Paragraph Margin="0,0,0,0" Padding="0,18.9,0,0" TextAlignment="Center" ClearFloaters="None" FontSize="14.62">
<Span FontSize="14.62">
<Run>
<Run.TextEffects>
<TextEffect PositionCount="100">
<TextEffect.Transform>
<RotateTransform Angle="356.7" />
</TextEffect.Transform>
</TextEffect>
</Run.TextEffects> Denken Sie frühzeiti
</Run>
</Span>
<LineBreak />
<Span FontSize="14.62">
<Run>
<Run.TextEffects>
<TextEffect PositionCount="100">
<TextEffect.Transform>
<RotateTransform Angle="356.7" />
</TextEffect.Transform>
</TextEffect>
</Run.TextEffects> an den
</Run>
</Span>
<LineBreak />
<Span FontSize="14.62">
<Run>
<Run.TextEffects>
<TextEffect PositionCount="100">
<TextEffect.Transform>
<RotateTransform Angle="356.7" />
</TextEffect.Transform>
</TextEffect>
</Run.TextEffects> Räderwechsel!
</Run>
</Span>
<LineBreak />
<LineBreak />
<Span FontSize="14.62">
<Run>
<Run.TextEffects>
<TextEffect PositionCount="100">
<TextEffect.Transform>
<RotateTransform Angle="356.7" />
</TextEffect.Transform>
</TextEffect>
</Run.TextEffects> Unser
</Run>
</Span>
<LineBreak />
<Span FontWeight="Bold" FontSize="14.62">
<Run>
<Run.TextEffects>
<TextEffect PositionCount="100">
<TextEffect.Transform>
<RotateTransform Angle="356.7" />
</TextEffect.Transform>
</TextEffect>
</Run.TextEffects> Winter Check-Point
</Run>
</Span>
<LineBreak />
<Span FontSize="14.62">
<Run>
<Run.TextEffects>
<TextEffect PositionCount="100">
<TextEffect.Transform>
<RotateTransform Angle="356.7" />
</TextEffect.Transform>
</TextEffect>
</Run.TextEffects> ist für Sie offen!
</Run>
</Span>
</Paragraph>
</FlowDocument>
</FlowDocumentPageViewer>
</Grid>
</Window>
So, I've fixed it by switching
effect.PositionCount = 100
to
effect.PositionCount = Integer.Max
which fixed the problem.
I did not understand correctly what it stood for and thought it means something like percentage of effect done.
have my store and my grid panel, i need to add a filter box to it , so added a topbar tag, that has the field box to filter.. and want to add listeners on it so i would be filterer while writing, the 2 functions as shown are filtergrid() and clearFilter()...what those 2 functions should be, knowing that the store is binded with code behind...
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="FULLNAME" />
<ext:RecordField Name="JOBTITLE" />
<ext:RecordField Name="PHONENUMBER1" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Panel ID="Panel1" runat="server" Width="520" Height="300" Collapsible="true" Title="Add Attendies" Collapsed="true">
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Text="Filter:" />
<ext:ToolbarSpacer />
<ext:TriggerField ID="TriggerField1" runat="server" EnableKeyEvents="true">
<Triggers>
<ext:FieldTrigger Icon="Clear" />
</Triggers>
<Listeners>
**<KeyUp Fn="filtergrid()" Buffer="250" />
<TriggerClick Handler="clearFilter();" />**
</Listeners>
</ext:TriggerField>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<West MarginsSummary="5 5 5 5">
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="Store1"
DDGroup="GridDDGroup"
EnableDragDrop="true"
StripeRows="true"
AutoExpandColumn="FULLNAME"
Width="250"
Title="All Contacts">
<ColumnModel>
<Columns>
<ext:Column Header="Contact Name" ColumnID="FULLNAME" Width="140" DataIndex="FULLNAME" />
<ext:Column Header="Title" ColumnID="JOBTITLE" Width="75" DataIndex="JOBTITLE" />
<ext:Column Header="Phone" ColumnID="PHONENUMBER1" Width="75" DataIndex="PHONENUMBER1" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<GetDragDropText Fn="getDragDropText" />
<Listeners>
<Render Fn="setDD" />
</Listeners>
</ext:GridPanel>
</West>
<Center MarginsSummary="5 5 5 0">
<ext:GridPanel
ID="GridPanel2"
runat="server"
StoreID="Store2"
DDGroup="GridDDGroup"
EnableDragDrop="true"
StripeRows="true"
AutoExpandColumn="FULLNAME"
Width="250"
Title="Meeting Attendies">
<ColumnModel>
<Columns>
<ext:Column ColumnID="Contact Name" Header="Contact Name" Width="140" DataIndex="FULLNAME" />
<ext:Column Header="Title" Width="75" DataIndex="JOBTITLE" />
<ext:Column Header="Phone Number" Width="75" DataIndex="PHONENUMBER1" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
</SelectionModel>
<GetDragDropText Fn="getDragDropText" />
<Listeners>
<Render Fn="setDD" />
</Listeners>
</ext:GridPanel>
</Center>
</ext:BorderLayout>
</Items>
<BottomBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />
<ext:Button ID="Button1" runat="server" Text="Reset both grids">
<Listeners>
<Click Handler="Store1.loadData(Store1.proxy.data);Store2.removeAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
so there is 2 functions that i have to write , one that filter an return the result to be written in the panel, and the other one is to clear and restore the datasource again.
You can apply a filter using the filterBy method and passing a delegate function which returns true or false based on some logic of your choosing and then remove the filter using clearFilter
In mode cody terms, something like this:
clearFilter() {
theGridPanel.store.clearFilter(false);
}
filterGrid() {
theGridPanel.store.filterBy(theFilterFunction)
}
theFilterFunction(record, id) {
if(record.data.aField === 'yellow') {
return true;
}
return false;
}
<Window x:Class="Viewport2DVisual3DExample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Button on 3D"
WindowStyle="None"
Background="{x:Null}"
Foreground="{x:Null}"
AllowsTransparency="True"
>
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="0, 0, 4"/>
</Viewport3D.Camera>
<!-- Front -->
<Viewport2DVisual3D>
<!-- Give the plane a slight rotation -->
<Viewport2DVisual3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="frontTransform" Angle="0" Axis="0, 1, 0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Viewport2DVisual3D.Transform>
<!-- The Geometry, Material, and Visual for the Viewport2DVisual3D -->
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0"
TextureCoordinates="0,0 0,1 1,1 1,0" TriangleIndices="0 1 2 0 2 3"/>
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/>
</Viewport2DVisual3D.Material>
<!-- Here Here Here Here Here -->
<Image Source="i:\\tempa\\tm.png" Width="534" Height="458" />
</Viewport2DVisual3D>
<!-- Back -->
<Viewport2DVisual3D>
<!-- Give the plane a slight rotation -->
<Viewport2DVisual3D.Transform>
<RotateTransform3D >
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="backTransform" Angle="180" Axis="0, 1, 0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Viewport2DVisual3D.Transform>
<!-- The Geometry, Material, and Visual for the Viewport2DVisual3D -->
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0"
TextureCoordinates="0,0 0,1 1,1 1,0" TriangleIndices="0 1 2 0 2 3"/>
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/>
</Viewport2DVisual3D.Material>
<Button Name="btnBack">Back</Button>
</Viewport2DVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="#FFFFFFFF" Direction="0,0,-1"/>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
I am trying to build a 2-Side window using Viewport3D. But then I had some trouble about size.
<!-- Here Here Here Here Here -->
<Image Source="i:\\tempa\\tm.png" Width="534" Height="458" />
I want this Image to be the exact same size as its source image.
Neither a specified value or "auto" would work.
How can I get what I want?
My 3d knowledge is limited and someone can probably answer this better, but in a 3d environment, the size of an object is dependent on a lot of things.. camera position,near/far plane, the size/location of the object, transforms applied to that object, viewport size, and probably other stuff I'm forgetting. The 3d engine takes all the stuff into account when rendering stuff. Setting the size of the image is just one piece of it.
Maybe try messing with the camera position or adding a scaletransform to the image.
What you are looking for is the projection matrix of the camera. That matrix transforms a 3D point into a 2D point. So by passing the 3D coordinates of the MeshGeometry3D you can find out the 2D coordinates and sizes.