UI Style Designer User Manual
Contents
1. Landing Page Forms Dialogs Toolbar E PETTA Expi orer Dar Dashboard If you want to tile the image vertically you can specify the Horizontal Position where the tiling should happen The following screen shows the background image tiled vertically at Horizontal Position 100 pixels Horizontal and vertical positions are not applicable if you select the tiling option as Tile both directions ORACLE Style Designer for Oracle FLEXCUBE Universal Banking y FA Page Templates Form Elements Text Tables Widgets Landing Page Forms Dialogs Menu bar Toolbar a Explorer bar Dashboard i Note You can change the background properties for the following interface elements e All elements under Page Templates e All Form Elements except Labels ORACLE e All non text elements under Tables and Widgets 4 1 5 Changing Border Attributes You can change the border properties like border style width color etc for most of the non text elements appearing in Oracle FLEXCUBE user interface The steps that you need to perform to modify the border properties for any desired interface element is explained taking an example 7 Assume that you wish to change the border attributes for Vertical Tabs appearing under Widgets ORACLE Style Designer for Oracle FLEXCUBE Universal Banking af y2. BTNInlineBG attribute separated by and excluding the prefix Ext Flexblue O Signature toolbar bg_multiplebox bkg BTNLovHoverBG BTNOkBG om m Add the new theme to the list of themes in the fcubs properties file in DEFAULT_STYLE The properties file is located at INFRA FCJNeoWeb WebContent fcubs properties For example if there are four themes named Flexblue Flexbrown Flexgrey and FlexTest then DEFAULT _STYLE Flexblue D Flexbrown Flexgrey FlexT est The default style is given as Theme_name D In the above example Flexblue is the default theme INDIA Copyright e 2004 2009 by Oracle Financial Services Software Limited FREFECOPMON PROPERTIES UIXML PATH DE TYPE DEFAULT LANGUAGE DEFAULT STYLE DEFAULT DISP DIRECTION DEFAULT LANG ISOMAP LANG ISOMAP APPLICATION NAME DISPLAY SIZE FOR POPUP 55L SWITCH SST FMARTED 0TxML Oracle ENG Flexblue D Flexbrom Flexgrey FlexTest LTR EN ENG en GER de ARR ar JAP ja FRC r FCJ an4 9 3 ORACLE 5 Insert the label for the new theme into CSTB_ITEM_DESC table in the database for the label to appear in the login page Without this the label will appear as null as displayed below ORACLE FLEXCUBE UNIVERSAL BANKING 6 After inserting label in the database it appears in the login page 7 Insert script for ExtFlexTest is ORACLE INSERT INTO CSTB_ITEM_DESC VALUES INFRA L
3. aj A Arial o B 7 u Ab Page Templates Form Elements Text Tables Widgets Menu bar Tree Menu ToolBar Horizontal Tab Vertical Tab Unselected Hover Selected dl ORACLE In the above screen the label or the text part of the tab is selected for modification and the actions that you can perform on the label are enabled in the toolbar ORACLE Style Designer for Oracle FLEXCUBE Universal Banking Page Templates Form Elements Text Tables Widgets Menu bar Tree Menu ToolBar Horizontal Tab Vertical Tab Unselected Hover Selected Here the selection is at an outer level and only the background and border attributes are enabled in the toolbar These properties will be applied to the base of the horizontal tab Some of the main operations that you can perform on the user interface elements are explained in the subsequent sections 4 1 1 Changing Font Properties You can change the font properties like font type size and font color The steps that you need to perform to modify the font properties for any desired interface element is explained taking an example 1 Select the interface element whose font properties you wish to change You can change font properties only for interface elements involving a text component ORACLE Style Designer for Oracle FLEXCUBE Universal Banking E W Times New Roman opt Page Templates Form Elements Text Tables Widgets Labels Inputs Buttons Fieldsets Label in page footer L
4. e Align Center e Align Right The steps that you need to perform to modify the alignment of a table header element are explained taking an example 1 Assume that you want to change the header alignment for a table coming under Forms ORACLE Style Designer for Oracle FLEXCUBE Universal Banking a z 22 WH Page Templates Form Elements Text Tables Widgets Forms Dialogs Calendar Editable Grid Button bar I Buffon bar 2 Locked Normal Hover ns 4 a Normal row color Alternate row color Hover row color Table borders and background 2 Tochange the alignment of the table header select the header as shown above and click the required alignment icon available in the toolbar You can change the alignment to Left Right or Center The following screen displays the Forms table after modifying the header alignment ORACLE Style Designer for Oracle FLEXCUBE Universal Banking Page Templates Form Elements Text Tables widgets Forms Dialogs Calendar Editable Grid Button bar 2 Locked Hormal Hover In the above screen the table header has been left aligned lt ORACLE 3 You can change the alignment back to default by clicking the same icon again i e If you click the AlignLeft icon to change the header alignment towards left you can click the AlignLeft icon once again to bring the alignment back to default You can change the alignment for the table headers appear
5. in the subsequent sections Style designer provides an easy to use editor window where you can modify the characteristics of any of the interface elements listed above The changes that you make to the interface elements get updated in the CSS Cascading Style Sheet attached to the utility After making necessary changes to the look and feel of the interface elements you can attach this style sheet to Oracle FLEXCUBE Invoking Style Designer After installing Style Designer you can invoke the application be double clicking StyleDesigner htm under CSS folder available at the location where you have installed the application Pre requisites You need to take care of the following points to ensure proper functioning of the Style Designer utility e Torun the style designer utility you need to have Internet Explorer version 6 0 or above installed on your PC e Before launching Style Designer you need to copy the Theme and Images folders of Oracle FLEXCUBE to Style Designer root folder a SS O O Toollmages E 400 html 401 html StyleDesigner htral ORACLE e For the application to work properly a minimum screen resolution of 1024x768 should be maintained e Also you need to make sure that none of the files in the CSS folder has read only attributes For the application to function you need to allow Active X interaction in you browser window The following window pops up initially
6. perform to p change the look and feel of the interface elements Chapter 5 Deployment chapter explains how to integrate the CSS files modified by p Style Designer into Oracle FLEXCUBE Function ID Glossary has alphabetical listing of Function Screen ID s Chapter 6 l a used in the module with page references for quick navigation Related Documents e The Procedures User Manual e ORACLE 1 6 Glossary of Icons This User Manual may refer to all or some of the following icons Delete row Option List we ORACLE 2 1 2 2 2 2 1 2 Style Designer An Overview Introduction Style Designer is an easy to use stand alone utility that helps you modify the look and feel of the user interface elements of Oracle FLEXCUBE according to your requirements It provides a WYSIWYG environment where you can choose the required interface element and modify its appearance as you wish The interface elements that constitute Oracle FLEXCUBE user interface can be broadly classified as follows e Page Templates base for designing different types of pages e Form Elements used to collect data from the user or display information e Text used to display text appearing in the different interface elements e Tables used to display data in an ordered manner and also to input certain types of details e Widgets used to display information that the user can act upon These user interface elements are explained in detail
7. will not be responsible for any loss costs or damages incurred due to your access to or use of third party content products or services Contents Preta nidad 1 1 EE AARWFOOU CHOI aos 1 1 12 ADD do e a o ol 1 1 1 3 Documentation ACCESSIDINNY ocio 1 1 14 TOFTANIZ MON rio badtoeen pedis 1 1 157 Related Documents ia td aci 1 1 MG Glossa OFICON Ss e da 1 1 Style Designer AN Overview coooccocccccnccnoccncnconanonancnnncnnrnnnnnnnnnennnnannenanens 2 1 Za AMUFOGUCUON ta ias 2 1 22 IAVOKING Style DESION O isa 2 1 Ze O CQUISIOS oraraa da bated an nda ela EN halve E TT 2 1 2 2 2 Modifying Existing Theme oiicccieslaleeacdocdeai ne LA ee ee 2 3 2 2 3 Creating New MOMO ii a A A A A tias 2 3 a NN A ee gad teh ih oh che OE el af reece dh Goes heh raat aslo re 2 4 22250 INQVIQQUOI TADS sd lt diana ios 2 4 2 20 MU A ra Le 2 5 User Interface Element ccoccccnconccoccnoncconcoccnnnnconcconcnnncnnnnnnrnancnanenarnnnnnns 3 1 ls A it ed 3 1 St Fade A A a 3 1 Bits FON AN o nd ed e 3 2 SLS Labo eens E re eee ere ee 3 2 ld MO ita se Eee eRe een on ee eae eae 3 3 PRI E Ore ee RE oa ee PE So E eA Tee 3 3 e O AAA bere nabssneueeeentecbles a hceas ead teats duaes eee ab 3 4 ODEeratiONsS siii 4 1 AAS O a ig oJe Ule dLo q PAE o ahaa aes ig noha tact tine ea ced ls een teeta 4 1 414 CHANGING Font PIODCHICS A aa 4 2 Adee Changho FON SVG iasan A E Deatecu nasa EE 4 5 4143 Ghanging Text ANDAMIOS a 4 6 4 1 4 Changing Background
8. 1 under Text ORACLE Style Designer for Oracle FLEXCUBE Universal Banking j Times New Roman 1 4pt y BZU A Page Templates Form Elements Text Tables Widgets Page Text Normal page text Hyperlink Headingl Heading2 Heading3 Heading4 2 To make the heading bold click the Bold icon in the tool bar To make the heading italicized click the Italic icon in the toolbar and to under line the heading click the Underline icon in the toolbar The modified heading is displayed in the screenshot below ORACLE Style Designer for Oracle FLEXCUBE Universal Banking 2 wi Times New Roman 1 4pt B z u A Page Templates Form Elements Text Tables Widgets Page Text You can change the font style for the following interface elements All Button components under Form Elements except inline image buttons and inline icon buttons All Fieldsets under Form Elements All components under Text All text elements under Forms Calendar and Editable Grid under Tables o ORACLE e All text elements under Tree Menu Horizontal Tab and Vertical Tab under Widgets e Captions in Tool Bar under Widgets 4 1 3 Changing Text Alignment You can change the alignment properties for the table headers appearing in the various types of tables The following options are provided to change the alignment e Align Left
9. B Page Templates Form Elements Text Tables Widgets Menu bar Tree Menu ToolBar Horizontal Tab Vertical Tab Unselected Tab Hover Tab 8 To change the border properties click the Border icon in the toolbar The following Borders screen gets displayed where you can make the changes you need Borders Web Page Dialog x Style Width Unit Color Left Bo ANA oe BY 000 0 Right soi ANA lex BY 010 0 Top soi 2111 lex BY 010 0 Bottom Solid 1 ps MN 101010 Reset _Ok Cancel You can change the following properties for the borders e Style you can change the border style to any of the following options available None a ORACLE Solid Dotted Dashed e Width select the width for the border from the drop down list Border width cannot be more than 1px e Unit select the unit in which the width needs to be calculated from the option available in the drop down list px pixels e Color select the border color from the color spectrum that gets displayed when you click the color hyperlink or the color box You can change the border properties independently for the left right top and bottom borders The following screen displays the vertical tab after changing the border properties ORACLE Style Designer for Oracle FLEXCUBE Universal Banking 2 Page Templates Form Elements Text Tables Widgets Menu bar Tree Menu ToolBar Horizonta
10. BL_FLEXTEST ENG FlexTest Style FLEXCUBE V Oracle FLEXCUBE UBS1 1 ORACLE ORACLE FLEXCUBE UNIVERSAL BANKING Login User ID Password Theme Default v Restart the application and LOGIN with the new theme ene ORACLE
11. Mary fl El El E a ORACLE 4 Operations 4 1 Introduction The operations that you can perform on the various interface elements can broadly be classified as follows e Text level changes you can selectively change the attributes like font font size font color text alignment etc for the text appearing in many of the user interface elements using Style Designer You can also apply styles like bold italic underline etc for some of the text elements e Background and border changes you can apply the background properties to most of the interface elements You can change the attributes like the background color image position scrolling and tiling for the elements You can also change the border properties like border color style thickness etc To make changes to the appearance of any of the interface elements you need to first select the element in the navigation tab The actions that you can perform on the selected element get enabled in the toolbar For some elements you can make the selection at two levels inside level selection to change attributes of the text or the label and outside level selection to change the properties of the container You need to point the cursor appropriately to make the correct selection For example for the Horizontal Tab element under Widgets you can make the selection at two levels as indicated below ORACLE Style Designer for Oracle FLEXCUBE Universal Banking
12. ORACLE Style Designer User Guide Oracle FLEXCUBE Universal Banking Release 12 0 3 0 0 Part No E53393 01 April 2014 Style Designer User Guide April 2014 Oracle Financial Services Software Limited Oracle Park Off Western Express Highway Goregaon East Mumbai Maharashtra 400 063 India Worldwide Inquiries Phone 91 22 6718 3000 Fax 91 22 6718 3001 www oracle com financialservices Copyright 2007 2014 Oracle and or its affiliates All rights reserved Oracle and Java are registered trademarks of Oracle and or its affiliates Other names may be trademarks of their respective owners U S GOVERNMENT END USERS Oracle programs including any operating system integrated software any programs installed on the hardware and or documentation delivered to U S Government end users are commercial computer software pursuant to the applicable Federal Acquisition Regulation and agency specific supplemental regulations As such use duplication disclosure modification and adaptation of the programs including any operating system integrated software any programs installed on the hardware and or documentation shall be subject to license terms and license restrictions applicable to the programs No other rights are granted to the U S Government This software or hardware is developed for general use in a variety of information management applications It is not developed or intended for use in any inherently dangerous
13. Properties ooccooococoniconocociooonononononononononnononononos 4 7 4 1 5 Changing Border Attributes coocccconnoocnoooneccnnconnenonocononancnannonanonanons 4 11 DEDIOVMOC IE cerati cri 5 1 Oot AA E A egal cae eae nets oats cae ga taseaca econ 5 1 AT MOI SS e ateo 5 1 Ike NOWO O IPR OO O E Sea eee cae eer eae ee rece tease A A 5 2 1 1 1 2 1 3 1 4 1 5 1 Preface Introduction This manual is designed to help you quickly get acquainted with Style Designer a WSYWYG tool that helps you modify the look and feel the Oracle FLEXCUBE user interface Abbreviations The following abbreviations are used in this User Manual Cascading Style Sheet WYSIWYG What You See Is What You Get Documentation Accessibility For information about Oracle s commitment to accessibility visit the Oracle Accessibility Program website at http www oracle com pls topic lookup ctx acc amp id docacc Organization This manual is organized into the following chapters About this Manual gives information on the intended audience It also lists Chapter 1 ie the various chapters covered in this User Manual Style Designer An Overview provides a basic understanding of the style Chapter 2 e designer utility and its features Chapter 3 User Interface Elements chapter provides an overview of the various p interface elements used by Oracle FLEXCUBE Chapter 4 Operations chapter explains the various actions that you can
14. abel in page body The label element appearing in page body is selected for modification here The existing font is Times New Roman with size 8 pt ORACLE 2 To change the font type select the required font from the drop down list as indicated below The font is changed to Courier as displayed in the following screen ORACLE Style Designer for Oracle FLEXCUBE Universal Banking T 2 Spt gt A Page Templates Form Elements Text Tables Widgets Labels Inputs Buttons Fieldsets Label in page footer Label in page body 3 Tochange the font size select the size from the drop down list provided You can increase the size up to 10 points and decrease it to a minimum of 8 points You cannot type in the size that you wish to provide You can only select the options that are provided in the drop down list The following list shows the maximum size allowed for various elements e Labels inputs inline text button normal page text hyperlink menu bar maximum text size allowed is 10 pt e Other elements apart from Headings maximum text size allowed is 11 pt e Headings maximum text size allowed is 14pt The font size is changed to 10 pt as illustrated in the following screen ORACLE Style Designer for Oracle FLEXCUBE Universal Banking 2 Al al Courier 10pt A Page Templates Form Elements Text Tables Widgets Labels Inputs Buttons Fieldsets Label in page footer Label
15. ading Style Sh Cascading Style Sh Cascading Style Sh Cascading Style Sh Cascading Style Sh Cascading Style Sh Date Modified 417 2009 1 08 PM 417 2009 1 08 PM 417 2009 1 08 PM 417 2009 1 08 PM 417 2009 1 08 PM 4 8 2009 12 47 PM 4 8 2009 12 47 PM 417 2009 12 38 PM 4 6 2009 2 02 PM 4 7 2009 4 33 PM 4 7 2009 1 08 PM 4 7 2009 1 08 PM 4 7 2009 1 08 PM 4 7 2009 1 08 PM 4 7 2009 1 08 PM 4 7 2009 1 08 PM 4 7 2009 1 08 PM 4 7 2009 1 08 PM 417 2009 1 08 PM 417 2009 1 08 PM 417 2009 1 08 PM 417 2009 1 08 PM 417 2009 1 08 PM aax r Mp 3 Copy the new images folder from the Style designer to the Images folder in the application deployed area of the server i e FCJNeoWeb lmages 5 2 ORACLE lf ExtFlexTest is the newly created images folder copy the ExtFlexTest folder to FCJNeoWebllmages Images File Edit Yiew Favorites Tools Help Q sx Y wi ya Search Folders E QUE E Address FCUBS10 3DEWFCINeoWeblImages Dl picture Tasks G TJ View as a slide show 2 Order prints online 4b Print pictures File and Folder Tasks A a Make a new folder Ua Publish this Folder to the Web Other Places E FCINeoWeb 2 My Pictures 4 My Computer a My Network Places gt Details Images File Folder ExtFlexblue ExtFlexbrown Addrow ajax loader BTNExitBG BTNExitDisabledBG ExtFlexgrey menu BTNExitHoverBG ExtFlexTest Photo bg_btn
16. applications including applications that may create a risk of personal injury If you use this software or hardware in dangerous applications then you shall be responsible to take all appropriate failsafe backup redundancy and other measures to ensure its safe use Oracle Corporation and its affiliates disclaim any liability for any damages caused by use of this software or hardware in dangerous applications This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws Except as expressly permitted in your license agreement or allowed by law you may not use copy reproduce translate broadcast modify license transmit distribute exhibit perform publish or display any part in any form or by any means Reverse engineering disassembly or decompilation of this software unless required by law for interoperability is prohibited The information contained herein is subject to change without notice and is not warranted to be error free If you find any errors please report them to us in writing This software or hardware and documentation may provide access to or information on content products and services from third parties Oracle Corporation and its affiliates are not responsible for and expressly disclaim all warranties of any kind with respect to third party content products and services Oracle Corporation and its affiliates
17. elect Theme drop down list The themes that are already present in Oracle FLEXCUBE are displayed in the drop down list Select the theme that you wish to modify and click OK button to proceed Modify Theme option is selected by default Note While opening the file Style Designer looks for theme files with Ext prefix For example if you choose Flexblue from the Select theme dropdown list Style Designer will open the file ExtFlexblue css from the Theme folder The image folder for this CSS file will also have an Ext prefix and the path will be Images ExtFlexblue Creating New Theme If you want to create a new theme you need to select the option Create New Theme in the Style Designer screen What do you want to do Modit theme Marne ok Cancel Specify a name for your theme in the Name field and click OK button to proceed Style Designer creates a CSS file for the new theme in the Theme folder and an empty folder gets created under Images folder for holding images required for the theme Note While saving the file Style Designer prefixes Ext to the name you provide For example if the input theme name is Skyblue the CSS file name will be ExtSkyBlue css and the image folder name will be ExtSkyBlue ORACLE Once you click OK the Style Designer application screen opens up as shown below ORACLE Sty
18. elow e Page Templates e Form Elements e Text e Tables e Widgets Each group has many sub options or sub elements under them which are the actual building blocks that decide the look and feel of Oracle FLEXCUBE user interface The various elements constituting the user interface are discussed in detail in the sections that follow Page Templates Page templates act as the base for creating a page design A page template contains visually differentiated sections that act as containers for all other interface elements that appear on the page There are three different types of page templates as specified below e Landing page used to display the initial page or the landing page when the application gets invoked e Forms used for function screens subsystem screens Summary screens etc e Dialogs used for displaying warnings error messages etc The following diagram illustrates how different types of screens are created using page templates 4 function screen wand t s page template ED E bmi Ea ieee Gee ie SS ieee Tee Be daa eee eee Le ee Le LN A dialog and is page template Ac ago Dia CH di ORACLE 3 1 3 1 3 1 3 2 Form Elements Form elements are used either to gather information from the user by means of data inputs or to display some information to the user The following four major types of form elements can be identified in Oracle FLEXCUBE user interface e Labels e Inputs e Buttons e Field
19. he background image from the drop down list provided The options provided are as follows a ORACLE Donottile Tile horizontally Tile vertically Tile both directions e Scrolling select the scrolling property of the background image from the following options in the drop down list Scrolling background e Horizontal and Vertical positions specify the horizontal or vertical position of the background image and select the units in which the position is to be calculated The following units are available for selection px pixels em a relative unit based on font size percentage e Background Color select the background color from the color spectrum that gets displayed when you click the color hyperlink or the color box The following screen displays the menu bar after making the changes ORACLE Style Designer for Oracle FLEXCUBE Universal Banking 2 aj Page Templates Form Elements Text Tables Widgets Landing Page Forms Dialogs Toolbar Explorer ba Da ard Here the existing background has been replaced with a new background color 4 1 4 1 Changing Background Image You can change the background image and its attributes like horizontal and vertical positions scrolling tiling etc for most of the non text elements appearing in Oracle FLEXCUBE user interface Background image will be displayed above the background color if you have specified any The steps that you need
20. in an ordered manner or for capturing information from the users Tables used in Oracle FLEXCUBE user interface can be classified as follows e Forms table e Dialog table e Calendar table e Editable grid Forms Table Forms table is used to display data in form templates Product Code Description ATTI IMP A CCEP ACF FOR ACC TO REFUSAL AFFP ACC TO FOR ATFP ACC TO FOR BCCR REIMBURSEMENT BCIN IMPORT SIGHT NOT UNDER LC E ORACLE 3 1 5 2 3 1 5 3 3 1 5 4 Editable Grid Dialog Table Dialog tables are used to display information in dialog templates MESSAGE ee Do you wantto Signo Calendar Table Calendar tables are used to display data in calendar format where you can select a date by clicking the appropriate column hon f 3 10 17 24 31 Tue 11 15 25 Wed 12 19 26 Thu 13 20 af Fri 14 2 0 pal 1 a 13 22 23 Sun 2 3 16 23 30 Editable grids are used to capture information in a tabular format The data is displayed as a grid each row in the grid representing a set of related details You can input data in such tables as illustrated in the diagram given below HOO oa Widgets Code ta e Description Resolved Y Resolution Date Recieved Date w ES P El Tn S B at CICL A widget displays information on which the user can perform some actions It provides a single point of interaction for manipulating data The different t
21. in page body lt ORACLE 4 Tochange the color of the font select the text and click the Font Color icon in the toolbar The following Color screen gets displayed where you can select the color of the font OK Cancel 5 To select the color for the font you can either click the color box displayed or click the hyperlink provided for the color The colors available appear as a spectrum as displayed by the following screen You can make a selection by moving the mouse over the spectrum and clicking to select the desired color FFBD14 transparent The font color is changed as indicated in the following screen ORACLE Style Designer for Oracle FLEXCUBE Universal Banking a al Courier gt Opt Page Templates Form Elements Text Tables Widgets Labels Inputs Buttons Fieldsets You can change the font properties for the following interface elements 7 ORACLE All components under Form Elements except inline image buttons All components under Text All text components under Tables and Widgets Changing Font Style You can change the appearance of the font by giving special effects like bold italics underline etc The steps that you need to perform to modify the font style for any desired interface element are explained taking an example 1 Select the interface element whose font style you wish to modify Assume that you wish to change the appearance of Heading
22. ing in Forms tables Dialogs tables and Editable Grids You cannot change the alignment for Calendar tables Changing Background Properties You can change the background properties like background color image horizontal and vertical positions scrolling tiling etc for most of the non text elements appearing in Oracle FLEXCUBE user interface The steps that you need to perform to modify the background properties for any desired interface element is explained taking an example 1 Assume that you wish to change the background properties of the menu bar in the Landing Page ORACLE Style Designer for Oracle FLEXCUBE Universal Banking 4 al 7 B Page Templates Form Elements Text Tables Widgets Landing Page Forms Dialogs Menu bar oolbar T Explorer bar Dashboard bA 2 To modify the background attributes click the Background icon in the toolbar The following Background screen gets displayed where you can make the required changes 44 Background Web Page Dialog x Background Image Browse Tiling Scrolling 7 Horizontal Position T A vertical Position y Background Color f1f1f1 Reset _OK Cancel 3 You can modify any of the following properties of the background e Background Image to modify the image click Browse and select the image that you wish to provide as the background e Tiling select the tiling option for t
23. l Tab Vertical Tab Selected Tab Header Unselected Tab Hover Tab Here the right left top and bottom borders have been modified to solid style with 1 pixel width You can change the border attributes for the following interface elements e All elements under Page Templates e All Form Elements except Labels e All non text elements under Tables and Widgets Me ORACLE 5 1 9 Deployment Introduction The following steps elaborate the deployment of a modified as well as a newly created CSS file to Oracle FLEXCUBE Modified CSS The following steps explain how to deploy a modified CSS and related images in Oracle FLEXCUBE 1 Copy the modified CSS file obtained from Style Designer available in the Theme folder to the application deployed area of the server i e FCJNeoWeb Theme For example if ExtFlexblue css is modified you need to copy the modified ExtFlexblue css file to FCJNeoWeb Theme 2 Copy the modified images if any from Style Designer available in the Images folder to the application deployed area of the server i e FCJNeoWeb lmages For example if ExtFlexblue is modified you need to copy the modified ExtFlexblue image folder to FCJNeoWeb lmages 3 LOGOFF and LOGIN again with the modified theme Oracle FLEXCUBE UBS1 12Login_ Window Tnteret ore HHM ORACLE ORACLE FLEXCUBE UNIVERSAL BANKING Login E ORACLE 9 1 2 New CSS The following step
24. le Designer for Oracle FLEXCUBE Universal Banking 8 Page Templates Form Elements Text Tables Widgets Landing Page Forms Dialogs Menu bar m Toolbar Explorer bar Dashboard The style designer window consists of the following three main components e Toolbar e Navigation Tabs e Workspace These components are explained in detail in the subsequent sections 2 2 4 Toolbar The top most layer appearing in the application screen indicates the toolbar The toolbar displays all the actions that you can perform on the interface elements E Arial 4pt BZU A B Some of the actions that you can perform in the toolbar are listed below e Change formatting properties like fonts font size font style etc e Change the alignment of the text to left right or center e Change the color of the font e Change the background properties and background image of the element e Change the border properties of the element The options in the toolbar are enabled or disabled based on whether the related property is applicable to the interface element you wish to modify 2 2 5 Navigation Tabs The navigation section appears below the toolbar The navigation section displays tabs at two levels The tabs at the first level indicate the various interface elements present in Oracle 7 ORACLE 2 2 6 FLEXCUBE The tabs at the second level display the options present under each interface element type Page Templates Form Elements Text Tab
25. les Widgets Landing Page Forms Dialogs For example Page Templates has the options Landing Page Forms and Dialog which get displayed at the second level You can select the element you wish to modify from the options that are displayed here For more details on interface elements refer the chapter User Interface Elements in this user manual Workspace The lower portion of the screen below the toolbar and the navigation tabs indicates the workspace The workspace provides a simulation of the interface element that you have selected in the navigation section The workspace is a WYSWYG area that reflects the modifications you have performed on the selected interface element The following diagram illustrates the workspace that gets displayed when you select the Landing Page option under Page Templates Menu bar mi Toolbar Explorer bar Dashboard Status Bar Once you select an element in the navigation section the workspace simulates the same and only the actions that you can perform on a selected element will be enabled in the toolbar In this case you can change the background and the border properties of the Menu bar Tool bar Explorer bar Status bar and the Dashboard elements oa ORACLE 3 1 3 1 1 3 User Interface Elements Introduction The interface elements that constitute Oracle FLEXCUBE user interface can be classified into five major groups as given b
26. lly Menu Accounting and MIS Asset Management Auto Billing Clients Bank Parameters Billing Bills and Collections Branch Parameters Card Maintenance Cards Clearing Collections Common Entity Compliance Checks Corporate Deposits Corporate Teller Customer Accounts Customers Dash Board EOC Operations Exchange Traded Derivatives Expense Processing Fixed Assets Foreign Exchange Funds Transfer GL Balance Gateway Generic Interface Integrated Liquidity Management Interactions Interface Intermediaries Inventory Islamic Accounts Islamic Asset Management Islamic Assets Islamic BC Islamic Derivatives Islamic Financing Islamic Integrated Liquidity Management Islamic Letters of Credit Islamic Money Market Islamic Profits Islamic Securitization Jobs Leasing Lending Letters of Credit Limits amp Collaterals Limits Replication Limits and Collaterals E E E El El El E E E E E El El E E E E El El m El BAH HH HH E 7a AR FH PAAR AH we IF aan Svndiestionm ER ORACLE 3 1 6 5 Tree Menu A tree menu is used to display information in a hierarchical form It consists of items called branches or nodes which can in turn contain many sub items You can expand or collapse a tree node to display or hide the sub items Asset Management Authorization Auto Billing Clients Bank Parameters hal Accounting Periods E Customized Customer Parameters E Detailed E UMm
27. s explain how to deploy a newly created CSS and related images in Oracle FLEXCUBE example has been given for ExtFlexTest css 1 The Style Designer will create the new theme CSS file as ExtFlexTest css and the images folder as ExtFlexTest 2 Copy the new theme CSS file obtained from the Style designer in the Theme folder in the application deployed area of the server i e FCJNeoWeb Theme O Theme File Edit View Favorites Tools Help Back gt yo Search gt Folders Ez Address FCUBS10 3DEV FCJNeoWeb Theme File and Folder Tasks a Make a new Folder Ue Publish this Folder to the Web Other Places E FCINeoWeb ES My Documents ig My Computer My Network Places Details Theme File Folder a a Name Sy Recneneed gt Exten DextFlexblue E ExtFlexblue css bak gt ExtFlexbrown gt ExtFlexgrey gt ExtFlexTest DEXtLTR DEXtRTL gt Flexblue Flexblue_ABS gt Flexbrown A Flexbrown_ABS gt Flexgrey A Flexgrey_ABS gt fr dj SLTR SRT smappbrw Type Cascading Style Sh Cascading Style Sh Cascading Style Sh Cascading Style Sh Cascading Style Sh Cascading Style Sh BAK File Cascading Style Sh Cascading Style Sh Cascading Style Sh Cascading Style Sh Cascading Style Sh Cascading Style Sh Cascading Style Sh Cascading Style Sh Cascading Style Sh Cascading Style Sh Casc
28. sets Labels A label is a name associated with a form element that identifies the element or group of elements The following graphic displays the different instances of using labels in Oracle FLEXCUBE user interface Mame status _ Frozen Title E Individual Address F Deceased Corporate F Wihereabouts unknown Bank Inputs Input elements can be any of the following e Text box e Text area e Select box e Check box e Radio button The following graphic displays the different input elements that are used in Oracle FLEXCUBE user interface Text Box Select Box TextArea 4 Checkbox Radio Ed Buttons Two types of buttons are used in Oracle FLEXCUBE user interface text buttons and image buttons as illustrated below ES Buttont TA ORACLE 3 1 3 3 Field Sets 3 1 9 3 1 5 1 A set of form elements grouped together constitute a field set A field set usually groups a set of fields that are logically related to each other as indicated in the diagram given below Geographic Language Country Mationalty Exposure Location Unique identifica Mame value Here Geograhic and Unique Identifier are field sets that represent two logical groupings of fields Text Text appearing in a page can be classified as follows e Normal text e Hyperlink e Heading 1 e Heading 2 e Heading 3 e Heading 4 Tables Tables are used for displaying information
29. to perform to modify the background image for any desired interface element is explained taking an example 4 Assume that you wish to change the background image for the Dashboard area in the Landing Page 5 To modify the background image you need to select the image by clicking Browse positioned next to the Background Image text box and selecting the required image from di ORACLE the image folder created for the theme You can select the image in the Select Image screen that gets displayed E Select image Web Page Dialog Browse oK Cancel You need to copy the required image to the image folder created for the theme before using it here Style Designer prompts for the correct image folder path if you specify a location other than this 6 After selecting the image you can specify the tiling and position details of the image in the Background screen 3 Background Web Page Dialog Background Image ExtFlexblue alert_info gif Browse Tiling Tile horizontally Scrolling Scrolling background Horizontal Position Do E Vertical Position 50 px Background Color HTT Reset OK Cancel i ORACLE The following screen gets displayed when you select Tile Horizontally at Vertical Position 50 pixels ORACLE Style Designer for Oracle FLEXCUBE Universal Banking E H Page Templates Form Elements Text Tables Widgets
30. when you try to open StyleDesigner htm You need to click Yes button here to invoke the application Internet Explorer X 5 An Activex control on this page might be unsafe to ve Interact with other parts of the page Do you want to allow this interaction ve C If you click No in this window or close the window the following message gets displayed indicating the error that might have happened during loading of the application and the possible corrections for the same Style Designer exited unexpectedly while loading This may be due to restrictions in Actives interaction Please try the following to correct this l Enable Activex interaction in your browser and try again 5 Donotaccess Style Designer via a network path always run it from your local machine Make sure the all the files under the tolder Theme are a writable Click here to go back If you select Yes in the previous window to allow Active X interactions the following Style Designer window gets displayed Create new theme Select theme ok Cance In this screen you can indicate whether you want to modify an existing theme or create a new theme for the interface elements 2 2 ORACLE 2 2 2 2 2 3 Modifying Existing Theme select the option Modify Theme in the Style Designer screen to modify an existing theme You also need to select the theme which you want to modify from the S
31. ypes of widgets used by Oracle FLEXCUBE user interface are as follows ORACLE 3 1 6 1 Menu Bar The menu bar is positioned at the top of the application screen and displays application specific menus links and other elements Action Operation Options Windows Help Enter Giuery Execute Giuery Cache C Debug Mode E Debug window Change Pas weord Change Branch 3 1 6 2 Tool Bar Tool bar is positioned below the menu bar and displays the icons buttons etc used to input information Toolbars provide a graphical alternative to many of the actions that you can perform using menu bars 3 1 6 3 Horizontal Tab Horizontal tab is a navigational widget element used to switch between various interface elements You need to click a tab to activate it and the associated contents become visible Contract Main Contract Details Parties Document Shipment Exception Discrepancies Follover Reference Amounts Letter Of Credit lssue ES Liquidation Bill Amount Date Bill Currency Az Our Letter Of Credit a Their Charge Currency z Outstanding Amount Their Charge Amount Bill Amount in Local G Their Letter of Credit TATEN Reference Letter of Credit Amount Our Letter of Credit z Letter Of Credit Liability Reference Amount Collection Reference Only one horizontal tab can be active at a time ORACLE 3 1 6 4 Vertical Tab Vertical tabs are functionally similar to horizontal tabs except that the tabs are positioned vertica
Download Pdf Manuals
Related Search